@hina-ui/vue 1.7.5 → 1.7.6

package/dist/shared/lib/command-palette/match.ts

@@ -0,0 +1,92 @@
+export interface CommandMatchable {
+  label: string
+  description?: string
+  keywords?: string[]
+}
+
+export interface CommandGroupOf<T> {
+  label: string
+  items: T[]
+}
+
+export interface CommandMatch<T extends CommandMatchable = CommandMatchable> {
+  item: T
+  start: number
+  end: number
+}
+
+export interface CommandSection<T extends CommandMatchable = CommandMatchable> {
+  key: string
+  label?: string
+  matches: CommandMatch<T>[]
+}
+
+interface Scored<T extends CommandMatchable> extends CommandMatch<T> {
+  score: number
+}
+
+interface ScoredSection<T extends CommandMatchable> extends CommandSection<T> {
+  best: number
+}
+
+function isGroup<T>(entry: T | CommandGroupOf<T>): entry is CommandGroupOf<T> {
+  return 'items' in (entry as object)
+}
+
+function score<T extends CommandMatchable>(item: T, query: string): Scored<T> | null {
+  if (!query) return { item, start: -1, end: -1, score: 0 }
+  const label = item.label.toLowerCase()
+  const at = label.indexOf(query)
+  if (at === 0) return { item, start: 0, end: query.length, score: label === query ? 4 : 3 }
+  if (at > 0) return { item, start: at, end: at + query.length, score: 2 }
+  const keywords = item.keywords?.map(keyword => keyword.toLowerCase()) ?? []
+  if (keywords.includes(query)) return { item, start: -1, end: -1, score: 1.5 }
+  if (keywords.some(keyword => keyword.includes(query)))
+    return { item, start: -1, end: -1, score: 1 }
+  if (item.description?.toLowerCase().includes(query)) {
+    return { item, start: -1, end: -1, score: 0.5 }
+  }
+  return null
+}
+
+function rank<T extends CommandMatchable>(items: T[], query: string): Scored<T>[] {
+  return items
+    .map(item => score(item, query))
+    .filter((match): match is Scored<T> => match !== null)
+    .sort((a, b) => b.score - a.score)
+}
+
+export function filterCommands<T extends CommandMatchable>(
+  items: ReadonlyArray<T | CommandGroupOf<T>>,
+  query: string,
+): CommandSection<T>[] {
+  const q = query.trim().toLowerCase()
+  const sections: ScoredSection<T>[] = []
+  let loose: T[] = []
+  const push = (label: string | undefined, entries: T[]) => {
+    const ranked = rank(entries, q)
+    if (ranked.length === 0) return
+    sections.push({
+      key: String(sections.length),
+      label,
+      best: ranked[0]!.score,
+      matches: ranked.map(({ item, start, end }) => ({ item, start, end })),
+    })
+  }
+  const flush = () => {
+    if (loose.length === 0) return
+    push(undefined, loose)
+    loose = []
+  }
+  for (const entry of items) {
+    if (!isGroup(entry)) {
+      loose.push(entry)
+      continue
+    }
+    flush()
+    push(entry.label, entry.items)
+  }
+  flush()
+  if (q) sections.sort((a, b) => b.best - a.best)
+  return sections.map(({ key, label, matches }) => ({ key, label, matches }))
+}

package/dist/shared/lib/data-list.ts

@@ -0,0 +1,40 @@
+export interface DataListScrollOptions {
+  align?: 'start' | 'center' | 'end' | 'auto'
+  behavior?: 'auto' | 'smooth'
+}
+
+export function dataListText<T>(
+  item: T,
+  index: number,
+  field: keyof T | ((item: T, index: number) => unknown) | undefined,
+) {
+  const value = typeof field === 'function' ? field(item, index) : field ? item[field] : undefined
+  return value !== '' && (typeof value === 'string' || typeof value === 'number')
+    ? value
+    : undefined
+}
+
+export function scrollDataListItem(
+  element: HTMLElement,
+  viewport: HTMLElement | undefined,
+  { align = 'auto', behavior }: DataListScrollOptions,
+) {
+  if (!viewport) {
+    element.scrollIntoView({ block: align === 'auto' ? 'nearest' : align, behavior })
+    return
+  }
+  const rect = element.getBoundingClientRect()
+  const start =
+    rect.top - viewport.getBoundingClientRect().top - viewport.clientTop + viewport.scrollTop
+  const end = start + rect.height - viewport.clientHeight
+  const nearest = Math.min(Math.max(viewport.scrollTop, Math.min(start, end)), Math.max(start, end))
+  const offset =
+    align === 'start'
+      ? start
+      : align === 'end'
+        ? end
+        : align === 'center'
+          ? (start + end) / 2
+          : nearest
+  viewport.scrollTo({ top: offset, behavior })
+}

