@revenexx/studio-shared 0.2.0 → 0.3.1

package/dist/runtime/components/DataTable/DataTable.vue

@@ -1,28 +1,40 @@
 <script setup>
-import { AltArrowDown, Filter, Magnifier as Search } from "#solar-icons";
+import {
+  Eye,
+  EyeClosed,
+  Filter,
+  ListArrowDownMinimalistic,
+  Magnifier as Search,
+  SidebarMinimalistic,
+  Widget as Columns
+} from "#solar-icons";
 import {
   Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-  Input
+  ColumnPicker,
+  FilterPanel,
+  SearchField,
+  SegmentedToggle,
+  SegmentedToggleItem
 } from "@revenexx/studio";
+import { orderColumnsBy } from "../../lib/columnOrder";
+import { initiallyHidden, visibleColumnsOf } from "../../lib/columnVisibility";
+import { countByValue, matchesFilter } from "../../lib/dataTableFilters";
 import SortHeader from "../Shared/SortHeader.vue";
-import ColumnsMenu from "./ColumnsMenu.vue";
 import FilterMenu from "./FilterMenu.vue";
+import SavedViewsMenu from "./SavedViewsMenu.vue";
+import SortMenu from "./SortMenu.vue";
 const props = defineProps({
   data: { type: Array, required: true },
   columns: { type: Array, required: true },
   rowKey: { type: Function, required: true, skipCheck: true },
   search: { type: [Boolean, Object], required: false, default: true },
   columnsMenu: { type: Boolean, required: false, default: true },
-  filter: { type: Boolean, required: false, default: false },
+  filter: { type: [Boolean, Object], required: false, default: false },
   filterTabs: { type: [Object, Array], required: false },
+  savedViews: { type: [Object, null], required: false, default: null },
+  viewModes: { type: [Array, null], required: false, default: null },
+  rail: { type: [Boolean, Object], required: false, default: false },
+  scrollBody: { type: [Boolean, Object], required: false },
   pagination: { type: [Boolean, Object], required: false, default: true },
   defaultSort: { type: Object, required: false },
   serverMode: { type: Boolean, required: false, default: false },
@@ -33,6 +45,7 @@ const props = defineProps({
   groupEmptyLabel: { type: String, required: false }
 });
 const emit = defineEmits(["rowClick", "stateChange"]);
+const t = useT();
 const query = ref("");
 const sort = defineModel("sort", { type: Object, ...{
   default: () => ({
@@ -41,6 +54,8 @@ const sort = defineModel("sort", { type: Object, ...{
   })
 } });
 const page = defineModel("page", { type: Number, ...{ default: 0 } });
+const viewMode = defineModel("viewMode", { type: String, ...{ default: "list" } });
+const railOpen = defineModel("railOpen", { type: Boolean, ...{ default: true } });
 if (props.defaultSort && sort.value.column == null) {
   sort.value = { column: props.defaultSort.column, direction: props.defaultSort.direction };
 }
@@ -48,19 +63,20 @@ const pageSize = ref(
   typeof props.pagination === "object" && props.pagination?.pageSize ? props.pagination.pageSize : 20
 );
 const pageSizeOptions = computed(() => Array.from(/* @__PURE__ */ new Set([10, 20, 50, 100, pageSize.value])).sort((a, b) => a - b));
-const visibleKeys = ref(
-  new Set(props.columns.filter((c) => c.visible !== false).map((c) => c.key))
-);
-function toggleColumn(key) {
-  const next = new Set(visibleKeys.value);
-  if (next.has(key)) next.delete(key);
-  else next.add(key);
-  visibleKeys.value = next;
+const hidden = ref(initiallyHidden(props.columns));
+const columnOrder = ref([]);
+const arrangedColumns = computed(() => orderColumnsBy(props.columns, columnOrder.value));
+const visibleColumns = computed(() => visibleColumnsOf(arrangedColumns.value, hidden.value));
+const pickerColumns = computed(() => arrangedColumns.value.filter((c) => (c.label ?? "").trim().length > 0).map((c) => ({
+  key: c.key,
+  label: c.label ?? c.key,
+  visible: !hidden.value.has(c.key),
+  toggleable: c.toggleable !== false
+})));
+function onPickerUpdate(next) {
+  columnOrder.value = next.map((c) => c.key);
+  hidden.value = new Set(next.filter((c) => c.visible === false).map((c) => c.key));
 }
-const visibleColumns = computed(
-  () => props.columns.filter((c) => visibleKeys.value.has(c.key))
-);
-const menuColumns = computed(() => props.columns);
 function searchOf(col, row) {
   if (col.searchGetter) return col.searchGetter(row).toLowerCase();
   if (col.sortGetter) {
@@ -74,26 +90,36 @@ const filterDims = computed(() => {
   const raw = props.filterTabs;
   if (!raw) return [];
   const arr = Array.isArray(raw) ? raw : [raw];
-  return arr.map((f, i) => ({ key: f.key ?? f.label ?? `dim${i}`, label: f.label ?? "Status", getter: f.getter, options: f.options, allLabel: f.allLabel }));
+  return arr.map((f, i) => ({ key: f.key ?? f.label ?? `dim${i}`, label: f.label ?? t("shared.datatable.filter.dimension.label.default"), getter: f.getter, options: f.options, allLabel: f.allLabel }));
 });
 const activeFilters = ref({});
-const anyFilterActive = computed(() => Object.values(activeFilters.value).some(Boolean));
-function setFilter(key, value) {
-  activeFilters.value = { ...activeFilters.value, [key]: value };
+const panelSelection = computed(() => Object.entries(activeFilters.value).flatMap(([key, values]) => values.map((v) => `${key}:${v}`)));
+function applyPanelSelection(selected) {
+  const next = {};
+  for (const id of selected) {
+    const at = id.indexOf(":");
+    if (at === -1) continue;
+    const key = id.slice(0, at);
+    (next[key] ??= []).push(id.slice(at + 1));
+  }
+  activeFilters.value = next;
 }
+const filterFacets = computed(() => filterDims.value.map((d) => {
+  const counts = dimCounts(d);
+  return {
+    key: d.key,
+    label: d.label,
+    options: d.options.map((o) => ({ value: o.value, label: o.label, count: counts[o.value] ?? 0 }))
+  };
+}));
 function dimCounts(d) {
-  const m = {};
-  for (const row of props.data) {
-    const k = String(d.getter(row) ?? "");
-    m[k] = (m[k] ?? 0) + 1;
-  }
-  return m;
+  return countByValue(props.data, d.getter);
 }
 const filtered = computed(() => {
   if (props.serverMode || !filterDims.value.length) return props.data;
-  const active = filterDims.value.filter((d) => activeFilters.value[d.key]);
+  const active = filterDims.value.filter((d) => activeFilters.value[d.key]?.length);
   if (!active.length) return props.data;
-  return props.data.filter((row) => active.every((d) => String(d.getter(row) ?? "") === activeFilters.value[d.key]));
+  return props.data.filter((row) => active.every((d) => matchesFilter(d.getter, row, activeFilters.value[d.key])));
 });
 const searched = computed(() => {
   if (props.serverMode) return props.data;
@@ -151,7 +177,7 @@ const keyedRows = computed(() => {
 });
 const renderRows = computed(() => {
   if (!props.groupBy) return keyedRows.value.map(({ row, key }) => ({ kind: "row", row, key }));
-  const emptyLabel = props.groupEmptyLabel ?? "Ungrouped";
+  const emptyLabel = props.groupEmptyLabel ?? t("shared.datatable.group.ungrouped.default");
   const groups = /* @__PURE__ */ new Map();
   for (const entry of keyedRows.value) {
     const labels2 = props.groupBy(entry.row);
@@ -207,15 +233,26 @@ const gridTemplate = computed(() => {
   return `grid-template-columns: ${tracks.join(" ")};`;
 });
 const placeholder = computed(
-  () => typeof props.search === "object" ? props.search.placeholder ?? "Search\u2026" : "Search\u2026"
+  () => typeof props.search === "object" ? props.search.placeholder ?? t("shared.datatable.toolbar.search.placeholder.default") : t("shared.datatable.toolbar.search.placeholder.default")
 );
 const slots = useSlots();
 const showToolbar = computed(
-  () => props.search || props.columnsMenu || props.filter || !!props.filterTabs || !!slots.actions || !!slots["toolbar-left"]
+  () => props.search || props.columnsMenu || props.filter || !!props.filterTabs || !!props.savedViews || !!props.viewModes?.length || !!props.rail || !!slots.actions || !!slots.scope || !!slots["toolbar-left"] || !!slots["toolbar-right"]
 );
+const railLabel = computed(
+  () => (typeof props.rail === "object" ? props.rail.label : void 0) ?? t("shared.datatable.toolbar.rail.label.default")
+);
+const showTable = computed(() => !props.viewModes?.length || viewMode.value === "list");
+const sortableColumns = computed(() => props.columns.filter((c) => c.sortable));
+const showSortMenu = computed(() => !showTable.value && sortableColumns.value.length > 0);
 function cellIconFor(col) {
   return col.cellIcon ?? null;
 }
+const scrollStyle = computed(() => {
+  if (!props.scrollBody) return void 0;
+  const configured = typeof props.scrollBody === "object" ? props.scrollBody.maxHeight : void 0;
+  return { maxHeight: configured ?? "calc(100vh - 22rem)" };
+});
 const showFooter = computed(() => props.pagination !== false && !props.groupBy);
 const lastPage = computed(
   () => pageSize.value > 0 ? Math.max(0, Math.ceil(totalCount.value / pageSize.value) - 1) : 0
@@ -240,79 +277,184 @@ function defaultCell(col, row) {
 <template>
   <div class="rounded-lg border border-black/[0.06] overflow-hidden flex flex-col">
     <!-- Toolbar ------------------------------------------------------ -->
-    <!-- Toolbar: LEFT = search · filter · columns · RIGHT = actions.
-         (Pagination always lives in the footer.) -->
+    <!-- The single control row of a list surface.
+
+         The bar carries the dashboard's tint rather than flat white, so a
+         list's chrome and the home screen's are recognisably one surface. On
+         white the controls sat on nothing and the row read as a gap above the
+         table; with a ground under them they read as a row.
+
+         The stops are REVERSED from the dashboard's, and measuring is what
+         said so. The dashboard panel runs white → tint → white, which is right
+         for a panel whose content sits in the middle. A toolbar's content sits
+         at the two ENDS: the search field lands at 12% along the bar, where a
+         gradient starting pure white at 0% and reaching its tint at 50% is
+         still white. So a white field sat on a white ground with a 10% hairline
+         and a white rim doing nothing, while the identical control on the
+         dashboard read cleanly against 0.972 lightness.
+
+         Tinted at the ends, clear in the middle where nothing stands.
+
+         Not the dashboard's shimmer or its blurred corner blob: those are for a
+         panel somebody looks AT, and this is one they look through on the way
+         to the rows.
+         LEFT is LOOKING:  rail · search · filter · sort · columns · scope ·
+                           view mode · saved views · #toolbar-left
+         RIGHT is DOING:   #toolbar-right · #actions
+         (Pagination always lives in the footer.)
+
+         The line is not "filters versus the rest". View mode and column
+         visibility narrow nothing and still belong left, because reaching for
+         them means you are still looking for something; once your hand crosses
+         to the right you have stopped looking and started acting. Scope, view
+         mode and saved views used to sit on the right beside the primary
+         action, which made a row of eight controls with no readable boundary
+         in it. -->
     <div
       v-if="showToolbar"
-      class="flex items-center justify-between gap-2 px-4 py-3 bg-white/55 backdrop-blur-md"
+      class="flex flex-wrap items-center justify-between gap-2 px-4 py-3 bg-gradient-to-r from-violet-50/80 via-white to-violet-50/60"
     >
       <div class="flex items-center gap-2 min-w-0">
-        <div v-if="search" class="relative w-[21rem] max-w-full">
-          <Search :size="13" class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
-          <Input
-            v-model="query"
-            :placeholder="placeholder"
-            class="h-7 pl-8 text-sm bg-white"
-          />
-        </div>
-        <!-- Generic "Filter" dropdown — each dimension is a labelled sub-menu. -->
-        <DropdownMenu v-if="filterDims.length">
-          <DropdownMenuTrigger as-child>
-            <Button
-              variant="outline"
-              size="sm"
-              class="h-7 gap-1.5 text-sm"
-              :class="anyFilterActive ? 'border-primary/30 text-primary' : ''"
-            >
-              <Filter :size="14" />
-              Filter
-              <AltArrowDown :size="12" class="opacity-60" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start" class="w-48">
-            <DropdownMenuSub v-for="d in filterDims" :key="d.key">
-              <DropdownMenuSubTrigger class="gap-2">
-                <span class="flex-1">{{ d.label }}</span>
-                <span v-if="activeFilters[d.key]" class="text-xs text-primary capitalize">{{ activeFilters[d.key] }}</span>
-              </DropdownMenuSubTrigger>
-              <DropdownMenuSubContent class="w-48">
-                <DropdownMenuItem class="gap-2" @select="setFilter(d.key, null)">
-                  <span class="flex-1">{{ d.allLabel ?? "All" }}</span>
-                  <span class="tabular-nums text-muted-foreground">{{ data.length }}</span>
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  v-for="o in d.options"
-                  :key="o.value"
-                  class="gap-2"
-                  @select="setFilter(d.key, o.value)"
-                >
-                  <span class="flex-1">{{ o.label }}</span>
-                  <span class="tabular-nums text-muted-foreground">{{ dimCounts(d)[o.value] ?? 0 }}</span>
-                </DropdownMenuItem>
-              </DropdownMenuSubContent>
-            </DropdownMenuSub>
-          </DropdownMenuContent>
-        </DropdownMenu>
-        <FilterMenu v-if="filter">
+        <Button
+          v-if="rail"
+          variant="outline"
+          size="sm"
+          class="h-7 shrink-0 gap-1.5 text-sm"
+          :class="railOpen ? 'border-primary/30 text-primary' : ''"
+          :aria-pressed="railOpen"
+          :aria-label="railOpen ? t('shared.datatable.toolbar.rail.aria.hide', { label: railLabel }) : t('shared.datatable.toolbar.rail.aria.show', { label: railLabel })"
+          @click="railOpen = !railOpen"
+        >
+          <SidebarMinimalistic :size="14" />
+          {{ railLabel }}
+        </Button>
+        <!-- Shrinks (never wraps the row) once the toolbar carries scope /
+             view-mode / saved-view controls next to it.
+
+             `SearchField` rather than an Input with an icon positioned over it
+             and a counted `pl-8`: three decisions that had to agree, and any
+             change to the icon size or the field height broke one of them. -->
+        <SearchField
+          v-if="search"
+          v-model="query"
+          :placeholder="placeholder"
+          class="w-[21rem] min-w-40 max-w-full shrink"
+        >
+          <template #icon>
+            <Search :size="14" weight="Linear" />
+          </template>
+        </SearchField>
+        <!--
+          Every facet at once, committed with Apply.
+
+          It was a menu of submenus: one facet visible at a time, one value
+          each, and the answer to "what is filtering right now?" only available
+          by opening all of them in turn. The panel lets a facet hold more than
+          one value and does not move the list until the reader is done
+          deciding.
+
+          `panes` rather than the automatic choice. Auto reads the numbers - it
+          switches past four facets or eight options - and today's surfaces sit
+          just under both thresholds, so they would draw as columns while the
+          same control on the pattern page draws as panes. A table that gains a
+          fifth facet would then change shape on its own. One layout, whatever
+          the surface happens to declare this week.
+        -->
+        <FilterPanel
+          v-if="filterFacets.length"
+          :model-value="panelSelection"
+          :facets="filterFacets"
+          layout="panes"
+          :label="t('shared.datatable.toolbar.filter.action')"
+          :apply-label="t('shared.datatable.toolbar.filter.apply')"
+          :reset-label="t('shared.datatable.toolbar.filter.reset')"
+          @update:model-value="applyPanelSelection"
+        >
+          <template #icon>
+            <Filter :size="14" weight="BoldDuotone" />
+          </template>
+        </FilterPanel>
+        <FilterMenu
+          v-if="filter"
+          :width="typeof filter === 'object' ? filter.width : void 0"
+          :active="typeof filter === 'object' ? filter.active : void 0"
+          :count="typeof filter === 'object' ? filter.count : void 0"
+        >
           <slot name="filter-menu" />
         </FilterMenu>
-        <ColumnsMenu
-          v-if="columnsMenu"
-          :columns="menuColumns"
-          :visible="visibleKeys"
-          @toggle="toggleColumn"
-        />
+        <SortMenu v-if="showSortMenu" v-model="sort" :columns="sortableColumns" />
+        <!--
+          The design system's picker, drag and drop included. It was a local
+          copy that did its own dragging with the browser's own drag events,
+          which cannot say where a row may GO: a row could be pulled out over
+          the table behind the popover and dropped there. Only the rows of this
+          list register as drop targets now, and the edge the pointer is nearest
+          decides the index rather than arithmetic on a row height that a
+          wrapped label invalidates.
+        -->
+        <ColumnPicker
+          v-if="columnsMenu && showTable"
+          :model-value="pickerColumns"
+          :label="t('shared.datatable.columnsmenu.tooltip')"
+          :heading="t('shared.datatable.columnsmenu.heading')"
+          @update:model-value="onPickerUpdate"
+        >
+          <template #icon>
+            <Columns :size="15" weight="BoldDuotone" />
+          </template>
+          <template #handle>
+            <ListArrowDownMinimalistic :size="15" weight="Linear" />
+          </template>
+          <template #visible>
+            <Eye :size="16" weight="Linear" />
+          </template>
+          <template #hidden>
+            <EyeClosed :size="16" weight="Linear" />
+          </template>
+        </ColumnPicker>
+        <!-- Market scope — the surface passes the shared MarketScopeToggle in;
+             the row position is fixed here. -->
+        <slot name="scope" />
+        <!-- The editor's device switch, which is the right shape wherever the
+             choice changes what you are LOOKING AT rather than which rows. -->
+        <SegmentedToggle v-if="viewModes?.length" v-model="viewMode" variant="inset">
+          <SegmentedToggleItem
+            v-for="m in viewModes"
+            :key="m.value"
+            :value="m.value"
+            :aria-label="m.label"
+          >
+            <component :is="m.icon" v-if="m.icon" :size="14" weight="Bold" />
+            <template v-if="!m.icon">{{ m.label }}</template>
+          </SegmentedToggleItem>
+        </SegmentedToggle>
+        <SavedViewsMenu v-if="savedViews" :config="savedViews" />
         <slot name="toolbar-left" />
       </div>
-      <div class="flex items-center gap-1.5 ml-auto shrink-0">
+      <div class="flex items-center gap-2 ml-auto shrink-0">
+        <slot name="toolbar-right" />
         <slot name="actions" />
       </div>
     </div>
 
+    <!-- Alternate view mode (gallery, board, …) — same toolbar, same footer. -->
+    <div v-if="!showTable" class="border-t border-black/[0.04] bg-white/55">
+      <slot name="view" :rows="displayedRows" :loading="loading" />
+    </div>
+
+    <!-- The header and the rows share one box so their columns cannot drift.
+         `display: contents` when scrolling is off makes this element vanish
+         from layout entirely, so every table that has not asked for it renders
+         exactly as it did. -->
+    <div
+      :class="scrollBody ? 'min-h-0 overflow-y-auto' : 'contents'"
+      :style="scrollStyle"
+    >
     <!-- Header row -------------------------------------------------- -->
     <div
+      v-if="showTable"
       class="grid items-center gap-2 border-t rounded-t-lg border-gray-200 bg-gray-100 px-4 py-2.5 text-sm font-medium uppercase tracking-normal text-muted-foreground"
+      :class="scrollBody ? 'sticky top-0 z-10' : ''"
       :style="gridTemplate"
     >
       <div
@@ -320,22 +462,31 @@ function defaultCell(col, row) {
         :key="col.key"
         :class="col.alignRight ? 'text-right' : ''"
       >
-        <SortHeader
-          v-if="col.sortable"
-          :column="col.key"
-          :active="sort.column"
-          :direction="sort.direction"
-          :align-right="col.alignRight"
-          @toggle="toggleSort"
-        >
-          {{ col.label }}
-        </SortHeader>
-        <span v-else>{{ col.label }}</span>
+        <!-- `#header-<key>` lets a page take over a header cell (e.g. a
+             select-all checkbox in a selection column). Default: sortable
+             SortHeader or the plain label. -->
+        <slot :name="`header-${col.key}`">
+          <SortHeader
+            v-if="col.sortable"
+            :column="col.key"
+            :active="sort.column"
+            :direction="sort.direction"
+            :align-right="col.alignRight"
+            @toggle="toggleSort"
+          >
+            {{ col.label }}
+          </SortHeader>
+          <!-- `normal-case` to match SortHeader, whose button does not inherit
+               the row's uppercase. Without it a column reads "LAST CHECK"
+               beside "Channel" and "Provider" for no reason a reader can see —
+               the header shouts wherever a column happens not to be sortable. -->
+          <span v-else class="normal-case">{{ col.label }}</span>
+        </slot>
       </div>
     </div>
 
     <!-- Body --------------------------------------------------------- -->
-    <template v-for="entry in renderRows" :key="entry.key">
+    <template v-for="entry in showTable ? renderRows : []" :key="entry.key">
       <!-- Group header (groupBy mode) -->
       <div
         v-if="entry.kind === 'header'"
@@ -367,14 +518,17 @@ function defaultCell(col, row) {
               </span>
               <span class="text-sm font-semibold text-[#0B0522] truncate transition-colors group-hover:text-primary">{{ defaultCell(col, entry.row) }}</span>
             </div>
-            <span v-else class="text-sm truncate">{{ defaultCell(col, entry.row) }}</span>
+            <!-- `block`, or `truncate` clips nothing: an inline span establishes
+                 no box, so a long unbroken value overruns the next column
+                 instead of ending in an ellipsis. -->
+            <span v-else class="block truncate text-sm" :title="String(defaultCell(col, entry.row) ?? '')">{{ defaultCell(col, entry.row) }}</span>
           </slot>
         </div>
       </div>
     </template>
 
     <!-- Loading skeleton (only when there are no rows yet) ----------- -->
-    <template v-if="loading && !displayedRows.length">
+    <template v-if="showTable && loading && !displayedRows.length">
       <div
         v-for="n in 6"
         :key="`sk-${n}`"
@@ -396,14 +550,16 @@ function defaultCell(col, row) {
 
     <!-- Empty -------------------------------------------------------- -->
     <div
-      v-if="!displayedRows.length && !loading"
+      v-if="showTable && !displayedRows.length && !loading"
       class="px-3 py-8 text-center text-sm text-muted-foreground"
     >
       <slot name="empty">
-        {{ emptyText ?? "No entries." }}
+        {{ emptyText ?? t("shared.datatable.empty.default") }}
       </slot>
     </div>
 
+    </div>
+
     <!-- Footer ------------------------------------------------------- -->
     <div
       v-if="showFooter"
@@ -411,12 +567,12 @@ function defaultCell(col, row) {
     >
       <div class="flex items-center gap-2.5">
         <span class="tabular-nums">
-          <span v-if="totalCount === 0">No results</span>
-          <span v-else>Showing {{ rangeStart }}–{{ rangeEnd }} of {{ totalCount }}</span>
+          <span v-if="totalCount === 0">{{ t("shared.datatable.footer.noresults") }}</span>
+          <span v-else>{{ t("shared.datatable.footer.showing", { start: rangeStart, end: rangeEnd, total: totalCount }) }}</span>
         </span>
         <span class="text-muted-foreground/40">-</span>
         <label class="flex items-center gap-1.5">
-          <span class="hidden sm:inline">Rows per page</span>
+          <span class="hidden sm:inline">{{ t("shared.datatable.footer.pagesize.label") }}</span>
           <select
             v-model.number="pageSize"
             class="h-7 rounded-md border border-input bg-white px-1.5 text-sm tabular-nums focus:outline-none focus:ring-1 focus:ring-ring"
@@ -433,7 +589,7 @@ function defaultCell(col, row) {
           :disabled="page === 0 || loading"
           @click="prevPage"
         >
-          Previous
+          {{ t("shared.datatable.footer.action.previous") }}
         </Button>
         <span class="tabular-nums">
           {{ page + 1 }} / {{ lastPage + 1 }}
@@ -445,7 +601,7 @@ function defaultCell(col, row) {
           :disabled="page >= lastPage || loading"
           @click="nextPage"
         >
-          Next
+          {{ t("shared.datatable.footer.action.next") }}
         </Button>
       </div>
     </div>

package/dist/runtime/components/DataTable/DataTable.vue.d.ts

@@ -1,11 +1,13 @@
-import type { DataTableColumn, DataTableFilter, DataTableState, RowKey, SortState } from './types.js';
+import type { DataTableColumn, DataTableFilter, DataTableRail, DataTableSavedViews, DataTableState, DataTableViewMode, RowKey, SortState } from './types.js';
 declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly "onUpdate:sort"?: ((value: SortState) => any) | undefined;
         readonly "onUpdate:page"?: ((value: number) => any) | undefined;
+        readonly "onUpdate:viewMode"?: ((value: string) => any) | undefined;
+        readonly "onUpdate:railOpen"?: ((value: boolean) => any) | undefined;
         readonly onRowClick?: ((row: T) => any) | undefined;
         readonly onStateChange?: ((state: DataTableState) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:sort" | "onUpdate:page" | "onRowClick" | "onStateChange"> & ({
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:sort" | "onUpdate:page" | "onUpdate:viewMode" | "onUpdate:railOpen" | "onRowClick" | "onStateChange"> & ({
         data: T[];
         columns: DataTableColumn<T>[];
         rowKey: RowKey<T>;
@@ -13,10 +15,44 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
             placeholder?: string;
         };
         columnsMenu?: boolean;
-        filter?: boolean;
+        /** Mount the surface's own filter panel in the toolbar's Filter popover
+         *  (`#filter-menu`). Pass an object to widen it / flag it as active. */
+        filter?: boolean | {
+            width?: string;
+            active?: boolean;
+            count?: number;
+        };
         /** Built-in status/dimension filter pills (static mode). One dimension, or
          *  several (each renders as its own sub-menu). */
         filterTabs?: DataTableFilter<T> | DataTableFilter<T>[];
+        /** Saved views control — the surface supplies snapshot/apply, the table
+         *  owns the control, the storage and the dialogs. */
+        savedViews?: DataTableSavedViews | null;
+        /** View-mode switch (e.g. List | Gallery). Any mode other than `list`
+         *  renders the `#view` slot in place of the table body. */
+        viewModes?: DataTableViewMode[] | null;
+        /** Collapse handle for the surface's left rail (see `ListSurface`). */
+        rail?: boolean | DataTableRail;
+        /**
+         * Scroll the ROWS inside the table instead of the page.
+         *
+         * The toolbar, the header and the footer stay put and only the data moves,
+         * so paging through a long list keeps the search box, the filters and the
+         * "showing 20 of 400" in view — you stay in the table's context instead of
+         * scrolling the whole surface away and losing the controls that scope it.
+         *
+         * OPT-IN. A short list scrolling inside a box shorter than the list is worse
+         * than a page that scrolls, and there is no way for this component to know
+         * which it is looking at.
+         *
+         * The header row moves INSIDE the scroll container and sticks, rather than
+         * sitting above it. That is not a detail: a scrollbar takes width from the
+         * scrolling box, so a header outside it stays wider than the rows and every
+         * column drifts by however wide the scrollbar is.
+         */
+        scrollBody?: boolean | {
+            maxHeight?: string;
+        };
         pagination?: boolean | {
             pageSize?: number;
         };
@@ -33,23 +69,36 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     } & {
         sort?: SortState;
         page?: number;
+        viewMode?: string;
+        railOpen?: boolean;
     }) & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {
+        [x: string]: ((props: {}) => any) | undefined;
+    } & {
         [x: string]: ((props: {
             row: any;
         }) => any) | undefined;
     } & {
         'filter-menu'?: (props: {}) => any;
+    } & {
+        scope?: (props: {}) => any;
     } & {
         'toolbar-left'?: (props: {}) => any;
+    } & {
+        'toolbar-right'?: (props: {}) => any;
     } & {
         actions?: (props: {}) => any;
+    } & {
+        view?: (props: {
+            rows: any;
+            loading: any;
+        }) => any;
     } & {
         empty?: (props: {}) => any;
     };
-    emit: (((evt: "rowClick", row: T) => void) & ((evt: "stateChange", state: DataTableState) => void)) & (((evt: "update:sort", value: SortState) => void) & ((evt: "update:page", value: number) => void));
+    emit: (((evt: "rowClick", row: T) => void) & ((evt: "stateChange", state: DataTableState) => void)) & (((evt: "update:sort", value: SortState) => void) & ((evt: "update:page", value: number) => void) & ((evt: "update:viewMode", value: string) => void) & ((evt: "update:railOpen", value: boolean) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };