nuxt-ui-tools 1.28.0 → 1.30.0

package/dist/module.json

@@ -5,7 +5,7 @@
   "configKey": "nuxtUiTools",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "name": "nuxt-ui-tools",
-  "version": "1.28.0",
+  "version": "1.30.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -47,6 +47,11 @@ function getPublicComponents(runtimeDir, options) {
       global: options.global,
       name: `${prefix}DataList${part}`
     })),
+    {
+      filePath: `${runtimeDir}/table/components/group-header.vue`,
+      global: options.global,
+      name: `${prefix}GroupHeader`
+    },
     // Spreadsheet
     {
       filePath: `${runtimeDir}/spreadsheet/components/spreadsheet-import.vue`,

package/dist/runtime/form/components/page/form-page-section.vue

@@ -177,7 +177,10 @@ onBeforeUnmount(() => unregister?.());
     </header>
     <div
       :class="
-  mergeFormUiClass(`min-w-0 ${page.surfaceClasses.value.sectionBody}`, pageUi?.sectionBody)
+  mergeFormUiClass(
+    entry.section.flush ? 'min-w-0' : `min-w-0 ${page.surfaceClasses.value.sectionBody}`,
+    pageUi?.sectionBody
+  )
 "
       :style="grid.style.value"
     >

package/dist/runtime/form/types/page.d.ts

@@ -40,6 +40,12 @@ export interface FormPageSection<TContext = NonNullable<unknown>, TFields extend
     label: FormText;
     /** Supporting copy next to the title. */
     description?: FormText;
+    /**
+     * Lets the section's content reach the card's edges: the body under the heading has no padding.
+     * For a block that draws its own rows, such as a price grid. Only panel surfaces pad a section's
+     * body, so this changes nothing on a plain one.
+     */
+    flush?: boolean;
     /**
      * Iconify icon drawn before the title, so each section of a long page reads at a glance
      * (`'i-lucide-map-pin'` for an address). Style it with `ui.page.ui.sectionIcon`.

package/dist/runtime/i18n/locales/en.js

@@ -748,6 +748,11 @@ export default defineUiToolsLocale({
         label: "Actions for {label}",
         labelAt: "Actions for row {position}"
       },
+      groups: {
+        empty: "Other",
+        select: "Select the whole group",
+        toggle: "Fold or unfold the group"
+      },
       selection: {
         selectAll: "Select all rows",
         selectRow: "Select {label}",

package/dist/runtime/i18n/locales/fr.js

@@ -748,6 +748,11 @@ export default defineUiToolsLocale({
         label: "Actions pour {label}",
         labelAt: "Actions pour la ligne {position}"
       },
+      groups: {
+        empty: "Autres",
+        select: "S\xE9lectionner tout le groupe",
+        toggle: "Replier ou d\xE9plier le groupe"
+      },
       selection: {
         selectAll: "S\xE9lectionner toutes les lignes",
         selectRow: "S\xE9lectionner {label}",

package/dist/runtime/i18n/types.d.ts

@@ -23,6 +23,13 @@ export interface UiToolsTableMessages {
         firstPage: string;
         lastPage: string;
     };
+    /** A row group's header. */
+    groups: {
+        /** The label of the group holding rows with no value. */
+        empty: string;
+        select: string;
+        toggle: string;
+    };
     /** Accessible names of the selection checkboxes. */
     selection: {
         selectAll: string;

package/dist/runtime/shared/composables/use-sheet-navigation.d.ts

@@ -0,0 +1,25 @@
+import type { MaybeRefOrGetter } from 'vue';
+/** The attribute a cell's input carries: its column, so up and down stay in it. */
+export declare const SHEET_COLUMN_ATTRIBUTE = "data-sheet-col";
+/**
+ * Where a key press moves in a grid of inputs, or `undefined` to leave it to the input. Up, down
+ * and Enter stay in the column; left and right follow the reading order, and only once the caret
+ * has nothing left to cross, so editing inside a value still works.
+ */
+export declare function nextSheetInput<TInput>(params: {
+    inputs: readonly TInput[];
+    current: TInput;
+    key: string;
+    shiftKey?: boolean;
+    columnOf: (input: TInput) => string | null;
+    caret: {
+        atStart: boolean;
+        atEnd: boolean;
+    };
+}): TInput | undefined;
+/**
+ * Makes the inputs under `root` walk like a spreadsheet. Mark each one with
+ * `data-sheet-col="<column>"`: arrows and Enter move between them, and focusing one selects its
+ * value, so typing replaces it.
+ */
+export declare function useSheetNavigation(root: MaybeRefOrGetter<HTMLElement | null | undefined>): void;

package/dist/runtime/shared/composables/use-sheet-navigation.js

@@ -0,0 +1,41 @@
+import { useEventListener } from "@vueuse/core";
+export const SHEET_COLUMN_ATTRIBUTE = "data-sheet-col";
+const SELECTOR = `input[${SHEET_COLUMN_ATTRIBUTE}]:not(:disabled)`;
+export function nextSheetInput(params) {
+  const { inputs, current, key, caret } = params;
+  const across = inputs.indexOf(current);
+  const column = inputs.filter((input) => params.columnOf(input) === params.columnOf(current));
+  const along = column.indexOf(current);
+  if (key === "ArrowDown" || key === "Enter" && !params.shiftKey) return column[along + 1];
+  if (key === "ArrowUp" || key === "Enter" && params.shiftKey) return column[along - 1];
+  if (key === "ArrowRight" && caret.atEnd) return inputs[across + 1];
+  if (key === "ArrowLeft" && caret.atStart) return inputs[across - 1];
+  return void 0;
+}
+export function useSheetNavigation(root) {
+  useEventListener(root, "focusin", (event) => {
+    if (event.target instanceof HTMLInputElement && event.target.matches(SELECTOR)) {
+      event.target.select();
+    }
+  });
+  useEventListener(root, "keydown", (event) => {
+    const { currentTarget, target } = event;
+    if (!(target instanceof HTMLInputElement) || !(currentTarget instanceof HTMLElement)) return;
+    if (!target.matches(SELECTOR)) return;
+    const next = nextSheetInput({
+      caret: {
+        atEnd: target.selectionEnd === target.value.length,
+        atStart: target.selectionStart === 0
+      },
+      columnOf: (input) => input.getAttribute(SHEET_COLUMN_ATTRIBUTE),
+      current: target,
+      inputs: [...currentTarget.querySelectorAll(SELECTOR)],
+      key: event.key,
+      shiftKey: event.shiftKey
+    });
+    if (next) {
+      event.preventDefault();
+      next.focus();
+    }
+  });
+}

package/dist/runtime/shared/index.d.ts

@@ -1,5 +1,6 @@
 export * from './composables/use-responsive-value.js';
 export * from './composables/use-range-select.js';
+export * from './composables/use-sheet-navigation.js';
 export { defineRemoteOptions } from './utils/define-remote-options.js';
 export * from './types/responsive.js';
 export * from './types/utils.js';

package/dist/runtime/shared/index.js

@@ -1,5 +1,6 @@
 export * from "./composables/use-responsive-value.js";
 export * from "./composables/use-range-select.js";
+export * from "./composables/use-sheet-navigation.js";
 export { defineRemoteOptions } from "./utils/define-remote-options.js";
 export * from "./types/responsive.js";
 export * from "./types/utils.js";

package/dist/runtime/table/components/grid/grid-renderer.vue

@@ -11,6 +11,7 @@ import { mergeDataListUiClass, resolveTableRowId } from "../../utils";
 import DataListErrorState from "../data-list/data-list-error-state.vue";
 import ProgressLine from "../layout/progress-line.vue";
 import TableEmptyState from "../table/table-empty-state.vue";
+import TableGroupHeader from "../table/table-group-header.vue";
 import OverlayInsetSpacer from "../utils/overlay-inset-spacer.vue";
 import GridCard from "./grid-card.vue";
 import GridSkeleton from "./grid-skeleton.vue";
@@ -75,12 +76,21 @@ watch(
 );
 function getVirtualRowKey(index) {
   const chunk = rowChunks.value[index];
+  if (chunk?.group) return `grid-group:${chunk.group.key}`;
   const firstRow = chunk?.rows[0];
   return firstRow ? `grid-row:${resolveTableRowId({ index: chunk.start, row: firstRow, rowKey: internals.schema.value.rowKey })}` : `grid-row:${index}`;
 }
 function rowId(row, index) {
   return resolveTableRowId({ index, row, rowKey: internals.schema.value.rowKey });
 }
+const flowItems = computed(
+  () => rowChunks.value.flatMap(
+    (chunk) => chunk.group ? [{ group: chunk.group, index: chunk.start, key: `grid-group:${chunk.group.key}` }] : chunk.rows.map((row, offset) => ({
+      index: chunk.start + offset,
+      key: rowId(row, chunk.start + offset)
+    }))
+  )
+);
 function scrollToTop() {
   viewportRef.value?.scrollTo({ behavior: "auto", left: 0, top: 0 });
 }
@@ -258,6 +268,13 @@ function refreshData() {
 }"
           :data-index="virtualRow.index"
         >
+          <div
+            v-if="rowChunks[virtualRow.index]?.group"
+            class="nut-dl-grid__group min-w-0"
+            :style="{ gridColumn: '1 / -1' }"
+          >
+            <TableGroupHeader :group="rowChunks[virtualRow.index].group" />
+          </div>
           <div
             v-for="(row, offset) in rowChunks[virtualRow.index]?.rows ?? []"
             :key="rowId(row, (rowChunks[virtualRow.index]?.start ?? 0) + offset)"
@@ -275,14 +292,22 @@ function refreshData() {
         :class="mergeDataListUiClass('nut-dl-grid__flow grid', void 0, ui?.flow)"
         :style="{ gridTemplateColumns, gap: `${gap}px` }"
       >
-        <div
-          v-for="(row, index) in tableRows"
-          :key="rowId(row, index)"
-          :class="mergeDataListUiClass('nut-dl-grid__item min-w-0', void 0, ui?.item)"
-          :style="{ gridColumn }"
-        >
-          <GridCard :row-index="index" />
-        </div>
+        <template v-for="item in flowItems" :key="item.key">
+          <div
+            v-if="item.group"
+            class="nut-dl-grid__group min-w-0"
+            :style="{ gridColumn: '1 / -1' }"
+          >
+            <TableGroupHeader :group="item.group" />
+          </div>
+          <div
+            v-else
+            :class="mergeDataListUiClass('nut-dl-grid__item min-w-0', void 0, ui?.item)"
+            :style="{ gridColumn }"
+          >
+            <GridCard :row-index="item.index" />
+          </div>
+        </template>
       </div>
       <OverlayInsetSpacer />
     </div>

package/dist/runtime/table/components/group-header.d.vue.ts

@@ -0,0 +1,30 @@
+/**
+ * The fold header of a group of rows: chevron, label and count, with room for a checkbox before
+ * them. It holds no state, so a table's row groups and a hand-built grid read the same.
+ */
+type __VLS_Props = {
+    collapsed?: boolean;
+    /** Names the chevron for assistive technology. */
+    toggleLabel: string;
+};
+type __VLS_Slots = {
+    /** Sits before the chevron, usually a checkbox. A click in it does not fold the group. */
+    leading?: () => unknown;
+    /** The group's name. */
+    default?: () => unknown;
+    /** Shown after the name, usually a count. */
+    summary?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/table/components/group-header.vue

@@ -0,0 +1,44 @@
+<script setup>
+defineProps({
+  collapsed: { type: Boolean, required: false },
+  toggleLabel: { type: String, required: true }
+});
+defineSlots();
+const emit = defineEmits(["toggle"]);
+</script>
+
+<template>
+  <div
+    class="nut-dl-group"
+    :data-collapsed="collapsed || void 0"
+    :data-selectable="$slots.leading ? true : void 0"
+    @click="emit('toggle')"
+  >
+    <span v-if="$slots.leading" class="nut-dl-group__check"><slot name="leading" /></span>
+    <button
+      type="button"
+      class="nut-dl-group__toggle"
+      :aria-expanded="!collapsed"
+      :aria-label="toggleLabel"
+      @click.stop="emit('toggle')"
+    >
+      <svg
+        viewBox="0 0 16 16"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="m4 6 4 4 4-4" />
+      </svg>
+    </button>
+    <span class="nut-dl-group__label"><slot /></span>
+    <span v-if="$slots.summary" class="nut-dl-group__summary"><slot name="summary" /></span>
+  </div>
+</template>
+
+<style>
+.nut-dl-group{--nut-dl-group-gutter:var(--nut-dl-gutter,0px);box-sizing:border-box;color:var(--ui-text-highlighted);cursor:pointer;font-size:13px;font-weight:600;gap:var(--nut-group-gap,6px);height:100%;left:0;max-width:100%;min-height:32px;padding-inline:var(--nut-dl-group-gutter);position:sticky;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.nut-dl-group,.nut-dl-group__check{align-items:center;display:inline-flex}.nut-dl-group__check{flex:none;margin-right:-6px;width:calc(var(--nut-dl-select-w, 44px) - var(--nut-dl-group-gutter) + var(--nut-dl-cell-x, 0px))}.nut-dl-group__toggle{background:transparent;border:0;border-radius:calc(var(--ui-radius)*1.5);color:var(--ui-text-muted);cursor:pointer;display:grid;flex:none;height:22px;outline:none;padding:0;place-items:center;width:var(--nut-group-toggle,22px)}.nut-dl-group__toggle:hover{background:var(--nut-dl-toggle-hover,var(--ui-bg-accented))}.nut-dl-group__toggle:focus-visible{box-shadow:0 0 0 2px var(--ui-primary)}.nut-dl-group__toggle svg{height:16px;transition:transform .16s ease;width:16px}.nut-dl-group[data-collapsed] .nut-dl-group__toggle svg{transform:rotate(-90deg)}.nut-dl-group__label{min-width:0;overflow:hidden;text-overflow:ellipsis}.nut-dl-group__summary{color:var(--ui-text-muted);flex:none;font-size:12px;font-variant-numeric:tabular-nums;font-weight:500}@media (prefers-reduced-motion:reduce){.nut-dl-group__toggle svg{transition:none}}
+</style>

package/dist/runtime/table/components/group-header.vue.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The fold header of a group of rows: chevron, label and count, with room for a checkbox before
+ * them. It holds no state, so a table's row groups and a hand-built grid read the same.
+ */
+type __VLS_Props = {
+    collapsed?: boolean;
+    /** Names the chevron for assistive technology. */
+    toggleLabel: string;
+};
+type __VLS_Slots = {
+    /** Sits before the chevron, usually a checkbox. A click in it does not fold the group. */
+    leading?: () => unknown;
+    /** The group's name. */
+    default?: () => unknown;
+    /** Shown after the name, usually a count. */
+    summary?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/table/components/table/table-group-header.d.vue.ts

@@ -0,0 +1,9 @@
+import type { TableGroup } from '../../types/index.js';
+type __VLS_Props = {
+    group: TableGroup;
+    /** Whether the rows beneath it carry checkboxes. */
+    selectable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/table/table-group-header.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useTableInternals } from "../../composables/use-table-internals";
+import GroupHeader from "../group-header.vue";
+import TableCell from "./table-cell";
+import TableSelectionControl from "./table-selection-control.vue";
+const props = defineProps({
+  group: { type: Object, required: true },
+  selectable: { type: Boolean, required: false }
+});
+const { groups, selection } = useTableInternals();
+const { t } = useUiToolsLocale();
+const collapsed = computed(() => groups.isCollapsed(props.group));
+const params = computed(() => ({ rows: props.group.rows, value: props.group.value }));
+const checked = computed(() => selection.getRowsSelectionState({ rowIds: props.group.rowIds }));
+const showCheckbox = computed(() => props.selectable && selection.selectionEnabled.value);
+function renderLabel() {
+  const label = groups.config.value?.label;
+  if (label) return label(params.value);
+  return props.group.value === void 0 ? t("table.groups.empty") : String(props.group.value);
+}
+function renderSummary() {
+  const summary = groups.config.value?.summary;
+  return summary ? summary(params.value) : props.group.rows.length;
+}
+function toggleSelection() {
+  const { rowIds } = props.group;
+  if (checked.value === true) selection.unselectRows({ rowIds });
+  else selection.selectRows({ rowIds });
+}
+</script>
+
+<template>
+  <GroupHeader
+    :collapsed="collapsed"
+    :toggle-label="t('table.groups.toggle')"
+    @toggle="groups.toggle(group)"
+  >
+    <template v-if="showCheckbox" #leading>
+      <TableSelectionControl
+        :model-value="checked"
+        :label="t('table.groups.select')"
+        @toggle="toggleSelection"
+      />
+    </template>
+    <TableCell :index="0" :render="renderLabel" :row="group" />
+    <template #summary>
+      <TableCell :index="0" :render="renderSummary" :row="group" />
+    </template>
+  </GroupHeader>
+</template>
+
+<style>
+.nut-dl-row.nut-dl-row--group{background:var(--nut-dl-head-bg)}.nut-dl-row.nut-dl-row--group:hover{background:color-mix(in srgb,var(--nut-dl-head-fg) 7%,var(--nut-dl-head-bg))}.nut-dl-group-cell{background:inherit;border-bottom:1px solid var(--nut-dl-line);height:var(--nut-dl-head-h);padding:0}.nut-dl-grid__group{border-bottom:1px solid var(--ui-border)}
+</style>

package/dist/runtime/table/components/table/table-group-header.vue.d.ts

@@ -0,0 +1,9 @@
+import type { TableGroup } from '../../types/index.js';
+type __VLS_Props = {
+    group: TableGroup;
+    /** Whether the rows beneath it carry checkboxes. */
+    selectable?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/table/table-renderer.vue

@@ -6,7 +6,7 @@ import { isFunction, isNumber, isObject } from "../../../shared/utils/predicate"
 import { useDataListUi } from "../../composables/use-data-list-ui";
 import { useTableInternals } from "../../composables/use-table-internals";
 import { useTanstackTable } from "../../composables/use-tanstack-table";
-import { mergeDataListUiClass } from "../../utils";
+import { mergeDataListUiClass, tableGroupOf } from "../../utils";
 import {
   ROW_ACTIONS_COLUMN_ID,
   SELECT_COLUMN_ID,
@@ -54,7 +54,7 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const internals = useTableInternals();
-const { tree } = internals;
+const { groups, tree } = internals;
 const dataListUi = useDataListUi();
 const { locale, t } = useUiToolsLocale();
 const rows = computed(
@@ -89,6 +89,7 @@ const tokenStyle = computed(() => ({
   "--nut-dl-gutter": `${gutter.value}px`,
   "--nut-dl-head-h": `${tokens.value.head}px`,
   "--nut-dl-row-h": `${tokens.value.row}px`,
+  "--nut-dl-select-w": `${SELECT_COLUMN_WIDTH + gutterExtra.value}px`,
   "--nut-dl-tree-gutter": `${TREE_GUTTER_WIDTH}px`,
   "--nut-dl-tree-toggle": `${TREE_TOGGLE_WIDTH}px`,
   "--nut-dl-tree-gap": `${TREE_GAP}px`,
@@ -141,11 +142,13 @@ const pinned = computed(() => {
   };
 });
 function getRowId(row, index) {
-  return internals.selection.getRowId({ index, row });
+  return tableGroupOf(row)?.key ?? internals.selection.getRowId({ index, row });
 }
-const sourceRows = computed(
-  () => tree.enabled.value && rows.value.length > 0 ? tree.visibleRows.value : rows.value
-);
+const sourceRows = computed(() => {
+  if (rows.value.length === 0) return rows.value;
+  if (tree.enabled.value) return tree.visibleRows.value;
+  return groups.enabled.value ? groups.displayRows.value : rows.value;
+});
 const renderRows = computed(() => rowsMounted.value ? sourceRows.value : []);
 const virtualized = computed(
   () => renderRows.value.length >= VIRTUALIZE_ROW_THRESHOLD || renderRows.value.length * columnDefs.value.length >= VIRTUALIZE_CELL_THRESHOLD
@@ -745,7 +748,9 @@ defineExpose({ resetColumnSizing });
             :node="tree.nodeOf(row.id)"
             :expanded="tree.isExpanded(row.id)"
             :checkbox="hasCheckbox(row.id)"
-            :motion="tree.motionOf(row.id)"
+            :motion="tree.motionOf(row.id) ?? groups.motionOf(row.id)"
+            :group="tableGroupOf(row.original)"
+            :col-span="columnCount"
             @toggle="tree.toggleRow(row.id)"
             @select="onSelectRow(row.id, $event)"
           />

package/dist/runtime/table/components/table/table-row.d.vue.ts

@@ -3,7 +3,7 @@
  * so rows that stay on screen while the virtual window slides keep their cells untouched.
  */
 import type { HTMLAttributes } from 'vue';
-import type { GenericObject, TableTreeMotion, TableTreeNode } from '../../types/index.js';
+import type { GenericObject, TableGroup, TableTreeMotion, TableTreeNode } from '../../types/index.js';
 import type { tableRowCells } from './table-layout.js';
 type __VLS_Props = {
     rowId: string;
@@ -20,6 +20,9 @@ type __VLS_Props = {
     checkbox?: boolean;
     /** The row is being revealed or concealed by a branch opening or closing. */
     motion?: TableTreeMotion;
+    /** Set on a group's header row, which spans the columns instead of filling them. */
+    group?: TableGroup;
+    colSpan?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (event: MouseEvent) => any;

package/dist/runtime/table/components/table/table-row.vue

@@ -1,5 +1,6 @@
 <script setup>
 import TableCell from "./table-cell";
+import TableGroupHeader from "./table-group-header.vue";
 import TableTreeControl from "./table-tree-control.vue";
 defineProps({
   rowId: { type: String, required: true },
@@ -12,13 +13,27 @@ defineProps({
   node: { type: Object, required: false },
   expanded: { type: Boolean, required: false },
   checkbox: { type: Boolean, required: false },
-  motion: { type: Object, required: false }
+  motion: { type: Object, required: false },
+  group: { type: Object, required: false },
+  colSpan: { type: Number, required: false }
 });
 const emit = defineEmits(["toggle", "select"]);
 </script>
 
 <template>
   <tr
+    v-if="group"
+    class="nut-dl-row nut-dl-row--group"
+    :class="rowClass"
+    :data-index="index"
+    :data-row-id="rowId"
+  >
+    <td :colspan="colSpan" class="nut-dl-group-cell">
+      <TableGroupHeader :group="group" selectable />
+    </td>
+  </tr>
+  <tr
+    v-else
     class="nut-dl-row group/row"
     :class="[
   selected ? 'nut-dl-row--selected' : '',

package/dist/runtime/table/components/table/table-row.vue.d.ts

@@ -3,7 +3,7 @@
  * so rows that stay on screen while the virtual window slides keep their cells untouched.
  */
 import type { HTMLAttributes } from 'vue';
-import type { GenericObject, TableTreeMotion, TableTreeNode } from '../../types/index.js';
+import type { GenericObject, TableGroup, TableTreeMotion, TableTreeNode } from '../../types/index.js';
 import type { tableRowCells } from './table-layout.js';
 type __VLS_Props = {
     rowId: string;
@@ -20,6 +20,9 @@ type __VLS_Props = {
     checkbox?: boolean;
     /** The row is being revealed or concealed by a branch opening or closing. */
     motion?: TableTreeMotion;
+    /** Set on a group's header row, which spans the columns instead of filling them. */
+    group?: TableGroup;
+    colSpan?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (event: MouseEvent) => any;

package/dist/runtime/table/components/table/table-selection-control.d.vue.ts

@@ -5,6 +5,8 @@ type __VLS_Props = {
     row?: GenericObject;
     /** Where the record sits in the rendered rows: it names the record when the schema has no `rowLabel`. */
     index?: number;
+    /** Names what it selects when that is neither one record nor every row. */
+    label?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: (event: MouseEvent) => any;

package/dist/runtime/table/components/table/table-selection-control.vue

@@ -7,7 +7,8 @@ import { mergeDataListProps, mergeDataListUiClass } from "../../utils";
 const props = defineProps({
   modelValue: { type: [Boolean, String], required: true },
   row: { type: Object, required: false },
-  index: { type: Number, required: false }
+  index: { type: Number, required: false },
+  label: { type: String, required: false }
 });
 const emit = defineEmits(["toggle"]);
 const dataListUi = useDataListUi();
@@ -20,7 +21,7 @@ const areaClass = computed(
   )
 );
 const ariaLabel = computed(
-  () => props.row ? labels.selectRow({ index: props.index ?? 0, row: props.row }) : labels.selectAll()
+  () => props.label ?? (props.row ? labels.selectRow({ index: props.index ?? 0, row: props.row }) : labels.selectAll())
 );
 const checkboxProps = computed(
   () => mergeDataListProps(

package/dist/runtime/table/components/table/table-selection-control.vue.d.ts

@@ -5,6 +5,8 @@ type __VLS_Props = {
     row?: GenericObject;
     /** Where the record sits in the rendered rows: it names the record when the schema has no `rowLabel`. */
     index?: number;
+    /** Names what it selects when that is neither one record nor every row. */
+    label?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: (event: MouseEvent) => any;

package/dist/runtime/table/composables/use-table-grid.d.ts

@@ -1,20 +1,24 @@
 import type { ComputedRef } from 'vue';
-import type { GenericObject, TableExternalState, TableGridMode, TableSchemaView } from '../types/index.js';
+import type { GenericObject, TableExternalState, TableGridMode, TableGroup, TableSchemaView } from '../types/index.js';
+import type { useTableGroups } from './use-table-groups.js';
 export interface GridRowChunk<TRow = unknown> {
     index: number;
     start: number;
     end: number;
     rows: TRow[];
+    /** The group this chunk is the header of; a header holds no rows. */
+    group?: TableGroup;
 }
 export interface UseTableGridParams<TRow extends GenericObject = GenericObject> {
     schema: ComputedRef<TableSchemaView>;
     data: ComputedRef<TableExternalState<TRow>>;
+    groups: ReturnType<typeof useTableGroups>;
 }
 export declare function useTableGrid<TRow extends GenericObject>(options: UseTableGridParams<TRow>): {
     cardsPerRow: ComputedRef<number>;
     columnCount: ComputedRef<number>;
     itemColumnSpan: ComputedRef<number>;
     mode: ComputedRef<TableGridMode>;
-    rowChunks: ComputedRef<GridRowChunk<TRow>[]>;
-    rows: ComputedRef<TRow[]>;
+    rowChunks: ComputedRef<GridRowChunk<object>[]>;
+    rows: ComputedRef<object[]>;
 };