nuxt-ui-tools 1.17.1 → 1.19.0

package/dist/runtime/table/components/filters/tags/option-filter-tag.d.vue.ts

@@ -28,12 +28,12 @@ type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    back: () => any;
     dismiss: () => any;
+    back: () => any;
     sessionClosed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBack?: (() => any) | undefined;
     onDismiss?: (() => any) | undefined;
+    onBack?: (() => any) | undefined;
     onSessionClosed?: (() => any) | undefined;
 }>, {
     header: boolean;

package/dist/runtime/table/components/filters/tags/option-filter-tag.vue.d.ts

@@ -28,12 +28,12 @@ type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    back: () => any;
     dismiss: () => any;
+    back: () => any;
     sessionClosed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBack?: (() => any) | undefined;
     onDismiss?: (() => any) | undefined;
+    onBack?: (() => any) | undefined;
     onSessionClosed?: (() => any) | undefined;
 }>, {
     header: boolean;

package/dist/runtime/table/components/filters/tags/text-filter-tag.d.vue.ts

@@ -28,12 +28,12 @@ type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    back: () => any;
     dismiss: () => any;
+    back: () => any;
     sessionClosed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBack?: (() => any) | undefined;
     onDismiss?: (() => any) | undefined;
+    onBack?: (() => any) | undefined;
     onSessionClosed?: (() => any) | undefined;
 }>, {
     header: boolean;

package/dist/runtime/table/components/filters/tags/text-filter-tag.vue.d.ts

@@ -28,12 +28,12 @@ type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    back: () => any;
     dismiss: () => any;
+    back: () => any;
     sessionClosed: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onBack?: (() => any) | undefined;
     onDismiss?: (() => any) | undefined;
+    onBack?: (() => any) | undefined;
     onSessionClosed?: (() => any) | undefined;
 }>, {
     header: boolean;

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

@@ -14,10 +14,10 @@ declare var __VLS_1: {
     pageSize: number;
     options: number[];
     setPageSize: (nextPageSize: number) => void;
-}, __VLS_12: {
+}, __VLS_12: {}, __VLS_19: {
     current: number;
     total: number;
-}, __VLS_14: {
+}, __VLS_21: {
     state: {
         hasNextPage: boolean;
         hasPreviousPage: boolean;
@@ -39,9 +39,11 @@ type __VLS_Slots = {} & {
 } & {
     'page-size'?: (props: typeof __VLS_3) => any;
 } & {
-    'page-count'?: (props: typeof __VLS_12) => any;
+    'view-toggle'?: (props: typeof __VLS_12) => any;
 } & {
-    navigation?: (props: typeof __VLS_14) => any;
+    'page-count'?: (props: typeof __VLS_19) => any;
+} & {
+    navigation?: (props: typeof __VLS_21) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     compact: boolean;

package/dist/runtime/table/components/layout/table-footer.vue

@@ -12,6 +12,41 @@ import {
   mergeDataListUiClass,
   resolveDataListControlGeometry
 } from "../../utils";
+import DataListViewToggle from "../data-list/data-list-view-toggle.vue";
+const PAGER_CONTROLS = [
+  {
+    icon: "i-lucide-chevrons-left",
+    iconProp: "firstIcon",
+    label: "table.footer.firstPage",
+    mirrored: "i-lucide-chevrons-right",
+    slot: "first",
+    target: () => 1
+  },
+  {
+    icon: "i-lucide-chevron-left",
+    iconProp: "prevIcon",
+    label: "table.footer.previousPage",
+    mirrored: "i-lucide-chevron-right",
+    slot: "prev",
+    target: (page2) => page2 > 1 ? page2 - 1 : void 0
+  },
+  {
+    icon: "i-lucide-chevron-right",
+    iconProp: "nextIcon",
+    label: "table.footer.nextPage",
+    mirrored: "i-lucide-chevron-left",
+    slot: "next",
+    target: (page2, pages) => page2 < pages ? page2 + 1 : void 0
+  },
+  {
+    icon: "i-lucide-chevrons-right",
+    iconProp: "lastIcon",
+    label: "table.footer.lastPage",
+    mirrored: "i-lucide-chevrons-left",
+    slot: "last",
+    target: (_page, pages) => pages
+  }
+];
 const props = defineProps({
   size: { type: String, required: false },
   compact: { type: Boolean, required: false, default: void 0 },
@@ -22,7 +57,7 @@ const internals = useTableInternals();
 const { isMobile } = useDataListBreakpoint();
 const compact = computed(() => props.compact ?? isMobile.value);
 const dataListUi = useDataListUi();
-const { locale, t } = useUiToolsLocale();
+const { dir, locale, t } = useUiToolsLocale();
 const controlSize = computed(
   () => props.size ?? dataListUi.ui.value.pagination?.size ?? dataListUi.controlSize.value
 );
@@ -49,6 +84,24 @@ const paginationProps = computed(
     controlProps.value.pagination
   )
 );
+const pagerControls = computed(() => {
+  const resolved = paginationProps.value;
+  if (resolved.showControls === false) return [];
+  return PAGER_CONTROLS.map((control) => {
+    const target = control.target(page.value, internals.pagination.totalPages.value);
+    return {
+      label: t(control.label),
+      props: {
+        color: resolved.color,
+        icon: resolved[control.iconProp] || (dir.value === "rtl" ? control.mirrored : control.icon),
+        size: resolved.size,
+        to: target === void 0 ? void 0 : resolved.to?.(target),
+        variant: resolved.variant
+      },
+      slot: control.slot
+    };
+  });
+});
 const pageSizeProps = computed(
   () => mergeDataListProps({ color: "neutral", size: controlSize.value, variant: "none" }, controlProps.value.pageSize)
 );
@@ -93,8 +146,9 @@ const paginationControls = computed(() => {
     showPagesList: pagination.showPagesList ?? true
   };
 });
+const showViewToggle = computed(() => internals.controls.headerControls.value.summary);
 const showFooter = computed(
-  () => internals.pagination.mode.value === "offset" && (paginationControls.value.showPageSizePicker || paginationControls.value.showPagesCount || paginationControls.value.showPagesList)
+  () => internals.pagination.mode.value === "offset" && (paginationControls.value.showPageSizePicker || paginationControls.value.showPagesCount || paginationControls.value.showPagesList || showViewToggle.value)
 );
 function formatCount(value) {
   return new Intl.NumberFormat(locale.value.code).format(value);
@@ -184,6 +238,10 @@ function formatCount(value) {
       </slot>
     </div>
 
+    <div v-if="showViewToggle" class="nut-dl-footer__view mx-auto">
+      <slot name="view-toggle"><DataListViewToggle /></slot>
+    </div>
+
     <div
       v-if="paginationControls.showPagesList"
       :class="
@@ -273,7 +331,26 @@ function formatCount(value) {
     ui.button
   )
 }"
-        />
+        >
+          <template v-for="control in pagerControls" #[control.slot]>
+            <UButton v-bind="control.props" :aria-label="control.label" />
+          </template>
+          <template #item="{ item, page: current, pageCount }">
+            <UButton
+              v-if="item.type === 'page'"
+              :color="current === item.value ? paginationProps.activeColor : paginationProps.color"
+              :variant="
+  current === item.value ? paginationProps.activeVariant : paginationProps.variant
+"
+              :size="paginationProps.size"
+              :label="String(item.value)"
+              :aria-label="t('table.footer.page', { current: item.value, total: pageCount })"
+              :to="paginationProps.to?.(item.value)"
+              :ui="{ label: 'min-w-5 text-center' }"
+              square
+            />
+          </template>
+        </UPagination>
       </slot>
     </div>
   </footer>

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

@@ -14,10 +14,10 @@ declare var __VLS_1: {
     pageSize: number;
     options: number[];
     setPageSize: (nextPageSize: number) => void;
-}, __VLS_12: {
+}, __VLS_12: {}, __VLS_19: {
     current: number;
     total: number;
-}, __VLS_14: {
+}, __VLS_21: {
     state: {
         hasNextPage: boolean;
         hasPreviousPage: boolean;
@@ -39,9 +39,11 @@ type __VLS_Slots = {} & {
 } & {
     'page-size'?: (props: typeof __VLS_3) => any;
 } & {
-    'page-count'?: (props: typeof __VLS_12) => any;
+    'view-toggle'?: (props: typeof __VLS_12) => any;
 } & {
-    navigation?: (props: typeof __VLS_14) => any;
+    'page-count'?: (props: typeof __VLS_19) => any;
+} & {
+    navigation?: (props: typeof __VLS_21) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     compact: boolean;

package/dist/runtime/table/components/summary/summary-content.d.ts

@@ -0,0 +1,13 @@
+import type { FunctionalComponent } from 'vue';
+import type { RenderableType } from '../../../shared/index.js';
+import type { TableInjectedRowActionScope } from '../../composables/use-table-row-actions.js';
+interface SummaryContentProps {
+    params: TableInjectedRowActionScope;
+    render: (params: TableInjectedRowActionScope) => RenderableType;
+}
+/**
+ * Renders one of a summary row's schema callbacks. The callback runs while this component renders,
+ * so each render gets fresh vnodes and the reactive reads inside it belong to this component only.
+ */
+declare const SummaryContent: FunctionalComponent<SummaryContentProps>;
+export default SummaryContent;

package/dist/runtime/table/components/summary/summary-content.js

@@ -0,0 +1,5 @@
+import { renderVNode } from "../../../shared/utils/render.js";
+const SummaryContent = (props) => renderVNode(props.render(props.params));
+SummaryContent.props = ["params", "render"];
+SummaryContent.displayName = "DataListSummaryContent";
+export default SummaryContent;

package/dist/runtime/table/components/summary/summary-renderer.d.vue.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-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;