@hina-ui/vue 1.7.12 → 1.7.13

package/src/primitives/combobox/ComboboxContent.ts

@@ -0,0 +1,199 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  mergeProps,
+  onMounted,
+  onUnmounted,
+  ref,
+  renderSlot,
+  toHandlers,
+  toRefs,
+  watch,
+  withCtx,
+  withModifiers,
+  type Component,
+  type PropType,
+} from 'vue'
+import { isTargetWithinCombobox } from '../../../../shared/src/primitives/combobox'
+import { getActiveElement } from '../../../../shared/src/primitives/focus-scope'
+import { ListboxContent } from '../listbox'
+import { PopperContent, popperContentProps } from '../popper'
+import { Presence } from '../presence'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { propsWithoutDefaults } from '../utils/propsWithoutDefaults'
+import { DismissableLayer, FocusScope, useBodyScrollLock, useFocusGuards } from '../utils/layers'
+import type { Direction } from '../utils/useDirection'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useForwardProps } from '../utils/useForwardProps'
+import { useForwardPropsEmits } from '../utils/useForwardPropsEmits'
+import { useHideOthers } from '../utils/useHideOthers'
+import { useId } from '../utils/useId'
+import {
+  injectComboboxRootContext,
+  provideComboboxContentContext,
+  type ComboboxContentPosition,
+} from './context'
+
+const contentEmits = ['escapeKeyDown', 'pointerDownOutside', 'focusOutside', 'interactOutside']
+
+const contentProps = {
+  position: { type: String as PropType<ComboboxContentPosition>, required: false },
+  bodyLock: { type: Boolean, required: false },
+  hideWhenEmpty: { type: Boolean, required: false },
+  ...propsWithoutDefaults(popperContentProps),
+  dir: { type: String as PropType<Direction>, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+  disableOutsidePointerEvents: { type: Boolean, required: false },
+}
+
+const popperStyle = {
+  boxSizing: 'border-box',
+  '--reka-combobox-content-transform-origin': 'var(--reka-popper-transform-origin)',
+  '--reka-combobox-content-available-width': 'var(--reka-popper-available-width)',
+  '--reka-combobox-content-available-height': 'var(--reka-popper-available-height)',
+  '--reka-combobox-trigger-width': 'var(--reka-popper-anchor-width)',
+  '--reka-combobox-trigger-height': 'var(--reka-popper-anchor-height)',
+}
+
+const ComboboxContentImpl = defineComponent({
+  name: 'ComboboxContentImpl',
+  props: { ...contentProps, position: { ...contentProps.position, default: 'inline' } },
+  emits: contentEmits,
+  setup(props, { attrs, emit, slots }) {
+    const { position } = toRefs(props)
+    const rootContext = injectComboboxRootContext()
+    const contentId = Symbol('ComboboxContent')
+    watch(position, value => rootContext.onContentPositionChange(contentId, value), {
+      immediate: true,
+    })
+    const isEmpty = computed(() =>
+      rootContext.ignoreFilter.value
+        ? rootContext.allItems.value.size === 0
+        : rootContext.filterState.value.count === 0,
+    )
+    const { forwardRef, currentElement } = useForwardExpose()
+    useBodyScrollLock(props.bodyLock)
+    useFocusGuards()
+    useHideOthers(rootContext.parentElement)
+
+    const forwardedProps = useForwardProps(props.position === 'popper' ? props : {})
+
+    provideComboboxContentContext({ position })
+
+    const isInputWithinContent = ref(false)
+
+    onMounted(() => {
+      if (rootContext.inputElement.value) {
+        isInputWithinContent.value = currentElement.value!.contains(rootContext.inputElement.value)
+        if (isInputWithinContent.value) rootContext.inputElement.value.focus()
+      }
+    })
+
+    onUnmounted(() => {
+      rootContext.onContentUnmount(contentId)
+      const activeElement = getActiveElement()
+      if (isInputWithinContent.value && (!activeElement || activeElement === document.body))
+        rootContext.triggerElement.value?.focus()
+    })
+
+    const popperContentEvents = { placed: () => rootContext.onContentPlaced(contentId) }
+
+    return () =>
+      h(
+        ListboxContent as Component,
+        { 'as-child': '' },
+        {
+          default: withCtx(() => [
+            h(
+              FocusScope as Component,
+              {
+                'as-child': '',
+                onMountAutoFocus: withModifiers(() => {}, ['prevent']),
+                onUnmountAutoFocus: withModifiers(() => {}, ['prevent']),
+              },
+              {
+                default: withCtx(() => [
+                  h(
+                    DismissableLayer as Component,
+                    {
+                      'as-child': '',
+                      'disable-outside-pointer-events': props.disableOutsidePointerEvents,
+                      onDismiss: () => rootContext.onOpenChange(false),
+                      onFocusOutside: (event: Event) => {
+                        if (isTargetWithinCombobox(rootContext.parentElement.value, event.target))
+                          event.preventDefault()
+                        emit('focusOutside', event)
+                      },
+                      onInteractOutside: (event: Event) => emit('interactOutside', event),
+                      onEscapeKeyDown: (event: Event) => emit('escapeKeyDown', event),
+                      onPointerDownOutside: (event: Event) => {
+                        if (isTargetWithinCombobox(rootContext.parentElement.value, event.target))
+                          event.preventDefault()
+                        emit('pointerDownOutside', event)
+                      },
+                    },
+                    {
+                      default: withCtx(() => [
+                        h(
+                          (position.value === 'popper' ? PopperContent : Primitive) as Component,
+                          mergeProps(
+                            { ...attrs, ...forwardedProps.value },
+                            {
+                              id: rootContext.contentId,
+                              ref: forwardRef,
+                              'memo-dependencies':
+                                position.value === 'popper'
+                                  ? [rootContext.filterSearch.value, rootContext.filterState.value]
+                                  : undefined,
+                              'data-state': rootContext.open.value ? 'open' : 'closed',
+                              'data-empty': isEmpty.value ? '' : undefined,
+                              style: {
+                                display: props.hideWhenEmpty && isEmpty.value ? 'none' : 'flex',
+                                flexDirection: 'column',
+                                outline: 'none',
+                                ...(position.value === 'popper' ? popperStyle : {}),
+                              },
+                            },
+                            toHandlers(position.value === 'popper' ? popperContentEvents : {}),
+                          ),
+                          { default: withCtx(() => [renderSlot(slots, 'default')]) },
+                        ),
+                      ]),
+                    },
+                  ),
+                ]),
+              },
+            ),
+          ]),
+        },
+      )
+  },
+})
+
+export const ComboboxContent = defineComponent({
+  name: 'ComboboxContent',
+  props: { forceMount: { type: Boolean, required: false }, ...contentProps },
+  emits: contentEmits,
+  setup(props, { attrs, emit, slots }) {
+    const forwarded = useForwardPropsEmits(props, emit as (name: string) => void)
+    const { forwardRef } = useForwardExpose()
+    const rootContext = injectComboboxRootContext()
+    rootContext.contentId ||= useId(undefined, 'reka-combobox-content')
+    return () =>
+      h(
+        Presence,
+        { present: props.forceMount || rootContext.open.value },
+        {
+          default: withCtx(() => [
+            h(
+              ComboboxContentImpl as Component,
+              mergeProps({ ...forwarded.value, ...attrs }, { ref: forwardRef }),
+              { default: withCtx(() => [renderSlot(slots, 'default')]) },
+            ),
+          ]),
+        },
+      )
+  },
+})

package/src/primitives/combobox/ComboboxItem.ts

@@ -0,0 +1,209 @@
+import {
+  computed,
+  createCommentVNode,
+  createTextVNode,
+  defineComponent,
+  guardReactiveProps,
+  h,
+  mergeProps,
+  normalizeProps,
+  onMounted,
+  onUnmounted,
+  renderSlot,
+  toDisplayString,
+  withCtx,
+  withMemo,
+  type Component,
+  type VNode,
+} from 'vue'
+import { ListboxGroup, ListboxItem, ListboxItemIndicator } from '../listbox'
+import { Primitive } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useId } from '../utils/useId'
+import { usePrimitiveElement } from '../utils/usePrimitiveElement'
+import {
+  injectComboboxGroupContext,
+  injectComboboxRootContext,
+  provideComboboxGroupContext,
+} from './context'
+import { primitive } from './ComboboxRoot'
+
+export type ComboboxItemSelectEvent<T = unknown> = CustomEvent<{ originalEvent: Event; value?: T }>
+
+export const ComboboxEmpty = defineComponent({
+  name: 'ComboboxEmpty',
+  props: primitive(),
+  setup(props, { slots }) {
+    const rootContext = injectComboboxRootContext()
+    const isRender = computed(() =>
+      rootContext.ignoreFilter.value
+        ? rootContext.allItems.value.size === 0
+        : rootContext.filterState.value.count === 0,
+    )
+    return () =>
+      isRender.value
+        ? h(Primitive, normalizeProps(mergeProps({ key: 0 }, props)), {
+            default: withCtx(() => [
+              renderSlot(slots, 'default', {}, () => [createTextVNode('No options')]),
+            ]),
+          })
+        : createCommentVNode('v-if', true)
+  },
+})
+
+export const ComboboxGroup = defineComponent({
+  name: 'ComboboxGroup',
+  props: primitive(),
+  setup(props, { slots }) {
+    const id = useId(undefined, 'reka-combobox-group')
+    const rootContext = injectComboboxRootContext()
+    const isRender = computed(() =>
+      rootContext.ignoreFilter.value
+        ? true
+        : !rootContext.filterSearch.value
+          ? true
+          : rootContext.filterState.value.groups.has(id),
+    )
+    const context = provideComboboxGroupContext({ id, labelId: '' })
+
+    onMounted(() => {
+      if (!rootContext.allGroups.value.has(id)) rootContext.allGroups.value.set(id, new Set())
+    })
+
+    onUnmounted(() => {
+      rootContext.allGroups.value.delete(id)
+    })
+
+    return () =>
+      h(
+        ListboxGroup as Component,
+        mergeProps({ id, 'aria-labelledby': context.labelId }, props, {
+          hidden: isRender.value ? undefined : true,
+        }),
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})
+
+export const ComboboxLabel = defineComponent({
+  name: 'ComboboxLabel',
+  props: { for: { type: String, required: false }, ...primitive('div') },
+  setup(props, { slots }) {
+    useForwardExpose()
+    const groupContext = injectComboboxGroupContext({ id: '', labelId: '' })
+    groupContext.labelId ||= useId(undefined, 'reka-combobox-group-label')
+    return () =>
+      h(Primitive, mergeProps(props, { id: groupContext.labelId }), {
+        default: withCtx(() => [renderSlot(slots, 'default')]),
+      })
+  },
+})
+
+export const ComboboxItem = defineComponent({
+  name: 'ComboboxItem',
+  props: {
+    textValue: { type: String, required: false },
+    value: { type: null, required: true },
+    disabled: { type: Boolean, required: false },
+    ...primitive(),
+  },
+  emits: ['select'],
+  setup(props, { attrs, emit, slots }) {
+    const id = useId(undefined, 'reka-combobox-item')
+    const rootContext = injectComboboxRootContext()
+    const groupContext = injectComboboxGroupContext(null)
+    const { primitiveElement, currentElement } = usePrimitiveElement()
+
+    if (props.value === '')
+      throw new Error(
+        'A <ComboboxItem /> must have a value prop that is not an empty string. This is because the Combobox value can be set to an empty string to clear the selection and show the placeholder.',
+      )
+
+    const isRender = computed(() => {
+      if (
+        rootContext.isVirtual.value ||
+        rootContext.ignoreFilter.value ||
+        !rootContext.filterSearch.value
+      )
+        return true
+      const filteredCurrentItem = rootContext.filterState.value.items.get(id)
+      if (filteredCurrentItem === undefined) return true
+      return filteredCurrentItem > 0
+    })
+
+    onMounted(() => {
+      rootContext.allItems.value.set(
+        id,
+        props.textValue || currentElement.value!.textContent || currentElement.value!.innerText,
+      )
+      const groupId = groupContext?.id
+      if (groupId) {
+        if (!rootContext.allGroups.value.has(groupId))
+          rootContext.allGroups.value.set(groupId, new Set([id]))
+        else rootContext.allGroups.value.get(groupId)?.add(id)
+      }
+    })
+
+    onUnmounted(() => {
+      rootContext.allItems.value.delete(id)
+    })
+
+    const onSelect = (event: ComboboxItemSelectEvent) => {
+      emit('select', event)
+      if (event.defaultPrevented) return
+      if (!rootContext.multiple.value && !props.disabled && !rootContext.disabled.value) {
+        event.preventDefault()
+        rootContext.onOpenChange(false)
+        rootContext.modelValue.value = props.value
+      } else if (rootContext.multiple.value) rootContext.inputElement.value?.focus()
+    }
+
+    const cache: VNode[] = []
+
+    return () =>
+      isRender.value
+        ? withMemo(
+            [
+              isRender.value,
+              rootContext.filterSearch.value,
+              rootContext.disabled.value,
+              props.disabled,
+              props.value,
+              props.as,
+              props.asChild,
+              ...Object.values(attrs),
+            ],
+            () =>
+              h(
+                ListboxItem as Component,
+                mergeProps({ key: 0 }, props, {
+                  id,
+                  ref: primitiveElement,
+                  disabled: rootContext.disabled.value || props.disabled,
+                  onSelect,
+                }),
+                {
+                  default: withCtx(() => [
+                    renderSlot(slots, 'default', {}, () => [
+                      createTextVNode(toDisplayString(props.value), 1),
+                    ]),
+                  ]),
+                },
+              ),
+            cache,
+            1,
+          )
+        : createCommentVNode('v-if', true)
+  },
+})
+
+export const ComboboxItemIndicator = defineComponent({
+  name: 'ComboboxItemIndicator',
+  props: primitive('span'),
+  setup(props, { slots }) {
+    return () =>
+      h(ListboxItemIndicator as Component, normalizeProps(guardReactiveProps(props)), {
+        default: withCtx(() => [renderSlot(slots, 'default')]),
+      })
+  },
+})