@hina-ui/vue 1.7.12 → 1.7.13

package/src/primitives/tags-input/TagsInputItem.ts

@@ -0,0 +1,105 @@
+import {
+  computed,
+  createTextVNode,
+  defineComponent,
+  h,
+  mergeProps,
+  renderSlot,
+  toDisplayString,
+  toRefs,
+  withCtx,
+  type PropType,
+} from 'vue'
+import type { AcceptableInputValue } from '../../../../shared/src/primitives/tags-input'
+import { useCollection } from '../collection'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useId } from '../utils/useId'
+import {
+  injectTagsInputItemContext,
+  injectTagsInputRootContext,
+  provideTagsInputItemContext,
+} from './context'
+
+export interface TagsInputItemProps {
+  value: AcceptableInputValue
+  disabled?: boolean
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const TagsInputItem = defineComponent({
+  name: 'TagsInputItem',
+  props: {
+    value: { type: null as unknown as PropType<AcceptableInputValue>, required: true },
+    disabled: { type: Boolean, required: false },
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+  },
+  setup(props, { slots }) {
+    const { value } = toRefs(props)
+    const context = injectTagsInputRootContext()
+    const { forwardRef, currentElement } = useForwardExpose()
+    const { CollectionItem } = useCollection()
+
+    const isSelected = computed(() => context.selectedElement.value === currentElement.value)
+    const disabled = computed(() => props.disabled || context.disabled.value)
+
+    const itemContext = provideTagsInputItemContext({
+      value,
+      isSelected,
+      disabled,
+      textId: '',
+      displayValue: computed(() => context.displayValue(value.value)),
+    })
+
+    return () =>
+      h(
+        CollectionItem,
+        { value: value.value },
+        {
+          default: withCtx(() => [
+            h(
+              Primitive,
+              {
+                ref: forwardRef,
+                as: props.as,
+                'as-child': props.asChild,
+                'aria-labelledby': itemContext.textId,
+                'aria-current': isSelected.value,
+                'data-disabled': disabled.value ? '' : undefined,
+                'data-state': isSelected.value ? 'active' : 'inactive',
+              },
+              { default: withCtx(() => [renderSlot(slots, 'default')]) },
+            ),
+          ]),
+        },
+      )
+  },
+})
+
+export const TagsInputItemText = defineComponent({
+  name: 'TagsInputItemText',
+  props: {
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      default: 'span',
+    },
+  },
+  setup(props, { slots }) {
+    const itemContext = injectTagsInputItemContext()
+    useForwardExpose()
+    itemContext.textId ||= useId(undefined, 'reka-tags-input-item-text')
+
+    return () =>
+      h(Primitive, mergeProps(props, { id: itemContext.textId }), {
+        default: withCtx(() => [
+          renderSlot(slots, 'default', {}, () => [
+            createTextVNode(toDisplayString(itemContext.displayValue.value), 1),
+          ]),
+        ]),
+      })
+  },
+})

package/src/primitives/tags-input/TagsInputRoot.ts

