nuxt-ui-tools 1.17.1 → 1.19.0

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

@@ -0,0 +1,41 @@
+import { useCookie } from "nuxt/app";
+import { computed, ref } from "vue";
+import { useResponsiveValue } from "#ui-tools/shared";
+import { isFunction } from "../../shared/utils/predicate.js";
+import {
+  TABLE_SUMMARY_DEFAULT_ENABLED,
+  TABLE_SUMMARY_PREFERENCE_MAX_AGE
+} from "../constants/summary.js";
+export function useTableRowSummary(params) {
+  const summary = computed(() => params.schema.value.table?.summary);
+  const enabled = useResponsiveValue(() => {
+    const configured = summary.value?.enabled;
+    const resolved = isFunction(configured) ? configured() : configured;
+    return String(resolved ?? TABLE_SUMMARY_DEFAULT_ENABLED);
+  }, "boolean");
+  const available = computed(
+    () => summary.value !== void 0 && !params.tree.enabled.value && params.layout.tableEnabled.value && params.layout.activeLayout.value === "table" && (enabled.value ?? true)
+  );
+  const persistPreferences = computed(() => params.schema.value.persistence?.preferences !== false);
+  const cookieName = `${encodeURIComponent(params.schema.value.tableKey)}::view`;
+  const stored = useCookie(cookieName, {
+    decode: (value) => value === "table" ? "table" : null,
+    default: () => null,
+    encode: (value) => value ?? "",
+    maxAge: TABLE_SUMMARY_PREFERENCE_MAX_AGE
+  });
+  const session = ref(null);
+  const choice = computed({
+    get: () => persistPreferences.value ? stored.value : session.value,
+    set: (next) => {
+      if (persistPreferences.value) stored.value = next;
+      else session.value = next;
+    }
+  });
+  const active = computed(() => available.value && choice.value === null);
+  function setActive(next) {
+    if (!available.value) return;
+    choice.value = next ? null : "table";
+  }
+  return { active, available, setActive };
+}

package/dist/runtime/table/constants/mobile.d.ts

@@ -0,0 +1,79 @@
+/**
+ * The classes the package adds below the `md` breakpoint, so every control a thumb reaches has a
+ * 44px tap target. `layerDataListMobileDefaults` puts them under the classes a slot already has,
+ * which keeps the app's own slot classes and lets them win where they conflict. Desktop sizing is
+ * untouched.
+ */
+export declare const DATA_LIST_MOBILE_DEFAULTS: {
+    readonly columnPanel: {
+        readonly ui: {
+            readonly trigger: "min-h-11 min-w-11";
+        };
+    };
+    readonly content: {
+        readonly ui: {
+            readonly retry: "min-h-11 min-w-11";
+        };
+    };
+    readonly filterPanel: {
+        readonly ui: {
+            readonly trigger: "min-h-11 min-w-11";
+        };
+    };
+    readonly filterTags: {
+        readonly ui: {
+            readonly sheetTrigger: "min-h-11 min-w-11";
+        };
+    };
+    readonly infiniteLoader: {
+        readonly ui: {
+            readonly loadMore: "min-h-11 min-w-11";
+            readonly retry: "min-h-11 min-w-11";
+        };
+    };
+    readonly layoutSwitch: {
+        readonly ui: {
+            readonly trigger: "min-h-11 min-w-11";
+        };
+    };
+    readonly pagination: {
+        readonly ui: {
+            readonly button: "min-h-11 min-w-11";
+        };
+    };
+    readonly refresh: {
+        readonly ui: {
+            readonly base: "min-h-11 min-w-11";
+        };
+    };
+    readonly search: {
+        readonly ui: {
+            readonly base: "min-h-11";
+            readonly clear: "min-h-11 min-w-11";
+        };
+    };
+    readonly selectionActions: {
+        readonly ui: {
+            readonly action: "h-11 min-w-11";
+            readonly dismiss: "size-11";
+            readonly overflow: "size-11";
+        };
+    };
+    readonly sortMenu: {
+        readonly ui: {
+            readonly trigger: "min-h-11 min-w-11";
+        };
+    };
+    readonly table: {
+        readonly ui: {
+            readonly emptyAction: "min-h-11 min-w-11";
+            readonly rowAction: "min-h-11 min-w-11";
+            readonly selectControl: "relative before:absolute before:top-1/2 before:left-1/2 before:size-11 before:-translate-x-1/2 before:-translate-y-1/2";
+        };
+    };
+    readonly viewToggle: {
+        readonly ui: {
+            readonly base: "min-h-11 min-w-11";
+        };
+    };
+};

