@hina-ui/vue 1.6.0 → 1.7.1

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

@@ -0,0 +1,292 @@
+import { nextTick, onScopeDispose, shallowRef, watch, type Ref } from 'vue'
+import { clampWidth, resizeBoundary, resizeBounds, resizeWidths } from '../column-sizing'
+import type { DataTableColumn, DataTableProps } from '../types'
+import type { DataTableController, DataTableModels } from './useDataTable'
+
+export function useTableResize<T extends object>(
+  props: DataTableProps<T>,
+  models: DataTableModels,
+  ctl: DataTableController<T>,
+  element: Ref<HTMLTableElement | undefined>,
+  viewport: Ref<HTMLElement | undefined>,
+  widths: Ref<Record<string, number>>,
+  active: Ref<Record<string, number> | undefined>,
+  available: Ref<number>,
+) {
+  const resizing = shallowRef<string>()
+  const guide = shallowRef<{
+    x: number
+    y: number
+    height: number
+    columns: { key: string; label: string; width: number }[]
+    labelX: number
+  }>()
+  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 resizeLabel = (column: DataTableColumn<T>) =>
+    affectedColumns(column)
+      .map(item => item.label)
+      .join(' / ')
+  const resizeValueText = (column: DataTableColumn<T>) =>
+    affectedColumns(column)
+      .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 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,
+      boundary(column)?.neighbor,
+      widths.value,
+      minimumTotalWidth(),
+      maximumWidth(column, widths.value),
+    )
+  const canResize = (column: DataTableColumn<T>) => {
+    const range = bounds(column)
+    return props.resizable && !!boundary(column) && range.max - range.min > 0.01
+  }
+  function setWidth(key: string, value: number) {
+    if (ctl.blocked.value || !Number.isFinite(value)) return
+    const column = ctl.leaves.value.find(column => column.key === key)
+    if (column)
+      models.columnWidths.value = { ...models.columnWidths.value, [key]: clampWidth(column, value) }
+  }
+  function resize(column: DataTableColumn<T>, event: PointerEvent) {
+    const edge = boundary(column)
+    if (event.button !== 0 || ctl.blocked.value || !edge || !canResize(column)) return
+    event.preventDefault()
+    event.stopPropagation()
+    release?.()
+    const handle = event.currentTarget as HTMLElement
+    const document = handle.ownerDocument
+    const window = document.defaultView!
+    const table = element.value!
+    const cell = handle.closest('th')!
+    const ratio =
+      table.getBoundingClientRect().width / parseFloat(window.getComputedStyle(table).width) || 1
+    const initial = { ...widths.value }
+    table.querySelectorAll<HTMLElement>('thead [data-hn-column]').forEach(cell => {
+      initial[cell.dataset.hnColumn!] = cell.getBoundingClientRect().width / ratio
+    })
+    active.value = initial
+    const previous = models.columnWidths.value
+    const direction = window.getComputedStyle(table).direction === 'rtl' ? -1 : 1
+    const sign = direction * (edge.side === 'start' ? -1 : 1)
+    const coordinate = (rect: DOMRect) => (sign === 1 ? rect.right : rect.left)
+    const areaAnchor = () => {
+      const box = viewport.value?.getBoundingClientRect()
+      return box ? (direction === 1 ? box.left : box.right) : 0
+    }
+    const anchor = areaAnchor()
+    let lastScroll = viewport.value?.scrollLeft ?? 0
+    let scrollDelta = 0
+    const trackScroll = () => {
+      const area = viewport.value
+      if (!area) return
+      const range = Math.max(0, area.scrollWidth - area.clientWidth)
+      const previous = Math.max(
+        direction === 1 ? 0 : -range,
+        Math.min(direction === 1 ? range : 0, lastScroll),
+      )
+      scrollDelta += area.scrollLeft - previous
+      lastScroll = area.scrollLeft
+    }
+    const gesture = document.documentElement.dataset.hnTableGesture
+    document.documentElement.dataset.hnTableGesture = 'resize'
+    handle.setPointerCapture?.(event.pointerId)
+    resizing.value = column.key
+    let pointerX = event.clientX
+    let changed = false
+    let moved = false
+    let frame = 0
+    let stopped = false
+    const updateGuide = () => {
+      if (stopped) return
+      const rect = cell.getBoundingClientRect()
+      const area = viewport.value?.getBoundingClientRect()
+      const box = table.getBoundingClientRect()
+      if (!area) return
+      const x = coordinate(handle.getBoundingClientRect())
+      guide.value =
+        x >= area.left - 1 && x <= area.right + 1
+          ? {
+              x,
+              columns: affectedColumns(column).map(item => ({
+                key: item.key,
+                label: item.label,
+                width: Math.round(widths.value[item.key]!),
+              })),
+              labelX: Math.max(8, Math.min(x - 90, window.innerWidth - 188)),
+              y: Math.max(rect.top, area.top),
+              height: Math.max(0, Math.min(box.bottom, area.bottom) - Math.max(rect.top, area.top)),
+            }
+          : undefined
+    }
+    const apply = () => {
+      if (stopped) return
+      if (moved) {
+        trackScroll()
+        const delta =
+          pointerX - event.clientX + anchor - areaAnchor() + (column.pin ? 0 : scrollDelta)
+        const desired = initial[column.key]! + (delta * sign) / ratio
+        const changes = resizeWidths(
+          column,
+          edge.neighbor,
+          initial,
+          desired,
+          minimumTotalWidth(),
+          maximumWidth(column, initial),
+        )
+        if (
+          Object.entries(changes).some(
+            ([key, width]) => Math.abs(width - widths.value[key]!) > 0.01,
+          )
+        ) {
+          changed = true
+          active.value = { ...initial, ...changes }
+          models.columnWidths.value =
+            props.resizeMode === 'expand'
+              ? { ...previous, ...active.value }
+              : { ...previous, ...changes }
+        }
+      }
+      void nextTick(updateGuide)
+    }
+    const schedule = () => {
+      window.cancelAnimationFrame(frame)
+      frame = window.requestAnimationFrame(apply)
+    }
+    const move = (next: PointerEvent) => {
+      if (next.pointerId !== event.pointerId) return
+      moved ||= Math.abs(next.clientX - event.clientX) > 0.5
+      pointerX = next.clientX
+      schedule()
+    }
+    const stop = (cancel = false) => {
+      window.cancelAnimationFrame(frame)
+      if (!cancel) apply()
+      stopped = true
+      if (cancel && changed) models.columnWidths.value = previous
+      active.value = undefined
+      window.removeEventListener('pointermove', move)
+      window.removeEventListener('pointerup', up)
+      window.removeEventListener('pointercancel', cancelPointer)
+      window.removeEventListener('blur', cancelDrag)
+      document.removeEventListener('keydown', keydown, true)
+      document.removeEventListener('scroll', schedule, true)
+      window.removeEventListener('resize', schedule)
+      if (handle.hasPointerCapture?.(event.pointerId)) handle.releasePointerCapture(event.pointerId)
+      if (gesture === undefined) delete document.documentElement.dataset.hnTableGesture
+      else document.documentElement.dataset.hnTableGesture = gesture
+      resizing.value = undefined
+      guide.value = undefined
+      release = undefined
+    }
+    const up = (next: PointerEvent) => {
+      if (next.pointerId !== event.pointerId) return
+      pointerX = next.clientX
+      moved ||= Math.abs(next.clientX - event.clientX) > 0.5
+      stop()
+    }
+    const cancelDrag = () => stop(true)
+    const cancelPointer = (next: PointerEvent) => {
+      if (next.pointerId === event.pointerId) cancelDrag()
+    }
+    const keydown = (next: KeyboardEvent) => {
+      if (next.key === 'Escape') {
+        next.preventDefault()
+        next.stopPropagation()
+        cancelDrag()
+      }
+    }
+    release = cancelDrag
+    window.addEventListener('pointermove', move)
+    window.addEventListener('pointerup', up)
+    window.addEventListener('pointercancel', cancelPointer)
+    window.addEventListener('blur', cancelDrag)
+    document.addEventListener('keydown', keydown, true)
+    document.addEventListener('scroll', schedule, true)
+    window.addEventListener('resize', schedule)
+    updateGuide()
+  }
+  function resizeKey(column: DataTableColumn<T>, event: KeyboardEvent) {
+    if (
+      ctl.blocked.value ||
+      !canResize(column) ||
+      !['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)
+    )
+      return
+    event.preventDefault()
+    event.stopPropagation()
+    const edge = boundary(column)!
+    const direction = element.value && getComputedStyle(element.value).direction === 'rtl' ? -1 : 1
+    const sign = direction * (edge.side === 'start' ? -1 : 1)
+    const range = bounds(column)
+    const value =
+      event.key === 'Home'
+        ? range.min
+        : event.key === 'End'
+          ? range.max
+          : widths.value[column.key]! +
+            (event.key === 'ArrowRight' ? 1 : -1) * sign * (event.shiftKey ? 10 : 1)
+    const initial = widths.value
+    const changes = resizeWidths(
+      column,
+      edge.neighbor,
+      initial,
+      value,
+      minimumTotalWidth(),
+      maximumWidth(column, initial),
+    )
+    if (Object.entries(changes).every(([key, width]) => Math.abs(width - initial[key]!) < 0.01))
+      return
+    models.columnWidths.value = {
+      ...models.columnWidths.value,
+      ...(props.resizeMode === 'expand' ? initial : {}),
+      ...changes,
+    }
+  }
+  watch(
+    () => [
+      ctl.blocked.value,
+      props.resizeMode,
+      ctl.visibleColumns.value
+        .map(column =>
+          [column.key, column.pin, column.minWidth, column.maxWidth, column.resizable].join(':'),
+        )
+        .join('|'),
+    ],
+    () => release?.(),
+  )
+  onScopeDispose(() => release?.())
+  return {
+    resizing,
+    guide,
+    boundary,
+    bounds,
+    canResize,
+    resizeLabel,
+    resizeValueText,
+    resize,
+    resizeKey,
+    setWidth,
+  }
+}

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