package/dist/shared/lib/data-table/column-sizing-styles.ts

@@ -0,0 +1,41 @@
+import { allocateWidths, columnBounds } from './column-sizing'
+import type { DataTableColumn } from '../../types/data-table'
+
+export type DataTableSizingStyle = { width: string } & { [key: `--${string}`]: string }
+
+export function columnSizingStyles<T extends object>(
+  columns: DataTableColumn<T>[],
+  overrides: Record<string, number>,
+  controls: number,
+): DataTableSizingStyle {
+  const initial = allocateWidths(columns, overrides, 0)
+  const total = Object.values(initial).reduce((sum, width) => sum + width, controls)
+  const flexible = columns.filter(
+    column =>
+      !column.pin &&
+      overrides[column.key] === undefined &&
+      initial[column.key]! < columnBounds(column).max,
+  )
+  const capacities = flexible
+    .map(column => columnBounds(column).max - initial[column.key]!)
+    .sort((a, b) => a - b)
+  let consumed = 0
+  const shares = capacities.map((capacity, index) => {
+    const share = `calc((100cqi - ${total + consumed}px) / ${capacities.length - index})`
+    consumed += capacity
+    return share
+  })
+  const keys = new Set(flexible.map(column => column.key))
+  return {
+    width: shares.length ? `clamp(${total}px, 100%, ${total + consumed}px)` : `${total}px`,
+    '--hn-table-column-grow': shares.length ? `max(0px, ${shares.join(', ')})` : '0px',
+    ...Object.fromEntries(
+      columns.map((column, index) => [
+        `--hn-table-column-${index}`,
+        keys.has(column.key)
+          ? `min(${columnBounds(column).max}px, calc(${initial[column.key]}px + var(--hn-table-column-grow)))`
+          : `${initial[column.key]}px`,
+      ]),
+    ),
+  }
+}

package/dist/shared/lib/data-table/column-sizing.ts

@@ -0,0 +1,101 @@
+import type { DataTableColumn } from '../../types/data-table'
+
+export function pixelWidth(value: number | string | undefined, fallback: number) {
+  return typeof value === 'number' && Number.isFinite(value)
+    ? value
+    : typeof value === 'string' && /^\d+(\.\d+)?px$/.test(value)
+      ? parseFloat(value)
+      : fallback
+}
+
+export function columnBounds<T extends object>(column: DataTableColumn<T>) {
+  const min = Math.max(0, pixelWidth(column.minWidth, 48))
+  return { min, max: Math.max(min, pixelWidth(column.maxWidth, 1600)) }
+}
+
+export function clampWidth<T extends object>(column: DataTableColumn<T>, width: number) {
+  const { min, max } = columnBounds(column)
+  return Math.max(min, Math.min(max, width))
+}
+
+export function allocateWidths<T extends object>(
+  columns: DataTableColumn<T>[],
+  overrides: Record<string, number>,
+  available: number,
+) {
+  const widths = Object.fromEntries(
+    columns.map(column => [
+      column.key,
+      clampWidth(column, pixelWidth(overrides[column.key] ?? column.width, 160)),
+    ]),
+  )
+  let remaining = available - Object.values(widths).reduce((sum, width) => sum + width, 0)
+  let flexible = columns.filter(column => !column.pin && overrides[column.key] === undefined)
+  while (remaining > 0.01 && flexible.length) {
+    const share = remaining / flexible.length
+    for (const column of flexible) {
+      const extra = Math.min(share, columnBounds(column).max - widths[column.key]!)
+      widths[column.key]! += extra
+      remaining -= extra
+    }
+    flexible = flexible.filter(column => widths[column.key]! < columnBounds(column).max - 0.01)
+  }
+  return widths
+}
+
+export function resizeBoundary<T extends object>(
+  columns: DataTableColumn<T>[],
+  column: DataTableColumn<T>,
+  mode: 'fit' | 'expand',
+) {
+  const index = columns.findIndex(item => item.key === column.key)
+  if (index < 0 || column.resizable === false) return
+  const side = column.pin === 'end' ? 'start' : 'end'
+  const neighbor = columns[index + (side === 'start' ? -1 : 1)]
+  if (mode === 'fit' && side === 'end' && neighbor?.pin === 'end') return
+  if (mode === 'fit' && (!neighbor || neighbor.resizable === false)) return
+  return { side, neighbor: mode === 'fit' ? neighbor : undefined } as const
+}
+
+export function resizeBounds<T extends object>(
+  column: DataTableColumn<T>,
+  neighbor: DataTableColumn<T> | undefined,
+  widths: Record<string, number>,
+  minimumTotalWidth = 0,
+  maximumWidth = Infinity,
+) {
+  const bounds = columnBounds(column)
+  bounds.max = Math.min(bounds.max, maximumWidth)
+  if (!neighbor) {
+    const otherWidth = Object.entries(widths).reduce(
+      (sum, [key, width]) => sum + (key === column.key ? 0 : width),
+      0,
+    )
+    return {
+      min: Math.max(bounds.min, Math.min(widths[column.key]!, minimumTotalWidth - otherWidth)),
+      max: bounds.max,
+    }
+  }
+  const other = columnBounds(neighbor)
+  const total = widths[column.key]! + widths[neighbor.key]!
+  return {
+    min: Math.max(bounds.min, total - other.max),
+    max: Math.min(bounds.max, total - other.min),
+  }
+}
+
+export function resizeWidths<T extends object>(
+  column: DataTableColumn<T>,
+  neighbor: DataTableColumn<T> | undefined,
+  widths: Record<string, number>,
+  value: number,
+  minimumTotalWidth = 0,
+  maximumWidth = Infinity,
+) {
+  const { min, max } = resizeBounds(column, neighbor, widths, minimumTotalWidth, maximumWidth)
+  const width = Math.max(min, Math.min(max, value))
+  return {
+    [column.key]: width,
+    ...(neighbor ? { [neighbor.key]: widths[neighbor.key]! + widths[column.key]! - width } : {}),
+  }
+}

