Skip to content

Commit 2517193

Browse files
lepturelepture
committed
feat!: update Accordion component design
1 parent dfee426 commit 2517193

20 files changed

+716
-132
lines changed

‎.vitepress/meta/AccordionIndicator.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"props": [
3+
{
4+
"name": "variant",
5+
"description": "<p>The indicator icon for the accordion trigger.</p>",
6+
"type": "\"chevron\" | \"plus\"",
7+
"required": false,
8+
"inherit": null,
9+
"default": "\"chevron\""
10+
}
11+
],
12+
"events": [],
13+
"slots": [],
14+
"methods": []
15+
}

‎.vitepress/meta/AccordionItem.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,10 @@
3131
},
3232
{
3333
"name": "value",
34-
"description": "<p>A string value for the accordion item. All items within an accordion should use a unique value.</p>",
34+
"description": "<p>A string identifier for the accordion item. If omitted, a unique value will be generated automatically.</p>",
3535
"type": "string",
36-
"required": true,
37-
"inherit": "reka-ui"
36+
"required": false,
37+
"inherit": null
3838
}
3939
],
4040
"events": [],

‎.vitepress/meta/AccordionRoot.json‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,22 @@
4343
"required": false,
4444
"inherit": "reka-ui"
4545
},
46+
{
47+
"name": "indicatorIcon",
48+
"description": "<p>An indicator icon on the left or right of the trigger.</p>",
49+
"type": "\"none\" | \"chevron\" | \"plus\"",
50+
"required": false,
51+
"inherit": null,
52+
"default": "\"chevron\""
53+
},
54+
{
55+
"name": "indicatorSide",
56+
"description": "<p>The indicator icon's poistion, left or right.</p>",
57+
"type": "\"left\" | \"right\"",
58+
"required": false,
59+
"inherit": null,
60+
"default": "\"right\""
61+
},
4662
{
4763
"name": "modelValue",
4864
"description": "<p>The controlled value of the active item(s).</p>\n<p>Use this when you need to control the state of the items. Can be binded with <code>v-model</code></p>",
@@ -55,14 +71,16 @@
5571
"description": "<p>The orientation of the accordion.</p>",
5672
"type": "\"vertical\" | \"horizontal\"",
5773
"required": false,
58-
"inherit": "reka-ui"
74+
"inherit": null,
75+
"default": "\"vertical\""
5976
},
6077
{
6178
"name": "size",
62-
"description": "",
79+
"description": "<p>Control the size of the accordion.</p>",
6380
"type": "\"1\" | \"2\" | \"3\"",
6481
"required": false,
65-
"inherit": null
82+
"inherit": null,
83+
"default": "\"1\""
6684
},
6785
{
6886
"name": "type",

‎.vitepress/meta/AccordionTrigger.json‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,20 @@
1616
"inherit": "reka-ui"
1717
},
1818
{
19-
"name": "indicator",
20-
"description": "<p>The indicator icon for the accordion trigger.</p>",
21-
"type": "\"chevron\" | \"plus-minus\"",
19+
"name": "indicatorIcon",
20+
"description": "<p>An indicator icon on the left or right of the trigger.</p>",
21+
"type": "\"none\" | \"chevron\" | \"plus\"",
2222
"required": false,
2323
"inherit": null,
2424
"default": "\"chevron\""
25+
},
26+
{
27+
"name": "indicatorSide",
28+
"description": "<p>The indicator icon's poistion, left or right.</p>",
29+
"type": "\"left\" | \"right\"",
30+
"required": false,
31+
"inherit": null,
32+
"default": "\"right\""
2533
}
2634
],
2735
"events": [],

