@hina-ui/vue 1.7.12 → 1.7.14

package/src/primitives/select/SelectRoot.ts

@@ -0,0 +1,408 @@
+import {
+  computed,
+  createCommentVNode,
+  defineComponent,
+  Fragment,
+  guardReactiveProps,
+  h,
+  mergeProps,
+  normalizeProps,
+  onMounted,
+  onUnmounted,
+  ref,
+  renderSlot,
+  toRefs,
+  watch,
+  withCtx,
+  withModifiers,
+  type Component,
+  type PropType,
+  type Ref,
+} from 'vue'
+import {
+  createTypeahead,
+  valueComparator,
+  type Comparator,
+} from '../../../../shared/src/primitives/listbox'
+import {
+  isNullish,
+  OPEN_KEYS,
+  shouldShowPlaceholder,
+  toggleSelectValue,
+} from '../../../../shared/src/primitives/select'
+import { useCollection } from '../collection'
+import { PopperAnchor, PopperRoot } from '../popper'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { Teleport } from '../teleport'
+import { VisuallyHidden } from '../visually-hidden'
+import { useDirection, type Direction } from '../utils/useDirection'
+import { useFormControl } from '../utils/useFormControl'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useId } from '../utils/useId'
+import { useVModel } from '../utils/useVModel'
+import {
+  injectSelectGroupContext,
+  injectSelectRootContext,
+  provideSelectGroupContext,
+  provideSelectRootContext,
+  type SelectOptionRecord,
+} from './context'
+
+export const primitive = (as?: string) =>
+  ({
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      ...(as ? { default: as } : {}),
+    },
+  }) as const
+
+const BubbleSelect = defineComponent({
+  name: 'BubbleSelect',
+  props: {
+    autocomplete: { type: String, required: false },
+    autofocus: { type: Boolean, required: false },
+    disabled: { type: Boolean, required: false },
+    form: { type: String, required: false },
+    multiple: { type: Boolean, required: false },
+    name: { type: String, required: false },
+    required: { type: Boolean, required: false },
+    size: { type: Number, required: false },
+    value: { type: null, required: false },
+  },
+  setup(props, { slots }) {
+    const selectElement = ref<HTMLSelectElement>()
+    const rootContext = injectSelectRootContext()
+
+    watch(
+      () => props.value,
+      (cur, prev) => {
+        const selectProto = window.HTMLSelectElement.prototype
+        const descriptor = Object.getOwnPropertyDescriptor(selectProto, 'value')!
+        const setValue = descriptor.set
+        if (cur !== prev && setValue && selectElement.value) {
+          const event = new Event('change', { bubbles: true })
+          setValue.call(selectElement.value, cur)
+          selectElement.value.dispatchEvent(event)
+        }
+      },
+    )
+
+    function handleInput(event: Event) {
+      rootContext.onValueChange((event.target as HTMLSelectElement).value)
+    }
+
+    return () =>
+      h(
+        VisuallyHidden as Component,
+        { 'as-child': '' },
+        {
+          default: withCtx(() => [
+            h('select', mergeProps({ ref: selectElement }, props, { onInput: handleInput }), [
+              renderSlot(slots, 'default'),
+            ]),
+          ]),
+        },
+      )
+  },
+})
+
+export const SelectRoot = defineComponent({
+  name: 'SelectRoot',
+  inheritAttrs: false,
+  props: {
+    open: { type: Boolean, required: false, default: undefined },
+    defaultOpen: { type: Boolean, required: false },
+    defaultValue: { type: null, required: false },
+    modelValue: { type: null, required: false, default: undefined },
+    nullableValue: { type: String, required: false, default: '' },
+    by: { type: [String, Function] as PropType<Comparator>, required: false },
+    dir: { type: String as PropType<Direction>, required: false },
+    multiple: { type: Boolean, required: false },
+    autocomplete: { type: String, required: false },
+    disabled: { type: Boolean, required: false },
+    name: { type: String, required: false },
+    required: { type: Boolean, required: false },
+  },
+  emits: ['update:modelValue', 'update:open'],
+  setup(props, { emit, slots }) {
+    const { required, disabled, multiple, dir: propDir } = toRefs(props)
+    const modelValue = useVModel(props, 'modelValue', emit, {
+      defaultValue: props.defaultValue ?? (multiple.value ? [] : undefined),
+      passive: props.modelValue === undefined,
+      deep: true,
+    }) as Ref<unknown>
+    const open = useVModel(props, 'open', emit, {
+      defaultValue: props.defaultOpen,
+      passive: props.open === undefined,
+    }) as Ref<boolean>
+    const triggerElement = ref<HTMLElement>()
+    const valueElement = ref<HTMLElement>()
+    const triggerPointerDownPosRef = ref<{ x: number; y: number } | null>({ x: 0, y: 0 })
+    const isEmptyModelValue = computed(() => {
+      if (multiple.value && Array.isArray(modelValue.value)) return modelValue.value?.length === 0
+      return isNullish(modelValue.value)
+    })
+
+    useCollection({ isProvider: true })
+    const dir = useDirection(propDir)
+    const isFormControl = useFormControl(triggerElement)
+    const optionsSet = ref(new Set<SelectOptionRecord>()) as Ref<Set<SelectOptionRecord>>
+    const nativeSelectKey = computed(() =>
+      Array.from(optionsSet.value)
+        .map(option => option.value)
+        .join(';'),
+    )
+
+    function handleValueChange(value: unknown) {
+      if (multiple.value) modelValue.value = toggleSelectValue(modelValue.value, value, props.by)
+      else modelValue.value = value
+    }
+
+    function getOption(value: unknown) {
+      return Array.from(optionsSet.value).find(option =>
+        valueComparator(value, option.value, props.by),
+      )
+    }
+
+    provideSelectRootContext({
+      triggerElement,
+      onTriggerChange: node => {
+        triggerElement.value = node
+      },
+      valueElement,
+      onValueElementChange: node => {
+        valueElement.value = node
+      },
+      contentId: '',
+      modelValue,
+      onValueChange: handleValueChange,
+      by: props.by,
+      open,
+      multiple,
+      required,
+      onOpenChange: value => {
+        open.value = value
+      },
+      dir,
+      triggerPointerDownPosRef,
+      disabled,
+      isEmptyModelValue,
+      optionsSet,
+      onOptionAdd: option => {
+        const existingOption = getOption(option.value)
+        if (existingOption) optionsSet.value.delete(existingOption)
+        optionsSet.value.add(option)
+      },
+      onOptionRemove: option => {
+        const existingOption = getOption(option.value)
+        if (existingOption) optionsSet.value.delete(existingOption)
+      },
+    })
+
+    return () =>
+      h(PopperRoot, null, {
+        default: withCtx(() => [
+          renderSlot(slots, 'default', { modelValue: modelValue.value, open: open.value }),
+          isFormControl.value && props.name
+            ? h(
+                BubbleSelect,
+                {
+                  key: nativeSelectKey.value,
+                  'aria-hidden': 'true',
+                  tabindex: '-1',
+                  multiple: multiple.value,
+                  required: required.value,
+                  name: props.name,
+                  autocomplete: props.autocomplete,
+                  disabled: disabled.value,
+                  value: modelValue.value,
+                },
+                {
+                  default: withCtx(() => [
+                    isNullish(modelValue.value)
+                      ? h('option', { key: 0, value: props.nullableValue })
+                      : createCommentVNode('v-if', true),
+                    h(
+                      Fragment,
+                      null,
+                      Array.from(optionsSet.value).map(option =>
+                        h(
+                          'option',
+                          mergeProps(
+                            { key: (option.value ?? '') as string },
+                            option as unknown as Record<string, unknown>,
+                          ),
+                        ),
+                      ),
+                    ),
+                  ]),
+                },
+              )
+            : createCommentVNode('v-if', true),
+        ]),
+      })
+  },
+})
+
+export const SelectTrigger = defineComponent({
+  name: 'SelectTrigger',
+  props: {
+    disabled: { type: Boolean, required: false },
+    reference: { type: null, required: false },
+    ...primitive('button'),
+  },
+  setup(props, { slots }) {
+    const rootContext = injectSelectRootContext()
+    const { forwardRef, currentElement: triggerElement } = useForwardExpose()
+    const isDisabled = computed(() => rootContext.disabled?.value || props.disabled)
+    rootContext.contentId ||= useId(undefined, 'reka-select-content')
+
+    onMounted(() => {
+      rootContext.onTriggerChange(triggerElement.value)
+    })
+
+    const { getItems } = useCollection()
+    const typeahead = createTypeahead()
+    onUnmounted(() => typeahead.dispose())
+
+    function handleOpen() {
+      if (!isDisabled.value) {
+        rootContext.onOpenChange(true)
+        typeahead.reset()
+      }
+    }
+
+    function handlePointerOpen(event: PointerEvent) {
+      handleOpen()
+      rootContext.triggerPointerDownPosRef.value = {
+        x: Math.round(event.pageX),
+        y: Math.round(event.pageY),
+      }
+    }
+
+    function isPlainLeftClick(event: PointerEvent | MouseEvent) {
+      return event.button === 0 && event.ctrlKey === false
+    }
+
+    let openedFromPointerDown = false
+
+    function onTriggerPointerDown(event: PointerEvent) {
+      if (event.pointerType === 'touch') return event.preventDefault()
+      const target = event.target as HTMLElement
+      if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId)
+      if (isPlainLeftClick(event)) {
+        handlePointerOpen(event)
+        openedFromPointerDown = true
+      }
+    }
+
+    function onTriggerMouseDown(event: MouseEvent) {
+      if (isPlainLeftClick(event)) event.preventDefault()
+    }
+
+    function onTriggerClick(event: MouseEvent) {
+      if (!openedFromPointerDown) (event.currentTarget as HTMLElement | null)?.focus()
+      openedFromPointerDown = false
+    }
+
+    const onPointerup = withModifiers(
+      ((event: PointerEvent) => {
+        if (event.pointerType === 'touch') handlePointerOpen(event)
+      }) as (event: Event) => void,
+      ['prevent'],
+    )
+
+    function onKeydown(event: KeyboardEvent) {
+      const isTypingAhead = typeahead.search !== ''
+      const isModifierKey = event.ctrlKey || event.altKey || event.metaKey
+      if (!isModifierKey && event.key.length === 1) {
+        if (isTypingAhead && event.key === ' ') return
+      }
+      typeahead.handle(event.key, getItems())
+      if (OPEN_KEYS.includes(event.key)) {
+        handleOpen()
+        event.preventDefault()
+      }
+    }
+
+    return () =>
+      h(
+        PopperAnchor as Component,
+        { 'as-child': '', reference: props.reference },
+        {
+          default: withCtx(() => [
+            h(
+              Primitive,
+              {
+                ref: forwardRef,
+                role: 'combobox',
+                type: props.as === 'button' ? 'button' : undefined,
+                'aria-controls': rootContext.open.value ? rootContext.contentId : undefined,
+                'aria-expanded': rootContext.open.value || false,
+                'aria-required': rootContext.required?.value,
+                'aria-autocomplete': 'none',
+                disabled: isDisabled.value,
+                dir: rootContext?.dir.value,
+                'data-state': rootContext?.open.value ? 'open' : 'closed',
+                'data-disabled': isDisabled.value ? '' : undefined,
+                'data-placeholder': shouldShowPlaceholder(rootContext.modelValue?.value)
+                  ? ''
+                  : undefined,
+                'as-child': props.asChild,
+                as: props.as,
+                onClick: onTriggerClick,
+                onPointerdown: onTriggerPointerDown,
+                onMousedown: onTriggerMouseDown,
+                onPointerup,
+                onKeydown,
+              },
+              { default: withCtx(() => [renderSlot(slots, 'default')]) },
+            ),
+          ]),
+        },
+      )
+  },
+})
+
+export const SelectPortal = defineComponent({
+  name: 'SelectPortal',
+  props: {
+    to: { type: null as unknown as PropType<string | HTMLElement>, required: false },
+    disabled: { type: Boolean, required: false },
+    defer: { type: Boolean, required: false },
+    forceMount: { type: Boolean, required: false },
+  },
+  setup(props, { slots }) {
+    return () =>
+      h(Teleport as Component, normalizeProps(guardReactiveProps(props)), {
+        default: withCtx(() => [renderSlot(slots, 'default')]),
+      })
+  },
+})
+
+export const SelectGroup = defineComponent({
+  name: 'SelectGroup',
+  props: primitive(),
+  setup(props, { slots }) {
+    const id = useId(undefined, 'reka-select-group')
+    provideSelectGroupContext({ id })
+    return () =>
+      h(Primitive, mergeProps({ role: 'group' }, props, { 'aria-labelledby': id }), {
+        default: withCtx(() => [renderSlot(slots, 'default')]),
+      })
+  },
+})
+
+export const SelectLabel = defineComponent({
+  name: 'SelectLabel',
+  props: { for: { type: String, required: false }, ...primitive('div') },
+  setup(props, { slots }) {
+    const groupContext = injectSelectGroupContext({ id: '' })
+    return () =>
+      h(Primitive, mergeProps(props, { id: groupContext.id }), {
+        default: withCtx(() => [renderSlot(slots, 'default')]),
+      })
+  },
+})

