@hina-ui/vue 1.7.11 → 1.7.13

package/src/components/toast/Toaster.vue

@@ -7,7 +7,7 @@
     ToastTitle,
     ToastDescription,
     ToastClose,
-  } from 'reka-ui'
+  } from '../../primitives/toast'
   import { CircleCheck, CircleX, TriangleAlert, Info } from '@lucide/vue'
   import Button from '../button/Button.vue'
   import CloseButton from '../close-button/CloseButton.vue'

package/src/components/toggle/Toggle.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { injectTooltipProviderContext } from 'reka-ui'
+  import { injectTooltipProviderContext } from '../../primitives/tooltip'
   import { Toggle as ToggleRoot } from '../../primitives/toggle'
   import { computed, useSlots } from 'vue'
   import { cn } from '../../lib/cn'

package/src/components/toolbar/ToolbarControl.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { injectTooltipProviderContext } from 'reka-ui'
+  import { injectTooltipProviderContext } from '../../primitives/tooltip'
   import { Passthrough } from '../../lib/passthrough'
   import Button from '../button/Button.vue'
   import Tooltip from '../tooltip/Tooltip.vue'

package/src/components/tooltip/Tooltip.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { TooltipRoot, TooltipTrigger } from 'reka-ui'
+  import { TooltipRoot, TooltipTrigger } from '../../primitives/tooltip'
   import TooltipBubble from './TooltipBubble.vue'
   import type { TooltipProps } from './types'
 

package/src/components/tooltip/TooltipBubble.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { TooltipPortal, TooltipContent, TooltipArrow } from 'reka-ui'
+  import { TooltipPortal, TooltipContent, TooltipArrow } from '../../primitives/tooltip'
   import { cn } from '../../lib/cn'
   import type { TooltipProps } from './types'
 

package/src/components/tooltip/TooltipDirectiveRoot.ts

@@ -4,7 +4,7 @@ import {
   TooltipRoot,
   injectTooltipProviderContext,
   injectTooltipRootContext,
-} from 'reka-ui'
+} from '../../primitives/tooltip'
 import TooltipBubble from './TooltipBubble.vue'
 import { useTooltipTarget } from './composables/useTooltipTarget'
 import type { TooltipDirectiveOptions } from './types'

package/src/components/tooltip/TooltipProvider.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { TooltipProvider as RekaTooltipProvider } from 'reka-ui'
+  import { TooltipProvider as RekaTooltipProvider } from '../../primitives/tooltip'
 
   defineOptions({ name: 'HnTooltipProvider' })
 

package/src/components/tooltip/composables/useTooltipTarget.ts

@@ -1,6 +1,6 @@
 import { onScopeDispose, watch, watchPostEffect } from 'vue'
 import { useEventListener } from '@vueuse/core'
-import { injectTooltipProviderContext, injectTooltipRootContext } from 'reka-ui'
+import { injectTooltipProviderContext, injectTooltipRootContext } from '../../../primitives/tooltip'
 
 type Handler = (event: Event) => void
 

package/src/components/tour/Tour.vue

