@hina-ui/vue 1.7.5 → 1.7.6

package/src/components/toast/store.ts

@@ -1,234 +1,22 @@
 import { markRaw, reactive, type Component } from 'vue'
-import { DURATION } from '../../motion'
+import {
+  createToastStore,
+  type ToastItem as SharedToastItem,
+} from '../../../../shared/src/behavior/toast'
 
-export type ToastTone = 'neutral' | 'success' | 'danger' | 'warning' | 'info' | 'loading'
+export type {
+  ToastTone,
+  ToasterPosition,
+  ToastAction,
+  ToastOptions,
+  ToastPromiseMessages,
+} from '../../../../shared/src/behavior/toast'
 
-export type ToasterPosition =
-  'bottom-end' | 'bottom-start' | 'bottom-center' | 'top-end' | 'top-start' | 'top-center'
-
-export interface ToastAction {
-  label: string
-  onClick?: () => void
-}
-
-export interface ToastItem {
-  id: number | string
-  tone: ToastTone
-  message: string
-  description?: string
-  duration: number
-  open: boolean
-  action?: ToastAction
-  cancel?: ToastAction
-  component?: Component
-  componentProps?: Record<string, unknown>
-  onDismiss?: (id: number | string) => void
-  onAutoClose?: (id: number | string) => void
-}
-
-export interface ToastOptions {
-  id?: number | string
-  tone?: ToastTone
-  description?: string
-  duration?: number
-  action?: ToastAction
-  cancel?: ToastAction
-  onDismiss?: (id: number | string) => void
-  onAutoClose?: (id: number | string) => void
-}
-
-type MessageInput<T> = string | { message: string; description?: string } | T
-
-export interface ToastPromiseMessages<T> {
-  loading: string
-  success: MessageInput<(value: T) => string | { message: string; description?: string }>
-  error: MessageInput<(reason: unknown) => string | { message: string; description?: string }>
-}
-
-const MAX_VISIBLE = 5
-const SETTLE_DELAY = (DURATION.exit + 0.06) * 1000
-
-let seed = 0
+export type ToastItem = SharedToastItem<Component>
 
 export const toastState: { items: ToastItem[] } = reactive({ items: [] })
 
