@hina-ui/vue 1.7.12 → 1.7.13

package/src/primitives/utils/useGraceArea.ts

@@ -0,0 +1,85 @@
+import { ref, watchEffect, type Ref } from 'vue'
+import { createEventHook, refAutoReset, tryOnScopeDispose } from '@vueuse/core'
+import {
+  exitSideFromRect,
+  hull,
+  isPointInPolygon,
+  paddedExitPoints,
+  pointsFromRect,
+  type Polygon,
+} from '../../../../shared/src/primitives/grace-area'
+
+export function useGraceArea(
+  triggerElement: Ref<HTMLElement | undefined>,
+  containerElement: Ref<HTMLElement | undefined>,
+) {
+  const isPointerInTransit = refAutoReset(false, 300)
+  tryOnScopeDispose(() => {
+    isPointerInTransit.value = false
+  })
+
+  const pointerGraceArea = ref<Polygon | null>(null)
+  const pointerExit = createEventHook<void>()
+
+  function handleRemoveGraceArea() {
+    pointerGraceArea.value = null
+    isPointerInTransit.value = false
+  }
+
+  function handleCreateGraceArea(event: PointerEvent, hoverTarget: HTMLElement | undefined) {
+    if (!hoverTarget) return
+    const currentTarget = event.currentTarget as HTMLElement
+    const exitPoint = { x: event.clientX, y: event.clientY }
+    const exitSide = exitSideFromRect(exitPoint, currentTarget.getBoundingClientRect())
+    pointerGraceArea.value = hull([
+      ...paddedExitPoints(exitPoint, exitSide, 1),
+      ...pointsFromRect(hoverTarget.getBoundingClientRect()),
+    ])
+    isPointerInTransit.value = true
+  }
+
+  watchEffect(onCleanup => {
+    const trigger = triggerElement.value
+    const container = containerElement.value
+    if (!trigger || !container) return
+    const handleTriggerLeave = (event: PointerEvent) =>
+      handleCreateGraceArea(event, containerElement.value)
+    const handleContentLeave = (event: PointerEvent) =>
+      handleCreateGraceArea(event, triggerElement.value)
+    trigger.addEventListener('pointerleave', handleTriggerLeave)
+    container.addEventListener('pointerleave', handleContentLeave)
+    onCleanup(() => {
+      triggerElement.value?.removeEventListener('pointerleave', handleTriggerLeave)
+      containerElement.value?.removeEventListener('pointerleave', handleContentLeave)
+    })
+  })
+
+  watchEffect(onCleanup => {
+    if (!pointerGraceArea.value) return
+    const handleTrackPointerGrace = (event: PointerEvent) => {
+      if (!pointerGraceArea.value || !(event.target instanceof Element)) return
+      const target = event.target
+      const hasEnteredTarget =
+        triggerElement.value?.contains(target) || containerElement.value?.contains(target)
+      const isPointerOutsideGraceArea = !isPointInPolygon(
+        { x: event.clientX, y: event.clientY },
+        pointerGraceArea.value,
+      )
+      const isAnotherGraceAreaTrigger = !!target.closest('[data-grace-area-trigger]')
+      if (hasEnteredTarget) handleRemoveGraceArea()
+      else if (isPointerOutsideGraceArea || isAnotherGraceAreaTrigger) {
+        handleRemoveGraceArea()
+        void pointerExit.trigger()
+      }
+    }
+    triggerElement.value?.ownerDocument.addEventListener('pointermove', handleTrackPointerGrace)
+    onCleanup(() =>
+      triggerElement.value?.ownerDocument.removeEventListener(
+        'pointermove',
+        handleTrackPointerGrace,
+      ),
+    )
+  })
+
+  return { isPointerInTransit, onPointerExit: pointerExit.on }
+}

package/src/primitives/utils/useHideOthers.ts

@@ -0,0 +1,18 @@
+import { onUnmounted, watch, type MaybeRefOrGetter } from 'vue'
+import { unrefElement, type MaybeElement } from '@vueuse/core'
+import { hideOutside } from '../../../../shared/src/primitives/dialog'
+
+export function useHideOthers(target: MaybeRefOrGetter<MaybeElement>) {
+  let undo: (() => void) | undefined
+  watch(
+    () => unrefElement(target),
+    element => {
+      const next = element ? hideOutside(element) : undefined
+      if (next) undo = next
+      else if (undo) undo()
+    },
+  )
+  onUnmounted(() => {
+    if (undo) undo()
+  })
+}

package/src/primitives/utils/useIsUsingKeyboard.ts

@@ -0,0 +1,25 @@
+import { onMounted, ref } from 'vue'
+import { createSharedComposable, useEventListener } from '@vueuse/core'
+
+function useIsUsingKeyboardImpl() {
+  const isUsingKeyboard = ref(false)
+  onMounted(() => {
+    useEventListener(
+      'keydown',
+      () => {
+        isUsingKeyboard.value = true
+      },
+      { capture: true, passive: true },
+    )
+    useEventListener(
+      ['pointerdown', 'pointermove'],
+      () => {
+        isUsingKeyboard.value = false
+      },
+      { capture: true, passive: true },
+    )
+  })
+  return isUsingKeyboard
+}
+
+export const useIsUsingKeyboard = createSharedComposable(useIsUsingKeyboardImpl)

package/src/primitives/utils/useLocale.ts

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

package/src/primitives/utils/useVModel.ts

@@ -3,6 +3,7 @@ import { computed, nextTick, ref, watch, type Ref } from 'vue'
 export interface VModelOptions<V> {
   defaultValue?: V
   passive?: boolean
+  deep?: boolean
 }
 
 export function useVModel<P extends object, K extends keyof P & string, V = P[K]>(
@@ -30,8 +31,12 @@ export function useVModel<P extends object, K extends keyof P & string, V = P[K]
       void nextTick(() => (updating = false))
     },
   )
-  watch(proxy, value => {
-    if (!updating && value !== (props[key] as unknown)) emit(event, value)
-  })
+  watch(
+    proxy,
+    value => {
+      if (!updating && (value !== (props[key] as unknown) || options.deep)) emit(event, value)
+    },
+    { deep: options.deep },
+  )
   return proxy
 }

package/src/singletons.ts

@@ -1,3 +1,3 @@
-export const REQUIRED_SINGLETONS = ['vue', 'reka-ui', '@hina-ui/vue'] as const
+export const REQUIRED_SINGLETONS = ['vue', '@hina-ui/vue'] as const
 
 export type RequiredSingleton = (typeof REQUIRED_SINGLETONS)[number]