package/dist/shared/lib/data-table/csv.ts

@@ -0,0 +1,51 @@
+import type { DataTableColumn, DataTableExportOptions } from '../../types/data-table'
+
+export function exportColumns<T>(columns: DataTableColumn<T>[], options: DataTableExportOptions) {
+  return columns.filter(
+    column =>
+      column.exportable !== false && (!options.columns || options.columns.includes(column.key)),
+  )
+}
+
+export function tableCsv<T>(
+  visible: DataTableColumn<T>[],
+  rows: T[],
+  options: DataTableExportOptions,
+  valueOf: (row: T, column: DataTableColumn<T>) => unknown,
+  displayValue: (row: T, column: DataTableColumn<T>) => unknown,
+) {
+  const delimiter = options.delimiter ?? ','
+  const columns = exportColumns(visible, options)
+  const escape = (value: unknown) => {
+    let text = value == null ? '' : String(value)
+    if (typeof value === 'string' && /^[\s]*[=+@-]/.test(text)) text = "'" + text
+    return '"' + text.replaceAll('"', '""') + '"'
+  }
+  const lines = [columns.map(column => escape(column.label)).join(delimiter)]
+  for (const row of rows) {
+    lines.push(
+      columns
+        .map(column =>
+          escape(
+            column.exportValue
+              ? column.exportValue(row)
+              : options.formatted
+                ? displayValue(row, column)
+                : valueOf(row, column),
+          ),
+        )
+        .join(delimiter),
+    )
+  }
+  return (options.bom === false ? '' : '') + lines.join('\r\n')
+}
+
+export function downloadCsv(text: string, filename = 'data.csv') {
+  if (typeof document === 'undefined') return
+  const url = URL.createObjectURL(new Blob([text], { type: 'text/csv;charset=utf-8' }))
+  const anchor = document.createElement('a')
+  anchor.href = url
+  anchor.download = filename
+  anchor.click()
+  setTimeout(() => URL.revokeObjectURL(url), 1000)
+}

package/dist/shared/lib/data-table/layout.ts

