@hina-ui/vue 1.7.0 → 1.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hina-ui/vue",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "description": "An elegant, restrained Vue 3 component library built on Reka UI and Tailwind CSS v4.",
   "keywords": [
     "vue",
@@ -41,9 +41,18 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "build": "vite build && vue-tsc -p tsconfig.build.json",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:browser": "vitest run -c vitest.browser.config.ts"
+  },
   "dependencies": {
     "@internationalized/date": "^3.12.4",
     "@lucide/vue": "^1.37.0",
+    "@tanstack/vue-table": "^9.2.4",
+    "@tanstack/vue-virtual": "^3.13.36",
     "@vueuse/core": "^12.8.2",
     "clsx": "^2.1.1",
     "motion-v": "^2.2.1",
@@ -51,7 +60,8 @@
     "reka-ui": "^2.9.10",
     "shiki": "4.0.2",
     "tailwind-merge": "^3.6.0",
-    "tailwind-variants": "^3.3.1"
+    "tailwind-variants": "^3.3.1",
+    "vue-component-type-helpers": "^3.3.11"
   },
   "peerDependencies": {
     "vue": "^3.5.0"
@@ -59,7 +69,6 @@
   "devDependencies": {
     "@floating-ui/dom": "1.7.6",
     "@tailwindcss/vite": "^4.3.0",
-    "@tanstack/vue-virtual": "^3.13.36",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vitest/browser": "^4.1.11",
     "@vitest/browser-playwright": "^4.1.11",
@@ -74,12 +83,5 @@
     "vue": "^3.5.33",
     "vue-tsc": "^3.3.1"
   },
-  "license": "MIT",
-  "scripts": {
-    "build": "vite build && vue-tsc -p tsconfig.build.json",
-    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:browser": "vitest run -c vitest.browser.config.ts"
-  }
-}
+  "license": "MIT"
+}

package/src/components/anchor/composables/useScrollSpy.ts

