@hina-ui/vue 1.7.4 → 1.7.6

package/src/components/select/types.ts

@@ -1,23 +1 @@
-export type SelectOption<T extends object = object> = {
-  value: string | number
-  label: string
-  description?: string
-  disabled?: boolean
-} & T
-
-export interface SelectOptionGroup<T extends SelectOption = SelectOption> {
-  label: string
-  options: T[]
-}
-
-export type SelectItems<T extends SelectOption = SelectOption> = Array<T | SelectOptionGroup<T>>
-
-export function isOptionGroup<T extends SelectOption>(
-  item: T | SelectOptionGroup<T>,
-): item is SelectOptionGroup<T> {
-  return !('value' in item) && 'options' in item
-}
-
-export function flattenOptions<T extends SelectOption>(items: SelectItems<T>): T[] {
-  return items.flatMap(item => (isOptionGroup(item) ? item.options : [item]))
-}
+export * from '../../../../shared/src/types/select'

package/src/components/split-button/split-button.variants.ts

@@ -1 +1 @@
-export * from '@hina-ui/shared/variants/split-button'
+export * from '../../../../shared/src/variants/split-button'

package/src/components/spoiler/SpoilerPainter.ts

@@ -1,197 +1 @@
-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)
-    }
-  }
-}
+export * from '../../../../shared/src/behavior/spoiler/painter'

package/src/components/spoiler/utils/irisOrigin.ts

@@ -1,40 +1 @@
-export interface IrisOrigin {
-  x: number
-  y: number
-}
-
-export function irisOrigin(
-  rects: readonly DOMRect[],
-  clientX: number,
-  clientY: number,
-): IrisOrigin | null {
-  const valid = rects.filter(r => r.width > 0 && r.height > 0)
-  if (valid.length === 0) return null
-
-  const totalWidth = valid.reduce((sum, r) => sum + r.width, 0)
-  const lineHeight = valid[0]!.height
-
-  let virtualX: number | null = null
-  let virtualY = 0
-  let walked = 0
-  for (const r of valid) {
-    const inside =
-      clientY >= r.top - 2 &&
-      clientY <= r.bottom + 2 &&
-      clientX >= r.left - 2 &&
-      clientX <= r.right + 2
-    if (inside) {
-      virtualX = walked + (clientX - r.left)
-      virtualY = clientY - r.top
-      break
-    }
-    walked += r.width
-  }
-
-  if (virtualX === null || totalWidth === 0 || lineHeight === 0) return null
-
-  return {
-    x: (virtualX / totalWidth) * 100,
-    y: (virtualY / lineHeight) * 100,
-  }
-}
+export * from '../../../../../shared/src/lib/iris-origin'

package/src/components/spoiler/worklet.ts

