@revenexx/studio-shared 0.3.0 → 0.3.2

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

@@ -1,23 +1,28 @@
 <script setup>
-import { AltArrowDown, Filter, Magnifier as Search, SidebarMinimalistic } 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";
-import ViewModeSwitch from "./ViewModeSwitch.vue";
 const props = defineProps({
   data: { type: Array, required: true },
   columns: { type: Array, required: true },
@@ -29,6 +34,7 @@ const props = defineProps({
   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 },
@@ -57,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) {
@@ -86,23 +93,33 @@ const filterDims = computed(() => {
   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;
@@ -207,6 +224,11 @@ function toggleSort(column) {
   }
   sort.value = { column: null, direction: null };
 }
+function ariaSortFor(col) {
+  if (!col.sortable) return void 0;
+  if (sort.value.column !== col.key) return "none";
+  return sort.value.direction === "desc" ? "descending" : "ascending";
+}
 function rowKeyFor(row) {
   if (typeof props.rowKey === "function") return props.rowKey(row);
   return row[props.rowKey];
@@ -218,6 +240,10 @@ const gridTemplate = computed(() => {
 const placeholder = computed(
   () => typeof props.search === "object" ? props.search.placeholder ?? t("shared.datatable.toolbar.search.placeholder.default") : t("shared.datatable.toolbar.search.placeholder.default")
 );
+const searchLabel = computed(() => {
+  const configured = typeof props.search === "object" ? props.search.label ?? props.search.placeholder : void 0;
+  return configured ?? t("shared.datatable.toolbar.search.aria.label");
+});
 const slots = useSlots();
 const showToolbar = computed(
   () => 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"]
@@ -231,6 +257,11 @@ const showSortMenu = computed(() => !showTable.value && sortableColumns.value.le
 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
@@ -255,13 +286,42 @@ function defaultCell(col, row) {
 <template>
   <div class="rounded-lg border border-black/[0.06] overflow-hidden flex flex-col">
     <!-- Toolbar ------------------------------------------------------ -->
-    <!-- The single control row of a list surface:
-         LEFT  = rail · search · filter · columns · #toolbar-left
-         RIGHT = #toolbar-right · saved views · #scope · view mode · #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 flex-wrap 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">
         <Button
@@ -278,77 +338,111 @@ function defaultCell(col, row) {
           {{ railLabel }}
         </Button>
         <!-- Shrinks (never wraps the row) once the toolbar carries scope /
-             view-mode / saved-view controls next to it. -->
-        <div v-if="search" class="relative w-[21rem] min-w-40 max-w-full shrink">
-          <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" />
-              {{ t("shared.datatable.toolbar.filter.action") }}
-              <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 ?? t("shared.datatable.toolbar.filter.all.default") }}</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>
+             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"
+          :label="searchLabel"
+          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>
         <SortMenu v-if="showSortMenu" v-model="sort" :columns="sortableColumns" />
-        <ColumnsMenu
+        <!--
+          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"
-          :columns="menuColumns"
-          :visible="visibleKeys"
-          @toggle="toggleColumn"
-        />
+          :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" />
-        <SavedViewsMenu v-if="savedViews" :config="savedViews" />
-        <!-- Market scope ("Showing: … / All markets") — the surface passes the
-             shared MarketScopeToggle in; the row position is fixed here. -->
-        <slot name="scope" />
-        <ViewModeSwitch v-if="viewModes?.length" v-model="viewMode" :modes="viewModes" />
         <slot name="actions" />
       </div>
     </div>
@@ -358,15 +452,48 @@ function defaultCell(col, row) {
       <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.
+
+         IT IS ALSO THE TABLE. The box that holds the header and the rows and
+         nothing else is the only element in this component that can carry the
+         role: the root has the toolbar and the footer in it, and a `table` may
+         own rows and rowgroups only. Which is why everything below is a `row`
+         or is hidden — an empty state or a skeleton left as a bare `div` here
+         would be a child the role does not allow, and the whole table's
+         semantics are then whatever the browser decides to salvage.
+
+         `table` and not `grid`. `grid` is the interactive one: it promises
+         arrow keys move a focus between cells, and nothing here implements
+         that. A static table read with a screen reader's own table commands is
+         what these lists actually are, and both roles announce the column
+         heading with the cell, which is the thing that was missing. -->
+    <div
+      :role="showTable ? 'table' : void 0"
+      :aria-busy="showTable && loading ? 'true' : void 0"
+      :class="scrollBody ? 'min-h-0 overflow-y-auto' : 'contents'"
+      :style="scrollStyle"
+    >
     <!-- Header row -------------------------------------------------- -->
     <div
       v-if="showTable"
+      role="row"
       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"
     >
+      <!-- `columnheader` is what names every cell underneath it, so this is
+           the half of the fix that does the work. `aria-sort` goes with it:
+           a heading that carries a sort button and says nothing about the
+           current direction is a control whose state is visible only to
+           people who can see the arrow. -->
       <div
         v-for="col in visibleColumns"
         :key="col.key"
+        role="columnheader"
+        :aria-sort="ariaSortFor(col)"
         :class="col.alignRight ? 'text-right' : ''"
       >
         <!-- `#header-<key>` lets a page take over a header cell (e.g. a
@@ -383,23 +510,33 @@ function defaultCell(col, row) {
           >
             {{ col.label }}
           </SortHeader>
-          <span v-else>{{ col.label }}</span>
+          <!-- `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 showTable ? renderRows : []" :key="entry.key">
-      <!-- Group header (groupBy mode) -->
+      <!-- Group header (groupBy mode) — a row of one cell that spans the lot.
+           The flex moves one element in, onto the cell: a `row` may hold
+           cells and the label and the count are neither. -->
       <div
         v-if="entry.kind === 'header'"
-        class="flex items-center gap-2 border-t border-black/[0.04] bg-gray-100/70 px-4 py-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground"
+        role="row"
+        class="border-t border-black/[0.04] bg-gray-100/70 px-4 py-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground"
       >
-        {{ entry.label }}
-        <span class="tabular-nums normal-case text-muted-foreground/70">{{ entry.count }}</span>
+        <div role="cell" :aria-colspan="visibleColumns.length" class="flex items-center gap-2">
+          {{ entry.label }}
+          <span class="tabular-nums normal-case text-muted-foreground/70">{{ entry.count }}</span>
+        </div>
       </div>
       <div
         v-else
+        role="row"
         class="group grid items-center gap-2 border-t border-black/[0.04] px-4 py-3 cursor-pointer bg-gray-50 transition-colors"
         :style="gridTemplate"
         @click="emit('rowClick', entry.row)"
@@ -407,6 +544,7 @@ function defaultCell(col, row) {
         <div
           v-for="col in visibleColumns"
           :key="col.key"
+          role="cell"
           class="min-w-0"
           :class="col.alignRight ? 'text-right' : ''"
         >
@@ -430,11 +568,16 @@ function defaultCell(col, row) {
       </div>
     </template>
 
-    <!-- Loading skeleton (only when there are no rows yet) ----------- -->
+    <!-- Loading skeleton (only when there are no rows yet) -----------
+         Hidden rather than given roles. Six rows of pulsing grey carry no
+         information to read out, and announcing them as six empty rows would
+         be worse than silence; the table says it is `aria-busy` instead,
+         which is the same news in one word. -->
     <template v-if="showTable && loading && !displayedRows.length">
       <div
         v-for="n in 6"
         :key="`sk-${n}`"
+        aria-hidden="true"
         class="grid items-center gap-2 border-t border-black/[0.04] bg-gray-50 px-4 py-3"
         :style="gridTemplate"
       >
@@ -454,11 +597,16 @@ function defaultCell(col, row) {
     <!-- Empty -------------------------------------------------------- -->
     <div
       v-if="showTable && !displayedRows.length && !loading"
+      role="row"
       class="px-3 py-8 text-center text-sm text-muted-foreground"
     >
-      <slot name="empty">
-        {{ emptyText ?? t("shared.datatable.empty.default") }}
-      </slot>
+      <div role="cell" :aria-colspan="visibleColumns.length">
+        <slot name="empty">
+          {{ emptyText ?? t("shared.datatable.empty.default") }}
+        </slot>
+      </div>
+    </div>
+
     </div>
 
     <!-- Footer ------------------------------------------------------- -->

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

@@ -11,8 +11,11 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         data: T[];
         columns: DataTableColumn<T>[];
         rowKey: RowKey<T>;
+        /** `label` is the field's accessible name; it defaults to the placeholder
+         *  where the surface wrote one (see `searchLabel`). */
         search?: boolean | {
             placeholder?: string;
+            label?: string;
         };
         columnsMenu?: boolean;
         /** Mount the surface's own filter panel in the toolbar's Filter popover
@@ -20,6 +23,7 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         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). */
@@ -32,6 +36,26 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         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;
         };
@@ -61,12 +85,12 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         }) => any) | undefined;
     } & {
         'filter-menu'?: (props: {}) => any;
+    } & {
+        scope?: (props: {}) => any;
     } & {
         'toolbar-left'?: (props: {}) => any;
     } & {
         'toolbar-right'?: (props: {}) => any;
-    } & {
-        scope?: (props: {}) => any;
     } & {
         actions?: (props: {}) => any;
     } & {

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

@@ -1,12 +1,14 @@
 type __VLS_Props = {
     /** Popover width class (a wide panel of inputs needs more than the default). */
     width?: string;
-    /** Tint the trigger while at least one filter is set. */
+    /** The trigger goes primary while at least one filter is set. */
     active?: boolean;
+    /** How many are set, for the badge. */
+    count?: number;
 };
-declare var __VLS_34: {};
+declare var __VLS_22: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_34) => any;
+    default?: (props: typeof __VLS_22) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     active: boolean;