@@ -11,7 +11,7 @@ export interface SpyEntry {
 export function useScrollSpy(entries: () => SpyEntry[]) {
   const visible = shallowRef<ReadonlySet<string>>(new Set())
   const targets = shallowRef<Array<HTMLElement | null>>([])
-  const seen = new Set<string>()
+  const intersecting = new Set<string>()
 
   const covered = computed(() => entries().filter(entry => visible.value.has(entry.id)))
   const current = computed(() => covered.value[0]?.id)
@@ -23,18 +23,15 @@ export function useScrollSpy(entries: () => SpyEntry[]) {
   useIntersectionObserver(
     targets,
     observed => {
-      const next = new Set(visible.value)
       for (const entry of observed) {
-        if (entry.isIntersecting) {
-          seen.add(entry.target.id)
-          next.add(entry.target.id)
-        } else if (seen.has(entry.target.id)) {
-          next.delete(entry.target.id)
-        }
+        if (entry.isIntersecting && entry.intersectionRatio > 0) intersecting.add(entry.target.id)
+        else intersecting.delete(entry.target.id)
       }
-      if (next.size) visible.value = next
+      visible.value = intersecting.size
+        ? new Set(intersecting)
+        : new Set(current.value ? [current.value] : [])
     },
-    { rootMargin: '0px 0px -15% 0px' },
+    { rootMargin: '0px 0px -15% 0px', threshold: [0, Number.EPSILON] },
   )
 
   function targetOf(id: string) {
@@ -42,7 +39,7 @@ export function useScrollSpy(entries: () => SpyEntry[]) {
   }
 
   function locate() {
-    seen.clear()
+    intersecting.clear()
     targets.value = entries().map(({ id }) => targetOf(id))
   }
 

package/src/components/combobox/Combobox.vue

@@ -5,6 +5,8 @@
   import { useUiLocale } from '../../locale'
   import { X } from '@lucide/vue'
   import InputAction from '../input/InputAction.vue'
+  import IconSlot from '../button/IconSlot.vue'
+  import { buttonIconBox } from '../button/button.variants'
   import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'
   import { useFieldControl } from '../form-field/context'
   import { injectInputGroup } from '../input-group/context'
@@ -28,6 +30,7 @@
     selectedOption?: T | null
     placeholder?: string
     ignoreFilter?: boolean
+    loading?: boolean
     clearable?: boolean
     variant?: InputVariants['variant']
     size?: InputVariants['size']
@@ -84,6 +87,7 @@
         data-hn-combobox
         :data-invalid="invalid ? '' : undefined"
         :data-disabled="disabled ? '' : undefined"
+        :aria-busy="props.loading || undefined"
         :class="
           cn(
             group ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),
@@ -124,7 +128,13 @@
           :class="cn(inputAdornment(), inputIndicator())"
           @mousedown.prevent
         >
-          <DisclosureIcon :open="open" />
+          <IconSlot
+            :box-class="buttonIconBox({ size })"
+            :swapped="!!props.loading"
+            spinner-size="sm"
+          >
+            <DisclosureIcon :open="open" />
+          </IconSlot>
         </ComboboxTrigger>
       </div>
     </ComboboxAnchor>

package/src/components/data-table/DataTable.vue

@@ -0,0 +1,341 @@
+<script setup lang="ts" generic="T extends object">
+  import { computed, shallowRef, useId } from 'vue'
+  import { ChevronLeft, ChevronRight } from '@lucide/vue'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import Button from '../button/Button.vue'
+  import LoadingOverlay from '../loading-overlay/LoadingOverlay.vue'
+  import Pagination from '../pagination/Pagination.vue'
+  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import TableCell from '../table/TableCell.vue'
+  import { tableWrapper } from '../table/table.variants'
+  import DataTableHead from './DataTableHead.vue'
+  import DataTableRow from './DataTableRow.vue'
+  import DataTableDragPreview from './DataTableDragPreview.vue'
+  import Slot from './Slot'
+  import { aggregate, cssSize } from './utils'
+  import { useDataTable } from './composables/useDataTable'
+  import { useTableColumns } from './composables/useTableColumns'
+  import { useTableDrag } from './composables/useTableDrag'
+  import { useTableEditing } from './composables/useTableEditing'
+  import { useTableExport } from './composables/useTableExport'
+  import { useTableVirtual } from './composables/useTableVirtual'
+  import type {
+    DataTableEdit,
+    DataTableFilter,
+    DataTableKey,
+    DataTableProps,
+    DataTableQuery,
+    DataTableReorder,
+    DataTableSlots,
+    DataTableSort,
+  } from './types'
+
+  defineOptions({ name: 'HnDataTable' })
+  const props = withDefaults(defineProps<DataTableProps<T>>(), {
+    variant: 'primary',
+    hover: true,
+    autoResetPage: true,
+    selectChildren: true,
+    hasNextPage: undefined,
+  })
+  const slots = defineSlots<DataTableSlots<T>>()
+  const page = defineModel<number>('page', { default: 1 })
+  const pageSize = defineModel<number>('pageSize', { default: 10 })
+  const sorting = defineModel<DataTableSort[]>('sorting', { default: () => [] })
+  const filter = defineModel<string>('filter', { default: '' })
+  const columnFilters = defineModel<DataTableFilter[]>('columnFilters', { default: () => [] })
+  const grouping = defineModel<string[]>('grouping', { default: () => [] })
+  const selected = defineModel<DataTableKey[]>('selected', { default: () => [] })
+  const expanded = defineModel<DataTableKey[]>('expanded', { default: () => [] })
+  const expandedGroups = defineModel<string[]>('expandedGroups', { default: () => [] })
+  const hiddenColumns = defineModel<string[]>('hiddenColumns', { default: () => [] })
+  const columnOrder = defineModel<string[]>('columnOrder', { default: () => [] })
+  const columnWidths = defineModel<Record<string, number>>('columnWidths', { default: () => ({}) })
+  const models = {
+    page,
+    pageSize,
+    sorting,
+    filter,
+    columnFilters,
+    grouping,
+    selected,
+    expanded,
+    expandedGroups,
+    hiddenColumns,
+    columnOrder,
+    columnWidths,
+  }
+  const emit = defineEmits<{
+    change: [query: DataTableQuery]
+    rowClick: [row: T, event: MouseEvent | KeyboardEvent]
+    rowReorder: [change: DataTableReorder<T>]
+    'update:rows': [rows: T[]]
+    edit: [edit: DataTableEdit<T>]
+    editError: [error: unknown, edit: DataTableEdit<T>]
+    rowContextmenu: [row: T, event: MouseEvent]
+  }>()
+  function onRowContextmenu(row: T, event: MouseEvent) {
+    emit('rowContextmenu', row, event)
+  }
+  const t = useUiLocale()
+  const name = useId()
+  const area = shallowRef<InstanceType<typeof ScrollArea>>()
+  const element = shallowRef<HTMLTableElement>()
+  const viewport = computed(() => area.value?.viewport)
+  const ctl = useDataTable(
+    props,
+    models,
+    query => emit('change', query),
+    (row, event) => emit('rowClick', row, event),
+  )
+  const controls = computed(() =>
+    [
+      props.reorderable && 'drag',
+      props.selectable && 'select',
+      (props.expandable || props.getChildren) && 'expand',
+    ].filter((value): value is string => typeof value === 'string'),
+  )
+  const trailing = computed(() => (props.editMode === 'row' ? 1 : 0))
+  const layout = useTableColumns(
+    props,
+    models,
+    ctl,
+    element,
+    viewport,
+    computed(() => controls.value.length),
+    trailing,
+  )
+  const editing = useTableEditing(
+    props,
+    ctl,
+    edit => emit('edit', edit),
+    (error, edit) => emit('editError', error, edit),
+    element,
+  )
+  const drag = useTableDrag(props, models, ctl, element, viewport, change => {
+    if (!change.parent) emit('update:rows', change.rows)
+    emit('rowReorder', change)
+  })
+  const virtual = useTableVirtual(
+    props,
+    ctl,
+    element,
+    viewport,
+    () => !!slots.expansion,
+    editing.rowError,
+  )
+  useTableExport(ctl)
+  const colspan = computed(() =>
+    Math.max(1, ctl.visibleColumns.value.length + controls.value.length + trailing.value),
+  )
+  const summaryRows = computed(() => ctl.api.getRows('filtered'))
+  const hasSummary = computed(
+    () =>
+      !!slots.summary ||
+      ctl.visibleColumns.value.some(
+        column => column.footer !== undefined || slots[`footer-${column.key}`],
+      ),
+  )
+  defineExpose({ viewport, element, state: ctl.state, api: ctl.api })
+</script>
+<template>
+  <div
+    :aria-busy="props.loading || undefined"
+    :style="{ height: cssSize(props.height) }"
+    :class="
+      cn(
+        'flex min-h-0 min-w-0 w-full max-w-full flex-col gap-3',
+        props.fill && 'h-full',
+        props.class,
+      )
+    "
+  >
+    <slot name="toolbar" v-bind="ctl.state.value" />
+    <div :class="['relative min-h-0', (props.fill || props.height) && 'flex-1']">
+      <ScrollArea
+        ref="area"
+        :direction="
+          props.stickyHeader || props.maxHeight || props.height || props.fill || props.virtualize
+            ? 'both'
+            : 'horizontal'
+        "
+        :style="{
+          maxHeight: cssSize(
+            props.maxHeight ?? (props.virtualize && !props.fill && !props.height ? 400 : undefined),
+          ),
+        }"
+        :class="
+          cn(
+            tableWrapper({ variant: props.variant, hover: false }),
+            layout.constrained.value && '@container',
+            (props.fill || props.height) && 'h-full',
+            props.stickyHeader && '[&_thead_th]:sticky [&_thead_th]:z-[3]',
+            props.stickyFooter &&
+              '[&_tfoot_td]:sticky [&_tfoot_td]:bottom-0 [&_tfoot_td]:z-[2] [&_tfoot_td]:bg-(--hn-table-head-bg)',
+            props.tableClass,
+          )
+        "
+      >
+        <table
+          ref="element"
+          class="hn-table"
+          :style="layout.tableStyle.value"
+          :aria-label="props.label"
+          :aria-rowcount="
+            props.virtualize
+              ? virtual.entries.value.length + layout.headerRows.value.length + (hasSummary ? 1 : 0)
+              : undefined
+          "
+          :inert="ctl.blocked.value || undefined"
+        >
+          <caption v-if="props.caption">
+            <span>{{ props.caption }}</span>
+          </caption>
+          <colgroup>
+            <col v-for="control in controls" :key="control" style="width: 48px" />
+            <col
+              v-for="column in ctl.visibleColumns.value"
+              :key="column.key"
+              :style="{ width: layout.cellStyle(column).width }"
+            />
+            <col v-if="trailing" style="width: 72px" />
+          </colgroup>
+          <DataTableHead
+            :config="props"
+            :ctl="ctl"
+            :models="models"
+            :layout="layout"
+            :drag="drag"
+            :controls="controls"
+            :trailing="trailing"
+            :slots="slots"
+          />
+          <tbody>
+            <tr
+              v-if="
+                !ctl.rows.value.length || (!ctl.visibleColumns.value.length && !controls.length)
+              "
+            >
+              <TableCell :colspan="colspan">
+                <div class="text-muted flex min-h-32 items-center justify-center px-3 py-6 text-sm">
+                  <template v-if="props.loading">{{ t.table.loading }}</template>
+                  <template v-else-if="!ctl.visibleColumns.value.length && !controls.length">
+                    {{ t.table.noColumns }}
+                  </template>
+                  <slot v-else name="empty">{{ props.emptyText ?? t.table.empty }}</slot>
+                </div>
+              </TableCell>
+            </tr>
+            <template v-else>
+              <tr v-if="virtual.before.value" aria-hidden="true">
+                <td
+                  :colspan="colspan"
+                  :style="{ height: `${virtual.before.value}px`, padding: 0, border: 0 }"
+                />
+              </tr>
+              <DataTableRow
+                v-for="item in virtual.visible.value"
+                :key="item.id"
+                :item="item"
+                :config="props"
+                :ctl="ctl"
+                :layout="layout"
+                :drag="drag"
+                :editing="editing"
+                :slots="slots"
+                :controls="controls"
+                :colspan="colspan"
+                :name="name"
+                :measure="virtual.measure"
+                @row-contextmenu="onRowContextmenu"
+              />
+              <tr v-if="virtual.after.value" aria-hidden="true">
+                <td
+                  :colspan="colspan"
+                  :style="{ height: `${virtual.after.value}px`, padding: 0, border: 0 }"
+                />
+              </tr>
+            </template>
+          </tbody>
+          <tfoot v-if="hasSummary">
+            <Slot :render="slots.summary" :context="ctl.state.value">
+              <tr>
+                <TableCell
+                  v-for="(control, index) in controls"
+                  :key="control"
+                  :style="layout.controlStyle('start', index)"
+                />
+                <TableCell
+                  v-for="column in ctl.visibleColumns.value"
+                  :key="column.key"
+                  :style="layout.cellStyle(column)"
+                  :align="column.align"
+                  class="font-medium"
+                >
+                  <Slot
+                    :render="slots[`footer-${column.key}`]"
+                    :context="{ column, rows: summaryRows }"
+                  >
+                    {{
+                      typeof column.footer === 'function'
+                        ? column.footer(summaryRows)
+                        : column.footer === true
+                          ? aggregate(summaryRows, column, ctl.valueOf)
+                          : column.footer
+                    }}
+                  </Slot>
+                </TableCell>
+                <TableCell v-if="trailing" :style="layout.controlStyle('end', 0)" />
+              </tr>
+            </Slot>
+          </tfoot>
+        </table>
+      </ScrollArea>
+      <LoadingOverlay :visible="props.loading" :text="t.table.loading" class="rounded-lg">
+        <template v-if="slots.loading" #default><slot name="loading" /></template>
+      </LoadingOverlay>
+    </div>
+    <slot name="footer" v-bind="ctl.state.value">
+      <Pagination
+        v-if="props.pagination && ctl.knownTotal.value"
+        :model-value="ctl.page.value"
+        :page-size="ctl.pageSize.value"
+        :total="ctl.total.value"
+        :item-count="ctl.api.getRows().length"
+        :pending="props.loading"
+        :disabled="props.disabled"
+        @update:model-value="models.page.value = $event"
+        @update:page-size="models.pageSize.value = $event"
+      />
+      <nav
+        v-else-if="props.pagination"
+        class="flex items-center gap-2"
+        :aria-label="t.pagination.navLabel"
+      >
+        <Button
+          variant="ghost"
+          size="sm"
+          icon-only
+          :disabled="ctl.blocked.value || ctl.page.value <= 1"
+          :aria-label="t.pagination.prev"
+          @click="models.page.value--"
+        >
+          <ChevronLeft class="rtl:rotate-180" />
+        </Button>
+        <span class="text-muted text-sm tabular-nums">{{ ctl.page.value }}</span>
+        <Button
+          variant="ghost"
+          size="sm"
+          icon-only
+          :disabled="ctl.blocked.value || !ctl.canNext.value"
+          :aria-label="t.pagination.next"
+          @click="models.page.value++"
+        >
+          <ChevronRight class="rtl:rotate-180" />
+        </Button>
+      </nav>
+    </slot>
+    <DataTableDragPreview :drag="drag" :layout="layout" />
+  </div>
+</template>

package/src/components/data-table/DataTableAction.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+  import Spinner from '../spinner/Spinner.vue'
+  defineProps<{ disabled?: boolean; loading?: boolean }>()
+</script>
+<template>
+  <button
+    type="button"
+    class="hn-table-action hn-focus-ring"
+    :disabled="disabled || loading"
+    :aria-busy="loading || undefined"
+  >
+    <Spinner v-if="loading" size="sm" />
+    <slot v-else />
+  </button>
+</template>

package/src/components/data-table/DataTableDragPreview.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts" generic="T extends object">
+  import { DialogPortal } from 'reka-ui'
+  import type { DataTableDrag } from './composables/useTableDrag'
+  import type { DataTableLayout } from './composables/useTableColumns'
+  defineProps<{ drag: DataTableDrag<T>; layout: DataTableLayout<T> }>()
+</script>
+<template>
+  <DialogPortal>
+    <div
+      v-if="layout.guide.value"
+      class="hn-table-drop-line"
+      aria-hidden="true"
+      data-hn-resize-guide
+      :style="{
+        left: `${layout.guide.value.x}px`,
+        top: `${layout.guide.value.y}px`,
+        height: `${layout.guide.value.height}px`,
+        width: '2px',
+      }"
+    />
+    <div
+      v-if="layout.guide.value"
+      class="hn-table-resize-label"
+      data-hn-resize-label
+      aria-hidden="true"
+      :style="{
+        left: `${layout.guide.value.labelX}px`,
+        top: `${Math.max(4, layout.guide.value.y - 12 - layout.guide.value.columns.length * 18)}px`,
+      }"
+    >
+      <div v-for="column in layout.guide.value.columns" :key="column.key">
+        <span>{{ column.label }}</span>
+        <span>{{ column.width }}px</span>
+      </div>
+    </div>
+    <template v-if="drag.dragging.value">
+      <div
+        v-if="drag.dragging.value.marker"
+        class="hn-table-drop-line"
+        aria-hidden="true"
+        data-hn-drop-line
+        :style="{
+          left: `${drag.dragging.value.marker.x}px`,
+          top: `${drag.dragging.value.marker.y}px`,
+          width: `${drag.dragging.value.marker.width}px`,
+          height: `${drag.dragging.value.marker.height}px`,
+        }"
+      />
+      <div
+        class="hn-table-drag-preview"
+        aria-hidden="true"
+        data-hn-drag-preview
+        :style="{
+          ...drag.dragging.value.appearance,
+          left: `${drag.dragging.value.x - drag.dragging.value.offsetX}px`,
+          top: `${drag.dragging.value.y - drag.dragging.value.offsetY}px`,
+          width:
+            drag.dragging.value.kind === 'column' ? `${drag.dragging.value.width}px` : undefined,
+        }"
+      >
+        <div class="hn-table-drag-label">{{ drag.dragging.value.label }}</div>
+        <div
+          v-for="(sample, index) in drag.dragging.value.samples"
+          :key="index"
+          class="hn-table-drag-cell"
+        >
+          {{ sample }}
+        </div>
+      </div>
+    </template>
+  </DialogPortal>
+</template>