@@ -1,199 +1 @@
-declare function registerPaint(name: string, painter: unknown): void
-
-const workletMain = () => {
-  const M = Math
-
-  const lcgrand =
-    (seed = 1) =>
-    (a = 0, b = 1) =>
-      a +
-      (M.abs(b - a) * (M.imul(48271, (seed = M.imul(214013, seed) + 2531011)) & 0x7fffffff)) /
-        0x7fffffff
-
-  const pol2vec = (l: number, a = 0) => [l * M.cos(a), l * M.sin(a)] as const
-  const vecmag = ([x, y]: readonly number[]) => M.sqrt(x! * x! + y! * y!)
-  const vecnorm = ([x, y]: readonly number[], l = vecmag([x!, y!])) =>
-    l === 0 ? ([0, 0] as const) : ([x! / l, y! / l] as const)
-
-  const trapezoidalWave = (l: number, a: number, b: number) => {
-    const s = M.max(a, l - b)
-    return (t: number) => {
-      if (t < a) return M.max(0, t / a)
-      if (t > s) return M.max(0, 1 - (t - s) / (l - s))
-      return 1
-    }
-  }
-
-  const cycle = (x: number, n: number) => ((x % n) + n) % n
-  const mirror = (x: number, n: number, r: number) => (x < r ? n + x : x > n - r ? x - n : x)
-  const clamp = (min: number, x: number, max: number) => M.max(min, M.min(x, max))
-
-  const cycleBounds = ([x, y]: readonly number[], [w, h]: readonly number[], r: number) => {
-    const tx = cycle(x!, w!)
-    const ty = cycle(y!, h!)
-    return [
-      [tx, ty],
-      [mirror(tx, w!, r), mirror(ty, h!, r)],
-    ] as const
-  }
-
-  const easeOutCubic = (t: number) => --t * t * t + 1
-
-  type World = { t: number; tStop: number; tStart: number; n: number }
-
-  const animateFadeInOut = (world: World, idx: number, duration: number) => {
-    const direction = world.tStop <= world.t ? 'out' : 'in'
-    const animationStartT = direction === 'in' ? world.tStart : world.tStop
-    const t = animationStartT + ((2 / 3) * duration * idx) / world.n
-    const fadeFor = (1 / 3) * duration
-
-    let progress = 0
-    if (direction === 'in') {
-      progress = (fadeFor + t - world.t) / fadeFor || 0
-    } else {
-      progress = (world.t - t) / fadeFor || 1
-    }
-
-    return easeOutCubic(1 - clamp(0, progress, 1))
-  }
-
-  const FAKE_WORDS = [5, 3, 4, 4, 2, 4, 7, 6, 8, 6, 3, 1, 6]
-
-  const makeWordDistribution = (line: number, em: number, space: number) => {
-    let marker = 0
-    let i = 0
-    let wordslen = 0
-    const chunks: [number, number][] = []
-
-    do {
-      const endOfWord = M.min(line, marker + FAKE_WORDS[i++ % FAKE_WORDS.length]! * em)
-      wordslen += endOfWord - marker
-      chunks.push([marker, (marker = endOfWord)])
-    } while ((marker += space) < line)
-
-    if (chunks.length >= 0) chunks[chunks.length - 1]![1] = line
-
-    return (t: number) => {
-      const w = t * wordslen
-      let m = 0
-      for (const [start, end] of chunks) {
-        const wordLength = end - start
-        if (m < w && w <= m + wordLength) return start + w - m
-        m += wordLength
-      }
-      return 0
-    }
-  }
-
-  const getVar = (props: { get(name: string): unknown }, name: string) => {
-    const val = props.get(name)
-    if (typeof val === 'string') return val
-    return String(val ?? '')
-  }
-
-  class HnSpoilerWorklet {
-    static get contextOptions() {
-      return { alpha: true }
-    }
-
-    static get inputProperties() {
-      return [
-        '--hn-nz-t',
-        '--hn-nz-stop',
-        '--hn-nz-fade',
-        '--hn-nz-gap',
-        '--hn-nz-accent',
-        '--hn-nz-words',
-        '--hn-nz-density',
-      ]
-    }
-
-    paint(
-      ctx: CanvasRenderingContext2D,
-      size: { width: number; height: number },
-      props: { get(name: string): unknown },
-    ) {
-      const rand = lcgrand(4011505)
-
-      const accent = (getVar(props, '--hn-nz-accent') || '0 0% 0%').split(' ')
-      const mimicWords = getVar(props, '--hn-nz-words').trim() === 'true'
-      const vmin = 2
-      const vmax = 12
-      const width = size.width
-      const height = size.height
-      const gaps = (getVar(props, '--hn-nz-gap') || '0px 0px').split(' ').map(parseFloat)
-      const hgap = gaps[0] ?? 0
-      const vgap = gaps[1] ?? 0
-      const density = parseFloat(getVar(props, '--hn-nz-density')) || 0.08
-      const sizedev = (globalThis as { devicePixelRatio?: number }).devicePixelRatio! > 1 ? 0.5 : 0
-      const fadeDuration = parseFloat(getVar(props, '--hn-nz-fade')) || 0
-
-      const world: World = {
-        t: parseFloat(getVar(props, '--hn-nz-t') || '0'),
-        tStop: parseFloat(getVar(props, '--hn-nz-stop') || 'Infinity'),
-        tStart: 0,
-        n: M.round(M.min(5000, density * (width - 2 * hgap) * (height - 2 * vgap))),
-      }
-
-      const lineWidth = width - 2 * hgap
-      const lineHeight = height - 2 * vgap
-
-      const wordDist = mimicWords
-        ? makeWordDistribution(lineWidth, lineHeight, M.max(12, lineHeight / 4))
-        : (x: number) => x * (width - 2 * hgap)
-
-      ctx.clearRect(0, 0, size.width, size.height)
-
-      for (let i = 0; i < world.n; ++i) {
-        const x0 = hgap + wordDist(rand())
-        const y0 = rand(vgap, height - vgap)
-        const v0mag = rand(vmin, vmax)
-        const size0 = rand(1, 1 + sizedev)
-
-        const l = parseInt(accent[2] ?? '0')
-        const ldir = l > 50 ? -1 : 1
-        const lightness = M.floor(clamp(0, l + ldir * rand(0, 30), 100))
-
-        const v0 = pol2vec(v0mag, rand(0, M.PI * 2))
-        const vx0 = v0[0]
-        const vy0 = v0[1]
-        vecnorm(v0)
-
-        const shape = rand() > 0.5 ? 'square' : 'circle'
-        const lifetime = rand(0.3, 1.5)
-        const respawn = rand(0, 1)
-        const visibilityFn = trapezoidalWave(lifetime, 0.15, 0.3)
-        const phase = rand(0, lifetime + respawn)
-
-        const cantSpawnNoMore =
-          M.floor((world.tStop + phase) / (lifetime + respawn)) <
-          M.floor((world.t + phase) / (lifetime + respawn))
-        if (cantSpawnNoMore) continue
-
-        const t = M.min(lifetime, (world.t + phase) % (lifetime + respawn))
-        const x = x0 + vx0 * t
-        const y = y0 + vy0 * t
-
-        const fade = animateFadeInOut(world, i, fadeDuration)
-        const alpha = fade * (1 - t / lifetime)
-        const psize = fade * (size0 * visibilityFn(t))
-
-        for (const [wx, wy] of cycleBounds([x, y], [width, height], psize / 2)) {
-          ctx.beginPath()
-          ctx.fillStyle = `hsl(${accent[0]} ${accent[1]} ${lightness}% / ${M.round(alpha * 100)}%)`
-          if (shape === 'square') {
-            ctx.rect(wx!, wy!, psize, psize)
-          } else {
-            ctx.arc(wx!, wy!, psize / 2, 0, M.PI * 2)
-          }
-          ctx.closePath()
-          ctx.fill()
-        }
-      }
-    }
-  }
-
-  registerPaint('hn-spoiler', HnSpoilerWorklet)
-}
-
-export const workletSource = `(${workletMain.toString()})()`
+export * from '../../../../shared/src/behavior/spoiler/worklet'

