@hina-ui/vue 1.7.4 → 1.7.6

package/dist/shared/behavior/anchor-follow.ts

@@ -0,0 +1,95 @@
+import { prefersReducedMotion } from '../motion'
+
+function findViewport(nav: HTMLElement, target: HTMLElement) {
+  const doc = nav.ownerDocument
+  const view = doc.defaultView!
+  for (
+    let node: HTMLElement | null = nav;
+    node && node !== doc.body && node !== doc.documentElement;
+    node = node.parentElement
+  ) {
+    if (node.contains(target)) break
+    if (/^(auto|scroll|overlay)$/.test(view.getComputedStyle(node).overflowY)) return node
+  }
+}
+
+export interface AnchorFollowInput {
+  nav: HTMLElement | null | undefined
+  current: string | undefined
+  lastCovered: string | undefined
+  enabled: boolean
+}
+
+export interface AnchorFollowResult {
+  viewport: HTMLElement | undefined
+}
+
+export function createAnchorFollow() {
+  let lastCurrent: string | undefined
+  let lastEnd: string | undefined
+
+  function follow({
+    nav,
+    current: id,
+    lastCovered,
+    enabled,
+  }: AnchorFollowInput): AnchorFollowResult | undefined {
+    if (!enabled || !nav || !id) return
+    const target = nav.ownerDocument.getElementById(id)
+    const link = nav.querySelector<HTMLElement>('a[aria-current="location"]')
+    if (!target || !link || !link.getClientRects().length) return
+    const port = findViewport(nav, target)
+    const result = { viewport: port }
+    const endId = lastCovered ?? id
+    const changed = lastCurrent !== undefined && (lastCurrent !== id || lastEnd !== endId)
+    lastCurrent = id
+    lastEnd = endId
+    if (!port || port.clientHeight <= 0 || port.scrollHeight <= port.clientHeight) return result
+
+    const box = port.getBoundingClientRect()
+    let row: Pick<DOMRect, 'top' | 'bottom' | 'height'> = link.getBoundingClientRect()
+    const scale = port.offsetHeight ? box.height / port.offsetHeight : 1
+    if (scale <= 0) return result
+    if (endId !== id) {
+      const end = nav.querySelector<HTMLElement>(`a[href="#${CSS.escape(endId)}"]`)
+      if (end?.getClientRects().length) {
+        const bottom = end.getBoundingClientRect().bottom
+        const height = bottom - row.top
+        if (height >= row.height && height <= port.clientHeight * scale)
+          row = { top: row.top, bottom, height }
+      }
+    }
+    const top = box.top + port.clientTop * scale
+    const bottom = top + port.clientHeight * scale
+    if (row.top >= top && row.bottom <= bottom) return result
+    if (row.top <= top && row.bottom >= bottom) return result
+
+    const style = port.ownerDocument.defaultView!.getComputedStyle(port)
+    const margin = Math.min(row.height / scale / 2, port.clientHeight / 4)
+    const padding = (value: string) =>
+      Math.min(
+        Math.max(0, (port.clientHeight - row.height / scale) / 2),
+        value === 'auto'
+          ? margin
+          : (parseFloat(value) || 0) * (value.endsWith('%') ? port.clientHeight / 100 : 1),
+      )
+    const before = padding(style.scrollPaddingTop)
+    const after = padding(style.scrollPaddingBottom)
+    const delta =
+      row.height > bottom - top || row.top < top
+        ? (row.top - top) / scale - before
+        : (row.bottom - bottom) / scale + after
+    const next = Math.max(
+      0,
+      Math.min(port.scrollHeight - port.clientHeight, port.scrollTop + delta),
+    )
+    if (Math.abs(next - port.scrollTop) < 1) return result
+    port.scrollTo({
+      top: next,
+      behavior: changed && !prefersReducedMotion() ? 'smooth' : 'instant',
+    })
+    return result
+  }
+
+  return { follow }
+}

