@hina-ui/vue 1.7.5 → 1.7.6

package/dist/shared/lib/overlay-anchor.ts

@@ -0,0 +1,42 @@
+export type OverlayAnchor =
+  | HTMLElement
+  | {
+      getBoundingClientRect: () => Pick<
+        DOMRect,
+        'x' | 'y' | 'width' | 'height' | 'top' | 'right' | 'bottom' | 'left'
+      >
+      contextElement?: Element
+    }
+export type OverlayPositionStrategy = 'optimized' | 'always'
+export type OverlayReference = Exclude<OverlayAnchor, HTMLElement>
+
+export function overlayAnchorElement(anchor?: OverlayAnchor | null): HTMLElement | undefined {
+  return anchor && 'nodeType' in anchor ? anchor : undefined
+}
+
+export function overlayAnchorContext(anchor?: OverlayAnchor | null): Element | undefined {
+  return (
+    overlayAnchorElement(anchor) ??
+    (anchor && 'contextElement' in anchor ? anchor.contextElement : undefined)
+  )
+}
+
+export function createOverlayReference(
+  anchor: OverlayAnchor,
+  current: () => boolean,
+): OverlayReference | undefined {
+  const contextElement = overlayAnchorContext(anchor)
+  if (contextElement && !contextElement.isConnected) return undefined
+  const measure = () => {
+    const { x, y, width, height, top, right, bottom, left } = anchor.getBoundingClientRect()
+    return { x, y, width, height, top, right, bottom, left }
+  }
+  let rect = measure()
+  return {
+    contextElement,
+    getBoundingClientRect: () => {
+      if (current() && (!contextElement || contextElement.isConnected)) rect = measure()
+      return rect
+    },
+  }
+}

package/dist/shared/lib/pagination.ts

@@ -0,0 +1,16 @@
+import type { PaginationEntry, PaginationRange } from '../types/pagination'
+
+export function paginationInteger(value: number, fallback: number, minimum: number) {
+  return Number.isFinite(value) ? Math.max(minimum, Math.floor(value)) : fallback
+}
+
+export function paginationRanges(items: PaginationEntry[]): PaginationRange[] {
+  return items.flatMap((item, index) => {
+    if (item.type !== 'ellipsis') return []
+    const previous = items[index - 1]
+    const next = items[index + 1]
+    if (previous?.type !== 'page' || next?.type !== 'page' || next.value <= previous.value + 1)
+      return []
+    return [{ side: index === 1 ? 'prev' : 'next', from: previous.value + 1, to: next.value - 1 }]
+  })
+}

package/dist/shared/lib/pointer-corridor.ts

@@ -0,0 +1,26 @@
+type Point = { x: number; y: number }
+const cross = (a: Point, b: Point, c: Point) =>
+  (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x)
+
+export function inPointerCorridor(point: Point, first: DOMRect, second: DOMRect) {
+  const points = [first, second]
+    .flatMap(rect => [
+      { x: rect.left - 6, y: rect.top - 6 },
+      { x: rect.right + 6, y: rect.top - 6 },
+      { x: rect.left - 6, y: rect.bottom + 6 },
+      { x: rect.right + 6, y: rect.bottom + 6 },
+    ])
+    .sort((a, b) => a.x - b.x || a.y - b.y)
+  const half = (values: Point[]) => {
+    const hull: Point[] = []
+    for (const value of values) {
+      while (hull.length > 1 && cross(hull[hull.length - 2]!, hull[hull.length - 1]!, value) <= 0)
+        hull.pop()
+      hull.push(value)
+    }
+    hull.pop()
+    return hull
+  }
+  const hull = [...half(points), ...half([...points].reverse())]
+  return hull.every((a, i) => cross(a, hull[(i + 1) % hull.length]!, point) >= 0)
+}

package/dist/shared/lib/qr-code-export.ts