@@ -0,0 +1,72 @@
+import { computed, onScopeDispose, shallowRef, watch, type CSSProperties, type Ref } from 'vue'
+import { useEventListener } from '@vueuse/core'
+import type { DataTableColumn } from '../types'
+
+export function useTableResizeHandles<T extends object>(
+  element: Ref<HTMLTableElement | undefined>,
+  viewport: Ref<HTMLElement | undefined>,
+  columns: Ref<DataTableColumn<T>[]>,
+  widths: Ref<Record<string, number>>,
+) {
+  const positions = shallowRef<Record<string, { inset: number; visible: boolean }>>({})
+  let frame = 0
+  function update() {
+    const table = element.value
+    const area = viewport.value
+    if (!table || !area) return
+    const box = area.getBoundingClientRect()
+    const scale = box.width / area.clientWidth || 1
+    const rtl = getComputedStyle(table).direction === 'rtl'
+    const cells = new Map(
+      [...table.querySelectorAll<HTMLElement>('thead [data-hn-column]')].map(cell => [
+        cell.dataset.hnColumn!,
+        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,
+      }
+    }
+    if (JSON.stringify(next) !== JSON.stringify(positions.value)) positions.value = next
+  }
+  function schedule() {
+    cancelAnimationFrame(frame)
+    frame = requestAnimationFrame(update)
+  }
+  useEventListener(viewport, 'scroll', schedule, { passive: true })
+  watch([element, viewport, columns, widths], update, { flush: 'post' })
+  onScopeDispose(() => cancelAnimationFrame(frame))
+  const styles = computed(() =>
+    Object.fromEntries(
+      Object.entries(positions.value).map(([key, position]) => [
+        key,
+        {
+          '--hn-table-resize-inset': `${position.inset}px`,
+          visibility: position.visible ? 'visible' : 'hidden',
+        } satisfies CSSProperties,
+      ]),
+    ),
+  )
+  return {
+    update,
+    handleStyle: (column: DataTableColumn<T>): CSSProperties =>
+      styles.value[column.key] ?? { visibility: 'hidden' },
+    handleVisible: (column: DataTableColumn<T>) => positions.value[column.key]?.visible ?? false,
+  }
+}

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

@@ -0,0 +1,13 @@
+import { computed, shallowRef, watch, type Ref } from 'vue'
+import { useEventListener, useResizeObserver } from '@vueuse/core'
+
+export function useTableText(element: Ref<HTMLElement | undefined>, value: () => string | number) {
+  const overflow = shallowRef(false)
+  const measure = () => {
+    overflow.value = !!element.value && element.value.scrollWidth > element.value.clientWidth
+  }
+  useResizeObserver(element, measure)
+  useEventListener(() => element.value?.ownerDocument.fonts, 'loadingdone', measure)
+  watch(value, measure, { flush: 'post' })
+  return { overflow, tooltip: computed(() => (overflow.value ? String(value()) : false)) }
+}

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

@@ -0,0 +1,109 @@
+import { computed, nextTick, onScopeDispose, shallowRef, watch, type Ref } from 'vue'
+import { useVirtualizer } from '@tanstack/vue-virtual'
+import type { DataTableKey, DataTableProps } from '../types'
+import type { DataTableController } from './useDataTable'
+
+export function useTableVirtual<T extends object>(
+  props: DataTableProps<T>,
+  ctl: DataTableController<T>,
+  element: Ref<HTMLTableElement | undefined>,
+  viewport: Ref<HTMLElement | undefined>,
+  hasExpansion: () => boolean,
+  rowError: (key: DataTableKey) => string | undefined,
+) {
+  const margin = shallowRef(0)
+  let observer: ResizeObserver | undefined
+  let disposed = false
+  const entries = computed(() =>
+    ctl.rows.value.flatMap(entry => {
+      const rows = [{ id: entry.id, entry, detail: false, error: undefined as string | undefined }]
+      if (!entry.group) {
+        const error = rowError(entry.key)
+        if (error) rows.push({ id: `${entry.id}:error`, entry, detail: true, error })
+        if (entry.expanded && hasExpansion())
+          rows.push({ id: `${entry.id}:detail`, entry, detail: true, error: undefined })
+      }
+      return rows
+    }),
+  )
+  watch(element, async () => {
+    await nextTick()
+    observer?.disconnect()
+    const head = element.value?.tHead
+    if (disposed || !head || typeof ResizeObserver === 'undefined') return
+    const update = () => {
+      margin.value = head.offsetHeight + (element.value?.caption?.offsetHeight ?? 0)
+    }
+    observer = new ResizeObserver(update)
+    observer.observe(head)
+    if (element.value?.caption) observer.observe(element.value.caption)
+    update()
+  })
+  const virtualizer = useVirtualizer(
+    computed(() => ({
+      count: entries.value.length,
+      useAnimationFrameWithResizeObserver: true,
+      enabled: !!props.virtualize,
+      getScrollElement: () => viewport.value ?? null,
+      estimateSize: (index: number) =>
+        entries.value[index]?.detail && !entries.value[index]?.error
+          ? 140
+          : typeof props.virtualize === 'object'
+            ? (props.virtualize.estimateSize ?? 44)
+            : 44,
+      overscan: typeof props.virtualize === 'object' ? (props.virtualize.overscan ?? 6) : 6,
+      getItemKey: (index: number) => entries.value[index]!.id,
+      scrollMargin: margin.value,
+      scrollPaddingStart: props.stickyHeader ? margin.value : 0,
+      initialRect: { width: 0, height: 400 },
+    })),
+  )
+  const window = computed(() => virtualizer.value.getVirtualItems())
+  const visible = computed(() =>
+    props.virtualize
+      ? window.value.map(item => ({ ...entries.value[item.index]!, index: item.index }))
+      : entries.value.map((entry, index) => ({ ...entry, index })),
+  )
+  const before = computed(() =>
+    props.virtualize ? Math.max(0, (window.value[0]?.start ?? margin.value) - margin.value) : 0,
+  )
+  const after = computed(() =>
+    props.virtualize
+      ? Math.max(
+          0,
+          virtualizer.value.getTotalSize() -
+            ((window.value.at(-1)?.end ?? margin.value) - margin.value),
+        )
+      : 0,
+  )
+  function measure(element: unknown) {
+    if (props.virtualize && element instanceof HTMLElement)
+      virtualizer.value.measureElement(element)
+  }
+  ctl.api.scrollToRow = key => {
+    const index = entries.value.findIndex(
+      item => !item.detail && item.entry.key === key && !item.entry.group,
+    )
+    if (index < 0) return
+    if (props.virtualize) virtualizer.value.scrollToIndex(index, { align: 'start' })
+    else {
+      const row = element.value?.querySelector<HTMLElement>(
+        `[data-hn-row="${CSS.escape(entries.value[index]!.id)}"]`,
+      )
+      if (row && viewport.value)
+        viewport.value.scrollTop +=
+          row.getBoundingClientRect().top -
+          viewport.value.getBoundingClientRect().top -
+          (props.stickyHeader ? margin.value : 0)
+    }
+  }
+  onScopeDispose(() => {
+    disposed = true
+    observer?.disconnect()
+  })
+  return { entries, visible, before, after, measure }
+}
+
+export type DataTableRenderEntry<T extends object> = ReturnType<
+  typeof useTableVirtual<T>
+>['visible']['value'][number]

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

@@ -0,0 +1,32 @@
+import {
+  columnFilteringFeature,
+  columnGroupingFeature,
+  rowExpandingFeature,
+  createGroupedRowModel,
+  createExpandedRowModel,
+  columnVisibilityFeature,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  globalFilteringFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  tableFeatures,
+} from '@tanstack/vue-table'
+
+export const features = tableFeatures({
+  columnFilteringFeature,
+  columnVisibilityFeature,
+  columnGroupingFeature,
+  rowExpandingFeature,
+  globalFilteringFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  filteredRowModel: createFilteredRowModel(),
+  groupedRowModel: createGroupedRowModel(),
+  sortedRowModel: createSortedRowModel(),
+  expandedRowModel: createExpandedRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+})