-interface Timer {
-  handle: ReturnType<typeof setTimeout> | undefined
-  remaining: number
-  startedAt: number
-}
-
-const timers = new Map<number | string, Timer>()
-const pauseReasons = new Set<string>()
-
-function fire(id: number | string) {
-  timers.delete(id)
-  const item = toastState.items.find(t => t.id === id)
-  if (item) close(item, 'auto')
-}
-
-function startTimer(item: ToastItem) {
-  stopTimer(item.id)
-  if (item.duration <= 0) return
-  const timer: Timer = { handle: undefined, remaining: item.duration, startedAt: Date.now() }
-  timers.set(item.id, timer)
-  if (pauseReasons.size === 0) timer.handle = setTimeout(() => fire(item.id), timer.remaining)
-}
-
-function stopTimer(id: number | string) {
-  const timer = timers.get(id)
-  if (timer?.handle) clearTimeout(timer.handle)
-  timers.delete(id)
-}
-
-export function pauseTimers(reason: string) {
-  if (pauseReasons.has(reason)) return
-  const wasRunning = pauseReasons.size === 0
-  pauseReasons.add(reason)
-  if (!wasRunning) return
-  for (const timer of timers.values()) {
-    if (!timer.handle) continue
-    clearTimeout(timer.handle)
-    timer.handle = undefined
-    timer.remaining = Math.max(0, timer.remaining - (Date.now() - timer.startedAt))
-  }
-}
-
-export function resumeTimers(reason: string) {
-  pauseReasons.delete(reason)
-  if (pauseReasons.size > 0) return
-  for (const [id, timer] of timers) {
-    if (timer.handle) continue
-    timer.startedAt = Date.now()
-    timer.handle = setTimeout(() => fire(id), timer.remaining)
-  }
-}
-
-function settle(item: ToastItem) {
-  const index = toastState.items.indexOf(item)
-  if (index >= 0) toastState.items.splice(index, 1)
-}
-
-function close(item: ToastItem, source: 'manual' | 'auto') {
-  if (!item.open) return
-  item.open = false
-  stopTimer(item.id)
-  if (source === 'auto') item.onAutoClose?.(item.id)
-  item.onDismiss?.(item.id)
-  setTimeout(() => settle(item), SETTLE_DELAY)
-}
-
-export function dismiss(id?: number | string) {
-  for (const item of toastState.items) {
-    if (id !== undefined && item.id !== id) continue
-    close(item, 'manual')
-  }
-}
-
-function defaultDuration(tone: ToastTone) {
-  return tone === 'loading' ? 0 : 4000
-}
-
-interface InternalOptions extends ToastOptions {
-  component?: Component
-  componentProps?: Record<string, unknown>
-}
-
-function push(message: string, options: InternalOptions = {}) {
-  const tone = options.tone ?? 'neutral'
-  const existing =
-    options.id !== undefined ? toastState.items.find(t => t.id === options.id) : undefined
-
-  if (existing && existing.open) {
-    existing.tone = tone
-    existing.message = message
-    existing.description = options.description
-    existing.duration = options.duration ?? defaultDuration(tone)
-    existing.action = options.action
-    existing.cancel = options.cancel
-    existing.component = options.component ? markRaw(options.component) : undefined
-    existing.componentProps = options.componentProps
-    if (options.onDismiss) existing.onDismiss = options.onDismiss
-    if (options.onAutoClose) existing.onAutoClose = options.onAutoClose
-    startTimer(existing)
-    return existing.id
-  }
-
-  if (existing) settle(existing)
-
-  const item: ToastItem = {
-    id: options.id ?? ++seed,
-    tone,
-    message,
-    description: options.description,
-    duration: options.duration ?? defaultDuration(tone),
-    open: true,
-    action: options.action,
-    cancel: options.cancel,
-    component: options.component ? markRaw(options.component) : undefined,
-    componentProps: options.componentProps,
-    onDismiss: options.onDismiss,
-    onAutoClose: options.onAutoClose,
-  }
-  toastState.items.push(item)
-  startTimer(item)
-
-  const visible = toastState.items.filter(t => t.open)
-  for (const stale of visible.slice(0, Math.max(0, visible.length - MAX_VISIBLE))) {
-    close(stale, 'manual')
-  }
-  return item.id
-}
-
-function resolveMessage(
-  input: MessageInput<(v: never) => string | { message: string; description?: string }>,
-  value: unknown,
-): { message: string; description?: string } {
-  const raw = typeof input === 'function' ? (input as (v: unknown) => unknown)(value) : input
-  if (typeof raw === 'string') return { message: raw }
-  return raw as { message: string; description?: string }
-}
-
-type TonedOptions = Omit<ToastOptions, 'tone'>
-
-function promiseToast<T>(
-  promise: Promise<T>,
-  messages: ToastPromiseMessages<T>,
-  options: TonedOptions = {},
-): Promise<T> {
-  const id = push(messages.loading, { ...options, tone: 'loading', duration: 0 })
-  promise
-    .then(value => {
-      const done = resolveMessage(messages.success, value)
-      push(done.message, { ...options, id, tone: 'success', description: done.description })
-    })
-    .catch(reason => {
-      const done = resolveMessage(messages.error, reason)
-      push(done.message, { ...options, id, tone: 'danger', description: done.description })
-    })
-  return promise
-}
-
-export const toast = Object.assign(
-  (message: string, options?: ToastOptions) => push(message, options),
-  {
-    success: (message: string, options?: TonedOptions) =>
-      push(message, { ...options, tone: 'success' }),
-    danger: (message: string, options?: TonedOptions) =>
-      push(message, { ...options, tone: 'danger' }),
-    warning: (message: string, options?: TonedOptions) =>
-      push(message, { ...options, tone: 'warning' }),
-    info: (message: string, options?: TonedOptions) => push(message, { ...options, tone: 'info' }),
-    loading: (message: string, options?: TonedOptions) =>
-      push(message, { ...options, tone: 'loading' }),
-    custom: (
-      component: Component,
-      options?: TonedOptions & { props?: Record<string, unknown> },
-    ) => {
-      const { props: componentProps, ...rest } = options ?? {}
-      return push('', { ...rest, component, componentProps })
-    },
-    promise: promiseToast,
-    dismiss,
-  },
-)
+export const { toast, dismiss, pauseTimers, resumeTimers } = createToastStore<Component>({
+  state: toastState,
+  raw: component => markRaw(component),
+})