@@ -0,0 +1,68 @@
+export interface QRCodeExportOptions {
+  type?: 'image/svg+xml' | 'image/png'
+  scale?: number
+}
+
+function dataURL(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(reader.result as string)
+    reader.onerror = () => reject(reader.error)
+    reader.readAsDataURL(blob)
+  })
+}
+
+export async function exportQRCode(
+  svg: SVGSVGElement,
+  size: number,
+  { type = 'image/png', scale = 2 }: QRCodeExportOptions = {},
+): Promise<Blob> {
+  const clone = svg.cloneNode(true) as SVGSVGElement
+  const source = [svg, ...svg.querySelectorAll('*')]
+  const target = [clone, ...clone.querySelectorAll('*')]
+  target.forEach((el, index) => {
+    const style = getComputedStyle(source[index]!)
+    el.removeAttribute('class')
+    el.removeAttribute('style')
+    el.setAttribute('fill', style.fill)
+  })
+  clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
+  clone.setAttribute('width', String(size))
+  clone.setAttribute('height', String(size))
+  for (const image of clone.querySelectorAll('image')) {
+    const href = image.getAttribute('href')
+    if (!href) continue
+    let embedded = href
+    if (!href.startsWith('data:')) {
+      const response = await fetch(new URL(href, svg.ownerDocument.baseURI))
+      if (!response.ok) throw new Error('Unable to export the QR code logo')
+      embedded = await dataURL(await response.blob())
+    }
+    const decoded = new Image()
+    decoded.src = embedded
+    await decoded.decode()
+    image.setAttribute('href', embedded)
+  }
+  const blob = new Blob([new XMLSerializer().serializeToString(clone)], { type: 'image/svg+xml' })
+  if (type === 'image/svg+xml') return blob
+  const url = URL.createObjectURL(blob)
+  try {
+    const image = new Image()
+    image.src = url
+    await image.decode()
+    const factor = Number.isFinite(scale) ? Math.max(1, Math.min(8, scale)) : 2
+    const canvas = svg.ownerDocument.createElement('canvas')
+    canvas.width = canvas.height = Math.min(8192, Math.round(size * factor))
+    const context = canvas.getContext('2d')
+    if (!context) throw new Error('Canvas is unavailable')
+    context.drawImage(image, 0, 0, canvas.width, canvas.height)
+    return await new Promise<Blob>((resolve, reject) => {
+      canvas.toBlob(
+        result => (result ? resolve(result) : reject(new Error('Unable to export the QR code'))),
+        'image/png',
+      )
+    })
+  } finally {
+    URL.revokeObjectURL(url)
+  }
+}

package/dist/shared/lib/range-calendar/limit.ts

@@ -0,0 +1,11 @@
+import type { DateValue } from '@internationalized/date'
+
+export function maximumDaysMatcher(
+  start: DateValue | undefined,
+  end: DateValue | undefined,
+  maximumDays: number | undefined,
+) {
+  if (!start || end || !maximumDays) return undefined
+  const reach = maximumDays - 1
+  return (date: DateValue) => Math.abs(date.compare(start)) > reach
+}

package/dist/shared/lib/rating.ts

@@ -0,0 +1,4 @@
+export function starFill(value: number, index: number) {
+  const portion = Math.min(Math.max(value - (index - 1), 0), 1)
+  return `${Math.round(portion * 1000) / 10}%`
+}

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

@@ -0,0 +1,20 @@
+const DIVISIONS = [
+  [60, 'second'],
+  [60, 'minute'],
+  [24, 'hour'],
+  [7, 'day'],
+  [4.34524, 'week'],
+  [12, 'month'],
+  [Infinity, 'year'],
+] as const
+
+export function relativeTime(target: Date, nowMs: number, tag: string, justNow: string): string {
+  let duration = (target.getTime() - nowMs) / 1000
+  if (Math.abs(duration) < 45) return justNow
+  const rtf = new Intl.RelativeTimeFormat(tag, { numeric: 'auto' })
+  for (const [amount, unit] of DIVISIONS) {
+    if (Math.abs(duration) < amount) return rtf.format(Math.round(duration), unit)
+    duration /= amount
+  }
+  return ''
+}

package/dist/shared/lib/scroll-area.ts

