@conduction/nextcloud-vue 2.101.0 → 2.102.0

package/l10n/en.json

@@ -1720,7 +1720,11 @@
     "Made {date}": "Made {date}",
     "expires {date}": "expires {date}",
     "Loading …": "Loading …",
-    "Reorder {item}: drag, or press the up and down arrow keys": "Reorder {item}: drag, or press the up and down arrow keys"
+    "Reorder {item}: drag, or press the up and down arrow keys": "Reorder {item}: drag, or press the up and down arrow keys",
+    "No contacts linked": "No contacts linked",
+    "No relations yet": "No relations yet",
+    "Period": "Period",
+    "On": "On"
   },
   "plurals": {
     "{count} selected": [

package/l10n/nl.json

@@ -1933,7 +1933,11 @@
     "Expires today": "Verloopt vandaag",
     "Made {date}": "Gemaakt {date}",
     "expires {date}": "verloopt {date}",
-    "Reorder {item}: drag, or press the up and down arrow keys": "{item} verplaatsen: slepen, of de pijltoetsen omhoog en omlaag"
+    "Reorder {item}: drag, or press the up and down arrow keys": "{item} verplaatsen: slepen, of de pijltoetsen omhoog en omlaag",
+    "No contacts linked": "Geen contacten gekoppeld",
+    "No relations yet": "Nog geen relaties",
+    "Period": "Periode",
+    "On": "Aan"
   },
   "plurals": {
     "{count} selected": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.101.0",
+  "version": "2.102.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

@@ -217,6 +217,7 @@ Controlling the inline action button count — `inlineActionCount` sets how many
 | `showBuildiqButton` | Boolean | `true` | Whether the buildiq square renders in the bar (the index page takes it into its header under the board look) |
 | `bulkNoun` | String | `''` | The plural in the bulk band lead, "With the selected <noun>" (default "items") |
 | `bulkHint` | String | `''` | The 13px hint after the bulk band's buttons |
+| `bulkBandAlways` | Boolean | `false` | Board look: draw the bulk band before anything is selected too, its buttons disabled until there is a selection (DqZaken, DqWerkbord). Only when the band has an action to offer. |
 
 
 `showBuildiqButton` is documented in the prop table of the component reference (board look, screens-chrome-parity).

package/src/components/CnActionsBar/CnActionsBar.vue

@@ -507,12 +507,15 @@
 
 	<!--
 		Board look: the bulk band is its own row between the toolbar and the
-		table card, outside the toolbar element, and only while rows are
-		selected. The count stays announced by the live region above.
+		table card, outside the toolbar element, while rows are selected; with
+		`bulkBandAlways` also before, its buttons disabled until there is a
+		selection (DqZaken, DqWerkbord). The count stays announced by the live
+		region above.
 	-->
 	<div
-		v-if="isBoardLayout && selectable && selectedIds.length > 0"
+		v-if="isBoardLayout && selectable && (selectedIds.length > 0 || (bulkBandAlways && bulkBandHasActions))"
 		class="cn-actions-bar__band"
+		:class="{ 'cn-actions-bar__band--idle': selectedIds.length === 0 }"
 		role="region"
 		:aria-label="t('nextcloud-vue', 'Actions for the selection')"
 		data-testid="cn-bulk-band">
@@ -520,12 +523,14 @@
 		<NcButton
 			v-if="showMassCopy"
 			variant="secondary"
+			:disabled="selectedIds.length === 0"
 			@click="$emit('show-copy')">
 			{{ t('nextcloud-vue', 'Copy selected') }}
 		</NcButton>
 		<NcButton
 			v-if="showMassDelete"
 			variant="secondary"
+			:disabled="selectedIds.length === 0"
 			@click="$emit('show-delete')">
 			{{ t('nextcloud-vue', 'Delete selected') }}
 		</NcButton>
@@ -533,7 +538,7 @@
 			v-for="entry in bulkActions"
 			:key="entry.id"
 			variant="secondary"
-			:disabled="entry.disabled === true"
+			:disabled="entry.disabled === true || selectedIds.length === 0"
 			:data-testid="`cn-bulk-action-${entry.id}`"
 			:lang="bulkLang(entry)"
 			@click="$emit('bulk-action', { id: entry.id, action: entry.id, selectedIds, count: selectedIds.length })">
@@ -719,6 +724,16 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Board look: draw the bulk band also before anything is selected, its
+		 * buttons disabled until there is a selection, as DqZaken and DqWerkbord
+		 * draw it. Only when the band has an action to offer.
+		 */
+		bulkBandAlways: {
+			type: Boolean,
+			default: false,
+		},
+
 		/** The 13px hint after the board bulk band's buttons (`config.bulkHint`). */
 		bulkHint: {
 			type: String,
@@ -1117,6 +1132,18 @@ export default {
 			return t('nextcloud-vue', '{count} active', { count: this.filterCount })
 		},
 
+		/**
+		 * Whether the bulk band has an action to offer: copy, delete, a
+		 * declared bulk action or the host's own buttons.
+		 *
+		 * @return {boolean}
+		 */
+		bulkBandHasActions() {
+			return this.showMassCopy || this.showMassDelete
+				|| (Array.isArray(this.bulkActions) && this.bulkActions.length > 0)
+				|| Boolean(this.$slots['selection-actions'])
+		},
+
 		/**
 		 * The bold lead of the board bulk band.
 		 *

package/src/components/CnChartWidget/CnChartWidget.md

@@ -18,7 +18,7 @@ When `CnDashboardPage` resolves a widget definition with `type: "chart"`, it mou
 }
 ```
 
-Supported `props` keys forwarded by the dispatcher: `chartKind` (→ `type`), `series`, `categories`, `labels`, `options`, `colors`, `toolbar`, `legend`, `height`, `width`, `unavailableLabel`, plus the display passthrough `horizontal`, `legendPosition`, `valueAxisBaseline`, `valueFormat`, `colorMap`, `emptyLabel`, `views`, `endpointSource`, `barMax`, `footnote`, `highlight`, `cellSource`. The `dataSource` field resolves declaratively: `aggregate: 'count'` / raw `graphql` via GraphQL, `bucket` / `groupBy` / the OBJECT-form `aggregate` (Wave 3: group-by + topN/Other + labelResolve) via OpenRegister's REST aggregation facets, with an optional sibling `drilldown: { route, filterParam }` that navigates on segment/bar click with the raw category key in the query.
+Supported `props` keys forwarded by the dispatcher: `chartKind` (→ `type`), `series`, `categories`, `labels`, `options`, `colors`, `toolbar`, `legend`, `height`, `width`, `unavailableLabel`, plus the display passthrough `horizontal`, `legendPosition`, `valueAxisBaseline`, `valueFormat`, `colorMap`, `emptyLabel`, `views`, `endpointSource`, `barMax`, `footnote`, `highlight`, `cellSource`, `emptyCellLabel`. The `dataSource` field resolves declaratively: `aggregate: 'count'` / raw `graphql` via GraphQL, `bucket` / `groupBy` / the OBJECT-form `aggregate` (Wave 3: group-by + topN/Other + labelResolve) via OpenRegister's REST aggregation facets, with an optional sibling `drilldown: { route, filterParam }` that navigates on segment/bar click with the raw category key in the query.
 
 Area chart — time series data:
 
@@ -107,7 +107,8 @@ Fallback slot — shown when ApexCharts is not available:
 | `horizontal` | Boolean | `false` | Render `type: "bar"` charts horizontally (row bars); an explicit `options.plotOptions.bar.horizontal` still wins |
 | `legendPosition` | String | `''` | Legend placement override (`top`/`bottom`/`left`/`right`); empty keeps the automatic placement |
 | `barMax` | Number | `null` | `bar-list`: the value a full track stands for (100 for percentages); null takes the largest value |
-| `footnote` | String | `''` | `bar-list` / `matrix`: a line under the rows, through the host's translate |
+| `footnote` | String | `''` | A line under the chart, through the host's translate: under the rows of a `bar-list` or `matrix`, under the plot of a `line`, `area` or `bar` chart |
+| `emptyCellLabel` | String | `''` | `matrix`: the text of a cell without a value ("geen"), through the host's translate. Empty leaves the cell blank |
 | `highlight` | Object | `null` | `matrix`: the cell to outline, `{ row, column, columnKeys? }`, tokens such as `@object.behaviour` resolved |
 | `cellSource` | Object | `null` | `matrix`: read the cells from records that each hold one cell (`{ register, schema, filter?, rowField, columnField, valueField, … }`), or with `cellsPath` from the cells inside one record, see [Bar list and matrix](#bar-list-and-matrix) |
 | `valueAxisBaseline` | String | `'auto'` | How the value axis picks its baseline, so a small difference cannot read as a dramatic one. `'auto'` anchors magnitude marks (bar/area) at zero and stops line charts zooming past a quarter of the data's magnitude; `'zero'` always anchors at zero; `'fit'` restores plain ApexCharts autoscaling — use it for series that live far from zero (a percentage hovering 95–99), where a zero baseline flattens the signal. Pie-family charts, negative series, empty data and stacked charts (`options.chart.stacked` — where the visible height is the per-category sum, not the largest datapoint) always autoscale; an explicit `options.yaxis.min`/`max` still wins. The ceiling rounds up to a nice number (7 → 8, 62 → 80). |

package/src/components/CnChartWidget/CnChartWidget.vue

@@ -126,6 +126,12 @@
 				</p>
 			</slot>
 		</div>
+		<p
+			v-if="footnote && chartComponent && !showEmptyState && type !== 'bar-list' && type !== 'matrix'"
+			class="cn-chart-widget__footnote"
+			data-testid="cn-chart-widget-footnote">
+			{{ hostTranslate(footnote) }}
+		</p>
 	</div>
 </template>
 
@@ -368,8 +374,9 @@ export default {
 		},
 
 		/**
-		 * A line under a `bar-list` or `matrix` ("Klik een balk om de zaken
-		 * te zien"), through the host's translate.
+		 * A line under the chart ("Klik een balk om de zaken te zien"),
+		 * through the host's translate: under the rows of a `bar-list` or
+		 * `matrix`, and under the plot of an ApexCharts type.
 		 *
 		 * @spec openspec/changes/chart-bar-list-and-matrix/specs/chart-bar-list-and-matrix/spec.md#requirement-a-chart-can-draw-a-bar-list
 		 */
@@ -605,6 +612,17 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * `matrix`: the text of a cell without a value ("geen"), through the
+		 * host's translate. Empty (the default) leaves the cell blank.
+		 *
+		 * @spec openspec/changes/chart-bar-list-and-matrix/specs/chart-bar-list-and-matrix/spec.md#requirement-a-chart-can-draw-a-matrix
+		 */
+		emptyCellLabel: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Manifest dataSource block. When set, `series` /
 		 * `categories` / `labels` are resolved from the GraphQL
@@ -1442,7 +1460,7 @@ export default {
 						const value = Number(raw)
 						return Number.isFinite(value) && raw !== null && raw !== undefined
 							? { text: this.formatPlain(value), level: levelOf(value), color: '', current: isCurrent }
-							: { text: '', level: 0, color: '', current: isCurrent }
+							: { text: this.emptyCellLabel ? this.hostTranslate(this.emptyCellLabel) : '', level: 0, color: '', current: isCurrent }
 					}),
 				})),
 			}