@@ -0,0 +1,199 @@
+import type { DataTableCellStyle, DataTableColumn } from '../../types/data-table'
+import { cssSize } from './utils'
+
+export interface DataTablePinLayout<T> {
+  columns: DataTableColumn<T>[]
+  constrained: boolean
+  leading: number
+  trailing: number
+  fixedWidths: Record<string, number>
+  width: (column: DataTableColumn<T>) => number
+}
+
+export function pinStyle<T>(
+  layout: DataTablePinLayout<T>,
+  column: DataTableColumn<T>,
+  head = false,
+): DataTableCellStyle {
+  if (!column.pin) return {}
+  const siblings = layout.columns.filter(item => item.pin === column.pin)
+  const index = siblings.findIndex(item => item.key === column.key)
+  const preceding = column.pin === 'start' ? siblings.slice(0, index) : siblings.slice(index + 1)
+  const controls = column.pin === 'start' ? layout.leading * 48 : layout.trailing * 72
+  const offset = `${preceding.reduce(
+    (sum, column) =>
+      sum + (layout.constrained ? layout.fixedWidths[column.key]! : layout.width(column)),
+    controls,
+  )}px`
+  return {
+    position: 'sticky',
+    [column.pin === 'start' ? 'insetInlineStart' : 'insetInlineEnd']: offset,
+    zIndex: head ? 5 : 1,
+    backgroundColor: head ? 'var(--hn-table-head-bg)' : 'var(--hn-table-bg)',
+    boxShadow: `${column.pin === 'start' ? '1px' : '-1px'} 0 0 var(--hn-border)`,
+  }
+}
+
+export function cellStyle<T>(
+  layout: DataTablePinLayout<T>,
+  column: DataTableColumn<T>,
+  head = false,
+): DataTableCellStyle {
+  return {
+    ...(layout.constrained
+      ? {}
+      : {
+          width: cssSize(column.width),
+          minWidth: cssSize(column.minWidth ?? column.width),
+          maxWidth: cssSize(column.maxWidth),
+        }),
+    ...pinStyle(layout, column, head),
+  }
+}
+
+export function controlStyle<T>(
+  columns: DataTableColumn<T>[],
+  side: 'start' | 'end',
+  index: number,
+  head = false,
+): DataTableCellStyle {
+  return {
+    width: side === 'end' ? '72px' : '48px',
+    minWidth: side === 'end' ? '72px' : '48px',
+    paddingInline: '8px',
+    textAlign: 'center',
+    ...(columns.some(column => column.pin === side)
+      ? {
+          position: 'sticky',
+          [side === 'start' ? 'insetInlineStart' : 'insetInlineEnd']: `${index * 48}px`,
+          zIndex: head ? 5 : 1,
+          backgroundColor: head ? 'var(--hn-table-head-bg)' : 'var(--hn-table-bg)',
+        }
+      : {}),
+  }
+}
+
+export interface DataTableHeaderPlacement<S> {
+  id: string
+  leaf: boolean
+  colspan: number
+  rowspan: number
+  top: number
+  style: S
+}
+
+export function headerRows<T, C extends object, S extends object>(
+  columns: DataTableColumn<T>[],
+  visible: DataTableColumn<T>[],
+  heights: number[],
+  sticky: boolean | undefined,
+  context: (column: DataTableColumn<T>) => C,
+  styleOf: (column: DataTableColumn<T>, leaf: boolean) => S,
+) {
+  const paths = new Map<string, DataTableColumn<T>[]>()
+  function visit(columns: DataTableColumn<T>[], parent: DataTableColumn<T>[] = []) {
+    for (const column of columns) {
+      const path = [...parent, column]
+      if (column.children?.length) visit(column.children, path)
+      else paths.set(column.key, path)
+    }
+  }
+  visit(columns)
+  const depth = Math.max(1, ...visible.map(column => paths.get(column.key)!.length))
+  return Array.from({ length: depth }, (_, level) => {
+    const result: (C & DataTableHeaderPlacement<S>)[] = []
+    for (let index = 0; index < visible.length;) {
+      const first = visible[index]!
+      const path = paths.get(first.key)!
+      const column = path[level]
+      if (!column) {
+        index++
+        continue
+      }
+      const leaf = level === path.length - 1
+      let end = index + 1
+      if (!leaf)
+        while (
+          end < visible.length &&
+          paths.get(visible[end]!.key)?.[level]?.key === column.key &&
+          visible[end]!.pin === first.pin
+        )
+          end++
+      const top = Array.from({ length: level }, (_, i) => heights[i] ?? 44).reduce(
+        (a, b) => a + b,
+        0,
+      )
+      result.push({
+        ...context(column),
+        id: leaf ? `leaf:${column.key}` : `${level}:${column.key}:${first.key}`,
+        leaf,
+        colspan: end - index,
+        rowspan: leaf ? depth - level : 1,
+        top,
+        style: {
+          ...(leaf
+            ? styleOf(column, true)
+            : styleOf(first.pin === 'end' ? visible[end - 1]! : first, false)),
+          ...(sticky ? { top: `${top}px` } : {}),
+        } as S,
+      })
+      index = end
+    }
+    return result
+  })
+}
+
+export function canMoveColumn<T>(columns: DataTableColumn<T>[], key: string, target: string) {
+  if (key === target) return false
+  const source = columns.find(column => column.key === key),
+    destination = columns.find(column => column.key === target)
+  return !(
+    !source ||
+    !destination ||
+    source.pin !== destination.pin ||
+    source.reorderable === false ||
+    destination.reorderable === false
+  )
+}
+
+export function columnOrder<T>(order: string[], leaves: DataTableColumn<T>[]) {
+  return [...new Set([...order, ...leaves.map(column => column.key)])]
+}
+
+export function moveColumnOrder<T>(
+  order: string[],
+  leaves: DataTableColumn<T>[],
+  key: string,
+  target: string,
+) {
+  const next = columnOrder(order, leaves)
+  const from = next.indexOf(key),
+    to = next.indexOf(target)
+  next.splice(from, 1)
+  next.splice(to, 0, key)
+  return next
+}
+
+export function dropColumnOrder<T>(
+  order: string[],
+  leaves: DataTableColumn<T>[],
+  key: string,
+  target: string,
+  before: boolean | undefined,
+) {
+  const next = columnOrder(order, leaves)
+  next.splice(next.indexOf(key), 1)
+  next.splice(next.indexOf(target) + (before ? 0 : 1), 0, key)
+  return next
+}
+
+export function reorderPosition(from: number, to: number, before?: boolean) {
+  return before === undefined ? to : to + (before ? 0 : 1) - (from < to ? 1 : 0)
+}
+
+export function reorderedRows<T>(source: T[], from: number, position: number, row: T) {
+  const rows = [...source]
+  rows.splice(from, 1)
+  rows.splice(position, 0, row)
+  return rows
+}