@@ -0,0 +1,77 @@
+export type ScrollDirection = 'vertical' | 'horizontal' | 'both'
+
+export interface ScrollEdges {
+  xStart: boolean
+  xEnd: boolean
+  yStart: boolean
+  yEnd: boolean
+}
+
+const NONE: ScrollEdges = { xStart: false, xEnd: false, yStart: false, yEnd: false }
+
+export function scrollEdges(
+  element: HTMLElement | undefined | null,
+  direction: ScrollDirection,
+  shadow: boolean,
+): ScrollEdges {
+  if (!element || !shadow) return NONE
+  const room = 1
+  const x = direction !== 'vertical'
+  const y = direction !== 'horizontal'
+  return {
+    xStart: x && Math.abs(element.scrollLeft) > room,
+    xEnd: x && Math.abs(element.scrollLeft) + element.clientWidth < element.scrollWidth - room,
+    yStart: y && element.scrollTop > room,
+    yEnd: y && element.scrollTop + element.clientHeight < element.scrollHeight - room,
+  }
+}
+
+export function redirectWheel(element: HTMLElement, event: WheelEvent) {
+  if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return
+  const max = element.scrollWidth - element.clientWidth
+  if (max <= 0) return
+  const sign = getComputedStyle(element).direction === 'rtl' ? -1 : 1
+  const offset = Math.max(0, Math.min(max, element.scrollLeft * sign))
+  const atStart = offset <= 1 && event.deltaY < 0
+  const atEnd = offset >= max - 1 && event.deltaY > 0
+  if (atStart || atEnd) return
+  event.preventDefault()
+  element.scrollLeft = (offset + event.deltaY) * sign
+}
+
+export function blockWhenInert(element: HTMLElement) {
+  const block = (event: Event) => {
+    if (getComputedStyle(element).pointerEvents === 'none') event.preventDefault()
+  }
+  element.addEventListener('wheel', block, { passive: false, capture: true })
+  element.addEventListener('touchmove', block, { passive: false, capture: true })
+  return () => {
+    element.removeEventListener('wheel', block, true)
+    element.removeEventListener('touchmove', block, true)
+  }
+}
+
+export const SCROLL_AREA_OVERFLOW = {
+  vertical: { x: 'hidden', y: 'scroll' },
+  horizontal: { x: 'scroll', y: 'hidden' },
+  both: { x: 'scroll', y: 'scroll' },
+} as const
+
+export function scrollAreaOptions(options: {
+  direction: ScrollDirection
+  autoHide: 'never' | 'scroll' | 'leave' | 'move'
+  scrollbar: boolean
+}) {
+  return {
+    scrollbars: {
+      theme: 'os-theme-dark',
+      visibility: options.scrollbar ? ('auto' as const) : ('hidden' as const),
+      autoHide: options.autoHide,
+      autoHideDelay: 800,
+    },
+    overflow: SCROLL_AREA_OVERFLOW[options.direction],
+    update: {
+      elementEvents: [['img', 'load']] as Array<[string, string]>,
+    },
+  }
+}

package/dist/shared/lib/scroll-restore.ts

