@hina-ui/vue 1.7.11 → 1.7.13

package/src/primitives/tooltip/TooltipParts.ts

@@ -0,0 +1,351 @@
+import {
+  computed,
+  createTextVNode,
+  defineComponent,
+  guardReactiveProps,
+  h,
+  mergeProps,
+  normalizeProps,
+  onMounted,
+  ref,
+  renderSlot,
+  resolveDynamicComponent,
+  toDisplayString,
+  toHandlers,
+  withCtx,
+  withModifiers,
+  type Component,
+  type PropType,
+} from 'vue'
+import { useEventListener } from '@vueuse/core'
+import { PopperAnchor, PopperArrow, PopperContent } from '../popper'
+import { Presence } from '../presence'
+import { Primitive, type PrimitiveProps } from '../primitive'
+import { Teleport } from '../teleport'
+import { defu } from '../utils/defu'
+import { DismissableLayer } from '../utils/layers'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useForwardProps } from '../utils/useForwardProps'
+import { useForwardPropsEmits } from '../utils/useForwardPropsEmits'
+import { useGraceArea } from '../utils/useGraceArea'
+import { useId } from '../utils/useId'
+import { VisuallyHidden } from '../visually-hidden'
+import { injectTooltipProviderContext, injectTooltipRootContext, TOOLTIP_OPEN } from './context'
+
+const primitive = (as?: string) =>
+  ({
+    asChild: { type: Boolean, required: false },
+    as: {
+      type: null as unknown as PropType<PrimitiveProps['as']>,
+      required: false,
+      ...(as ? { default: as } : {}),
+    },
+  }) as const
+
+export const TooltipTrigger = defineComponent({
+  name: 'TooltipTrigger',
+  props: { reference: { type: null, required: false }, ...primitive('button') },
+  setup(props, { slots }) {
+    const rootContext = injectTooltipRootContext()
+    const providerContext = injectTooltipProviderContext()
+    rootContext.contentId ||= useId(undefined, 'reka-tooltip-content')
+    const { forwardRef, currentElement: triggerElement } = useForwardExpose()
+    const isPointerDown = ref(false)
+    const hasPointerMoveOpened = ref(false)
+
+    function handlePointerUp() {
+      setTimeout(() => {
+        isPointerDown.value = false
+      }, 1)
+    }
+    function handlePointerDown() {
+      if (rootContext.open && !rootContext.disableClosingTrigger.value) rootContext.onClose()
+      isPointerDown.value = true
+      document.addEventListener('pointerup', handlePointerUp, { once: true })
+    }
+    function handlePointerMove(event: PointerEvent) {
+      if (event.pointerType === 'touch') return
+      if (!hasPointerMoveOpened.value && !providerContext.isPointerInTransitRef.value) {
+        rootContext.onTriggerEnter()
+        hasPointerMoveOpened.value = true
+      }
+    }
+    function handlePointerLeave() {
+      rootContext.onTriggerLeave()
+      hasPointerMoveOpened.value = false
+    }
+    function handleFocus(event: FocusEvent) {
+      if (isPointerDown.value) return
+      if (
+        rootContext.ignoreNonKeyboardFocus.value &&
+        !(event.target as HTMLElement).matches?.(':focus-visible')
+      )
+        return
+      rootContext.onOpen()
+    }
+    function handleBlur() {
+      rootContext.onClose()
+    }
+    function handleClick() {
+      if (!rootContext.disableClosingTrigger.value) rootContext.onClose()
+    }
+
+    const tooltipListeners = computed(() =>
+      rootContext.disabled.value
+        ? {}
+        : {
+            click: handleClick,
+            focus: handleFocus,
+            pointermove: handlePointerMove,
+            pointerleave: handlePointerLeave,
+            pointerdown: handlePointerDown,
+            blur: handleBlur,
+          },
+    )
+
+    onMounted(() => rootContext.onTriggerChange(triggerElement.value))
+
+    return () =>
+      h(
+        PopperAnchor as Component,
+        { 'as-child': '', reference: props.reference },
+        {
+          default: withCtx(() => [
+            h(
+              Primitive,
+              mergeProps(
+                {
+                  ref: forwardRef,
+                  'aria-describedby': rootContext.open.value ? rootContext.contentId : undefined,
+                  'data-state': rootContext.stateAttribute.value,
+                  as: props.as,
+                  'as-child': props.asChild,
+                  'data-grace-area-trigger': '',
+                },
+                toHandlers(tooltipListeners.value),
+              ),
+              { default: withCtx(() => [renderSlot(slots, 'default')]) },
+            ),
+          ]),
+        },
+      )
+  },
+})
+
+const contentImplProps = {
+  ariaLabel: { type: String, required: false },
+  asChild: { type: Boolean, required: false, default: undefined },
+  as: { type: null as unknown as PropType<PrimitiveProps['as']>, required: false },
+  side: { type: null, required: false },
+  sideOffset: { type: Number, required: false },
+  align: { type: null, required: false },
+  alignOffset: { type: Number, required: false },
+  avoidCollisions: { type: Boolean, required: false, default: undefined },
+  collisionBoundary: { type: null, required: false },
+  collisionPadding: {
+    type: [Number, Object] as PropType<number | Partial<Record<string, number>>>,
+    required: false,
+  },
+  arrowPadding: { type: Number, required: false },
+  sticky: { type: String, required: false },
+  hideWhenDetached: { type: Boolean, required: false, default: undefined },
+  positionStrategy: { type: String, required: false },
+  updatePositionStrategy: { type: String, required: false },
+} as const
+
+const TOOLTIP_DEFAULTS = {
+  side: 'top',
+  sideOffset: 0,
+  align: 'center',
+  avoidCollisions: true,
+  collisionBoundary: [],
+  collisionPadding: 0,
+  arrowPadding: 0,
+  sticky: 'partial',
+  hideWhenDetached: false,
+}
+
+const TooltipContentImpl = defineComponent({
+  name: 'TooltipContentImpl',
+  props: contentImplProps,
+  emits: ['escapeKeyDown', 'pointerDownOutside'],
+  setup(props, { emit, slots, attrs }) {
+    const rootContext = injectTooltipRootContext()
+    const providerContext = injectTooltipProviderContext()
+    const { forwardRef, currentElement } = useForwardExpose()
+    const ariaLabel = computed(() => props.ariaLabel || currentElement.value?.textContent)
+    const popperContentProps = computed(() => {
+      const { ariaLabel: _, ...restProps } = props
+      return defu(restProps, providerContext.content.value ?? {}, TOOLTIP_DEFAULTS)
+    })
+
+    onMounted(() => {
+      useEventListener(
+        window,
+        'scroll',
+        event => {
+          const target = event.target as HTMLElement
+          if (target?.contains(rootContext.trigger.value!)) rootContext.onClose()
+        },
+        { capture: true },
+      )
+      useEventListener(document, TOOLTIP_OPEN, rootContext.onClose)
+    })
+
+    const onPointerDownOutside = (event: CustomEvent) => {
+      if (
+        rootContext.disableClosingTrigger.value &&
+        rootContext.trigger.value?.contains(event.target as HTMLElement)
+      )
+        event.preventDefault()
+      emit('pointerDownOutside', event)
+    }
+
+    return () =>
+      h(
+        DismissableLayer as Component,
+        {
+          'as-child': '',
+          'disable-outside-pointer-events': false,
+          onEscapeKeyDown: (event: Event) => emit('escapeKeyDown', event),
+          onPointerDownOutside,
+          onFocusOutside: withModifiers(() => {}, ['prevent']),
+          onDismiss: () => rootContext.onClose(),
+        },
+        {
+          default: withCtx(() => [
+            h(
+              PopperContent as Component,
+              mergeProps(
+                { ref: forwardRef, 'data-state': rootContext.stateAttribute.value },
+                { ...attrs, ...popperContentProps.value },
+                {
+                  style: {
+                    '--reka-tooltip-content-transform-origin':
+                      'var(--reka-popper-transform-origin)',
+                    '--reka-tooltip-content-available-width': 'var(--reka-popper-available-width)',
+                    '--reka-tooltip-content-available-height':
+                      'var(--reka-popper-available-height)',
+                    '--reka-tooltip-trigger-width': 'var(--reka-popper-anchor-width)',
+                    '--reka-tooltip-trigger-height': 'var(--reka-popper-anchor-height)',
+                  },
+                },
+              ),
+              {
+                default: withCtx(() => [
+                  renderSlot(slots, 'default'),
+                  h(
+                    VisuallyHidden as Component,
+                    { id: rootContext.contentId, role: 'tooltip' },
+                    {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(ariaLabel.value), 1),
+                      ]),
+                    },
+                  ),
+                ]),
+              },
+            ),
+          ]),
+        },
+      )
+  },
+})
+
+const TooltipContentHoverable = defineComponent({
+  name: 'TooltipContentHoverable',
+  props: contentImplProps,
+  setup(props, { slots }) {
+    const forwardedProps = useForwardProps(props)
+    const { forwardRef, currentElement } = useForwardExpose()
+    const { trigger, onClose } = injectTooltipRootContext()
+    const providerContext = injectTooltipProviderContext()
+    const { isPointerInTransit, onPointerExit } = useGraceArea(trigger, currentElement)
+    providerContext.isPointerInTransitRef = isPointerInTransit
+    onPointerExit(() => onClose())
+    return () =>
+      h(TooltipContentImpl as Component, mergeProps({ ref: forwardRef }, forwardedProps.value), {
+        default: withCtx(() => [renderSlot(slots, 'default')]),
+      })
+  },
+})
+
+export const TooltipContent = defineComponent({
+  name: 'TooltipContent',
+  props: {
+    forceMount: { type: Boolean, required: false },
+    ariaLabel: { type: String, required: false },
+    ...primitive(),
+    side: { type: null, required: false },
+    sideOffset: { type: Number, required: false },
+    align: { type: null, required: false },
+    alignOffset: { type: Number, required: false },
+    avoidCollisions: { type: Boolean, required: false },
+    collisionBoundary: { type: null, required: false },
+    collisionPadding: {
+      type: [Number, Object] as PropType<number | Partial<Record<string, number>>>,
+      required: false,
+    },
+    arrowPadding: { type: Number, required: false },
+    sticky: { type: String, required: false },
+    hideWhenDetached: { type: Boolean, required: false },
+    positionStrategy: { type: String, required: false },
+    updatePositionStrategy: { type: String, required: false },
+  },
+  emits: ['escapeKeyDown', 'pointerDownOutside'],
+  setup(props, { emit, slots }) {
+    const rootContext = injectTooltipRootContext()
+    const forwarded = useForwardPropsEmits(props, emit as (name: string) => void)
+    const { forwardRef } = useForwardExpose()
+    return () =>
+      h(
+        Presence,
+        { present: props.forceMount || rootContext.open.value },
+        {
+          default: withCtx(() => [
+            h(
+              resolveDynamicComponent(
+                rootContext.disableHoverableContent.value
+                  ? TooltipContentImpl
+                  : TooltipContentHoverable,
+              ) as Component,
+              mergeProps({ ref: forwardRef }, forwarded.value),
+              { default: withCtx(() => [renderSlot(slots, 'default')]) },
+            ),
+          ]),
+        },
+      )
+  },
+})
+
+export const TooltipArrow = defineComponent({
+  name: 'TooltipArrow',
+  props: {
+    width: { type: Number, required: false, default: 10 },
+    height: { type: Number, required: false, default: 5 },
+    ...primitive('svg'),
+  },
+  setup(props, { slots }) {
+    useForwardExpose()
+    return () =>
+      h(PopperArrow as Component, normalizeProps(guardReactiveProps(props)), {
+        default: withCtx(() => [renderSlot(slots, 'default')]),
+      })
+  },
+})
+
+export const TooltipPortal = defineComponent({
+  name: 'TooltipPortal',
+  props: {
+    to: { type: null, required: false },
+    disabled: { type: Boolean, required: false },
+    defer: { type: Boolean, required: false },
+    forceMount: { type: Boolean, required: false },
+  },
+  setup(props, { slots }) {
+    return () =>
+      h(Teleport as Component, normalizeProps(guardReactiveProps(props)), {
+        default: withCtx(() => [renderSlot(slots, 'default')]),
+      })
+  },
+})