package/src/components/data-table/DataTableEditor.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts" generic="T extends object">
+  import { useId } from 'vue'
+  import { Check, X } from '@lucide/vue'
+  import { useUiLocale } from '../../locale'
+  import Input from '../input/Input.vue'
+  import InputGroup from '../input-group/InputGroup.vue'
+  import DataTableAction from './DataTableAction.vue'
+  import Slot from './Slot'
+  import type { DataTableEditorContext, DataTableSlots } from './types'
+  defineProps<{ context: DataTableEditorContext<T>; slots: DataTableSlots<T>; cell: boolean }>()
+  const t = useUiLocale()
+  const errorId = useId()
+</script>
+<template>
+  <div class="hn-table-editor" @click.stop @keydown.stop>
+    <div class="hn-table-editor-control">
+      <InputGroup
+        variant="bare"
+        size="sm"
+        :disabled="context.pending"
+        :invalid="!!context.error"
+        class="hn-table-editor-field"
+        role="group"
+        :aria-label="`${t.table.edit}: ${context.column.label}`"
+        :aria-describedby="context.error ? errorId : undefined"
+      >
+        <Slot :render="slots[`editor-${context.column.key}`] ?? slots.editor" :context="context">
+          <Input
+            :model-value="String(context.value ?? '')"
+            :aria-label="`${t.table.edit}: ${context.column.label}`"
+            :aria-describedby="context.error ? errorId : undefined"
+            @update:model-value="context.updateValue"
+            @keydown.enter.prevent="context.commit"
+            @keydown.esc.prevent="context.cancel"
+          />
+        </Slot>
+      </InputGroup>
+      <template v-if="cell">
+        <DataTableAction
+          :loading="context.pending"
+          :aria-label="t.table.save"
+          @click="context.commit"
+        >
+          <Check />
+        </DataTableAction>
+        <DataTableAction
+          :disabled="context.pending"
+          :aria-label="t.table.cancel"
+          @click="context.cancel"
+        >
+          <X />
+        </DataTableAction>
+      </template>
+    </div>
+    <p v-if="context.error" :id="errorId" role="alert" class="hn-table-field-error">
+      {{ context.error }}
+    </p>
+  </div>
+</template>