package/src/components/tree/composables/useTree.ts

@@ -1,6 +1,15 @@
 import { computed, type Ref } from 'vue'
 import type { TreeNode, TreeNodeState, TreeValue } from '../types'
-import { checkedState, indexTree, toggleChecked } from '../utils/selection'
+import {
+  expandedTreeKeys,
+  expandedTreeValues,
+  indexTree,
+  nextTreeModel,
+  selectedTreeNodes,
+  treeKey,
+  treeKeyMap,
+  treeStates,
+} from '../utils/selection'
 
 interface Options {
   items: TreeNode[]
@@ -16,39 +25,18 @@ export function useTree(
 ) {
   const initialExpanded = [...props.defaultExpanded]
   const index = computed(() => indexTree(props.items))
-  const states = computed(() => {
-    if (props.multiple)
-      return checkedState(index.value, Array.isArray(model.value) ? model.value : [])
-    return new Map(
-      [...index.value.entries].map(([value, entry]) => [
-        value,
-        {
-          selected: value === model.value,
-          indeterminate: false,
-          disabled: entry.disabled,
-        },
-      ]),
-    )
-  })
-  const selected = computed(() =>
-    [...index.value.entries.values()]
-      .filter(entry => states.value.get(entry.node.value)?.selected)
-      .map(entry => entry.node),
-  )
-  const keys = computed(
-    () => new Map([...index.value.entries].map(([value, entry]) => [key(entry.node), value])),
-  )
+  const states = computed(() => treeStates(index.value, props.multiple, model.value))
+  const selected = computed(() => selectedTreeNodes(index.value, states.value))
+  const keys = computed(() => treeKeyMap(index.value))
   const expanded = computed({
-    get: () => (expandedModel.value ?? initialExpanded).map(value => key({ value })),
+    get: () => expandedTreeKeys(expandedModel.value ?? initialExpanded),
     set: value => {
-      expandedModel.value = value.flatMap(key =>
-        keys.value.has(key) ? [keys.value.get(key)!] : [],
-      )
+      expandedModel.value = expandedTreeValues(keys.value, value)
     },
   })
 
   function key(node: Pick<TreeNode, 'value'>) {
-    return `${typeof node.value}:${node.value}`
+    return treeKey(node)
   }
   function getChildren(node: TreeNode) {
     return node.children?.length ? node.children : undefined
@@ -61,11 +49,7 @@ export function useTree(
     event.preventDefault()
     const node = event.detail.value
     if (!node || state(node).disabled) return
-    model.value = props.multiple
-      ? toggleChecked(index.value, Array.isArray(model.value) ? model.value : [], node.value)
-      : model.value === node.value
-        ? null
-        : node.value
+    model.value = nextTreeModel(index.value, props.multiple, model.value, node.value)
   }
   function toggle(node: TreeNode) {
     if (state(node).disabled || !getChildren(node)) return

package/src/components/tree/types.ts

@@ -1,20 +1 @@
-export type TreeValue = string | number
-
-export interface TreeNode {
-  value: TreeValue
-  label: string
-  description?: string
-  disabled?: boolean
-  children?: TreeNode[]
-}
-
-export interface TreeNodeState {
-  selected: boolean
-  indeterminate: boolean
-  disabled: boolean
-}
-
-export interface TreeNodeSlot extends TreeNodeState {
-  node: TreeNode
-  expanded: boolean
-}
+export * from '../../../../shared/src/types/tree'

package/src/components/tree/utils/selection.ts

@@ -1,78 +1 @@
-import type { TreeNode, TreeNodeState, TreeValue } from '../types'
-
-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 * from '../../../../../shared/src/lib/tree/selection'

package/src/components/tree-select/types.ts

@@ -1,34 +1 @@
-export interface TreeSelectNode {
-  value: string | number
-  label: string
-  description?: string
-  disabled?: boolean
-  children?: TreeSelectNode[]
-}
-
-export function findNode(
-  nodes: TreeSelectNode[],
-  value: string | number | null | undefined,
-): TreeSelectNode | undefined {
-  for (const node of nodes) {
-    if (node.value === value) return node
-    const hit = node.children && findNode(node.children, value)
-    if (hit) return hit
-  }
-  return undefined
-}
-
-export function pathTo(
-  nodes: TreeSelectNode[],
-  value: string | number | null | undefined,
-  trail: Array<string | number> = [],
-): Array<string | number> | null {
-  for (const node of nodes) {
-    if (node.value === value) return trail
-    if (node.children) {
-      const hit = pathTo(node.children, value, [...trail, node.value])
-      if (hit) return hit
-    }
-  }
-  return null
-}
+export * from '../../../../shared/src/types/tree-select'

package/src/components/tree-select/utils/filterTree.ts

@@ -1,19 +1 @@
-import type { TreeSelectNode } from '../types'
-
-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 }
-}
+export * from '../../../../../shared/src/lib/tree-select/filter'

package/src/components/virtual-list/composables/useVirtualList.ts

@@ -3,6 +3,15 @@ import { useResizeObserver } from '@vueuse/core'
 import { defaultRangeExtractor, type VirtualItem } from '@tanstack/vue-virtual'
 import { useDirection } from '../../../lib/useDirection'
 import { useVirtualWindow, virtualFlow } from '../../../lib/virtual/useVirtualWindow'
+import {
+  listContentStyle,
+  listEstimator,
+  listInitialRect,
+  listItemStyle,
+  listRootStyle,
+  nonnegative,
+  retainIndex,
+} from '../../../../../shared/src/lib/virtual/list'
 import { prefersReducedMotion } from '../../../motion'
 import type ScrollArea from '../../scroll-area/ScrollArea.vue'
 import type {
@@ -12,10 +21,6 @@ import type {
   VirtualListScrollOptions,
 } from '../types'
 
-function nonnegative(value: number) {
-  return Number.isFinite(value) ? Math.max(0, value) : 0
-}
-
 export function useVirtualList<T>(
   props: VirtualListProps<T>,
   onRangeChange: (range: VirtualListRange) => void,
@@ -38,16 +43,11 @@ export function useVirtualList<T>(
       const items = props.items
       const itemKeys = keys.value
       const retained = focusedIndex.value
-      const estimate = props.estimateSize ?? 48
       return {
         count: items.length,
         getScrollElement: () => viewport.value ?? null,
         getItemKey: (index: number) => itemKeys[index]!,
-        estimateSize: (index: number) =>
-          Math.max(
-            1,
-            nonnegative(typeof estimate === 'function' ? estimate(items[index]!, index) : estimate),
-          ),
+        estimateSize: listEstimator(items, props.estimateSize),
         horizontal: horizontal.value,
         isRtl: direction.value === 'rtl',
         overscan: Math.floor(nonnegative(props.overscan ?? 5)),
@@ -55,15 +55,9 @@ export function useVirtualList<T>(
         paddingStart: nonnegative(props.paddingStart ?? 0),
         paddingEnd: nonnegative(props.paddingEnd ?? 0),
         initialOffset: nonnegative(props.initialOffset ?? 0),
-        initialRect: props.initialRect ?? {
-          width: 320,
-          height: typeof props.height === 'number' ? props.height : 320,
-        },
-        rangeExtractor: (range: Parameters<typeof defaultRangeExtractor>[0]) => {
-          const indexes = defaultRangeExtractor(range)
-          if (retained >= 0 && !indexes.includes(retained)) indexes.push(retained)
-          return indexes.sort((a, b) => a - b)
-        },
+        initialRect: listInitialRect(props.initialRect, props.height),
+        rangeExtractor: (range: Parameters<typeof defaultRangeExtractor>[0]) =>
+          retainIndex(defaultRangeExtractor(range), retained),
       }
     }),
   )
@@ -76,31 +70,11 @@ export function useVirtualList<T>(
       key: keys.value[entry.index]!,
     })),
   )
