@hina-ui/vue 1.7.5 → 1.7.7

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 })
   }
 

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/toggle/Toggle.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-  import { Toggle as ToggleRoot, injectTooltipProviderContext } from 'reka-ui'
+  import { injectTooltipProviderContext } from 'reka-ui'
+  import { Toggle as ToggleRoot } from '../../primitives/toggle'
   import { computed, useSlots } from 'vue'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'

package/src/components/toolbar/Toolbar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { toRef } from 'vue'
-  import { ToolbarRoot } from 'reka-ui'
+  import { ToolbarRoot } from '../../primitives/toolbar'
   import { cn } from '../../lib/cn'
   import { useAccessibleName } from '../../lib/a11y'
   import { useDirection } from '../../lib/useDirection'

package/src/components/toolbar/ToolbarButton.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { computed } from 'vue'
-  import { ToolbarButton as RekaToolbarButton } from 'reka-ui'
+  import { ToolbarButton as RekaToolbarButton } from '../../primitives/toolbar'
   import ToolbarControl from './ToolbarControl.vue'
   import { useToolbar } from './context'
   import type { ToolbarControlProps } from './types'

package/src/components/toolbar/ToolbarLink.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { computed } from 'vue'
-  import { ToolbarButton as RekaToolbarButton } from 'reka-ui'
+  import { ToolbarButton as RekaToolbarButton } from '../../primitives/toolbar'
   import ToolbarControl from './ToolbarControl.vue'
   import { useToolbar } from './context'
   import type { ToolbarControlProps } from './types'

package/src/components/toolbar/ToolbarSeparator.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { Separator } from 'reka-ui'
+  import { Separator } from '../../primitives/separator'
   import { cn } from '../../lib/cn'
   import { useToolbar } from './context'
   import { toolbarSeparator } from './toolbar.variants'

package/src/components/toolbar/ToolbarToggleGroup.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts" generic="T extends string | string[] = string | string[]">
   import { computed } from 'vue'
-  import { ToolbarToggleGroup as RekaToolbarToggleGroup, type AcceptableValue } from 'reka-ui'
+  import { ToolbarToggleGroup as RekaToolbarToggleGroup } from '../../primitives/toolbar'
+  import type { AcceptableValue } from '../../primitives/utils/types'
   import { cn } from '../../lib/cn'
   import { useToolbar, provideToolbarGroup } from './context'
   import { toolbarGroup } from './toolbar.variants'

package/src/components/toolbar/ToolbarToggleItem.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { computed } from 'vue'
-  import { ToolbarToggleItem as RekaToolbarToggleItem } from 'reka-ui'
+  import { ToolbarToggleItem as RekaToolbarToggleItem } from '../../primitives/toolbar'
   import { cn } from '../../lib/cn'
   import ToolbarControl from './ToolbarControl.vue'
   import { useToolbar, useToolbarGroup } from './context'

package/src/components/toolbar/types.ts

@@ -1,5 +1,5 @@
-import type { PrimitiveProps } from 'reka-ui'
 import type { ButtonVariants } from '../button/button.variants'
+import type { PrimitiveProps } from '../../primitives/primitive'
 
 export type ToolbarOrientation = 'horizontal' | 'vertical'
 export type ToolbarSize = 'sm' | 'md' | 'lg'

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'