feat: Menu

Author: teleskop150750

README.md

@@ -74,7 +74,7 @@ Enter the component you want most in the components, leave the emojis and follow
 | [Collection](https://vue-primitives.netlify.app/?path=/story/utilities-rovingfocusgroup--basic)       | ✓      |
 | [DismissableLayer](https://vue-primitives.netlify.app/?path=/story/utilities-dismissablelayer--basic) | ✓      |
 | [FocusScope](https://vue-primitives.netlify.app/?path=/story/utilities-focusscope--basic)             | ✓      |
-| Menu                                                                                                  | 🚧      |
+| [Menu](https://vue-primitives.netlify.app/?path=/story/utilities-menu--styled)                        | ✓      |
 | [Popper](https://vue-primitives.netlify.app/?path=/story/utilities-popper--styled)                    | ✓      |
 | [Portal](https://vue-primitives.netlify.app/?path=/story/utilities-portal--base)                      | ✓      |
 | [Presence](https://vue-primitives.netlify.app/?path=/story/utilities-presence--basic)                 | ✓      |

packages/vue-primitives/build.config.ts

@@ -202,7 +202,6 @@
     "jsdom": "^25.0.0",
     "npm-run-all2": "^6.2.2",
     "storybook": "^8.2.9",
-    "unbuild": "^2.0.0",
     "vite": "^5.4.3",
     "vite-plugin-dts": "^4.2.1",
     "vite-plugin-externalize-deps": "^0.8.0",

packages/vue-primitives/package.json

@@ -74,7 +74,7 @@ export interface AccordionImplProps {
 
 export const ACCORDION_KEYS = ['Home', 'End', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight']
 
-export const [Collection, useCollection] = createCollection<HTMLButtonElement, undefined>('Accordion')
+export const [Collection, useCollection] = createCollection<HTMLButtonElement>('Accordion')
 
 export interface AccordionContext {
   id: string

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

@@ -22,16 +22,14 @@ const props = withDefaults(defineProps<AccordionRootProps<T>>(), {
 })
 const emit = defineEmits<AccordionRootEmits<T>>()
 
-const $el = useRef<HTMLElement>()
-const forwardElement = useForwardElement($el)
+const elRef = useRef<HTMLElement>()
+const forwardElement = useForwardElement(elRef)
 
 const direction = useDirection(() => props.dir)
 const value = useControllableState(props, v => emit('update:value', v as Value), 'value', props.defaultValue)
 const TYPE_SINGLE = 'single' as const satisfies AccordionType
 
-const collectionContext = Collection.provideCollectionContext($el)
-
-const getItems = useCollection(collectionContext)
+const getItems = useCollection(Collection.provideCollectionContext(elRef))
 
 const onKeydown = composeEventHandlers<KeyboardEvent>((event) => {
   if (props.disabled)

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { provideDialogContext } from '../dialog/index.ts'
 import { useControllableState, useId, useRef } from '../hooks/index.ts'
-import type { DialogContentElement } from '../dialog/DialogRoot.ts'
+import type { DialogContentElement } from '../dialog/index.ts'
 import type { AlertDialogRootEmits, AlertDialogRootProps } from './AlertDialogRoot.ts'
 
 defineOptions({

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

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { shallowRef } from 'vue'
-import { useForwardElement } from '../hooks/index.ts'
 import { Primitive } from '../primitive/index.ts'
 import type { AspectRatioProps } from './AspectRatio.ts'
 
@@ -12,13 +10,6 @@ defineOptions({
 withDefaults(defineProps<AspectRatioProps>(), {
   ratio: 1,
 })
-
-const $el = shallowRef<HTMLElement>()
-const forwardElement = useForwardElement($el)
-
-defineExpose({
-  $el,
-})
 </script>
 
 <template>
@@ -33,7 +24,6 @@ defineExpose({
     data-radix-aspect-ratio-wrapper=""
   >
     <Primitive
-      :ref="forwardElement"
       v-bind="$attrs"
       :style="{
         // ensures children expand in ratio

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

@@ -10,7 +10,7 @@ export interface CollectionContext {
   collectionRef: MutableRefObject<HTMLElement | undefined>
 }
 
-export function createCollection<ItemElement extends HTMLElement, ItemData = object>(name: string) {
+export function createCollection<ItemElement extends HTMLElement, ItemData = Record<string, any>>(name: string) {
   const [_provideCollectionContext, useCollectionContext] = createContext<CollectionContext>(`${name}CollectionProvider`)
 
   type CollectionItem = ItemElementWithData<ItemElement, ItemData>
@@ -26,23 +26,35 @@ export function createCollection<ItemElement extends HTMLElement, ItemData = obj
     return context
   }
 
-  function useCollectionItem(currentElement: ItemElement | undefined, attrs: ItemData) {
+  function useCollectionItem<K extends keyof ItemData>(currentElement: ItemElement | undefined, attrs: ItemData[K], key: K) {
     const unrefElement = currentElement as CollectionItem | undefined
-    if (!unrefElement || '$$rcid' in unrefElement)
+    if (!unrefElement)
       return
 
-    (unrefElement as any).$$rcid = attrs
+    if ('$$rcid' in unrefElement) {
+      if (!key)
+        return
+      if (key in unrefElement)
+        return
+    }
+
+    if (key) {
+      (unrefElement as any).$$rcid = (unrefElement as any).$$rcid || {}
+      ; (unrefElement as any).$$rcid[key] = attrs
+    }
+    else {
+      (unrefElement as any).$$rcid = attrs
+    }
   }
 
   function useCollection(thereContext?: CollectionContext) {
     const context = thereContext || useCollectionContext(`${name}CollectionConsumer`)
 
     function getItems(): CollectionItem[] {
-      const collectionNode = context.collectionRef.current
-      if (!collectionNode)
+      if (!context.collectionRef.current)
         return []
 
-      const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${DATA_COLLECTION_ITEM}]`))
+      const orderedNodes = Array.from(context.collectionRef.current.querySelectorAll(`[${DATA_COLLECTION_ITEM}]`))
 
       return orderedNodes as CollectionItem[]
     }

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

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { useAttrs } from 'vue'
-import { useComposedElements } from '../../hooks/useComposedElements.ts'
+import { useComposedElements } from '../../hooks/index.ts'
 import { isPropFalsy } from '../../utils/is.ts'
-import { DATA_COLLECTION_ITEM } from '../Collection.ts'
+import { DATA_COLLECTION_ITEM } from '../index.ts'
 import { Collection, type ItemData } from './utils.ts'
 
 const attrs = useAttrs()
 
 const composedElements = useComposedElements((v) => {
-  Collection.useCollectionItem(v, attrs as unknown as ItemData)
+  Collection.useCollectionItem(v, attrs as unknown as ItemData['demo'], 'demo')
 })
 </script>
 

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

@@ -1,5 +1,7 @@
 import { createCollection } from '../index.ts'
 
-export interface ItemData { disabled: boolean }
+export interface ItemData {
+  demo: { disabled: boolean }
+}
 
-export const [Collection, useCollection] = createCollection<HTMLElement, ItemData>('List')
+export const [Collection, useCollection] = createCollection<HTMLElement, ItemData, 'demo'>('List')