nuxt-ui-tools 1.17.1 → 1.19.0

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

@@ -0,0 +1,102 @@
+<script setup>
+import ULink from "@nuxt/ui/components/Link.vue";
+import { computed } from "vue";
+import { isNullish } from "../../../shared/utils/predicate";
+import { useTableInternals } from "../../composables/use-table-internals";
+import {
+  TABLE_SUMMARY_DETAILS_SEPARATOR,
+  TABLE_SUMMARY_SLOT_CLASSES
+} from "../../constants/summary";
+import { mergeDataListUiClass } from "../../utils";
+import TableRowScopeProvider from "../actions/table-row-scope-provider.vue";
+import TableRowActionsControl from "../table/table-row-actions-control.vue";
+import TableSelectionControl from "../table/table-selection-control.vue";
+import SummaryContent from "./summary-content";
+const props = defineProps({
+  rowId: { type: String, required: true },
+  original: { type: Object, required: true },
+  index: { type: Number, required: true },
+  selected: { type: Boolean, required: true },
+  selectable: { type: Boolean, required: true },
+  actions: { type: Boolean, required: true },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["select"]);
+const internals = useTableInternals();
+const summary = computed(() => internals.schema.value.table?.summary);
+const params = computed(() => ({
+  context: internals.queryContent.contextData.value,
+  index: props.index,
+  layout: internals.controls.tableLayout.value,
+  pageContext: internals.queryContent.pageContextData.value,
+  row: props.original,
+  tableApi: internals.tableApi
+}));
+const title = computed(() => String(summary.value?.title(params.value) ?? ""));
+const target = computed(() => summary.value?.to?.(params.value));
+const interactive = computed(() => target.value !== void 0 || Boolean(summary.value?.onSelect));
+const details = computed(() => joinDetails(summary.value?.details?.(params.value) ?? []));
+function joinDetails(values) {
+  return values.filter((value) => value !== false && value !== "" && !isNullish(value)).join(TABLE_SUMMARY_DETAILS_SEPARATOR);
+}
+function css(slot, extra = "") {
+  return mergeDataListUiClass(
+    `${TABLE_SUMMARY_SLOT_CLASSES[slot]} ${extra}`,
+    void 0,
+    props.ui?.[slot]
+  );
+}
+function select() {
+  summary.value?.onSelect?.(params.value);
+}
+</script>
+
+<template>
+  <li
+    :class="css('row')"
+    :data-row-id="rowId"
+    :data-index="index"
+    :data-selected="selected"
+    :data-interactive="interactive"
+  >
+    <div v-if="selectable" :class="css('select')">
+      <TableSelectionControl
+        class="min-h-11 min-w-11 justify-center"
+        :model-value="selected"
+        :row="original"
+        :index="index"
+        @toggle="emit('select', $event)"
+      />
+    </div>
+    <ULink
+      :as="interactive ? 'button' : 'div'"
+      :to="target"
+      raw
+      :class="
+  css(
+    'main',
+    `${selectable ? 'ps-1' : 'ps-[var(--nut-dl-summary-x)]'} ${actions ? 'pe-1' : 'pe-[var(--nut-dl-summary-x)]'}`
+  )
+"
+      @click="select"
+    >
+      <span v-if="summary?.leading" :class="css('leading')">
+        <SummaryContent :render="summary.leading" :params="params" />
+      </span>
+      <span :class="css('body')">
+        <span :class="css('title')" :title="title">{{ title }}</span>
+        <span v-if="summary?.status || details" :class="css('meta')">
+          <span v-if="summary?.status" :class="css('status')">
+            <SummaryContent :render="summary.status" :params="params" />
+          </span>
+          <span v-if="details" :class="css('details')">{{ details }}</span>
+        </span>
+      </span>
+    </ULink>
+    <div v-if="actions" :class="css('actions')">
+      <TableRowScopeProvider :scope="params">
+        <TableRowActionsControl />
+      </TableRowScopeProvider>
+    </div>
+  </li>
+</template>

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

@@ -0,0 +1,19 @@
+import type { DataListSummaryUi, GenericObject } from '../../types/index.js';
+type __VLS_Props = {
+    rowId: string;
+    original: GenericObject;
+    index: number;
+    selected: boolean;
+    /** The row carries a checkbox. */
+    selectable: boolean;
+    /** The row carries the row-actions button. */
+    actions: boolean;
+    ui?: DataListSummaryUi;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((event: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/table/table-empty-state.vue

@@ -3,9 +3,10 @@ import UButton from "@nuxt/ui/components/Button.vue";
 import UIcon from "@nuxt/ui/components/Icon.vue";
 import { computed } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
+import { resolveTextValue } from "../../../shared/utils/render";
 import { useDataListUi } from "../../composables/use-data-list-ui";
 import { useTableInternals } from "../../composables/use-table-internals";
-import { mergeDataListUiClass } from "../../utils";
+import { mergeDataListProps, mergeDataListUiClass } from "../../utils";
 const props = defineProps({
   minHeight: { type: String, required: false },
   size: { type: String, required: false }
@@ -14,22 +15,42 @@ const { t } = useUiToolsLocale();
 const internals = useTableInternals();
 const dataListUi = useDataListUi();
 const ui = computed(() => dataListUi.ui.value.table?.ui);
-const emptyProps = computed(() => dataListUi.ui.value.table?.props?.empty);
 const filtered = computed(
   () => internals.filters.hasActiveUiFilters.value || Boolean(internals.filters.searchQuery.value)
 );
-const custom = computed(() => filtered.value ? void 0 : emptyProps.value);
+const custom = computed(() => {
+  if (filtered.value) return void 0;
+  const own = internals.schema.value.empty;
+  const app = dataListUi.ui.value.table?.props?.empty;
+  return {
+    action: own?.action ?? app?.action,
+    description: own?.description ?? app?.description,
+    icon: own?.icon ?? app?.icon,
+    title: own?.title ?? app?.title
+  };
+});
 const icon = computed(
   () => custom.value?.icon ?? (filtered.value ? "i-lucide-search-x" : "i-lucide-inbox")
 );
 const title = computed(
-  () => custom.value?.title ?? (filtered.value ? t("table.states.empty.filteredTitle") : t("table.states.empty.title"))
+  () => resolveTextValue(
+    custom.value?.title,
+    filtered.value ? t("table.states.empty.filteredTitle") : t("table.states.empty.title")
+  )
 );
 const description = computed(() => {
-  if (custom.value?.description === false) {
-    return "";
-  }
-  return custom.value?.description || (filtered.value ? t("table.states.empty.filteredDescription") : t("table.states.empty.description"));
+  if (custom.value?.description === false) return "";
+  return resolveTextValue(custom.value?.description) || (filtered.value ? t("table.states.empty.filteredDescription") : t("table.states.empty.description"));
+});
+const action = computed(() => {
+  const configured = custom.value?.action;
+  if (!configured) return void 0;
+  const { label, onClick, ...button } = configured;
+  return {
+    button: mergeDataListProps({ color: "primary", size: "md" }, button),
+    label: resolveTextValue(label),
+    onClick
+  };
 });
 function reset() {
   internals.filters.clearAllFilters();
@@ -66,18 +87,27 @@ function reset() {
       {{ description }}
     </p>
     <div
-      v-if="filtered || $slots.actions"
+      v-if="filtered || action || $slots.actions"
       class="nut-dl-empty__actions mt-4 flex items-center gap-2"
     >
       <slot name="actions">
         <UButton
+          v-if="filtered"
           color="neutral"
           variant="outline"
           size="sm"
           icon="i-lucide-rotate-ccw"
           :label="t('table.states.empty.reset')"
+          :ui="{ base: mergeDataListUiClass('nut-dl-empty__action', void 0, ui?.emptyAction) }"
           @click="reset"
         />
+        <UButton
+          v-else-if="action"
+          v-bind="action.button"
+          :label="action.label"
+          :ui="{ base: mergeDataListUiClass('nut-dl-empty__action', void 0, ui?.emptyAction) }"
+          @click="action.onClick"
+        />
       </slot>
     </div>
   </div>

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

@@ -934,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-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}}
+  );--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-cell-y:0px}.nut-dl-td--selection .nut-dl-td__inner{overflow:visible}.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-row-actions-control.vue

@@ -5,6 +5,7 @@ import { useDataListUi } from "../../composables/use-data-list-ui";
 import { mergeDataListProps } from "../../utils";
 import RowActions from "../actions/row-actions.vue";
 const dataListUi = useDataListUi();
+const ui = computed(() => dataListUi.ui.value.table?.ui);
 const buttonProps = computed(
   () => mergeDataListProps(
     {
@@ -31,12 +32,15 @@ const buttonProps = computed(
   itemLeadingIcon: 'size-3.5'
 }"
     >
-      <UButton
-        v-bind="buttonProps"
-        square
-        aria-label="Row actions"
-        class="nut-dl-rowbtn text-muted hover:text-default focus-visible:text-default"
-      />
+      <template #default="{ label }">
+        <UButton
+          v-bind="buttonProps"
+          square
+          :aria-label="label"
+          :ui="{ base: ui?.rowAction }"
+          class="nut-dl-rowbtn text-muted hover:text-default focus-visible:text-default"
+        />
+      </template>
     </RowActions>
   </div>
 </template>

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

@@ -1,6 +1,10 @@
+import type { GenericObject } from '../../types/index.js';
 type __VLS_Props = {
     modelValue: boolean | 'indeterminate';
-    ariaLabel: string;
+    /** The record this checkbox selects; without one it selects every row. */
+    row?: GenericObject;
+    /** Where the record sits in the rendered rows: it names the record when the schema has no `rowLabel`. */
+    index?: number;
 };
 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

@@ -2,13 +2,26 @@
 import UCheckbox from "@nuxt/ui/components/Checkbox.vue";
 import { computed } from "vue";
 import { useDataListUi } from "../../composables/use-data-list-ui";
-import { mergeDataListProps } from "../../utils";
+import { useTableRowLabels } from "../../composables/use-table-row-labels";
+import { mergeDataListProps, mergeDataListUiClass } from "../../utils";
 const props = defineProps({
   modelValue: { type: [Boolean, String], required: true },
-  ariaLabel: { type: String, required: true }
+  row: { type: Object, required: false },
+  index: { type: Number, required: false }
 });
 const emit = defineEmits(["toggle"]);
 const dataListUi = useDataListUi();
+const labels = useTableRowLabels();
+const areaClass = computed(
+  () => mergeDataListUiClass(
+    "nut-dl-select inline-flex items-center",
+    void 0,
+    dataListUi.ui.value.table?.ui?.selectControl
+  )
+);
+const ariaLabel = computed(
+  () => props.row ? labels.selectRow({ index: props.index ?? 0, row: props.row }) : labels.selectAll()
+);
 const checkboxProps = computed(
   () => mergeDataListProps(
     { color: "primary", size: dataListUi.controlSize.value },
@@ -23,11 +36,11 @@ function toggle(event) {
 </script>
 
 <template>
-  <span class="inline-flex items-center" @click="toggle">
+  <span :class="areaClass" @click="toggle">
     <UCheckbox
       v-bind="checkboxProps"
       :model-value="props.modelValue"
-      :aria-label="props.ariaLabel"
+      :aria-label="ariaLabel"
       class="nut-dl-check"
     />
   </span>

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

@@ -1,6 +1,10 @@
+import type { GenericObject } from '../../types/index.js';
 type __VLS_Props = {
     modelValue: boolean | 'indeterminate';
-    ariaLabel: string;
+    /** The record this checkbox selects; without one it selects every row. */
+    row?: GenericObject;
+    /** Where the record sits in the rendered rows: it names the record when the schema has no `rowLabel`. */
+    index?: number;
 };
 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-tree-control.vue

@@ -100,7 +100,8 @@ function onKeydown(event) {
       <TableSelectionControl
         v-if="checkbox"
         :model-value="selected"
-        :ariaLabel="t('table.tree.selectRow')"
+        :row="node.row"
+        :index="index"
         @toggle="emit('select', $event)"
       />
     </span>

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

@@ -54,7 +54,6 @@ function toggle() {
       <TableSelectionControl
         v-if="selection.selectionEnabled.value"
         :model-value="checkState"
-        :ariaLabel="t('table.tree.selectAll')"
         @toggle="selection.toggleAllRows({ selected: !selection.allSelected.value })"
       />
     </span>

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

@@ -6,6 +6,7 @@ import type { UseTableDataReturn } from './use-table-data.js';
 import type { useTableFilters } from './use-table-filters.js';
 import type { useTableLayout } from './use-table-layout.js';
 import type { useTablePagination } from './use-table-pagination.js';
+import type { useTableRowSummary } from './use-table-row-summary.js';
 import type { useTableSelection } from './use-table-selection.js';
 import type { useTableState } from './use-table-state.js';
 import type { useTableTree } from './use-table-tree.js';
@@ -21,5 +22,6 @@ export interface UseTableApiParams<TSchema = TableSchemaView> {
     filters: ReturnType<typeof useTableFilters>;
     pagination: ReturnType<typeof useTablePagination>;
     queryContent: UseTableDataReturn;
+    rowSummary: ReturnType<typeof useTableRowSummary>;
 }
 export declare function useTableApi<TSchema = TableSchemaView>(params: UseTableApiParams<TSchema>): TableApi<TSchema>;

package/dist/runtime/table/composables/use-table-api.js

@@ -49,6 +49,13 @@ export function useTableApi(params) {
     },
     state: params.controls.layoutState
   };
+  const summary = {
+    set: params.rowSummary.setActive,
+    state: computed(() => ({
+      active: params.rowSummary.active.value,
+      available: params.rowSummary.available.value
+    }))
+  };
   const filters = {
     activeCount: computed(() => params.filters.activeUiFilters.value.length),
     clear: params.filters.clearAllFilters,
@@ -111,6 +118,7 @@ export function useTableApi(params) {
     selection,
     sorting,
     state,
+    summary,
     updateRow: data.updateRow,
     updateRows: data.updateRows
   };

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

@@ -41,6 +41,8 @@ export declare function useTableColumns(params: UseTableColumnsParams): {
         cell: ({ row }: {
             row: {
                 id: string;
+                original: import("../types/index.js").GenericObject;
+                index: number;
             };
         }) => import("vue/jsx-runtime").JSX.Element;
         enableHiding: boolean;

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

@@ -1,9 +1,11 @@
 import type { ComputedRef } from 'vue';
 import type { TableControlsSchema, TableLayout, TableSchemaView } from '../types/index.js';
 import type { useTableLayout } from './use-table-layout.js';
+import type { useTableRowSummary } from './use-table-row-summary.js';
 export interface UseTableControlsParams {
     schema: ComputedRef<TableSchemaView>;
     layout: ReturnType<typeof useTableLayout>;
+    rowSummary: ReturnType<typeof useTableRowSummary>;
 }
 export declare function useTableControls(options: UseTableControlsParams): {
     columnsPanelOpen: import("vue").Ref<boolean, boolean>;
@@ -39,6 +41,10 @@ export declare function useTableControls(options: UseTableControlsParams): {
             grid: ComputedRef<boolean | null>;
             table: ComputedRef<boolean | null>;
         };
+        summary: {
+            grid: ComputedRef<boolean | null>;
+            table: ComputedRef<boolean | null>;
+        };
     };
     setTableLayout: (layout: TableLayout) => void;
     tableEnabled: ComputedRef<boolean>;

package/dist/runtime/table/composables/use-table-controls.js

@@ -13,15 +13,18 @@ export function useTableControls(options) {
     filters: responsiveControl("filters"),
     layout: responsiveControl("layout"),
     refresh: responsiveControl("refresh"),
-    sort: responsiveControl("sort")
+    sort: responsiveControl("sort"),
+    summary: responsiveControl("summary")
   };
   const headerControls = computed(() => ({
     actions: Boolean(rawControls.actions[tableLayout.value].value) && Boolean(options.schema.value.toolbarActions?.length),
-    columns: Boolean(rawControls.columns[tableLayout.value].value) && tableLayout.value === "table",
+    columns: Boolean(rawControls.columns[tableLayout.value].value) && tableLayout.value === "table" && !options.rowSummary.active.value,
     filters: Boolean(rawControls.filters[tableLayout.value].value) && Boolean(options.schema.value.filters?.ui?.length),
     layout: Boolean(rawControls.layout[tableLayout.value].value) && gridEnabled.value && tableEnabled.value,
     refresh: Boolean(rawControls.refresh[tableLayout.value].value),
-    sort: Boolean(rawControls.sort[tableLayout.value].value) && tableLayout.value === "grid" && Boolean(options.schema.value.grid?.sortOptions?.length)
+    /* Summary rows have no column headers to sort by, so the menu stands in for them. */
+    sort: Boolean(rawControls.sort[tableLayout.value].value) && (tableLayout.value === "grid" && Boolean(options.schema.value.grid?.sortOptions?.length) || options.rowSummary.active.value),
+    summary: Boolean(rawControls.summary[tableLayout.value].value) && options.rowSummary.available.value
   }));
   const layoutState = computed(() => {
     const available = [];

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

@@ -60,6 +60,10 @@ declare function createTableInternals<TSchema>(options: {
                 grid: import("vue").ComputedRef<boolean | null>;
                 table: import("vue").ComputedRef<boolean | null>;
             };
+            summary: {
+                grid: import("vue").ComputedRef<boolean | null>;
+                table: import("vue").ComputedRef<boolean | null>;
+            };
         };
         setTableLayout: (layout: import("../types/index.js").TableLayout) => void;
         tableEnabled: import("vue").ComputedRef<boolean>;
@@ -327,6 +331,11 @@ declare function createTableInternals<TSchema>(options: {
         } | null>;
     };
     resolvedFilterState: import("vue").ComputedRef<import("../types/index.js").TableResolvedFilterGroup<string>>;
+    rowSummary: {
+        active: import("vue").ComputedRef<boolean>;
+        available: import("vue").ComputedRef<boolean>;
+        setActive: (next: boolean) => void;
+    };
     schema: import("vue").ComputedRef<TableSchemaView>;
     selection: {
         allSelected: import("vue").ComputedRef<boolean>;
@@ -433,6 +442,8 @@ declare function createTableInternals<TSchema>(options: {
             cell: ({ row }: {
                 row: {
                     id: string;
+                    original: import("../types/index.js").GenericObject;
+                    index: number;
                 };
             }) => import("vue/jsx-runtime").JSX.Element;
             enableHiding: boolean;
@@ -672,6 +683,10 @@ declare function useProvideTableInternals<TSchema>(options: {
                 grid: import("vue").ComputedRef<boolean | null>;
                 table: import("vue").ComputedRef<boolean | null>;
             };
+            summary: {
+                grid: import("vue").ComputedRef<boolean | null>;
+                table: import("vue").ComputedRef<boolean | null>;
+            };
         };
         setTableLayout: (layout: import("../types/index.js").TableLayout) => void;
         tableEnabled: import("vue").ComputedRef<boolean>;
@@ -939,6 +954,11 @@ declare function useProvideTableInternals<TSchema>(options: {
         } | null>;
     };
     resolvedFilterState: import("vue").ComputedRef<import("../types/index.js").TableResolvedFilterGroup<string>>;
+    rowSummary: {
+        active: import("vue").ComputedRef<boolean>;
+        available: import("vue").ComputedRef<boolean>;
+        setActive: (next: boolean) => void;
+    };
     schema: import("vue").ComputedRef<TableSchemaView>;
     selection: {
         allSelected: import("vue").ComputedRef<boolean>;
@@ -1045,6 +1065,8 @@ declare function useProvideTableInternals<TSchema>(options: {
             cell: ({ row }: {
                 row: {
                     id: string;
+                    original: import("../types/index.js").GenericObject;
+                    index: number;
                 };
             }) => import("vue/jsx-runtime").JSX.Element;
             enableHiding: boolean;
@@ -1281,6 +1303,10 @@ declare function useTableInternals(): {
                 grid: import("vue").ComputedRef<boolean | null>;
                 table: import("vue").ComputedRef<boolean | null>;
             };
+            summary: {
+                grid: import("vue").ComputedRef<boolean | null>;
+                table: import("vue").ComputedRef<boolean | null>;
+            };
         };
         setTableLayout: (layout: import("../types/index.js").TableLayout) => void;
         tableEnabled: import("vue").ComputedRef<boolean>;
@@ -1548,6 +1574,11 @@ declare function useTableInternals(): {
         } | null>;
     };
     resolvedFilterState: import("vue").ComputedRef<import("../types/index.js").TableResolvedFilterGroup<string>>;
+    rowSummary: {
+        active: import("vue").ComputedRef<boolean>;
+        available: import("vue").ComputedRef<boolean>;
+        setActive: (next: boolean) => void;
+    };
     schema: import("vue").ComputedRef<TableSchemaView>;
     selection: {
         allSelected: import("vue").ComputedRef<boolean>;
@@ -1654,6 +1685,8 @@ declare function useTableInternals(): {
             cell: ({ row }: {
                 row: {
                     id: string;
+                    original: import("../types/index.js").GenericObject;
+                    index: number;
                 };
             }) => import("vue/jsx-runtime").JSX.Element;
             enableHiding: boolean;

package/dist/runtime/table/composables/use-table-internals.js

@@ -10,6 +10,7 @@ import { useTableFilters } from "./use-table-filters.js";
 import { useTableGrid } from "./use-table-grid.js";
 import { useTableLayout } from "./use-table-layout.js";
 import { useTablePagination } from "./use-table-pagination.js";
+import { useTableRowSummary } from "./use-table-row-summary.js";
 import { useTableSelection } from "./use-table-selection.js";
 import { useTableStartup } from "./use-table-startup.js";
 import { useTableState } from "./use-table-state.js";
@@ -39,8 +40,14 @@ function createTableInternals(options) {
     schema,
     tree
   });
+  const rowSummary = useTableRowSummary({
+    layout,
+    schema,
+    tree
+  });
   const controls = useTableControls({
     layout,
+    rowSummary,
     schema
   });
   const filters = useTableFilters({
@@ -84,6 +91,7 @@ function createTableInternals(options) {
     pagination,
     publicSchema,
     queryContent,
+    rowSummary,
     runtimeSchema: schema,
     selection,
     state,
@@ -109,6 +117,7 @@ function createTableInternals(options) {
     queryContent,
     queryState: state.queryState,
     resolvedFilterState: state.resolvedFilterState,
+    rowSummary,
     schema,
     selection,
     startup,

package/dist/runtime/table/composables/use-table-row-labels.d.ts

@@ -0,0 +1,16 @@
+import type { GenericObject } from '../types/index.js';
+/**
+ * Accessible names for the controls of a record. A record is named by the schema's `rowLabel`;
+ * without one, or when it returns nothing for this record, by its position on the page.
+ */
+export declare function useTableRowLabels(): {
+    rowActions: (params: {
+        row: GenericObject;
+        index: number;
+    }) => string;
+    selectAll: () => string;
+    selectRow: (params: {
+        row: GenericObject;
+        index: number;
+    }) => string;
+};

package/dist/runtime/table/composables/use-table-row-labels.js

@@ -0,0 +1,22 @@
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { isNullish } from "../../shared/utils/predicate.js";
+import { useTableInternals } from "./use-table-internals.js";
+const ROW_NAME_KEYS = {
+  actions: { named: "table.rowActions.label", positioned: "table.rowActions.labelAt" },
+  select: { named: "table.selection.selectRow", positioned: "table.selection.selectRowAt" }
+};
+export function useTableRowLabels() {
+  const internals = useTableInternals();
+  const { t } = useUiToolsLocale();
+  function name(kind, params) {
+    const keys = ROW_NAME_KEYS[kind];
+    const label = internals.schema.value.rowLabel?.(params.row);
+    const text = isNullish(label) ? "" : String(label).trim();
+    return text ? t(keys.named, { label: text }) : t(keys.positioned, { position: params.index + 1 });
+  }
+  return {
+    rowActions: (params) => name("actions", params),
+    selectAll: () => t("table.selection.selectAll"),
+    selectRow: (params) => name("select", params)
+  };
+}

package/dist/runtime/table/composables/use-table-row-summary.d.ts

@@ -0,0 +1,18 @@
+import type { ComputedRef } from 'vue';
+import type { TableSchemaView } from '../types/index.js';
+import type { useTableLayout } from './use-table-layout.js';
+import type { useTableTree } from './use-table-tree.js';
+export interface UseTableRowSummaryParams {
+    schema: ComputedRef<TableSchemaView>;
+    layout: ReturnType<typeof useTableLayout>;
+    tree: ReturnType<typeof useTableTree>;
+}
+/**
+ * Decides whether the table layout reads as summary rows. `available` is what the schema and the
+ * viewport allow; `active` also honours the reader's choice, which the toggle changes.
+ */
+export declare function useTableRowSummary(params: UseTableRowSummaryParams): {
+    active: ComputedRef<boolean>;
+    available: ComputedRef<boolean>;
+    setActive: (next: boolean) => void;
+};