@hina-ui/vue 1.7.4 → 1.7.6

package/src/primitives/number-field/NumberFieldRoot.vue

@@ -0,0 +1,169 @@
+<script lang="ts">
+  import type { PrimitiveProps } from 'reka-ui'
+
+  export interface NumberFieldRootProps extends PrimitiveProps {
+    defaultValue?: number
+    modelValue?: number | null
+    min?: number
+    max?: number
+    step?: number
+    stepSnapping?: boolean
+    focusOnChange?: boolean
+    formatOptions?: Intl.NumberFormatOptions
+    locale?: string
+    disabled?: boolean
+    readonly?: boolean
+    disableWheelChange?: boolean
+    invertWheelChange?: boolean
+    id?: string
+    name?: string
+    required?: boolean
+  }
+
+  export type NumberFieldRootEmits = {
+    'update:modelValue': [val: number]
+  }
+</script>
+
+<script setup lang="ts">
+  import {
+    computed,
+    createCommentVNode,
+    h,
+    ref,
+    toRefs,
+    type FunctionalComponent,
+    type Ref,
+  } from 'vue'
+  import { injectConfigProviderContext, Primitive } from 'reka-ui'
+  import {
+    boundNumberFieldValue,
+    commitNumberFieldText,
+    createNumberFieldFormat,
+    formatNumberFieldValue,
+    isNumberFieldAtLimit,
+    numberFieldInputMode,
+    numberFieldRootAttributes,
+    resolveNumberFieldLocale,
+    stepNumberFieldText,
+    type NumberFieldBound,
+    type NumberFieldRange,
+    type NumberFieldStep,
+  } from '../../../../shared/src/primitives/number-field'
+  import { usePrimitiveElement } from '../utils/usePrimitiveElement'
+  import { useVModel } from '../utils/useVModel'
+  import VisuallyHiddenInput from '../visually-hidden/VisuallyHiddenInput'
+  import { provideNumberFieldRootContext } from './context'
+
+  defineOptions({ inheritAttrs: false })
+
+  const props = withDefaults(defineProps<NumberFieldRootProps>(), {
+    as: 'div',
+    defaultValue: undefined,
+    step: 1,
+    stepSnapping: true,
+    focusOnChange: true,
+  })
+  const emits = defineEmits<NumberFieldRootEmits>()
+  const { disabled, readonly, disableWheelChange, invertWheelChange, id } = toRefs(props)
+
+  const modelValue = useVModel(props, 'modelValue', emits, {
+    defaultValue: props.defaultValue,
+    passive: props.modelValue === undefined,
+  }) as Ref<number | undefined>
+
+  const { primitiveElement, currentElement } = usePrimitiveElement()
+  const config = injectConfigProviderContext(null)
+  const locale = computed(() => resolveNumberFieldLocale(props.locale, config?.locale?.value))
+  const isFormControl = computed(() =>
+    currentElement.value ? Boolean(currentElement.value.closest('form')) : true,
+  )
+  const inputEl = ref<HTMLInputElement>()
+
+  const format = computed(() => createNumberFieldFormat(locale.value, props.formatOptions))
+  const range = computed<NumberFieldRange>(() => ({
+    min: props.min,
+    max: props.max,
+    step: props.step,
+    stepSnapping: props.stepSnapping,
+  }))
+  const isDecreaseDisabled = computed(() =>
+    isNumberFieldAtLimit('decrease', modelValue.value, range.value, format.value),
+  )
+  const isIncreaseDisabled = computed(() =>
+    isNumberFieldAtLimit('increase', modelValue.value, range.value, format.value),
+  )
+  const inputMode = computed(() => numberFieldInputMode(format.value))
+  const textValue = computed(() => formatNumberFieldValue(modelValue.value, format.value))
+  const attributes = computed(() =>
+    numberFieldRootAttributes({ disabled: props.disabled, readonly: props.readonly }),
+  )
+
+  function step(direction: NumberFieldStep, multiplier = 1) {
+    if (props.focusOnChange) inputEl.value?.focus()
+    if (props.disabled || props.readonly) return
+    modelValue.value = stepNumberFieldText(
+      direction,
+      inputEl.value?.value ?? '',
+      range.value,
+      format.value,
+      multiplier,
+    )
+  }
+
+  function jump(bound: NumberFieldBound) {
+    const next = boundNumberFieldValue(bound, range.value, format.value)
+    if (next !== undefined) modelValue.value = next
+  }
+
+  function commit(text: string) {
+    const { value, reformat } = commitNumberFieldText(text, range.value, format.value)
+    modelValue.value = value
+    if (inputEl.value) inputEl.value.value = reformat ? textValue.value : text
+  }
+
+  const FormInput: FunctionalComponent = () =>
+    isFormControl.value && props.name
+      ? h(VisuallyHiddenInput, {
+          type: 'text',
+          value: modelValue.value,
+          name: props.name,
+          disabled: props.disabled,
+          readonly: props.readonly,
+          required: props.required,
+        })
+      : createCommentVNode('v-if', true)
+
+  provideNumberFieldRootContext({
+    modelValue,
+    step,
+    jump,
+    commit,
+    inputEl,
+    onInputElement: element => (inputEl.value = element),
+    inputMode,
+    textValue,
+    range,
+    format,
+    disabled,
+    readonly,
+    disableWheelChange,
+    invertWheelChange,
+    isDecreaseDisabled,
+    isIncreaseDisabled,
+    id,
+  })
+</script>
+
+<template>
+  <Primitive
+    v-bind="{ ...$attrs, ...attributes }"
+    ref="primitiveElement"
+    :as="as"
+    :as-child="asChild"
+  >
+    <slot :model-value="modelValue" :text-value="textValue" :readonly="readonly" />
+
+    <FormInput />
+  </Primitive>
+</template>

