nuxt-ui-tools 1.16.10 → 1.17.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.16.10",
+  "version": "1.17.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

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

@@ -727,6 +727,14 @@ export default defineUiToolsLocale({
         rowOther: "rows",
         selection: "Selection",
         total: "Total"
+      },
+      tree: {
+        collapse: "Collapse row",
+        collapseAll: "Collapse all rows",
+        expand: "Expand row",
+        expandAll: "Expand all rows",
+        selectAll: "Select all rows",
+        selectRow: "Select row"
       }
     }
   },

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

@@ -727,6 +727,14 @@ export default defineUiToolsLocale({
         rowOther: "lignes",
         selection: "S\xE9lection",
         total: "Total"
+      },
+      tree: {
+        collapse: "Replier la ligne",
+        collapseAll: "Replier toutes les lignes",
+        expand: "D\xE9plier la ligne",
+        expandAll: "D\xE9plier toutes les lignes",
+        selectAll: "S\xE9lectionner toutes les lignes",
+        selectRow: "S\xE9lectionner la ligne"
       }
     }
   },

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

@@ -50,6 +50,14 @@ export interface UiToolsTableMessages {
         rowOne: string;
         rowOther: string;
     };
+    tree: {
+        expand: string;
+        collapse: string;
+        expandAll: string;
+        collapseAll: string;
+        selectRow: string;
+        selectAll: string;
+    };
     columnsMenu: {
         sortAsc: string;
         sortDesc: string;

package/dist/runtime/table/components/table/table-layout.d.ts

@@ -24,6 +24,7 @@ export declare function columnCellLayout(params: {
 }): {
     class: import("vue").ClassValue[];
     innerClass: string;
+    internal: import("../../utils/index.js").DataListColumnInternalKind | undefined;
     render: ((params: {
         row: import("../../types/index.js").GenericObject;
         index: number;
@@ -45,6 +46,7 @@ export declare function tableRowCells(params: {
     layout: {
         class: import("vue").ClassValue[];
         innerClass: string;
+        internal: import("../../utils/index.js").DataListColumnInternalKind | undefined;
         render: ((params: {
             row: import("../../types/index.js").GenericObject;
             index: number;

package/dist/runtime/table/components/table/table-layout.js

@@ -12,6 +12,7 @@ export function columnCellLayout(params) {
       params.tdClass
     ],
     innerClass: meta?.align === "right" ? "justify-end" : meta?.align === "center" ? "justify-center" : "",
+    internal: meta?.internal,
     render: meta?.render,
     style: [params.offset, meta?.lines ? { "--nut-dl-lines": meta.lines } : void 0]
   };

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

@@ -8,7 +8,7 @@ type __VLS_Props = {
     ui?: DataListTableUi;
 };
 declare function refresh(): void;
-declare var __VLS_33: {
+declare var __VLS_41: {
     columnSlots: TableColumnSlot[];
     leafColumns: import("@tanstack/table-core").Column<{
         columnPinningFeature: import("@tanstack/table-core").TableFeature;
@@ -18,16 +18,16 @@ declare var __VLS_33: {
         coreRowModel: (table: import("@tanstack/table-core").Table<any, any>) => () => import("@tanstack/table-core").RowModel<any, any>;
         columnMeta: import("../../utils/index.js").DataListColumnMeta;
     }, object, unknown>[];
-}, __VLS_35: {
+}, __VLS_43: {
     error: {};
     retry: typeof refresh;
-}, __VLS_44: {};
+}, __VLS_52: {};
 type __VLS_Slots = {} & {
-    footer?: (props: typeof __VLS_33) => any;
+    footer?: (props: typeof __VLS_41) => any;
 } & {
-    error?: (props: typeof __VLS_35) => any;
+    error?: (props: typeof __VLS_43) => any;
 } & {
-    empty?: (props: typeof __VLS_44) => any;
+    empty?: (props: typeof __VLS_52) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     resetColumnSizing: () => void;

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

@@ -10,8 +10,17 @@ import { mergeDataListUiClass } from "../../utils";
 import {
   ROW_ACTIONS_COLUMN_ID,
   SELECT_COLUMN_ID,
-  SELECT_COLUMN_WIDTH
+  SELECT_COLUMN_WIDTH,
+  TREE_COLUMN_ID
 } from "../../utils/columns/types";
+import {
+  TREE_CHECK_WIDTH,
+  TREE_GAP,
+  TREE_GUTTER_WIDTH,
+  TREE_LEAD,
+  TREE_TOGGLE_WIDTH,
+  getTreeColumnWidth
+} from "../../utils/tree";
 import DataListErrorState from "../data-list/data-list-error-state.vue";
 import ProgressLine from "../layout/progress-line.vue";
 import TableCell from "./table-cell";
@@ -21,6 +30,7 @@ import { columnCellLayout, tableRowCells } from "./table-layout";
 import TableOverlayScrollbars from "./table-overlay-scrollbars.vue";
 import TableRow from "./table-row.vue";
 import TableSkeletonCell from "./table-skeleton-cell";
+import TableTreeHeader from "./table-tree-header.vue";
 const LOAD_MORE_THRESHOLD = 6;
 const PREFETCH_VIEWPORTS = 3;
 const VIRTUALIZE_ROW_THRESHOLD = 40;
@@ -43,6 +53,7 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const internals = useTableInternals();
+const { tree } = internals;
 const dataListUi = useDataListUi();
 const { locale, t } = useUiToolsLocale();
 const rows = computed(
@@ -76,21 +87,35 @@ const tokenStyle = computed(() => ({
   "--nut-dl-foot-h": `${tokens.value.head - 2}px`,
   "--nut-dl-gutter": `${gutter.value}px`,
   "--nut-dl-head-h": `${tokens.value.head}px`,
-  "--nut-dl-row-h": `${tokens.value.row}px`
+  "--nut-dl-row-h": `${tokens.value.row}px`,
+  "--nut-dl-tree-gutter": `${TREE_GUTTER_WIDTH}px`,
+  "--nut-dl-tree-toggle": `${TREE_TOGGLE_WIDTH}px`,
+  "--nut-dl-tree-gap": `${TREE_GAP}px`,
+  "--nut-dl-tree-check": `${treeCheckWidth.value}px`,
+  "--nut-dl-tree-lead": `${treeLead.value}px`
 }));
 const { columnDefs } = internals.tableColumns;
 const columnState = internals.tableColumns.tableState;
+const treeLead = computed(() => Math.max(TREE_LEAD, gutter.value - 2));
+const treeCheckWidth = computed(() => TREE_CHECK_WIDTH[dataListUi.controlSize.value]);
 const columnSizing = computed({
   get: () => {
     const sizing = columnState.value.columnSizing ?? {};
-    if (!gutterExtra.value) {
+    const ids = new Set(columnDefs.value.map((def) => def.id));
+    const hasTree = ids.has(TREE_COLUMN_ID);
+    if (!gutterExtra.value && !hasTree) {
       return sizing;
     }
-    const ids = new Set(columnDefs.value.map((def) => def.id));
     const next = { ...sizing };
-    if (ids.has(SELECT_COLUMN_ID) && !(SELECT_COLUMN_ID in sizing)) {
+    if (ids.has(SELECT_COLUMN_ID) && !(SELECT_COLUMN_ID in sizing) && gutterExtra.value) {
       next[SELECT_COLUMN_ID] = SELECT_COLUMN_WIDTH + gutterExtra.value;
     }
+    if (hasTree)
+      next[TREE_COLUMN_ID] = getTreeColumnWidth({
+        check: treeCheckWidth.value,
+        lead: treeLead.value,
+        maxDepth: tree.index.value.maxDepth
+      });
     return next;
   },
   set: (columnSizing2) => {
@@ -100,20 +125,27 @@ const columnSizing = computed({
 const pinned = computed(() => {
   const ids = new Set(columnDefs.value.map((def) => def.id));
   const left = (columnState.value.columnPinning?.left ?? []).filter(
-    (id) => ids.has(id) && id !== SELECT_COLUMN_ID
+    (id) => ids.has(id) && id !== SELECT_COLUMN_ID && id !== TREE_COLUMN_ID
   );
   const right = (columnState.value.columnPinning?.right ?? []).filter(
     (id) => ids.has(id) && id !== ROW_ACTIONS_COLUMN_ID
   );
   return {
     end: ids.has(ROW_ACTIONS_COLUMN_ID) ? [...right, ROW_ACTIONS_COLUMN_ID] : right,
-    start: ids.has(SELECT_COLUMN_ID) ? [SELECT_COLUMN_ID, ...left] : left
+    start: [
+      ...ids.has(SELECT_COLUMN_ID) ? [SELECT_COLUMN_ID] : [],
+      ...ids.has(TREE_COLUMN_ID) ? [TREE_COLUMN_ID] : [],
+      ...left
+    ]
   };
 });
 function getRowId(row, index) {
   return internals.selection.getRowId({ index, row });
 }
-const renderRows = computed(() => rowsMounted.value ? rows.value : []);
+const sourceRows = computed(
+  () => tree.enabled.value && rows.value.length > 0 ? tree.visibleRows.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
 );
@@ -358,7 +390,7 @@ onBeforeUnmount(() => {
   resizeObserver?.disconnect();
 });
 watch(
-  [totalWidth, () => rows.value.length],
+  [totalWidth, () => sourceRows.value.length],
   () => nextTick().then(() => {
     columnVirtualizer.value.measure();
     scrollbarsRef.value?.measure();
@@ -512,6 +544,25 @@ watch(
     }, APPEND_WINDOW);
   }
 );
+function isAppended(rowId, flatIndex) {
+  return (tree.nodeOf(rowId)?.rootIndex ?? flatIndex) >= appendedFrom.value;
+}
+function hasCheckbox(rowId) {
+  const node = tree.nodeOf(rowId);
+  return internals.selection.selectionEnabled.value && node !== void 0 && tree.isSelectable(node);
+}
+function onSelectRow(rowId, event) {
+  internals.selection.toggleRowSelection({
+    rowId,
+    selected: !internals.selection.isRowSelected({ rowId }),
+    shiftKey: event.shiftKey
+  });
+}
+function onBodyPointerOver(event) {
+  if (!tree.enabled.value || event.pointerType === "touch") return;
+  const row = event.target instanceof Element ? event.target.closest("tr") : null;
+  tree.lightLineage(row?.dataset.rowId);
+}
 function skeletonColumn(columnId) {
   const meta = headerByColumnId.value.get(columnId)?.column.columnDef.meta;
   if (meta?.internal === "selection") return { align: meta.align, skeleton: "check" };
@@ -646,6 +697,11 @@ defineExpose({ resetColumnSizing });
                       :row="HEADER_ROW"
                       :index="-1"
                     />
+                    <TableTreeHeader
+                      v-else-if="
+  headerByColumnId.get(slot.columnId).column.columnDef.meta?.internal === 'tree'
+"
+                    />
                   </div>
                 </template>
                 <TableColumnHeader
@@ -662,6 +718,8 @@ defineExpose({ resetColumnSizing });
         <tbody
           :class="mergeDataListUiClass('nut-dl-table__body', void 0, ui?.tbody)"
           :data-replacing="replacing"
+          @pointerover="onBodyPointerOver"
+          @pointerleave="tree.lightLineage()"
         >
           <tr
             v-if="virtualPaddingTop"
@@ -681,8 +739,14 @@ defineExpose({ resetColumnSizing });
             :index="virtual.index"
             :cells="rowCells"
             :selected="internals.selection.isRowSelected({ rowId: String(row.id) })"
-            :appended="virtual.index >= appendedFrom"
+            :appended="isAppended(row.id, virtual.index)"
             :row-class="rowClass"
+            :node="tree.nodeOf(row.id)"
+            :expanded="tree.isExpanded(row.id)"
+            :checkbox="hasCheckbox(row.id)"
+            :motion="tree.motionOf(row.id)"
+            @toggle="tree.toggleRow(row.id)"
+            @select="onSelectRow(row.id, $event)"
           />
 
           <tr
@@ -870,5 +934,5 @@ defineExpose({ resetColumnSizing });
 <style>
 .nut-dl-table{--nut-dl-surface:var(--nut-dl-table-surface,var(--ui-bg-elevated));--nut-dl-line:var(--nut-dl-table-line,var(--ui-border));--nut-dl-line-soft:var(--nut-dl-table-line-soft,var(--ui-border-muted));--nut-dl-head-bg:var(--nut-dl-table-head-bg,var(--ui-bg-muted));--nut-dl-head-fg:var(--nut-dl-table-head-fg,var(--ui-text-muted));--nut-dl-head-font:var(--nut-dl-table-head-font,11px);--nut-dl-head-weight:var(--nut-dl-table-head-weight,600);--nut-dl-head-tracking:var(--nut-dl-table-head-tracking,0.04em);--nut-dl-head-transform:var(--nut-dl-table-head-transform,none);--nut-dl-row-hover:var(--nut-dl-table-row-hover,var(--ui-bg-muted));--nut-dl-row-selected:var(
     --nut-dl-table-row-selected,color-mix(in srgb,var(--ui-primary) 10%,var(--nut-dl-surface))
-  );--nut-dl-accent:var(--ui-primary);--nut-dl-cell-fg:var(--nut-dl-table-cell-fg,var(--ui-text-toned));--nut-dl-pin-line:var(--nut-dl-table-pin-line,var(--nut-dl-line))}.nut-dl-table__scroll{overflow-anchor:none;scrollbar-width:none}.nut-dl-table__scroll::-webkit-scrollbar{display:none}.nut-dl-th{color:var(--nut-dl-head-fg);font-size:var(--nut-dl-head-font);font-weight:var(--nut-dl-head-weight);letter-spacing:var(--nut-dl-head-tracking);text-transform:var(--nut-dl-head-transform);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.nut-dl-table__fill,.nut-dl-table__spacer,.nut-dl-th{background:var(--nut-dl-head-bg);border-bottom:1px solid var(--nut-dl-line)}.nut-dl-tf{background:var(--nut-dl-head-bg);border-top:1px solid var(--nut-dl-line);color:var(--ui-text-highlighted);font-weight:var(--nut-dl-table-foot-weight,500);white-space:nowrap}tfoot .nut-dl-table__fill,tfoot .nut-dl-table__spacer{border-bottom:0;border-top:1px solid var(--nut-dl-line)}.nut-dl-spinner{animation:nut-dl-spin .8s linear infinite}@keyframes nut-dl-spin{to{transform:rotate(1turn)}}tbody .nut-dl-table__spacer{background:var(--nut-dl-surface);border-bottom:1px solid var(--nut-dl-line-soft)}tbody .nut-dl-table__fill{background:inherit;border-bottom:1px solid var(--nut-dl-line-soft)}.nut-dl-th__btn--open{background:color-mix(in srgb,var(--nut-dl-head-fg) 8%,transparent)}.nut-dl-rz:after{background:var(--ui-border-accented);bottom:10px;content:"";opacity:0;position:absolute;right:0;top:10px;transition:opacity .12s;width:1px}.nut-dl-rz:hover:after,.nut-dl-th:hover .nut-dl-rz:after{opacity:1}.nut-dl-rz--active:after,.nut-dl-rz:hover:after{background:var(--nut-dl-accent);bottom:6px;left:2.5px;opacity:1;top:6px;width:2px}.nut-dl-row{background:var(--nut-dl-surface);transition:background-color .1s}.nut-dl-row:hover{background:var(--nut-dl-row-hover)}.nut-dl-row--selected,.nut-dl-row--selected:hover{background:var(--nut-dl-row-selected)}.nut-dl-td,.nut-dl-tf[data-col],.nut-dl-th__btn,.nut-dl-th__static{padding-left:var(--nut-dl-cell-l,var(--nut-dl-cell-x));padding-right:var(--nut-dl-cell-r,var(--nut-dl-cell-x))}.nut-dl-row>.nut-dl-td:first-child,.nut-dl-table__foot-row>.nut-dl-tf:first-child,.nut-dl-table__head-row>.nut-dl-th:first-child{--nut-dl-cell-l:var(--nut-dl-gutter)}.nut-dl-row>.nut-dl-td:last-child,.nut-dl-table__foot-row>.nut-dl-tf:last-child,.nut-dl-table__head-row>.nut-dl-th:last-child{--nut-dl-cell-r:var(--nut-dl-gutter)}.nut-dl-row>.nut-dl-td--actions:last-child,.nut-dl-table__foot-row>.nut-dl-tf--actions:last-child,.nut-dl-table__head-row>.nut-dl-th--actions:last-child,.nut-dl-td--actions,.nut-dl-tf--actions{--nut-dl-cell-l:var(--nut-dl-cell-x);--nut-dl-cell-r:var(--nut-dl-cell-x)}.nut-dl-td--actions .nut-dl-td__inner{justify-content:flex-end}.nut-dl-td{background:inherit;border-bottom:1px solid var(--nut-dl-line-soft);box-sizing:border-box;color:var(--nut-dl-cell-fg);overflow:hidden;overflow-wrap:anywhere;padding-block:var(--nut-dl-cell-y,6px);white-space:normal}.nut-dl-table__table tbody:has(+tfoot)>.nut-dl-row:last-child>.nut-dl-td{border-bottom:0}.nut-dl-td{contain:paint}.nut-dl-td__inner{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--nut-dl-lines,3);line-clamp:var(--nut-dl-lines,3);max-height:calc(var(--nut-dl-lines, 3)*1.5em);overflow:hidden}.nut-dl-td--ellipsis{--nut-dl-lines:1;white-space:nowrap}.nut-dl-td--ellipsis .nut-dl-td__inner{display:block;text-overflow:ellipsis}.nut-dl-td--actions .nut-dl-td__inner,.nut-dl-td--selection .nut-dl-td__inner{align-items:center;display:flex}.nut-dl-td--actions,.nut-dl-td--selection{white-space:nowrap}.nut-dl-td--actions .nut-dl-td__inner>*{opacity:.55;transition:opacity .12s}.nut-dl-row:hover .nut-dl-td--actions .nut-dl-td__inner>*{opacity:1}.nut-dl-pin{position:sticky}.nut-dl-pin--first-end:before,.nut-dl-pin--last-start:after{background:var(--nut-dl-line);bottom:0;content:"";pointer-events:none;position:absolute;top:0;width:1px}.nut-dl-pin--last-start:after{right:0}.nut-dl-pin--first-end:before{left:0}.nut-dl-pin--first-end:before,.nut-dl-pin--last-start:after{background:var(--nut-dl-pin-line)}.nut-dl-td--actions.nut-dl-pin--first-end:before,.nut-dl-th--actions.nut-dl-pin--first-end:before{display:none}.nut-dl-skeleton{animation:nut-dl-shimmer 1.6s ease-in-out infinite;animation-delay:calc(var(--nut-dl-i, 0)*-90ms);background:linear-gradient(90deg,var(--ui-bg-accented) 0,var(--ui-bg-muted) 45%,var(--ui-bg-accented) 100%);background-size:200% 100%}.nut-dl-row--skeleton{animation:nut-dl-fade-in .18s ease .12s both}.nut-dl-row--appended{animation:nut-dl-fade-in .2s ease both}.nut-dl-table__body{transition:opacity .16s ease-out}.nut-dl-table__body[data-replacing=true]{opacity:.55;transition:opacity .2s ease-in .18s}@keyframes nut-dl-fade-in{0%{opacity:0}to{opacity:1}}@keyframes nut-dl-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@media (prefers-reduced-motion:reduce){.nut-dl-row,.nut-dl-table__body{transition:none}.nut-dl-row--appended,.nut-dl-row--skeleton,.nut-dl-skeleton{animation:none}}
+  );--nut-dl-accent:var(--ui-primary);--nut-dl-cell-fg:var(--nut-dl-table-cell-fg,var(--ui-text-toned));--nut-dl-pin-line:var(--nut-dl-table-pin-line,var(--nut-dl-line));--nut-dl-rail:var(--nut-dl-table-rail,var(--ui-border-accented));--nut-dl-rail-lit:var(--nut-dl-table-rail-lit,var(--ui-primary));--nut-dl-rail-radius:var(--nut-dl-table-rail-radius,calc(var(--ui-radius)*1.5));--nut-dl-toggle-hover:var(--nut-dl-table-toggle-hover,var(--ui-bg-accented));--nut-dl-tree-shift:var(--nut-dl-table-tree-shift,6px)}.nut-dl-table__scroll{overflow-anchor:none;scrollbar-width:none}.nut-dl-table__scroll::-webkit-scrollbar{display:none}.nut-dl-th{color:var(--nut-dl-head-fg);font-size:var(--nut-dl-head-font);font-weight:var(--nut-dl-head-weight);letter-spacing:var(--nut-dl-head-tracking);text-transform:var(--nut-dl-head-transform);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.nut-dl-table__fill,.nut-dl-table__spacer,.nut-dl-th{background:var(--nut-dl-head-bg);border-bottom:1px solid var(--nut-dl-line)}.nut-dl-tf{background:var(--nut-dl-head-bg);border-top:1px solid var(--nut-dl-line);color:var(--ui-text-highlighted);font-weight:var(--nut-dl-table-foot-weight,500);white-space:nowrap}tfoot .nut-dl-table__fill,tfoot .nut-dl-table__spacer{border-bottom:0;border-top:1px solid var(--nut-dl-line)}.nut-dl-spinner{animation:nut-dl-spin .8s linear infinite}@keyframes nut-dl-spin{to{transform:rotate(1turn)}}tbody .nut-dl-table__spacer{background:var(--nut-dl-surface);border-bottom:1px solid var(--nut-dl-line-soft)}tbody .nut-dl-table__fill{background:inherit;border-bottom:1px solid var(--nut-dl-line-soft)}.nut-dl-th__btn--open{background:color-mix(in srgb,var(--nut-dl-head-fg) 8%,transparent)}.nut-dl-rz:after{background:var(--ui-border-accented);bottom:10px;content:"";opacity:0;position:absolute;right:0;top:10px;transition:opacity .12s;width:1px}.nut-dl-rz:hover:after,.nut-dl-th:hover .nut-dl-rz:after{opacity:1}.nut-dl-rz--active:after,.nut-dl-rz:hover:after{background:var(--nut-dl-accent);bottom:6px;left:2.5px;opacity:1;top:6px;width:2px}.nut-dl-row{background:var(--nut-dl-surface);transition:background-color .1s}.nut-dl-row:hover{background:var(--nut-dl-row-hover)}.nut-dl-row--selected,.nut-dl-row--selected:hover{background:var(--nut-dl-row-selected)}.nut-dl-td,.nut-dl-tf[data-col],.nut-dl-th__btn,.nut-dl-th__static{padding-left:var(--nut-dl-cell-l,var(--nut-dl-cell-x));padding-right:var(--nut-dl-cell-r,var(--nut-dl-cell-x))}.nut-dl-row>.nut-dl-td:first-child,.nut-dl-table__foot-row>.nut-dl-tf:first-child,.nut-dl-table__head-row>.nut-dl-th:first-child{--nut-dl-cell-l:var(--nut-dl-gutter)}.nut-dl-row>.nut-dl-td:last-child,.nut-dl-table__foot-row>.nut-dl-tf:last-child,.nut-dl-table__head-row>.nut-dl-th:last-child{--nut-dl-cell-r:var(--nut-dl-gutter)}.nut-dl-row>.nut-dl-td--actions:last-child,.nut-dl-table__foot-row>.nut-dl-tf--actions:last-child,.nut-dl-table__head-row>.nut-dl-th--actions:last-child,.nut-dl-td--actions,.nut-dl-tf--actions{--nut-dl-cell-l:var(--nut-dl-cell-x);--nut-dl-cell-r:var(--nut-dl-cell-x)}.nut-dl-td--actions .nut-dl-td__inner{justify-content:flex-end}.nut-dl-td{background:inherit;border-bottom:1px solid var(--nut-dl-line-soft);box-sizing:border-box;color:var(--nut-dl-cell-fg);overflow:hidden;overflow-wrap:anywhere;padding-block:var(--nut-dl-cell-y,6px);white-space:normal}.nut-dl-table__table tbody:has(+tfoot)>.nut-dl-row:last-child>.nut-dl-td{border-bottom:0}.nut-dl-td{contain:paint}.nut-dl-td__inner{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--nut-dl-lines,3);line-clamp:var(--nut-dl-lines,3);max-height:calc(var(--nut-dl-lines, 3)*1.5em);overflow:hidden}.nut-dl-td--ellipsis{--nut-dl-lines:1;white-space:nowrap}.nut-dl-td--ellipsis .nut-dl-td__inner{display:block;text-overflow:ellipsis}.nut-dl-td--actions .nut-dl-td__inner,.nut-dl-td--selection .nut-dl-td__inner{align-items:center;display:flex}.nut-dl-td--actions,.nut-dl-td--selection{white-space:nowrap}.nut-dl-td--actions .nut-dl-td__inner>*{opacity:.55;transition:opacity .12s}.nut-dl-row:hover .nut-dl-td--actions .nut-dl-td__inner>*{opacity:1}.nut-dl-pin{position:sticky}.nut-dl-pin--first-end:before,.nut-dl-pin--last-start:after{background:var(--nut-dl-line);bottom:0;content:"";pointer-events:none;position:absolute;top:0;width:1px}.nut-dl-pin--last-start:after{right:0}.nut-dl-pin--first-end:before{left:0}.nut-dl-pin--first-end:before,.nut-dl-pin--last-start:after{background:var(--nut-dl-pin-line)}.nut-dl-td--actions.nut-dl-pin--first-end:before,.nut-dl-th--actions.nut-dl-pin--first-end:before{display:none}.nut-dl-skeleton{animation:nut-dl-shimmer 1.6s ease-in-out infinite;animation-delay:calc(var(--nut-dl-i, 0)*-90ms);background:linear-gradient(90deg,var(--ui-bg-accented) 0,var(--ui-bg-muted) 45%,var(--ui-bg-accented) 100%);background-size:200% 100%}.nut-dl-row--skeleton{animation:nut-dl-fade-in .18s ease .12s both}.nut-dl-row--appended{animation:nut-dl-fade-in .2s ease both}.nut-dl-table__body{transition:opacity .16s ease-out}.nut-dl-table__body[data-replacing=true]{opacity:.55;transition:opacity .2s ease-in .18s}@keyframes nut-dl-fade-in{0%{opacity:0}to{opacity:1}}@keyframes nut-dl-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@media (prefers-reduced-motion:reduce){.nut-dl-row,.nut-dl-table__body{transition:none}.nut-dl-row--appended,.nut-dl-row--skeleton,.nut-dl-skeleton{animation:none}}
 </style>

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

@@ -8,7 +8,7 @@ type __VLS_Props = {
     ui?: DataListTableUi;
 };
 declare function refresh(): void;
-declare var __VLS_33: {
+declare var __VLS_41: {
     columnSlots: TableColumnSlot[];
     leafColumns: import("@tanstack/table-core").Column<{
         columnPinningFeature: import("@tanstack/table-core").TableFeature;
@@ -18,16 +18,16 @@ declare var __VLS_33: {
         coreRowModel: (table: import("@tanstack/table-core").Table<any, any>) => () => import("@tanstack/table-core").RowModel<any, any>;
         columnMeta: import("../../utils/index.js").DataListColumnMeta;
     }, object, unknown>[];
-}, __VLS_35: {
+}, __VLS_43: {
     error: {};
     retry: typeof refresh;
-}, __VLS_44: {};
+}, __VLS_52: {};
 type __VLS_Slots = {} & {
-    footer?: (props: typeof __VLS_33) => any;
+    footer?: (props: typeof __VLS_41) => any;
 } & {
-    error?: (props: typeof __VLS_35) => any;
+    error?: (props: typeof __VLS_43) => any;
 } & {
-    empty?: (props: typeof __VLS_44) => any;
+    empty?: (props: typeof __VLS_52) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     resetColumnSizing: () => void;

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 } from '../../types/index.js';
+import type { GenericObject, TableTreeMotion, TableTreeNode } from '../../types/index.js';
 import type { tableRowCells } from './table-layout.js';
 type __VLS_Props = {
     rowId: string;
@@ -13,7 +13,20 @@ type __VLS_Props = {
     selected: boolean;
     appended: boolean;
     rowClass?: HTMLAttributes['class'];
+    /** Where the row sits in the tree; absent unless the schema configures `table.tree`. */
+    node?: TableTreeNode;
+    expanded?: boolean;
+    /** Whether the tree cell carries a checkbox for this row. */
+    checkbox?: boolean;
+    /** The row is being revealed or concealed by a branch opening or closing. */
+    motion?: TableTreeMotion;
 };
-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 __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (event: MouseEvent) => any;
+    toggle: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((event: MouseEvent) => any) | undefined;
+    onToggle?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,5 +1,6 @@
 <script setup>
 import TableCell from "./table-cell";
+import TableTreeControl from "./table-tree-control.vue";
 defineProps({
   rowId: { type: String, required: true },
   original: { type: Object, required: true },
@@ -7,8 +8,13 @@ defineProps({
   cells: { type: null, required: true },
   selected: { type: Boolean, required: true },
   appended: { type: Boolean, required: true },
-  rowClass: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
+  rowClass: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+  node: { type: Object, required: false },
+  expanded: { type: Boolean, required: false },
+  checkbox: { type: Boolean, required: false },
+  motion: { type: Object, required: false }
 });
+const emit = defineEmits(["toggle", "select"]);
 </script>
 
 <template>
@@ -17,10 +23,13 @@ defineProps({
     :class="[
   selected ? 'nut-dl-row--selected' : '',
   appended ? 'nut-dl-row--appended' : '',
+  motion ? `nut-dl-row--${motion.kind === 'enter' ? 'reveal' : 'conceal'}` : '',
   rowClass
 ]"
+    :style="motion ? { '--nut-dl-tree-i': motion.order } : void 0"
     :data-index="index"
     :data-row-id="rowId"
+    :data-tree-depth="node?.depth"
   >
     <template v-for="slot in cells" :key="slot.key">
       <td v-if="slot.kind === 'fill'" class="nut-dl-table__fill p-0" aria-hidden="true" />
@@ -37,7 +46,19 @@ defineProps({
         :data-col="slot.columnId"
         :style="slot.layout.style"
       >
-        <div class="nut-dl-td__inner min-w-0" :class="slot.layout.innerClass">
+        <template v-if="slot.layout.internal === 'tree'">
+          <TableTreeControl
+            v-if="node"
+            :node="node"
+            :expanded="expanded === true"
+            :index="index"
+            :selected="selected"
+            :checkbox="checkbox === true"
+            @toggle="emit('toggle')"
+            @select="emit('select', $event)"
+          />
+        </template>
+        <div v-else class="nut-dl-td__inner min-w-0" :class="slot.layout.innerClass">
           <TableCell
             v-if="slot.layout.render"
             :index="index"

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 } from '../../types/index.js';
+import type { GenericObject, TableTreeMotion, TableTreeNode } from '../../types/index.js';
 import type { tableRowCells } from './table-layout.js';
 type __VLS_Props = {
     rowId: string;
@@ -13,7 +13,20 @@ type __VLS_Props = {
     selected: boolean;
     appended: boolean;
     rowClass?: HTMLAttributes['class'];
+    /** Where the row sits in the tree; absent unless the schema configures `table.tree`. */
+    node?: TableTreeNode;
+    expanded?: boolean;
+    /** Whether the tree cell carries a checkbox for this row. */
+    checkbox?: boolean;
+    /** The row is being revealed or concealed by a branch opening or closing. */
+    motion?: TableTreeMotion;
 };
-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 __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (event: MouseEvent) => any;
+    toggle: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((event: MouseEvent) => any) | undefined;
+    onToggle?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,19 @@
+import type { TableTreeNode } from '../../types/index.js';
+type __VLS_Props = {
+    node: TableTreeNode;
+    expanded: boolean;
+    /** The row's position in the rendered list: a lit rail stops at the row under the pointer. */
+    index: number;
+    selected: boolean;
+    /** Whether the row carries a checkbox; its width is reserved either way. */
+    checkbox: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (event: MouseEvent) => any;
+    toggle: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((event: MouseEvent) => any) | undefined;
+    onToggle?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,112 @@
+<script setup>
+import { computed } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useTableInternals } from "../../composables/use-table-internals";
+import { getTreeLineage, getTreeRails } from "../../utils/tree";
+import TableSelectionControl from "./table-selection-control.vue";
+const props = defineProps({
+  node: { type: Object, required: true },
+  expanded: { type: Boolean, required: true },
+  index: { type: Number, required: true },
+  selected: { type: Boolean, required: true },
+  checkbox: { type: Boolean, required: true }
+});
+const emit = defineEmits(["toggle", "select"]);
+const { t } = useUiToolsLocale();
+const { tree } = useTableInternals();
+const lineage = computed(() => getTreeLineage(props.node));
+const rails = computed(() => getTreeRails(props.node));
+const lit = computed(() => {
+  let states = "";
+  for (let position = 0; position < props.node.depth; position += 1) {
+    const group = lineage.value[position];
+    const until = group === void 0 ? -1 : tree.litUntil(group.id);
+    states += props.index === until ? "t" : props.index < until ? "v" : "-";
+  }
+  return states;
+});
+const onPath = computed(() => tree.isOnPath(props.node.id));
+const gutters = computed(
+  () => Array.from({ length: props.node.depth }, (_, position) => {
+    const own = position === props.node.depth - 1;
+    return {
+      /* This row's own level: down from the top, then a rounded turn toward the chevron. */
+      elbow: own,
+      lit: lit.value[position],
+      position,
+      /* An ancestor with a sibling still to come keeps its rail running through this row. */
+      rail: !own && rails.value[position] === true,
+      /* Siblings follow, so this row's own rail carries on below the turn. */
+      tail: own && !props.node.isLast
+    };
+  })
+);
+function onKeydown(event) {
+  const opens = event.key === "ArrowRight" && !props.expanded;
+  const closes = event.key === "ArrowLeft" && props.expanded;
+  if (!opens && !closes) return;
+  event.preventDefault();
+  emit("toggle");
+}
+</script>
+
+<template>
+  <div class="nut-dl-tree" :class="{ 'nut-dl-tree--leaf': !node.hasChildren }">
+    <span class="nut-dl-tree__rule" aria-hidden="true" />
+    <span
+      v-for="gutter in gutters"
+      :key="gutter.position"
+      class="nut-dl-tree__gutter"
+      :class="{
+  'nut-dl-tree__gutter--elbow': gutter.elbow,
+  'nut-dl-tree__gutter--rail': gutter.rail,
+  'nut-dl-tree__gutter--tail': gutter.tail
+}"
+      :data-lit="gutter.lit === '-' ? void 0 : gutter.lit"
+      aria-hidden="true"
+    />
+    <span
+      class="nut-dl-tree__node"
+      :data-open="expanded || void 0"
+      :data-path="onPath || void 0"
+    >
+      <button
+        v-if="node.hasChildren"
+        type="button"
+        class="nut-dl-tree__toggle"
+        :aria-expanded="expanded"
+        :aria-label="expanded ? t('table.tree.collapse') : t('table.tree.expand')"
+        @click.stop="emit('toggle')"
+        @keydown="onKeydown"
+      >
+        <svg viewBox="0 0 24 24" width="12" height="12" fill="none" aria-hidden="true">
+          <path
+            d="m9 18 6-6-6-6"
+            stroke="currentColor"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+      <!--
+        A childless row keeps the chevron's footprint empty, so every elbow and rail lines up with
+        its siblings that do have one. This branch and the shared width in `.nut-dl-tree__slot`
+        are the whole decision: drop both to let childless rows pull left instead.
+      -->
+      <span v-else class="nut-dl-tree__slot" aria-hidden="true" />
+    </span>
+    <span class="nut-dl-tree__check">
+      <TableSelectionControl
+        v-if="checkbox"
+        :model-value="selected"
+        :ariaLabel="t('table.tree.selectRow')"
+        @toggle="emit('select', $event)"
+      />
+    </span>
+  </div>
+</template>
+
+<style>
+.nut-dl-tree{align-items:stretch;display:flex;inset:0;padding-left:var(--nut-dl-tree-lead);position:absolute;--nut-dl-tree-axis:calc(var(--nut-dl-tree-toggle)/2);--nut-dl-tree-arm:calc(var(--nut-dl-tree-gutter) - var(--nut-dl-tree-axis) + 1px)}.nut-dl-tree--leaf{--nut-dl-tree-arm:var(--nut-dl-tree-gutter)}.nut-dl-tree__gutter{--nut-dl-tree-vertical:var(--nut-dl-rail);--nut-dl-tree-turn:var(--nut-dl-rail);--nut-dl-tree-tail:var(--nut-dl-rail);align-self:stretch;flex:none;position:relative;width:var(--nut-dl-tree-gutter)}.nut-dl-tree__gutter[data-lit=v]{--nut-dl-tree-vertical:var(--nut-dl-rail-lit);--nut-dl-tree-tail:var(--nut-dl-rail-lit)}.nut-dl-tree__gutter[data-lit=t]{--nut-dl-tree-vertical:var(--nut-dl-rail-lit);--nut-dl-tree-turn:var(--nut-dl-rail-lit)}.nut-dl-tree__gutter--rail:before,.nut-dl-tree__gutter--tail:after{content:"";left:var(--nut-dl-tree-axis);position:absolute;transition:background-color .14s ease;width:1px}.nut-dl-tree__gutter--rail:before{background:var(--nut-dl-tree-vertical)}.nut-dl-tree__gutter--tail:after{background:var(--nut-dl-tree-tail)}.nut-dl-tree__gutter--rail:before{bottom:0;top:0}.nut-dl-tree__gutter--tail:after{bottom:0;top:50%}.nut-dl-tree__gutter--elbow:before{border-bottom:1px solid var(--nut-dl-tree-turn);border-bottom-left-radius:var(--nut-dl-rail-radius);border-left:1px solid var(--nut-dl-tree-vertical);box-sizing:border-box;content:"";height:50%;left:var(--nut-dl-tree-axis);position:absolute;top:0;transition:border-color .14s ease;width:var(--nut-dl-tree-arm)}.nut-dl-tree__node{align-items:center;align-self:stretch;display:flex;flex:none;position:relative}.nut-dl-tree__node:after{background:var(--nut-dl-rail);bottom:0;content:"";left:var(--nut-dl-tree-axis);opacity:0;position:absolute;top:calc(50% + var(--nut-dl-tree-axis) + 1px);transition:opacity .16s ease,background-color .14s ease;width:1px}.nut-dl-tree__node[data-open]:after{opacity:1}.nut-dl-tree__node[data-path]:after{background:var(--nut-dl-rail-lit)}.nut-dl-tree__slot,.nut-dl-tree__toggle{flex:none;height:var(--nut-dl-tree-toggle);width:var(--nut-dl-tree-toggle)}.nut-dl-tree__toggle{background:transparent;border:0;border-radius:var(--nut-dl-rail-radius);color:var(--ui-text-dimmed);cursor:pointer;display:grid;outline:none;padding:0;place-items:center;position:relative;transition:background-color .12s ease,color .12s ease,transform .12s ease}.nut-dl-tree__toggle:before{content:"";inset:-8px -5px;position:absolute}.nut-dl-tree__toggle:hover{background:var(--nut-dl-toggle-hover);color:var(--ui-text-highlighted)}.nut-dl-tree__toggle:active{background:color-mix(in srgb,var(--ui-text) 10%,var(--nut-dl-toggle-hover));transform:scale(.9)}.nut-dl-tree__toggle:focus-visible{outline:2px solid var(--nut-dl-accent);outline-offset:1px}.nut-dl-tree__toggle[aria-expanded=true]{color:var(--ui-text-toned)}.nut-dl-tree__toggle svg{transition:transform .18s cubic-bezier(.2,.8,.2,1)}.nut-dl-tree__toggle[aria-expanded=true] svg{transform:rotate(90deg)}.nut-dl-tree__check{align-items:center;align-self:stretch;display:flex;flex:none;margin-left:var(--nut-dl-tree-gap);width:var(--nut-dl-tree-check)}.nut-dl-tree__rule{background:var(--nut-dl-line-soft);height:1px;inset:auto 0 0;position:absolute}.nut-dl-table__table tbody:has(+tfoot)>.nut-dl-row:last-child .nut-dl-tree__rule{display:none}.nut-dl-row>.nut-dl-td.nut-dl-td--tree,.nut-dl-row>.nut-dl-td.nut-dl-td--tree:first-child{border-bottom:0;padding:0}.nut-dl-td--tree:not(.nut-dl-pin){position:relative}.nut-dl-th--tree .nut-dl-th__static{padding-left:var(--nut-dl-tree-lead);padding-right:0}.nut-dl-row--reveal{animation:nut-dl-tree-reveal .19s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--nut-dl-tree-i, 0)*24ms)}.nut-dl-row--conceal{animation:nut-dl-tree-conceal .12s ease-in both;pointer-events:none}@keyframes nut-dl-tree-reveal{0%{opacity:0;transform:translateY(calc(var(--nut-dl-tree-shift)*-1))}to{opacity:1;transform:none}}@keyframes nut-dl-tree-conceal{0%{opacity:1;transform:none}to{opacity:0;transform:translateY(calc(var(--nut-dl-tree-shift)*-1))}}@media (prefers-reduced-motion:reduce){.nut-dl-row--conceal,.nut-dl-row--reveal{animation:none}.nut-dl-tree__gutter--elbow:before,.nut-dl-tree__gutter--rail:before,.nut-dl-tree__gutter--tail:after,.nut-dl-tree__node:after,.nut-dl-tree__toggle,.nut-dl-tree__toggle svg{transition:none}}
+</style>

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

@@ -0,0 +1,19 @@
+import type { TableTreeNode } from '../../types/index.js';
+type __VLS_Props = {
+    node: TableTreeNode;
+    expanded: boolean;
+    /** The row's position in the rendered list: a lit rail stops at the row under the pointer. */
+    index: number;
+    selected: boolean;
+    /** Whether the row carries a checkbox; its width is reserved either way. */
+    checkbox: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (event: MouseEvent) => any;
+    toggle: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((event: MouseEvent) => any) | undefined;
+    onToggle?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;