package/src/components/table/Table.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { computed, shallowRef } from 'vue'
   import ScrollArea from '../scroll-area/ScrollArea.vue'
   import { cn } from '../../lib/cn'
   import { tableWrapper, type TableVariants } from './table.variants'
@@ -15,10 +16,18 @@
     }>(),
     { variant: 'primary', hover: true, stickyHeader: false },
   )
+
+  const area = shallowRef<InstanceType<typeof ScrollArea> | null>(null)
+
+  defineExpose({
+    viewport: computed(() => area.value?.viewport),
+    instance: computed(() => area.value?.instance),
+  })
 </script>
 
 <template>
   <ScrollArea
+    ref="area"
     :direction="props.stickyHeader ? 'both' : 'horizontal'"
     :class="
       cn(

package/src/components/tabs/TabsList.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { computed, shallowRef } from 'vue'
   import { TabsList } from 'reka-ui'
   import ScrollArea from '../scroll-area/ScrollArea.vue'
   import { cn } from '../../lib/cn'
@@ -13,10 +14,18 @@
   }>()
 
   const { variant, orientation } = useTabsStyle()
+
+  const area = shallowRef<InstanceType<typeof ScrollArea> | null>(null)
+
+  defineExpose({
+    viewport: computed(() => area.value?.viewport),
+    instance: computed(() => area.value?.instance),
+  })
 </script>
 
 <template>
   <ScrollArea
+    ref="area"
     :direction="orientation"
     :scrollbar="false"
     :class="cn(tabsScroll({ variant, orientation }), props.class)"

package/src/components/time/utils/relativeTime.ts

@@ -1,20 +1 @@
-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 ''
-}
+export * from '../../../../../shared/src/lib/relative-time'

package/src/components/toast/composables/useToastLayout.ts

@@ -1,28 +1,23 @@
 import { computed, onBeforeUnmount, reactive, watch } from 'vue'
+import {
+  toastCardHeight,
+  toastItemStyle,
+  toastLayout,
+  type ToastSlot,
+} from '../../../../../shared/src/lib/toast-layout'
 import { toastState, type ToastItem } from '../store'
 
-export const VISIBLE_STACK = 3
-
-const GAP = 12
-const CARD_CHROME_BLOCK = 34
+export { VISIBLE_STACK } from '../../../../../shared/src/lib/toast-layout'
 
 export function useToastLayout() {
   const heights = reactive(new Map<number | string, number>())
   const observers = new Map<number | string, { observer: ResizeObserver; el: HTMLElement }>()
-  const lastLayout = new Map<number | string, { index: number; offset: number }>()
+  const lastLayout = new Map<number | string, ToastSlot>()
 
   const openItems = computed(() => toastState.items.filter(item => item.open))
 
   const layout = computed(() => {
-    const map = new Map<number | string, { index: number; offset: number }>()
-    const open = openItems.value
-    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 += (heights.get(item.id) ?? 0) + GAP
-    }
+    const map = toastLayout(openItems.value, id => heights.get(id))
     for (const [id, slot] of map) lastLayout.set(id, slot)
     return map
   })
@@ -37,14 +32,7 @@ export function useToastLayout() {
   }
 
   function itemStyle(item: ToastItem) {
-    const slot = slotOf(item)
-    const selfHeight = heights.get(item.id)
-    return {
-      '--hn-t-index': String(slot.index),
-      '--hn-t-offset': `${slot.offset}px`,
-      ...(selfHeight ? { '--hn-t-self-h': `${selfHeight}px` } : {}),
-      ...(frontHeight.value > 0 ? { '--hn-t-front-h': `${frontHeight.value}px` } : {}),
-    }
+    return toastItemStyle(slotOf(item), heights.get(item.id), frontHeight.value)
   }
 
   function setItemRef(id: number | string, refValue: unknown) {
@@ -54,10 +42,10 @@ export function useToastLayout() {
     if (existing?.el === el) return
     existing?.observer.disconnect()
     const observer = new ResizeObserver(() => {
-      heights.set(id, el.offsetHeight + CARD_CHROME_BLOCK)
+      heights.set(id, toastCardHeight(el))
     })
     observer.observe(el)
-    heights.set(id, el.offsetHeight + CARD_CHROME_BLOCK)
+    heights.set(id, toastCardHeight(el))
     observers.set(id, { observer, el })
   }