@hina-ui/vue 1.7.5 → 1.7.6

package/src/components/command-palette/utils/match.ts

@@ -1,76 +1,6 @@
-import { isCommandGroup, type CommandItem, type CommandItems } from '../types'
+import type { CommandItem } from '../types'
+import type * as Shared from '../../../../../shared/src/lib/command-palette/match'
 
-export interface CommandMatch {
-  item: CommandItem
-  start: number
-  end: number
-}
-
-export interface CommandSection {
-  key: string
-  label?: string
-  matches: CommandMatch[]
-}
-
-interface Scored extends CommandMatch {
-  score: number
-}
-
-interface ScoredSection extends CommandSection {
-  best: number
-}
-
-function score(item: CommandItem, query: string): Scored | 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(items: CommandItem[], query: string): Scored[] {
-  return items
-    .map(item => score(item, query))
-    .filter((match): match is Scored => match !== null)
-    .sort((a, b) => b.score - a.score)
-}
-
-export function filterCommands(items: CommandItems, query: string): CommandSection[] {
-  const q = query.trim().toLowerCase()
-  const sections: ScoredSection[] = []
-  let loose: CommandItem[] = []
-  const push = (label: string | undefined, entries: CommandItem[]) => {
-    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 (!isCommandGroup(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 }))
-}
+export { filterCommands } from '../../../../../shared/src/lib/command-palette/match'
+export type CommandMatch = Shared.CommandMatch<CommandItem>
+export type CommandSection = Shared.CommandSection<CommandItem>

package/src/components/data-list/composables/useDataList.ts

@@ -1,6 +1,7 @@
 import { computed, watch, type Ref } from 'vue'
 import { paginationInteger } from '../../pagination/composables/usePagination'
 import { cn } from '../../../lib/cn'
