@hina-ui/vue 1.7.11 → 1.7.13

package/dist/shared/lib/css-time.ts

@@ -0,0 +1,6 @@
+export function cssTimeToMs(value: string) {
+  const text = value.trim().toLowerCase()
+  const amount = Number.parseFloat(text)
+  if (!Number.isFinite(amount) || amount < 0) return 0
+  return text.endsWith('s') && !text.endsWith('ms') ? amount * 1000 : amount
+}

package/dist/shared/lib/line-clamp.ts

@@ -5,18 +5,17 @@ export function lineClampCount(lines: number | undefined) {
   return Math.max(1, Math.floor(lines))
 }
 
-function measureHeights(content: HTMLElement) {
-  content.setAttribute('data-measuring', '')
-  const collapsed = content.clientHeight
-  const full = content.scrollHeight
+function measure(content: HTMLElement, layout: 'clamped' | 'full') {
+  content.setAttribute('data-measuring', layout)
+  const size = { height: content.clientHeight, overflow: content.scrollHeight }
   content.removeAttribute('data-measuring')
-  return { collapsed, full }
+  return size
 }
 
 export function measureLineClamp(content: HTMLElement) {
   if (content.hasAttribute('data-animating')) return null
-  const { collapsed, full } = measureHeights(content)
-  return full - collapsed > 1
+  const { height, overflow } = measure(content, 'clamped')
+  return overflow - height > 1
 }
 
 function toMs(value: string) {
@@ -33,7 +32,8 @@ export function animateLineClamp(content: HTMLElement, expanded: boolean, done:
   const fade = running ? getComputedStyle(content).getPropertyValue(FADE) : ''
 
   content.style.transition = 'none'
-  const { collapsed, full } = measureHeights(content)
+  const collapsed = measure(content, 'clamped').height
+  const full = measure(content, 'full').height
   const from = current ?? (expanded ? collapsed : full)
   const to = expanded ? full : collapsed
   content.toggleAttribute('data-expanded', !expanded)

package/dist/shared/lib/tour.ts

@@ -0,0 +1,261 @@
+import { autoUpdate } from '@floating-ui/dom'
+import { hideOthers } from 'aria-hidden'
+import { isHighestLayer } from '../primitives/dismissable-layer'
+import { getActiveElement, getTabbableCandidates } from '../primitives/focus-scope'
+
+export type TourSide = 'top' | 'right' | 'bottom' | 'left'
+export type TourAlign = 'start' | 'center' | 'end'
+export type TourTarget = string | HTMLElement | (() => HTMLElement | null | undefined) | null
+
+export interface TourStepBase {
+  target?: TourTarget
+  title?: string
+  description?: string
+  side?: TourSide
+  align?: TourAlign
+  padding?: number
+  radius?: number
+  blockTarget?: boolean
+  scroll?: boolean
+  beacon?: boolean
+}
+
+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 resolveTourTarget(target: TourTarget | undefined): HTMLElement | null {
+  if (!target) return null
+  if (typeof target === 'string')
+    return typeof document === 'undefined' ? null : document.querySelector<HTMLElement>(target)
+  if (typeof target === 'function') return target() ?? null
+  return target
+}
+
+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 tourReference(element: HTMLElement, padding = TOUR_PADDING) {
+  return {
+    contextElement: element,
+    getBoundingClientRect() {
+      const rect = spotlightRect(element.getBoundingClientRect(), padding)
+      return {
+        ...rect,
+        left: rect.x,
+        top: rect.y,
+        right: rect.x + rect.width,
+        bottom: rect.y + rect.height,
+      }
+    },
+  }
+}
+
+export function watchTourTarget(element: HTMLElement, onChange: () => void) {
+  onChange()
+  return autoUpdate(element, document.documentElement, onChange)
+}
+
+export function isFullyVisible(element: HTMLElement) {
+  const rect = element.getBoundingClientRect()
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= window.innerHeight &&
+    rect.right <= window.innerWidth
+  )
+}
+
+export function revealTourTarget(element: HTMLElement) {
+  if (isFullyVisible(element)) 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 ? hideOthers(present) : () => {}
+}
+
+export function trapTourFocus(
+  getContainers: () => (HTMLElement | null | undefined)[],
+  getLayer: () => HTMLElement | null | undefined,
+) {
+  const containers = () => getContainers().filter((node): node is HTMLElement => !!node)
+  const enabled = () => isHighestLayer(getLayer())
+  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)
+  }
+}

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

@@ -38,6 +38,14 @@ export const enUS: UiMessages = {
     completed: 'Completed',
     error: 'This step has an error',
   },
+  tour: {
+    prev: 'Back',
+    next: 'Next',
+    finish: 'Done',
+    skip: 'Skip tour',
+    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,15 @@ export const jaJP: UiMessages = {
     completed: '完了',
     error: 'このステップにエラーがあります',
   },
+  tour: {
+    prev: '戻る',
+    next: '次へ',
+    finish: '完了',
+    skip: 'ガイドをスキップ',
+    progress: (step, total) => `${step} / ${total}`,
+    beacon: (step, title) =>
+      title ? `ステップ ${step} を開く：${title}` : `ステップ ${step} を開く`,
+  },
   common: {
     close: '閉じる',
     copy: 'コピー',

package/dist/shared/locale/types.ts

@@ -31,6 +31,14 @@ export interface UiMessages {
     completed: string
     error: string
   }
+  tour: {
+    prev: string
+    next: string
+    finish: string
+    skip: 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,14 @@ export const zhCN: UiMessages = {
     completed: '已完成',
     error: '该步骤存在错误',
   },
+  tour: {
+    prev: '上一步',
+    next: '下一步',
+    finish: '完成',
+    skip: '跳过引导',
+    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)
+}