@hina-ui/vue 1.7.6 → 1.7.8

package/src/primitives/checkbox/CheckboxRoot.ts

@@ -0,0 +1,170 @@
+import {
+  computed,
+  createCommentVNode,
+  defineComponent,
+  Fragment,
+  h,
+  mergeProps,
+  renderSlot,
+  withCtx,
+  withKeys,
+  withModifiers,
+  type PropType,
+} from 'vue'
+import {
+  ariaChecked,
+  getCheckedState,
+  nextCheckedValue,
+  type CheckedState,
+} from '../../../../shared/src/primitives/checkbox'
+import { getLabelText } from '../../../../shared/src/primitives/label'
+import {
+  isEqual,
+  isValueEqualOrExist,
+  toggleArrayValue,
+} from '../../../../shared/src/primitives/value'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { RovingFocusItem } from '../roving-focus'
+import { useFormControl } from '../utils/useFormControl'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useForwardScopeId } from '../utils/useForwardScopeId'
+import { useVModel } from '../utils/useVModel'
+import { VisuallyHiddenInput } from '../visually-hidden'
+import { injectCheckboxGroupRootContext, provideCheckboxRootContext } from './context'
+
+export interface CheckboxRootProps {
+  defaultValue?: unknown
+  modelValue?: unknown
+  disabled?: boolean
+  value?: unknown
+  id?: string
+  trueValue?: unknown
+  falseValue?: unknown
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+  name?: string
+  required?: boolean
+}
+
+export const CheckboxRoot = defineComponent({
+  name: 'CheckboxRoot',
+  inheritAttrs: false,
+  props: {
+    defaultValue: { type: null as unknown as PropType<unknown>, required: false },
+    modelValue: { type: null as unknown as PropType<unknown>, required: false },
+    disabled: { type: Boolean, required: false },
+    value: { type: null as unknown as PropType<unknown>, required: false, default: 'on' },
+    id: { type: String, required: false },
+    trueValue: { type: null as unknown as PropType<unknown>, required: false, default: () => true },
+    falseValue: {
+      type: null as unknown as PropType<unknown>,
+      required: false,
+      default: () => false,
+    },
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'button',
+    },
+    name: { type: String, required: false },
+    required: { type: Boolean, required: false },
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit, attrs, slots }) {
+    const { forwardRef, currentElement } = useForwardExpose()
+    const checkboxGroupContext = injectCheckboxGroupRootContext(null)
+    const modelValue = useVModel(props, 'modelValue', emit, {
+      defaultValue: props.defaultValue ?? props.falseValue,
+      passive: props.modelValue === undefined,
+    })
+    const disabled = computed(() => checkboxGroupContext?.disabled.value || props.disabled)
+    const isChecked = computed(() => isEqual(modelValue.value, props.trueValue))
+    const inGroup = () => checkboxGroupContext?.modelValue.value != null
+    const checkboxState = computed<CheckedState>(() => {
+      if (inGroup()) return isValueEqualOrExist(checkboxGroupContext!.modelValue.value, props.value)
+      if (modelValue.value === 'indeterminate') return 'indeterminate'
+      return isChecked.value
+    })
+
+    function handleClick() {
+      if (inGroup())
+        checkboxGroupContext!.modelValue.value = toggleArrayValue(
+          checkboxGroupContext!.modelValue.value || [],
+          props.value,
+        )
+      else
+        modelValue.value = nextCheckedValue(
+          modelValue.value,
+          isChecked.value,
+          props.trueValue,
+          props.falseValue,
+        )
+    }
+
+    const isFormControl = useFormControl(currentElement)
+    const scopeIdAttrs = useForwardScopeId()
+    const ariaLabel = computed(() =>
+      attrs['aria-label'] ? undefined : getLabelText(props.id, currentElement.value),
+    )
+
+    provideCheckboxRootContext({ disabled, state: checkboxState })
+
+    return () => {
+      const rovingFocus = checkboxGroupContext?.rovingFocus.value
+      return h(Fragment, null, [
+        h(
+          rovingFocus ? RovingFocusItem : Primitive,
+          mergeProps(
+            { ...attrs, ...scopeIdAttrs },
+            {
+              id: props.id,
+              ref: forwardRef,
+              role: 'checkbox',
+              'as-child': props.asChild,
+              as: props.as,
+              type: props.as === 'button' ? 'button' : undefined,
+              'aria-checked': ariaChecked(checkboxState.value),
+              'aria-required': props.required,
+              'aria-label': attrs['aria-label'] || ariaLabel.value,
+              'data-state': getCheckedState(checkboxState.value),
+              'data-disabled': disabled.value ? '' : undefined,
+              disabled: disabled.value,
+              focusable: rovingFocus ? !disabled.value : undefined,
+              onKeydown: withKeys(
+                withModifiers(() => {}, ['prevent']),
+                ['enter'],
+              ),
+              onClick: handleClick,
+            },
+          ),
+          {
+            default: withCtx(() => [
+              renderSlot(slots, 'default', {
+                modelValue: modelValue.value,
+                state: checkboxState.value,
+              }),
+            ]),
+          },
+        ),
+        isFormControl.value && props.name && !checkboxGroupContext
+          ? h(
+              VisuallyHiddenInput,
+              mergeProps(
+                {
+                  key: 0,
+                  type: 'checkbox',
+                  checked: !!checkboxState.value,
+                  name: props.name,
+                  value: props.value,
+                  disabled: disabled.value,
+                  required: props.required,
+                },
+                scopeIdAttrs,
+              ) as { name: string; value: unknown },
+            )
+          : createCommentVNode('v-if', true),
+      ])
+    }
+  },
+})

