@hina-ui/vue 1.7.2 → 1.7.4

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

@@ -28,47 +28,66 @@ export function useTableColumns<T extends object>(
   const heights = shallowRef<number[]>([])
   const available = shallowRef(0)
   const active = shallowRef<Record<string, number>>()
+  const constrained = computed(
+    () =>
+      props.layout === 'fixed' ||
+      props.resizable ||
+      !!props.virtualize ||
+      ctl.visibleColumns.value.some(column => column.truncate || column.maxWidth !== undefined) ||
+      Object.keys(models.columnWidths.value).length > 0,
+  )
   let observer: ResizeObserver | undefined
   let disposed = false
   let frame = 0
   watch(
-    [element, viewport, ctl.visibleColumns],
-    async () => {
+    [element, viewport, ctl.visibleColumns, constrained, () => props.stickyHeader],
+    async (_, __, onCleanup) => {
+      let cancelled = false
+      onCleanup(() => {
+        cancelled = true
+      })
       await nextTick()
+      if (cancelled) return
       observer?.disconnect()
       cancelAnimationFrame(frame)
+      frame = 0
       if (disposed || !element.value || typeof ResizeObserver === 'undefined') return
-      const update = () => {
-        available.value = viewport.value?.clientWidth ?? 0
-        const next: Record<string, number> = {}
-        element.value?.querySelectorAll<HTMLElement>('thead [data-hn-column]').forEach(cell => {
-          next[cell.dataset.hnColumn!] = cell.getBoundingClientRect().width
-        })
-        if (JSON.stringify(next) !== JSON.stringify(measured.value)) measured.value = next
-        const rows = [...(element.value?.querySelectorAll('thead tr') ?? [])].map(
-          row => row.getBoundingClientRect().height,
-        )
-        if (JSON.stringify(rows) !== JSON.stringify(heights.value)) heights.value = rows
-        handles.update()
-      }
-      observer = new ResizeObserver(() => {
-        cancelAnimationFrame(frame)
-        frame = requestAnimationFrame(update)
+      const rows = props.stickyHeader ? [...element.value.querySelectorAll('thead tr')] : []
+      const next = { ...measured.value }
+      const sizes = [...heights.value]
+      let areaWidth = available.value
+      observer = new ResizeObserver(entries => {
+        for (const entry of entries) {
+          if (entry.target === viewport.value) areaWidth = viewport.value.clientWidth
+          const key = (entry.target as HTMLElement).dataset.hnColumn
+          if (key !== undefined)
+            next[key] =
+              entry.borderBoxSize[0]?.inlineSize ?? entry.target.getBoundingClientRect().width
+          const index = rows.indexOf(entry.target as HTMLTableRowElement)
+          if (index >= 0)
+            sizes[index] =
+              entry.borderBoxSize[0]?.blockSize ?? entry.target.getBoundingClientRect().height
+        }
+        // Publish cached sizes outside the observer delivery to avoid resize feedback loops.
+        if (!frame)
+          frame = requestAnimationFrame(() => {
+            frame = 0
+            available.value = areaWidth
+            if (JSON.stringify(next) !== JSON.stringify(measured.value))
+              measured.value = { ...next }
+            if (JSON.stringify(sizes) !== JSON.stringify(heights.value)) heights.value = [...sizes]
+          })
       })
-      element.value.querySelectorAll('thead th, thead tr').forEach(cell => observer!.observe(cell))
+      if (!constrained.value)
+        element.value
+          .querySelectorAll('thead [data-hn-column]')
+          .forEach(cell => observer!.observe(cell, { box: 'border-box' }))
+      rows.forEach(row => observer!.observe(row, { box: 'border-box' }))
       if (viewport.value) observer.observe(viewport.value)
-      update()
+      available.value = viewport.value?.clientWidth ?? 0
     },
     { flush: 'post' },
   )
-  const constrained = computed(
-    () =>
-      props.layout === 'fixed' ||
-      props.resizable ||
-      !!props.virtualize ||
-      ctl.visibleColumns.value.some(column => column.truncate || column.maxWidth !== undefined) ||
-      Object.keys(models.columnWidths.value).length > 0,
-  )
   const availableColumnsWidth = computed(
     () => available.value - leading.value * 48 - trailing.value * 72,
   )
@@ -81,7 +100,12 @@ export function useTableColumns<T extends object>(
         availableColumnsWidth.value,
       ),
   )
-  const handles = useTableResizeHandles(element, viewport, ctl.visibleColumns, widths)
+  const handles = useTableResizeHandles(
+    element,
+    viewport,
+    ctl.visibleColumns,
+    () => !!props.resizable,
+  )
   const resizing = useTableResize(
     props,
     models,
@@ -91,6 +115,7 @@ export function useTableColumns<T extends object>(
     widths,
     active,
     availableColumnsWidth,
+    handles.update,
   )
   const widthVariable = (column: DataTableColumn<T>) =>
     `var(--hn-table-column-${ctl.visibleColumns.value.findIndex(item => item.key === column.key)})`
@@ -99,8 +124,11 @@ export function useTableColumns<T extends object>(
       ? widths.value[column.key]!
       : (measured.value[column.key] ?? pixelWidth(column.width, 160))
   }
-  function specifiedWidth(column: DataTableColumn<T>) {
-    return constrained.value ? widthVariable(column) : column.width
+  const fixedWidths = computed(() =>
+    allocateWidths(ctl.visibleColumns.value, active.value ?? models.columnWidths.value, 0),
+  )
+  function columnStyle(column: DataTableColumn<T>): CSSProperties {
+    return { width: cssSize(constrained.value ? widthVariable(column) : column.width) }
   }
   function pinStyle(column: DataTableColumn<T>, head = false): CSSProperties {
     if (!column.pin) return {}
@@ -108,9 +136,10 @@ export function useTableColumns<T extends object>(
     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 = constrained.value
-      ? `calc(${controls}px${preceding.map(column => ` + ${widthVariable(column)}`).join('')})`
-      : `${preceding.reduce((sum, column) => sum + width(column), controls)}px`
+    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,
@@ -121,9 +150,13 @@ export function useTableColumns<T extends object>(
   }
   function cellStyle(column: DataTableColumn<T>, head = false): CSSProperties {
     return {
-      width: cssSize(specifiedWidth(column)),
-      minWidth: cssSize(column.minWidth ?? specifiedWidth(column)),
-      maxWidth: cssSize(column.maxWidth),
+      ...(constrained.value
+        ? {}
+        : {
+            width: cssSize(column.width),
+            minWidth: cssSize(column.minWidth ?? column.width),
+            maxWidth: cssSize(column.maxWidth),
+          }),
       ...pinStyle(column, head),
     }
   }
@@ -197,16 +230,25 @@ export function useTableColumns<T extends object>(
       return result
     })
   })
-  const tableStyle = computed<CSSProperties>(() => ({
-    '--hn-table-viewport-width': available.value ? `${available.value}px` : undefined,
-    tableLayout: constrained.value ? 'fixed' : 'auto',
-    ...(constrained.value
+  const sizing = computed<CSSProperties>(() =>
+    constrained.value
       ? columnSizingStyles(
           ctl.visibleColumns.value,
           active.value ?? models.columnWidths.value,
           leading.value * 48 + trailing.value * 72,
         )
-      : {}),
+      : {},
+  )
+  const tableStyle = computed<CSSProperties>(() => ({
+    tableLayout: constrained.value ? 'fixed' : 'auto',
+    width: sizing.value.width,
+  }))
+  const columnStyles = computed<CSSProperties>(() => {
+    const { width: _, ...styles } = sizing.value
+    return styles
+  })
+  const errorStyle = computed<CSSProperties>(() => ({
+    '--hn-table-viewport-width': available.value ? `${available.value}px` : undefined,
   }))
   function moveColumn(key: string, target: string) {
     if (ctl.blocked.value || key === target) return
@@ -240,6 +282,9 @@ export function useTableColumns<T extends object>(
     constrained,
     headerRows,
     tableStyle,
+    columnStyles,
+    columnStyle,
+    errorStyle,
     cellStyle,
     controlStyle,
     ...resizing,

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

@@ -12,6 +12,7 @@ export function useTableResize<T extends object>(
   widths: Ref<Record<string, number>>,
   active: Ref<Record<string, number> | undefined>,
   available: Ref<number>,
+  updateHandles: () => void,
 ) {
   const resizing = shallowRef<string>()
   const guide = shallowRef<{
@@ -60,8 +61,9 @@ export function useTableResize<T extends object>(
       maximumWidth(column, widths.value),
     )
   const canResize = (column: DataTableColumn<T>) => {
+    if (!props.resizable || !boundary(column)) return false
     const range = bounds(column)
-    return props.resizable && !!boundary(column) && range.max - range.min > 0.01
+    return range.max - range.min > 0.01
   }
   function setWidth(key: string, value: number) {
     if (ctl.blocked.value || !Number.isFinite(value)) return
@@ -118,7 +120,10 @@ export function useTableResize<T extends object>(
     let moved = false
     let frame = 0
     let stopped = false
-    const updateGuide = () => {
+    const updateGuide = async () => {
+      if (stopped) return
+      updateHandles()
+      await nextTick()
       if (stopped) return
       const rect = cell.getBoundingClientRect()
       const area = viewport.value?.getBoundingClientRect()

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

@@ -1,4 +1,12 @@
-import { computed, onScopeDispose, shallowRef, watch, type CSSProperties, type Ref } from 'vue'
+import {
+  computed,
+  nextTick,
+  onScopeDispose,
+  shallowRef,
+  watch,
+  type CSSProperties,
+  type Ref,
+} from 'vue'
 import { useEventListener } from '@vueuse/core'
 import type { DataTableColumn } from '../types'
 
@@ -6,11 +14,15 @@ export function useTableResizeHandles<T extends object>(
   element: Ref<HTMLTableElement | undefined>,
   viewport: Ref<HTMLElement | undefined>,
   columns: Ref<DataTableColumn<T>[]>,
-  widths: Ref<Record<string, number>>,
+  enabled: () => boolean,
 ) {
   const positions = shallowRef<Record<string, { inset: number; visible: boolean }>>({})
   let frame = 0
+  let observer: ResizeObserver | undefined
   function update() {
+    cancelAnimationFrame(frame)
+    frame = 0
+    if (!enabled()) return
     const table = element.value
     const area = viewport.value
     if (!table || !area) return
@@ -46,12 +58,37 @@ export function useTableResizeHandles<T extends object>(
     if (JSON.stringify(next) !== JSON.stringify(positions.value)) positions.value = next
   }
   function schedule() {
+    if (!enabled()) return
     cancelAnimationFrame(frame)
     frame = requestAnimationFrame(update)
   }
   useEventListener(viewport, 'scroll', schedule, { passive: true })
-  watch([element, viewport, columns, widths], update, { flush: 'post' })
-  onScopeDispose(() => cancelAnimationFrame(frame))
+  watch(
+    [element, viewport, columns, enabled],
+    async (_, __, onCleanup) => {
+      let cancelled = false
+      onCleanup(() => {
+        cancelled = true
+      })
+      await nextTick()
+      if (cancelled) return
+      observer?.disconnect()
+      cancelAnimationFrame(frame)
+      frame = 0
+      if (!enabled() || !element.value || !viewport.value || typeof ResizeObserver === 'undefined')
+        return
+      observer = new ResizeObserver(update)
+      observer.observe(viewport.value)
+      element.value
+        .querySelectorAll('thead [data-hn-column]')
+        .forEach(cell => observer!.observe(cell, { box: 'border-box' }))
+    },
+    { flush: 'post' },
+  )
+  onScopeDispose(() => {
+    cancelAnimationFrame(frame)
+    observer?.disconnect()
+  })
   const styles = computed(() =>
     Object.fromEntries(
       Object.entries(positions.value).map(([key, position]) => [

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

@@ -1,5 +1,5 @@
 import { computed, nextTick, onScopeDispose, shallowRef, watch, type Ref } from 'vue'
-import { useVirtualizer } from '@tanstack/vue-virtual'
+import { useVirtualWindow, virtualFlow } from '../../../lib/virtual/useVirtualWindow'
 import type { DataTableKey, DataTableProps } from '../types'
 import type { DataTableController } from './useDataTable'
 
@@ -26,23 +26,41 @@ export function useTableVirtual<T extends object>(
       return rows
     }),
   )
-  watch(element, async () => {
+  watch([element, () => !!props.virtualize || !!props.stickyHeader], async (_, __, onCleanup) => {
+    let cancelled = false
+    onCleanup(() => {
+      cancelled = true
+    })
     await nextTick()
+    if (cancelled) return
     observer?.disconnect()
+    if (!props.virtualize && !props.stickyHeader) {
+      margin.value = 0
+      return
+    }
     const head = element.value?.tHead
     if (disposed || !head || typeof ResizeObserver === 'undefined') return
+    const caption = element.value?.caption
+    const sizes = new Map<Element, number>([[head, head.offsetHeight]])
+    if (caption) sizes.set(caption, caption.offsetHeight)
     const update = () => {
-      margin.value = head.offsetHeight + (element.value?.caption?.offsetHeight ?? 0)
+      margin.value = [...sizes.values()].reduce((sum, size) => sum + size, 0)
     }
-    observer = new ResizeObserver(update)
-    observer.observe(head)
-    if (element.value?.caption) observer.observe(element.value.caption)
+    observer = new ResizeObserver(entries => {
+      for (const entry of entries)
+        sizes.set(
+          entry.target,
+          entry.borderBoxSize[0]?.blockSize ?? (entry.target as HTMLElement).offsetHeight,
+        )
+      update()
+    })
+    observer.observe(head, { box: 'border-box' })
+    if (caption) observer.observe(caption, { box: 'border-box' })
     update()
   })
-  const virtualizer = useVirtualizer(
+  const virtualizer = useVirtualWindow(
     computed(() => ({
       count: entries.value.length,
-      useAnimationFrameWithResizeObserver: true,
       enabled: !!props.virtualize,
       getScrollElement: () => viewport.value ?? null,
       estimateSize: (index: number) =>
@@ -64,19 +82,16 @@ export function useTableVirtual<T extends object>(
       ? 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,
+  const flow = computed(() =>
+    virtualFlow(window.value, virtualizer.value.getTotalSize(), margin.value),
   )
+  const before = computed(() => (props.virtualize ? flow.value.before : 0))
+  const after = computed(() => (props.virtualize ? flow.value.after : 0))
   function measure(element: unknown) {
+    if (element === null) {
+      virtualizer.value.measureElement(null)
+      return
+    }
     if (props.virtualize && element instanceof HTMLElement)
       virtualizer.value.measureElement(element)
   }

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

@@ -1,3 +1,4 @@
+import type { VirtualizeOptions } from '../../lib/virtual/types'
 import type { CSSProperties } from 'vue'
 import type { TableVariants } from '../table/table.variants'
 
@@ -100,7 +101,7 @@ export interface DataTableProps<T> {
   resizeMode?: 'fit' | 'expand'
   reorderColumns?: boolean
   reorderable?: boolean | ((row: T) => boolean)
-  virtualize?: boolean | { estimateSize?: number; overscan?: number }
+  virtualize?: VirtualizeOptions
   editMode?: 'cell' | 'row'
   onSave?: (edit: DataTableEdit<T>) => void | Promise<void>
   loading?: boolean

package/src/components/date-field/date-field.variants.ts

@@ -1,33 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const dateFieldHost = tv({
-  base: 'data-disabled:cursor-not-allowed data-disabled:opacity-50',
-})
-
-export const dateFieldControl = tv({
-  base: 'flex h-full min-w-0 flex-1 items-center px-[var(--hn-input-px)] tabular-nums select-none',
-  variants: {
-    leading: {
-      true: 'ps-0',
-    },
-    trailing: {
-      true: 'pe-0',
-    },
-  },
-})
-
-export const dateFieldSegment = tv({
-  base: 'hn-transition rounded-xs outline-none',
-  variants: {
-    part: {
-      literal: 'text-faint px-px',
-      editable: [
-        'px-0.5 focus:bg-accent-soft focus:text-accent-text',
-        'data-placeholder:text-faint data-placeholder:font-normal data-disabled:cursor-not-allowed',
-      ],
-    },
-  },
-  defaultVariants: { part: 'editable' },
-})
-
-export type DateFieldVariants = VariantProps<typeof dateFieldSegment>
+export * from '../../../../shared/src/variants/date-field'

package/src/components/date-picker/date-picker.variants.ts

@@ -1,5 +1 @@
-import { tv } from '../../lib/tv'
-
-export const datePickerContent = tv({
-  base: 'hn-anim-pop z-(--hn-z-overlay) p-2 shadow-md outline-none',
-})
+export * from '../../../../shared/src/variants/date-picker'

package/src/components/date-range-field/date-range-field.variants.ts

@@ -1,5 +1 @@
-import { tv } from '../../lib/tv'
-
-export const dateRangeFieldSeparator = tv({
-  base: 'text-faint shrink-0 px-1 select-none',
-})
+export * from '../../../../shared/src/variants/date-range-field'

package/src/components/date-time-picker/date-time-picker.variants.ts

@@ -1,5 +1 @@
-import { tv } from '../../lib/tv'
-
-export const dateTimePickerFooter = tv({
-  base: 'mt-2 flex items-center justify-between gap-2',
-})
+export * from '../../../../shared/src/variants/date-time-picker'

package/src/components/dialog/dialog.variants.ts

@@ -1,38 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const dialogWrapper = tv({
-  base: 'pointer-events-none fixed inset-0 z-(--hn-z-overlay) grid',
-  variants: {
-    placement: {
-      center: 'place-items-center p-4',
-      top: 'items-start justify-items-center p-4',
-      bottom: 'items-end justify-items-center p-4',
-      auto: 'place-items-center p-4 max-sm:items-end max-sm:justify-items-stretch',
-    },
-  },
-  defaultVariants: { placement: 'auto' },
-})
-
-export const dialogCard = tv({
-  base: 'pointer-events-auto flex w-full flex-col shadow-lg outline-none',
-  variants: {
-    padded: { true: 'gap-4 py-(--hn-panel-p)' },
-    fitViewport: { true: 'max-h-[calc(100dvh-2rem)]' },
-    placement: {
-      center: 'hn-anim-modal',
-      top: 'hn-anim-sheet-top',
-      bottom: 'hn-anim-sheet-bottom',
-      auto: 'hn-anim-modal max-sm:hn-anim-sheet-bottom max-sm:max-w-none',
-    },
-    size: {
-      sm: 'max-w-sm',
-      md: 'max-w-md',
-      lg: 'max-w-xl',
-      xl: 'max-w-2xl',
-      '2xl': 'max-w-4xl',
-    },
-  },
-  defaultVariants: { placement: 'auto', size: 'md', padded: true },
-})
-
-export type DialogVariants = VariantProps<typeof dialogCard>
+export * from '../../../../shared/src/variants/dialog'

package/src/components/disclosure-icon/disclosure-icon.variants.ts

@@ -1,25 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const disclosureIcon = tv({
-  base: 'hn-transition shrink-0',
-  variants: {
-    direction: {
-      down: '',
-      end: '',
-    },
-    state: {
-      auto: '',
-      open: '',
-      closed: '',
-    },
-  },
-  compoundVariants: [
-    { direction: 'down', state: 'auto', class: 'group-data-open/hn-disclosure:rotate-180' },
-    { direction: 'end', state: 'auto', class: 'group-data-open/hn-disclosure:rotate-90' },
-    { direction: 'down', state: 'open', class: 'rotate-180' },
-    { direction: 'end', state: 'open', class: 'rotate-90' },
-  ],
-  defaultVariants: { direction: 'down', state: 'auto' },
-})
-
-export type DisclosureIconVariants = VariantProps<typeof disclosureIcon>
+export * from '../../../../shared/src/variants/disclosure-icon'

package/src/components/drawer/drawer.variants.ts

@@ -1,23 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const drawerCard = tv({
-  base: [
-    'hn-anim-drawer pointer-events-auto fixed inset-y-0 z-(--hn-z-overlay) flex flex-col',
-    'max-w-[calc(100vw-3rem)] rounded-none shadow-lg outline-none',
-  ],
-  variants: {
-    padded: { true: 'gap-4 py-(--hn-panel-p)' },
-    side: {
-      start: 'start-0',
-      end: 'end-0',
-    },
-    size: {
-      sm: 'w-72',
-      md: 'w-90',
-      lg: 'w-120',
-    },
-  },
-  defaultVariants: { side: 'end', size: 'md', padded: true },
-})
-
-export type DrawerVariants = VariantProps<typeof drawerCard>
+export * from '../../../../shared/src/variants/drawer'

package/src/components/dropdown-menu/dropdown-menu.variants.ts

@@ -1,19 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const dropdownItem = tv({
-  base: [
-    'hn-interactive hn-state-layer hn-press-none relative isolate flex w-full cursor-pointer',
-    'items-center gap-[var(--hn-control-gap)] rounded-md px-2.5 py-2 text-start text-sm select-none',
-    'outline-none [&_svg]:size-4 [&_svg]:shrink-0',
-    'data-disabled:pointer-events-none data-disabled:opacity-50',
-  ],
-  variants: {
-    tone: {
-      neutral: 'text-fg',
-      danger: 'text-danger-text [--hn-state-color:var(--hn-danger)]',
-    },
-  },
-  defaultVariants: { tone: 'neutral' },
-})
-
-export type DropdownItemVariants = VariantProps<typeof dropdownItem>
+export * from '../../../../shared/src/variants/dropdown-menu'