nuxt-ui-tools 1.17.0 → 1.18.0

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

@@ -0,0 +1,282 @@
+<script setup>
+import { useVirtualizer } from "@tanstack/vue-virtual";
+import { useElementSize } from "@vueuse/core";
+import { computed, nextTick, useTemplateRef, watch } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { useDataListUi } from "../../composables/use-data-list-ui";
+import { useTableInternals } from "../../composables/use-table-internals";
+import { useTableRowLabels } from "../../composables/use-table-row-labels";
+import {
+  TABLE_SUMMARY_LOAD_MORE_THRESHOLD,
+  TABLE_SUMMARY_SIZE_TOKENS,
+  TABLE_SUMMARY_SKELETON_MIN_ROWS,
+  TABLE_SUMMARY_SLOT_CLASSES,
+  TABLE_SUMMARY_VIRTUALIZE_THRESHOLD
+} from "../../constants/summary";
+import { mergeDataListUiClass } from "../../utils";
+import { ROW_ACTIONS_COLUMN_ID } from "../../utils/columns/types";
+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 TableSelectionControl from "../table/table-selection-control.vue";
+import SummaryRow from "./summary-row.vue";
+const props = defineProps({
+  height: { type: String, required: false },
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const internals = useTableInternals();
+const { selection } = internals;
+const { status } = internals.queryContent;
+const dataListUi = useDataListUi();
+const labels = useTableRowLabels();
+const { t } = useUiToolsLocale();
+const rows = computed(
+  () => internals.queryContent.error.value ? [] : internals.queryContent.data.value.rows
+);
+const isFirstLoad = computed(
+  () => status.value.isBooting || (status.value.isPending || status.value.isFetching) && rows.value.length === 0
+);
+const refreshing = computed(
+  () => rows.value.length > 0 && (status.value.isFetching || status.value.isRefreshing || status.value.isRevalidating)
+);
+const replacing = computed(() => rows.value.length > 0 && status.value.isReplacing);
+const error = computed(() => rows.value.length === 0 ? internals.queryContent.error.value : null);
+const empty = computed(() => !isFirstLoad.value && !error.value && rows.value.length === 0);
+const scrolls = computed(() => Boolean(props.fill || props.height));
+const resolvedSize = computed(
+  () => props.size ?? dataListUi.ui.value.table?.size ?? dataListUi.controlSize.value
+);
+const tokens = computed(() => TABLE_SUMMARY_SIZE_TOKENS[resolvedSize.value]);
+const tokenStyle = computed(() => ({
+  "--nut-dl-summary-font": `${tokens.value.font}px`,
+  "--nut-dl-summary-meta": `${tokens.value.font - 1}px`,
+  "--nut-dl-summary-row-h": `${tokens.value.row}px`,
+  "--nut-dl-summary-tile": `${tokens.value.tile}px`,
+  "--nut-dl-summary-x": `${dataListUi.ui.value.table?.gutter ?? tokens.value.gutter}px`
+}));
+const hasActions = computed(
+  () => internals.tableColumns.runtimeColumns.value.some((column) => column.id === ROW_ACTIONS_COLUMN_ID)
+);
+const selectAllState = computed(
+  () => selection.allSelected.value || selection.partiallySelected.value && "indeterminate"
+);
+function css(slot, extra = "") {
+  return mergeDataListUiClass(
+    `${TABLE_SUMMARY_SLOT_CLASSES[slot]} ${extra}`,
+    void 0,
+    props.ui?.[slot]
+  );
+}
+function rowIdAt(index) {
+  const row = rows.value[index];
+  return row ? selection.getRowId({ index, row }) : String(index);
+}
+function refresh() {
+  void internals.queryContent.refreshData()();
+}
+function toggleAll() {
+  selection.toggleAllRows({ selected: !selection.allSelected.value });
+}
+function onSelectRow(rowId, event) {
+  selection.toggleRowSelection({
+    rowId,
+    selected: !selection.isRowSelected({ rowId }),
+    shiftKey: event.shiftKey
+  });
+}
+function skeletonTitleWidth(seed) {
+  return 45 + seed * 37 % 40;
+}
+const scrollRef = useTemplateRef("scrollRef");
+const { height: viewportHeight } = useElementSize(scrollRef);
+const skeletonCount = computed(
+  () => Math.max(TABLE_SUMMARY_SKELETON_MIN_ROWS, Math.ceil(viewportHeight.value / tokens.value.row))
+);
+const virtualized = computed(() => rows.value.length >= TABLE_SUMMARY_VIRTUALIZE_THRESHOLD);
+const rowVirtualizer = useVirtualizer(
+  computed(() => ({
+    count: virtualized.value ? rows.value.length : 0,
+    estimateSize: () => tokens.value.row,
+    getItemKey: (index) => rowIdAt(index),
+    getScrollElement: () => scrollRef.value ?? null,
+    measureElement: (element) => element.getBoundingClientRect().height,
+    overscan: 12
+  }))
+);
+const virtualRows = computed(
+  () => virtualized.value ? rowVirtualizer.value.getVirtualItems() : []
+);
+const paddingTop = computed(() => virtualRows.value[0]?.start ?? 0);
+const paddingBottom = computed(
+  () => virtualRows.value.length ? rowVirtualizer.value.getTotalSize() - (virtualRows.value.at(-1)?.end ?? 0) : 0
+);
+const renderedRows = computed(
+  () => virtualized.value ? virtualRows.value.flatMap((item) => {
+    const row = rows.value[item.index];
+    return row ? [{ index: item.index, row, rowId: rowIdAt(item.index) }] : [];
+  }) : rows.value.map((row, index) => ({ index, row, rowId: rowIdAt(index) }))
+);
+function measureRow(target) {
+  const element = target instanceof Element ? target : target?.$el;
+  if (!(element instanceof HTMLElement)) return;
+  if (element.isConnected) rowVirtualizer.value.measureElement(element);
+  else nextTick().then(() => element.isConnected && rowVirtualizer.value.measureElement(element));
+}
+const cursorMode = computed(() => internals.pagination.mode.value === "cursor");
+const loadingMore = computed(
+  () => cursorMode.value && internals.pagination.state.value.isLoadingMore
+);
+const hasNextPage = computed(() => cursorMode.value && internals.pagination.state.value.hasNextPage);
+watch(
+  () => [
+    virtualRows.value.at(-1)?.index ?? rows.value.length - 1,
+    rows.value.length,
+    hasNextPage.value,
+    loadingMore.value
+  ],
+  ([lastIndex, count, more, loading]) => {
+    if (!more || loading || !count) return;
+    const threshold = Math.max(TABLE_SUMMARY_LOAD_MORE_THRESHOLD, virtualRows.value.length);
+    if (lastIndex >= count - 1 - threshold) void internals.pagination.loadMore();
+  }
+);
+let scrollResetPending = false;
+watch(
+  () => [
+    internals.pagination.currentPage.value,
+    internals.pagination.pageSize.value,
+    JSON.stringify(internals.tableColumns.sortingState.value),
+    JSON.stringify(internals.queryState.filters.value),
+    internals.filters.searchQuery.value
+  ],
+  () => {
+    if (!cursorMode.value) scrollResetPending = true;
+  }
+);
+function resetScroll() {
+  if (!scrollResetPending) return;
+  scrollResetPending = false;
+  scrollRef.value?.scrollTo({ top: 0 });
+}
+watch(rows, resetScroll);
+watch(
+  () => status.value.isFetching,
+  (fetching) => !fetching && resetScroll()
+);
+</script>
+
+<template>
+  <div
+    :class="
+  mergeDataListUiClass(
+    `${TABLE_SUMMARY_SLOT_CLASSES.root} ${fill ? 'h-full' : ''}`,
+    void 0,
+    ui?.root
+  )
+"
+    :style="{ ...tokenStyle, height: !fill && height ? height : void 0 }"
+    :data-size="resolvedSize"
+    :data-virtualized="virtualized"
+    :data-loading="isFirstLoad"
+    :data-replacing="replacing"
+  >
+    <div v-if="selection.selectionEnabled.value && rows.length > 0" :class="css('header')">
+      <TableSelectionControl
+        class="min-h-11 min-w-11 justify-center"
+        :model-value="selectAllState"
+        @toggle="toggleAll"
+      />
+      <span>{{ labels.selectAll() }}</span>
+    </div>
+
+    <div ref="scrollRef" :class="css('viewport', scrolls ? 'flex flex-1 flex-col' : '')">
+      <div
+        v-if="error"
+        class="nut-dl-summary__state flex w-full flex-col"
+        :class="scrolls ? 'min-h-0 flex-1' : ''"
+      >
+        <slot name="error" :error="error" :retry="refresh">
+          <DataListErrorState
+            :min-height="scrolls ? void 0 : '16rem'"
+            :size="resolvedSize"
+            class="flex-1"
+            @retry="refresh"
+          />
+        </slot>
+      </div>
+      <div
+        v-else-if="empty"
+        class="nut-dl-summary__state flex w-full flex-col"
+        :class="scrolls ? 'min-h-0 flex-1' : ''"
+      >
+        <slot name="empty">
+          <TableEmptyState
+            :min-height="scrolls ? void 0 : '16rem'"
+            :size="resolvedSize"
+            class="flex-1"
+          />
+        </slot>
+      </div>
+      <ul v-else role="list" :class="css('list')">
+        <li
+          v-for="placeholder in isFirstLoad ? skeletonCount : 0"
+          :key="`skeleton-${placeholder}`"
+          :class="css('skeleton')"
+          aria-hidden="true"
+        >
+          <span
+            class="nut-dl-skeleton size-[var(--nut-dl-summary-tile)] shrink-0 rounded-lg"
+            :style="{ '--nut-dl-i': placeholder }"
+          />
+          <span class="min-w-0 flex-1">
+            <span
+              class="nut-dl-skeleton block h-3 rounded-full"
+              :style="{ '--nut-dl-i': placeholder, width: `${skeletonTitleWidth(placeholder)}%` }"
+            />
+            <span
+              class="nut-dl-skeleton mt-2 block h-2.5 w-1/3 rounded-full"
+              :style="{ '--nut-dl-i': placeholder }"
+            />
+          </span>
+        </li>
+
+        <li v-if="paddingTop" :style="{ height: `${paddingTop}px` }" aria-hidden="true" />
+        <SummaryRow
+          v-for="entry in renderedRows"
+          :key="entry.rowId"
+          :ref="measureRow"
+          :row-id="entry.rowId"
+          :original="entry.row"
+          :index="entry.index"
+          :selected="selection.isRowSelected({ rowId: entry.rowId })"
+          :selectable="selection.selectionEnabled.value"
+          :actions="hasActions"
+          :ui="ui"
+          @select="onSelectRow(entry.rowId, $event)"
+        />
+        <li v-if="paddingBottom" :style="{ height: `${paddingBottom}px` }" aria-hidden="true" />
+
+        <li v-if="loadingMore" :class="css('loadingMore')" aria-hidden="true">
+          <span
+            class="nut-dl-spinner size-3.5 rounded-full border-2 border-accented border-t-primary"
+          />
+          <span>{{ t("table.controls.loadingMore") }}</span>
+        </li>
+      </ul>
+    </div>
+
+    <ProgressLine
+      :active="refreshing"
+      :restart-key="internals.queryContent.refreshes.value"
+      class="absolute inset-x-0 top-0 z-[6]"
+    />
+  </div>
+</template>
+
+<style>
+.nut-dl-summary__list{transition:opacity .16s ease-out}.nut-dl-summary[data-replacing=true] .nut-dl-summary__list{opacity:.55;transition:opacity .2s ease-in .18s}.nut-dl-summary__row{transition:background-color .1s}.nut-dl-summary__row[data-interactive=true]:active{background:var(--nut-dl-summary-row-pressed,var(--ui-bg-muted))}@media (hover:hover){.nut-dl-summary__row[data-interactive=true]:hover{background:var(--nut-dl-summary-row-hover,var(--ui-bg-elevated))}}.nut-dl-summary__row[data-selected=true],.nut-dl-summary__row[data-selected=true]:hover{background:var(
+    --nut-dl-summary-row-selected,color-mix(in srgb,var(--ui-primary) 10%,var(--ui-bg))
+  )}.nut-dl-summary__skeleton{animation:nut-dl-summary-in .18s ease .12s both}@keyframes nut-dl-summary-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.nut-dl-summary__list,.nut-dl-summary__row{transition:none}.nut-dl-summary__skeleton{animation:none}}
+</style>

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

@@ -0,0 +1,31 @@
+import type { DataListControlSize, DataListSummaryUi } from '../../types/index.js';
+/**
+ * The table layout read as one compact row per record, the way a phone screen needs it. It takes
+ * the table renderer's place while `table.summary` is active and keeps its states: first-load
+ * placeholders, error, empty, refreshing, cursor pages and a virtualized window for long lists.
+ */
+type __VLS_Props = {
+    height?: string;
+    size?: DataListControlSize;
+    fill?: boolean;
+    ui?: DataListSummaryUi;
+};
+declare function refresh(): void;
+declare var __VLS_8: {
+    error: {};
+    retry: typeof refresh;
+}, __VLS_17: {};
+type __VLS_Slots = {} & {
+    error?: (props: typeof __VLS_8) => any;
+} & {
+    empty?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_base: 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: __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/summary/summary-row.d.vue.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/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>