package/src/primitives/tooltip/TooltipRoot.ts

@@ -0,0 +1,170 @@
+import {
+  computed,
+  defineComponent,
+  h,
+  ref,
+  renderSlot,
+  toRefs,
+  watch,
+  withCtx,
+  type Ref,
+} from 'vue'
+import { useTimeoutFn } from '@vueuse/core'
+import { PopperRoot } from '../popper'
+import { useForwardExpose } from '../utils/useForwardExpose'
+import { useVModel } from '../utils/useVModel'
+import {
+  injectTooltipProviderContext,
+  provideTooltipProviderContext,
+  provideTooltipRootContext,
+  TOOLTIP_OPEN,
+} from './context'
+
+export const TooltipProvider = defineComponent({
+  name: 'TooltipProvider',
+  inheritAttrs: false,
+  props: {
+    delayDuration: { type: Number, required: false, default: 700 },
+    skipDelayDuration: { type: Number, required: false, default: 300 },
+    disableHoverableContent: { type: Boolean, required: false, default: false },
+    disableClosingTrigger: { type: Boolean, required: false },
+    disabled: { type: Boolean, required: false },
+    ignoreNonKeyboardFocus: { type: Boolean, required: false, default: false },
+    content: { type: Object, required: false },
+  },
+  setup(props, { slots }) {
+    const {
+      delayDuration,
+      skipDelayDuration,
+      disableHoverableContent,
+      disableClosingTrigger,
+      ignoreNonKeyboardFocus,
+      disabled,
+      content,
+    } = toRefs(props)
+    useForwardExpose()
+    const isOpenDelayed = ref(true)
+    const isPointerInTransitRef = ref(false)
+    const { start: startTimer, stop: clearTimer } = useTimeoutFn(
+      () => {
+        isOpenDelayed.value = true
+      },
+      skipDelayDuration,
+      { immediate: false },
+    )
+    provideTooltipProviderContext({
+      isOpenDelayed,
+      delayDuration,
+      onOpen() {
+        clearTimer()
+        isOpenDelayed.value = false
+      },
+      onClose() {
+        startTimer()
+      },
+      isPointerInTransitRef,
+      disableHoverableContent,
+      disableClosingTrigger,
+      disabled,
+      ignoreNonKeyboardFocus,
+      content: content as Ref<Record<string, unknown> | undefined>,
+    })
+    return () => renderSlot(slots, 'default')
+  },
+})
+
+export const TooltipRoot = defineComponent({
+  name: 'TooltipRoot',
+  props: {
+    defaultOpen: { type: Boolean, required: false, default: false },
+    open: { type: Boolean, required: false, default: undefined },
+    delayDuration: { type: Number, required: false, default: undefined },
+    disableHoverableContent: { type: Boolean, required: false, default: undefined },
+    disableClosingTrigger: { type: Boolean, required: false, default: undefined },
+    disabled: { type: Boolean, required: false, default: undefined },
+    ignoreNonKeyboardFocus: { type: Boolean, required: false, default: undefined },
+  },
+  emits: ['update:open'],
+  setup(props, { emit, slots }) {
+    useForwardExpose()
+    const providerContext = injectTooltipProviderContext()
+    const disableHoverableContent = computed(
+      () => props.disableHoverableContent ?? providerContext.disableHoverableContent.value,
+    )
+    const disableClosingTrigger = computed(
+      () => props.disableClosingTrigger ?? providerContext.disableClosingTrigger.value,
+    )
+    const disableTooltip = computed(() => props.disabled ?? providerContext.disabled.value)
+    const delayDuration = computed(() => props.delayDuration ?? providerContext.delayDuration.value)
+    const ignoreNonKeyboardFocus = computed(
+      () => props.ignoreNonKeyboardFocus ?? providerContext.ignoreNonKeyboardFocus.value,
+    )
+    const open = useVModel(props, 'open', emit, {
+      defaultValue: props.defaultOpen,
+      passive: props.open === undefined,
+    }) as Ref<boolean>
+
+    watch(open, isOpen => {
+      if (!providerContext.onClose) return
+      if (isOpen) {
+        providerContext.onOpen()
+        document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN))
+      } else providerContext.onClose()
+    })
+
+    const wasOpenDelayed = ref(false)
+    const trigger = ref<HTMLElement>()
+    const stateAttribute = computed(() => {
+      if (!open.value) return 'closed'
+      return wasOpenDelayed.value ? 'delayed-open' : 'instant-open'
+    })
+
+    const { start: startTimer, stop: clearTimer } = useTimeoutFn(
+      () => {
+        wasOpenDelayed.value = true
+        open.value = true
+      },
+      delayDuration,
+      { immediate: false },
+    )
+
+    function handleOpen() {
+      clearTimer()
+      wasOpenDelayed.value = false
+      open.value = true
+    }
+    function handleClose() {
+      clearTimer()
+      open.value = false
+    }
+
+    provideTooltipRootContext({
+      contentId: '',
+      open,
+      stateAttribute,
+      trigger,
+      onTriggerChange(element) {
+        trigger.value = element
+      },
+      onTriggerEnter() {
+        if (providerContext.isOpenDelayed.value) startTimer()
+        else handleOpen()
+      },
+      onTriggerLeave() {
+        if (disableHoverableContent.value) handleClose()
+        else clearTimer()
+      },
+      onOpen: handleOpen,
+      onClose: handleClose,
+      disableHoverableContent,
+      disableClosingTrigger,
+      disabled: disableTooltip,
+      ignoreNonKeyboardFocus,
+    })
+
+    return () =>
+      h(PopperRoot, null, {
+        default: withCtx(() => [renderSlot(slots, 'default', { open: open.value })]),
+      })
+  },
+})