package/src/primitives/number-field/context.ts

@@ -0,0 +1,111 @@
+import {
+  computed,
+  inject,
+  onScopeDispose,
+  provide,
+  ref,
+  watch,
+  type InjectionKey,
+  type Ref,
+} from 'vue'
+import {
+  createNumberFieldPressHold,
+  isNumberFieldStepDisabled,
+  numberFieldStepAttributes,
+  type NumberFieldBound,
+  type NumberFieldFormat,
+  type NumberFieldInputMode,
+  type NumberFieldRange,
+  type NumberFieldStep,
+} from '../../../../shared/src/primitives/number-field'
+import { usePrimitiveElement } from '../utils/usePrimitiveElement'
+import { isClient, windowTimers } from '../utils/timers'
+
+export interface NumberFieldRootContext {
+  modelValue: Ref<number | null | undefined>
+  step: (direction: NumberFieldStep, multiplier?: number) => void
+  jump: (bound: NumberFieldBound) => void
+  commit: (text: string) => void
+  inputEl: Ref<HTMLInputElement | undefined>
+  onInputElement: (element: HTMLInputElement) => void
+  inputMode: Ref<NumberFieldInputMode>
+  textValue: Ref<string>
+  range: Ref<NumberFieldRange>
+  format: Ref<NumberFieldFormat>
+  disabled: Ref<boolean>
+  readonly: Ref<boolean>
+  disableWheelChange: Ref<boolean>
+  invertWheelChange: Ref<boolean>
+  isDecreaseDisabled: Ref<boolean>
+  isIncreaseDisabled: Ref<boolean>
+  id: Ref<string | undefined>
+}
+
+const NUMBER_FIELD_ROOT = Symbol('NumberFieldRootContext') as InjectionKey<NumberFieldRootContext>
+
+export function provideNumberFieldRootContext(context: NumberFieldRootContext) {
+  provide(NUMBER_FIELD_ROOT, context)
+  return context
+}
+
+export function injectNumberFieldRootContext() {
+  const context = inject(NUMBER_FIELD_ROOT, null)
+  if (!context)
+    throw new Error(
+      'Injection `Symbol(NumberFieldRootContext)` not found. Component must be used within `NumberFieldRoot`',
+    )
+  return context
+}
+
+export function useNumberFieldStep(
+  direction: NumberFieldStep,
+  props: { as?: unknown; disabled?: boolean },
+) {
+  const root = injectNumberFieldRootContext()
+  const isDisabled = computed(() =>
+    isNumberFieldStepDisabled({
+      disabled: root.disabled.value,
+      readonly: root.readonly.value,
+      own: !!props.disabled,
+      atLimit:
+        direction === 'increase' ? root.isIncreaseDisabled.value : root.isDecreaseDisabled.value,
+    }),
+  )
+  const { primitiveElement, currentElement } = usePrimitiveElement()
+  const isPressed = ref(false)
+  const hold = createNumberFieldPressHold({
+    timers: windowTimers,
+    disabled: () => isDisabled.value,
+    trigger: () => root.step(direction),
+    pressed: pressed => (isPressed.value = pressed),
+  })
+
+  if (isClient) {
+    watch(
+      currentElement,
+      (element, _, onCleanup) => {
+        if (!element) return
+        element.addEventListener('pointerdown', hold.press)
+        onCleanup(() => element.removeEventListener('pointerdown', hold.press))
+      },
+      { immediate: true, flush: 'post' },
+    )
+    window.addEventListener('pointerup', hold.release)
+    window.addEventListener('pointercancel', hold.release)
+    onScopeDispose(() => {
+      window.removeEventListener('pointerup', hold.release)
+      window.removeEventListener('pointercancel', hold.release)
+    })
+  }
+
+  const attributes = computed(() =>
+    numberFieldStepAttributes({
+      direction,
+      button: props.as === 'button',
+      disabled: isDisabled.value,
+      pressed: isPressed.value,
+    }),
+  )
+
+  return { primitiveElement, attributes }
+}