package/dist/runtime/table/constants/mobile.js

@@ -0,0 +1,17 @@
+const TOUCH_TARGET = "min-h-11 min-w-11";
+const TOUCH_AREA = "relative before:absolute before:top-1/2 before:left-1/2 before:size-11 before:-translate-x-1/2 before:-translate-y-1/2";
+export const DATA_LIST_MOBILE_DEFAULTS = {
+  columnPanel: { ui: { trigger: TOUCH_TARGET } },
+  content: { ui: { retry: TOUCH_TARGET } },
+  filterPanel: { ui: { trigger: TOUCH_TARGET } },
+  filterTags: { ui: { sheetTrigger: TOUCH_TARGET } },
+  infiniteLoader: { ui: { loadMore: TOUCH_TARGET, retry: TOUCH_TARGET } },
+  layoutSwitch: { ui: { trigger: TOUCH_TARGET } },
+  pagination: { ui: { button: TOUCH_TARGET } },
+  refresh: { ui: { base: TOUCH_TARGET } },
+  search: { ui: { base: "min-h-11", clear: TOUCH_TARGET } },
+  selectionActions: { ui: { action: "h-11 min-w-11", dismiss: "size-11", overflow: "size-11" } },
+  sortMenu: { ui: { trigger: TOUCH_TARGET } },
+  table: { ui: { emptyAction: TOUCH_TARGET, rowAction: TOUCH_TARGET, selectControl: TOUCH_AREA } },
+  viewToggle: { ui: { base: TOUCH_TARGET } }
+};

package/dist/runtime/table/constants/summary.d.ts

@@ -0,0 +1,67 @@
+/** Summary rows below the `md` breakpoint, the full table from `md` up. */
+export declare const TABLE_SUMMARY_DEFAULT_ENABLED = "true md:false";
+/** How long the reader's summary/table choice is remembered, in seconds. */
+export declare const TABLE_SUMMARY_PREFERENCE_MAX_AGE: number;
+/** Separates the values of a summary row's detail line. */
+export declare const TABLE_SUMMARY_DETAILS_SEPARATOR = " \u00B7 ";
+/** From this many rows on, only the rows on screen are rendered, as in the table. */
+export declare const TABLE_SUMMARY_VIRTUALIZE_THRESHOLD = 40;
+/** Placeholder rows of a first load, however short the viewport is. */
+export declare const TABLE_SUMMARY_SKELETON_MIN_ROWS = 6;
+/** Rows from the end of a cursor list at which the next page is requested. */
+export declare const TABLE_SUMMARY_LOAD_MORE_THRESHOLD = 6;
+/** What each control size gives a row, in px: its font, side gutter, height and leading tile. */
+export declare const TABLE_SUMMARY_SIZE_TOKENS: {
+    lg: {
+        font: number;
+        gutter: number;
+        row: number;
+        tile: number;
+    };
+    md: {
+        font: number;
+        gutter: number;
+        row: number;
+        tile: number;
+    };
+    sm: {
+        font: number;
+        gutter: number;
+        row: number;
+        tile: number;
+    };
+    xl: {
+        font: number;
+        gutter: number;
+        row: number;
+        tile: number;
+    };
+    xs: {
+        font: number;
+        gutter: number;
+        row: number;
+        tile: number;
+    };
+};
+/**
+ * The classes of every summary slot. Rows sit on the default surface, never on the page's tint,
+ * with a hairline between them; the app's `ui.summary.ui` is merged over these.
+ */
+export declare const TABLE_SUMMARY_SLOT_CLASSES: {
+    readonly actions: "nut-dl-summary__actions flex shrink-0 items-center pe-[calc(var(--nut-dl-summary-x)/2)]";
+    readonly body: "nut-dl-summary__body min-w-0 flex-1";
+    readonly details: "nut-dl-summary__details min-w-0 truncate";
+    readonly header: "nut-dl-summary__header flex min-h-11 shrink-0 items-center gap-1 border-b border-muted bg-default pe-[var(--nut-dl-summary-x)] text-[length:var(--nut-dl-summary-meta)] font-medium text-muted";
+    readonly leading: "nut-dl-summary__leading flex size-[var(--nut-dl-summary-tile)] shrink-0 items-center justify-center overflow-hidden rounded-lg bg-accented text-xs font-semibold text-muted empty:hidden";
+    readonly list: "nut-dl-summary__list";
+    readonly loadingMore: "nut-dl-summary__more flex min-h-[var(--nut-dl-summary-row-h)] items-center justify-center gap-2.5 text-[12.5px] text-muted";
+    readonly main: "nut-dl-summary__main flex min-w-0 flex-1 items-center gap-3 py-2.5 text-start focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary";
+    readonly meta: "nut-dl-summary__meta mt-0.5 flex min-w-0 items-center gap-2 text-[length:var(--nut-dl-summary-meta)] leading-snug text-muted";
+    readonly root: "nut-dl-summary relative flex min-h-0 flex-col bg-default";
+    readonly row: "nut-dl-summary__row relative flex min-h-[var(--nut-dl-summary-row-h)] items-stretch border-b border-muted bg-default";
+    readonly select: "nut-dl-summary__select flex shrink-0 items-center";
+    readonly skeleton: "nut-dl-summary__skeleton flex min-h-[var(--nut-dl-summary-row-h)] items-center gap-3 border-b border-muted px-[var(--nut-dl-summary-x)]";
+    readonly status: "nut-dl-summary__status shrink-0 empty:hidden";
+    readonly title: "nut-dl-summary__title block truncate text-[length:var(--nut-dl-summary-font)] leading-snug font-semibold text-highlighted";
+    readonly viewport: "nut-dl-summary__viewport relative min-h-0 overflow-x-hidden overflow-y-auto";
+};