@@ -0,0 +1,215 @@
+import {
+  computed,
+  createCommentVNode,
+  defineComponent,
+  h,
+  ref,
+  renderSlot,
+  toRefs,
+  withCtx,
+  type PropType,
+  type Ref,
+} from 'vue'
+import { useFocusWithin } from '@vueuse/core'
+import {
+  addTagsInputValue,
+  removeTagsInputValue,
+  tagsInputDisplayValue,
+  tagsInputKeydown,
+  tagsInputValueIndex,
+  type AcceptableInputValue,
+} from '../../../../shared/src/primitives/tags-input'
+import { useCollection } from '../collection'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { useDirection, type Direction } from '../utils/useDirection'
+import { useFormControl } from '../utils/useFormControl'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useVModel } from '../utils/useVModel'
+import { VisuallyHiddenInput } from '../visually-hidden'
+import { provideTagsInputRootContext } from './context'
+
+export interface TagsInputRootProps<T = AcceptableInputValue> {
+  modelValue?: Array<T> | null
+  defaultValue?: Array<T>
+  addOnPaste?: boolean
+  addOnTab?: boolean
+  addOnBlur?: boolean
+  duplicate?: boolean
+  disabled?: boolean
+  delimiter?: string | RegExp
+  dir?: Direction
+  max?: number
+  id?: string
+  convertValue?: (value: string) => T
+  displayValue?: (value: T) => string
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+  name?: string
+  required?: boolean
+}
+
+export type TagsInputRootEmits<T = AcceptableInputValue> = {
+  'update:modelValue': [payload: Array<T>]
+  invalid: [payload: T]
+  addTag: [payload: T]
+  removeTag: [payload: T]
+}
+
+export const TagsInputRoot = defineComponent({
+  name: 'TagsInputRoot',
+  props: {
+    modelValue: { type: [Array, null] as PropType<AcceptableInputValue[] | null>, required: false },
+    defaultValue: {
+      type: Array as PropType<AcceptableInputValue[]>,
+      required: false,
+      default: () => [],
+    },
+    addOnPaste: { type: Boolean, required: false },
+    addOnTab: { type: Boolean, required: false },
+    addOnBlur: { type: Boolean, required: false },
+    duplicate: { type: Boolean, required: false },
+    disabled: { type: Boolean, required: false },
+    delimiter: {
+      type: null as unknown as PropType<string | RegExp>,
+      required: false,
+      default: ',',
+    },
+    dir: { type: String as PropType<Direction>, required: false },
+    max: { type: Number, required: false, default: 0 },
+    id: { type: String, required: false },
+    convertValue: {
+      type: Function as PropType<(value: string) => AcceptableInputValue>,
+      required: false,
+    },
+    displayValue: {
+      type: Function as PropType<(value: AcceptableInputValue) => string>,
+      required: false,
+      default: tagsInputDisplayValue,
+    },
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+    name: { type: String, required: false },
+    required: { type: Boolean, required: false },
+  },
+  emits: ['update:modelValue', 'invalid', 'addTag', 'removeTag'],
+  setup(props, { emit, slots }) {
+    const {
+      addOnPaste,
+      disabled,
+      delimiter,
+      max,
+      id,
+      dir: propDir,
+      addOnBlur,
+      addOnTab,
+    } = toRefs(props)
+    const dir = useDirection(propDir)
+
+    const modelValue = useVModel(props, 'modelValue', emit, {
+      defaultValue: props.defaultValue,
+      passive: true,
+    }) as Ref<AcceptableInputValue[]>
+
+    const { forwardRef, currentElement } = useForwardExpose()
+    const { focused } = useFocusWithin(currentElement)
+    const isFormControl = useFormControl(currentElement)
+
+    const { getItems, CollectionSlot } = useCollection({ isProvider: true })
+
+    const selectedElement = ref<HTMLElement>()
+    const isInvalidInput = ref(false)
+
+    function handleRemoveTag(index: number) {
+      if (index !== -1) {
+        const removedValue = modelValue.value[index]
+        modelValue.value = removeTagsInputValue(modelValue.value, index)
+        emit('removeTag', removedValue)
+      }
+    }
+
+    provideTagsInputRootContext({
+      modelValue,
+      onAddValue: text => {
+        const result = addTagsInputValue(modelValue.value, text, {
+          duplicate: props.duplicate,
+          max: max.value,
+          defaultValue: props.defaultValue,
+          convertValue: props.convertValue,
+        })
+        if (result.added) {
+          modelValue.value = result.value
+          emit('addTag', result.payload)
+          return true
+        }
+        if (result.duplicate) isInvalidInput.value = true
+        emit('invalid', result.payload)
+        return false
+      },
+      onRemoveValue: handleRemoveTag,
+      onInputKeydown: event => {
+        if (event.isComposing) return
+        const target = event.target as HTMLInputElement
+        const action = tagsInputKeydown(event, {
+          caretAtStart: target.selectionStart === 0 && target.selectionEnd === 0,
+          items: getItems()
+            .map(item => item.ref)
+            .filter(item => item.dataset.disabled !== ''),
+          selected: selectedElement.value,
+          dir: dir.value,
+        })
+        if (!action) return
+        if (action.remove) {
+          const selectedItem = getItems().find(item => item.ref === action.remove)
+          handleRemoveTag(
+            selectedItem ? tagsInputValueIndex(modelValue.value, selectedItem.value) : -1,
+          )
+        }
+        if (action.select) selectedElement.value = action.select.element
+        if (action.preventDefault) event.preventDefault()
+      },
+      selectedElement,
+      isInvalidInput,
+      addOnPaste,
+      addOnBlur,
+      addOnTab,
+      dir,
+      disabled,
+      delimiter,
+      max,
+      id,
+      displayValue: props.displayValue,
+    })
+
+    return () =>
+      h(CollectionSlot, null, {
+        default: withCtx(() => [
+          h(
+            Primitive,
+            {
+              ref: forwardRef,
+              dir: dir.value,
+              as: props.as,
+              'as-child': props.asChild,
+              'data-invalid': isInvalidInput.value ? '' : undefined,
+              'data-disabled': disabled.value ? '' : undefined,
+              'data-focused': focused.value ? '' : undefined,
+            },
+            {
+              default: withCtx(() => [
+                renderSlot(slots, 'default', { modelValue: modelValue.value }),
+                isFormControl.value && props.name
+                  ? h(VisuallyHiddenInput, {
+                      key: 0,
+                      name: props.name,
+                      value: modelValue.value,
+                      required: props.required,
+                      disabled: disabled.value,
+                    })
+                  : createCommentVNode('v-if', true),
+              ]),
+            },
+          ),
+        ]),
+      })
+  },
+})

