Skip to content

Commit 4e0937e

Browse files
teleskop150750teleskop150750
committed
feat: refactor
1 parent ab54e6a commit 4e0937e

File tree

323 files changed

+3353
-2912
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

323 files changed

+3353
-2912
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@
1515
"root-lint:fix": "eslint . --fix"
1616
},
1717
"devDependencies": {
18-
"@antfu/eslint-config": "^3.1.0",
18+
"@antfu/eslint-config": "^3.4.1",
1919
"@teleskop150750/typescript-config": "workspace:*",
20-
"@types/node": "^20.16.4",
20+
"@types/node": "^20.16.5",
2121
"eslint": "npm:[email protected]",
2222
"eslint-ts-patch": "9.4.0-0",
2323
"prettier": "^3.3.3",

‎packages/vue-primitives/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@
194194
"@storybook/vue3-vite": "^8.2.9",
195195
"@tsconfig/node20": "^20.1.4",
196196
"@types/jsdom": "^21.1.7",
197-
"@types/node": "^20.16.4",
197+
"@types/node": "^20.16.5",
198198
"@vitejs/plugin-vue": "^5.1.3",
199199
"@vitejs/plugin-vue-jsx": "^4.0.1",
200200
"@vue/test-utils": "^2.4.6",
@@ -204,10 +204,10 @@
204204
"storybook": "^8.2.9",
205205
"unbuild": "^2.0.0",
206206
"vite": "^5.4.3",
207-
"vite-plugin-dts": "^4.1.0",
207+
"vite-plugin-dts": "^4.2.1",
208208
"vite-plugin-externalize-deps": "^0.8.0",
209209
"vitest": "^2.0.5",
210-
"vue": "^3.5.0",
210+
"vue": "^3.5.3",
211211
"vue-tsc": "^2.1.6"
212212
}
213213
}

‎packages/vue-primitives/src/accordion/AccordionContent.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import type { CollapsibleContentProps } from '../collapsible/index.ts'
2+
3+
export type AccordionContentProps = CollapsibleContentProps

‎packages/vue-primitives/src/accordion/AccordionContent.vue‎

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,47 @@
11
<script setup lang="ts">
2-
import { CollapsibleContent } from '../collapsible/index.ts'
3-
import { useAccordionContext } from './AccordionRoot.ts'
2+
import { shallowRef } from 'vue'
3+
import { useCollapsibleContent } from '../collapsible/CollapsibleContent.ts'
4+
import { useForwardElement } from '../hooks/useForwardElement.ts'
5+
import { Primitive } from '../primitive/index.ts'
46
import { useAccordionItemContext } from './AccordionItem.ts'
7+
import { useAccordionContext } from './AccordionRoot.ts'
8+
import { getState } from './utils.ts'
9+
import type { AccordionContentProps } from './AccordionContent.ts'
510
611
defineOptions({
712
name: 'AccordionContent',
813
})
914
15+
const props = defineProps<AccordionContentProps>()
16+
1017
const accordionContext = useAccordionContext('AccordionContent')
1118
const itemContext = useAccordionItemContext('AccordionContent')
19+
20+
const $el = shallowRef<HTMLElement>()
21+
const forwardElement = useForwardElement($el)
22+
23+
const collapsibleContent = useCollapsibleContent($el, props)
1224
</script>
1325

1426
<template>
15-
<CollapsibleContent
27+
<Primitive
28+
:id="collapsibleContent.context.contentId"
29+
:ref="forwardElement"
30+
:data-state="getState(collapsibleContent.context.open.value)"
31+
:data-disabled="collapsibleContent.context.disabled() ? '' : undefined"
32+
:hidden="!collapsibleContent.isOpen.value"
33+
:style="{
34+
'--radix-collapsible-content-height': '0px',
35+
'--radix-collapsible-content-width': '0px',
36+
'--radix-accordion-content-height': 'var(--radix-collapsible-content-height)',
37+
'--radix-accordion-content-width': 'var(--radix-collapsible-content-width)',
38+
...collapsibleContent.blockAnimationStyles.value,
39+
}"
40+
1641
role="region"
1742
:aria-labelledby="itemContext.triggerId"
1843
:data-orientation="accordionContext.orientation"
19-
style="--radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-accordion-content-width: var(--radix-collapsible-content-width);"
2044
>
21-
<slot />
22-
</CollapsibleContent>
45+
<slot v-if="collapsibleContent.isOpen.value" />
46+
</Primitive>
2347
</template>