@@ -0,0 +1,447 @@
+<script setup lang="ts">
+  import { computed, nextTick, onMounted, ref, shallowRef, useId, watch, watchEffect } from 'vue'
+  import {
+    beaconPoint,
+    clampTourStep,
+    hideOutsideTour,
+    resolveTourTarget,
+    revealTourTarget,
+    runTourChange,
+    spotlightMask,
+    spotlightRect,
+    spotlightShape,
+    TOUR_ARROW_HEIGHT,
+    TOUR_ARROW_PADDING,
+    TOUR_ARROW_PATH,
+    TOUR_ARROW_WIDTH,
+    TOUR_PADDING,
+    TOUR_RADIUS,
+    TOUR_SIDE_OFFSET,
+    tourBeaconOnArrival,
+    tourKeyAction,
+    tourReference,
+    tourTargetBlocked,
+    trapTourFocus,
+    watchTourTarget,
+    type TourRect,
+    type TourSpotlight,
+  } from '../../../../shared/src/lib/tour'
+  import { DismissableLayer } from '../../primitives/dismissable-layer'
+  import { PopperArrow, PopperContent, PopperRoot } from '../../primitives/popper'
+  import { Presence } from '../../primitives/presence'
+  import { Teleport as TeleportPrimitive } from '../../primitives/teleport'
+  import { cn } from '../../lib/cn'
+  import { devWarn } from '../../lib/dev'
+  import { useDirection } from '../../lib/useDirection'
+  import { useUiLocale } from '../../locale'
+  import Button from '../button/Button.vue'
+  import Card from '../card/Card.vue'
+  import CloseButton from '../close-button/CloseButton.vue'
+  import Text from '../text/Text.vue'
+  import {
+    tourBeacon,
+    tourBeaconDot,
+    tourBeaconPulse,
+    tourBlocker,
+    tourCard,
+    tourCentered,
+    tourFooter,
+    tourHeader,
+    tourMask,
+  } from './tour.variants'
+  import type { TourExpose, TourProps, TourSlotProps, TourStep } from './types'
+
+  defineOptions({ name: 'HnTour' })
+
+  const props = withDefaults(defineProps<TourProps>(), { mask: true, blockTarget: false })
+  const emit = defineEmits<{ finish: []; skip: [] }>()
+  defineSlots<{
+    content?(props: TourSlotProps): unknown
+    footer?(props: TourSlotProps): unknown
+  }>()
+
+  const open = defineModel<boolean>('open', { default: false })
+  const step = defineModel<number>('step', { default: 1 })
+
+  const t = useUiLocale()
+  const titleId = useId()
+  const descriptionId = useId()
+  const { root, direction } = useDirection(() => props.dir)
+
+  const total = computed(() => props.steps.length)
+  const current = computed(() => clampTourStep(step.value, total.value))
+  const currentStep = computed<TourStep>(() => props.steps[current.value - 1] ?? {})
+  const isLast = computed(() => current.value >= total.value)
+  const busy = ref(false)
+  const beaconPending = ref(false)
+  const resolvedFor = ref<number | null>(null)
+  const target = shallowRef<HTMLElement | null>(null)
+  const hole = ref<TourRect | null>(null)
+  const targetRect = ref<TourRect | null>(null)
+  const viewport = ref({ width: 0, height: 0 })
+
+  const padding = computed(() => currentStep.value.padding ?? TOUR_PADDING)
+  const active = computed(() => open.value && total.value > 0)
+  const resolved = computed(() => active.value && resolvedFor.value !== null)
+  const beaconVisible = computed(() => resolved.value && !!target.value && beaconPending.value)
+  const cardVisible = computed(() => resolved.value && !beaconVisible.value)
+  const maskVisible = computed(() => cardVisible.value && props.mask)
+  const modal = computed(() => props.mask)
+  const blocked = computed(() => tourTargetBlocked(currentStep.value, props.blockTarget))
+  const blocking = computed(() => cardVisible.value && !!hole.value && blocked.value)
+
+  const spotlight = computed(() =>
+    hole.value
+      ? spotlightShape(viewport.value, hole.value, currentStep.value.radius ?? TOUR_RADIUS)
+      : null,
+  )
+  const lastSpotlight = shallowRef<TourSpotlight | null>(null)
+  const spotlightState = computed(() => spotlightMask(spotlight.value, lastSpotlight.value))
+  const holeStyle = computed(() =>
+    hole.value
+      ? {
+          left: `${hole.value.x}px`,
+          top: `${hole.value.y}px`,
+          width: `${hole.value.width}px`,
+          height: `${hole.value.height}px`,
+        }
+      : undefined,
+  )
+  const beaconStyle = computed(() => {
+    if (!targetRect.value) return undefined
+    const point = beaconPoint(targetRect.value, direction.value)
+    return { left: `${point.x}px`, top: `${point.y}px` }
+  })
+  const reference = computed(() =>
+    target.value ? tourReference(target.value, padding.value) : undefined,
+  )
+
+  const card = shallowRef<{ $el: HTMLElement } | null>(null)
+  const layer = shallowRef<{ $el: HTMLElement } | null>(null)
+  const beaconButton = shallowRef<HTMLButtonElement | null>(null)
+  let returnFocus: HTMLElement | null = null
+
+  const mounted = ref(false)
+  let navigated = false
+
+  function resolveTarget() {
+    if (!mounted.value || !active.value) return
+    const definition = currentStep.value.target
+    const element = resolveTourTarget(definition)
+    if (definition && !element)
+      devWarn('Tour', `the target of step ${current.value} was not found; the card is centered`)
+    target.value = element
+    root.value = element ?? document.documentElement
+    resolvedFor.value = current.value
+    if (element && currentStep.value.scroll !== false) revealTourTarget(element)
+  }
+
+  watch([active, current, () => props.steps], resolveTarget, { flush: 'post' })
+
+  onMounted(() => {
+    mounted.value = true
+    beaconPending.value = tourBeaconOnArrival(currentStep.value, !!props.beacon, false)
+    resolveTarget()
+    if (!active.value) return
+    returnFocus = document.activeElement as HTMLElement | null
+    void nextTick(() => {
+      if (cardVisible.value) card.value?.$el.focus({ preventScroll: true })
+    })
+  })
+
+  watch([active, current], ([isActive], [wasActive]) => {
+    const focusInCard = !!card.value?.$el.contains(document.activeElement)
+    beaconPending.value = tourBeaconOnArrival(
+      currentStep.value,
+      !!props.beacon,
+      !!isActive && !!wasActive && navigated,
+    )
+    navigated = false
+    if (!isActive) {
+      resolvedFor.value = null
+      lastSpotlight.value = null
+    }
+    if (isActive && !wasActive) returnFocus = document.activeElement as HTMLElement | null
+    if (!isActive && wasActive) void nextTick(restoreFocus)
+    if (isActive && wasActive && focusInCard)
+      void nextTick(() => {
+        if (beaconVisible.value) beaconButton.value?.focus()
+      })
+  })
+
+  watch([spotlight, maskVisible], ([value, visible]) => {
+    if (value && visible) lastSpotlight.value = value
+  })
+
+  watch(cardVisible, visible => {
+    if (visible) void nextTick(() => card.value?.$el.focus({ preventScroll: true }))
+  })
+
+  watchEffect(onCleanup => {
+    const element = target.value
+    if (!mounted.value || !active.value) return
+    const update = () => {
+      viewport.value = { width: window.innerWidth, height: window.innerHeight }
+      if (!element) {
+        hole.value = null
+        targetRect.value = null
+        return
+      }
+      const rect = element.getBoundingClientRect()
+      targetRect.value = spotlightRect(rect, 0)
+      hole.value = spotlightRect(rect, padding.value)
+    }
+    if (!element) {
+      update()
+      window.addEventListener('resize', update)
+      onCleanup(() => window.removeEventListener('resize', update))
+      return
+    }
+    onCleanup(watchTourTarget(element, update))
+  })
+
+  watchEffect(
+    onCleanup => {
+      if (!cardVisible.value || !modal.value) return
+      const layerElement = layer.value?.$el as HTMLElement | undefined
+      if (!layerElement?.isConnected) return
+      const reachable = !blocked.value
+      const element = target.value
+      onCleanup(hideOutsideTour([layerElement, element]))
+      onCleanup(
+        trapTourFocus(
+          () => [card.value?.$el, reachable ? element : null],
+          () => layer.value?.$el,
+        ),
+      )
+    },
+    { flush: 'post' },
+  )
+
+  function restoreFocus() {
+    const focus = returnFocus
+    returnFocus = null
+    if (!focus?.isConnected) return
+    const focused = document.activeElement
+    if (!focused || focused === document.body || focused.closest('[data-hn-tour]'))
+      focus.focus({ preventScroll: true })
+  }
+
+  async function goTo(value: number) {
+    if (busy.value || !total.value) return
+    const next = clampTourStep(value, total.value)
+    if (next === current.value) return
+    const allowed = await runTourChange(
+      props.beforeChange,
+      next,
+      current.value,
+      state => (busy.value = state),
+    )
+    if (!allowed) return
+    navigated = true
+    step.value = next
+  }
+
+  async function next() {
+    if (busy.value) return
+    if (isLast.value) {
+      finish()
+      return
+    }
+    await goTo(current.value + 1)
+  }
+
+  async function prev() {
+    await goTo(current.value - 1)
+  }
+
+  function finish() {
+    emit('finish')
+    open.value = false
+  }
+
+  function skip() {
+    if (busy.value) return
+    emit('skip')
+    open.value = false
+  }
+
+  function close() {
+    open.value = false
+  }
+
+  function onEscape(event: KeyboardEvent) {
+    if (props.locked || busy.value) event.preventDefault()
+  }
+
+  function preventDismiss(event: Event) {
+    event.preventDefault()
+  }
+
+  function onKeydown(event: KeyboardEvent) {
+    const action = tourKeyAction(event, direction.value)
+    if (!action) return
+    event.preventDefault()
+    if (action === 'next') {
+      if (!isLast.value) void next()
+    } else if (current.value > 1) void prev()
+  }
+
+  const slotProps = computed<TourSlotProps>(() => ({
+    step: currentStep.value,
+    current: current.value,
+    total: total.value,
+    busy: busy.value,
+    next: () => void next(),
+    prev: () => void prev(),
+    skip,
+  }))
+
+  const popperProps = computed(() =>
+    target.value
+      ? {
+          asChild: true,
+          reference: reference.value,
+          side: currentStep.value.side ?? 'bottom',
+          align: currentStep.value.align ?? 'center',
+          sideOffset: TOUR_SIDE_OFFSET,
+          collisionPadding: 16,
+          arrowPadding: TOUR_ARROW_PADDING,
+        }
+      : {
+          class: cn(tourCentered(), 'hn-anim-pop'),
+          'data-state': cardVisible.value ? 'open' : 'closed',
+        },
+  )
+
+  defineExpose<TourExpose>({ next, prev, goTo, close })
+</script>
+
+<template>
+  <TeleportPrimitive v-if="total > 0">
+    <div
+      data-hn-tour-blocker
+      aria-hidden="true"
+      :hidden="!blocking"
+      :class="tourBlocker()"
+      :style="blocking ? holeStyle : undefined"
+    />
+    <Presence :present="maskVisible">
+      <div
+        data-hn-tour-mask
+        aria-hidden="true"
+        :data-state="maskVisible ? 'open' : 'closed'"
+        :data-hn-tour-hole="spotlightState.hole"
+        :class="tourMask()"
+        :style="spotlightState.style"
+      />
+    </Presence>
+    <button
+      v-if="beaconVisible"
+      ref="beaconButton"
+      type="button"
+      data-hn-tour-beacon
+      :aria-label="t.tour.beacon(current, currentStep.title ?? '')"
+      :class="tourBeacon()"
+      :style="beaconStyle"
+      @click="beaconPending = false"
+    >
+      <span :class="tourBeaconPulse()" />
+      <span :class="tourBeaconDot()" />
+    </button>
+    <PopperRoot>
+      <Presence :present="cardVisible">
+        <DismissableLayer
+          ref="layer"
+          as-child
+          @escape-key-down="onEscape"
+          @pointer-down-outside="preventDismiss"
+          @focus-outside="preventDismiss"
+          @dismiss="skip"
+        >
+          <component :is="target ? PopperContent : 'div'" v-bind="popperProps">
+            <Card
+              ref="card"
+              data-hn-tour
+              :data-step="current"
+              :data-state="cardVisible ? 'open' : 'closed'"
+              :padded="false"
+              role="dialog"
+              tabindex="-1"
+              :dir="direction"
+              :aria-modal="modal ? 'true' : undefined"
+              :aria-labelledby="currentStep.title ? titleId : undefined"
+              :aria-describedby="
+                currentStep.description || $slots.content ? descriptionId : undefined
+              "
+              :aria-busy="busy || undefined"
+              :class="cn(tourCard(), target && 'hn-anim-pop', props.class)"
+              @keydown="onKeydown"
+            >
+              <div v-if="currentStep.title || !props.locked" :class="tourHeader()">
+                <Text v-if="currentStep.title" :id="titleId" weight="medium" class="min-w-0 flex-1">
+                  {{ currentStep.title }}
+                </Text>
+                <CloseButton
+                  v-if="!props.locked"
+                  data-hn-tour-skip
+                  class="ms-auto -me-1.5 -mt-1.5"
+                  :label="props.skipText ?? t.tour.skip"
+                  :disabled="busy"
+                  @click="skip"
+                />
+              </div>
+              <div v-if="currentStep.description || $slots.content" :id="descriptionId">
+                <slot name="content" v-bind="slotProps">
+                  <Text tone="muted" size="sm">{{ currentStep.description }}</Text>
+                </slot>
+              </div>
+              <PopperArrow
+                v-if="target"
+                data-hn-tour-arrow
+                :width="TOUR_ARROW_WIDTH"
+                :height="TOUR_ARROW_HEIGHT"
+                class="overflow-visible"
+              >
+                <path :d="`${TOUR_ARROW_PATH}Z`" class="fill-surface" />
+                <path
+                  :d="TOUR_ARROW_PATH"
+                  fill="none"
+                  class="stroke-line"
+                  vector-effect="non-scaling-stroke"
+                />
+              </PopperArrow>
+              <slot name="footer" v-bind="slotProps">
+                <div :class="tourFooter()">
+                  <Text as="span" tone="muted" size="sm" class="tabular-nums">
+                    {{ t.tour.progress(current, total) }}
+                  </Text>
+                  <div class="ms-auto flex gap-2">
+                    <Button
+                      v-if="current > 1"
+                      data-hn-tour-prev
+                      size="sm"
+                      variant="soft"
+                      tone="neutral"
+                      :disabled="busy"
+                      @click="prev"
+                    >
+                      {{ props.prevText ?? t.tour.prev }}
+                    </Button>
+                    <Button data-hn-tour-next size="sm" :loading="busy" @click="next">
+                      {{
+                        isLast
+                          ? (props.finishText ?? t.tour.finish)
+                          : (props.nextText ?? t.tour.next)
+                      }}
+                    </Button>
+                  </div>
+                </div>
+              </slot>
+            </Card>
+          </component>
+        </DismissableLayer>
+      </Presence>
+    </PopperRoot>
+  </TeleportPrimitive>
+</template>

