@hina-ui/vue 1.6.0 → 1.7.1

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

@@ -0,0 +1,255 @@
+<script setup lang="ts" generic="T extends object">
+  import { computed, shallowRef, watch } from 'vue'
+  import { Check, ChevronRight, CircleAlert, GripVertical, Pencil, X } from '@lucide/vue'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import DataTableAction from './DataTableAction.vue'
+  import TableCell from '../table/TableCell.vue'
+  import DataTableSelection from './DataTableSelection.vue'
+  import DataTableEditor from './DataTableEditor.vue'
+  import DataTableText from './DataTableText.vue'
+  import Slot from './Slot'
+  import { cssSize, isRowAction } from './utils'
+  import type { DataTableProps, DataTableSlots } from './types'
+  import type { DataTableController } from './composables/useDataTable'
+  import type { DataTableLayout } from './composables/useTableColumns'
+  import type { DataTableDrag } from './composables/useTableDrag'
+  import type { DataTableEditing } from './composables/useTableEditing'
+  import type { DataTableRenderEntry } from './composables/useTableVirtual'
+  const props = defineProps<{
+    item: DataTableRenderEntry<T>
+    config: DataTableProps<T>
+    ctl: DataTableController<T>
+    layout: DataTableLayout<T>
+    drag: DataTableDrag<T>
+    editing: DataTableEditing<T>
+    slots: DataTableSlots<T>
+    controls: string[]
+    colspan: number
+    name: string
+    measure: (element: unknown) => void
+  }>()
+  const emit = defineEmits<{ rowContextmenu: [row: T, event: MouseEvent] }>()
+  const element = shallowRef<HTMLTableRowElement>()
+  const entry = computed(() => props.item.entry)
+  const t = useUiLocale()
+  watch(element, value => props.measure(value), { flush: 'post' })
+</script>
+<template>
+  <tr
+    ref="element"
+    :data-index="item.index"
+    :data-editing="
+      !item.detail && !entry.group && editing.isEditing(entry.key) ? config.editMode : undefined
+    "
+    :data-edit-error="item.error ? '' : undefined"
+    :data-hn-row="item.detail ? undefined : entry.id"
+    :aria-rowindex="config.virtualize ? item.index + layout.headerRows.value.length + 1 : undefined"
+    :data-state="entry.selected ? 'selected' : undefined"
+    :data-hn-state-group="!item.detail && config.hover ? '' : undefined"
+    :tabindex="
+      !item.detail && !entry.group && config.rowClickable && !ctl.blocked.value ? 0 : undefined
+    "
+    :class="
+      cn(
+        !item.detail && (config.hover || config.selectable) && '[&>td]:hn-state-layer',
+        !item.detail && !entry.group && config.rowClickable && 'hn-focus-ring cursor-pointer',
+        !entry.group && config.rowClass?.(entry.row),
+        drag.key.value === entry.id && 'opacity-50',
+      )
+    "
+    @contextmenu="!item.detail && !entry.group && emit('rowContextmenu', entry.row, $event)"
+    @click="!item.detail && !entry.group && ctl.activate(entry.row, $event)"
+    @keydown.enter="!item.detail && !entry.group && ctl.activate(entry.row, $event)"
+    @keydown.space="!item.detail && !entry.group && ctl.activate(entry.row, $event)"
+  >
+    <TableCell
+      :data-state="!item.detail && entry.selected ? 'selected' : undefined"
+      v-if="item.detail"
+      :colspan="colspan"
+    >
+      <p v-if="item.error" :id="editing.errorId" role="alert" class="hn-table-edit-message">
+        <CircleAlert aria-hidden="true" />
+        {{ item.error }}
+      </p>
+      <div v-else class="p-3"><Slot :render="slots.expansion" :context="entry" /></div>
+    </TableCell>
+    <template v-else-if="entry.group">
+      <TableCell
+        :data-state="!item.detail && entry.selected ? 'selected' : undefined"
+        v-if="slots.group"
+        :colspan="colspan"
+      >
+        <Slot :render="slots.group" :context="entry.group" />
+      </TableCell>
+      <template v-else>
+        <TableCell
+          :data-state="!item.detail && entry.selected ? 'selected' : undefined"
+          v-for="(control, index) in controls"
+          :key="control"
+          :style="layout.controlStyle('start', index)"
+        />
+        <TableCell
+          :data-state="!item.detail && entry.selected ? 'selected' : undefined"
+          v-for="(column, index) in ctl.visibleColumns.value"
+          :key="column.key"
+          :align="column.align"
+          :style="layout.cellStyle(column)"
+        >
+          <button
+            type="button"
+            class="hn-table-group hn-focus-ring"
+            v-if="index === 0"
+            :disabled="ctl.blocked.value"
+            :aria-expanded="entry.group.expanded"
+            :style="{ marginInlineStart: `${entry.depth * 16}px` }"
+            @click="entry.group.toggleExpanded()"
+          >
+            <ChevronRight
+              aria-hidden="true"
+              class="hn-transition-transform rtl:rotate-180"
+              :class="entry.group.expanded && 'rotate-90 rtl:rotate-90'"
+            />
+            {{ entry.group.column.label }}: {{ entry.group.value }}
+            <span class="text-muted">({{ entry.group.rows.length }})</span>
+          </button>
+          <template v-else>{{ entry.group.aggregate(column.key) ?? '—' }}</template>
+        </TableCell>
+        <TableCell
+          :data-state="!item.detail && entry.selected ? 'selected' : undefined"
+          v-if="config.editMode === 'row'"
+          :style="layout.controlStyle('end', 0)"
+        />
+      </template>
+    </template>
+    <template v-else>
+      <TableCell
+        :data-state="!item.detail && entry.selected ? 'selected' : undefined"
+        v-for="(control, index) in controls"
+        :key="control"
+        :style="layout.controlStyle('start', index)"
+      >
+        <DataTableAction
+          v-if="control === 'drag'"
+          data-hn-row-drag
+          class="touch-none cursor-grab"
+          :disabled="!drag.canMove(entry.row)"
+          :aria-label="`${t.table.moveRow}: ${entry.label}`"
+          @pointerdown="drag.start('row', entry.id, entry.label, $event)"
+          @keydown="drag.rowKeydown(entry.key, $event)"
+        >
+          <GripVertical />
+        </DataTableAction>
+        <DataTableSelection
+          v-else-if="control === 'select'"
+          :single="config.selectionMode === 'single'"
+          :checked="entry.indeterminate ? 'indeterminate' : entry.selected"
+          :disabled="ctl.blocked.value || !entry.selectable"
+          :label="`${t.table.selectRow}: ${entry.label}`"
+          :name="name"
+          @change="entry.toggleSelected"
+        />
+        <DataTableAction
+          v-else-if="control === 'expand' && entry.expandable"
+          :disabled="ctl.blocked.value"
+          :aria-label="`${entry.expanded ? t.table.collapse : t.table.expand}: ${entry.label}`"
+          :aria-expanded="entry.expanded"
+          @click="entry.toggleExpanded()"
+        >
+          <ChevronRight
+            aria-hidden="true"
+            class="hn-transition-transform rtl:rotate-180"
+            :class="entry.expanded && 'rotate-90 rtl:rotate-90'"
+          />
+        </DataTableAction>
+      </TableCell>
+      <TableCell
+        :data-state="!item.detail && entry.selected ? 'selected' : undefined"
+        v-for="(column, index) in ctl.visibleColumns.value"
+        :key="column.key"
+        :data-hn-cell="column.key"
+        :data-editing="
+          editing.isEditing(entry.key, column.key) && editing.canEdit(entry.row, column)
+            ? config.editMode
+            : undefined
+        "
+        :align="column.align"
+        :style="layout.cellStyle(column)"
+        :tabindex="config.editMode === 'cell' && editing.canEdit(entry.row, column) ? 0 : undefined"
+        :class="
+          cn(
+            typeof column.cellClass === 'function' ? column.cellClass(entry.row) : column.cellClass,
+            config.editMode === 'cell' && editing.canEdit(entry.row, column) && 'hn-focus-ring',
+          )
+        "
+        @dblclick="config.editMode === 'cell' && isRowAction($event) && entry.startEdit(column.key)"
+        @keydown.enter="
+          config.editMode === 'cell' && isRowAction($event) && entry.startEdit(column.key)
+        "
+      >
+        <div
+          :class="column.truncate && 'min-w-0 overflow-hidden'"
+          :style="{
+            maxWidth: cssSize(column.maxWidth),
+            paddingInlineStart:
+              index === 0 && config.getChildren ? `${entry.depth * 16}px` : undefined,
+          }"
+        >
+          <DataTableEditor
+            v-if="editing.isEditing(entry.key, column.key) && editing.canEdit(entry.row, column)"
+            :context="editing.context(entry, column)"
+            :slots="slots"
+            :cell="config.editMode === 'cell'"
+          />
+          <Slot
+            v-else
+            :render="slots[`cell-${column.key}`] ?? slots.cell"
+            :context="{ ...entry, column, value: ctl.valueOf(entry.row, column) }"
+          >
+            <DataTableText
+              :value="ctl.displayValue(entry.row, column)"
+              :truncate="column.truncate"
+            />
+          </Slot>
+        </div>
+      </TableCell>
+      <TableCell
+        :data-state="!item.detail && entry.selected ? 'selected' : undefined"
+        v-if="config.editMode === 'row'"
+        class="hn-table-edit-actions"
+        :style="layout.controlStyle('end', 0)"
+      >
+        <div v-if="editing.isEditing(entry.key)" class="hn-table-editor-control justify-center">
+          <DataTableAction
+            :loading="editing.pending.value"
+            :aria-describedby="editing.rowError(entry.key) ? editing.errorId : undefined"
+            :aria-label="t.table.save"
+            @click="editing.commit"
+          >
+            <Check />
+          </DataTableAction>
+          <DataTableAction
+            :disabled="editing.pending.value"
+            :aria-label="t.table.cancel"
+            @click="editing.cancel"
+          >
+            <X />
+          </DataTableAction>
+        </div>
+        <DataTableAction
+          v-else
+          :disabled="
+            ctl.blocked.value ||
+            !ctl.leaves.value.some(column => editing.canEdit(entry.row, column))
+          "
+          class="hn-table-edit-trigger"
+          data-hn-edit-trigger
+          :aria-label="`${t.table.edit}: ${entry.label}`"
+          @click="entry.startEdit()"
+        >
+          <Pencil />
+        </DataTableAction>
+      </TableCell>
+    </template>
+  </tr>
+</template>

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+  import Checkbox from '../checkbox/Checkbox.vue'
+  import { checkboxBox } from '../checkbox/checkbox.variants'
+  import { radioDot } from '../radio-group/radio-group.variants'
+  defineProps<{
+    single?: boolean
+    checked: boolean | 'indeterminate'
+    disabled?: boolean
+    label: string
+    name: string
+  }>()
+  defineEmits<{ change: [value: boolean] }>()
+</script>
+<template>
+  <label v-if="single" class="relative inline-grid" :class="disabled && 'opacity-50'">
+    <input
+      type="radio"
+      :name="name"
+      :checked="checked === true"
+      :disabled="disabled"
+      :aria-label="label"
+      class="peer absolute inset-0 z-10 size-full cursor-pointer opacity-0"
+      @change="$emit('change', true)"
+    />
+    <span
+      aria-hidden="true"
+      :class="[
+        checkboxBox({ shape: 'round' }),
+        'peer-focus-visible:outline-(--hn-focus-ring) peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2',
+      ]"
+      :data-state="checked === true ? 'checked' : 'unchecked'"
+    >
+      <Transition
+        enter-active-class="hn-transition-press"
+        enter-from-class="scale-50 opacity-0"
+        leave-active-class="hn-transition"
+        leave-to-class="scale-50 opacity-0"
+      >
+        <span v-if="checked === true" :class="radioDot()" />
+      </Transition>
+    </span>
+  </label>
+  <Checkbox
+    v-else
+    class="mx-auto"
+    :model-value="checked"
+    :disabled="disabled"
+    :aria-label="label"
+    @update:model-value="$emit('change', $event === true)"
+  />
+</template>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+  import { shallowRef } from 'vue'
+  import { vTooltip } from '../tooltip/directive'
+  import { useTableText } from './composables/useTableText'
+  const props = defineProps<{ value: string | number; truncate?: boolean }>()
+  const element = shallowRef<HTMLElement>()
+  const { overflow, tooltip } = useTableText(element, () => props.value)
+</script>
+<template>
+  <span
+    v-if="truncate"
+    ref="element"
+    v-tooltip="tooltip"
+    class="block truncate"
+    :tabindex="overflow ? 0 : undefined"
+  >
+    {{ value }}
+  </span>
+  <template v-else>{{ value }}</template>
+</template>

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

