@hina-ui/vue 1.7.6 → 1.7.8

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/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/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

@@ -7,7 +7,7 @@ import {
   mergeProps,
   type PropType,
 } from 'vue'
-import type { VisuallyHiddenProps } from 'reka-ui'
+import type { VisuallyHiddenProps } from './VisuallyHidden.vue'
 import VisuallyHiddenInputBubble from './VisuallyHiddenInputBubble.vue'
 
 const REQUIRED_NOTE = " We render single input if it's required "

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { VisuallyHiddenProps } from 'reka-ui'
+  import type { VisuallyHiddenProps } from './VisuallyHidden.vue'
 
   export interface VisuallyHiddenInputBubbleProps<T> {
     name: string
@@ -13,7 +13,7 @@
 
 <script setup lang="ts" generic="T">
   import { computed, watch } from 'vue'
-  import { VisuallyHidden } from 'reka-ui'
+  import VisuallyHidden from './VisuallyHidden.vue'
   import { usePrimitiveElement } from '../utils/usePrimitiveElement'
 
   defineOptions({ inheritAttrs: false })

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'