@hina-ui/vue 1.6.0 → 1.7.1

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

@@ -0,0 +1,340 @@
+<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 }),
+            (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>

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

@@ -0,0 +1,181 @@
+<script setup lang="ts" generic="T extends object">
+  import { ArrowDown, ArrowUp, ChevronsUpDown } from '@lucide/vue'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import Checkbox from '../checkbox/Checkbox.vue'
+  import { vTooltip } from '../tooltip/directive'
+  import TableHead from '../table/TableHead.vue'
+  import Slot from './Slot'
+  import type { DataTableProps, DataTableSlots } from './types'
+  import type { DataTableController, DataTableModels } from './composables/useDataTable'
+  import type { DataTableLayout } from './composables/useTableColumns'
+  import type { DataTableDrag } from './composables/useTableDrag'
+  defineProps<{
+    config: DataTableProps<T>
+    ctl: DataTableController<T>
+    models: DataTableModels
+    layout: DataTableLayout<T>
+    drag: DataTableDrag<T>
+    controls: string[]
+    trailing: number
+    slots: DataTableSlots<T>
+  }>()
+  const t = useUiLocale()
+</script>
+<template>
+  <thead>
+    <tr v-for="(headers, level) in layout.headerRows.value" :key="level">
+      <template v-if="level === 0">
+        <TableHead
+          v-for="(control, index) in controls"
+          :key="control"
+          :rowspan="layout.headerRows.value.length"
+          :style="{ ...layout.controlStyle('start', index, true), top: 0 }"
+        >
+          <Checkbox
+            v-if="control === 'select' && config.selectionMode !== 'single'"
+            class="mx-auto"
+            :model-value="ctl.pageSelection.value"
+            :disabled="ctl.selectionDisabled.value"
+            :aria-label="
+              config.selectAll === 'filtered' ? t.table.selectFiltered : t.table.selectPage
+            "
+            @update:model-value="ctl.togglePage"
+          />
+          <span v-else class="sr-only">
+            {{
+              control === 'select'
+                ? t.table.selectRow
+                : control === 'drag'
+                  ? t.table.moveRow
+                  : t.table.expand
+            }}
+          </span>
+        </TableHead>
+      </template>
+      <TableHead
+        v-for="header in headers"
+        :key="header.id"
+        :data-hn-column="header.leaf ? header.column.key : undefined"
+        :scope="header.leaf ? 'col' : 'colgroup'"
+        :colspan="header.colspan"
+        :rowspan="header.rowspan"
+        :align="header.column.align"
+        :aria-sort="header.ariaSort"
+        :style="header.style"
+        :class="
+          cn(
+            'hn-table-header relative',
+            header.column.headerClass,
+            drag.kind.value === 'column' && drag.key.value === header.column.key && 'opacity-40',
+          )
+        "
+        :data-reorderable="
+          header.leaf &&
+          config.reorderColumns &&
+          header.column.reorderable !== false &&
+          !ctl.blocked.value
+            ? ''
+            : undefined
+        "
+        :data-align="header.column.align"
+        @pointerdown="
+          header.leaf && drag.start('column', header.column.key, header.column.label, $event)
+        "
+      >
+        <Slot :render="slots[`header-${header.column.key}`] ?? slots.header" :context="header">
+          <component
+            :is="
+              header.leaf &&
+              (header.column.sortable ||
+                (config.reorderColumns && header.column.reorderable !== false))
+                ? 'button'
+                : 'span'
+            "
+            data-hn-table-heading
+            class="hn-table-heading hn-focus-ring"
+            :type="
+              header.leaf && (header.column.sortable || config.reorderColumns)
+                ? 'button'
+                : undefined
+            "
+            :disabled="ctl.blocked.value"
+            :data-sorted="header.sorting || undefined"
+            :aria-label="
+              header.column.sortable ? `${header.column.label}: ${header.nextLabel}` : undefined
+            "
+            :aria-description="
+              config.reorderColumns && header.column.reorderable !== false
+                ? `${t.table.moveColumn}: Alt + ← / →`
+                : undefined
+            "
+            :aria-keyshortcuts="
+              config.reorderColumns && header.column.reorderable !== false
+                ? 'Alt+ArrowLeft Alt+ArrowRight'
+                : undefined
+            "
+            @click="header.leaf && header.column.sortable && header.toggleSort($event.shiftKey)"
+            @keydown="
+              header.leaf &&
+              config.reorderColumns &&
+              header.column.reorderable !== false &&
+              drag.columnKeydown(header.column.key, $event)
+            "
+          >
+            <span
+              class="min-w-0"
+              :class="(header.column.truncate || config.resizable) && 'truncate'"
+            >
+              {{ header.column.label }}
+            </span>
+            <span
+              v-if="header.leaf && header.column.sortable"
+              class="hn-table-sort"
+              aria-hidden="true"
+            >
+              <ArrowUp v-if="header.sorting === 'asc'" />
+              <ArrowDown v-else-if="header.sorting === 'desc'" />
+              <ChevronsUpDown v-else />
+              <span
+                v-if="config.multiSort && models.sorting.value.length > 1 && header.sortIndex >= 0"
+                class="text-xs"
+              >
+                {{ header.sortIndex + 1 }}
+              </span>
+            </span>
+          </component>
+        </Slot>
+        <div
+          v-if="header.leaf && layout.canResize(header.column) && !ctl.blocked.value"
+          v-tooltip="
+            !layout.resizing.value && layout.handleVisible(header.column)
+              ? `${t.table.resizeColumn}: ${layout.resizeLabel(header.column)}`
+              : false
+          "
+          role="separator"
+          aria-orientation="vertical"
+          :tabindex="layout.handleVisible(header.column) ? 0 : -1"
+          :style="layout.handleStyle(header.column)"
+          :aria-label="`${t.table.resizeColumn}: ${layout.resizeLabel(header.column)}`"
+          :aria-valuenow="Math.round(layout.width(header.column))"
+          :aria-valuetext="layout.resizeValueText(header.column)"
+          :aria-valuemin="Math.round(layout.bounds(header.column).min)"
+          :aria-valuemax="Math.round(layout.bounds(header.column).max)"
+          :data-side="layout.boundary(header.column)?.side"
+          class="hn-table-resize hn-focus-ring"
+          :data-resizing="layout.resizing.value === header.column.key ? '' : undefined"
+          @click.stop
+          @pointerdown="layout.resize(header.column, $event)"
+          @keydown="layout.resizeKey(header.column, $event)"
+        />
+      </TableHead>
+      <TableHead
+        v-if="level === 0 && trailing"
+        :rowspan="layout.headerRows.value.length"
+        :style="{ ...layout.controlStyle('end', 0, true), top: 0 }"
+      >
+        <span class="sr-only">{{ t.table.edit }}</span>
+      </TableHead>
+    </tr>
+  </thead>
+</template>