package/src/primitives/checkbox/LICENSE

@@ -0,0 +1,44 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Portions adapted from VueUse:
+MIT License
+
+Copyright (c) 2019-PRESENT Anthony Fu<https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/primitives/checkbox/context.ts

@@ -0,0 +1,20 @@
+import type { ComputedRef, Ref } from 'vue'
+import type { CheckedState } from '../../../../shared/src/primitives/checkbox'
+import { createContext } from '../utils/createContext'
+
+export interface CheckboxGroupRootContext {
+  modelValue: Ref<unknown[]>
+  rovingFocus: Ref<boolean>
+  disabled: Ref<boolean>
+}
+
+export const [injectCheckboxGroupRootContext, provideCheckboxGroupRootContext] =
+  createContext<CheckboxGroupRootContext>('CheckboxGroupRoot')
+
+export interface CheckboxRootContext {
+  disabled: Ref<boolean>
+  state: ComputedRef<CheckedState>
+}
+
+export const [injectCheckboxRootContext, provideCheckboxRootContext] =
+  createContext<CheckboxRootContext>('CheckboxRoot')

package/src/primitives/checkbox/index.ts

@@ -0,0 +1,8 @@
+export {
+  injectCheckboxGroupRootContext,
+  injectCheckboxRootContext,
+  type CheckboxGroupRootContext,
+  type CheckboxRootContext,
+} from './context'
+export { CheckboxGroupRoot, type CheckboxGroupRootProps } from './CheckboxGroupRoot'
+export { CheckboxRoot, type CheckboxRootProps } from './CheckboxRoot'

package/src/primitives/collapsible/CollapsibleContent.ts

