Skip to content

Commit 8644bae

Browse files
teleskop150750teleskop150750
committed
feat: Menu
1 parent a991db7 commit 8644bae

File tree

134 files changed

+2764
-1234
lines changed

Some content is hidden

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

134 files changed

+2764
-1234
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ Enter the component you want most in the components, leave the emojis and follow
7474
| [Collection](https://vue-primitives.netlify.app/?path=/story/utilities-rovingfocusgroup--basic) | ✓ |
7575
| [DismissableLayer](https://vue-primitives.netlify.app/?path=/story/utilities-dismissablelayer--basic) | ✓ |
7676
| [FocusScope](https://vue-primitives.netlify.app/?path=/story/utilities-focusscope--basic) | ✓ |
77-
| Menu | 🚧 |
77+
| [Menu](https://vue-primitives.netlify.app/?path=/story/utilities-menu--styled) | ✓ |
7878
| [Popper](https://vue-primitives.netlify.app/?path=/story/utilities-popper--styled) | ✓ |
7979
| [Portal](https://vue-primitives.netlify.app/?path=/story/utilities-portal--base) | ✓ |
8080
| [Presence](https://vue-primitives.netlify.app/?path=/story/utilities-presence--basic) | ✓ |

‎packages/vue-primitives/build.config.ts‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎packages/vue-primitives/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,6 @@
202202
"jsdom": "^25.0.0",
203203
"npm-run-all2": "^6.2.2",
204204
"storybook": "^8.2.9",
205-
"unbuild": "^2.0.0",
206205
"vite": "^5.4.3",
207206
"vite-plugin-dts": "^4.2.1",
208207
"vite-plugin-externalize-deps": "^0.8.0",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export interface AccordionImplProps {
7474

7575
export const ACCORDION_KEYS = ['Home', 'End', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight']
7676

77-
export const [Collection, useCollection] = createCollection<HTMLButtonElement, undefined>('Accordion')
77+
export const [Collection, useCollection] = createCollection<HTMLButtonElement>('Accordion')
7878

7979
export interface AccordionContext {
8080
id: string

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,14 @@ const props = withDefaults(defineProps<AccordionRootProps<T>>(), {
2222
})
2323
const emit = defineEmits<AccordionRootEmits<T>>()
2424
25-
const $el = useRef<HTMLElement>()
26-
const forwardElement = useForwardElement($el)
25+
const elRef = useRef<HTMLElement>()
26+
const forwardElement = useForwardElement(elRef)
2727
2828
const direction = useDirection(() => props.dir)
2929
const value = useControllableState(props, v => emit('update:value', v as Value), 'value', props.defaultValue)
3030
const TYPE_SINGLE = 'single' as const satisfies AccordionType
3131
32-
const collectionContext = Collection.provideCollectionContext($el)
33-
34-
const getItems = useCollection(collectionContext)
32+
const getItems = useCollection(Collection.provideCollectionContext(elRef))
3533
3634
const onKeydown = composeEventHandlers<KeyboardEvent>((event) => {
3735
if (props.disabled)

‎packages/vue-primitives/src/alert-dialog/AlertDialogRoot.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import { provideDialogContext } from '../dialog/index.ts'
33
import { useControllableState, useId, useRef } from '../hooks/index.ts'
4-
import type { DialogContentElement } from '../dialog/DialogRoot.ts'
4+
import type { DialogContentElement } from '../dialog/index.ts'
55
import type { AlertDialogRootEmits, AlertDialogRootProps } from './AlertDialogRoot.ts'
66
77
defineOptions({

‎packages/vue-primitives/src/aspect-ratio/AspectRatio.vue‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
<script setup lang="ts">
2-
import { shallowRef } from 'vue'
3-
import { useForwardElement } from '../hooks/index.ts'
42
import { Primitive } from '../primitive/index.ts'
53
import type { AspectRatioProps } from './AspectRatio.ts'
64
@@ -12,13 +10,6 @@ defineOptions({
1210
withDefaults(defineProps<AspectRatioProps>(), {
1311
ratio: 1,
1412
})
15-
16-
const $el = shallowRef<HTMLElement>()
17-
const forwardElement = useForwardElement($el)
18-
19-
defineExpose({
20-
$el,
21-
})
2213
</script>
2314

2415
<template>
@@ -33,7 +24,6 @@ defineExpose({
3324
data-radix-aspect-ratio-wrapper=""
3425
>
3526
<Primitive
36-
:ref="forwardElement"
3727
v-bind="$attrs"
3828
:style="{
3929
// ensures children expand in ratio

‎packages/vue-primitives/src/collection/Collection.ts‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export interface CollectionContext {
1010
collectionRef: MutableRefObject<HTMLElement | undefined>
1111
}
1212

13-
export function createCollection<ItemElement extends HTMLElement, ItemData = object>(name: string) {
13+
export function createCollection<ItemElement extends HTMLElement, ItemData = Record<string, any>>(name: string) {
1414
const [_provideCollectionContext, useCollectionContext] = createContext<CollectionContext>(`${name}CollectionProvider`)
1515

1616
type CollectionItem = ItemElementWithData<ItemElement, ItemData>
@@ -26,23 +26,35 @@ export function createCollection<ItemElement extends HTMLElement, ItemData = obj
2626
return context
2727
}
2828

29-
function useCollectionItem(currentElement: ItemElement | undefined, attrs: ItemData) {
29+
function useCollectionItem<K extends keyof ItemData>(currentElement: ItemElement | undefined, attrs: ItemData[K], key: K) {
3030
const unrefElement = currentElement as CollectionItem | undefined
31-
if (!unrefElement || '$$rcid' in unrefElement)
31+
if (!unrefElement)
3232
return
3333

34-
(unrefElement as any).$$rcid = attrs
34+
if ('$$rcid' in unrefElement) {
35+
if (!key)
36+
return
37+
if (key in unrefElement)
38+
return
39+
}
40+
41+
if (key) {
42+
(unrefElement as any).$$rcid = (unrefElement as any).$$rcid || {}
43+
; (unrefElement as any).$$rcid[key] = attrs
44+
}
45+
else {
46+
(unrefElement as any).$$rcid = attrs
47+
}
3548
}
3649

3750
function useCollection(thereContext?: CollectionContext) {
3851
const context = thereContext || useCollectionContext(`${name}CollectionConsumer`)
3952

4053
function getItems(): CollectionItem[] {
41-
const collectionNode = context.collectionRef.current
42-
if (!collectionNode)
54+
if (!context.collectionRef.current)
4355
return []
4456

45-
const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${DATA_COLLECTION_ITEM}]`))
57+
const orderedNodes = Array.from(context.collectionRef.current.querySelectorAll(`[${DATA_COLLECTION_ITEM}]`))
4658

4759
return orderedNodes as CollectionItem[]
4860
}

‎packages/vue-primitives/src/collection/stories/item.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<script setup lang="ts">
22
import { useAttrs } from 'vue'
3-
import { useComposedElements } from '../../hooks/useComposedElements.ts'
3+
import { useComposedElements } from '../../hooks/index.ts'
44
import { isPropFalsy } from '../../utils/is.ts'
5-
import { DATA_COLLECTION_ITEM } from '../Collection.ts'
5+
import { DATA_COLLECTION_ITEM } from '../index.ts'
66
import { Collection, type ItemData } from './utils.ts'
77
88
const attrs = useAttrs()
99
1010
const composedElements = useComposedElements((v) => {
11-
Collection.useCollectionItem(v, attrs as unknown as ItemData)
11+
Collection.useCollectionItem(v, attrs as unknown as ItemData['demo'], 'demo')
1212
})
1313
</script>
1414

‎packages/vue-primitives/src/collection/stories/utils.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { createCollection } from '../index.ts'
22

3-
export interface ItemData { disabled: boolean }
3+
export interface ItemData {
4+
demo: { disabled: boolean }
5+
}
46

5-
export const [Collection, useCollection] = createCollection<HTMLElement, ItemData>('List')
7+
export const [Collection, useCollection] = createCollection<HTMLElement, ItemData, 'demo'>('List')

0 commit comments

Comments
 (0)