package/dist/runtime/table/constants/summary.js

@@ -0,0 +1,31 @@
+export const TABLE_SUMMARY_DEFAULT_ENABLED = "true md:false";
+export const TABLE_SUMMARY_PREFERENCE_MAX_AGE = 60 * 60 * 24 * 365;
+export const TABLE_SUMMARY_DETAILS_SEPARATOR = " \xB7 ";
+export const TABLE_SUMMARY_VIRTUALIZE_THRESHOLD = 40;
+export const TABLE_SUMMARY_SKELETON_MIN_ROWS = 6;
+export const TABLE_SUMMARY_LOAD_MORE_THRESHOLD = 6;
+export const TABLE_SUMMARY_SIZE_TOKENS = {
+  lg: { font: 14, gutter: 16, row: 72, tile: 36 },
+  md: { font: 13.5, gutter: 14, row: 64, tile: 32 },
+  sm: { font: 13, gutter: 12, row: 60, tile: 32 },
+  xl: { font: 15, gutter: 16, row: 80, tile: 40 },
+  xs: { font: 12.5, gutter: 12, row: 56, tile: 28 }
+};
+export const TABLE_SUMMARY_SLOT_CLASSES = {
+  actions: "nut-dl-summary__actions flex shrink-0 items-center pe-[calc(var(--nut-dl-summary-x)/2)]",
+  body: "nut-dl-summary__body min-w-0 flex-1",
+  details: "nut-dl-summary__details min-w-0 truncate",
+  header: "nut-dl-summary__header flex min-h-11 shrink-0 items-center gap-1 border-b border-muted bg-default pe-[var(--nut-dl-summary-x)] text-[length:var(--nut-dl-summary-meta)] font-medium text-muted",
+  leading: "nut-dl-summary__leading flex size-[var(--nut-dl-summary-tile)] shrink-0 items-center justify-center overflow-hidden rounded-lg bg-accented text-xs font-semibold text-muted empty:hidden",
+  list: "nut-dl-summary__list",
+  loadingMore: "nut-dl-summary__more flex min-h-[var(--nut-dl-summary-row-h)] items-center justify-center gap-2.5 text-[12.5px] text-muted",
+  main: "nut-dl-summary__main flex min-w-0 flex-1 items-center gap-3 py-2.5 text-start focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary",
+  meta: "nut-dl-summary__meta mt-0.5 flex min-w-0 items-center gap-2 text-[length:var(--nut-dl-summary-meta)] leading-snug text-muted",
+  root: "nut-dl-summary relative flex min-h-0 flex-col bg-default",
+  row: "nut-dl-summary__row relative flex min-h-[var(--nut-dl-summary-row-h)] items-stretch border-b border-muted bg-default",
+  select: "nut-dl-summary__select flex shrink-0 items-center",
+  skeleton: "nut-dl-summary__skeleton flex min-h-[var(--nut-dl-summary-row-h)] items-center gap-3 border-b border-muted px-[var(--nut-dl-summary-x)]",
+  status: "nut-dl-summary__status shrink-0 empty:hidden",
+  title: "nut-dl-summary__title block truncate text-[length:var(--nut-dl-summary-font)] leading-snug font-semibold text-highlighted",
+  viewport: "nut-dl-summary__viewport relative min-h-0 overflow-x-hidden overflow-y-auto"
+};