@@ -2388,6 +2406,8 @@ export default {
 		 * Map an endpoint payload whose `rowsPath` names an array of rows:
 		 * each row is a series (name at `rowLabelPath`, values at
 		 * `rowValuesPath`), the categories are at `labelsPath`.
+		 * A missing value stays null; a `matrix` keeps a text value ("none")
+		 * as text, other types read it as 0.
 		 *
 		 * @param {unknown} payload The plucked payload.
 		 * @param {object} es The `endpointSource` block.
@@ -2398,12 +2418,23 @@ export default {
 			const rows = getByPath(payload, es.rowsPath)
 			const rawLabels = es.labelsPath ? getByPath(payload, es.labelsPath) : undefined
 			const labels = Array.isArray(rawLabels) ? rawLabels.map((v) => ((v === null || v === undefined) ? '' : String(v))) : []
+			const keepText = this.type === 'matrix'
+			const cellOf = (v) => {
+				if (v === null || v === undefined) {
+					return null
+				}
+				const num = typeof v === 'string' && v.trim() === '' ? NaN : Number(v)
+				if (Number.isFinite(num)) {
+					return num
+				}
+				return keepText && typeof v === 'string' ? v : 0
+			}
 			const series = (Array.isArray(rows) ? rows : []).map((row) => {
 				const name = getByPath(row, es.rowLabelPath || 'label')
 				const values = getByPath(row, es.rowValuesPath || 'values')
 				return {
 					name: (name === null || name === undefined) ? '' : String(name),
-					data: Array.isArray(values) ? values.map((v) => (v === null || v === undefined ? null : Number(v) || 0)) : [],
+					data: Array.isArray(values) ? values.map(cellOf) : [],
 				}
 			})
 			return { series, categories: labels, labels }
@@ -2690,6 +2721,13 @@ export default {
 	margin: 0;
 }
 
+/* Under an ApexCharts plot the footnote is a sibling of the canvas, so it keeps
+   its own line height while the canvas takes the rest of a fitted column. */
+.cn-chart-widget > .cn-chart-widget__footnote {
+	flex: 0 0 auto;
+	margin-top: 8px;
+}
+
 .cn-chart-widget__matrix {
 	display: grid;
 	gap: 4px;

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -111,7 +111,7 @@
 						<Pencil v-if="!isEditing" :size="20" />
 						<Check v-else :size="20" />
 					</template>
-					{{ isEditing ? doneLabel : editLabel }}
+					{{ isEditing ? shownDoneLabel : shownEditLabel }}
 				</NcButton>
 				<!-- With `userLayout`, edit mode offers a way back to the
 				     manifest: the page's own grid and the chosen view return
@@ -1105,6 +1105,7 @@ const CHART_PROP_KEYS = [
 	'footnote',
 	'highlight',
 	'cellSource',
+	'emptyCellLabel',
 ]
 
 /**
@@ -2400,6 +2401,25 @@ export default {
 			return (this.pageFilters || []).filter((pf) => pf && pf.key && !inDescription.includes(pf))
 		},
 
+		/**
+		 * The edit button's label through the app's translate: a manifest's
+		 * `editLabel` ("Edit layout", DqDashboard) reads in the user's language.
+		 *
+		 * @return {string}
+		 */
+		shownEditLabel() {
+			return this.effectiveTranslate(this.editLabel)
+		},
+
+		/**
+		 * The done button's label through the app's translate.
+		 *
+		 * @return {string}
+		 */
+		shownDoneLabel() {
+			return this.effectiveTranslate(this.doneLabel)
+		},
+
 		/**
 		 * The preset list passed to the picker. Falls back to the
 		 * `DEFAULT_DATE_RANGE_PRESETS` constant when the consumer

package/src/components/CnIndexPage/CnIndexPage.md

@@ -362,7 +362,7 @@ export default {
 | `lensReasonTexts` | Object \| null | `null` | App wording for an unavailable lens, keyed `<lens>.<reason>` or `<reason>`. |
 | `loadingText` | String | `'Loading…'` | Accessible label for the loading spinner (NcLoadingIcon aria-label) |
 | `rowIcon` | String \| Function | `null` | Optional leading icon for every table row — a static MDI name or `(row) => iconName`. Forwarded to CnDataTable; fed from the manifest as `pages[].config.rowIcon`. Unset = no icon column. |
-| `rowClass` | Function | `null` | Callback returning CSS class(es) for a row |
+| `rowClass` | Function \| Array | `null` | Callback returning CSS class(es) for a row, or (manifest `config.rowClass`) rules `[{ when: { field, op?, value }, class }]` compiled into one: each adds its class to a row whose field compares to the value (`visibleWhen` operators; two dates compare as moments, `@today` included). |
 | `rowIcon` | String \| Function | `null` | Optional leading row icon forwarded to CnDataTable — a static MDI icon name or `(row) => iconName`. Fed from the manifest as `pages[].config.rowIcon`; unset = no icon column |
 | `inlineActionCount` | Number | `2` | How many row actions to show inline (rest go in overflow menu) |
 | `showMassImport` | Boolean | `true` | Whether to show the mass Import action |
@@ -414,6 +414,7 @@ export default {
 | `quickFilterMode` | String | `'chips'` | How the quick filters render: `'chips'` (pill strip) or `'dropdown'` (a single `NcSelect`). Fed from `pages[].config.quickFilterMode`. |
 | `quickFilterMultiple` | Boolean | `false` | Allow several quick filters active at once; selected tabs' filters are OR-ed into the fetch (same field → `field[]=` array). Fed from `pages[].config.quickFilterMultiple`. |
 | `quickFilterMaxVisible` | Number | `0` | Chips mode only — how many quick-filter pills render inline before the rest move behind one more chip — a `⋯` pill that opens a panel of the hidden lenses. `0` renders every tab, which wraps the actions bar onto a second line once a page declares more than a handful. The visible set is the first *n* entries of `quickFilters`. Fed from `pages[].config.quickFilterMaxVisible`. |
+| `quickFilterPlacement` | String | `''` | Where the quick-filter chips sit. `'toolbar'` keeps them on one row with the Filter button and the view switch, in whatever width that row has beside a side panel (DqTeamwachtrij): the chips take the room the buttons leave, and those that do not fit move behind the overflow chip. Fed from `pages[].config.quickFilterPlacement`. |
 | `cardComponent` | String | `''` | Optional name of a consumer-provided card component (registered in the v2 `registry` — any kind carrying a `component` — or in the legacy `customComponents` map on `CnAppRoot`) to render in place of the default `CnObjectCard` when the page is in card-grid view mode. Resolution priority: `#card` scoped slot → `cardComponent` registry entry → default `CnObjectCard`. Unknown names log `console.warn` once and fall back to the default. |
 | `customComponents` | Object | `null` | Optional explicit `customComponents` registry. Overrides the registry injected from `CnAppRoot` via `cnCustomComponents`. Mostly used by unit tests; production consumers register components on `CnAppRoot` instead. |
 | `subscribe` | Boolean | `true` | Self-fetch mode only. When `register` + `schema` are set (and no `objects` prop), the page subscribes to the collection's `or-collection-{register}-{schema}` live-update scope on mount and refetches on an update event; released on unmount. Set `false` (manifest: `config.subscribe: false`) for static / read-once views. No-op in consumer-managed mode or on stores without live-updates support. |
@@ -1136,3 +1137,6 @@ columns are right.
 ## Board look
 
 With `look: "board"` (the page's `look` prop, `config.look`, or the app's) the index page takes the DqZaken setup: a header with the count line from `countText` (`{shown}`, `{total}`), the buttons Download, Actions, the buildiq square and the primary one in that order, a two-row toolbar (saved-view chips, Filter with a count and the view switch; then search and active filter chips), a bulk band between toolbar and table (`bulkHint`), the table as a white card with one menu button per row, and a footer inside the card (`footerNote`). `cardFields` names the facts of each card in the cards view. Without the look nothing changes.
+
+`bulkBandAlways` (`config.bulkBandAlways`) draws the board bulk band before a selection too, its buttons
+disabled until rows are selected (DqZaken, DqWerkbord).

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="cn-index-page"
-		:class="[lookClass, { 'cn-index-page--with-side-panel': hasSidePanel }]"
+		:class="[lookClass, { 'cn-index-page--with-side-panel': hasSidePanel, 'cn-index-page--quick-filters-toolbar': quickFilterPlacement === 'toolbar' }]"
 		data-testid="cn-index-page"
 		@keydown="onListKeydown">
 		<!-- Header — overridable via #header slot. CnPageHeader ALWAYS renders:
@@ -163,6 +163,7 @@
 			:showBuildiqButton="!buildiqInHeader"
 			:bulkNoun="boardBulkNoun"
 			:bulkHint="bulkHint ? cnTranslate(bulkHint) : bulkHint"
+			:bulkBandAlways="bulkBandAlways"
 			:pagination="effectivePagination"
 			:objectCount="effectiveObjects.length"
 			:selectable="selectable"
@@ -369,6 +370,7 @@
 					:tabs="tabStripEntries"
 					:mode="quickFilterMode"
 					:maxVisible="quickFilterMaxVisible"
+					:fit="quickFilterPlacement === 'toolbar'"
 					:multiple="quickFilterMultiple"
 					:activeIndex="activeQuickFilterIndex"
 					:selectedIndices="selectedQuickFilterIndices"
@@ -755,7 +757,7 @@
 					:excludeColumns="excludeColumns"
 					:includeColumns="includeColumns"
 					:columnOverrides="columnOverrides"
-					:rowClass="rowClass"
+					:rowClass="compiledRowClass"
 					:rowTitle="rowTitle"
 					:showUnread="showUnreadRows"
 					:filterable="tableHeaderFilters"
@@ -1292,6 +1294,7 @@ import { resolveFilterMap } from '../../utils/routeFilters.js'
 import { availableRowActions, DEFAULT_ROW_ACTION_FIELD, refusalReasonFor, undeclaredRowActions, withoutViewWhenRowOpensDetail } from '../../utils/rowActionAvailability.js'
 import { isRowActionVisible, rowActionPayload } from '../../utils/rowActionItem.js'
 import { isNewTabClick, isNewTabHandled, isRowMiddleClick, markNewTabHandled, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'
+import { compileRowClass } from '../../utils/rowClassRules.js'
 import { DEFAULT_ROW_INDICATOR_CAP } from '../../utils/rowIndicators.js'
 import { buildRouteQueryFromViewState, buildViewCreatePayload, extractViewState, extractViewStateFromRouteQuery, normalizeSharedWith, savedViewScope, viewMatchesScope } from '../../utils/savedViewHelpers.js'
 import { columnsFromSchema, fieldsFromSchema } from '../../utils/schema.js'
@@ -1938,6 +1941,17 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Board look: draw the bulk band before anything is selected too, its
+		 * buttons disabled until there is a selection (DqZaken, DqWerkbord).
+		 * Manifest key `config.bulkBandAlways`. Only when the band has an
+		 * action to offer.
+		 */
+		bulkBandAlways: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Board look: the 13px hint after the bulk band's buttons ("See what
 		 * changes first, then run it"). Manifest key `config.bulkHint`.
@@ -2119,6 +2133,21 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Where the quick-filter chips sit (manifest `config.quickFilterPlacement`).
+		 * `''` (the default) as before. `'toolbar'` keeps them on one row with
+		 * the Filter button and the view switch, in whatever width that row has
+		 * beside a side panel (DqTeamwachtrij): the chips take the room the
+		 * buttons leave, and those that do not fit move into the overflow chip.
+		 *
+		 * @type {''|'toolbar'}
+		 */
+		quickFilterPlacement: {
+			type: String,
+			default: '',
+			validator: (v) => ['', 'toolbar'].includes(v),
+		},
+
 		/**
 		 * How the quick filters render: `'chips'` (pill strip, default) or
 		 * `'dropdown'` (a single `NcSelect`). Sourced from the manifest as
@@ -2695,9 +2724,18 @@ export default {
 			default: 'Loading…',
 		},
 
-		/** Function returning CSS class(es) for a row */
+		/**
+		 * CSS class(es) for a row: a function `(row) => string`, or (manifest
+		 * `config.rowClass`) rules `[{ when: { field, op?, value }, class }]`,
+		 * each adding its class to a row whose field compares to the value
+		 * (the `visibleWhen` operators, `@today` included). DqTaken marks an
+		 * overdue task: `{ when: { field: "dueAt", op: "lt", value: "@today" },
+		 * class: "cn-row--overdue" }`.
+		 *
+		 * @type {((row: object) => string)|Array<{when: {field: string, op?: string, value: unknown}, class: string}>|null}
+		 */
 		rowClass: {
-			type: Function,
+			type: [Function, Array],
 			default: null,
 		},
 
@@ -3779,6 +3817,10 @@ export default {
 		//
 		// Seeded from the route query so a shared link lands filtered, the
 		// same way `_order` and a deep-link filter already do for self-fetch.
+		// The page a paging named source shows: page 1 at the source config's
+		// `limit` (20 by default), moved by the pager.
+		const namedPageSize = Number(props.sourceConfig && props.sourceConfig.limit) > 0 ? Number(props.sourceConfig.limit) : 20
+		const namedPaging = ref({ page: 1, limit: namedPageSize })
 		const namedActiveFilters = ref(namedFiltersFromRoute(getCurrentInstance(), props))
 
 		const {
@@ -3787,7 +3829,7 @@ export default {
 			namedRows,
 			namedLoading,
 			namedQuickFilters,
-		} = useNamedSource(props, { activeQuickFilterIndex, activeFilters: namedActiveFilters })
+		} = useNamedSource(props, { activeQuickFilterIndex, activeFilters: namedActiveFilters, paging: namedPaging })
 
 		return {
 			isBoard: isBoardLook,
@@ -3799,6 +3841,7 @@ export default {
 			namedLoading,
 			namedQuickFilters,
 			namedActiveFilters,
+			namedPaging,
 			contextMenuOpen,
 			contextMenuRow,
 			openContextMenu,
@@ -4761,6 +4804,9 @@ export default {
 				const loaded = this.effectivePagination || {}
 				return Number(loaded.page || 1) < Number(loaded.pages || 1)
 			}
+			if (this.isNamedSource && this.namedSource && this.namedSource.pages === true) {
+				return Number(this.effectivePagination?.pages || 1) > 1
+			}
 			return Number(this.pagination?.pages || 1) > 1
 		},
 
@@ -5800,7 +5846,13 @@ export default {
 			// A named source that reports its own total (the search source)
 			// gives the count line its number.
 			if (this.isNamedSource && this.namedSource && typeof this.namedSource.total === 'function') {
-				return { ...(this.pagination || {}), total: this.namedSource.total() }
+				const total = this.namedSource.total()
+				// A source with `pages: true` gets the pager the self-fetched lists draw.
+				if (this.namedSource.pages === true) {
+					const { page, limit } = this.namedPaging
+					return { page, limit, total, pages: Math.max(1, Math.ceil(total / limit)) }
+				}
+				return { ...(this.pagination || {}), total }
 			}
 			return this.isSelfFetchMode ? this.list.pagination.value : this.pagination
 		},
@@ -6053,6 +6105,16 @@ export default {
 			return (this.effectiveSchema && this.effectiveSchema.slug) || ''
 		},
 
+		/**
+		 * The row-class function the table takes: a function as given, or the
+		 * manifest's rules compiled.
+		 *
+		 * @return {?(row: object) => string}
+		 */
+		compiledRowClass() {
+			return compileRowClass(this.rowClass)
+		},
+
 		/** @return {number} How many leading columns the person pinned (0 while a saved view's columns are applied). */
 		pinnedColumnCount() {
 			if (!this.personalColumns || Array.isArray(this.appliedViewColumns) || !this.personalLayout) {
@@ -8777,6 +8839,9 @@ export default {
 			if (this.isSelfFetchMode && typeof this.list.onPageChange === 'function') {
 				this.list.onPageChange(page)
 			}
+			if (this.isNamedSource && this.namedSource && this.namedSource.pages === true) {
+				this.namedPaging = { ...this.namedPaging, page }
+			}
 			this.$emit('page-changed', page)
 		},
 
@@ -8792,6 +8857,9 @@ export default {
 			if (this.isSelfFetchMode && typeof this.list.onPageSizeChange === 'function') {
 				this.list.onPageSizeChange(size)
 			}
+			if (this.isNamedSource && this.namedSource && this.namedSource.pages === true) {
+				this.namedPaging = { page: 1, limit: size }
+			}
 			this.$emit('page-size-changed', size)
 		},
 

package/src/components/CnIndexPage/useNamedSource.js

@@ -105,6 +105,9 @@ export function useNamedSource(props, options = {}) {
 	const tabs = manifestTabs || sourceTabs
 	const activeIndex = options.activeQuickFilterIndex || null
 	const activeFilters = options.activeFilters || null
+	// A source that pages (`pages: true`) gets the page as `limit` and
+	// `offset`, from the pager the page draws for it.
+	const paging = source.pages === true ? (options.paging || null) : null
 
 	// Seed the default tab before the watcher below registers: the mount load
 	// already carries this tab's filter, so the seed must not fire a second
@@ -165,6 +168,7 @@ export function useNamedSource(props, options = {}) {
 					activeFilters ? activeFilters.value : null,
 					props.entitySource,
 				),
+				...(paging ? { limit: paging.value.limit, offset: (paging.value.page - 1) * paging.value.limit } : {}),
 			},
 			tokenCtx(),
 		)
@@ -182,15 +186,35 @@ export function useNamedSource(props, options = {}) {
 
 	// Registered AFTER the seed above, so only a person switching tabs
 	// reloads. Without tabs there is nothing to watch.
+	/**
+	 * Reload for a new query: on a paging source back to page 1, which
+	 * reloads through the paging watcher below.
+	 *
+	 * @return {void}
+	 */
+	function reloadFromFirstPage() {
+		if (paging && paging.value.page !== 1) {
+			paging.value = { ...paging.value, page: 1 }
+			return
+		}
+		loadActive()
+	}
+
 	if (tabs && activeIndex) {
-		watch(activeIndex, loadActive)
+		watch(activeIndex, reloadFromFirstPage)
 	}
 
 	// A sidebar choice is a new QUERY, not a new view of the page already
 	// fetched, so it reloads. `deep` because the map is rewritten key by key
 	// and a shallow watch misses a second value added to the same field.
 	if (activeFilters) {
-		watch(activeFilters, loadActive, { deep: true })
+		watch(activeFilters, reloadFromFirstPage, { deep: true })
+	}
+
+	// A new page, or a new page size, is a new request. A new tab or filter
+	// first returns to page 1, which reloads through here.
+	if (paging) {
+		watch(paging, loadActive, { deep: true })
 	}
 
 	// No manual invalidation tick here on purpose. The adapters read from a

package/src/components/CnMenuWidget/CnMenuWidget.vue

@@ -239,6 +239,11 @@ export default {
 		CnMenuItemIcon,
 	},
 
+	inject: {
+		/** Host translate function provided by CnAppRoot, for the item labels. */
+		cnTranslate: { default: () => (key) => key },
+	},
+
 	props: {
 		/**
 		 * Persisted widget content `{items, style, orientation, showIcons,
@@ -288,7 +293,26 @@ export default {
 		 */
 		items() {
 			const arr = this.content?.items
-			return Array.isArray(arr) ? arr : []
+			if (!Array.isArray(arr)) {
+				return []
+			}
+			// Labels are manifest strings: they go through the app's translate,
+			// children included, so "Case types" reads "Zaaktypen" (DqCatalogus).
+			const translate = typeof this.cnTranslate === 'function' ? this.cnTranslate : (key) => key
+			const translated = (list) => list.map((item) => {
+				if (!item || typeof item !== 'object') {
+					return item
+				}
+				const out = { ...item }
+				if (typeof item.label === 'string' && item.label !== '') {
+					out.label = translate(item.label)
+				}
+				if (Array.isArray(item.children)) {
+					out.children = translated(item.children)
+				}
+				return out
+			})
+			return translated(arr)
 		},
 
 		/**

package/src/components/CnQuickFilterBar/CnQuickFilterBar.md

@@ -59,6 +59,7 @@ In `manifest.json` (the usual entry-point — CnIndexPage mounts the bar for you
 - `selectLabel` (String, default `'Filter'`) — accessible label / placeholder for the dropdown control.
 - `placeholder` (String) — placeholder text for the dropdown (falls back to `selectLabel`).
 - `maxVisible` (Number, default `0`) — chips mode only: how many pills render inline before the rest move behind one more chip, a `⋯` pill that opens a small panel of the hidden lenses (also as chips). `0` renders every tab. The visible set is the first `maxVisible` entries of `tabs`, so their declared order decides what stays in the strip; an active hidden tab moves its label and fill onto that chip. Manifest: `config.quickFilterMaxVisible`.
+- `fit` (Boolean, default `false`) — chips mode only: show as many chips as the bar's own width holds and move the rest behind the overflow chip, measured again when the width, the tabs or the counts change. The bar takes the room its parent gives it; CnIndexPage's `quickFilterPlacement: "toolbar"` gives it what the Filter button and the view switch leave on their row. With `maxVisible` too, the smaller of the two wins.
 - `counts` (Object or Array, default `null`): how many records each tab matches, keyed by tab index. A tab with a number shows it after its label. CnIndexPage fills this for tabs that set `showCount`.
 
 ### Events