@@ -0,0 +1,148 @@
+export const SCROLL_STATE_FIELD = 'hnScroll'
+export const RESTORE_DEADLINE_MS = 3000
+export const SAVE_THROTTLE_MS = 500
+export const SCROLL_RESTORE_ATTR = 'data-scroll-restore'
+export const SCROLL_ATOP_ATTR = 'data-scroll-atop'
+export const SCROLL_AT_ATTR = 'data-scroll-at'
+export const SCROLL_ATOP_HIDE_PX = 8
+
+export function atopOff(top: number, off: boolean) {
+  if (top > SCROLL_ATOP_HIDE_PX) return true
+  if (top <= 0) return false
+  return off
+}
+
+export function firstPaintRestoreScript() {
+  return `(function(){try{if(document.readyState!=="loading")return;
+var r=(history.state&&history.state.${SCROLL_STATE_FIELD})||{};
+var coarse=!!(window.matchMedia&&matchMedia("(pointer: coarse)").matches);
+var cs=
+document.querySelectorAll('[${SCROLL_ATOP_ATTR}]');
+var mark=function(c,t){if(!coarse){c.style.marginTop=-Math.round(Math.max(0,t))+"px";return;}
+if(t>${SCROLL_ATOP_HIDE_PX})c.setAttribute("data-off","true");else if(t<=0)c.setAttribute("data-off","false");};
+for(var i=0;i<cs.length;i++){mark(cs[i],Math.max(0,r[cs[i].getAttribute("${SCROLL_ATOP_ATTR}")]||0));}
+for(var k in r){var t=Math.max(0,r[k]);var e=
+document.querySelector('[${SCROLL_RESTORE_ATTR}="'+k+'"]');if(e){e.scrollTop=t;e.setAttribute("${SCROLL_AT_ATTR}",String(e.scrollTop));}}
+for(var i=0;i<cs.length;i++){(function(c){
+var e=
+document.querySelector('[${SCROLL_RESTORE_ATTR}="'+c.getAttribute("${SCROLL_ATOP_ATTR}")+'"]');
+if(!e)return;
+var sync=function(){if(e.scrollHeight<=e.clientHeight){e.removeEventListener("scroll",sync);return;}mark(c,e.scrollTop);};
+e.addEventListener("scroll",sync,{passive:true});
+})(cs[i]);}
+}catch{}})()`.replace(/\n/g, '')
+}
+
+export type ScrollRecord = Record<string, number>
+
+export interface ScrollRestorerPorts {
+  getViewport: () => HTMLElement | null
+  takeFirstPaintTop: () => number | undefined
+  readState: () => unknown
+  writeState: (state: Record<string, unknown>) => void
+  setTimer: (fn: () => void, ms: number) => () => void
+}
+
+export interface ScrollRestorer {
+  restore: (initial?: boolean) => void
+  settle: () => void
+  abandon: () => void
+  save: () => void
+  saveSoon: () => void
+  dispose: () => void
+  isPending: () => boolean
+}
+
+export function readScrollRecord(state: unknown): ScrollRecord {
+  if (!state || typeof state !== 'object') return {}
+  const record = (state as Record<string, unknown>)[SCROLL_STATE_FIELD]
+  if (!record || typeof record !== 'object') return {}
+  return record as ScrollRecord
+}
+
+export function writeScrollRecord(state: unknown, key: string, top: number) {
+  const base = state && typeof state === 'object' ? (state as Record<string, unknown>) : {}
+  return {
+    ...base,
+    [SCROLL_STATE_FIELD]: { ...readScrollRecord(base), [key]: top },
+  }
+}
+
+function readEntryId(state: unknown) {
+  if (!state || typeof state !== 'object') return undefined
+  return (state as Record<string, unknown>).position
+}
+
+export function createScrollRestorer(key: string, ports: ScrollRestorerPorts): ScrollRestorer {
+  let pending: number | null = null
+  let clearDeadline: (() => void) | null = null
+  let clearThrottle: (() => void) | null = null
+  let entry: unknown
+
+  function stopWaiting() {
+    pending = null
+    clearDeadline?.()
+    clearDeadline = null
+  }
+
+  function apply(top: number) {
+    const el = ports.getViewport()
+    if (!el) return false
+    el.scrollTop = top
+    return el.scrollHeight - el.clientHeight + 1 >= top
+  }
+
+  function save() {
+    if (pending !== null) return
+    if (readEntryId(ports.readState()) !== entry) return
+    const el = ports.getViewport()
+    if (!el) return
+    ports.writeState(writeScrollRecord(ports.readState(), key, el.scrollTop))
+  }
+
+  return {
+    restore(initial) {
+      stopWaiting()
+      entry = readEntryId(ports.readState())
+
+      const saved = readScrollRecord(ports.readState())[key]
+      const firstPaintTop = ports.takeFirstPaintTop()
+
+      if (initial) {
+        if (saved === undefined) return
+        const el = ports.getViewport()
+        if (firstPaintTop !== undefined && el && el.scrollTop !== firstPaintTop) return
+      }
+
+      const top = saved ?? 0
+      if (apply(top)) return
+      pending = top
+      clearDeadline = ports.setTimer(stopWaiting, RESTORE_DEADLINE_MS)
+    },
+
+    settle() {
+      if (pending === null) return
+      if (apply(pending)) stopWaiting()
+    },
+
+    abandon: stopWaiting,
+
+    isPending: () => pending !== null,
+
+    save,
+
+    saveSoon() {
+      if (clearThrottle) return
+      clearThrottle = ports.setTimer(() => {
+        clearThrottle = null
+        save()
+      }, SAVE_THROTTLE_MS)
+    },
+
+    dispose() {
+      stopWaiting()
+      clearThrottle?.()
+      clearThrottle = null
+    },
+  }
+}

