@hina-ui/vue 1.7.4 → 1.7.6

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,

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

@@ -10,6 +10,15 @@ import {
 import { cssSize } from '../utils'
 import { allocateWidths, pixelWidth } from '../column-sizing'
 import { columnSizingStyles } from '../column-sizing-styles'
+import {
+  canMoveColumn,
+  cellStyle as layoutCellStyle,
+  controlStyle as layoutControlStyle,
+  headerRows as layoutHeaderRows,
+  moveColumnOrder,
+  pinStyle as layoutPinStyle,
+  type DataTablePinLayout,
+} from '../../../../../shared/src/lib/data-table/layout'
 import { useTableResize } from './useTableResize'
 import { useTableResizeHandles } from './useTableResizeHandles'
 import type { DataTableColumn, DataTableHeader, DataTableProps } from '../types'
@@ -130,106 +139,35 @@ export function useTableColumns<T extends object>(
   function columnStyle(column: DataTableColumn<T>): CSSProperties {
     return { width: cssSize(constrained.value ? widthVariable(column) : column.width) }
   }
+  const pinLayout = (): DataTablePinLayout<T> => ({
+    columns: ctl.visibleColumns.value,
+    constrained: constrained.value,
+    leading: leading.value,
+    trailing: trailing.value,
+    get fixedWidths() {
+      return fixedWidths.value
+    },
+    width,
+  })
   function pinStyle(column: DataTableColumn<T>, head = false): CSSProperties {
-    if (!column.pin) return {}
-    const siblings = ctl.visibleColumns.value.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' ? leading.value * 48 : trailing.value * 72
-    const offset = `${preceding.reduce(
-      (sum, column) => sum + (constrained.value ? fixedWidths.value[column.key]! : 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)`,
-    }
+    return layoutPinStyle(pinLayout(), column, head)
   }
   function cellStyle(column: DataTableColumn<T>, head = false): CSSProperties {
-    return {
-      ...(constrained.value
-        ? {}
-        : {
-            width: cssSize(column.width),
-            minWidth: cssSize(column.minWidth ?? column.width),
-            maxWidth: cssSize(column.maxWidth),
-          }),
-      ...pinStyle(column, head),
-    }
+    return layoutCellStyle(pinLayout(), column, head)
   }
   function controlStyle(side: 'start' | 'end', index: number, head = false): CSSProperties {
-    return {
-      width: side === 'end' ? '72px' : '48px',
-      minWidth: side === 'end' ? '72px' : '48px',
-      paddingInline: '8px',
-      textAlign: 'center',
-      ...(ctl.visibleColumns.value.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)',
-          }
-        : {}),
-    }
+    return layoutControlStyle(ctl.visibleColumns.value, side, index, head)
   }