‎.vitepress/meta/CollapsibleIndicator.json‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
11
{
2-
"props": [
3-
{
4-
"name": "variant",
5-
"description": "",
6-
"type": "\"chevron\" | \"plus\"",
7-
"required": false,
8-
"inherit": null
9-
}
10-
],
2+
"props": [],
113
"events": [],
124
"slots": [],
135
"methods": []

‎docs/content/components/accordion.md‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: Accordion
3+
description: A vertically stacked set of interactive headings that each reveal an associated section of content.
4+
status: alpha
5+
source: https://github.com/typlog/ui/tree/main/src/components/accordion
6+
reka: https://reka-ui.com/docs/components/accordion
7+
---
8+
9+
<Example name="accordion/Overview.vue" variant="hide" />
10+
11+
## API Reference
12+
13+
#### AccordionRoot
14+
15+
<PropsTable name="AccordionRoot" />
16+
17+
#### AccordionItem
18+
19+
<PropsTable name="AccordionItem" />
20+
21+
#### AccordionTrigger
22+
23+
<PropsTable name="AccordionTrigger" />
24+
25+
#### AccordionIndicator
26+
27+
<PropsTable name="AccordionIndicator" />
28+
29+
#### AccordionContent
30+
31+
<PropsTable name="AccordionContent" />
32+
33+
## Examples
34+
35+
### Size
36+
37+
<Example name="accordion/Size.vue" />
38+
39+
### Indicator Side
40+
41+
#### Root
42+
43+
<Example name="accordion/RootIndicatorSide.vue" />
44+
45+
#### Trigger
46+
47+
<Example name="accordion/TriggerIndicatorSide.vue" />
48+
49+
### Indicator Icon
50+
51+
#### Root
52+
53+
<Example name="accordion/RootIndicatorIcon.vue" />
54+
55+
#### Trigger
56+
57+
<Example name="accordion/TriggerIndicatorIcon.vue" />

‎docs/content/components/tabs.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Tabs
33
description: Set of content sections to be displayed one at a time.
4-
status: stable
4+
status: beta
55
source: https://github.com/typlog/ui/tree/main/src/components/tabs
66
reka: https://reka-ui.com/docs/components/tabs
77
radix: https://www.radix-ui.com/themes/docs/components/tabs

‎docs/examples/accordion/Overview.vue‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script setup lang="ts">
2+
import {
3+
AccordionRoot,
4+
AccordionItem,
5+
AccordionTrigger,
6+
AccordionContent,
7+
} from '#components'
8+
</script>
9+
10+
<template>
11+
<AccordionRoot>
12+
<AccordionItem>
13+
<AccordionTrigger>
14+
What is @typlog/ui?
15+
</AccordionTrigger>
16+
<AccordionContent>
17+
<p><code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for consistent theming.</p>
18+
</AccordionContent>
19+
</AccordionItem>
20+
<AccordionItem>
21+
<AccordionTrigger>
22+
What is Reka UI?
23+
</AccordionTrigger>
24+
<AccordionContent>
25+
<p>Reka UI is inspired by the principles and goals of Radix UI, sharing a commitment to accessibility, customization, and developer-friendly design.</p>
26+
</AccordionContent>
27+
</AccordionItem>
28+
<AccordionItem>
29+
<AccordionTrigger>
30+
What is Radix UI?
31+
</AccordionTrigger>
32+
<AccordionContent>
33+
<p>Unstyled, accessible, open source React primitives for high-quality web apps and design systems.</p>
34+
</AccordionContent>
35+
</AccordionItem>
36+
</AccordionRoot>
37+
</template>

‎docs/examples/accordion/RootIndicatorIcon.vue‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<script setup lang="ts">
2+
import {
3+
AccordionRoot,
4+
AccordionItem,
5+
AccordionTrigger,
6+
AccordionContent,
7+
} from '#components'
8+
</script>
9+
10+
<template>
11+
<div class="flex flex-col gap-8">
12+
<AccordionRoot indicator-icon="chevron">
13+
<AccordionItem>
14+
<AccordionTrigger>
15+
What is @typlog/ui?
16+
</AccordionTrigger>
17+
<AccordionContent>
18+
<p>
19+
<code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for
20+
consistent theming.
21+
</p>
22+
</AccordionContent>
23+
</AccordionItem>
24+
<AccordionItem>
25+
<AccordionTrigger>
26+
What is Reka UI?
27+
</AccordionTrigger>
28+
<AccordionContent>
29+
<p>
30+
Reka UI is inspired by the principles and goals of Radix UI, sharing a commitment to accessibility,
31+
customization, and developer-friendly design.
32+
</p>
33+
</AccordionContent>
34+
</AccordionItem>
35+
<AccordionItem>
36+
<AccordionTrigger>
37+
What is Radix UI?
38+
</AccordionTrigger>
39+
<AccordionContent>
40+
<p>Unstyled, accessible, open source React primitives for high-quality web apps and design systems.</p>
41+
</AccordionContent>
42+
</AccordionItem>
43+
</AccordionRoot>
44+
45+
<AccordionRoot indicator-icon="plus">
46+
<AccordionItem>
47+
<AccordionTrigger>
48+
What is @typlog/ui?
49+
</AccordionTrigger>
50+
<AccordionContent>
51+
<p>
52+
<code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for
53+
consistent theming.
54+
</p>
55+
</AccordionContent>
56+
</AccordionItem>
57+
<AccordionItem>
58+
<AccordionTrigger>
59+
What is Reka UI?
60+
</AccordionTrigger>
61+
<AccordionContent>
62+
<p>
63+
Reka UI is inspired by the principles and goals of Radix UI, sharing a commitment to accessibility,
64+
customization, and developer-friendly design.
65+
</p>
66+
</AccordionContent>
67+
</AccordionItem>
68+
<AccordionItem>
69+
<AccordionTrigger>
70+
What is Radix UI?
71+
</AccordionTrigger>
72+
<AccordionContent>
73+
<p>Unstyled, accessible, open source React primitives for high-quality web apps and design systems.</p>
74+
</AccordionContent>
75+
</AccordionItem>
76+
</AccordionRoot>
77+
</div>
78+
</template>

‎docs/examples/accordion/RootIndicatorSide.vue‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<script setup lang="ts">
2+
import {
3+
AccordionRoot,
4+
AccordionItem,
5+
AccordionTrigger,
6+
AccordionContent,
7+
} from '#components'
8+
</script>
9+
10+
<template>
11+
<div class="flex flex-col gap-8">
12+
<AccordionRoot indicator-side="left">
13+
<AccordionItem>
14+
<AccordionTrigger>
15+
What is @typlog/ui?
16+
</AccordionTrigger>
17+
<AccordionContent>
18+
<p>
19+
<code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for
20+
consistent theming.
21+
</p>
22+
</AccordionContent>
23+
</AccordionItem>
24+
<AccordionItem>
25+
<AccordionTrigger>
26+
What is Reka UI?
27+
</AccordionTrigger>
28+
<AccordionContent>
29+
<p>
30+
Reka UI is inspired by the principles and goals of Radix UI, sharing a commitment to accessibility,
31+
customization, and developer-friendly design.
32+
</p>
33+
</AccordionContent>
34+
</AccordionItem>
35+
<AccordionItem>
36+
<AccordionTrigger>
37+
What is Radix UI?
38+
</AccordionTrigger>
39+
<AccordionContent>
40+
<p>Unstyled, accessible, open source React primitives for high-quality web apps and design systems.</p>
41+
</AccordionContent>
42+
</AccordionItem>
43+
</AccordionRoot>
44+
45+
<AccordionRoot indicator-side="right">
46+
<AccordionItem>
47+
<AccordionTrigger>
48+
What is @typlog/ui?
49+
</AccordionTrigger>
50+
<AccordionContent>
51+
<p>
52+
<code>@typlog/ui</code> extends <code>reka-ui</code> with pre-styled components and uses Radix Colors for
53+
consistent theming.
54+
</p>
55+
</AccordionContent>
56+
</AccordionItem>
57+
<AccordionItem>
58+
<AccordionTrigger>
59+
What is Reka UI?
60+
</AccordionTrigger>
61+
<AccordionContent>
62+
<p>
63+
Reka UI is inspired by the principles and goals of Radix UI, sharing a commitment to accessibility,
64+
customization, and developer-friendly design.
65+
</p>
66+
</AccordionContent>
67+
</AccordionItem>
68+
<AccordionItem>
69+
<AccordionTrigger>
70+
What is Radix UI?
71+
</AccordionTrigger>
72+
<AccordionContent>
73+
<p>Unstyled, accessible, open source React primitives for high-quality web apps and design systems.</p>
74+
</AccordionContent>
75+
</AccordionItem>
76+
</AccordionRoot>
77+
</div>
78+
</template>

0 commit comments

Comments
 (0)