package/dist/shared/lib/toast-layout.ts

@@ -0,0 +1,42 @@
+export const VISIBLE_STACK = 3
+
+export const TOAST_GAP = 12
+
+export const TOAST_CARD_CHROME_BLOCK = 34
+
+export interface ToastSlot {
+  index: number
+  offset: number
+}
+
+export function toastLayout(
+  open: readonly { id: number | string }[],
+  heightOf: (id: number | string) => number | undefined,
+) {
+  const map = new Map<number | string, ToastSlot>()
+  let offset = 0
+  for (let i = open.length - 1; i >= 0; i -= 1) {
+    const item = open[i]!
+    const index = open.length - 1 - i
+    map.set(item.id, { index, offset })
+    offset += (heightOf(item.id) ?? 0) + TOAST_GAP
+  }
+  return map
+}
+
+export function toastItemStyle(
+  slot: ToastSlot,
+  selfHeight: number | undefined,
+  frontHeight: number,
+): Record<string, string> {
+  return {
+    '--hn-t-index': String(slot.index),
+    '--hn-t-offset': `${slot.offset}px`,
+    ...(selfHeight ? { '--hn-t-self-h': `${selfHeight}px` } : {}),
+    ...(frontHeight > 0 ? { '--hn-t-front-h': `${frontHeight}px` } : {}),
+  }
+}
+
+export function toastCardHeight(body: HTMLElement) {
+  return body.offsetHeight + TOAST_CARD_CHROME_BLOCK
+}

package/dist/shared/lib/tree/selection.ts