package/src/primitives/select/context.ts

@@ -0,0 +1,74 @@
+import type { Ref } from 'vue'
+import type { Comparator } from '../../../../shared/src/primitives/listbox'
+import { createContext } from '../utils/createContext'
+import type { Direction } from '../utils/useDirection'
+
+export interface SelectOptionRecord {
+  value: unknown
+  disabled?: boolean
+  textContent: string
+}
+
+export interface SelectRootContext {
+  triggerElement: Ref<HTMLElement | undefined>
+  onTriggerChange: (node: HTMLElement | undefined) => void
+  valueElement: Ref<HTMLElement | undefined>
+  onValueElementChange: (node: HTMLElement) => void
+  contentId: string
+  modelValue: Ref<unknown>
+  onValueChange: (value: unknown) => void
+  by?: Comparator
+  open: Ref<boolean>
+  multiple: Ref<boolean>
+  required?: Ref<boolean>
+  onOpenChange: (open: boolean) => void
+  dir: Ref<Direction>
+  triggerPointerDownPosRef: Ref<{ x: number; y: number } | null>
+  disabled?: Ref<boolean>
+  isEmptyModelValue: Ref<boolean>
+  optionsSet: Ref<Set<SelectOptionRecord>>
+  onOptionAdd: (option: SelectOptionRecord) => void
+  onOptionRemove: (option: SelectOptionRecord) => void
+}
+
+export interface SelectContentContext {
+  content?: Ref<HTMLElement | undefined>
+  viewport?: Ref<HTMLElement | undefined>
+  onViewportChange: (node: HTMLElement | undefined) => void
+  itemRefCallback: (node: HTMLElement | undefined, value: unknown, disabled?: boolean) => void
+  selectedItem?: Ref<HTMLElement | undefined>
+  onItemLeave?: () => void
+  itemTextRefCallback: (node: HTMLElement | undefined, value: unknown, disabled?: boolean) => void
+  focusSelectedItem?: () => void
+  selectedItemText?: Ref<HTMLElement | undefined>
+  position?: 'item-aligned' | 'popper'
+  isPositioned?: Ref<boolean>
+  searchRef?: { readonly search: string }
+}
+
+export interface SelectItemContext {
+  value: unknown
+  disabled: Ref<boolean>
+  textId: string
+  isSelected: Ref<boolean>
+  onItemTextChange: (node: HTMLElement | undefined) => void
+}
+
+export const SelectContentDefaultContextValue: SelectContentContext = {
+  onViewportChange: () => {},
+  itemTextRefCallback: () => {},
+  itemRefCallback: () => {},
+}
+
+export const [injectSelectRootContext, provideSelectRootContext] =
+  createContext<SelectRootContext>('SelectRoot')
+
+export const [injectSelectContentContext, provideSelectContentContext] =
+  createContext<SelectContentContext>('SelectContent')
+
+export const [injectSelectItemContext, provideSelectItemContext] =
+  createContext<SelectItemContext>('SelectItem')
+
+export const [injectSelectGroupContext, provideSelectGroupContext] = createContext<{
+  id: string
+}>('SelectGroup')