package/src/primitives/tags-input/context.ts

@@ -0,0 +1,36 @@
+import type { ComputedRef, Ref } from 'vue'
+import type { AcceptableInputValue } from '../../../../shared/src/primitives/tags-input'
+import { createContext } from '../utils/createContext'
+import type { Direction } from '../utils/useDirection'
+
+export interface TagsInputRootContext<T = AcceptableInputValue> {
+  modelValue: Ref<Array<T>>
+  onAddValue: (payload: string) => boolean
+  onRemoveValue: (index: number) => void
+  onInputKeydown: (event: KeyboardEvent) => void
+  selectedElement: Ref<HTMLElement | undefined>
+  isInvalidInput: Ref<boolean>
+  addOnPaste: Ref<boolean>
+  addOnTab: Ref<boolean>
+  addOnBlur: Ref<boolean>
+  disabled: Ref<boolean>
+  delimiter: Ref<string | RegExp>
+  dir: Ref<Direction>
+  max: Ref<number>
+  id: Ref<string | undefined> | undefined
+  displayValue: (value: T) => string
+}
+
+export const [injectTagsInputRootContext, provideTagsInputRootContext] =
+  createContext<TagsInputRootContext>('TagsInputRoot')
+
+export interface TagsInputItemContext {
+  value: Ref<AcceptableInputValue>
+  displayValue: ComputedRef<string>
+  isSelected: Ref<boolean>
+  disabled?: Ref<boolean>
+  textId: string
+}
+
+export const [injectTagsInputItemContext, provideTagsInputItemContext] =
+  createContext<TagsInputItemContext>('TagsInputItem')

package/src/primitives/tags-input/index.ts

@@ -0,0 +1,9 @@
+export {
+  injectTagsInputItemContext,
+  injectTagsInputRootContext,
+  type TagsInputItemContext,
+  type TagsInputRootContext,
+} from './context'
+export { TagsInputInput, type TagsInputInputProps } from './TagsInputInput'
+export { TagsInputItem, TagsInputItemText, type TagsInputItemProps } from './TagsInputItem'
+export { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps } from './TagsInputRoot'

package/src/primitives/teleport/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/teleport/Teleport.ts

@@ -0,0 +1,41 @@
+import {
+  computed,
+  createCommentVNode,
+  defineComponent,
+  h,
+  renderSlot,
+  Teleport as VueTeleport,
+  type PropType,
+} from 'vue'
+import { useMounted } from '@vueuse/core'
+import { injectConfigProviderContext } from '../utils/config'
+
+export interface TeleportProps {
+  to?: string | HTMLElement
+  disabled?: boolean
+  defer?: boolean
+  forceMount?: boolean
+}
+
+export const Teleport = defineComponent({
+  name: 'TeleportPrimitive',
+  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 }) {
+    const configContext = injectConfigProviderContext({})
+    const target = computed(() => props.to ?? configContext.teleportTo?.value ?? 'body')
+    const isMounted = useMounted()
+    return () =>
+      isMounted.value || props.forceMount
+        ? h(
+            VueTeleport,
+            { key: 0, to: target.value, disabled: props.disabled, defer: props.defer },
+            [renderSlot(slots, 'default')],
+          )
+        : createCommentVNode('v-if', true)
+  },
+})

package/src/primitives/teleport/index.ts

@@ -0,0 +1 @@
+export { Teleport, type TeleportProps } from './Teleport'

package/src/primitives/time-field/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/time-field/TimeFieldInput.ts

@@ -0,0 +1,29 @@
+import { defineComponent, type PropType } from 'vue'
+import type { DateFieldPart } from '../../../../shared/src/primitives/date/field'
+import { useSegmentInput } from '../date-field/segmentInput'
+import type { PrimitiveProps } from '../primitive'
+import { injectTimeFieldRootContext } from './context'
+import { TIME_FIELD_SEGMENT } from './TimeFieldRoot'
+
+export interface TimeFieldInputProps {
+  part: DateFieldPart
+  asChild?: boolean
+  as?: PrimitiveProps['as']
+}
+
+export const TimeFieldInput = defineComponent({
+  name: 'TimeFieldInput',
+  props: {
+    part: { type: null as unknown as PropType<DateFieldPart>, required: true },
+    asChild: { type: Boolean, required: false },
+    as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+  },
+  setup(props, { slots }) {
+    const rootContext = injectTimeFieldRootContext()
+    const render = useSegmentInput(props, rootContext, {
+      segment: () => ({ [TIME_FIELD_SEGMENT]: props.part }),
+      snapOnFocusOut: true,
+    })
+    return () => render(slots)
+  },
+})