package/dist/runtime/table/types/data-list.d.ts

@@ -6,6 +6,7 @@ import type { PaginationProps } from '@nuxt/ui/components/Pagination.vue';
 import type { SelectProps } from '@nuxt/ui/components/Select.vue';
 import type { ComputedRef } from 'vue';
 import type { TableInternals } from '../composables/use-table-internals.js';
+import type { TableEmptySchema } from './layout.js';
 import type { TableLayout } from './utils.js';
 export interface DataListTable {
     schema: ComputedRef<{
@@ -211,6 +212,14 @@ export interface DataListLayoutSwitchUi {
     triggerLeadingIcon?: DataListUiClass;
     triggerTrailingIcon?: DataListUiClass;
 }
+/** UI slots rendered by the summary/table toggle. */
+export interface DataListViewToggleUi {
+    [slot: string]: DataListUiClass | undefined;
+    base?: DataListUiClass;
+    label?: DataListUiClass;
+    leadingIcon?: DataListUiClass;
+    trailingIcon?: DataListUiClass;
+}
 /** UI slots rendered by the content state boundary. */
 export interface DataListContentUi {
     root?: DataListUiClass;
@@ -244,6 +253,35 @@ export interface DataListTableUi {
     loading?: DataListUiClass;
     loadingOverlay?: DataListUiClass;
     emptyOverlay?: DataListUiClass;
+    /** The empty state's button: the reset of a filtered list and the first-use `empty.action`. */
+    emptyAction?: DataListUiClass;
+    /** The row-actions button at the end of each row, in the table and in summary rows. */
+    rowAction?: DataListUiClass;
+    /** The tap area around a selection checkbox, a row's or the select-all one, in the table and in summary rows. */
+    selectControl?: DataListUiClass;
+}
+/** UI slots rendered by summary rows, the compact presentation of the table layout. */
+export interface DataListSummaryUi {
+    root?: DataListUiClass;
+    viewport?: DataListUiClass;
+    /** The select-all strip above the rows, present when the list has selection. */
+    header?: DataListUiClass;
+    list?: DataListUiClass;
+    row?: DataListUiClass;
+    /** The checkbox cell of a row and of the select-all strip. */
+    select?: DataListUiClass;
+    /** The tappable part of a row: everything between the checkbox and the actions. */
+    main?: DataListUiClass;
+    leading?: DataListUiClass;
+    body?: DataListUiClass;
+    title?: DataListUiClass;
+    /** The line under the title, holding the status and the details. */
+    meta?: DataListUiClass;
+    status?: DataListUiClass;
+    details?: DataListUiClass;
+    actions?: DataListUiClass;
+    skeleton?: DataListUiClass;
+    loadingMore?: DataListUiClass;
 }
 /** UI slots rendered by the grid mode and its built-in states. */
 export interface DataListGridUi {
@@ -356,16 +394,19 @@ export interface DataListLayoutSwitchProps {
     /** Icons per layout; defaults to list and box icons. */
     icons?: Partial<Record<TableLayout, string>>;
 }
-/** Component props exposed by the table renderer controls. */
+/** Component props exposed by the summary/table toggle. */
+export interface DataListViewToggleProps {
+    button?: DataListButtonProps;
+}
+/** Component props exposed by the table renderer controls, shared by summary rows. */
 export interface DataListTableProps {
     checkbox?: DataListCheckboxProps;
     rowActions?: DataListButtonProps;
-    /** Empty state copy; `description: false` hides the second line. */
-    empty?: {
-        icon?: string;
-        title?: string;
-        description?: string | false;
-    };
+    /**
+     * Empty state copy and first-use action shared by every list. A list's own `empty` schema
+     * field wins, field by field. `description: false` hides the second line.
+     */
+    empty?: TableEmptySchema;
 }
 /** Component props exposed by offset pagination. */
 export interface DataListPaginationProps {
@@ -432,13 +473,22 @@ export interface DataListUiConfig {
     columnPanel?: DataListPartConfig<DataListColumnPanelUi, DataListColumnPanelProps>;
     sortMenu?: DataListPartConfig<DataListSortMenuUi, DataListSortMenuProps>;
     layoutSwitch?: DataListPartConfig<DataListLayoutSwitchUi, DataListLayoutSwitchProps>;
+    viewToggle?: DataListPartConfig<DataListViewToggleUi, DataListViewToggleProps>;
     content?: DataListPartConfig<DataListContentUi>;
     table?: DataListTableConfig;
+    summary?: DataListPartConfig<DataListSummaryUi>;
     grid?: DataListGridConfig;
     pagination?: DataListPartConfig<DataListPaginationUi, DataListPaginationProps>;
     infiniteLoader?: DataListPartConfig<DataListInfiniteLoaderUi, DataListInfiniteLoaderProps>;
     selectionActions?: DataListPartConfig<DataListSelectionActionsUi, DataListSelectionActionsProps>;
-    /** Overrides merged on top of this config while the viewport is below the `md` breakpoint. */
+    /**
+     * Overrides merged on top of this config while the viewport is below the `md` breakpoint.
+     *
+     * Below `md` the package also adds a 44px touch target (`min-h-11 min-w-11` and alike) to the
+     * controls a thumb reaches, under the classes of each `ui` slot: yours add to them and win only
+     * where they conflict. To shrink a control back, state the conflicting utilities, for example
+     * `min-h-0 min-w-0`.
+     */
     mobile?: Omit<DataListUiConfig, 'mobile'>;
 }
 export interface DataListGridConfig extends DataListPartConfig<DataListGridUi> {

package/dist/runtime/table/types/layout.d.ts

@@ -1,3 +1,5 @@
+import type { ButtonProps } from '@nuxt/ui/components/Button.vue';
+import type { LinkProps } from '@nuxt/ui/components/Link.vue';
 import type { TableColumnCollection, TableSummaryRequest, TableSummaryScope, TableSummaryValue } from './columns.js';
 import type { TableTreeSchema } from './tree.js';
 import type { GenericObject, TableDefaultSort, TableGridSortOption, TableLayout, TableRowRenderParams, RenderableType, TableSortKey, TableTextValue } from './utils.js';
@@ -5,6 +7,27 @@ export interface TablePersistenceOptions {
     state?: boolean;
     preferences?: boolean;
 }
+/**
+ * The button of a first-use empty state. Any Nuxt UI button prop applies; `label` may be lazy so
+ * it follows the locale.
+ */
+export interface TableEmptyAction extends Omit<ButtonProps, 'ui' | 'label'> {
+    label: TableTextValue;
+    /** Runs on click. Use `to` instead to navigate. */
+    onClick?: (event: MouseEvent) => void;
+}
+/**
+ * What a list shows when it has no records at all. Anything left out keeps the localized default.
+ * A list hidden by filters or a search always offers to reset them instead, never `action`.
+ */
+export interface TableEmptySchema {
+    icon?: string;
+    title?: TableTextValue;
+    /** `false` hides the second line. */
+    description?: TableTextValue | false;
+    /** The first thing to do in an empty list, such as creating the first record. */
+    action?: TableEmptyAction;
+}
 export type TableLayoutControl<TLayout extends TableLayout = TableLayout> = boolean | string | Partial<Record<TLayout, boolean | string>> | (() => boolean | string | Partial<Record<TLayout, boolean | string>>);
 export interface TableControlsSchema {
     refresh?: TableLayoutControl;
@@ -13,6 +36,8 @@ export interface TableControlsSchema {
     filters?: TableLayoutControl;
     sort?: TableLayoutControl;
     actions?: TableLayoutControl;
+    /** The toggle between summary rows and the full table, offered while `table.summary` is active. */
+    summary?: TableLayoutControl;
 }
 export interface TableSelectionSchema {
     mode?: false | true | 'auto';
@@ -59,6 +84,54 @@ export interface TableTableSchema<TRow extends GenericObject = GenericObject, TC
     defaultSorting?: TableDefaultSort<TSortKey>;
     selection?: boolean | 'auto';
     summaries?: TableSummariesSchema<TRow>;
+    /**
+     * Reads each record as one compact row instead of a line of columns, the way a phone screen
+     * needs it. Off until configured; see `TableRowSummarySchema` for when it applies.
+     */
+    summary?: TableRowSummarySchema<TRow, TContext, TPageContext>;
+}
+/** One value of a summary row's detail line. Empty values are skipped. */
+export type TableRowSummaryValue = string | number | null | undefined | false;
+/**
+ * A record as one summary row: an identity, one status, a couple of useful values and the row
+ * actions. Every callback receives the params a grid card gets, with `layout: 'table'`.
+ *
+ * Summary rows replace the column table, so columns, column sorting and the totals row are not
+ * shown while they are active. Filters, search, selection, row actions and pagination work as in
+ * the table, and a toggle brings the full table back.
+ *
+ * @example
+ * summary: {
+ *   leading: ({ row }) => h(UAvatar, { text: initials(row.name), size: 'md' }),
+ *   title: ({ row }) => row.name,
+ *   status: ({ row }) => h(UBadge, { label: STATUS[row.status], variant: 'subtle' }),
+ *   details: ({ row }) => [row.kind, row.city],
+ *   to: ({ row }) => `/accounts/${row.id}`,
+ * }
+ */
+export interface TableRowSummarySchema<TRow extends GenericObject = GenericObject, TContext extends GenericObject = GenericObject, TPageContext extends GenericObject = GenericObject> {
+    /**
+     * Where summary rows replace the column table: `true`, `false`, a responsive string, or a
+     * getter returning either. The reader can still switch to the table from the toggle.
+     * @default 'true md:false' Summary rows below the `md` breakpoint, the table from `md` up.
+     * @example 'true lg:false' // summary rows on tablets too
+     */
+    enabled?: boolean | string | (() => boolean | string);
+    /** The record's identity. One line, cut with an ellipsis when it does not fit. */
+    title: (params: TableRowRenderParams<TRow, TContext, TPageContext>) => string | number;
+    /**
+     * A 32px tile before the title: an avatar, an icon, initials. It is clipped to a rounded
+     * square, so pass an element that fills it.
+     */
+    leading?: (params: TableRowRenderParams<TRow, TContext, TPageContext>) => RenderableType;
+    /** One status pill, first on the line under the title. */
+    status?: (params: TableRowRenderParams<TRow, TContext, TPageContext>) => RenderableType;
+    /** The two or so values worth reading without opening the record, joined with " · ". */
+    details?: (params: TableRowRenderParams<TRow, TContext, TPageContext>) => TableRowSummaryValue[];
+    /** Makes the row a link to the record. Return `undefined` for a row that is not one. */
+    to?: (params: TableRowRenderParams<TRow, TContext, TPageContext>) => LinkProps['to'] | undefined;
+    /** Runs when the row is tapped. With `to`, it runs before the navigation. */
+    onSelect?: (params: TableRowRenderParams<TRow, TContext, TPageContext>) => void;
 }
 export interface TableSummariesSchema<TRow extends GenericObject = GenericObject> {
     /** Rows the aggregates describe; defaults to `filtered`. */

package/dist/runtime/table/types/remote-options.d.ts

@@ -39,7 +39,10 @@ export interface RemoteTableOptionsConfig<TRow extends GenericObject, TOption ex
      * values the loaded pages do not contain. Defaults to `'id'`.
      */
     valueKey?: TableKnownFieldPath<TRow> | 'id';
-    /** Filters applied to every request, e.g. active accounts only. */
+    /**
+     * Filters applied to every page request, e.g. active accounts only. The lookup of selected
+     * values ignores them, so a value the filters now exclude still shows its label.
+     */
     filters?: readonly TableResolvedFilterGroup<TableKnownFieldPath<TRow> | string>[];
     /** Page type and size. Must match what the endpoint pages by. Defaults to cursor pages of 25. */
     pagination?: RemoteOptionsPagination;

package/dist/runtime/table/types/schema.d.ts

@@ -1,14 +1,22 @@
 import type { TableBulkAction, TableRowAction, TableToolbarAction } from './actions.js';
 import type { TableContextDataFromItems, TableContextItem, TablePageContextItem } from './context.js';
 import type { TableFiltersSchema } from './filters.js';
-import type { TableControlsSchema, TableGridSchema, TablePaginationSchema, TablePersistenceOptions, TableSelectionSchema, TableTableSchema } from './layout.js';
+import type { TableControlsSchema, TableEmptySchema, TableGridSchema, TablePaginationSchema, TablePersistenceOptions, TableSelectionSchema, TableTableSchema } from './layout.js';
 import type { InferTableSourceRow, ExtractTableSourceResult, NormalizeTableSource, TableCursorPageResult, TableSource, TableSourceExecutionResult } from './source.js';
 import type { TableKnownFieldPath, TableLayout, TableRowKey, TableSortKey, GenericObject } from './utils.js';
 export interface TableSchema<TRow extends GenericObject = GenericObject, TContextItems extends TableContextItem[] = TableContextItem[], TPageContextItems extends TablePageContextItem<TRow, TableContextDataFromItems<TContextItems>>[] = TablePageContextItem<TRow, TableContextDataFromItems<TContextItems>>[], TFilterKey extends string = TableKnownFieldPath<TRow>, TSortKey extends string = TableSortKey<TRow>> {
     tableKey: string;
     rowKey: TableRowKey<TRow>;
     source: TableSource<TRow, TableContextDataFromItems<TContextItems>, TRow[] | TableSourceExecutionResult<TRow> | TableCursorPageResult<TRow>>;
+    /**
+     * Names a record for assistive technology, in "Select {label}" and "Actions for {label}".
+     * Without it the controls name the row by its position on the page.
+     * @example (row) => row.name
+     */
+    rowLabel?: (row: TRow) => string | number | null | undefined;
     defaultLayout?: TableLayout;
+    /** What the list shows while it has no records at all. See `TableEmptySchema`. */
+    empty?: TableEmptySchema;
     pagination?: TablePaginationSchema;
     context?: TContextItems;
     pageContext?: TPageContextItems;

package/dist/runtime/table/types/table-api.d.ts

@@ -103,6 +103,18 @@ export interface TableApi<TSchema = TableSchemaView> {
         }>;
         set: (layout: TableLayout) => void;
     };
+    /**
+     * Summary rows, the compact presentation of the table layout. With no `table.summary` in the
+     * schema, or where it is not enabled, `state.available` is `false` and `set` has no effect.
+     */
+    summary: {
+        state: ComputedRef<{
+            active: boolean;
+            available: boolean;
+        }>;
+        /** Shows the summary rows (`true`) or the full table (`false`), and remembers the choice. */
+        set: (active: boolean) => void;
+    };
     filters: {
         state: ComputedRef<TableFilterState>;
         search: WritableComputedRef<string>;

package/dist/runtime/table/utils/columns/defs.js

@@ -48,7 +48,9 @@ export function createColumnDefs(options) {
         canHide: false,
         internal: "selection",
         label: "",
-        render: ({ row, index }) => selection.cell({ row: { id: options.params.selection.getRowId({ index, row }) } }),
+        render: ({ row, index }) => selection.cell({
+          row: { id: options.params.selection.getRowId({ index, row }), index, original: row }
+        }),
         renderHeader: () => selection.header(),
         sortable: false
       },

package/dist/runtime/table/utils/columns/render.d.ts

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

package/dist/runtime/table/utils/columns/render.js

@@ -29,7 +29,8 @@ export function createSelectionColumn(options) {
         TableSelectionControl,
         {
           modelValue: options.params.selection.isRowSelected({ rowId }),
-          ariaLabel: "Select row",
+          row: row.original,
+          index: row.index,
           onToggle: (event) => options.params.selection.toggleRowSelection({
             rowId,
             selected: !options.params.selection.isRowSelected({ rowId }),
@@ -46,7 +47,6 @@ export function createSelectionColumn(options) {
       TableSelectionControl,
       {
         modelValue: options.params.selection.allSelected.value ? true : options.params.selection.partiallySelected.value ? "indeterminate" : false,
-        ariaLabel: "Select all rows",
         onToggle: () => options.params.selection.toggleAllRows({
           selected: !options.params.selection.allSelected.value
         })

package/dist/runtime/table/utils/data-list-ui.d.ts

@@ -122,6 +122,6 @@ export declare function resolveDataListTableDensity(density: DataListDensity): {
 export declare function resolveDataListContentShellClass(options: {
     layout: 'table' | 'grid';
     surface: DataListContentSurface;
-}): "grid gap-5" | "overflow-hidden" | "grid gap-5 overflow-hidden rounded-md border border-default bg-default" | "overflow-hidden rounded-md border border-default bg-default";
+}): "overflow-hidden" | "grid gap-5 overflow-hidden rounded-md border border-default bg-default" | "grid gap-5" | "overflow-hidden rounded-md border border-default bg-default";
 /** Merges application and root DataList defaults without losing nested UI slots. */
 export declare function mergeDataListUiConfig(appUi: DataListUiConfig | undefined, componentUi: DataListUiConfig | undefined, density?: DataListDensity, size?: DataListControlSize): DataListUiConfig;

package/dist/runtime/table/utils/data-list-ui.js

@@ -205,7 +205,9 @@ export function mergeDataListUiConfig(appUi, componentUi, density, size) {
     search: mergeSearchConfig(appUi?.search, componentUi?.search),
     selectionActions: mergePartConfig(appUi?.selectionActions, componentUi?.selectionActions),
     sortMenu: mergePartConfig(appUi?.sortMenu, componentUi?.sortMenu),
-    table: mergeUiConfig(appUi?.table, componentUi?.table)
+    summary: mergeUiConfig(appUi?.summary, componentUi?.summary),
+    table: mergeUiConfig(appUi?.table, componentUi?.table),
+    viewToggle: mergePartConfig(appUi?.viewToggle, componentUi?.viewToggle)
   };
 }
 function mergeUiConfig(appDefaults, componentConfig) {

package/dist/runtime/table/utils/mobile-defaults.d.ts

@@ -0,0 +1,7 @@
+import type { DataListUiConfig } from '../types/index.js';
+/**
+ * Adds the package's mobile defaults to a config: a 44px touch target on every control a thumb
+ * reaches. Their classes go under the classes each slot already has, so an app's own slot classes
+ * are kept and win wherever they conflict.
+ */
+export declare function layerDataListMobileDefaults(config: DataListUiConfig): DataListUiConfig;

package/dist/runtime/table/utils/mobile-defaults.js

@@ -0,0 +1,25 @@
+import { isObject, isString } from "../../shared/utils/predicate.js";
+import { DATA_LIST_MOBILE_DEFAULTS } from "../constants/mobile.js";
+import { mergeDataListUiClass } from "./data-list-ui.js";
+function isClassEntry(entry) {
+  return isString(entry[1]);
+}
+function readPart(config, name) {
+  const part = new Map(Object.entries(config)).get(name);
+  return isObject(part) ? part : {};
+}
+function layerPart(config, name, defaults) {
+  const own = readPart(config, name);
+  const ui = isObject(own.ui) ? own.ui : {};
+  const classes = new Map(Object.entries(ui).filter(isClassEntry));
+  const added = Object.entries(defaults).filter(isClassEntry).map(
+    ([slot, base]) => [slot, mergeDataListUiClass(base, void 0, classes.get(slot))]
+  );
+  return { ...own, ui: { ...ui, ...Object.fromEntries(added) } };
+}
+export function layerDataListMobileDefaults(config) {
+  const layered = Object.entries(DATA_LIST_MOBILE_DEFAULTS).map(
+    ([name, defaults]) => [name, layerPart(config, name, defaults.ui)]
+  );
+  return Object.assign({}, config, Object.fromEntries(layered));
+}

package/dist/runtime/table/utils/remote-table-options.js

@@ -8,7 +8,7 @@ export function remoteTableOptions(query, config) {
   function request(params) {
     const { page } = params;
     return {
-      filters: [...config.filters ?? [], ...params.filters ?? []],
+      filters: params.filters ?? [...config.filters ?? []],
       pagination: pagination.type === "cursor" ? { count: "none", cursor: page.cursor, mode: "cursor", pageSize: page.size } : { count: "exact", mode: "offset", pageIndex: page.index - 1, pageSize: page.size },
       search: { fields: [...fields], value: params.search },
       sorting: params.filters ? [] : [...sorting]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.17.1",
+  "version": "1.19.0",
   "description": "Nuxt module and runtime toolkit for UI-heavy Nuxt applications",
   "homepage": "https://github.com/ChronicStone/nuxt-ui-tools#readme",
   "bugs": "https://github.com/ChronicStone/nuxt-ui-tools/issues",