@hina-ui/vue 1.7.5 → 1.7.7

package/src/primitives/utils/useForwardExpose.ts

@@ -0,0 +1,78 @@
+import {
+  computed,
+  getCurrentInstance,
+  onUpdated,
+  ref,
+  triggerRef,
+  type ComponentPublicInstance,
+} from 'vue'
+import { unrefElement, type MaybeElementRef } from '@vueuse/core'
+
+export function useForwardExpose<T extends ComponentPublicInstance>() {
+  const instance = getCurrentInstance()!
+  const currentRef = ref<Element | T | null>()
+  const currentElement = computed<HTMLElement>(() => resolveCurrentElement())
+
+  onUpdated(() => {
+    if (currentElement.value !== resolveCurrentElement()) triggerRef(currentRef)
+  })
+
+  function resolveCurrentElement() {
+    const current = currentRef.value
+    return current &&
+      '$el' in current &&
+      ['#text', '#comment'].includes((current.$el as Node).nodeName)
+      ? current.$el.nextElementSibling
+      : unrefElement(currentRef as MaybeElementRef)
+  }
+
+  const localExpose: Record<string, unknown> = Object.assign({}, instance.exposed)
+  const exposed: Record<string, unknown> = {}
+
+  for (const key in instance.props)
+    Object.defineProperty(exposed, key, {
+      enumerable: true,
+      configurable: true,
+      get: () => instance.props[key],
+    })
+
+  if (Object.keys(localExpose).length > 0)
+    for (const key in localExpose)
+      Object.defineProperty(exposed, key, {
+        enumerable: true,
+        configurable: true,
+        get: () => localExpose[key],
+      })
+
+  Object.defineProperty(exposed, '$el', {
+    enumerable: true,
+    configurable: true,
+    get: () => instance.vnode.el,
+  })
+  instance.exposed = exposed
+
+  function forwardRef(target: Element | T | null) {
+    currentRef.value = target
+    if (!target) return
+
+    Object.defineProperty(exposed, '$el', {
+      enumerable: true,
+      configurable: true,
+      get: () => (target instanceof Element ? target : target.$el),
+    })
+
+    if (!(target instanceof Element) && !Object.hasOwn(target, '$el')) {
+      const childExposed = target.$.exposed
+      const merged = Object.assign({}, exposed)
+      for (const key in childExposed)
+        Object.defineProperty(merged, key, {
+          enumerable: true,
+          configurable: true,
+          get: () => childExposed[key],
+        })
+      instance.exposed = merged
+    }
+  }
+
+  return { forwardRef, currentRef, currentElement }
+}

package/src/primitives/utils/useForwardProps.ts

@@ -0,0 +1,29 @@
+import { camelize, computed, getCurrentInstance, toRef, type MaybeRefOrGetter } from 'vue'
+
+interface PropOptions {
+  default?: unknown
+}
+
+export function useForwardProps<T extends Record<string, unknown>>(props: MaybeRefOrGetter<T>) {
+  const vm = getCurrentInstance()
+  const options = (vm?.type.props ?? {}) as Record<string, PropOptions>
+  const defaults = Object.keys(options).reduce<Record<string, unknown>>((result, key) => {
+    const value = options[key]?.default
+    if (value !== undefined) result[key] = value
+    return result
+  }, {})
+  const refProps = toRef(props)
+
+  return computed(() => {
+    const preserved: Record<string, unknown> = {}
+    const assigned = vm?.vnode.props ?? {}
+    Object.keys(assigned).forEach(key => {
+      preserved[camelize(key)] = assigned[key]
+    })
+    return Object.keys({ ...defaults, ...preserved }).reduce<Partial<T>>((result, key) => {
+      if (refProps.value[key] !== undefined)
+        result[key as keyof T] = refProps.value[key] as T[keyof T]
+      return result
+    }, {}) as T
+  })
+}

package/src/primitives/utils/useForwardPropsEmits.ts

@@ -0,0 +1,12 @@
+import { computed, type MaybeRefOrGetter } from 'vue'
+import { useEmitAsProps } from './useEmitAsProps'
+import { useForwardProps } from './useForwardProps'
+
+export function useForwardPropsEmits<T extends Record<string, unknown>, Name extends string>(
+  props: MaybeRefOrGetter<T>,
+  emit?: (name: Name, ...args: never[]) => void,
+) {
+  const parsed = useForwardProps(props)
+  const emits = emit ? useEmitAsProps(emit) : {}
+  return computed(() => ({ ...parsed.value, ...emits }))
+}

package/src/primitives/utils/useForwardScopeId.ts

@@ -0,0 +1,6 @@
+import { getCurrentInstance } from 'vue'
+
+export function useForwardScopeId(): Record<string, string> {
+  const scopeId = getCurrentInstance()?.vnode.scopeId
+  return scopeId ? { [scopeId]: '' } : {}
+}