@@ -0,0 +1,131 @@
+import type { TreeNode, TreeNodeState, TreeValue } from '../../types/tree'
+
+interface Entry {
+  node: TreeNode
+  parent?: TreeValue
+  children: TreeValue[]
+  disabled: boolean
+}
+
+export interface TreeIndex {
+  roots: TreeValue[]
+  entries: Map<TreeValue, Entry>
+}
+
+export function indexTree(nodes: TreeNode[]): TreeIndex {
+  const entries = new Map<TreeValue, Entry>()
+  function visit(node: TreeNode, parent?: TreeValue, disabled = false) {
+    const entry = {
+      node,
+      parent,
+      disabled: disabled || !!node.disabled,
+      children: node.children?.map(child => child.value) ?? [],
+    }
+    entries.set(node.value, entry)
+    node.children?.forEach(child => visit(child, node.value, entry.disabled))
+  }
+  nodes.forEach(node => visit(node))
+  return { roots: nodes.map(node => node.value), entries }
+}
+
+export function checkedState(tree: TreeIndex, values: TreeValue[]) {
+  const checked = new Set(values)
+  const states = new Map<TreeValue, TreeNodeState>()
+  function visit(value: TreeValue, inherited = false): TreeNodeState {
+    const entry = tree.entries.get(value)!
+    const own = checked.has(value) || (!entry.disabled && inherited)
+    const children = entry.children.map(child => visit(child, !entry.disabled && own))
+    const enabled = children.filter(child => !child.disabled)
+    const selected =
+      entry.disabled || enabled.length === 0 ? own : enabled.every(child => child.selected)
+    const indeterminate =
+      !entry.disabled && !selected && enabled.some(child => child.selected || child.indeterminate)
+    const state = { selected, indeterminate, disabled: entry.disabled }
+    states.set(value, state)
+    return state
+  }
+  tree.roots.forEach(value => visit(value))
+  return states
+}
+
+export function toggleChecked(tree: TreeIndex, values: TreeValue[], value: TreeValue): TreeValue[] {
+  const entry = tree.entries.get(value)
+  if (!entry || entry.disabled) return values
+  const states = checkedState(tree, values)
+  const checked = new Set(values.filter(value => !tree.entries.has(value)))
+  states.forEach((state, value) => {
+    if (state.selected) checked.add(value)
+  })
+  const selected = !states.get(value)!.selected
+  function visit(value: TreeValue) {
+    const entry = tree.entries.get(value)!
+    if (entry.disabled) return
+    if (selected) checked.add(value)
+    else checked.delete(value)
+    entry.children.forEach(visit)
+  }
+  visit(value)
+  let parent = entry.parent
+  while (parent !== undefined) {
+    checked.delete(parent)
+    parent = tree.entries.get(parent)!.parent
+  }
+  const next = checkedState(tree, [...checked])
+  return [
+    ...[...checked].filter(value => !tree.entries.has(value)),
+    ...[...tree.entries.keys()].filter(value => next.get(value)!.selected),
+  ]
+}
+
+export function treeKey(node: Pick<TreeNode, 'value'>) {
+  return `${typeof node.value}:${node.value}`
+}
+
+export function treeStates(
+  tree: TreeIndex,
+  multiple: boolean | undefined,
+  model: TreeValue | TreeValue[] | null | undefined,
+) {
+  if (multiple) return checkedState(tree, Array.isArray(model) ? model : [])
+  return new Map<TreeValue, TreeNodeState>(
+    [...tree.entries].map(([value, entry]) => [
+      value,
+      {
+        selected: value === model,
+        indeterminate: false,
+        disabled: entry.disabled,
+      },
+    ]),
+  )
+}
+
+export function selectedTreeNodes(tree: TreeIndex, states: Map<TreeValue, TreeNodeState>) {
+  return [...tree.entries.values()]
+    .filter(entry => states.get(entry.node.value)?.selected)
+    .map(entry => entry.node)
+}
+
+export function treeKeyMap(tree: TreeIndex) {
+  return new Map([...tree.entries].map(([value, entry]) => [treeKey(entry.node), value]))
+}
+
+export function expandedTreeKeys(values: readonly TreeValue[]) {
+  return values.map(value => treeKey({ value }))
+}
+
+export function expandedTreeValues(keys: Map<string, TreeValue>, expanded: readonly string[]) {
+  return expanded.flatMap(key => (keys.has(key) ? [keys.get(key)!] : []))
+}
+
+export function nextTreeModel(
+  tree: TreeIndex,
+  multiple: boolean | undefined,
+  model: TreeValue | TreeValue[] | null | undefined,
+  value: TreeValue,
+): TreeValue | TreeValue[] | null {
+  return multiple
+    ? toggleChecked(tree, Array.isArray(model) ? model : [], value)
+    : model === value
+      ? null
+      : value
+}

package/dist/shared/lib/tree-select/filter.ts

@@ -0,0 +1,19 @@
+import type { TreeSelectNode } from '../../types/tree-select'
+
+export function filterTree(nodes: TreeSelectNode[], matches: (node: TreeSelectNode) => boolean) {
+  const children = new Map<TreeSelectNode, TreeSelectNode[]>()
+  const expanded: string[] = []
+
+  function visit(items: TreeSelectNode[]): TreeSelectNode[] {
+    return items.filter(node => {
+      const descendants = visit(node.children ?? [])
+      if (descendants.length) {
+        children.set(node, descendants)
+        expanded.push(String(node.value))
+      }
+      return descendants.length > 0 || matches(node)
+    })
+  }
+
+  return { items: visit(nodes), children, expanded }
+}