fix(ui): improve Heading component
This commit is contained in:
upsiflu
parent
48800e2eee
commit
e16d0a6130
|
|
@ -1,28 +1,35 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
[H in `h${'1' | '2' | '3' | '4' | '5' | '6' | '7'}`]? : string
|
||||
} & {[S in 'page-heading' | 'section-heading' | 'subsection-heading' | 'caption' | 'title' | 'radio' | 'secondary' ]? : true}>()
|
||||
|
||||
const [level, title] = Object.entries(props).find(([key, value]) => value && key.startsWith('h')) || ['h1', '']
|
||||
const size = Object.entries(props).find(([key, value]) => value && key!==level)?.[0] || 'section-heading'
|
||||
const size = computed(()=>(Object.entries(props).find(([key, value]) => value && key!==level)?.[0] || 'section-heading').replace('-', '').toLowerCase())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="level" :class="size" style="margin: 0; padding: 0; vertical-align: baseline;">
|
||||
{{ title }}
|
||||
<component :is="level" :class="[$style[size], $style.heading]">
|
||||
<slot name="before" />
|
||||
{{ title }}
|
||||
<slot />
|
||||
<slot name="after" />
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
<style module>
|
||||
/* Any heading */
|
||||
:is(h1, h2, h3, h4, h5, h6).heading { margin: 0; padding:0; vertical-align: baseline; align-self: baseline;}
|
||||
|
||||
/* Page heading */
|
||||
.pageHeading { font-size: 36px; font-weight: 900; letter-spacing: -1px; }
|
||||
.pageheading { font-size: 36px; font-weight: 900; letter-spacing: -1px; }
|
||||
|
||||
/* Section heading, Modal heading [DEFAULT] */
|
||||
.sectionHeading { font-size: 20px; font-weight: 700; letter-spacing: -.5px; }
|
||||
.sectionheading { font-size: 20px; font-weight: 700; letter-spacing: -.5px; }
|
||||
|
||||
/* Form subsection */
|
||||
.subsectionHeading {font-size: 16px; font-weight: 600; letter-spacing: 0; }
|
||||
.subsectionheading {font-size: 16px; font-weight: 600; letter-spacing: 0; }
|
||||
|
||||
/* input caption */
|
||||
.caption {font-size: 14px; font-weight: 600; letter-spacing: .25px; }
|
||||
|
|
|
|||
|
|
@ -24,19 +24,31 @@ Consult [the allyproject for a comprehensive guide on headings](https://www.a11y
|
|||
|
||||
---
|
||||
|
||||
<Heading h1 page-heading>Page heading</Heading>
|
||||
```vue-html
|
||||
<Heading h1="Page heading" page-heading />
|
||||
```
|
||||
|
||||
<Heading h1="Page heading" page-heading />
|
||||
|
||||
Use this visual size on the main heading of the page.
|
||||
|
||||
---
|
||||
|
||||
<Heading h3 section-heading>Section heading</Heading>
|
||||
```vue-html
|
||||
<Heading h3="Section heading" section-heading />
|
||||
```
|
||||
|
||||
<Heading h3="Section heading" section-heading />
|
||||
|
||||
Use section headings to subdivide the main content on the page. Also use for modal headings. This is the default visual size.
|
||||
|
||||
---
|
||||
|
||||
<Heading h3 subsection-heading>Subsection heading</Heading>
|
||||
```vue-html
|
||||
<Heading h3="Subsection heading" subsection-heading />
|
||||
```
|
||||
|
||||
<Heading h3="Subsection heading" subsection-heading />
|
||||
|
||||
Use subsection headings to break long sections or forms with several groups into digestible subsections.
|
||||
|
||||
|
|
@ -44,24 +56,62 @@ Use subsection headings to break long sections or forms with several groups into
|
|||
|
||||
---
|
||||
|
||||
<Heading h4 caption>Caption</Heading>
|
||||
```vue-html
|
||||
<Heading h4="Caption" caption />
|
||||
```
|
||||
|
||||
<Heading h4="Caption" caption />
|
||||
|
||||
Caption-style headings are found only within forms.
|
||||
|
||||
---
|
||||
|
||||
<Heading h3 title>Title</Heading>
|
||||
```vue-html
|
||||
<Heading h3="Title" title />
|
||||
```
|
||||
|
||||
<Heading h3="Title" title />
|
||||
|
||||
Use this visual size to title [Tabs](/components/ui/tabs), Channels, [Cards](/components/ui/card) and [Activities](/components/ui/activity).
|
||||
|
||||
---
|
||||
|
||||
<Heading h3 radio>Radio</Heading>
|
||||
```vue-html
|
||||
<Heading h3="Radio" radio />
|
||||
```
|
||||
|
||||
<Heading h3="Radio" radio />
|
||||
|
||||
Radio cards have giant titles.
|
||||
|
||||
---
|
||||
|
||||
<Heading h3 secondary>Secondary</Heading>
|
||||
```vue-html
|
||||
<Heading h3="Secondary" secondary />
|
||||
```
|
||||
|
||||
<Heading h3="Secondary" secondary />
|
||||
|
||||
A card may have a secondary title, [as exemplified in the designs](https://design.funkwhale.audio/#/workspace/a4e0101a-252c-80ef-8003-918b4c2c3927/e3a187f0-0f5e-11ed-adb9-fff9e854a67c?page-id=5e293790-52d3-11ed-9497-8deeaf0bfa97).
|
||||
|
||||
## Add content to the left and to the right
|
||||
|
||||
```vue-html
|
||||
<Heading h2="Heading" page-heading>
|
||||
<template #before>
|
||||
(Before)
|
||||
</template>
|
||||
<template #after>
|
||||
(After)
|
||||
</template>
|
||||
</Heading>
|
||||
```
|
||||
|
||||
<Heading h2="Heading" page-heading>
|
||||
<template #before>
|
||||
(Before)
|
||||
</template>
|
||||
<template #after>
|
||||
(After)
|
||||
</template>
|
||||
</Heading>
|
||||
|
|
|
|||
Loading…
Reference in New Issue