@@ -0,0 +1,12 @@
+import { Fragment, createVNode, type SetupContext, type VNodeChild } from 'vue'
+
+export default function DataTableSlot(
+  props: { render?: (context: never) => unknown; context?: unknown },
+  { slots }: SetupContext,
+) {
+  return createVNode(
+    Fragment,
+    null,
+    (props.render ? props.render(props.context as never) : slots.default?.()) as VNodeChild,
+  )
+}

package/src/components/data-table/column-sizing.ts

@@ -0,0 +1,101 @@
+import type { DataTableColumn } from './types'
+
+export function pixelWidth(value: number | string | undefined, fallback: number) {
+  return typeof value === 'number' && Number.isFinite(value)
+    ? value
+    : typeof value === 'string' && /^\d+(\.\d+)?px$/.test(value)
+      ? parseFloat(value)
+      : fallback
+}
+
+export function columnBounds<T extends object>(column: DataTableColumn<T>) {
+  const min = Math.max(0, pixelWidth(column.minWidth, 48))
+  return { min, max: Math.max(min, pixelWidth(column.maxWidth, 1600)) }
+}
+
+export function clampWidth<T extends object>(column: DataTableColumn<T>, width: number) {
+  const { min, max } = columnBounds(column)
+  return Math.max(min, Math.min(max, width))
+}
+
+export function allocateWidths<T extends object>(
+  columns: DataTableColumn<T>[],
+  overrides: Record<string, number>,
+  available: number,
+) {
+  const widths = Object.fromEntries(
+    columns.map(column => [
+      column.key,
+      clampWidth(column, pixelWidth(overrides[column.key] ?? column.width, 160)),
+    ]),
+  )
+  let remaining = available - Object.values(widths).reduce((sum, width) => sum + width, 0)
+  let flexible = columns.filter(column => !column.pin && overrides[column.key] === undefined)
+  while (remaining > 0.01 && flexible.length) {
+    const share = remaining / flexible.length
+    for (const column of flexible) {
+      const extra = Math.min(share, columnBounds(column).max - widths[column.key]!)
+      widths[column.key]! += extra
+      remaining -= extra
+    }
+    flexible = flexible.filter(column => widths[column.key]! < columnBounds(column).max - 0.01)
+  }
+  return widths
+}
+
+export function resizeBoundary<T extends object>(
+  columns: DataTableColumn<T>[],
+  column: DataTableColumn<T>,
+  mode: 'fit' | 'expand',
+) {
+  const index = columns.findIndex(item => item.key === column.key)
+  if (index < 0 || column.resizable === false) return
+  const side = column.pin === 'end' ? 'start' : 'end'
+  const neighbor = columns[index + (side === 'start' ? -1 : 1)]
+  if (mode === 'fit' && side === 'end' && neighbor?.pin === 'end') return
+  if (mode === 'fit' && (!neighbor || neighbor.resizable === false)) return
+  return { side, neighbor: mode === 'fit' ? neighbor : undefined } as const
+}
+
+export function resizeBounds<T extends object>(
+  column: DataTableColumn<T>,
+  neighbor: DataTableColumn<T> | undefined,
+  widths: Record<string, number>,
+  minimumTotalWidth = 0,
+  maximumWidth = Infinity,
+) {
+  const bounds = columnBounds(column)
+  bounds.max = Math.min(bounds.max, maximumWidth)
+  if (!neighbor) {
+    const otherWidth = Object.entries(widths).reduce(
+      (sum, [key, width]) => sum + (key === column.key ? 0 : width),
+      0,
+    )
+    return {
+      min: Math.max(bounds.min, Math.min(widths[column.key]!, minimumTotalWidth - otherWidth)),
+      max: bounds.max,
+    }
+  }
+  const other = columnBounds(neighbor)
+  const total = widths[column.key]! + widths[neighbor.key]!
+  return {
+    min: Math.max(bounds.min, total - other.max),
+    max: Math.min(bounds.max, total - other.min),
+  }
+}
+
+export function resizeWidths<T extends object>(
+  column: DataTableColumn<T>,
+  neighbor: DataTableColumn<T> | undefined,
+  widths: Record<string, number>,
+  value: number,
+  minimumTotalWidth = 0,
+  maximumWidth = Infinity,
+) {
+  const { min, max } = resizeBounds(column, neighbor, widths, minimumTotalWidth, maximumWidth)
+  const width = Math.max(min, Math.min(max, value))
+  return {
+    [column.key]: width,
+    ...(neighbor ? { [neighbor.key]: widths[neighbor.key]! + widths[column.key]! - width } : {}),
+  }
+}