-  const headerRows = computed<DataTableHeader<T>[][]>(() => {
-    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(props.columns)
-    const visible = ctl.visibleColumns.value
-    const depth = Math.max(1, ...visible.map(column => paths.get(column.key)!.length))
-    return Array.from({ length: depth }, (_, level) => {
-      const result: DataTableHeader<T>[] = []
-      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.value[i] ?? 44).reduce(
-          (a, b) => a + b,
-          0,
-        )
-        result.push({
-          ...ctl.headerContext(column),
-          id: leaf ? `leaf:${column.key}` : `${level}:${column.key}:${first.key}`,
-          leaf,
-          colspan: end - index,
-          rowspan: leaf ? depth - level : 1,
-          top,
-          style: {
-            ...(leaf
-              ? cellStyle(column, true)
-              : pinStyle(first.pin === 'end' ? visible[end - 1]! : first, true)),
-            ...(props.stickyHeader ? { top: `${top}px` } : {}),
-          },
-        })
-        index = end
-      }
-      return result
-    })
-  })
+  const headerRows = computed<DataTableHeader<T>[][]>(() =>
+    layoutHeaderRows(
+      props.columns,
+      ctl.visibleColumns.value,
+      heights.value,
+      props.stickyHeader,
+      ctl.headerContext,
+      (column, leaf) => (leaf ? cellStyle(column, true) : pinStyle(column, true)),
+    ),
+  )
   const sizing = computed<CSSProperties>(() =>
     constrained.value
       ? columnSizingStyles(
@@ -251,26 +189,13 @@ export function useTableColumns<T extends object>(
     '--hn-table-viewport-width': available.value ? `${available.value}px` : undefined,
   }))
   function moveColumn(key: string, target: string) {
-    if (ctl.blocked.value || key === target) return
-    const columns = ctl.visibleColumns.value
-    const source = columns.find(column => column.key === key),
-      destination = columns.find(column => column.key === target)
-    if (
-      !source ||
-      !destination ||
-      source.pin !== destination.pin ||
-      source.reorderable === false ||
-      destination.reorderable === false
+    if (ctl.blocked.value || !canMoveColumn(ctl.visibleColumns.value, key, target)) return
+    models.columnOrder.value = moveColumnOrder(
+      models.columnOrder.value,
+      ctl.leaves.value,
+      key,
+      target,
     )
-      return
-    const order = [
-      ...new Set([...models.columnOrder.value, ...ctl.leaves.value.map(column => column.key)]),
-    ]
-    const from = order.indexOf(key),
-      to = order.indexOf(target)
-    order.splice(from, 1)
-    order.splice(to, 0, key)
-    models.columnOrder.value = order
   }
   Object.assign(ctl.api, { setColumnWidth: resizing.setWidth, moveColumn })
   onScopeDispose(() => {

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

@@ -1,5 +1,10 @@
 import { computed, nextTick, onScopeDispose, shallowRef, type Ref, type CSSProperties } from 'vue'
 import { rowId } from '../utils'
+import {
+  dropColumnOrder,
+  reorderPosition,
+  reorderedRows,
+} from '../../../../../shared/src/lib/data-table/layout'
 import type { DataTableKey, DataTableProps, DataTableReorder } from '../types'
 import type { DataTableController, DataTableModels } from './useDataTable'
 
@@ -59,12 +64,16 @@ export function useTableDrag<T extends object>(
     if (!source) return
     const from = source.findIndex(item => ctl.keyOf(item) === key),
       to = source.findIndex(item => ctl.keyOf(item) === targetKey)
-    const position = before === undefined ? to : to + (before ? 0 : 1) - (from < to ? 1 : 0)
+    const position = reorderPosition(from, to, before)
     if (position === from) return
-    const rows = [...source]
-    rows.splice(from, 1)
-    rows.splice(position, 0, row.original)
-    onReorder({ row: row.original, target: target.original, parent, from, to: position, rows })
+    onReorder({
+      row: row.original,
+      target: target.original,
+      parent,
+      from,
+      to: position,
+      rows: reorderedRows(source, from, position, row.original),
+    })
   }
   function start(kind: 'row' | 'column', key: string, label: string, event: PointerEvent) {
     if (event.button !== 0 || ctl.blocked.value || (kind === 'row' && !ordered.value)) return
@@ -209,12 +218,13 @@ export function useTableDrag<T extends object>(
       cleanup?.()
       if (!apply || !destination) return
       if (kind === 'column') {
-        const order = [
-          ...new Set([...models.columnOrder.value, ...ctl.leaves.value.map(column => column.key)]),
-        ]
-        order.splice(order.indexOf(key), 1)
-        order.splice(order.indexOf(destination.target) + (destination.before ? 0 : 1), 0, key)
-        models.columnOrder.value = order
+        models.columnOrder.value = dropColumnOrder(
+          models.columnOrder.value,
+          ctl.leaves.value,
+          key,
+          destination.target,
+          destination.before,
+        )
       } else {
         const all = ctl.table.getCoreRowModel().rowsById
         const row = all[key],

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

@@ -1,44 +1,20 @@
+import { downloadCsv, tableCsv } from '../../../../../shared/src/lib/data-table/csv'
 import type { DataTableExportOptions } from '../types'
 import type { DataTableController } from './useDataTable'
 
 export function useTableExport<T extends object>(ctl: DataTableController<T>) {
   function toCsv(options: DataTableExportOptions = {}) {
-    const delimiter = options.delimiter ?? ','
-    const columns = ctl.visibleColumns.value.filter(
-      column =>
-        column.exportable !== false && (!options.columns || options.columns.includes(column.key)),
+    return tableCsv(
+      ctl.visibleColumns.value,
+      ctl.api.getRows(options.scope ?? 'filtered'),
+      options,
+      ctl.valueOf,
+      ctl.displayValue,
     )
-    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 ctl.api.getRows(options.scope ?? 'filtered')) {
-      lines.push(
-        columns
-          .map(column =>
-            escape(
-              column.exportValue
-                ? column.exportValue(row)
-                : options.formatted
-                  ? ctl.displayValue(row, column)
-                  : ctl.valueOf(row, column),
-            ),
-          )
-          .join(delimiter),
-      )
-    }
-    return (options.bom === false ? '' : '\uFEFF') + lines.join('\r\n')
   }
   function exportCsv(options: DataTableExportOptions = {}) {
     if (typeof document === 'undefined') return
-    const url = URL.createObjectURL(new Blob([toCsv(options)], { type: 'text/csv;charset=utf-8' }))
-    const anchor = document.createElement('a')
-    anchor.href = url
-    anchor.download = options.filename ?? 'data.csv'
-    anchor.click()
-    setTimeout(() => URL.revokeObjectURL(url), 1000)
+    downloadCsv(toCsv(options), options.filename)
   }
   Object.assign(ctl.api, { toCsv, exportCsv })
 }

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

@@ -1,5 +1,9 @@
 import { nextTick, onScopeDispose, shallowRef, watch, type Ref } from 'vue'
 import { clampWidth, resizeBoundary, resizeBounds, resizeWidths } from '../column-sizing'
+import {
+  pinnedMaximumWidth,
+  resizeAffectedColumns,
+} from '../../../../../shared/src/lib/data-table/resize'
 import type { DataTableColumn, DataTableProps } from '../types'
 import type { DataTableController, DataTableModels } from './useDataTable'
 
@@ -25,14 +29,8 @@ export function useTableResize<T extends object>(
   let release: (() => void) | undefined
   const boundary = (column: DataTableColumn<T>) =>
     resizeBoundary(ctl.visibleColumns.value, column, props.resizeMode ?? 'fit')
-  const affectedColumns = (column: DataTableColumn<T>) => {
-    const edge = boundary(column)
-    return edge?.neighbor
-      ? edge.side === 'start'
-        ? [edge.neighbor, column]
-        : [column, edge.neighbor]
-      : [column]
-  }
+  const affectedColumns = (column: DataTableColumn<T>) =>
+    resizeAffectedColumns(ctl.visibleColumns.value, column, props.resizeMode ?? 'fit')
   const resizeLabel = (column: DataTableColumn<T>) =>
     affectedColumns(column)
       .map(item => item.label)
@@ -42,16 +40,14 @@ export function useTableResize<T extends object>(
       .map(item => `${item.label}: ${Math.round(widths.value[item.key]!)}px`)
       .join(' / ')
   const minimumTotalWidth = () => (props.resizeMode === 'expand' ? Math.max(0, available.value) : 0)
-  const maximumWidth = (column: DataTableColumn<T>, source: Record<string, number>) => {
-    if (!column.pin || boundary(column)?.neighbor?.pin) return Infinity
-    const columns = ctl.visibleColumns.value
-    const otherPinned = columns.reduce(
-      (sum, item) => sum + (item.pin && item.key !== column.key ? source[item.key]! : 0),
-      0,
+  const maximumWidth = (column: DataTableColumn<T>, source: Record<string, number>) =>
+    pinnedMaximumWidth(
+      ctl.visibleColumns.value,
+      column,
+      props.resizeMode ?? 'fit',
+      source,
+      available.value,
     )
-    const center = columns.some(item => !item.pin) ? 48 : 0
-    return Math.max(source[column.key]!, available.value - otherPinned - center)
-  }
   const bounds = (column: DataTableColumn<T>) =>
     resizeBounds(
       column,