package/dist/shared/behavior/form.ts

@@ -0,0 +1,187 @@
+import type { FormErrors, FormRules, FormValues } from '../lib/form/standard-schema'
+import { ROOT, readPath, runRules } from '../lib/form/errors'
+import { same, snapshot } from '../lib/form/values'
+
+export type FormValidateOn = 'submit' | 'blur' | 'change'
+
+export interface FormOptions {
+  values: () => FormValues
+  rules: () => FormRules | undefined
+  validateOn: () => FormValidateOn
+}
+
+interface ServerError {
+  message: string
+  value: unknown
+}
+
+export interface FormController {
+  errors: () => FormErrors
+  formError: () => string | undefined
+  invalid: () => boolean
+  submitted: () => boolean
+  submitting: () => boolean
+  version: () => number
+  subscribe: (listener: () => void) => () => void
+  validate: () => Promise<boolean>
+  touch: (name: string) => void
+  onChange: () => void
+  submit: (handler?: (values: FormValues) => unknown) => Promise<boolean>
+  setErrors: (errors: FormErrors) => void
+  reset: () => void
+}
+
+export function createForm(options: FormOptions): FormController {
+  let found: FormErrors = {}
+  let touched = new Set<string>()
+  let submitted = false
+  let submitting = false
+  let server = new Map<string, ServerError>()
+  let pending: { values: FormValues; rules: FormRules | undefined } | undefined
+  let validation = 0
+  let submission = 0
+  let initial = snapshot(options.values()) as FormValues
+  let version = 0
+  const listeners = new Set<() => void>()
+
+  function notify() {
+    version++
+    for (const listener of [...listeners]) listener()
+  }
+
+  function shown(key: string) {
+    if (submitted || touched.has(key)) return true
+    const mode = options.validateOn()
+    return mode === 'change' && !same(readPath(options.values(), key), readPath(initial, key))
+  }
+
+  function errors() {
+    const result: FormErrors = {}
+    for (const [key, message] of Object.entries(found)) {
+      if (key !== ROOT && shown(key)) result[key] = message
+    }
+    for (const [key, entry] of server) result[key] = entry.message
+    return result
+  }
+
+  function formError() {
+    return found[ROOT]
+  }
+
+  function invalid() {
+    return Object.keys(errors()).length > 0 || !!formError()
+  }
+
+  async function validate() {
+    const current = ++validation
+    const values = snapshot(options.values()) as FormValues
+    const rules = options.rules()
+    const request = { values, rules }
+    pending = request
+    try {
+      const result = await runRules(rules, values)
+      if (current !== validation || rules !== options.rules() || !same(values, options.values())) {
+        return false
+      }
+      found = result
+      notify()
+      return Object.keys(result).length === 0
+    } finally {
+      if (pending === request) pending = undefined
+    }
+  }
+
+  function revalidate() {
+    if (pending && pending.rules === options.rules() && same(pending.values, options.values()))
+      return
+    void validate()
+  }
+
+  function touch(name: string) {
+    if (touched.has(name)) return
+    touched = new Set(touched).add(name)
+    notify()
+    if (options.validateOn() !== 'submit') revalidate()
+  }
+
+  function onChange() {
+    const values = options.values()
+    if (server.size) {
+      const next = new Map(server)
+      for (const [key, entry] of next) if (readPath(values, key) !== entry.value) next.delete(key)
+      if (next.size !== server.size) {
+        server = next
+        notify()
+      }
+    }
+    if (submitted || options.validateOn() !== 'submit') revalidate()
+  }
+
+  async function submit(handler?: (values: FormValues) => unknown) {
+    if (submitting) return false
+    const current = ++submission
+    const values = snapshot(options.values()) as FormValues
+    submitted = true
+    submitting = true
+    notify()
+    try {
+      const valid = await validate()
+      if (!valid || current !== submission || server.size || !same(values, options.values())) {
+        return false
+      }
+      await handler?.(options.values())
+      return true
+    } finally {
+      if (current === submission) {
+        submitting = false
+        notify()
+      }
+    }
+  }
+
+  function setErrors(next: FormErrors) {
+    const values = options.values()
+    const map = new Map<string, ServerError>()
+    for (const [key, message] of Object.entries(next)) {
+      map.set(key, { message, value: readPath(values, key) })
+    }
+    server = map
+    notify()
+  }
+
+  function reset() {
+    validation++
+    submission++
+    pending = undefined
+    submitting = false
+    found = {}
+    touched = new Set()
+    submitted = false
+    server = new Map()
+    initial = snapshot(options.values()) as FormValues
+    notify()
+  }
+
+  function subscribe(listener: () => void) {
+    listeners.add(listener)
+    return () => {
+      listeners.delete(listener)
+    }
+  }
+
+  return {
+    errors,
+    formError,
+    invalid,
+    submitted: () => submitted,
+    submitting: () => submitting,
+    version: () => version,
+    subscribe,
+    validate,
+    touch,
+    onChange,
+    submit,
+    setErrors,
+    reset,
+  }
+}