package/src/primitives/number-field/index.ts

@@ -0,0 +1,14 @@
+export {
+  default as NumberFieldRoot,
+  type NumberFieldRootEmits,
+  type NumberFieldRootProps,
+} from './NumberFieldRoot.vue'
+export { default as NumberFieldInput, type NumberFieldInputProps } from './NumberFieldInput.vue'
+export {
+  default as NumberFieldIncrement,
+  type NumberFieldIncrementProps,
+} from './NumberFieldIncrement.vue'
+export {
+  default as NumberFieldDecrement,
+  type NumberFieldDecrementProps,
+} from './NumberFieldDecrement.vue'

package/src/primitives/utils/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/utils/timers.ts

@@ -0,0 +1,6 @@
+export const windowTimers = {
+  setTimeout: (callback: () => void, delay: number) => window.setTimeout(callback, delay),
+  clearTimeout: (handle: unknown) => window.clearTimeout(handle as number | undefined),
+}
+
+export const isClient = typeof window !== 'undefined' && typeof document !== 'undefined'

package/src/primitives/utils/usePrimitiveElement.ts

@@ -0,0 +1,12 @@
+import { computed, ref, type ComponentPublicInstance } from 'vue'
+
+export function usePrimitiveElement<T extends ComponentPublicInstance>() {
+  const primitiveElement = ref<T>()
+  const currentElement = computed<HTMLElement | undefined>(() => {
+    const element = primitiveElement.value?.$el as Element | undefined
+    if (element && ['#text', '#comment'].includes(element.nodeName))
+      return element.nextElementSibling as HTMLElement | undefined
+    return (element ?? primitiveElement.value) as HTMLElement | undefined
+  })
+  return { primitiveElement, currentElement }
+}

package/src/primitives/utils/useVModel.ts

@@ -0,0 +1,37 @@
+import { computed, nextTick, ref, watch, type Ref } from 'vue'
+
+export interface VModelOptions<V> {
+  defaultValue?: V
+  passive?: boolean
+}
+
+export function useVModel<P extends object, K extends keyof P & string, V = P[K]>(
+  props: P,
+  key: K,
+  emit: (event: `update:${K}`, value: V) => void,
+  options: VModelOptions<V> = {},
+): Ref<V> {
+  const event = `update:${key}` as const
+  const current = () =>
+    (props[key] !== undefined ? (props[key] as unknown as V) : options.defaultValue) as V
+  if (!options.passive)
+    return computed({
+      get: current,
+      set: value => emit(event, value),
+    })
+  const proxy = ref(current()) as Ref<V>
+  let updating = false
+  watch(
+    () => props[key],
+    value => {
+      if (updating) return
+      updating = true
+      proxy.value = value as unknown as V
+      void nextTick(() => (updating = false))
+    },
+  )
+  watch(proxy, value => {
+    if (!updating && value !== (props[key] as unknown)) emit(event, value)
+  })
+  return proxy
+}

package/src/primitives/visually-hidden/LICENSE

@@ -0,0 +1,21 @@
+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.

package/src/primitives/visually-hidden/VisuallyHiddenInput.ts