package/src/components/tour/tour.variants.ts

@@ -0,0 +1 @@
+export * from '../../../../shared/src/variants/tour'

package/src/components/tour/types.ts

@@ -0,0 +1,43 @@
+import type {
+  TourAlign,
+  TourBeforeChange,
+  TourSide,
+  TourStepBase,
+  TourTarget,
+} from '../../../../shared/src/lib/tour'
+
+export type { TourAlign, TourBeforeChange, TourSide, TourTarget }
+
+export type TourStep = TourStepBase
+
+export interface TourProps {
+  steps: TourStep[]
+  mask?: boolean
+  locked?: boolean
+  beacon?: boolean
+  blockTarget?: boolean
+  nextText?: string
+  prevText?: string
+  finishText?: string
+  skipText?: string
+  beforeChange?: TourBeforeChange
+  dir?: 'ltr' | 'rtl'
+  class?: string
+}
+
+export interface TourSlotProps {
+  step: TourStep
+  current: number
+  total: number
+  busy: boolean
+  next: () => void
+  prev: () => void
+  skip: () => void
+}
+
+export interface TourExpose {
+  next: () => Promise<void>
+  prev: () => Promise<void>
+  goTo: (step: number) => Promise<void>
+  close: () => void
+}

package/src/components/tree/Tree.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { TreeItem, TreeRoot } from 'reka-ui'
+  import { TreeItem, TreeRoot } from '../../primitives/tree'
   import { cn } from '../../lib/cn'
   import { useUiLocale } from '../../locale'
   import { useFieldControl } from '../form-field/context'