package/dist/shared/lib/data-table/resize.ts

@@ -0,0 +1,66 @@
+import type { DataTableColumn } from '../../types/data-table'
+import { resizeBoundary } from './column-sizing'
+
+export interface DataTableHandlePosition {
+  inset: number
+  visible: boolean
+}
+
+export function resizeHandlePositions<T extends object>(
+  columns: DataTableColumn<T>[],
+  cells: Map<string, { left: number; right: number }>,
+  box: { left: number; right: number },
+  scale: number,
+  rtl: boolean,
+) {
+  let left = box.left
+  let right = box.right
+  for (const column of columns) {
+    const rect = cells.get(column.key)
+    if (!rect || !column.pin) continue
+    if ((column.pin === 'start') !== rtl) left = Math.max(left, rect.right)
+    else right = Math.min(right, rect.left)
+  }
+  const next: Record<string, DataTableHandlePosition> = {}
+  for (const column of columns) {
+    const rect = cells.get(column.key)
+    if (!rect) continue
+    const start = Math.max(rect.left, column.pin ? box.left : left)
+    const end = Math.min(rect.right, column.pin ? box.right : right)
+    const fromLeft = (column.pin === 'end') !== rtl
+    next[column.key] = {
+      inset: Math.max(0, (fromLeft ? start - rect.left : rect.right - end) / scale),
+      visible: end - start >= 9 * scale - 0.01,
+    }
+  }
+  return next
+}
+
+export function resizeAffectedColumns<T extends object>(
+  columns: DataTableColumn<T>[],
+  column: DataTableColumn<T>,
+  mode: 'fit' | 'expand',
+) {
+  const edge = resizeBoundary(columns, column, mode)
+  return edge?.neighbor
+    ? edge.side === 'start'
+      ? [edge.neighbor, column]
+      : [column, edge.neighbor]
+    : [column]
+}
+
+export function pinnedMaximumWidth<T extends object>(
+  columns: DataTableColumn<T>[],
+  column: DataTableColumn<T>,
+  mode: 'fit' | 'expand',
+  source: Record<string, number>,
+  available: number,
+) {
+  if (!column.pin || resizeBoundary(columns, column, mode)?.neighbor?.pin) return Infinity
+  const otherPinned = columns.reduce(
+    (sum, item) => sum + (item.pin && item.key !== column.key ? source[item.key]! : 0),
+    0,
+  )
+  const center = columns.some(item => !item.pin) ? 48 : 0
+  return Math.max(source[column.key]!, available - otherPinned - center)
+}