package/src/primitives/tooltip/context.ts

@@ -0,0 +1,39 @@
+import type { ComputedRef, Ref } from 'vue'
+import { createContext } from '../utils/createContext'
+
+export const TOOLTIP_OPEN = 'tooltip.open'
+
+export interface TooltipProviderContext {
+  isOpenDelayed: Ref<boolean>
+  delayDuration: Ref<number>
+  onOpen: () => void
+  onClose: () => void
+  isPointerInTransitRef: Ref<boolean>
+  disableHoverableContent: Ref<boolean>
+  disableClosingTrigger: Ref<boolean>
+  disabled: Ref<boolean>
+  ignoreNonKeyboardFocus: Ref<boolean>
+  content: Ref<Record<string, unknown> | undefined>
+}
+
+export const [injectTooltipProviderContext, provideTooltipProviderContext] =
+  createContext<TooltipProviderContext>('TooltipProvider')
+
+export interface TooltipRootContext {
+  contentId: string
+  open: Ref<boolean>
+  stateAttribute: ComputedRef<'closed' | 'delayed-open' | 'instant-open'>
+  trigger: Ref<HTMLElement | undefined>
+  onTriggerChange: (element: HTMLElement | undefined) => void
+  onTriggerEnter: () => void
+  onTriggerLeave: () => void
+  onOpen: () => void
+  onClose: () => void
+  disableHoverableContent: Ref<boolean>
+  disableClosingTrigger: Ref<boolean>
+  disabled: Ref<boolean>
+  ignoreNonKeyboardFocus: Ref<boolean>
+}
+
+export const [injectTooltipRootContext, provideTooltipRootContext] =
+  createContext<TooltipRootContext>('TooltipRoot')

package/src/primitives/tooltip/index.ts

@@ -0,0 +1,9 @@
+export {
+  injectTooltipProviderContext,
+  injectTooltipRootContext,
+  TOOLTIP_OPEN,
+  type TooltipProviderContext,
+  type TooltipRootContext,
+} from './context'
+export { TooltipArrow, TooltipContent, TooltipPortal, TooltipTrigger } from './TooltipParts'
+export { TooltipProvider, TooltipRoot } from './TooltipRoot'

package/src/primitives/tree/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.