@hina-ui/vue 1.7.12 → 1.7.14

package/dist/shared/lib/tour.ts

@@ -0,0 +1,439 @@
+import { autoUpdate } from '@floating-ui/dom'
+import { hideOutsideLayers, isHighestLayer } from '../primitives/dismissable-layer'
+import { getActiveElement, getTabbableCandidates } from '../primitives/focus-scope'
+import { cssTimeToMs } from './css-time'
+
+export type TourSide = 'top' | 'right' | 'bottom' | 'left'
+export type TourAlign = 'start' | 'center' | 'end'
+
+export interface TourRectLike {
+  x?: number
+  y?: number
+  left?: number
+  top?: number
+  width: number
+  height: number
+}
+
+export interface TourVirtualElement {
+  getBoundingClientRect: () => TourRectLike
+  contextElement?: Element
+}
+
+export type TourTargetItem = string | Element | TourRectLike | TourVirtualElement
+export type TourTarget =
+  | TourTargetItem
+  | TourTargetItem[]
+  | (() => TourTargetItem | TourTargetItem[] | null | undefined)
+  | null
+
+export type TourPointerKind = 'mouse' | 'touch'
+export type TourCloseReason = 'finish' | 'skip' | 'escape' | 'close'
+
+export interface TourPoint {
+  x: number
+  y: number
+}
+
+export interface TourPointer {
+  move: (target: TourTarget | TourPoint, duration?: number) => Promise<void>
+  tap: () => Promise<void>
+  press: (duration?: number) => Promise<void>
+  drag: (
+    target: TourTarget | TourPoint,
+    duration?: number,
+    onMove?: (point: TourPoint) => void,
+  ) => Promise<void>
+  key: (key: string, duration?: number) => Promise<void>
+  hide: () => Promise<void>
+}
+
+export interface TourSpotlightOptions {
+  padding?: number
+  radius?: number
+  wait?: number
+}
+
+export interface TourPlayContext {
+  step: number
+  signal: AbortSignal
+  defer: (cleanup: () => void) => void
+  pointer: TourPointer
+  spotlight: (target?: TourTarget, options?: TourSpotlightOptions) => Promise<void>
+  waitFor: (target: TourTarget, timeout?: number) => Promise<boolean>
+  sleep: (ms: number) => Promise<void>
+}
+
+export type TourPlay = (context: TourPlayContext) => void | Promise<void>
+
+export interface TourStepBase {
+  target?: TourTarget
+  title?: string
+  description?: string
+  side?: TourSide
+  align?: TourAlign
+  padding?: number
+  radius?: number
+  blockTarget?: boolean
+  blockPage?: boolean
+  scroll?: boolean
+  beacon?: boolean
+  wait?: number
+  play?: TourPlay
+}
+
+export type TourBeforeChange = (
+  step: number,
+  previousStep: number,
+) => boolean | void | Promise<boolean | void>
+
+export interface TourRect {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export const TOUR_PADDING = 8
+export const TOUR_RADIUS = 8
+export const TOUR_SIDE_OFFSET = 12
+export const TOUR_ARROW_WIDTH = 16
+export const TOUR_ARROW_HEIGHT = 8
+export const TOUR_ARROW_PADDING = 12
+export const TOUR_ARROW_PATH = 'M0 0L6 6L12 0'
+
+export function tourBeaconOnArrival(step: TourStepBase, beacon: boolean, navigated: boolean) {
+  return navigated ? step.beacon === true : (step.beacon ?? beacon) === true
+}
+
+export function tourTargetBlocked(step: TourStepBase, blockTarget: boolean) {
+  return step.blockTarget ?? blockTarget
+}
+
+export function tourPageBlocked(step: TourStepBase, blockPage: boolean) {
+  return step.blockPage ?? blockPage
+}
+
+export interface TourResolvedTarget {
+  elements: HTMLElement[]
+  virtual: boolean
+  rect: () => TourRect
+}
+
+function toRect(rect: TourRectLike): TourRect {
+  return {
+    x: rect.left ?? rect.x ?? 0,
+    y: rect.top ?? rect.y ?? 0,
+    width: rect.width,
+    height: rect.height,
+  }
+}
+
+export function unionRect(rects: TourRect[]): TourRect {
+  const left = Math.min(...rects.map(rect => rect.x))
+  const top = Math.min(...rects.map(rect => rect.y))
+  const right = Math.max(...rects.map(rect => rect.x + rect.width))
+  const bottom = Math.max(...rects.map(rect => rect.y + rect.height))
+  return { x: left, y: top, width: right - left, height: bottom - top }
+}
+
+type TourItemReader = { element: HTMLElement | null; read: () => TourRect }
+
+function readItem(item: TourTargetItem): TourItemReader | null {
+  if (typeof item === 'string') {
+    if (typeof document === 'undefined') return null
+    const element = document.querySelector<HTMLElement>(item)
+    return element ? { element, read: () => toRect(element.getBoundingClientRect()) } : null
+  }
+  if (typeof Element !== 'undefined' && item instanceof Element)
+    return { element: item as HTMLElement, read: () => toRect(item.getBoundingClientRect()) }
+  if (typeof (item as TourVirtualElement).getBoundingClientRect === 'function') {
+    const virtual = item as TourVirtualElement
+    return { element: null, read: () => toRect(virtual.getBoundingClientRect()) }
+  }
+  const rect = toRect(item as TourRectLike)
+  return { element: null, read: () => rect }
+}
+
+export function resolveTourTarget(target: TourTarget | undefined): TourResolvedTarget | null {
+  if (!target) return null
+  const value = typeof target === 'function' ? target() : target
+  if (!value) return null
+  const items = Array.isArray(value) ? value : [value]
+  if (!items.length) return null
+  const readers: TourItemReader[] = []
+  for (const item of items) {
+    const reader = item ? readItem(item) : null
+    if (!reader) return null
+    readers.push(reader)
+  }
+  return {
+    elements: readers.flatMap(reader => (reader.element ? [reader.element] : [])),
+    virtual: readers.some(reader => !reader.element),
+    rect: () => unionRect(readers.map(reader => reader.read())),
+  }
+}
+
+export function waitForTourTarget(
+  target: TourTarget | undefined,
+  timeout: number,
+  signal?: AbortSignal,
+): Promise<TourResolvedTarget | null> {
+  const found = resolveTourTarget(target)
+  if (found || timeout <= 0 || signal?.aborted) return Promise.resolve(found)
+  return new Promise(resolve => {
+    const check = () => {
+      const resolved = resolveTourTarget(target)
+      if (resolved) finish(resolved)
+    }
+    const observer = new MutationObserver(check)
+    const interval = window.setInterval(check, 100)
+    const timer = window.setTimeout(() => finish(null), timeout)
+    const abort = () => finish(null)
+    function finish(value: TourResolvedTarget | null) {
+      observer.disconnect()
+      window.clearInterval(interval)
+      window.clearTimeout(timer)
+      signal?.removeEventListener('abort', abort)
+      resolve(value)
+    }
+    observer.observe(document.documentElement, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+    })
+    signal?.addEventListener('abort', abort)
+  })
+}
+
+export function clampTourStep(step: number | undefined, count: number) {
+  if (count <= 0) return 1
+  const value = Number.isFinite(step) ? Math.trunc(step as number) : 1
+  return Math.min(Math.max(value, 1), count)
+}
+
+export function spotlightRect(
+  rect: { left: number; top: number; width: number; height: number },
+  padding = TOUR_PADDING,
+): TourRect {
+  return {
+    x: rect.left - padding,
+    y: rect.top - padding,
+    width: rect.width + padding * 2,
+    height: rect.height + padding * 2,
+  }
+}
+
+function round(value: number) {
+  return Math.round(value * 100) / 100
+}
+
+export function spotlightPath(
+  viewport: { width: number; height: number },
+  hole: TourRect,
+  radius = TOUR_RADIUS,
+) {
+  const { width, height } = viewport
+  const r = round(Math.max(0, Math.min(radius, hole.width / 2, hole.height / 2)))
+  const x = round(hole.x)
+  const y = round(hole.y)
+  const right = round(hole.x + hole.width)
+  const bottom = round(hole.y + hole.height)
+  const outer = `M0 0H${round(width)}V${round(height)}H0Z`
+  const inner =
+    `M${round(x + r)} ${y}H${round(right - r)}A${r} ${r} 0 0 1 ${right} ${round(y + r)}` +
+    `V${round(bottom - r)}A${r} ${r} 0 0 1 ${round(right - r)} ${bottom}` +
+    `H${round(x + r)}A${r} ${r} 0 0 1 ${x} ${round(bottom - r)}` +
+    `V${round(y + r)}A${r} ${r} 0 0 1 ${round(x + r)} ${y}Z`
+  return `path(evenodd, '${outer}${inner}')`
+}
+
+export interface TourSpotlight {
+  shape: string
+  origin: string
+}
+
+export type TourHoleState = 'shown' | 'hidden'
+
+export function spotlightShape(
+  viewport: { width: number; height: number },
+  hole: TourRect,
+  radius = TOUR_RADIUS,
+): TourSpotlight {
+  const centre = { x: hole.x + hole.width / 2, y: hole.y + hole.height / 2, width: 0, height: 0 }
+  return {
+    shape: spotlightPath(viewport, hole, radius),
+    origin: spotlightPath(viewport, centre, 0),
+  }
+}
+
+export function spotlightMask(
+  spotlight: TourSpotlight | null,
+  last: TourSpotlight | null,
+): { hole?: TourHoleState; style?: Record<string, string> } {
+  if (spotlight)
+    return {
+      hole: 'shown',
+      style: { clipPath: spotlight.shape, '--hn-tour-hole-origin': spotlight.origin },
+    }
+  if (last)
+    return {
+      hole: 'hidden',
+      style: { '--hn-tour-hole': last.shape, '--hn-tour-hole-origin': last.origin },
+    }
+  return {}
+}
+
+export function beaconPoint(rect: TourRect, dir: 'ltr' | 'rtl') {
+  return { x: dir === 'rtl' ? rect.x : rect.x + rect.width, y: rect.y }
+}
+
+export function tourKeyAction(event: KeyboardEvent, dir: 'ltr' | 'rtl') {
+  if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return null
+  const target = event.target as HTMLElement | null
+  if (target?.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"]'))
+    return null
+  const forward = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight'
+  const backward = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft'
+  if (event.key === forward) return 'next' as const
+  if (event.key === backward) return 'prev' as const
+  return null
+}
+
+export async function runTourChange(
+  beforeChange: TourBeforeChange | undefined,
+  step: number,
+  previousStep: number,
+  setBusy: (busy: boolean) => void,
+) {
+  if (!beforeChange) return true
+  const result = beforeChange(step, previousStep)
+  if (!(result instanceof Promise)) return result !== false
+  setBusy(true)
+  try {
+    return (await result) !== false
+  } finally {
+    setBusy(false)
+  }
+}
+
+export function tourCardGap(element?: Element | null) {
+  return cssTimeToMs(
+    getComputedStyle(element ?? document.documentElement).getPropertyValue('--hn-duration-exit'),
+  )
+}
+
+export function tourReference(read: () => TourRect | null, contextElement?: Element | null) {
+  return {
+    contextElement: contextElement ?? undefined,
+    getBoundingClientRect() {
+      const rect = read() ?? { x: 0, y: 0, width: 0, height: 0 }
+      return {
+        ...rect,
+        left: rect.x,
+        top: rect.y,
+        right: rect.x + rect.width,
+        bottom: rect.y + rect.height,
+      }
+    },
+  }
+}
+
+export function watchTourTarget(resolved: TourResolvedTarget, onChange: () => void) {
+  onChange()
+  const stops = resolved.elements.map(element =>
+    autoUpdate(element, document.documentElement, onChange),
+  )
+  if (resolved.virtual)
+    stops.push(
+      autoUpdate(
+        { getBoundingClientRect: () => DOMRect.fromRect(resolved.rect()) },
+        document.documentElement,
+        onChange,
+        { animationFrame: true },
+      ),
+    )
+  return () => {
+    for (const stop of stops) stop()
+  }
+}
+
+export function isFullyVisible(rect: TourRect) {
+  return (
+    rect.y >= 0 &&
+    rect.x >= 0 &&
+    rect.y + rect.height <= window.innerHeight &&
+    rect.x + rect.width <= window.innerWidth
+  )
+}
+
+export function revealTourTarget(resolved: TourResolvedTarget) {
+  const [element] = resolved.elements
+  if (!element || isFullyVisible(resolved.rect())) return
+  const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+  element.scrollIntoView({
+    block: 'center',
+    inline: 'nearest',
+    behavior: reduce ? 'auto' : 'smooth',
+  })
+}
+
+export function hideOutsideTour(elements: (HTMLElement | null | undefined)[]) {
+  const present = elements.filter((element): element is HTMLElement => !!element?.isConnected)
+  return present.length ? hideOutsideLayers(present) : () => {}
+}
+
+export function tourOwnsInput(layer: HTMLElement | null | undefined, scripted: boolean) {
+  return scripted || isHighestLayer(layer)
+}
+
+export function trapTourFocus(
+  getContainers: () => (HTMLElement | null | undefined)[],
+  enabled: () => boolean,
+) {
+  const containers = () => getContainers().filter((node): node is HTMLElement => !!node)
+  const inside = (node: Node | null) => !!node && containers().some(c => c.contains(node))
+
+  function candidates() {
+    return containers().flatMap(container => [
+      ...(container.tabIndex >= 0 ? [container] : []),
+      ...getTabbableCandidates(container),
+    ])
+  }
+
+  function onFocusIn(event: FocusEvent) {
+    if (!enabled() || inside(event.target as Node | null)) return
+    const [first] = containers()
+    first?.focus({ preventScroll: true })
+  }
+
+  function onKeyDown(event: KeyboardEvent) {
+    if (event.key !== 'Tab' || event.altKey || event.ctrlKey || event.metaKey) return
+    if (!enabled()) return
+    const list = candidates()
+    if (!list.length) return
+    const active = getActiveElement() as HTMLElement | null
+    const index = active ? list.indexOf(active) : -1
+    const next = event.shiftKey
+      ? index <= 0
+        ? list[list.length - 1]!
+        : list[index - 1]!
+      : index === -1 || index === list.length - 1
+        ? list[0]!
+        : list[index + 1]!
+    event.preventDefault()
+    next.focus({ preventScroll: true })
+  }
+
+  document.addEventListener('focusin', onFocusIn)
+  document.addEventListener('keydown', onKeyDown, true)
+  return () => {
+    document.removeEventListener('focusin', onFocusIn)
+    document.removeEventListener('keydown', onKeyDown, true)
+  }
+}
+
+export function listenTourKeys(onKeyDown: (event: KeyboardEvent) => void) {
+  window.addEventListener('keydown', onKeyDown, true)
+  return () => window.removeEventListener('keydown', onKeyDown, true)
+}

package/dist/shared/locale/en-US.ts

@@ -38,6 +38,15 @@ export const enUS: UiMessages = {
     completed: 'Completed',
     error: 'This step has an error',
   },
+  tour: {
+    prev: 'Back',
+    next: 'Next',
+    finish: 'Done',
+    skip: 'Skip tour',
+    replay: 'Replay',
+    progress: (step, total) => `${step} / ${total}`,
+    beacon: (step, title) => (title ? `Open step ${step}: ${title}` : `Open step ${step}`),
+  },
   common: {
     close: 'Close',
     copy: 'Copy',

package/dist/shared/locale/index.ts

@@ -10,6 +10,7 @@ export function mergeUiMessages(base: UiMessages, patch: PartialUiMessages): UiM
     editable: { ...base.editable, ...patch.editable },
     tag: patch.tag ?? base.tag,
     common: { ...base.common, ...patch.common },
+    tour: { ...base.tour, ...patch.tour },
     stepper: { ...base.stepper, ...patch.stepper },
     banner: { ...base.banner, ...patch.banner },
     pagination: { ...base.pagination, ...patch.pagination },

package/dist/shared/locale/ja-JP.ts

@@ -38,6 +38,16 @@ export const jaJP: UiMessages = {
     completed: '完了',
     error: 'このステップにエラーがあります',
   },
+  tour: {
+    prev: '戻る',
+    next: '次へ',
+    finish: '完了',
+    skip: 'ガイドをスキップ',
+    replay: 'もう一度再生',
+    progress: (step, total) => `${step} / ${total}`,
+    beacon: (step, title) =>
+      title ? `ステップ ${step} を開く：${title}` : `ステップ ${step} を開く`,
+  },
   common: {
     close: '閉じる',
     copy: 'コピー',

package/dist/shared/locale/types.ts

@@ -31,6 +31,15 @@ export interface UiMessages {
     completed: string
     error: string
   }
+  tour: {
+    prev: string
+    next: string
+    finish: string
+    skip: string
+    replay: string
+    progress: (step: number, total: number) => string
+    beacon: (step: number, title: string) => string
+  }
   common: {
     close: string
     copy: string

package/dist/shared/locale/zh-CN.ts

@@ -33,6 +33,15 @@ export const zhCN: UiMessages = {
     completed: '已完成',
     error: '该步骤存在错误',
   },
+  tour: {
+    prev: '上一步',
+    next: '下一步',
+    finish: '完成',
+    skip: '跳过引导',
+    replay: '重新演示',
+    progress: (step, total) => `${step} / ${total}`,
+    beacon: (step, title) => (title ? `查看第 ${step} 步：${title}` : `查看第 ${step} 步`),
+  },
   common: {
     close: '关闭',
     copy: '复制',

package/dist/shared/primitives/combobox/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 Radix UI:
+MIT License
+
+Copyright (c) 2022 WorkOS
+
+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/dist/shared/primitives/combobox/index.ts

@@ -0,0 +1,49 @@
+export interface ComboboxFilterState<Id = string> {
+  count: number
+  items: Map<Id, number>
+  groups: Set<Id>
+}
+
+export function filterComboboxItems<Id>(
+  items: Map<Id, string>,
+  groups: Map<Id, Set<Id>>,
+  search: string,
+  contains: (string: string, substring: string) => boolean,
+): ComboboxFilterState<Id> {
+  let count = 0
+  const filteredItems = new Map<Id, number>()
+  const filteredGroups = new Set<Id>()
+  for (const [id, text] of items) {
+    const score = contains(text, search)
+    filteredItems.set(id, score ? 1 : 0)
+    if (score) count++
+  }
+  for (const [groupId, group] of groups)
+    for (const itemId of group)
+      if (filteredItems.get(itemId)! > 0) {
+        filteredGroups.add(groupId)
+        break
+      }
+  return { count, items: filteredItems, groups: filteredGroups }
+}
+
+export function comboboxSearchText(
+  value: unknown,
+  multiple: boolean,
+  displayValue?: (value: unknown) => string,
+) {
+  if (displayValue) return displayValue(value)
+  if (!multiple && value && !Array.isArray(value))
+    return typeof value !== 'object' ? String(value) : ''
+  return ''
+}
+
+export function isTargetWithinCombobox(
+  parent: HTMLElement | null | undefined,
+  target: EventTarget | null,
+) {
+  if (parent?.contains(target as Node)) return true
+  const label = target instanceof Element ? target.closest('label') : null
+  const control = label?.control
+  return !!control && !!parent?.contains(control)
+}

package/dist/shared/primitives/date/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.