-  const contentStyle = computed<CSSProperties>(() => {
-    const { before: start, after: end } = flow.value
-    return horizontal.value
-      ? {
-          width: 'max-content',
-          height: '100%',
-          paddingInlineStart: `${start}px`,
-          paddingInlineEnd: `${end}px`,
-        }
-      : { width: '100%', paddingBlockStart: `${start}px`, paddingBlockEnd: `${end}px` }
-  })
-  const rootStyle = computed<CSSProperties>(() => ({
-    height: typeof props.height === 'string' ? props.height : `${props.height ?? 320}px`,
-  }))
+  const contentStyle = computed<CSSProperties>(() => listContentStyle(flow.value, horizontal.value))
+  const rootStyle = computed<CSSProperties>(() => listRootStyle(props.height))
 
   function itemStyle(entry: VirtualItem & { gapBefore: number }): CSSProperties {
-    return horizontal.value
-      ? {
-          marginInlineStart: `${entry.gapBefore}px`,
-          width: props.dynamic === false ? `${entry.size}px` : undefined,
-        }
-      : {
-          marginBlockStart: `${entry.gapBefore}px`,
-          height: props.dynamic === false ? `${entry.size}px` : undefined,
-        }
+    return listItemStyle(entry, horizontal.value, props.dynamic)
   }
 
   function measureElement(element: unknown) {

package/src/components/visually-hidden/VisuallyHidden.vue

@@ -1,11 +1,29 @@
 <script setup lang="ts">
-  import { VisuallyHidden as RekaVisuallyHidden } from 'reka-ui'
+  import { Primitive, type PrimitiveProps } from 'reka-ui'
 
   defineOptions({ name: 'HnVisuallyHidden' })
+
+  const props = withDefaults(defineProps<PrimitiveProps>(), { as: 'span' })
+
+  const hidden = {
+    position: 'absolute',
+    border: 0,
+    width: '1px',
+    height: '1px',
+    padding: 0,
+    margin: '-1px',
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    clipPath: 'inset(50%)',
+    whiteSpace: 'nowrap',
+    wordWrap: 'normal',
+    top: '-1px',
+    left: '-1px',
+  } as const
 </script>
 
 <template>
-  <RekaVisuallyHidden>
+  <Primitive :as="props.as" :as-child="props.asChild" :style="hidden">
     <slot />
-  </RekaVisuallyHidden>
+  </Primitive>
 </template>

package/src/lib/caret.ts

@@ -1,48 +1 @@
-const MIRRORED = [
-  'font-family',
-  'font-size',
-  'font-weight',
-  'font-style',
-  'font-variant',
-  'font-feature-settings',
-  'line-height',
-  'letter-spacing',
-  'word-spacing',
-  'text-indent',
-  'text-transform',
-  'tab-size',
-  'direction',
-  'padding-top',
-  'padding-right',
-  'padding-bottom',
-  'padding-left',
-  'border-top-width',
-  'border-right-width',
-  'border-bottom-width',
-  'border-left-width',
-]
-
-export function caretTop(node: HTMLTextAreaElement, at = node.selectionEnd): number {
-  const style = getComputedStyle(node)
-  const mirror = node.ownerDocument.createElement('div')
-  for (const prop of MIRRORED) mirror.style.setProperty(prop, style.getPropertyValue(prop))
-  Object.assign(mirror.style, {
-    position: 'absolute',
-    top: '0',
-    insetInlineStart: '-9999px',
-    visibility: 'hidden',
-    pointerEvents: 'none',
-    boxSizing: 'border-box',
-    width: `${node.offsetWidth}px`,
-    whiteSpace: 'pre-wrap',
-    overflowWrap: 'break-word',
-  })
-  mirror.textContent = node.value.slice(0, at)
-  const marker = node.ownerDocument.createElement('span')
-  marker.textContent = node.value.slice(at) || '​'
-  mirror.append(marker)
-  node.ownerDocument.body.append(mirror)
-  const top = marker.offsetTop
-  mirror.remove()
-  return top
-}
+export * from '../../../shared/src/lib/caret'