@conduction/nextcloud-vue 2.144.0 → 2.145.0

package/l10n/nl.json

@@ -1946,6 +1946,8 @@
     "Absent today": "Vandaag afwezig",
     "{message} until {time}": "{message} tot {time}",
     "Away": "Afwezig",
+    "Present": "Aanwezig",
+    "Absent until {date}": "Afwezig tot {date}",
     "Busy": "Bezet",
     "No one in the team": "Niemand in het team",
     "Also replace the criteria with the current filters": "Vervang ook de criteria door de huidige filters",

package/package.json

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

@@ -145,7 +145,7 @@
 				:heading="text(config.note.title)"
 				data-testid="cn-action-dialog-note">
 				<template v-if="config.note.icon" #icon>
-					<CnIcon :name="config.note.icon" :size="20" />
+					<CnIcon class="cn-action-dialog__note-icon" :name="config.note.icon" :size="20" />
 				</template>
 				{{ text(config.note.text) }}
 			</NcNoteCard>
@@ -951,6 +951,13 @@ export default {
 
 /* A checkbox field is a tinted box with a 2px edge, its label bold and its
    hint under it (DqArchiveren). */
+/* A note's own icon stands on the heading's line, as the variant's icon
+   does (NcNoteCard centres a slotted icon on the whole note). */
+.cn-action-dialog__note-icon {
+	align-self: flex-start;
+	margin-top: 1px;
+}
+
 .cn-action-dialog__checkbox {
 	padding: 12px 14px;
 	border: 2px solid var(--color-primary-element);

package/src/components/CnAuditTrailCard/CnAuditTrailCard.vue

@@ -69,9 +69,21 @@ import CnDetailCard from '../CnDetailCard/CnDetailCard.vue'
 import { formatBoardDate, formatTimeOfDay } from '../../utils/boardDate.js'
 import { buildHeaders, prefixUrl } from '../../utils/index.js'
 import { leafSourceUrl } from '../../utils/leafSourceUrl.js'
+import { readPath } from '../../utils/readPath.js'
 import { userDisplayName } from '../../utils/userDisplayName.js'
 import { userLocale } from '../../utils/userLocale.js'
 
+/**
+ * A changed value as an entry records it: OpenRegister writes `{ old, new }`,
+ * other sources the value itself.
+ *
+ * @param {unknown} value The recorded change.
+ * @return {unknown} The value it changed to.
+ */
+function newValueOf(value) {
+	return value !== null && typeof value === 'object' && Object.hasOwn(value, 'new') ? value.new : value
+}
+
 /**
  * @param {object} entry An audit entry.
  * @return {number} When it happened, in ms; 0 when unreadable.
@@ -202,6 +214,18 @@ export default {
 		 * @type {{[key: string]: {[value: string]: string}}|null}
 		 */
 		valueLabels: { type: Object, default: null },
+		/**
+		 * What happened, in words, by the field an entry changed: rules
+		 * `[{ action?, field, to?, label }]`, the first whose `field` the entry
+		 * changed (to `to`, when given) wins over `actionLabels`. A label fills
+		 * the same tokens, plus `{object.<path>}` from `object`
+		 * ("Version {object.version} published" for `isDraft` set to false).
+		 *
+		 * @type {Array<{action?: string, field: string, to?: unknown, label: string}>}
+		 */
+		changeLabels: { type: Array, default: () => [] },
+		/** The audited record, for `{object.<path>}` in a label; null without one. */
+		object: { type: Object, default: null },
 		/**
 		 * Records beside the object whose events belong in its history:
 		 * `[{ as, register, schema, filter, limit? }]`. The card lists the
@@ -394,12 +418,16 @@ export default {
 		 * @return {string} The line.
 		 */
 		formatAction(entry) {
-			const label = this.labelFor(entry)
+			const label = this.changeLabelFor(entry) ?? this.labelFor(entry)
 			if (label !== null) {
 				return label
 					.replace('{actor}', this.actorName(entry))
 					.replace('{state}', entry.stateAfter || '')
 					.replace(/\{changed\.([\w-]+)\}/g, (match, key) => this.changedValue(entry, key))
+					.replace(/\{object\.([\w.-]+)\}/g, (match, path) => {
+						const value = this.object ? readPath(this.object, path) : undefined
+						return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
+					})
 			}
 			const action = entry.action || entry.event || this.actionLabel
 			return entry.stateAfter ? `${action} (${entry.stateAfter})` : action
@@ -416,7 +444,7 @@ export default {
 		 */
 		changedValue(entry, key) {
 			const changed = entry && typeof entry.changed === 'object' && entry.changed !== null ? entry.changed : {}
-			const value = changed[key]
+			const value = newValueOf(changed[key])
 			if (value === null || value === undefined || typeof value === 'object') {
 				return ''
 			}
@@ -424,6 +452,31 @@ export default {
 			return words && typeof words[value] === 'string' ? words[value] : String(value)
 		},
 
+		/**
+		 * The `changeLabels` rule an entry matches: the first whose field the
+		 * entry changed, for its action and to its value when the rule names them.
+		 *
+		 * @param {object} entry The entry.
+		 * @return {string|null} The label, or null when no rule matches.
+		 */
+		changeLabelFor(entry) {
+			const changed = entry && typeof entry.changed === 'object' && entry.changed !== null ? entry.changed : {}
+			const action = entry.action || entry.event || ''
+			for (const rule of Array.isArray(this.changeLabels) ? this.changeLabels : []) {
+				if (!rule || typeof rule.label !== 'string' || rule.label === '' || typeof rule.field !== 'string' || !Object.hasOwn(changed, rule.field)) {
+					continue
+				}
+				if (rule.action && rule.action !== action) {
+					continue
+				}
+				if (Object.hasOwn(rule, 'to') && String(newValueOf(changed[rule.field])) !== String(rule.to)) {
+					continue
+				}
+				return rule.label
+			}
+			return null
+		},
+
 		/**
 		 * The `actionLabels` entry for an entry: by action and state first,
 		 * then by action.

package/src/components/CnAuditTrailWidget/CnAuditTrailWidget.vue

@@ -20,6 +20,8 @@
 			:excludeActions="resolvedExcludeActions"
 			:actionLabels="actionLabels"
 			:valueLabels="valueLabels"
+			:changeLabels="changeLabels"
+			:object="ctx.object || ctx.objectData || null"
 			:relatedSources="relatedSources"
 			:footnote="footnote"
 			v-bind="emptyText ? { noEntriesLabel: emptyText } : {}" />
@@ -193,6 +195,22 @@ export default {
 				.map(([key, text]) => [key, translate(text)]))
 		},
 
+		/**
+		 * `content.changeLabels`, each rule's label through the app's translate.
+		 *
+		 * @return {Array<object>}
+		 */
+		changeLabels() {
+			const rules = this.content.changeLabels
+			if (!Array.isArray(rules)) {
+				return []
+			}
+			const translate = typeof this.cnTranslate === 'function' ? this.cnTranslate : (text) => text
+			return rules
+				.filter((rule) => rule && typeof rule.label === 'string' && rule.label !== '')
+				.map((rule) => ({ ...rule, label: translate(rule.label) }))
+		},
+
 		/**
 		 * `content.footnote`, a muted line under the trail with the record's
 		 * fields filled in ("Reference {identifier}"); '' when a field is empty.

package/src/components/CnDetailWidgetHost/CnDetailWidgetHeaderItems.vue

@@ -31,6 +31,7 @@
 				v-else
 				type="button"
 				class="cn-detail-page__catalog-action"
+				:class="{ 'cn-detail-page__catalog-action--add': action.add === true }"
 				data-testid="cn-detail-widget-header-action"
 				@click="action.run()">
 				<CnIcon v-if="action.icon" :name="action.icon" :size="16" />
@@ -56,7 +57,7 @@ export default {
 	components: { CnIcon, CnStatusBadge, NcButton },
 
 	props: {
-		/** The reported header: `{ pill, note, actions: [{ label, icon?, variant?, run }] }`. */
+		/** The reported header: `{ pill, note, actions: [{ label, icon?, variant?, add?, run }] }`; `add: true` marks a list's Add. */
 		header: {
 			type: Object,
 			required: true,

package/src/components/CnFieldListWidget/CnFieldListWidget.vue

@@ -607,7 +607,7 @@ export default {
 		/**
 		 * The card title row's actions: the add button with `add.placement: "title"`.
 		 *
-		 * @return {Array<{label: string, icon: string, run: () => void}>} The actions.
+		 * @return {Array<{label: string, icon: string, add: boolean, run: () => void}>} The actions.
 		 */
 		titleActions() {
 			if (!(this.canAdd && this.addTrigger && this.addPlacement === 'title')) {
@@ -616,7 +616,7 @@ export default {
 			const run = () => {
 				this.adding = !this.adding
 			}
-			return [{ label: this.addLabel, icon: 'Plus', run }]
+			return [{ label: this.addLabel, icon: 'Plus', add: true, run }]
 		},
 
 		addLabel() {

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -8940,7 +8940,7 @@ export default {
 				// through the app's label lookup.
 				const countText = this.presentedCountText
 				// The note after the breadcrumb already says how many there are.
-				if (!countText && !this.countSubtitle && this.headerMetaCarriesCount) {
+				if (!countText && !this.countSubtitle && (this.headerMetaCarriesCount || this.showCount === false)) {
 					return this.description
 				}
 				if (!countText && !this.countSubtitle) {
@@ -9877,9 +9877,12 @@ export default {
 			}
 			const sorted = [...groups].sort((a, b) => b.count - a.count)
 			const total = sorted.reduce((sum, g) => sum + g.count, 0)
+			// Each tab asks to be counted as the list counts it (within the
+			// active filters, through the list endpoint); the grouped number,
+			// over the page filter only, stands until that count arrives.
 			this.generatedQuickFilters = [
-				{ label: from.allLabel || t('nextcloud-vue', 'All'), filter: {}, default: true, count: total },
-				...sorted.map((g) => ({ label: (labels && labels[g.key]) || g.key, filter: { [from.field]: g.key }, count: g.count })),
+				{ label: from.allLabel || t('nextcloud-vue', 'All'), filter: {}, default: true, count: total, showCount: true },
+				...sorted.map((g) => ({ label: (labels && labels[g.key]) || g.key, filter: { [from.field]: g.key }, count: g.count, showCount: true })),
 			]
 		},
 

package/src/components/CnMailTab/CnMailTab.vue

@@ -19,9 +19,11 @@
 					<h3 v-if="heading" class="cn-mail-tab__title">
 						{{ heading }}
 					</h3>
-					<p v-if="description" class="cn-mail-tab__subtitle">
+					<!-- Divs, not <p>: a theme that sizes every paragraph with !important
+					     would override the card's 14px description. -->
+					<div v-if="description" class="cn-mail-tab__subtitle">
 						{{ description }}
-					</p>
+					</div>
 				</div>
 				<div v-if="hasHeaderActions" class="cn-mail-tab__header-actions">
 					<NcButton
@@ -77,9 +79,9 @@
 					{{ t('nextcloud-vue', 'Empty draft') }}
 				</NcButton>
 			</div>
-			<p v-if="hint" class="cn-mail-tab__hint">
+			<div v-if="hint" class="cn-mail-tab__hint">
 				{{ hint }}
-			</p>
+			</div>
 
 			<NcNoteCard
 				v-if="error"

package/src/components/CnNotificationMatrix/CnNotificationMatrix.vue

@@ -1135,7 +1135,10 @@ export default {
 		min-inline-size: 20px;
 		block-size: 20px;
 		min-block-size: 20px;
-		margin: 0;
+		/* A block box, so the line's baseline adds no height: the row is
+		   42px as on the board (10px, the 1px-low checkbox, 10px, the rule). */
+		display: block;
+		margin: 1px auto 0;
 	}
 
 	.cn-notification-matrix__group {

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -53,15 +53,37 @@
 						scope="col"
 						:aria-sort="col.sortable ? sortStateOf(col.key) : undefined"
 						:class="{ 'cn-record-list__cell--end': col.align === 'end' }">
-						<button
-							v-if="col.sortable"
-							type="button"
-							class="cn-record-list__sort"
-							:data-testid="`cn-record-list-sort-${col.key}`"
-							@click="toggleTableSort(col.key)">
-							{{ col.label }}
-							<span class="cn-record-list__sort-mark" aria-hidden="true">{{ sortMarkOf(col.key) }}</span>
-						</button>
+						<span v-if="col.sortable || tableFilterable" class="cn-record-list__head">
+							<button
+								v-if="col.sortable"
+								type="button"
+								class="cn-record-list__sort"
+								:data-testid="`cn-record-list-sort-${col.key}`"
+								@click="toggleTableSort(col.key)">
+								{{ col.label }}
+								<span class="cn-record-list__sort-mark" aria-hidden="true">{{ sortMarkOf(col.key) }}</span>
+							</button>
+							<template v-else>
+								{{ col.label }}
+							</template>
+							<!-- `content.filterable`: the head offers the values the column holds and keeps the rows with a chosen one. -->
+							<NcActions
+								v-if="tableFilterable"
+								class="cn-record-list__head-filter"
+								:aria-label="filterLabelOf(col.label)"
+								:data-testid="`cn-record-list-filter-${col.key}`">
+								<template #icon>
+									<FilterOutline :size="14" />
+								</template>
+								<NcActionCheckbox
+									v-for="option in tableFilterOptions(col.key)"
+									:key="option"
+									:modelValue="(tableFilters[col.key] || []).includes(option)"
+									@update:modelValue="toggleTableFilter(col.key, option)">
+									{{ option }}
+								</NcActionCheckbox>
+							</NcActions>
+						</span>
 						<template v-else>
 							{{ col.label }}
 						</template>
@@ -550,10 +572,11 @@
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
-import { NcActionButton, NcActionLink, NcActions, NcButton, NcLoadingIcon } from '@nextcloud/vue'
+import { NcActionButton, NcActionCheckbox, NcActionLink, NcActions, NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import { inject, ref } from 'vue'
 import Check from 'vue-material-design-icons/Check.vue'
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
+import FilterOutline from 'vue-material-design-icons/FilterOutline.vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
 import CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'
 import CnRecordNoteRows from './CnRecordNoteRows.vue'
@@ -649,7 +672,7 @@ function unwrap(value) {
 export default {
 	name: 'CnRecordListWidget',
 
-	components: { Check, ChevronRight, CnIcon, CnRecordNoteRows, CnStatusBadge, NcActionButton, NcActionLink, NcActions, NcButton, NcLoadingIcon },
+	components: { Check, ChevronRight, CnIcon, CnRecordNoteRows, CnStatusBadge, FilterOutline, NcActionButton, NcActionCheckbox, NcActionLink, NcActions, NcButton, NcLoadingIcon },
 
 	inject: {
 		/** Detail-page object context (`{ objectId, object, register, schema }`). */
@@ -714,6 +737,8 @@ export default {
 		 * without a value.
 		 * `density: "compact"` draws the rows 10px above and below, at least
 		 * 56px tall, with the title at 500 (DqProcesanalyse).
+		 * On `cards` it draws the small framed card: 12px 14px in, the title
+		 * 15px/700 with the pill at its end (DqInspectie).
 		 * `density: "stacked"` stands the rows 10px apart with no rule and no
 		 * row padding (DqDagAfsluiten "Morgen eerst").
 		 * In `rows`, `text` is a line under the meta line ("12 dagen stil"),
@@ -809,6 +834,8 @@ export default {
 		return {
 			/** The reader's sort of a `table`: the column key and `ascending` or `descending`. */
 			tableSort: { key: '', dir: '' },
+			/** The reader's head filters of a `table`: `{ [columnKey]: cellTexts[] }`. */
+			tableFilters: {},
 			rows: [],
 			/** The `aggregates` figures per row id: `{ [rowId]: { [key]: value } }`. */
 			aggregateValues: {},
@@ -1183,7 +1210,16 @@ export default {
 			const isTemplate = (value) => typeof value === 'string' || (Array.isArray(value) && value.length > 0 && value.every((entry) => typeof entry === 'string'))
 			return columns
 				.filter((col) => col && typeof col === 'object' && isTemplate(col.value))
-				.map((col, index) => ({ ...col, key: `col-${index}`, label: typeof col.label === 'string' ? this.translate(col.label) : '' }))
+				.map((col, index) => ({ ...col, key: `col-${index}`, label: typeof col.label === 'string' ? this.translate(col.label) : '', sortable: col.sortable === true || this.content?.sortable === true }))
+		},
+
+		/**
+		 * Whether the `table` heads filter (`content.filterable`).
+		 *
+		 * @return {boolean}
+		 */
+		tableFilterable() {
+			return this.content?.filterable === true
 		},
 
 		/**
@@ -1193,8 +1229,27 @@ export default {
 		 * @spec openspec/changes/record-list-table/specs/record-list-table/spec.md#requirement-a-record-list-can-draw-its-rows-as-a-small-table
 		 */
 		tableRows() {
+			const rows = this.tableAllRows.filter((row) => Object.entries(this.tableFilters).every(([key, values]) => {
+				const index = this.tableColumns.findIndex((col) => col.key === key)
+				return values.length === 0 || index < 0 || values.includes(row.cells[index].text)
+			}))
+			const { key, dir } = this.tableSort
+			const index = this.tableColumns.findIndex((col) => col.key === key)
+			if (index < 0 || !dir) {
+				return rows
+			}
+			const sign = dir === 'descending' ? -1 : 1
+			return [...rows].sort((a, b) => sign * compareCells(a.cells[index].text, b.cells[index].text))
+		},
+
+		/**
+		 * Every `table` row, before the reader's head filters and sort.
+		 *
+		 * @return {Array<object>} `{ key, cells: [{ key, text, align, alert }] }`.
+		 */
+		tableAllRows() {
 			const indentPath = this.content?.indentPath
-			const rows = this.items.map((item) => ({
+			return this.items.map((item) => ({
 				key: item.key,
 				row: item.row,
 				rowActions: this.rowActions.length > 0 ? this.rowActionsOf(item.row) : [],
@@ -1215,13 +1270,6 @@ export default {
 					}
 				}),
 			}))
-			const { key, dir } = this.tableSort
-			const index = this.tableColumns.findIndex((col) => col.key === key)
-			if (index < 0 || !dir) {
-				return rows
-			}
-			const sign = dir === 'descending' ? -1 : 1
-			return [...rows].sort((a, b) => sign * compareCells(a.cells[index].text, b.cells[index].text))
 		},
 
 		/**
@@ -2246,6 +2294,41 @@ export default {
 			this.tableSort = { key, dir }
 		},
 
+		/**
+		 * The values a `table` column's head filter offers: each text the column holds, once.
+		 *
+		 * @param {string} key The column key.
+		 * @return {Array<string>} The texts, in row order.
+		 */
+		tableFilterOptions(key) {
+			const index = this.tableColumns.findIndex((col) => col.key === key)
+			if (index < 0) {
+				return []
+			}
+			return [...new Set(this.tableAllRows.map((row) => row.cells[index].text).filter((text) => text !== ''))]
+		},
+
+		/**
+		 * Keep or drop one value of a `table` column's head filter.
+		 *
+		 * @param {string} key The column key.
+		 * @param {string} value The cell text.
+		 */
+		toggleTableFilter(key, value) {
+			const current = this.tableFilters[key] || []
+			this.tableFilters = { ...this.tableFilters, [key]: current.includes(value) ? current.filter((v) => v !== value) : [...current, value] }
+		},
+
+		/**
+		 * The accessible name of a column's head filter.
+		 *
+		 * @param {string} label The column label.
+		 * @return {string}
+		 */
+		filterLabelOf(label) {
+			return t('nextcloud-vue', 'Filter by {column}', { column: label })
+		},
+
 		/**
 		 * The rows of a read with `flattenPath` set: each entry of the list at
 		 * that path on a record becomes a row, with the record at `@parent`.
@@ -3232,6 +3315,16 @@ export default {
 	font-size: 10px;
 }
 
+.cn-record-list__head {
+	display: inline-flex;
+	gap: 4px;
+	align-items: center;
+}
+
+.cn-record-list__head-filter {
+	--button-size: 22px;
+}
+
 .cn-record-list__table .cn-record-list__cell--end {
 	padding-inline-start: 12px;
 	text-align: end;
@@ -3383,6 +3476,24 @@ export default {
 	text-decoration: none;
 }
 
+/* `density: "compact"` on cards: the boards' small framed rows (DqInspectie
+   "Molenweg 4" and the outbox): 12px 14px in, the title 15px/700 on an
+   18px line with the pill at its end, the meta 6px under it. */
+.cn-record-list--compact .cn-record-list__card {
+	gap: 6px;
+	padding: 12px 14px;
+}
+
+.cn-record-list--compact .cn-record-list__card-head {
+	align-items: flex-start;
+}
+
+.cn-record-list--compact .cn-record-list__card .cn-record-list__title {
+	font-size: 15px;
+	font-weight: 700;
+	line-height: 1.2;
+}
+
 .cn-record-list__card--link:hover,
 .cn-record-list__card--link:focus-visible {
 	border-color: var(--color-border-dark, var(--color-border));

package/src/components/CnSettingsField/CnSettingsField.vue

@@ -275,6 +275,7 @@
 			type="number"
 			:min="field.min"
 			:max="field.max"
+			:step="numberStep"
 			:modelValue="stringValue"
 			:readonly="field.readOnly"
 			:error="!!error"
@@ -424,6 +425,20 @@ export default {
 			return INPUT_TYPES.includes(this.kind) ? this.kind : 'text'
 		},
 
+		/**
+		 * The number input's step: the field's own, 1 for a whole number, else
+		 * any, so a decimal value (0.8) is not invalid to the browser.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/settings-number-decimal-step/specs/settings-fields/spec.md#requirement-a-number-setting-steps-as-it-is-declared
+		 */
+		numberStep() {
+			if (typeof this.field.step === 'number' || (typeof this.field.step === 'string' && this.field.step !== '')) {
+				return String(this.field.step)
+			}
+			return this.field.integer ? '1' : 'any'
+		},
+
 		/** @return {string} The label. */
 		label() {
 			return String(this.field.label || this.field.key || '')

package/src/components/CnWidgetObjectTable/CnWidgetObjectTable.vue

@@ -118,9 +118,10 @@ import CnConfirmDialog from '../../dialogs/CnConfirmDialog.vue'
 import CnDataTable from '../CnDataTable/CnDataTable.vue'
 import { getByPath, useEndpointSource } from '../../composables/useEndpointSource.js'
 import { useObjectStore } from '../../store/useObjectStore.js'
-import { dispatchAction, resolveObjectOpType } from '../../utils/actionsDispatcher.js'
+import { dispatchAction, interpolateActionTarget, resolveObjectOpType } from '../../utils/actionsDispatcher.js'
 import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js'
 import { headerFilterParams, nextHeaderFilters, withSortableColumns } from '../../utils/headerFilterState.js'
+import { localHeaderRows } from '../../utils/localHeaderRows.js'
 import { pageFilter, pageSort } from '../../utils/pageControls.js'
 import { readPath } from '../../utils/readPath.js'
 import { dropOptionalUnresolved, hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
@@ -869,9 +870,9 @@ export default {
 			if (this.endpointActive && this.columns.some((col) => col && typeof col === 'object' && col.labelPath)) {
 				inner.columns = this.labelledColumns(inner.columns || this.columns)
 			}
-			// Header sort and filter (`sortable`, `filterable`) only where the
-			// widget fetches its own rows: the server sorts and filters.
-			if (this.selfFetchActive && (this.sortable !== false || this.filterable)) {
+			// Header sort and filter (`sortable`, `filterable`): the server sorts
+			// and filters a self-fetch; endpoint rows are sorted and filtered here.
+			if ((this.selfFetchActive || this.endpointActive) && (this.sortable !== false || this.filterable)) {
 				inner.columns = withSortableColumns(inner.columns || this.columns, this.sortable)
 				inner.filterable = this.filterable
 				inner.activeFilters = this.headerFilters
@@ -889,7 +890,7 @@ export default {
 				}
 			}
 			if (this.endpointActive) {
-				inner.rows = this.endpointRows
+				inner.rows = localHeaderRows(this.endpointRows, this.headerSort, this.headerFilters)
 				inner.loading = this.epLoading || this.loading
 			}
 			if (this.rowRoute) {
@@ -1159,9 +1160,13 @@ export default {
 				return { ok: false, error: '' }
 			}
 			if (action.type !== 'object-op') {
-				const wrapped = (!action.type || action.type === 'handler')
-					? { ...action, args: [...(action.args || []), row] }
-					: action
+				let wrapped = action
+				if (!action.type || action.type === 'handler') {
+					wrapped = { ...action, args: [...(action.args || []), row] }
+				} else if (action.type === 'navigate' && row) {
+					// A row's navigate reads that row: `{objectId}` / `@objectId` is its id, `@object.<field>` its fields.
+					wrapped = { ...action, target: interpolateActionTarget(action.target, { objectId: row.id, object: row }) }
+				}
 				if (typeof this.cnDispatchAction === 'function') {
 					this.cnDispatchAction(wrapped)
 				} else {

package/src/components/CnWorkspaceFilterWidget/CnWorkspaceFilterWidget.vue

@@ -880,15 +880,23 @@ export default {
 		 */
 		/**
 		 * The value an input starts with: `content.default`, else the current
-		 * quarter or year for those types, else empty.
+		 * quarter or year for those types, else empty. For a quarter or year
+		 * input, `default: "previous"` is the last complete one (DqTermijnen
+		 * opens on the last complete quarter).
 		 *
 		 * @return {string}
 		 */
 		inputDefault() {
+			const today = new Date()
+			if (this.content.default === 'previous' && this.inputType === 'quarter') {
+				return quarterKey(new Date(today.getFullYear(), today.getMonth() - 3, 1))
+			}
+			if (this.content.default === 'previous' && this.inputType === 'year') {
+				return String(today.getFullYear() - 1)
+			}
 			if (this.content.default !== undefined && this.content.default !== null) {
 				return String(this.content.default)
 			}
-			const today = new Date()
 			if (this.inputType === 'quarter') {
 				return quarterKey(today)
 			}