@@ -0,0 +1,124 @@
+import {
+  computed,
+  createCommentVNode,
+  defineComponent,
+  h,
+  mergeProps,
+  nextTick,
+  onMounted,
+  ref,
+  renderSlot,
+  watch,
+  withCtx,
+  type PropType,
+} from 'vue'
+import { useEventListener } from '@vueuse/core'
+import {
+  isCollapsibleContentRendered,
+  measureCollapsibleContent,
+  openState,
+  type CollapsibleMotion,
+} from '../../../../shared/src/primitives/collapsible'
+import { Presence } from '../presence'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useId } from '../utils/useId'
+import { injectCollapsibleRootContext } from './context'
+
+export interface CollapsibleContentProps {
+  forceMount?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export type CollapsibleContentEmits = {
+  contentFound: []
+}
+
+export const CollapsibleContent = defineComponent({
+  name: 'CollapsibleContent',
+  inheritAttrs: false,
+  props: {
+    forceMount: { type: Boolean, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+  },
+  emits: ['contentFound'],
+  setup(props, { emit, attrs, slots }) {
+    const rootContext = injectCollapsibleRootContext()
+    rootContext.contentId ||= useId(undefined, 'reka-collapsible-content')
+    const presentRef = ref<{ present: boolean }>()
+    const { forwardRef, currentElement } = useForwardExpose()
+    const width = ref(0)
+    const height = ref(0)
+    const isOpen = computed(() => rootContext.open.value)
+    const isMountAnimationPrevented = ref(isOpen.value)
+    let motion: CollapsibleMotion | undefined
+
+    watch(
+      () => [isOpen.value, presentRef.value?.present],
+      async () => {
+        await nextTick()
+        const node = currentElement.value
+        if (!node) return
+        const measured = measureCollapsibleContent(node, motion, isMountAnimationPrevented.value)
+        motion = measured.motion
+        height.value = measured.height
+        width.value = measured.width
+      },
+      { immediate: true },
+    )
+
+    const skipAnimation = computed(() => isMountAnimationPrevented.value && rootContext.open.value)
+
+    onMounted(() => {
+      requestAnimationFrame(() => {
+        isMountAnimationPrevented.value = false
+      })
+    })
+
+    useEventListener(currentElement, 'beforematch', () => {
+      requestAnimationFrame(() => {
+        rootContext.onOpenToggle()
+        emit('contentFound')
+      })
+    })
+
+    return () =>
+      h(
+        Presence,
+        { ref: presentRef, present: props.forceMount || rootContext.open.value, forceMount: true },
+        {
+          default: withCtx(({ present }: { present: boolean }) => [
+            h(
+              Primitive,
+              mergeProps(attrs, {
+                id: rootContext.contentId,
+                ref: forwardRef,
+                'as-child': props.asChild,
+                as: props.as,
+                hidden: !present
+                  ? rootContext.unmountOnHide.value
+                    ? ''
+                    : 'until-found'
+                  : undefined,
+                'data-state': skipAnimation.value ? undefined : openState(rootContext.open.value),
+                'data-disabled': rootContext.disabled?.value ? '' : undefined,
+                style: {
+                  '--reka-collapsible-content-height': `${height.value}px`,
+                  '--reka-collapsible-content-width': `${width.value}px`,
+                },
+              }),
+              {
+                default: withCtx(() => [
+                  isCollapsibleContentRendered(present, rootContext.unmountOnHide.value)
+                    ? renderSlot(slots, 'default', { key: 0 })
+                    : createCommentVNode('v-if', true),
+                ]),
+              },
+            ),
+          ]),
+        },
+      )
+  },
+})

package/src/primitives/collapsible/CollapsibleRoot.ts

@@ -0,0 +1,63 @@
+import { defineComponent, h, renderSlot, toRefs, withCtx, type PropType } from 'vue'
+import { openState } from '../../../../shared/src/primitives/collapsible'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useVModel } from '../utils/useVModel'
+import { provideCollapsibleRootContext } from './context'
+
+export interface CollapsibleRootProps {
+  defaultOpen?: boolean
+  open?: boolean
+  disabled?: boolean
+  unmountOnHide?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export type CollapsibleRootEmits = {
+  'update:open': [value: boolean]
+}
+
+export const CollapsibleRoot = defineComponent({
+  name: 'CollapsibleRoot',
+  props: {
+    defaultOpen: { type: Boolean, required: false, default: false },
+    open: { type: Boolean, required: false, default: undefined },
+    disabled: { type: Boolean, required: false },
+    unmountOnHide: { type: Boolean, required: false, default: true },
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+  },
+  emits: ['update:open'],
+  setup(props, { emit, expose, slots }) {
+    const open = useVModel(props, 'open', emit, {
+      defaultValue: props.defaultOpen,
+      passive: props.open === undefined,
+    })
+    const { disabled, unmountOnHide } = toRefs(props)
+    provideCollapsibleRootContext({
+      contentId: '',
+      disabled,
+      open,
+      unmountOnHide,
+      onOpenToggle: () => {
+        if (disabled.value) return
+        open.value = !open.value
+      },
+    })
+    expose({ open })
+    useForwardExpose()
+
+    return () =>
+      h(
+        Primitive,
+        {
+          as: props.as,
+          'as-child': props.asChild,
+          'data-state': openState(open.value),
+          'data-disabled': disabled.value ? '' : undefined,
+        },
+        { default: withCtx(() => [renderSlot(slots, 'default', { open: open.value })]) },
+      )
+  },
+})

package/src/primitives/collapsible/CollapsibleTrigger.ts

@@ -0,0 +1,43 @@
+import { defineComponent, h, renderSlot, withCtx, type PropType } from 'vue'
+import { openState } from '../../../../shared/src/primitives/collapsible'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { injectCollapsibleRootContext } from './context'
+
+export interface CollapsibleTriggerProps {
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const CollapsibleTrigger = defineComponent({
+  name: 'CollapsibleTrigger',
+  props: {
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'button',
+    },
+  },
+  setup(props, { slots }) {
+    useForwardExpose()
+    const rootContext = injectCollapsibleRootContext()
+
+    return () =>
+      h(
+        Primitive,
+        {
+          type: props.as === 'button' ? 'button' : undefined,
+          as: props.as,
+          'as-child': props.asChild,
+          'aria-controls': rootContext.contentId,
+          'aria-expanded': rootContext.open.value,
+          'data-state': openState(rootContext.open.value),
+          'data-disabled': rootContext.disabled?.value ? '' : undefined,
+          disabled: rootContext.disabled?.value,
+          onClick: rootContext.onOpenToggle,
+        },
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})

package/src/primitives/collapsible/LICENSE

@@ -0,0 +1,44 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Portions adapted from VueUse:
+MIT License
+
+Copyright (c) 2019-PRESENT Anthony Fu<https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/primitives/collapsible/context.ts

@@ -0,0 +1,13 @@
+import type { Ref } from 'vue'
+import { createContext } from '../utils/createContext'
+
+export interface CollapsibleRootContext {
+  contentId: string
+  disabled?: Ref<boolean>
+  open: Ref<boolean>
+  unmountOnHide: Ref<boolean>
+  onOpenToggle: () => void
+}
+
+export const [injectCollapsibleRootContext, provideCollapsibleRootContext] =
+  createContext<CollapsibleRootContext>('CollapsibleRoot')

package/src/primitives/collapsible/index.ts

@@ -0,0 +1,12 @@
+export { injectCollapsibleRootContext, type CollapsibleRootContext } from './context'
+export {
+  CollapsibleContent,
+  type CollapsibleContentEmits,
+  type CollapsibleContentProps,
+} from './CollapsibleContent'
+export {
+  CollapsibleRoot,
+  type CollapsibleRootEmits,
+  type CollapsibleRootProps,
+} from './CollapsibleRoot'
+export { CollapsibleTrigger, type CollapsibleTriggerProps } from './CollapsibleTrigger'

package/src/primitives/collection/LICENSE

@@ -0,0 +1,44 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Portions adapted from VueUse:
+MIT License
+
+Copyright (c) 2019-PRESENT Anthony Fu<https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/primitives/collection/index.ts

@@ -0,0 +1,82 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  inject,
+  markRaw,
+  provide,
+  ref,
+  watch,
+  watchEffect,
+  type Ref,
+} from 'vue'
+import { COLLECTION_ITEM, orderCollectionItems } from '../../../../shared/src/primitives/collection'
+import { Slot } from '../primitive'
+import { usePrimitiveElement } from '../utils/usePrimitiveElement'
+
+export interface CollectionItem<ItemData = Record<string, unknown>> {
+  ref: HTMLElement
+  value?: unknown
+  data?: ItemData
+}
+
+interface CollectionContext<ItemData> {
+  collectionRef: Ref<HTMLElement | undefined>
+  itemMap: Ref<Map<HTMLElement, CollectionItem<ItemData>>>
+}
+
+export function useCollection<ItemData = Record<string, unknown>>(
+  options: { key?: string; isProvider?: boolean } = {},
+) {
+  const { key = '', isProvider = false } = options
+  const injectionKey = `${key}CollectionProvider`
+  let context: CollectionContext<ItemData>
+  if (isProvider) {
+    context = {
+      collectionRef: ref<HTMLElement>(),
+      itemMap: ref(new Map()) as Ref<Map<HTMLElement, CollectionItem<ItemData>>>,
+    }
+    provide(injectionKey, context)
+  } else context = inject(injectionKey) as CollectionContext<ItemData>
+
+  const getItems = (includeDisabledItem = false) =>
+    orderCollectionItems(
+      context.collectionRef.value,
+      context.itemMap.value.values(),
+      includeDisabledItem,
+    )
+
+  const CollectionSlot = defineComponent({
+    name: 'CollectionSlot',
+    inheritAttrs: false,
+    setup(_, { slots, attrs }) {
+      const { primitiveElement, currentElement } = usePrimitiveElement()
+      watch(currentElement, () => {
+        context.collectionRef.value = currentElement.value
+      })
+      return () => h(Slot, { ref: primitiveElement, ...attrs }, slots)
+    },
+  })
+
+  const CollectionItem = defineComponent({
+    name: 'CollectionItem',
+    inheritAttrs: false,
+    props: { value: { validator: () => true } },
+    setup(props, { slots, attrs }) {
+      const { primitiveElement, currentElement } = usePrimitiveElement()
+      watchEffect(onCleanup => {
+        if (currentElement.value) {
+          const element = markRaw(currentElement.value)
+          context.itemMap.value.set(element, { ref: currentElement.value, value: props.value })
+          onCleanup(() => context.itemMap.value.delete(element))
+        }
+      })
+      return () => h(Slot, { ...attrs, [COLLECTION_ITEM]: '', ref: primitiveElement }, slots)
+    },
+  })
+
+  const reactiveItems = computed(() => Array.from(context.itemMap.value.values()))
+  const itemMapSize = computed(() => context.itemMap.value.size)
+
+  return { getItems, reactiveItems, itemMapSize, CollectionSlot, CollectionItem }
+}