package/dist/shared/behavior/ripple.ts

@@ -0,0 +1,222 @@
+import { prefersReducedMotion } from '../motion'
+
+const INITIAL_ORIGIN_SCALE = 0.2
+const PADDING = 12
+const SOFT_EDGE_MINIMUM_SIZE = 75
+const SOFT_EDGE_CONTAINER_RATIO = 0.35
+const GROW_MS = 150
+const MINIMUM_PRESS_MS = 225
+const TOUCH_DELAY_MS = 150
+
+const STATE = {
+  inactive: 0,
+  touchDelay: 1,
+  holding: 2,
+  waitingForClick: 3,
+} as const
+
+type RippleState = (typeof STATE)[keyof typeof STATE]
+
+export interface RippleOptions {
+  container: () => HTMLElement | null
+  surface: () => HTMLElement | null
+  disabled: () => boolean
+  onPressedChange: (pressed: boolean) => void
+}
+
+export function createRipple(options: RippleOptions) {
+  let host: HTMLElement | null = null
+  let state: RippleState = STATE.inactive
+  let startEvent: PointerEvent | undefined
+  let checkBoundsAfterContextMenu = false
+  let growAnimation: Animation | undefined
+  let initialSize = 0
+  let rippleScale = ''
+  let rippleSize = ''
+  const timers = new Set<number>()
+
+  function later(callback: () => void, ms: number) {
+    const timer = window.setTimeout(() => {
+      timers.delete(timer)
+      callback()
+    }, ms)
+    timers.add(timer)
+  }
+
+  const isTouch = ({ pointerType }: PointerEvent) => pointerType === 'touch'
+
+  function shouldReact(event: PointerEvent) {
+    if (options.disabled() || !event.isPrimary) return false
+    if (startEvent && startEvent.pointerId !== event.pointerId) return false
+    if (event.type === 'pointerenter' || event.type === 'pointerleave') return !isTouch(event)
+    return isTouch(event) || event.buttons === 1
+  }
+
+  function inBounds({ x, y }: PointerEvent) {
+    const rect = options.container()?.getBoundingClientRect()
+    if (!rect) return false
+    return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom
+  }
+
+  function determineRippleSize() {
+    const rect = options.container()?.getBoundingClientRect()
+    if (!rect) return
+    const maxDim = Math.max(rect.height, rect.width)
+    const softEdgeSize = Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE)
+    initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE)
+    const maxRadius = Math.hypot(rect.width, rect.height) + PADDING
+    rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`
+    rippleSize = `${initialSize}px`
+  }
+
+  function normalizedCoords(event: PointerEvent) {
+    const rect = options.container()?.getBoundingClientRect()
+    if (!rect) return { x: 0, y: 0 }
+    return {
+      x: event.pageX - (window.scrollX + rect.left),
+      y: event.pageY - (window.scrollY + rect.top),
+    }
+  }
+
+  function translationCoords(positionEvent?: PointerEvent) {
+    const rect = options.container()?.getBoundingClientRect()
+    if (!rect) return { startPoint: { x: 0, y: 0 }, endPoint: { x: 0, y: 0 } }
+    const endPoint = {
+      x: (rect.width - initialSize) / 2,
+      y: (rect.height - initialSize) / 2,
+    }
+    return {
+      startPoint: positionEvent ? normalizedCoords(positionEvent) : endPoint,
+      endPoint,
+    }
+  }
+
+  function startPress(positionEvent?: PointerEvent) {
+    const el = options.surface()
+    if (!el) return
+    options.onPressedChange(true)
+    growAnimation?.cancel()
+    growAnimation = undefined
+    determineRippleSize()
+    const { startPoint, endPoint } = translationCoords(positionEvent)
+    if (typeof el.animate !== 'function') return
+    if (prefersReducedMotion()) return
+    growAnimation = el.animate(
+      {
+        height: [rippleSize, rippleSize],
+        width: [rippleSize, rippleSize],
+        transform: [
+          `translate(${startPoint.x}px,${startPoint.y}px) scale(1)`,
+          `translate(${endPoint.x}px,${endPoint.y}px) scale(${rippleScale})`,
+        ],
+      },
+      {
+        pseudoElement: '::after',
+        duration: GROW_MS,
+        easing: 'linear',
+        fill: 'forwards',
+      },
+    )
+    growAnimation.finished.catch(() => {})
+  }
+
+  function endPress() {
+    startEvent = undefined
+    state = STATE.inactive
+    const animation = growAnimation
+    let playedMs = Infinity
+    if (typeof animation?.currentTime === 'number') playedMs = animation.currentTime
+    else if (animation?.currentTime) playedMs = animation.currentTime.to('ms').value
+    if (playedMs >= MINIMUM_PRESS_MS) {
+      options.onPressedChange(false)
+      return
+    }
+    later(() => {
+      if (growAnimation !== animation) return
+      options.onPressedChange(false)
+    }, MINIMUM_PRESS_MS - playedMs)
+  }
+
+  function onPointerDown(event: PointerEvent) {
+    if (!shouldReact(event)) return
+    startEvent = event
+    if (!isTouch(event)) {
+      state = STATE.waitingForClick
+      startPress(event)
+      return
+    }
+    if (checkBoundsAfterContextMenu && !inBounds(event)) return
+    checkBoundsAfterContextMenu = false
+    state = STATE.touchDelay
+    later(() => {
+      if (state !== STATE.touchDelay) return
+      state = STATE.holding
+      startPress(event)
+    }, TOUCH_DELAY_MS)
+  }
+
+  function onPointerUp(event: PointerEvent) {
+    if (!shouldReact(event)) return
+    if (state === STATE.holding) {
+      state = STATE.waitingForClick
+      return
+    }
+    if (state === STATE.touchDelay) {
+      state = STATE.waitingForClick
+      startPress(startEvent)
+    }
+  }
+
+  function onPointerLeave(event: PointerEvent) {
+    if (!shouldReact(event)) return
+    if (state !== STATE.inactive) endPress()
+  }
+
+  function onPointerCancel(event: PointerEvent) {
+    if (!shouldReact(event)) return
+    endPress()
+  }
+
+  function onClick() {
+    if (options.disabled()) return
+    if (state === STATE.waitingForClick) {
+      endPress()
+      return
+    }
+    if (state === STATE.inactive) {
+      startPress()
+      endPress()
+    }
+  }
+
+  function onContextMenu() {
+    if (options.disabled()) return
+    checkBoundsAfterContextMenu = true
+    endPress()
+  }
+
+  const listeners: [string, EventListener][] = [
+    ['click', onClick as EventListener],
+    ['contextmenu', onContextMenu as EventListener],
+    ['pointercancel', onPointerCancel as EventListener],
+    ['pointerdown', onPointerDown as EventListener],
+    ['pointerleave', onPointerLeave as EventListener],
+    ['pointerup', onPointerUp as EventListener],
+  ]
+
+  function connect() {
+    host = options.container()?.parentElement ?? null
+    if (!host) return
+    for (const [name, fn] of listeners) host.addEventListener(name, fn, true)
+  }
+
+  function disconnect() {
+    for (const timer of timers) window.clearTimeout(timer)
+    timers.clear()
+    if (!host) return
+    for (const [name, fn] of listeners) host.removeEventListener(name, fn, true)
+    host = null
+  }
+
+  return { connect, disconnect }
+}

package/dist/shared/behavior/spoiler/painter.ts

@@ -0,0 +1,197 @@
+import { workletSource } from './worklet'
+import { prefersReducedMotion } from '../../motion'
+
+export const isPaintWorkletSupported =
+  typeof CSS !== 'undefined' && (CSS as { paintWorklet?: unknown }).paintWorklet !== undefined
+
+let workletRegistered = false
+
+export function registerSpoilerWorklet() {
+  if (workletRegistered || !isPaintWorkletSupported) return
+  workletRegistered = true
+  const paintWorklet = (CSS as unknown as { paintWorklet: { addModule(url: string): void } })
+    .paintWorklet
+  paintWorklet.addModule(
+    URL.createObjectURL(new Blob([workletSource], { type: 'application/javascript' })),
+  )
+}
+
+export interface SpoilerPainterOptions {
+  fps?: number
+  gap?: number
+  density?: number
+  mimicWords?: boolean
+  accent?: string
+}
+
+const DEFAULTS = {
+  fps: 24,
+  gap: 6,
+  density: 0.12,
+  mimicWords: true,
+  accent: '0 0% 20%',
+} as const
+
+const BLOCK_MAX_TILE = 293
+const INLINE_MAX_TILE = 333
+const GAP_RATIO = 8
+const DEFAULT_FADE_S = 1.5
+
+export class SpoilerPainter {
+  readonly el: HTMLElement
+  maxFPS: number = DEFAULTS.fps
+
+  private t = 0
+  private t0 = 0
+  private tstop: number | null = null
+  private raf: number | null = null
+  private fadeS = 0
+  private hidden = false
+  private destroyed = false
+
+  constructor(el: HTMLElement, options: SpoilerPainterOptions = {}) {
+    registerSpoilerWorklet()
+    this.el = el
+    this.update(options)
+  }
+
+  get isHidden() {
+    return this.hidden
+  }
+
+  update({
+    fps = DEFAULTS.fps,
+    gap = DEFAULTS.gap,
+    density = DEFAULTS.density,
+    mimicWords = DEFAULTS.mimicWords,
+    accent = DEFAULTS.accent,
+  }: SpoilerPainterOptions = {}) {
+    if (this.destroyed) return
+
+    this.maxFPS = prefersReducedMotion() ? 0 : fps
+
+    this.el.style.setProperty('--hn-nz-density', String(density))
+    this.el.style.setProperty('--hn-nz-accent', accent)
+
+    const isBlockElement = getComputedStyle(this.el).getPropertyValue('display') !== 'inline'
+    this.useBackgroundStyle('auto', 'auto', false)
+
+    if (isBlockElement) {
+      this.el.style.setProperty('--hn-nz-words', 'false')
+      const rect = this.el.getBoundingClientRect()
+
+      if (rect.width * rect.height > BLOCK_MAX_TILE * BLOCK_MAX_TILE) {
+        this.useBackgroundStyle(
+          Math.min(rect.width, BLOCK_MAX_TILE),
+          Math.min(rect.height, BLOCK_MAX_TILE),
+          true,
+        )
+      } else {
+        const capGap = Math.floor(Math.min(gap, rect.width / GAP_RATIO, rect.height / GAP_RATIO))
+        this.el.style.setProperty('--hn-nz-gap', `${capGap}px ${capGap}px`)
+      }
+      return
+    }
+
+    this.el.style.setProperty('--hn-nz-words', String(mimicWords))
+    const rects = [...this.el.getClientRects()]
+    const heightOfLine = Math.min(...rects.map(r => r.height))
+
+    this.useBackgroundStyle(INLINE_MAX_TILE, heightOfLine, true)
+    const capGap = Math.floor(Math.min(heightOfLine / GAP_RATIO, gap))
+    this.el.style.setProperty('--hn-nz-gap', `0 ${capGap}px`)
+  }
+
+  private useBackgroundStyle(ws: string | number, hs: string | number, tile: boolean) {
+    const w = typeof ws === 'number' ? `${ws}px` : ws
+    const h = typeof hs === 'number' ? `${hs}px` : hs
+    const repeatAndPosition = tile ? 'repeat left center' : 'no-repeat center center'
+    this.el.style.background = `paint(hn-spoiler) ${repeatAndPosition} / ${w} ${h}`
+  }
+
+  private setFade(value: number) {
+    this.fadeS = value
+    this.el.style.setProperty('--hn-nz-fade', `${value}s`)
+  }
+
+  private setT(value: number) {
+    this.t = value
+    this.el.style.setProperty('--hn-nz-t', value.toFixed(3))
+  }
+
+  private setTstop(value: number | null) {
+    this.tstop = value
+    if (value !== null) {
+      this.el.style.setProperty('--hn-nz-stop', value.toFixed(3))
+    } else {
+      this.el.style.removeProperty('--hn-nz-stop')
+    }
+  }
+
+  private parseFade(value: number | boolean | undefined) {
+    if (this.maxFPS <= 0) return 0
+    return value === true || value === undefined ? DEFAULT_FADE_S : Number(value)
+  }
+
+  hide(animate?: number | boolean) {
+    if (this.destroyed) return
+    this.hidden = true
+    this.setFade(this.parseFade(animate))
+    this.setTstop(null)
+    this.setT(0)
+    this.startAnimation()
+  }
+
+  reveal(animate?: number | boolean) {
+    if (this.destroyed) return
+    this.hidden = false
+    const duration = this.parseFade(animate)
+    this.setFade(duration)
+    this.setTstop(this.t)
+    if (duration <= 0) this.stopAnimation()
+  }
+
+  private frame = (now: DOMHighResTimeStamp) => {
+    if (this.destroyed) return
+    const shouldStop = this.tstop !== null && this.t > this.tstop + this.fadeS
+
+    if (this.maxFPS > 0 && !shouldStop) {
+      this.raf = requestAnimationFrame(this.frame)
+    }
+
+    const dt = now - this.t0
+    if (dt > 0 && dt < 1000 / this.maxFPS) return
+
+    this.setT(this.t + dt / 1000)
+    this.t0 = now
+  }
+
+  private startAnimation() {
+    this.t0 = performance.now()
+    this.frame(this.t0)
+  }
+
+  private stopAnimation() {
+    if (this.raf !== null) {
+      cancelAnimationFrame(this.raf)
+      this.raf = null
+    }
+  }
+
+  destroy() {
+    this.destroyed = true
+    this.stopAnimation()
+    this.el.style.removeProperty('background')
+    for (const prop of [
+      '--hn-nz-t',
+      '--hn-nz-stop',
+      '--hn-nz-fade',
+      '--hn-nz-gap',
+      '--hn-nz-words',
+      '--hn-nz-density',
+      '--hn-nz-accent',
+    ]) {
+      this.el.style.removeProperty(prop)
+    }
+  }
+}