@hina-ui/vue 1.7.5 → 1.7.6

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,

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

@@ -9,6 +9,10 @@ import {
 } from 'vue'
 import { useEventListener } from '@vueuse/core'
 import type { DataTableColumn } from '../types'
+import {
+  resizeHandlePositions,
+  type DataTableHandlePosition,
+} from '../../../../../shared/src/lib/data-table/resize'
 
 export function useTableResizeHandles<T extends object>(
   element: Ref<HTMLTableElement | undefined>,
@@ -16,7 +20,7 @@ export function useTableResizeHandles<T extends object>(
   columns: Ref<DataTableColumn<T>[]>,
   enabled: () => boolean,
 ) {
-  const positions = shallowRef<Record<string, { inset: number; visible: boolean }>>({})
+  const positions = shallowRef<Record<string, DataTableHandlePosition>>({})
   let frame = 0
   let observer: ResizeObserver | undefined
   function update() {
@@ -35,26 +39,7 @@ export function useTableResizeHandles<T extends object>(
         cell.getBoundingClientRect(),
       ]),
     )
-    let left = box.left
-    let right = box.right
-    for (const column of columns.value) {
-      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: typeof positions.value = {}
-    for (const column of columns.value) {
-      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,
-      }
-    }
+    const next = resizeHandlePositions(columns.value, cells, box, scale, rtl)
     if (JSON.stringify(next) !== JSON.stringify(positions.value)) positions.value = next
   }
   function schedule() {

package/src/components/data-table/types.ts

@@ -1,85 +1,22 @@
 import type { VirtualizeOptions } from '../../lib/virtual/types'
 import type { CSSProperties } from 'vue'
 import type { TableVariants } from '../table/table.variants'
+import type {
+  DataTableCellContext,
+  DataTableColumn,
+  DataTableEdit,
+  DataTableEditorContext,
+  DataTableGroupContext,
+  DataTableHeaderCell,
+  DataTableHeaderContext,
+  DataTableKey,
+  DataTableKeyField,
+  DataTableRowContext,
+  DataTableState,
+} from '../../../../shared/src/types/data-table'
 
-export type DataTableKey = string | number
-export type DataTableKeyField<T> = {
-  [K in keyof T]-?: T[K] extends DataTableKey ? K : never
-}[keyof T] &
-  string
-export type DataTableAggregate = 'sum' | 'min' | 'max' | 'mean' | 'count' | 'uniqueCount'
-export type DataTableScope = 'page' | 'filtered' | 'selected' | 'all'
-export type DataTableFilterMode = 'contains' | 'equals' | 'in' | 'range'
+export * from '../../../../shared/src/types/data-table'
 
-export interface DataTableColumn<T> {
-  key: string
-  label: string
-  children?: DataTableColumn<T>[]
-  field?: keyof T
-  accessor?: (row: T) => unknown
-  sortable?: boolean
-  sort?: (a: T, b: T) => number
-  filterable?: boolean
-  filter?: (row: T, query: string) => boolean
-  filterValue?: (row: T, value: unknown) => boolean
-  filterMode?: DataTableFilterMode
-  format?: (value: unknown, row: T) => string | number
-  align?: 'start' | 'center' | 'end'
-  width?: number | string
-  minWidth?: number | string
-  maxWidth?: number | string
-  pin?: 'start' | 'end'
-  truncate?: boolean
-  resizable?: boolean
-  reorderable?: boolean
-  aggregate?: DataTableAggregate | ((rows: T[]) => unknown)
-  footer?: boolean | string | ((rows: T[]) => string | number)
-  editable?: boolean | ((row: T) => boolean)
-  parse?: (value: unknown, row: T) => unknown
-  validate?: (value: unknown, row: T) => string | undefined | Promise<string | undefined>
-  exportable?: boolean
-  exportValue?: (row: T) => unknown
-  headerClass?: string
-  cellClass?: string | ((row: T) => string | undefined)
-}
-export interface DataTableSort {
-  key: string
-  desc: boolean
-}
-export interface DataTableFilter {
-  key: string
-  value: unknown
-}
-export interface DataTableQuery {
-  page: number
-  pageSize: number
-  sorting: DataTableSort[]
-  filter: string
-  columnFilters: DataTableFilter[]
-  grouping: string[]
-}
-export interface DataTableEdit<T> {
-  key: DataTableKey
-  row: T
-  values: Record<string, unknown>
-  column?: string
-}
-export interface DataTableReorder<T> {
-  row: T
-  target: T
-  parent?: T
-  from: number
-  to: number
-  rows: T[]
-}
-export interface DataTableExportOptions {
-  scope?: DataTableScope
-  columns?: string[]
-  formatted?: boolean
-  delimiter?: ',' | ';' | '\t'
-  bom?: boolean
-  filename?: string
-}
 export interface DataTableProps<T> {
   rows: T[]
   columns: DataTableColumn<T>[]
@@ -122,74 +59,6 @@ export interface DataTableProps<T> {
   class?: string
   tableClass?: string
 }
-export interface DataTableRowContext<T> {
-  row: T
-  key: DataTableKey
-  index: number
-  depth: number
-  selected: boolean
-  indeterminate: boolean
-  selectable: boolean
-  expanded: boolean
-  expandable: boolean
-  toggleSelected: (selected?: boolean) => void
-  toggleExpanded: (expanded?: boolean) => void
-  startEdit: (column?: string) => void
-}
-export interface DataTableCellContext<T> extends DataTableRowContext<T> {
-  column: DataTableColumn<T>
-  value: unknown
-}
-export interface DataTableHeaderContext<T> {
-  column: DataTableColumn<T>
-  sorting: 'asc' | 'desc' | false
-  sortIndex: number
-  filterValue: unknown
-  toggleSort: (multi?: boolean) => void
-  setFilter: (value: unknown) => void
-}
-export interface DataTableGroupContext<T> {
-  key: string
-  column: DataTableColumn<T>
-  value: unknown
-  rows: T[]
-  depth: number
-  expanded: boolean
-  toggleExpanded: (expanded?: boolean) => void
-  aggregate: (column: string) => unknown
-}
-export interface DataTableEditorContext<T> extends DataTableCellContext<T> {
-  value: unknown
-  pending: boolean
-  error?: string
-  updateValue: (value: unknown) => void
-  commit: () => Promise<void>
-  cancel: () => void
-}
-export interface DataTableApi<T> {
-  getRows: (scope?: DataTableScope) => T[]
-  toggleSelected: (key: DataTableKey, selected?: boolean) => void
-  toggleExpanded: (key: DataTableKey, expanded?: boolean) => void
-  setFilter: (column: string, value: unknown) => void
-  setColumnHidden: (column: string, hidden: boolean) => void
-  setColumnWidth: (column: string, width: number) => void
-  moveColumn: (column: string, target: string) => void
-  moveRow: (key: DataTableKey, target: DataTableKey) => void
-  startEdit: (key: DataTableKey, column?: string) => void
-  cancelEdit: () => void
-  commitEdit: () => Promise<void>
-  scrollToRow: (key: DataTableKey) => void
-  toCsv: (options?: DataTableExportOptions) => string
-  exportCsv: (options?: DataTableExportOptions) => void
-}
-export interface DataTableState<T> extends DataTableQuery {
-  total: number
-  rows: T[]
-  selected: DataTableKey[]
-  expanded: DataTableKey[]
-  visibleColumns: DataTableColumn<T>[]
-  api: DataTableApi<T>
-}
 export type DataTableSlots<T> = {
   toolbar?(state: DataTableState<T>): unknown
   footer?(state: DataTableState<T>): unknown
@@ -207,13 +76,4 @@ export type DataTableSlots<T> = {
   [K in `footer-${string}`]?: (context: { column: DataTableColumn<T>; rows: T[] }) => unknown
 }
 
-export interface DataTableHeader<T> extends DataTableHeaderContext<T> {
-  id: string
-  colspan: number
-  rowspan: number
-  leaf: boolean
-  top: number
-  style: CSSProperties
-  ariaSort?: 'ascending' | 'descending'
-  nextLabel: string
-}
+export interface DataTableHeader<T> extends DataTableHeaderCell<T, CSSProperties> {}

package/src/components/data-table/utils.ts

@@ -1,75 +1 @@
-import type { DataTableColumn, DataTableFilterMode, DataTableKey } from './types'
-
-export function rowId(key: DataTableKey) {
-  return `${typeof key}:${key}`
-}
-
-export function rowKey(id: string): DataTableKey {
-  return id.startsWith('number:') ? Number(id.slice(7)) : id.slice(7)
-}
-
-export function positiveInteger(value: number, fallback: number) {
-  return Number.isFinite(value) ? Math.max(1, Math.floor(value)) : fallback
-}
-
-export function cssSize(value: number | string | undefined) {
-  return typeof value === 'number' ? `${value}px` : value
-}
-
-export function isRowAction(event: MouseEvent | KeyboardEvent) {
-  const target = event.target as HTMLElement | null
-  if (!target || event.defaultPrevented) return false
-  if (event.type === 'keydown') return target === event.currentTarget
-  const control = target.closest(
-    'a, button, input, select, textarea, label, [role="button"], [role="checkbox"], [role="switch"], [contenteditable]:not([contenteditable="false"]), [tabindex]',
-  )
-  return !control || control === event.currentTarget
-}
-
-export function flattenColumns<T>(columns: DataTableColumn<T>[]): DataTableColumn<T>[] {
-  return columns.flatMap(column =>
-    column.children?.length ? flattenColumns(column.children) : [column],
-  )
-}
-export function filterValue(
-  value: unknown,
-  filter: unknown,
-  mode: DataTableFilterMode = 'contains',
-  locale = 'en',
-) {
-  if (mode === 'equals') return Object.is(value, filter)
-  if (mode === 'in') return Array.isArray(filter) && filter.some(item => Object.is(item, value))
-  if (mode === 'range') {
-    if (!Array.isArray(filter)) return true
-    const numeric = value instanceof Date ? value.getTime() : Number(value)
-    const bound = (value: unknown) => (value instanceof Date ? value.getTime() : Number(value))
-    return (
-      value != null &&
-      Number.isFinite(numeric) &&
-      (filter[0] == null || numeric >= bound(filter[0])) &&
-      (filter[1] == null || numeric <= bound(filter[1]))
-    )
-  }
-  return String(value ?? '')
-    .toLocaleLowerCase(locale)
-    .includes(String(filter ?? '').toLocaleLowerCase(locale))
-}
-export function aggregate<T>(
-  rows: T[],
-  column: DataTableColumn<T>,
-  valueOf: (row: T, column: DataTableColumn<T>) => unknown,
-) {
-  if (typeof column.aggregate === 'function') return column.aggregate(rows)
-  if (!column.aggregate) return undefined
-  if (column.aggregate === 'count') return rows.length
-  const values = rows.map(row => valueOf(row, column))
-  if (column.aggregate === 'uniqueCount') return new Set(values).size
-  const numbers = values.filter(
-    (value): value is number => typeof value === 'number' && Number.isFinite(value),
-  )
-  if (!numbers.length) return column.aggregate === 'sum' ? 0 : undefined
-  if (column.aggregate === 'min') return numbers.reduce((a, b) => Math.min(a, b))
-  if (column.aggregate === 'max') return numbers.reduce((a, b) => Math.max(a, b))
-  const sum = numbers.reduce((a, b) => a + b, 0)
-  return column.aggregate === 'mean' ? sum / numbers.length : sum
-}
+export * from '../../../../shared/src/lib/data-table/utils'

package/src/components/date-range-field/utils/validity.ts

@@ -1,21 +1 @@
-import type { DateValue } from '@internationalized/date'
-
-interface Bounds {
-  min?: DateValue
-  max?: DateValue
-}
-
-interface Parts {
-  start?: DateValue
-  end?: DateValue
-}
-
-function outside(value: DateValue | undefined, { min, max }: Bounds) {
-  if (!value) return false
-  return (!!min && value.compare(min) < 0) || (!!max && value.compare(max) > 0)
-}
-
-export function isRangeInvalid({ start, end }: Parts, bounds: Bounds) {
-  if (outside(start, bounds) || outside(end, bounds)) return true
-  return !!start && !!end && start.compare(end) > 0
-}
+export * from '../../../../../shared/src/lib/date-range-field/validity'

package/src/components/editable/editable.variants.ts

@@ -1 +1 @@
-export * from '@hina-ui/shared/variants/editable'
+export * from '../../../../shared/src/variants/editable'