+import { dataListText } from '../../../../../shared/src/lib/data-list'
 import { dataListItem } from '../data-list.variants'
 import type {
   DataListKey,
@@ -21,10 +22,7 @@ export function useDataList<T>(
 ) {
   const layout = computed(() => layoutModel?.value ?? props.layout ?? 'list')
   function text(item: T, index: number, field: DataListTextField<T> | undefined) {
-    const value = typeof field === 'function' ? field(item, index) : field ? item[field] : undefined
-    return value !== '' && (typeof value === 'string' || typeof value === 'number')
-      ? value
-      : undefined
+    return dataListText(item, index, field)
   }
   const pageSize = computed(() => paginationInteger(sizeModel.value, 10, 1))
   const total = computed(() =>

package/src/components/data-list/utils/scroll.ts

@@ -1,26 +1 @@
-import type { VirtualListScrollOptions } from '../../virtual-list/types'
-
-export function scrollDataListItem(
-  element: HTMLElement,
-  viewport: HTMLElement | undefined,
-  { align = 'auto', behavior }: VirtualListScrollOptions,
-) {
-  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 })
-}
+export * from '../../../../../shared/src/lib/data-list'

package/src/components/data-table/column-sizing-styles.ts

@@ -1,40 +1 @@
-import type { CSSProperties } from 'vue'
-import { allocateWidths, columnBounds } from './column-sizing'
-import type { DataTableColumn } from './types'
-
-export function columnSizingStyles<T extends object>(
-  columns: DataTableColumn<T>[],
-  overrides: Record<string, number>,
-  controls: number,
-): CSSProperties {
-  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`,
-      ]),
-    ),
-  }
-}
+export * from '../../../../shared/src/lib/data-table/column-sizing-styles'

package/src/components/data-table/column-sizing.ts

@@ -1,101 +1 @@
-import type { DataTableColumn } from './types'
-
-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 } : {}),
-  }
-}
+export * from '../../../../shared/src/lib/data-table/column-sizing'

package/src/components/data-table/composables/useDataTable.ts

@@ -9,8 +9,32 @@ import {
   isRowAction,
   positiveInteger,
   rowId,
-  rowKey,
 } from '../utils'
+import {
+  ariaSort,
+  canGoNext,
+  clampedPage,
+  compareValues,
+  displayValue as formatValue,
+  engineSelection,
+  engineSorting,
+  engineState,
+  keyOf as rowKeyOf,
+  labelOf as rowLabelOf,
+  modelSelection,
+  modelSorting,
+  nextColumnFilters,
+  orderColumns,
+  pageCount as countPages,
+  selectionState,
+  sortLabel,
+  tableQuery,
+  toggleKey,
+  toggleSelection,
+  totalRows,
+  uniqueSelectable,
+  valueOf as cellValue,
+} from '../../../../../shared/src/lib/data-table/state'
 import type {
   DataTableApi,
   DataTableColumn,
@@ -53,18 +77,9 @@ export function useDataTable<T extends object>(
   const collator = computed(
     () => new Intl.Collator(t.value.tag, { numeric: true, sensitivity: 'base' }),
   )
-  const keyOf = (row: T) =>
-    typeof props.rowKey === 'function' ? props.rowKey(row) : (row[props.rowKey] as DataTableKey)
-  const labelOf = (row: T) =>
-    String(
-      typeof props.rowLabel === 'function'
-        ? props.rowLabel(row)
-        : props.rowLabel === undefined
-          ? keyOf(row)
-          : row[props.rowLabel],
-    )
-  const valueOf = (row: T, column: DataTableColumn<T>) =>
-    column.accessor ? column.accessor(row) : row[column.field ?? (column.key as keyof T)]
+  const keyOf = (row: T) => rowKeyOf(row, props.rowKey)
+  const labelOf = (row: T) => rowLabelOf(row, props.rowLabel, keyOf)
+  const valueOf = (row: T, column: DataTableColumn<T>) => cellValue(row, column)
   const selectable = (row: T) =>
     typeof props.selectable === 'function' ? props.selectable(row) : !!props.selectable
   const expandable = (row: T) =>
@@ -84,11 +99,7 @@ export function useDataTable<T extends object>(
       sortUndefined: 'last',
       sortFn: (a, b, id) => {
         if (column.sort) return column.sort(a.original, b.original)
-        const left = a.getValue(id),
-          right = b.getValue(id)
-        if (typeof left === 'number' && typeof right === 'number') return left - right
-        if (left instanceof Date && right instanceof Date) return left.getTime() - right.getTime()
-        return compare.compare(String(left), String(right))
+        return compareValues(a.getValue(id), b.getValue(id), compare)
       },
     }))
   })
@@ -122,73 +133,65 @@ export function useDataTable<T extends object>(
         ? column.filter(row.original, query)
         : filterValue(row.getValue(id), query, 'contains', t.value.tag)
     },
-    state: computed(() => ({
-      sorting: models.sorting.value.map(sort => ({ id: sort.key, desc: sort.desc })),
-      globalFilter: models.filter.value.trim(),
-      columnFilters: models.columnFilters.value
-        .filter(filter => leaves.value.some(column => column.key === filter.key))
-        .map(filter => ({ id: filter.key, value: filter.value })),
-      grouping: models.grouping.value.filter(key =>
-        leaves.value.some(column => column.key === key),
-      ),
-      expanded: Object.fromEntries(
-        [...models.expanded.value.map(rowId), ...models.expandedGroups.value].map(key => [
-          key,
-          true,
-        ]),
+    state: computed(() =>
+      engineState(
+        leaves.value,
+        {
+          sorting: models.sorting.value,
+          filter: models.filter.value,
+          columnFilters: models.columnFilters.value,
+          grouping: models.grouping.value,
+          selected: models.selected.value,
+          expanded: models.expanded.value,
+          expandedGroups: models.expandedGroups.value,
+          hiddenColumns: models.hiddenColumns.value,
+        },
+        page.value,
+        pageSize.value,
       ),
-      pagination: { pageIndex: page.value - 1, pageSize: pageSize.value },
-      rowSelection: Object.fromEntries(
-        models.selected.value.map(key => [rowId(key), true as const]),
-      ),
-      columnVisibility: Object.fromEntries(models.hiddenColumns.value.map(key => [key, false])),
-    })),
+    ),
     onSortingChange: updater => {
       if (blocked.value) return
-      const current = models.sorting.value.map(sort => ({ id: sort.key, desc: sort.desc }))
+      const current = engineSorting(models.sorting.value)
       const next = typeof updater === 'function' ? updater(current) : updater
-      models.sorting.value = next.map(sort => ({ key: sort.id, desc: sort.desc }))
+      models.sorting.value = modelSorting(next)
     },
     onRowSelectionChange: updater => {
       if (blocked.value) return
-      const current = Object.fromEntries(
-        models.selected.value.map(key => [rowId(key), true as const]),
-      )
+      const current = engineSelection(models.selected.value)
       const next = typeof updater === 'function' ? updater(current) : updater
-      models.selected.value = Object.keys(next)
-        .filter(key => next[key])
-        .map(rowKey)
+      models.selected.value = modelSelection(next)
     },
   })
-  const visibleColumns = computed(() => {
-    const visible = leaves.value.filter(column => !models.hiddenColumns.value.includes(column.key))
-    const order = [...new Set([...models.columnOrder.value, ...visible.map(column => column.key)])]
-    return visible.sort((a, b) => {
-      const rank = (column: DataTableColumn<T>) =>
-        column.pin === 'start' ? 0 : column.pin === 'end' ? 2 : 1
-      return rank(a) - rank(b) || order.indexOf(a.key) - order.indexOf(b.key)
-    })
-  })
+  const visibleColumns = computed(() =>
+    orderColumns(leaves.value, models.hiddenColumns.value, models.columnOrder.value),
+  )
   const knownTotal = computed(() => !props.manual || props.total !== undefined)
   const total = computed(() =>
-    props.manual
-      ? Math.max(0, Math.floor(Number.isFinite(props.total) ? props.total! : props.rows.length))
-      : table.getPreExpandedRowModel().rows.length,
+    totalRows(
+      props.manual,
+      props.total,
+      props.rows.length,
+      () => table.getPreExpandedRowModel().rows.length,
+    ),
   )
-  const pageCount = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
+  const pageCount = computed(() => countPages(total.value, pageSize.value))
   const canNext = computed(() =>
-    knownTotal.value
-      ? page.value < pageCount.value
-      : (props.hasNextPage ?? props.rows.length >= pageSize.value),
+    canGoNext(
+      knownTotal.value,
+      page.value,
+      pageCount.value,
+      props.hasNextPage,
+      props.rows.length,
+      pageSize.value,
+    ),
   )
   function toggleExpanded(key: DataTableKey, value?: boolean) {
     if (blocked.value) return
     const row = table.getCoreRowModel().rowsById[rowId(key)]
     if (!row?.getCanExpand()) return
     const next = value ?? !models.expanded.value.includes(key)
-    models.expanded.value = next
-      ? [...new Set([...models.expanded.value, key])]
-      : models.expanded.value.filter(item => item !== key)
+    models.expanded.value = toggleKey(models.expanded.value, key, next)
   }
   function toggleSelected(key: DataTableKey, value?: boolean) {
     if (blocked.value) return
@@ -225,9 +228,7 @@ export function useDataTable<T extends object>(
             toggleExpanded: value => {
               if (blocked.value) return
               const next = value ?? !models.expandedGroups.value.includes(row.id)
-              models.expandedGroups.value = next
-                ? [...new Set([...models.expandedGroups.value, row.id])]
-                : models.expandedGroups.value.filter(key => key !== row.id)
+              models.expandedGroups.value = toggleKey(models.expandedGroups.value, row.id, next)
             },
             aggregate: key => {
               const column = leaves.value.find(column => column.key === key)
@@ -244,43 +245,28 @@ export function useDataTable<T extends object>(
       return { ...context, id: row.id, label: labelOf(row.original), group }
     }),
   )
-  const selectionRows = computed(() => {
-    const source =
+  const selectionRows = computed(() =>
+    uniqueSelectable(
       props.selectAll === 'filtered'
         ? table.getFilteredRowModel().flatRows
-        : table.getRowModel().rows.flatMap(row => (row.getIsGrouped() ? row.getLeafRows() : [row]))
-    return [...new Map(source.filter(row => row.getCanSelect()).map(row => [row.id, row])).values()]
-  })
-  const pageSelection = computed(() => {
-    const eligible = selectionRows.value
-    if (!eligible.length) return false
-    const count = eligible.filter(row => row.getIsSelected()).length
-    return count === eligible.length
-      ? true
-      : count || eligible.some(row => row.getIsSomeSelected())
-        ? 'indeterminate'
-        : false
-  })
+        : table.getRowModel().rows.flatMap(row => (row.getIsGrouped() ? row.getLeafRows() : [row])),
+    ),
+  )
+  const pageSelection = computed(() => selectionState(selectionRows.value))
   const selectionDisabled = computed(() => blocked.value || !selectionRows.value.length)
   function togglePage(selected: boolean | 'indeterminate') {
     if (blocked.value || props.selectionMode === 'single') return
-    const keys = new Set(models.selected.value)
-    for (const row of selectionRows.value) {
-      const descendants = props.selectChildren === false ? [row] : [row, ...row.getLeafRows()]
-      for (const item of descendants)
-        if (item.getCanSelect()) {
-          if (selected === true) keys.add(keyOf(item.original))
-          else keys.delete(keyOf(item.original))
-        }
-    }
-    models.selected.value = [...keys]
+    models.selected.value = toggleSelection(
+      models.selected.value,
+      selectionRows.value,
+      selected,
+      props.selectChildren !== false,
+      keyOf,
+    )
   }
   function setFilter(column: string, value: unknown) {
     if (blocked.value) return
-    const next = models.columnFilters.value.filter(filter => filter.key !== column)
-    if (value != null && value !== '' && !(Array.isArray(value) && !value.length))
-      next.push({ key: column, value })
-    models.columnFilters.value = next
+    models.columnFilters.value = nextColumnFilters(models.columnFilters.value, column, value)
   }
   function headerContext(column: DataTableColumn<T>) {
     const engine = leaves.value.some(item => item.key === column.key)
@@ -294,17 +280,8 @@ export function useDataTable<T extends object>(
       sortIndex: engine?.getSortIndex() ?? -1,
       filterValue: models.columnFilters.value.find(filter => filter.key === column.key)?.value,
       setFilter: (value: unknown) => setFilter(column.key, value),
-      nextLabel:
-        next === 'asc'
-          ? t.value.table.sortAsc
-          : next === 'desc'
-            ? t.value.table.sortDesc
-            : t.value.table.sortNone,
-      ariaSort: sorting
-        ? sorting === 'asc'
-          ? ('ascending' as const)
-          : ('descending' as const)
-        : undefined,
+      nextLabel: sortLabel(next, t.value.table),
+      ariaSort: ariaSort(sorting),
       toggleSort: (multi = false) => {
         if (!blocked.value && column.sortable)
           engine?.toggleSorting(undefined, !!props.multiSort && multi)
@@ -328,9 +305,7 @@ export function useDataTable<T extends object>(
     toggleExpanded,
     setFilter,
     setColumnHidden: (key: string, hidden: boolean) => {
-      models.hiddenColumns.value = hidden
-        ? [...new Set([...models.hiddenColumns.value, key])]
-        : models.hiddenColumns.value.filter(value => value !== key)
+      models.hiddenColumns.value = toggleKey(models.hiddenColumns.value, key, hidden)
     },
   })
   const state = computed<DataTableState<T>>(() => ({
@@ -363,8 +338,14 @@ export function useDataTable<T extends object>(
   watch(
     [pageCount, page, () => props.loading, () => props.pagination, knownTotal],
     () => {
-      if (props.pagination && !props.loading && knownTotal.value && page.value > pageCount.value)
-        models.page.value = pageCount.value
+      const target = clampedPage(
+        props.pagination,
+        props.loading,
+        knownTotal.value,
+        page.value,
+        pageCount.value,
+      )
+      if (target !== undefined) models.page.value = target
     },
     { immediate: true },
   )
@@ -378,14 +359,14 @@ export function useDataTable<T extends object>(
       models.grouping.value,
     ],
     () => {
-      onChange({
-        page: page.value,
-        pageSize: pageSize.value,
-        sorting: models.sorting.value.map(sort => ({ ...sort })),
-        filter: models.filter.value,
-        columnFilters: models.columnFilters.value.map(filter => ({ ...filter })),
-        grouping: [...models.grouping.value],
-      })
+      onChange(
+        tableQuery(page.value, pageSize.value, {
+          sorting: models.sorting.value,
+          filter: models.filter.value,
+          columnFilters: models.columnFilters.value,
+          grouping: models.grouping.value,
+        }),
+      )
     },
     { deep: true, flush: 'post' },
   )
@@ -395,8 +376,7 @@ export function useDataTable<T extends object>(
     onRowClick(row, event)
   }
   function displayValue(row: T, column: DataTableColumn<T>) {
-    const value = valueOf(row, column)
-    return column.format ? column.format(value, row) : value == null ? '—' : String(value)
+    return formatValue(row, column)
   }
   return {
     api,