package/src/components/tree/TreeRows.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts" generic="T extends { label: string; disabled?: boolean }">
   import { shallowRef, watch } from 'vue'
-  import type { FlattenedItem } from 'reka-ui'
+  import type { FlattenedItem } from '../../primitives/tree'
   import type { VirtualizeOptions } from '../../lib/virtual/types'
   import ScrollArea from '../scroll-area/ScrollArea.vue'
   import VirtualTreeWindow from './VirtualTreeWindow.vue'

package/src/components/tree/VirtualTreeWindow.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts" generic="T extends { label: string; disabled?: boolean }">
   import { toRef } from 'vue'
-  import type { FlattenedItem } from 'reka-ui'
+  import type { FlattenedItem } from '../../primitives/tree'
   import type { VirtualizeOptions } from '../../lib/virtual/types'
   import { useVirtualTree } from '../../lib/reka/useVirtualTree'
   import { virtualListContent, virtualListItem } from '../virtual-list/virtual-list.variants'

package/src/components/tree-select/TreeSelect.vue

@@ -6,9 +6,8 @@
     PopoverPortal,
     PopoverRoot,
     PopoverTrigger,
-    TreeItem,
-    TreeRoot,
-  } from 'reka-ui'
+  } from '../../primitives/popover'
+  import { TreeItem, TreeRoot } from '../../primitives/tree'
   import { cn } from '../../lib/cn'
   import { rekaPopoverStyle } from '../../lib/reka/styles'
   import { useUiLocale } from '../../locale'