‎packages/vue-primitives/src/accordion/AccordionHeader.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<script setup lang="ts">
22
import { Primitive } from '../primitive/index.ts'
3-
import { useAccordionContext } from './AccordionRoot.ts'
4-
import type { AccordionHeaderProps } from './AccordionHeader.ts'
53
import { useAccordionItemContext } from './AccordionItem.ts'
4+
import { useAccordionContext } from './AccordionRoot.ts'
65
import { getState } from './utils.ts'
6+
import type { AccordionHeaderProps } from './AccordionHeader.ts'
77
88
defineOptions({
99
name: 'AccordionHeader',

‎packages/vue-primitives/src/accordion/AccordionItem.vue‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<script setup lang="ts">
22
import { computed } from 'vue'
3-
import { CollapsibleRoot } from '../collapsible/index.ts'
3+
import { provideCollapsibleContext } from '../collapsible/index.ts'
44
import { useId } from '../hooks/index.ts'
5+
import { Primitive } from '../primitive/index.ts'
56
import { type AccordionItemProps, provideAccordionItemContext } from './AccordionItem.ts'
67
import { useAccordionContext } from './AccordionRoot.ts'
78
import { getState } from './utils.ts'
@@ -28,16 +29,26 @@ provideAccordionItemContext({
2829
disabled,
2930
triggerId: useId(),
3031
})
32+
33+
provideCollapsibleContext({
34+
contentId: useId(),
35+
disabled() {
36+
return props.disabled
37+
},
38+
open,
39+
onOpenToggle() {
40+
onUpdateOpen(!open.value)
41+
},
42+
})
3143
</script>
3244

3345
<template>
34-
<CollapsibleRoot
46+
<Primitive
3547
:data-orientation="context.orientation"
3648
:data-state="getState(open)"
3749
:disabled="disabled"
38-
:open="open"
39-
@update:open="onUpdateOpen"
50+
:data-disabled="disabled ? '' : undefined"
4051
>
4152
<slot />
42-
</CollapsibleRoot>
53+
</Primitive>
4354
</template>

‎packages/vue-primitives/src/accordion/AccordionRoot.vue‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { computed } from 'vue'
33
import { useDirection } from '../direction/Direction.ts'
44
import { useControllableState, useForwardElement, useId, useRef } from '../hooks/index.ts'
55
import { Primitive } from '../primitive/index.ts'
6-
import { composeEventHandlers } from '../utils/vue.ts'
76
import { arrayify } from '../utils/array.ts'
7+
import { composeEventHandlers } from '../utils/vue.ts'
88
import { ACCORDION_KEYS, type AccordionRootEmits, type AccordionRootProps, type AccordionType, Collection, provideAccordionContext, useCollection } from './AccordionRoot.ts'
99
1010
type SingleValue = Exclude<AccordionRootProps<'single'>['value'], undefined>
@@ -34,13 +34,17 @@ const collectionContext = Collection.provideCollectionContext($el)
3434
const getItems = useCollection(collectionContext)
3535
3636
const onKeydown = composeEventHandlers<KeyboardEvent>((event) => {
37+
if (props.disabled)
38+
return
3739
emit('keydown', event)
3840
}, (event) => {
41+
if (props.disabled)
42+
return
3943
if (!ACCORDION_KEYS.includes(event.key))
4044
return
4145
const target = event.target as HTMLElement
42-
const triggerCollection = getItems().filter(item => !item.ref.disabled)
43-
const triggerIndex = triggerCollection.findIndex(item => item.ref === target)
46+
const triggerCollection = getItems().filter(item => !item.disabled)
47+
const triggerIndex = triggerCollection.findIndex(item => item === target)
4448
const triggerCount = triggerCollection.length
4549
4650
if (triggerIndex === -1)
@@ -107,7 +111,7 @@ const onKeydown = composeEventHandlers<KeyboardEvent>((event) => {
107111
}
108112
109113
const clampedIndex = nextIndex % triggerCount
110-
triggerCollection[clampedIndex]?.ref.focus()
114+
triggerCollection[clampedIndex]?.focus()
111115
})
112116
113117
provideAccordionContext({
@@ -149,10 +153,7 @@ provideAccordionContext({
149153
<Primitive
150154
:ref="forwardElement"
151155
:data-orientation="orientation"
152-
data-root
153-
v-bind="{
154-
onKeydown: props.disabled ? undefined : onKeydown,
155-
}"
156+
@keydown="onKeydown"
156157
>
157158
<slot />
158159
</Primitive>

‎packages/vue-primitives/src/accordion/AccordionTrigger.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import type { CollapsibleTriggerEmits } from '../collapsible/index.ts'
2+
import type { PrimitiveProps } from '../primitive/Primitive.ts'
3+
4+
export interface AccordionTriggerProps {
5+
as?: PrimitiveProps['as']
6+
}
7+
8+
export type AccordionTriggerEmits = CollapsibleTriggerEmits

‎packages/vue-primitives/src/accordion/AccordionTrigger.vue‎

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,54 @@
11
<script setup lang="ts">
22
import { shallowRef } from 'vue'
3-
import { CollapsibleTrigger } from '../collapsible/index.ts'
4-
import { ITEM_DATA_ATTR } from '../collection/Collection.ts'
3+
import { useCollapsibleContext } from '../collapsible/index.ts'
4+
import { ITEM_DATA_ATTR } from '../collection/index.ts'
55
import { useForwardElement } from '../hooks/index.ts'
6-
import { Collection, useAccordionContext } from './AccordionRoot.ts'
6+
import { Primitive } from '../primitive/index.ts'
7+
import { composeEventHandlers } from '../utils/vue.ts'
78
import { useAccordionItemContext } from './AccordionItem.ts'
9+
import { useAccordionContext } from './AccordionRoot.ts'
10+
import { getState } from './utils.ts'
11+
import type { AccordionTriggerEmits, AccordionTriggerProps } from './AccordionTrigger.ts'
812
913
defineOptions({
1014
name: 'AccordionTrigger',
1115
})
1216
17+
withDefaults(defineProps<AccordionTriggerProps>(), {
18+
as: 'button',
19+
})
20+
const emit = defineEmits<AccordionTriggerEmits>()
21+
1322
const $el = shallowRef<HTMLButtonElement>()
1423
const forwardElement = useForwardElement($el)
1524
16-
Collection.useCollectionItem($el, undefined)
17-
1825
const accordionContext = useAccordionContext('AccordionTrigger')
1926
const itemContext = useAccordionItemContext('AccordionHeader')
27+
28+
const context = useCollapsibleContext('CollapsibleTrigger')
29+
30+
const onClick = composeEventHandlers<MouseEvent>((event) => {
31+
emit('click', event)
32+
}, context.onOpenToggle)
2033
</script>
2134

2235
<template>
23-
<CollapsibleTrigger
36+
<Primitive
2437
:id="itemContext.triggerId"
2538
:ref="forwardElement"
39+
:as="as"
2640
:aria-disabled="(itemContext.open.value && !accordionContext.collapsible) || undefined"
2741
:data-orientation="accordionContext.orientation"
2842
:[ITEM_DATA_ATTR]="true"
43+
44+
type="button"
45+
:aria-controls="context.contentId"
46+
:aria-expanded="context.open.value || false"
47+
:data-state="getState(context.open.value)"
48+
:data-disabled="context.disabled() ? '' : undefined"
49+
:disabled="context.disabled()"
50+
@click="onClick"
2951
>
3052
<slot />
31-
</CollapsibleTrigger>
53+
</Primitive>
3254
</template>

‎packages/vue-primitives/src/accordion/index.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
export { default as AccordionRoot } from './AccordionRoot.vue'
2-
export { default as AccordionItem } from './AccordionItem.vue'
3-
export { default as AccordionHeader } from './AccordionHeader.vue'
4-
export { default as AccordionTrigger } from './AccordionTrigger.vue'
51
export { default as AccordionContent } from './AccordionContent.vue'
6-
7-
export { type AccordionRootProps, type AccordionRootEmits, type AccordionContext, provideAccordionContext, useAccordionContext } from './AccordionRoot.ts'
8-
export { type AccordionItemProps, type AccordionItemContext, provideAccordionItemContext, useAccordionItemContext } from './AccordionItem.ts'
92
export { type AccordionHeaderProps } from './AccordionHeader.ts'
3+
export { default as AccordionHeader } from './AccordionHeader.vue'
4+
export { type AccordionItemContext, type AccordionItemProps, provideAccordionItemContext, useAccordionItemContext } from './AccordionItem.ts'
5+
export { default as AccordionItem } from './AccordionItem.vue'
6+
7+
export { type AccordionContext, type AccordionRootEmits, type AccordionRootProps, provideAccordionContext, useAccordionContext } from './AccordionRoot.ts'
8+
export { default as AccordionRoot } from './AccordionRoot.vue'
9+
export { default as AccordionTrigger } from './AccordionTrigger.vue'

0 commit comments

Comments
 (0)