package/src/primitives/select/index.ts

@@ -0,0 +1,17 @@
+export {
+  injectSelectContentContext,
+  injectSelectItemContext,
+  injectSelectRootContext,
+  type SelectContentContext,
+  type SelectItemContext,
+  type SelectOptionRecord,
+  type SelectRootContext,
+} from './context'
+export { SelectContent } from './SelectContent'
+export {
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  type SelectItemSelectEvent,
+} from './SelectItem'
+export { SelectGroup, SelectLabel, SelectPortal, SelectRoot, SelectTrigger } from './SelectRoot'

package/src/primitives/tags-input/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/tags-input/TagsInputInput.ts

@@ -0,0 +1,148 @@
+import {
+  defineComponent,
+  h,
+  nextTick,
+  onMounted,
+  renderSlot,
+  withCtx,
+  withKeys,
+  type PropType,
+} from 'vue'
+import {
+  matchesTagsInputDelimiter,
+  splitTagsInputPaste,
+} from '../../../../shared/src/primitives/tags-input'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useComposing } from '../utils/useComposing'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { injectTagsInputRootContext } from './context'
+
+export interface TagsInputInputProps {
+  placeholder?: string
+  autoFocus?: boolean
+  maxLength?: number
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const TagsInputInput = defineComponent({
+  name: 'TagsInputInput',
+  props: {
+    placeholder: { type: String, required: false },
+    autoFocus: { type: Boolean, required: false },
+    maxLength: { type: Number, required: false },
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'input',
+    },
+  },
+  setup(props, { slots }) {
+    const context = injectTagsInputRootContext()
+    const { forwardRef, currentElement } = useForwardExpose()
+
+    function handleBlur(event: FocusEvent) {
+      context.selectedElement.value = undefined
+      if (!context.addOnBlur.value) return
+      const target = event.target as HTMLInputElement
+      const relatedTarget = event.relatedTarget as HTMLElement | null
+      const controlledId = target.getAttribute('aria-controls')
+      if (controlledId && relatedTarget?.closest(`#${CSS.escape(controlledId)}`)) return
+      if (!target.value) return
+      if (context.onAddValue(target.value)) target.value = ''
+    }
+
+    function handleTab(event: Event) {
+      if (!context.addOnTab.value) return
+      void handleCustomKeydown(event)
+    }
+
+    const { isComposing, handleCompositionStart, handleCompositionEnd } = useComposing()
+
+    async function handleCustomKeydown(event: Event) {
+      if (isComposing.value) return
+      await nextTick()
+      if (event.defaultPrevented) return
+      const target = event.target as HTMLInputElement
+      if (!target.value) return
+      if (context.onAddValue(target.value)) target.value = ''
+      event.preventDefault()
+    }
+
+    function handleInput(event: Event) {
+      if (isComposing.value) return
+      context.isInvalidInput.value = false
+      const data = (event as InputEvent).data
+      if (data === null) return
+      const delimiter = context.delimiter.value
+      if (matchesTagsInputDelimiter(delimiter, data)) {
+        const target = event.target as HTMLInputElement
+        target.value = target.value.replace(delimiter, '')
+        if (target.value.trim() === '') {
+          target.value = ''
+          return
+        }
+        if (context.onAddValue(target.value)) target.value = ''
+      }
+    }
+
+    function handleInputKeydown(event: KeyboardEvent) {
+      if (isComposing.value) return
+      context.onInputKeydown(event)
+    }
+
+    function handlePaste(event: ClipboardEvent) {
+      if (!context.addOnPaste.value) return
+      event.preventDefault()
+      const clipboardData = event.clipboardData
+      if (!clipboardData) return
+      for (const part of splitTagsInputPaste(
+        clipboardData.getData('text'),
+        context.delimiter.value,
+      ))
+        context.onAddValue(part)
+    }
+
+    onMounted(() => {
+      const input =
+        currentElement.value.nodeName === 'INPUT'
+          ? currentElement.value
+          : currentElement.value.querySelector('input')
+      if (!input) return
+      setTimeout(() => {
+        if (props.autoFocus) input?.focus()
+      }, 1)
+    })
+
+    return () =>
+      h(
+        Primitive,
+        {
+          id: context.id?.value,
+          ref: forwardRef,
+          type: 'text',
+          autocomplete: 'off',
+          autocorrect: 'off',
+          autocapitalize: 'off',
+          as: props.as,
+          'as-child': props.asChild,
+          maxlength: props.maxLength,
+          placeholder: props.placeholder,
+          disabled: context.disabled.value,
+          'data-invalid': context.isInvalidInput.value ? '' : undefined,
+          onInput: handleInput,
+          onKeydown: [
+            withKeys(handleCustomKeydown, ['enter']),
+            withKeys(handleTab, ['tab']),
+            handleInputKeydown,
+          ],
+          onBlur: handleBlur,
+          onCompositionstart: handleCompositionStart,
+          onCompositionend: handleCompositionEnd,
+          onPaste: handlePaste,
+        },
+        { default: withCtx(() => [renderSlot(slots, 'default')]) },
+      )
+  },
+})