package/src/components/tree-select/composables/useTreeSelect.ts

@@ -1,5 +1,5 @@
 import { computed, ref, shallowRef, watch, type Ref } from 'vue'
-import { useFilter } from 'reka-ui'
+import { createCollatorFilter } from '../../../../../shared/src/lib/virtual/filter'
 import { findNode, pathTo, type TreeSelectNode } from '../types'
 import { filterTree } from '../utils/filterTree'
 
@@ -26,7 +26,7 @@ export function useTreeSelect(
     focusLast(): void
     isFirst(element: EventTarget | null): boolean
   }>()
-  const { contains } = useFilter({ sensitivity: 'base' })
+  const { contains } = createCollatorFilter({ sensitivity: 'base' })
   const query = computed(() => (props.searchable ? search.value.trim() : ''))
   const filtered = computed(() =>
     query.value ? filterTree(props.items, node => contains(node.label, query.value)) : null,

package/src/index.ts

@@ -8,6 +8,10 @@ export type { Bezier, TransitionName } from './motion'
 export { provideUiLocale, useUiLocale, zhCN, enUS, jaJP } from './locale'
 export type { UiMessages, PartialUiMessages } from './locale'
 
+export { default as ConfigProvider } from './components/config-provider/ConfigProvider.vue'
+export { useConfig } from './components/config-provider/useConfig'
+export type { ConfigProviderProps, ScrollBodyOption } from './components/config-provider/types'
+
 export { REQUIRED_SINGLETONS } from './singletons'
 export type { RequiredSingleton } from './singletons'
 
@@ -139,6 +143,17 @@ export { default as Rating } from './components/rating/Rating.vue'
 export { default as FileUpload } from './components/file-upload/FileUpload.vue'
 export { default as AlertDialog } from './components/alert-dialog/AlertDialog.vue'
 export { default as Popconfirm } from './components/popconfirm/Popconfirm.vue'
+export { default as Tour } from './components/tour/Tour.vue'
+export type {
+  TourAlign,
+  TourBeforeChange,
+  TourExpose,
+  TourProps,
+  TourSide,
+  TourSlotProps,
+  TourStep,
+  TourTarget,
+} from './components/tour/types'
 export { default as HoverCard } from './components/hover-card/HoverCard.vue'
 export { default as ContextMenu } from './components/context-menu/ContextMenu.vue'
 export { default as ContextMenuItem } from './components/context-menu/ContextMenuItem.vue'

package/src/lib/anchored-overlay.ts

@@ -8,7 +8,8 @@ import {
   type OverlayAnchor,
   type OverlayPositionStrategy,
 } from './overlay-anchor'
-import { useForwardExpose, type DropdownMenuContentEmits } from 'reka-ui'
+import { type DropdownMenuContentEmits } from '../primitives/dropdown-menu'
+import { useForwardExpose } from '../primitives/utils/useForwardExpose'
 
 export function useAnchoredOverlay(
   props: {

package/src/lib/dialog-focus.ts

@@ -1,4 +1,4 @@
-import { injectDialogRootContext } from 'reka-ui'
+import { injectDialogRootContext } from '../primitives/dialog'
 
 export function useDialogCloseFocus(onCloseAutoFocus: (event: Event) => void) {
   const context = injectDialogRootContext()