@conduction/nextcloud-vue 2.65.0 → 2.67.0

package/dist/nextcloud-vue.cjs.js.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/dist/nextcloud-vue.cjs.js.map
-size: 35252015 bytes
-sha256: fc6a53315288d3796fbfb1aabafee9aa7c5145a0eadbfa2e240269fa544b9764
+size: 35372297 bytes
+sha256: 7065df25e721d338e4612aac2ee75c58c87fb5e17477c811e7bcf66cee41783d

package/dist/nextcloud-vue.css

@@ -1940,6 +1940,23 @@ a.cn-kpi-card--stacked:focus-visible {
 	color: var(--color-text-maxcontrast);
 }
 
+/* Beside the inline search (`showCountWithSearch`): the search field shrinks
+   first and the counter stays on one line. */
+.cn-actions-bar__count--beside-search {
+	flex-shrink: 0;
+	white-space: nowrap;
+}
+
+/* Taken out of the flex row so it adds no gap, but kept in the accessibility
+   tree so the live region exists before a total appears. */
+.cn-actions-bar__count--empty {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip-path: inset(50%);
+}
+
 /* Inline search field */
 .cn-actions-bar__search {
 	position: relative;
@@ -2199,8 +2216,9 @@ a.cn-kpi-card--stacked:focus-visible {
 		display: contents;
 	}
 
-	/* #after-search filter buttons + the view toggle ride beside the
-	   search field (DOM order — search first via its own order). */
+	/* #after-search filter buttons, the beside-search counter and the view
+	   toggle ride beside the search field (DOM order — search first via its
+	   own order). */
 	.cn-actions-bar__info > * {
 		order: 1;
 	}
@@ -3279,6 +3297,11 @@ a.cn-kpi-card--stacked:focus-visible {
 	font-size: 0.9em;
 	white-space: nowrap;
 }
+
+/* A page view the switch shows with nothing to draw (view-switch-containers). */
+.cn-detail-page .cn-page-view-region--empty {
+	padding: 40px 20px;
+}
 /* CnReferencePreview — a reference that shows what it points at. */
 
 .cn-reference-preview {
@@ -30567,6 +30590,19 @@ to {
 .cn-dashboard-page__empty[data-v-824052fe] {
 	padding: 60px 20px;
 }
+
+/* The page's view switch on a page without a header row: at the end of its
+   own row, above the grids, where the header would have put it. */
+.cn-dashboard-page__view-switch[data-v-824052fe] {
+	display: flex;
+	justify-content: flex-end;
+	margin-bottom: 12px;
+}
+
+/* A view the switch shows with nothing to draw. */
+.cn-page-view-region--empty[data-v-824052fe] {
+	padding: 40px 20px;
+}
 .cn-dashboard-page__page-filters[data-v-824052fe] {
 	display: flex;
 	flex-wrap: wrap;

package/l10n/en.json

@@ -1,5 +1,6 @@
 {
   "translations": {
+    "Advanced": "Advanced",
     "The item could not be created.": "The item could not be created.",
     "Start over": "Start over",
     "Continue where you left off": "Continue where you left off",
@@ -49,6 +50,7 @@
     "This integration is not available.": "This integration is not available.",
     "Integrations": "Integrations",
     "View": "View",
+    "Views": "Views",
     "current step": "current step",
     "{app} not available": "{app} not available",
     "{app} not configured": "{app} not configured",
@@ -408,6 +410,7 @@
     "Any": "Any",
     "To": "To",
     "Equals": "Equals",
+    "Contains": "Contains",
     "Clear": "Clear",
     "Apply": "Apply",
     "This column cannot list its objects.": "This column cannot list its objects.",
@@ -1088,6 +1091,7 @@
     "The actions of an attention card are declared in the manifest.": "The actions of an attention card are declared in the manifest.",
     "An attention card needs a title": "An attention card needs a title",
     "Good morning, {name}": "Good morning, {name}",
+    "This view has no widgets yet.": "This view has no widgets yet.",
     "Good morning": "Good morning",
     "Good afternoon, {name}": "Good afternoon, {name}",
     "Good afternoon": "Good afternoon",
@@ -1097,7 +1101,9 @@
     "Show the date of today above the heading": "Show the date of today above the heading",
     "Plain header without a coloured background": "Plain header without a coloured background",
     "Loading…": "Loading…",
-    "A register and schema are required": "A register and schema are required"
+    "A register and schema are required": "A register and schema are required",
+    "Change the search or try again.": "Change the search or try again.",
+    "Try again later.": "Try again later."
   },
   "plurals": {
     "%n year": ["%n year", "%n years"],

package/l10n/nl.json

@@ -1,5 +1,6 @@
 {
   "translations": {
+    "Advanced": "Geavanceerd",
     "The item could not be created.": "Het item kon niet worden aangemaakt.",
     "Start over": "Opnieuw beginnen",
     "Continue where you left off": "Ga verder waar je was",
@@ -49,6 +50,7 @@
     "This integration is not available.": "Deze integratie is niet beschikbaar.",
     "Integrations": "Integraties",
     "View": "Weergave",
+    "Views": "Weergaven",
     "current step": "huidige stap",
     "{app} not available": "{app} niet beschikbaar",
     "{app} not configured": "{app} niet geconfigureerd",
@@ -408,6 +410,7 @@
     "Any": "Alle",
     "To": "Tot",
     "Equals": "Is gelijk aan",
+    "Contains": "Bevat",
     "Clear": "Wissen",
     "Apply": "Toepassen",
     "This column cannot list its objects.": "Deze kolom kan zijn objecten niet tonen.",
@@ -1132,6 +1135,7 @@
     "The actions of an attention card are declared in the manifest.": "De acties van een aandachtskaart staan in het manifest.",
     "An attention card needs a title": "Een aandachtskaart heeft een titel nodig",
     "Good morning, {name}": "Goedemorgen, {name}",
+    "This view has no widgets yet.": "Deze weergave heeft nog geen widgets.",
     "Good morning": "Goedemorgen",
     "Good afternoon, {name}": "Goedemiddag, {name}",
     "Good afternoon": "Goedemiddag",
@@ -1141,7 +1145,9 @@
     "Show the date of today above the heading": "Toon de datum van vandaag boven de kop",
     "Plain header without a coloured background": "Eenvoudige kop zonder gekleurde achtergrond",
     "Loading…": "Laden…",
-    "A register and schema are required": "Een register en schema zijn verplicht"
+    "A register and schema are required": "Een register en schema zijn verplicht",
+    "Change the search or try again.": "Pas de zoekopdracht aan of probeer het opnieuw.",
+    "Try again later.": "Probeer het later opnieuw."
   },
   "plurals": {
     "%n year": ["%n jaar", "%n jaar"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.65.0",
+  "version": "2.67.0",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnActionsBar/CnActionsBar.md

@@ -152,9 +152,10 @@ Controlling the inline action button count — `inlineActionCount` sets how many
 | `showMap` | `Boolean` | `false` | Whether to render the third "Map" view-toggle segment. Off by default so existing two-segment consumers are unchanged |
 | `mapLabel` | `String` | `''` | Label for the map view-toggle option (defaults to "Map"). Only shown when `showMap` |
 | `mapIcon` | `String` | `''` | MDI icon name for the map option (defaults to the built-in map-marker icon). Resolved via `CnIcon` |
-| `showSearch` | `Boolean` | `false` | Whether to show the inline search field on the left of the bar |
+| `showSearch` | `Boolean` | `false` | Whether to show the inline search field on the left of the bar. The field takes the place of the "Showing X of Y" counter unless `showCountWithSearch` is set |
 | `searchValue` | `String` | `''` | Current value of the inline search field (controlled) |
 | `searchPlaceholder` | `String` | `''` | Placeholder / accessible label for the inline search field |
+| `showCountWithSearch` | `Boolean` | `false` | Keep the "Showing X of Y" counter visible beside the inline search field, after the search and any `#after-search` controls. No effect without `showSearch` |
 | `headerActions` | `Array` | `[]` | Manifest-declared page-level actions rendered inside the overflow dropdown between the built-in Refresh and the `#action-items` slot. Each entry is `{ id, label, icon?, disabled? }` — the bar emits `@header-action({ action: id, id })` on click and the parent (e.g. `CnIndexPage`) dispatches the resolved handler. The `icon` field accepts EITHER an MDI Vue component name (e.g. `'History'`) — rendered via `CnIcon` — OR a Nextcloud core CSS icon class (e.g. `'icon-history'`) — rendered as a `<span>` carrying that class. An entry with `href` (URL) or `to` (vue-router location) renders as a real link, `linkTarget` as its `target`; it still emits `@header-action`, so the parent must not navigate for it again. |
 
 ## Manifest header actions example

package/src/components/CnActionsBar/CnActionsBar.vue

@@ -12,11 +12,16 @@
 					:aria-label="searchPlaceholder || t('nextcloud-vue', 'Search')"
 					@input="onSearchInput">
 			</div>
-			<span v-else-if="pagination && pagination.total > 0" class="cn-actions-bar__count">
+			<span v-else-if="hasTotal" class="cn-actions-bar__count">
 				{{ countText }}
 			</span>
 			<!-- @slot after-search Refinement controls rendered beside the search field on the LEFT side of the bar (e.g. a filter menu button). Convention: the left side groups the VISUAL controls — search, filters, view toggle — while the right cluster holds the ACT controls (add, overflow); the standalone sort select is a display control too but keeps its legacy right-side placement. -->
 			<slot name="after-search" />
+			<!-- Counter beside the search (`showCountWithSearch`): after the search and its #after-search controls. The live region stays mounted while there is no total, so results coming back after none are announced too. -->
+			<span v-if="showSearch && showCountWithSearch"
+				class="cn-actions-bar__count cn-actions-bar__count--beside-search"
+				:class="{ 'cn-actions-bar__count--empty': !hasTotal }"
+				aria-live="polite">{{ hasTotal ? countText : '' }}</span>
 
 			<!-- View mode toggle (Cards / Table / List) — segmented control with
 			     a sliding thumb that animates between the N segments. Lives in
@@ -644,6 +649,16 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Keep the "Showing X of Y" counter visible beside the inline search field,
+		 * after any `#after-search` controls. By default the search field takes the
+		 * counter's place. No effect without `showSearch`.
+		 */
+		showCountWithSearch: {
+			type: Boolean,
+			default: false,
+		},
+
 		/** Whether the refresh action is currently in progress */
 		refreshing: {
 			type: Boolean,
@@ -811,6 +826,15 @@ export default {
 			}))
 		},
 
+		/**
+		 * Whether there is a non-empty total for the "Showing X of Y" counter.
+		 *
+		 * @return {boolean}
+		 */
+		hasTotal() {
+			return Boolean(this.pagination && this.pagination.total > 0)
+		},
+
 		countText() {
 			if (!this.pagination) {
 				return ''

package/src/components/CnAppNav/CnAppNav.vue

@@ -1113,7 +1113,7 @@ export default {
 
 		/**
 		 * Label for the foldout's gear button. Manifest override:
-		 * `nav.settingsLabel`; defaults to "Settings".
+		 * `nav.settingsLabel`; defaults to "Advanced".
 		 *
 		 * @return {string}
 		 */
@@ -1122,7 +1122,7 @@ export default {
 			if (typeof custom === 'string' && custom.length > 0) {
 				return this.effectiveTranslate(custom)
 			}
-			return t('nextcloud-vue', 'Settings')
+			return t('nextcloud-vue', 'Advanced')
 		},
 
 		/**

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -32,6 +32,18 @@
 				</p>
 			</div>
 			<div class="cn-dashboard-page__header-actions">
+				<!-- The page's view switch (`views`), unless a greeting header
+				     widget on the page draws it. Its options control the view
+				     region below the grid. -->
+				<CnSegmentedControl
+					v-if="showsPageViewSwitch"
+					class="cn-page-view-switch"
+					:options="viewSwitchOptions"
+					:modelValue="activeViewId"
+					:ariaLabel="viewSwitchLabel"
+					:controls="viewRegionId"
+					data-testid="cn-dashboard-page-view-switch"
+					@update:modelValue="selectView" />
 				<!-- Declarative header actions (#91 Wave 3): a manifest
 				     `headerActions[]` renders as buttons (open-form / api-call /
 				     toggle / navigate / refresh) with visibleWhen gating,
@@ -218,7 +230,7 @@
 		     sections (before-grid / after-grid / end): a page can legitimately
 		     have no grid widgets yet still show bodyWidget content, so
 		     "No widgets configured" would be a false negative. -->
-		<div v-else-if="!hasWidgets && !hasBodyWidgets" class="cn-dashboard-page__empty">
+		<div v-else-if="!hasWidgets && !hasBodyWidgets && !hasViews" class="cn-dashboard-page__empty">
 			<!-- @slot empty Replaces the default empty state shown when the dashboard has no widgets. Defaults to an `NcEmptyContent` block. -->
 			<slot name="empty">
 				<NcEmptyContent :description="emptyLabel">
@@ -253,15 +265,34 @@
 		     to the layout/widgets arrays — in-place pushes (Add widget) keep
 		     the same array identity and can't re-render it. One remount per
 		     edit flip re-subscribes against the now-reactive graph. -->
+		<!-- The view switch for a page without a header row, when no greeting
+		     header widget draws it. -->
+		<div
+			v-if="gridSectionsShown && !showHeader && showsPageViewSwitch"
+			class="cn-dashboard-page__view-switch">
+			<CnSegmentedControl
+				class="cn-page-view-switch"
+				:options="viewSwitchOptions"
+				:modelValue="activeViewId"
+				:ariaLabel="viewSwitchLabel"
+				:controls="viewRegionId"
+				data-testid="cn-dashboard-page-view-switch"
+				@update:modelValue="selectView" />
+		</div>
+		<!-- One grid per section: the page's own layout, then the chosen
+		     view (`views`) in a region the view switch controls. Both are the
+		     same grid with the same widget rendering below. A view grid is
+		     keyed on its view, so switching mounts the other view's grid. -->
 		<CnDashboardGrid
-			v-else
-			:key="`cn-dashboard-grid-${gridEditable ? 'editing' : 'live'}`"
-			:layout="displayLayout"
-			:editable="gridEditable"
+			v-for="section in gridSections"
+			:key="`cn-dashboard-grid-${section.key}-${gridEditable ? 'editing' : 'live'}`"
+			v-bind="section.attrs"
+			:layout="section.layout"
+			:editable="section.editable"
 			:columns="columns"
 			:cellHeight="cellHeight"
 			:margin="gridMargin"
-			@layoutChange="onLayoutChange">
+			@layoutChange="section.view ? onViewLayoutChange($event) : onLayoutChange($event)">
 			<template #widget="{ item }">
 				<!-- In-app edit overlay (ADR-041): a single launchpad-style
 				     configure cog opens the per-widget style/config editor,
@@ -655,6 +686,22 @@
 			</template>
 		</CnDashboardGrid>
 
+		<!-- The chosen view has nothing to draw: say so in the region, never
+		     leave a blank area under the switch. -->
+		<div
+			v-if="gridSectionsShown && viewIsEmpty"
+			:id="viewRegionId"
+			role="region"
+			:aria-label="activeView ? activeView.label : null"
+			class="cn-page-view-region cn-page-view-region--empty"
+			data-testid="cn-dashboard-page-view-empty">
+			<NcEmptyContent :description="viewEmptyText">
+				<template #icon>
+					<ViewDashboardOutline :size="48" />
+				</template>
+			</NcEmptyContent>
+		</div>
+
 		<!-- Declarative in-body sections, `placement: "after-grid"` — host-app
 		     section components rendered BELOW the widget grid. -->
 		<CnBodySections
@@ -714,6 +761,7 @@ import CnBuildiqEditButton from '../CnBuildiqEditButton/CnBuildiqEditButton.vue'
 import CnChartWidget from '../CnChartWidget/CnChartWidget.vue'
 import CnDashboardGrid from '../CnDashboardGrid/CnDashboardGrid.vue'
 import CnDateRangePicker, { DEFAULT_DATE_RANGE_PRESETS, resolvePresetWindow } from '../CnDateRangePicker/CnDateRangePicker.vue'
+import CnSegmentedControl from '../CnSegmentedControl/CnSegmentedControl.vue'
 import CnStatsBlockWidget from '../CnStatsBlockWidget/CnStatsBlockWidget.vue'
 import CnTileWidget from '../CnTileWidget/CnTileWidget.vue'
 import CnWidgetRefItem from '../CnWidgetRefItem/CnWidgetRefItem.vue'
@@ -721,6 +769,7 @@ import CnWidgetRenderer from '../CnWidgetRenderer/CnWidgetRenderer.vue'
 import CnWidgetWrapper from '../CnWidgetWrapper/CnWidgetWrapper.vue'
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
 import { readUserPreference, writeUserPreference } from '../../composables/useUserPreferences.js'
+import { pageViews } from '../../mixins/pageViews.js'
 import { dashboardLayoutKey, mergeUserLayout } from '../../store/plugins/dashboardLayouts.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
 import { compareVisibleWhen, readVisibleWhenValue } from '../../utils/visibleWhen.js'
@@ -875,8 +924,11 @@ export default {
 		CnBuildiqEditButton,
 		CnWidgetStyleEditorModal,
 		CnLeafMountHost,
+		CnSegmentedControl,
 	},
 
+	mixins: [pageViews],
+
 	inject: {
 		/**
 		 * Buildiq in-app edit state (ADR-041), provided by CnAppRoot as a ref.
@@ -1879,6 +1931,89 @@ export default {
 			return this.layout.length > 0 || this.widgetRefItems.length > 0
 		},
 
+		/**
+		 * Whether the grid sections render at all: not while loading, not
+		 * while the widget predicates settle, not on the empty page and not
+		 * on a widget-ref content page.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-page-declares-views-that-each-hold-a-widget-grid
+		 */
+		gridSectionsShown() {
+			if (this.loading || (!this.widgetConditionsSettled && !this.gridEditable)) {
+				return false
+			}
+			if (!this.hasWidgets && !this.hasBodyWidgets && !this.hasViews) {
+				return false
+			}
+			return this.widgetRefItems.length === 0
+		},
+
+		/**
+		 * The chosen view's layout as the grid draws it: in live mode the
+		 * widgets that would draw nothing leave and the rest close up, as
+		 * for the page's own layout.
+		 *
+		 * @return {Array<object>}
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-view-with-nothing-to-draw-says-so
+		 */
+		viewDisplayLayout() {
+			const items = this.activeView ? this.activeView.layout : []
+			if (this.gridEditable) {
+				return items
+			}
+			const visible = items.filter((item) => !this.isCollapsedWidget(item))
+			return visible.length === items.length ? items : this.compactDisplayLayout(visible)
+		},
+
+		/**
+		 * Whether the chosen view has nothing to draw.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-view-with-nothing-to-draw-says-so
+		 */
+		viewIsEmpty() {
+			return this.hasViews && this.viewDisplayLayout.length === 0
+		},
+
+		/**
+		 * The grids this page draws. Without views: the page's own layout,
+		 * as it always was. With views: the page's own layout when it has
+		 * items, then the chosen view's layout in the region the switch
+		 * controls (left out when the view is empty; the empty state takes
+		 * the region then).
+		 *
+		 * @return {Array<{key: string, view: boolean, layout: Array<object>, editable: boolean, attrs: object}>}
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-page-declares-views-that-each-hold-a-widget-grid
+		 */
+		gridSections() {
+			if (!this.gridSectionsShown) {
+				return []
+			}
+			const page = { key: 'page', view: false, layout: this.displayLayout, editable: this.gridEditable, attrs: {} }
+			if (!this.hasViews) {
+				return [page]
+			}
+			const sections = this.displayLayout.length > 0 ? [page] : []
+			if (!this.viewIsEmpty) {
+				sections.push({
+					key: `view-${this.activeViewId}`,
+					view: true,
+					layout: this.viewDisplayLayout,
+					// A user arrangement covers the page's own layout only.
+					editable: this.gridEditable && !this.userLayout,
+					attrs: {
+						id: this.viewRegionId,
+						role: 'region',
+						'aria-label': this.activeView.label,
+						class: 'cn-page-view-region',
+						'data-testid': 'cn-dashboard-page-view-region',
+					},
+				})
+			}
+			return sections
+		},
+
 		/**
 		 * The widget settings object handed to CnWidgetStyleEditorModal,
 		 * built from the widget definition currently being configured
@@ -2009,6 +2144,14 @@ export default {
 				this.evaluateWidgetConditions()
 			},
 		},
+
+		/** A view's widgets carry predicates too. */
+		views: {
+			deep: true,
+			handler() {
+				this.evaluateWidgetConditions()
+			},
+		},
 	},
 
 	created() {
@@ -2873,7 +3016,8 @@ export default {
 		 * @spec openspec/changes/live-check-follow-ups/specs/live-check-follow-ups/spec.md#requirement-an-attention-card-says-when-it-could-not-check
 		 */
 		async evaluateWidgetConditions() {
-			const conditional = (this.widgets || []).filter((def) => def && def.id && def.type
+			const defs = [...(this.widgets || []), ...this.normalizedViews.flatMap((view) => view.widgets)]
+			const conditional = defs.filter((def) => def && def.id && def.type
 				&& this.widgetDisplayConfig(def).visibleWhen)
 			// Skip when the CONDITIONAL SET is unchanged: the deep `widgets`
 			// watch fires on any def edit, but only an added/removed/edited
@@ -3007,7 +3151,7 @@ export default {
 		 */
 		getWidgetDef(widgetId) {
 			const list = Array.isArray(this.widgets) ? this.widgets : []
-			return list.find((w) => w && w.id === widgetId) || null
+			return list.find((w) => w && w.id === widgetId) || this.findViewWidget(widgetId)
 		},
 
 		/**
@@ -4021,6 +4165,19 @@ export default {
 	padding: 60px 20px;
 }
 
+/* The page's view switch on a page without a header row: at the end of its
+   own row, above the grids, where the header would have put it. */
+.cn-dashboard-page__view-switch {
+	display: flex;
+	justify-content: flex-end;
+	margin-bottom: 12px;
+}
+
+/* A view the switch shows with nothing to draw. */
+.cn-page-view-region--empty {
+	padding: 40px 20px;
+}
+
 .cn-dashboard-page__page-filters {
 	display: flex;
 	flex-wrap: wrap;

package/src/components/CnDataTable/CnColumnFilterPopover.vue

@@ -91,9 +91,9 @@
 				</label>
 			</div>
 
-			<!-- string: equals -->
+			<!-- string: contains (OpenRegister `[like]`, case-insensitive) -->
 			<label v-else class="cn-column-filter__field">
-				<span class="cn-column-filter__label">{{ equalsLabel }}</span>
+				<span class="cn-column-filter__label">{{ containsLabel }}</span>
 				<input
 					v-model="draft.value"
 					class="cn-column-filter__input"
@@ -131,7 +131,7 @@ let popoverSeq = 0
  *
  * Renders the control that fits the column: a checkbox list for an enum, yes,
  * no or any for a boolean, from and to for a number or a date, a searchable
- * list of referenced objects for a reference, and an equals box for text.
+ * list of referenced objects for a reference, and a contains box for text.
  * Real inputs throughout, so every control works from the keyboard. Escape
  * closes it and the host returns focus to the filter button.
  *
@@ -265,8 +265,14 @@ export default {
 			return t('nextcloud-vue', 'To')
 		},
 
-		equalsLabel() {
-			return t('nextcloud-vue', 'Equals')
+		/**
+		 * Label of the text box: the text filter matches on contains.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/header-filter-contains/specs/cn-data-table/spec.md#requirement-a-text-header-filter-matches-on-contains
+		 */
+		containsLabel() {
+			return t('nextcloud-vue', 'Contains')
 		},
 
 		clearLabel() {

package/src/components/CnDataTable/CnDataTable.md

@@ -186,7 +186,7 @@ export default {
 | `includeColumns` | Array | `null` | Column keys to include (whitelist) in schema mode |
 | `sortKey` | String | `null` | Currently active sort column key (controlled) |
 | `sortOrder` | String | `'asc'` | Current sort direction: `'asc'` or `'desc'` |
-| `sortKeys` | Array | `[]` | Ordered multi-column ("shift+click") sort key list, `[{ key, order }, …]` (0–3 entries); takes precedence over `sortKey`/`sortOrder` when non-empty. Priority badges show only when two or more rendered, sortable columns are sorted; a key whose column is not rendered or not sortable (such as a `_uuid` tie-break) still sorts, but is not counted or numbered |
+| `sortKeys` | Array | `[]` | Ordered multi-column ("shift+click") sort key list, `[{ key, order }, …]` (0–3 entries); takes precedence over `sortKey`/`sortOrder` when non-empty. Priority badges show only when two or more rendered, sortable columns are sorted; a key whose column is not rendered or not sortable (such as a `_uuid` tie-break) still sorts, but is not counted or numbered, and `aria-sort` goes to the first sort key whose column is rendered and sortable |
 | `selectedIds` | Array | `[]` | Array of selected row IDs (controlled) |
 | `rowClass` | Function | `null` | `(row) => string` — CSS class(es) applied to each `<tr>` |
 | `rowClickToView` | Boolean | `false` | Emit `row-click` on a row-body click even while `selectable` (selection then via the checkbox column only) |

package/src/components/CnDataTable/CnDataTable.vue

@@ -371,7 +371,7 @@ import '../../css/table.css'
  *
  * Sorting: a plain click on a sortable header is single-sort (cycle asc → desc → cleared), unchanged from before.
  * Shift+click (or Shift+Enter on a focused header) appends the column as a secondary/tertiary sort key, capped at 3, with numbered priority badges (1, 2, 3) once two or more rendered, sortable columns are sorted.
- * A sort key whose column is not rendered, or not sortable, still sorts, but is not counted or numbered.
+ * A sort key whose column is not rendered, or not sortable, still sorts, but is not counted or numbered, and `aria-sort` goes to the first sort key whose column is rendered and sortable.
  * Pass `sortKeys: [{key, order}, ...]` for multi-sort (falls back to the legacy `sortKey`/`sortOrder` props when empty).
  * The `sort` event payload is extended, not replaced: `{key, order}` still mirrors the primary key exactly as before; a new `keys` field carries the full ordered list.
  * See `src/utils/multiColumnSort.js` for the state machine.
@@ -1722,8 +1722,8 @@ export default {
 		},
 
 		/**
-		 * `aria-sort` value for a column header: `'ascending'`/`'descending'` for the PRIMARY (index 0) active sort key only, per WCAG guidance that `aria-sort` describes single-column sort state.
-		 * `null` omits the attribute entirely (unsorted, not sortable, or not the primary key).
+		 * `aria-sort` value for a column header: `'ascending'`/`'descending'` for the first rendered sort key only, per WCAG guidance that `aria-sort` describes single-column sort state.
+		 * `null` omits the attribute entirely (unsorted, not sortable, or not the first rendered sort key).
 		 *
 		 * @param {object} col Column definition.
 		 * @return {string|null}
@@ -1732,7 +1732,7 @@ export default {
 			if (!col.sortable) {
 				return null
 			}
-			const primary = this.effectiveSortKeys[0]
+			const primary = this.renderedSortKeys[0]
 			if (!primary || primary.key !== col.key) {
 				return null
 			}