@@ -0,0 +1,97 @@
+import {
+  computed,
+  createCommentVNode,
+  defineComponent,
+  Fragment,
+  h,
+  mergeProps,
+  type PropType,
+} from 'vue'
+import type { VisuallyHiddenProps } from 'reka-ui'
+import VisuallyHiddenInputBubble from './VisuallyHiddenInputBubble.vue'
+
+const REQUIRED_NOTE = " We render single input if it's required "
+
+type BubbleProps = { name: string; value: unknown }
+
+export default defineComponent({
+  name: 'VisuallyHiddenInput',
+  inheritAttrs: false,
+  props: {
+    name: { type: String, required: true },
+    value: { type: null as unknown as PropType<unknown>, required: true },
+    checked: { type: Boolean, required: false, default: undefined },
+    required: { type: Boolean, required: false },
+    disabled: { type: Boolean, required: false },
+    feature: {
+      type: String as PropType<VisuallyHiddenProps['feature']>,
+      required: false,
+      default: 'fully-hidden',
+    },
+  },
+  setup(props, { attrs }) {
+    const isFormArrayEmptyAndRequired = computed(
+      () => Array.isArray(props.value) && props.value.length === 0 && props.required,
+    )
+    const parsedValue = computed(() => {
+      const value = props.value
+      if (
+        typeof value === 'string' ||
+        typeof value === 'number' ||
+        typeof value === 'boolean' ||
+        value === null ||
+        value === undefined
+      )
+        return [{ name: props.name, value }]
+      if (Array.isArray(value))
+        return value.flatMap((item: unknown, index) =>
+          typeof item === 'object'
+            ? Object.entries(item as object).map(([key, entry]) => ({
+                name: `${props.name}[${index}][${key}]`,
+                value: entry as unknown,
+              }))
+            : { name: `${props.name}[${index}]`, value: item },
+        )
+      if (typeof value === 'object')
+        return Object.entries(value as object).map(([key, entry]) => ({
+          name: `${props.name}[${key}]`,
+          value: entry as unknown,
+        }))
+      return []
+    })
+
+    return () =>
+      h(Fragment, null, [
+        createCommentVNode(REQUIRED_NOTE),
+        isFormArrayEmptyAndRequired.value
+          ? h(
+              VisuallyHiddenInputBubble,
+              mergeProps(
+                { key: props.name },
+                { ...props, ...attrs },
+                {
+                  name: props.name,
+                  value: props.value,
+                },
+              ) as BubbleProps,
+            )
+          : h(
+              Fragment,
+              { key: 1 },
+              parsedValue.value.map(parsed =>
+                h(
+                  VisuallyHiddenInputBubble,
+                  mergeProps(
+                    { key: parsed.name },
+                    { ...props, ...attrs },
+                    {
+                      name: parsed.name,
+                      value: parsed.value,
+                    },
+                  ) as BubbleProps,
+                ),
+              ),
+            ),
+      ])
+  },
+})

package/src/primitives/visually-hidden/VisuallyHiddenInputBubble.vue

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import type { VisuallyHiddenProps } from 'reka-ui'
+
+  export interface VisuallyHiddenInputBubbleProps<T> {
+    name: string
+    value: T
+    checked?: boolean
+    required?: boolean
+    disabled?: boolean
+    feature?: VisuallyHiddenProps['feature']
+  }
+</script>
+
+<script setup lang="ts" generic="T">
+  import { computed, watch } from 'vue'
+  import { VisuallyHidden } from 'reka-ui'
+  import { usePrimitiveElement } from '../utils/usePrimitiveElement'
+
+  defineOptions({ inheritAttrs: false })
+
+  const props = withDefaults(defineProps<VisuallyHiddenInputBubbleProps<T>>(), {
+    feature: 'fully-hidden',
+    checked: undefined,
+  })
+
+  const { primitiveElement, currentElement } = usePrimitiveElement()
+  const valueState = computed(() => props.checked ?? props.value)
+
+  watch(valueState, (cur, prev) => {
+    if (!currentElement.value) return
+    const input = currentElement.value as HTMLInputElement
+    const descriptor = Object.getOwnPropertyDescriptor(
+      window.HTMLInputElement.prototype,
+      'value',
+    ) as PropertyDescriptor
+    const setValue = descriptor.set
+    if (setValue && cur !== prev) {
+      const inputEvent = new Event('input', { bubbles: true })
+      const changeEvent = new Event('change', { bubbles: true })
+      setValue.call(input, cur)
+      input.dispatchEvent(inputEvent)
+      input.dispatchEvent(changeEvent)
+    }
+  })
+</script>
+
+<template>
+  <VisuallyHidden ref="primitiveElement" v-bind="{ ...props, ...$attrs }" as="input" />
+</template>