package/src/primitives/utils/useId.ts

@@ -0,0 +1,9 @@
+import { useId as useVueId } from 'vue'
+import { injectConfigProviderContext } from './config'
+
+export function useId(deterministicId?: string | null, prefix = 'reka') {
+  if (deterministicId) return deterministicId
+  const config = injectConfigProviderContext({ useId: undefined })
+  const id = config.useId ? config.useId() : useVueId()
+  return prefix ? `${prefix}-${id}` : id
+}

package/src/primitives/utils/useNonce.ts

@@ -0,0 +1,7 @@
+import { computed, ref, type Ref } from 'vue'
+import { injectConfigProviderContext } from './config'
+
+export function useNonce(nonce?: Ref<string | undefined>) {
+  const context = injectConfigProviderContext({ nonce: ref<string>() })
+  return computed(() => nonce?.value || context.nonce?.value)
+}

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/useSingleOrMultipleValue.ts

@@ -0,0 +1,36 @@
+import { computed } from 'vue'
+import {
+  nextSingleOrMultipleValue,
+  singleOrMultipleDefault,
+  singleOrMultipleType,
+  type SingleOrMultipleType,
+} from '../../../../shared/src/primitives/value'
+import { useVModel } from './useVModel'
+
+export interface SingleOrMultipleProps<T = unknown> {
+  type?: SingleOrMultipleType
+  modelValue?: T | T[]
+  defaultValue?: T | T[]
+}
+
+export function useSingleOrMultipleValue<T, P extends SingleOrMultipleProps<T>>(
+  props: P,
+  emits: (name: 'update:modelValue', value: T | T[] | undefined) => void,
+) {
+  const type = computed(() => singleOrMultipleType(props))
+  const modelValue = useVModel(props, 'modelValue', emits as never, {
+    defaultValue: singleOrMultipleDefault(props) as P['modelValue'],
+    passive: props.modelValue === undefined,
+  })
+
+  function changeModelValue(value: T) {
+    modelValue.value = nextSingleOrMultipleValue(
+      type.value,
+      modelValue.value as T | T[] | undefined,
+      value,
+    ) as P['modelValue']
+  }
+
+  const isSingle = computed(() => type.value === 'single')
+  return { modelValue, changeModelValue, isSingle }
+}

package/src/primitives/utils/useSize.ts

@@ -0,0 +1,25 @@
+import { computed, onMounted, onUnmounted, ref, type MaybeRefOrGetter } from 'vue'
+import { unrefElement, type MaybeElement } from '@vueuse/core'
+import { measureSize, observeSize, type Size } from '../../../../shared/src/primitives/size'
+
+export function useSize(element: MaybeRefOrGetter<MaybeElement>) {
+  const size = ref<Size>()
+  const width = computed(() => size.value?.width ?? 0)
+  const height = computed(() => size.value?.height ?? 0)
+  let dispose: (() => void) | undefined
+
+  onMounted(() => {
+    const target = unrefElement(element) as HTMLElement | undefined
+    if (target) {
+      size.value = measureSize(target)
+      dispose = observeSize(target, next => (size.value = next))
+    } else size.value = undefined
+  })
+
+  onUnmounted(() => {
+    dispose?.()
+    dispose = undefined
+  })
+
+  return { width, height }
+}

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/VisuallyHidden.vue

@@ -0,0 +1,30 @@
+<script lang="ts">
+  export interface VisuallyHiddenProps extends PrimitiveProps {
+    feature?: VisuallyHiddenFeature
+  }
+</script>
+
+<script setup lang="ts">
+  import {
+    isAriaHidden,
+    isFullyHidden,
+    VISUALLY_HIDDEN_STYLE,
+    type VisuallyHiddenFeature,
+  } from '../../../../shared/src/primitives/visually-hidden'
+  import { Primitive, type PrimitiveProps } from '../primitive'
+
+  withDefaults(defineProps<VisuallyHiddenProps>(), { feature: 'focusable', as: 'span' })
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :aria-hidden="isAriaHidden(feature) ? 'true' : undefined"
+    :data-hidden="isFullyHidden(feature) ? '' : undefined"
+    :tabindex="isFullyHidden(feature) ? '-1' : undefined"
+    :style="VISUALLY_HIDDEN_STYLE"
+  >
+    <slot />
+  </Primitive>
+</template>

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 './VisuallyHidden.vue'
+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 './VisuallyHidden.vue'
+
+  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 './VisuallyHidden.vue'
+  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>

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

@@ -0,0 +1,2 @@
+export { default as VisuallyHidden, type VisuallyHiddenProps } from './VisuallyHidden.vue'
+export { default as VisuallyHiddenInput } from './VisuallyHiddenInput'