@conduction/nextcloud-vue 2.58.0 → 2.60.0

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -119,6 +119,7 @@
 					:views="viewsForControl"
 					:loading="savedViewsLoading"
 					:currentUserId="currentSavedViewsUserId"
+					:counts="savedViewCounts"
 					@apply="onApplySavedView"
 					@saveRequest="showSaveViewDialog = true"
 					@deleteRequest="onDeleteViewRequest" />
@@ -171,6 +172,7 @@
 					:multiple="quickFilterMultiple"
 					:activeIndex="activeQuickFilterIndex"
 					:selectedIndices="selectedQuickFilterIndices"
+					:counts="tabCounts"
 					@update:activeIndex="onQuickFilterChange"
 					@update:selectedIndices="onQuickFilterMultiChange" />
 			</template>
@@ -451,6 +453,7 @@
 					@sort="onSortEvent"
 					@select="onSelect"
 					@rowClick="onRowClick"
+					@rowAuxClick="onRowAuxClick"
 					@rowContextMenu="onRowContextMenu">
 					<!-- Pass through column slots -->
 					<template
@@ -544,10 +547,12 @@
 					:statusField="board.statusField || 'status'"
 					:cardFields="board.cardFields || []"
 					:swimlaneField="board.swimlaneField || ''"
+					:dueRule="board.dueRule || null"
 					:rowKey="rowKey"
 					:runTransition="runTransition"
 					:paged="isPaged"
 					@cardClick="onRowClick"
+					@cardAuxClick="onRowAuxClick"
 					@moved="onBoardMoved" />
 
 				<!--
@@ -563,7 +568,8 @@
 					:laneField="dateAxis.laneField || ''"
 					:labelField="dateAxis.labelField || ''"
 					:rowKey="rowKey"
-					@rowClick="onRowClick" />
+					@rowClick="onRowClick"
+					@rowAuxClick="onRowAuxClick" />
 
 				<!-- List view -->
 				<CnObjectList
@@ -576,6 +582,7 @@
 					:rowKey="rowKey"
 					:emptyText="emptyText"
 					@click="onRowClick"
+					@auxClick="onRowAuxClick"
 					@select="onSelect">
 					<!--
 						List-item slot resolution priority (highest first):
@@ -596,6 +603,7 @@
 							:register="register"
 							:selected="selected"
 							@click="(...args) => onRowClick(object, args.find(isDomEvent))"
+							@mousedown="onCustomItemMouseDown"
 							@auxclick="onCustomItemAuxClick(object, $event)"
 							@select="onSelect(toggleIdInArray(internalSelectedIds, object[rowKey]))" />
 					</template>
@@ -629,6 +637,7 @@
 					:rowKey="rowKey"
 					:emptyText="emptyText"
 					@click="onRowClick"
+					@auxClick="onRowAuxClick"
 					@select="onSelect">
 					<!--
 						Card slot resolution priority (highest first):
@@ -649,6 +658,7 @@
 							:register="register"
 							:selected="selected"
 							@click="(...args) => onRowClick(object, args.find(isDomEvent))"
+							@mousedown="onCustomItemMouseDown"
 							@auxclick="onCustomItemAuxClick(object, $event)"
 							@select="onSelect(toggleIdInArray(internalSelectedIds, object[rowKey]))" />
 					</template>
@@ -774,14 +784,16 @@ import { useSavedViewsApi } from '../../composables/useSavedViewsApi.js'
 import { METADATA_COLUMNS } from '../../constants/metadata.js'
 import { routeHref } from '../../utils/actionLink.js'
 import { buildOnSuccessRoute, resolveRegisteredHandler } from '../../utils/actionsDispatcher.js'
+import { fetchFilterCounts } from '../../utils/fetchFilterCounts.js'
 import { buildExportUrl } from '../../utils/indexExportHelpers.js'
 import { openRowTarget } from '../../utils/linkNavigation.js'
-import { resolveClaimedTeams, resolveClaimTokens, splitViewsIntoTabs, viewAsTab } from '../../utils/listLenses.js'
+import { resolveClaimedTeams, resolveClaimTokens, splitViewsIntoTabs, viewAsTab, viewIdOf } from '../../utils/listLenses.js'
 import { LIST_SHORTCUTS, listPaletteCommands, shortcutFor } from '../../utils/listShortcuts.js'
 import { multiKeySort } from '../../utils/multiKeySort.js'
 import { resolveDeepTokens, resolveFilterValue } from '../../utils/resolveFilterTokens.js'
+import { resolveFilterMap } from '../../utils/routeFilters.js'
 import { availableRowActions, DEFAULT_ROW_ACTION_FIELD, refusalReasonFor, undeclaredRowActions } from '../../utils/rowActionAvailability.js'
-import { isNewTabClick, isRowMiddleClick, markNewTabHandled } from '../../utils/rowAuxClick.js'
+import { isNewTabClick, isNewTabHandled, isRowMiddleClick, markNewTabHandled, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'
 import { DEFAULT_ROW_INDICATOR_CAP } from '../../utils/rowIndicators.js'
 import { buildRouteQueryFromViewState, buildViewCreatePayload, extractViewState, extractViewStateFromRouteQuery, savedViewScope, viewMatchesScope } from '../../utils/savedViewHelpers.js'
 import { columnsFromSchema } from '../../utils/schema.js'
@@ -995,7 +1007,8 @@ function namedFilterToQuery(values) {
  * @event {object} mass-export — Mass export confirmed. Payload: { ids, format }
  * @event {object} mass-import — Mass import confirmed. Payload: import data
  * @event {void} refresh — Refresh button clicked
- * @event {object} row-click — Table row or card clicked or middle-clicked. Payload: (row, event) — the row object and the native click/auxclick event
+ * @event {object} row-click — Table row or card clicked. Payload: (row, event) — the row object and the native click event
+ * @event {object} row-aux-click — Table row or card middle-clicked. Payload: (row, event) — the row object and the native auxclick event
  * @event {{ key: string, order: string }} sort — Column sort changed
  * @event {number} page-changed — Pagination page changed
  * @event {number} page-size-changed — Pagination page size changed
@@ -1191,7 +1204,6 @@ export default {
 			default: null,
 		},
 
-		/* eslint-disable vue/no-unused-properties -- used in useSelfFetchList */
 		/**
 		 * Base filter for the self-fetch path. String values of the form
 		 * `"@route.<name>"` / `":<name>"` are interpolated from `$route.params`.
@@ -1200,7 +1212,6 @@ export default {
 			type: Object,
 			default: null,
 		},
-		/* eslint-enable vue/no-unused-properties */
 
 		/**
 		 * Self-fetch mode only — an array of clickable filter tabs rendered as
@@ -2203,6 +2214,19 @@ export default {
 			default: () => [],
 		},
 
+		/**
+		 * Which saved views show how many records they match: `true` for all
+		 * of them (tabs and the entries in the views control), or a list of
+		 * view ids. Off by default, so no count request is made. A quick
+		 * filter opts in on its own entry with `showCount: true`.
+		 *
+		 * @type {boolean|string[]}
+		 */
+		viewCounts: {
+			type: [Boolean, Array],
+			default: false,
+		},
+
 		/**
 		 * The teams this person may claim. The instance decides this list; it
 		 * is the membership side of `claimedTeams`.
@@ -2568,6 +2592,7 @@ export default {
 		'quick-filter-change',
 		'refresh',
 		'row-click',
+		'row-aux-click',
 		'search',
 		'select',
 		'sort',
@@ -2640,6 +2665,10 @@ export default {
 	data() {
 		return {
 			currentViewMode: this.viewMode,
+			/** Count per tab-strip index, for the entries that asked for one; null = none. */
+			tabCounts: null,
+			/** Count per saved-view id, for the views control; null = none. */
+			savedViewCounts: null,
 			/**
 			 * The non-`_` query keys this page owns, i.e. may clear on the next
 			 * persist. Seeded with what it adopted from the query on load, and
@@ -2810,6 +2839,9 @@ export default {
 		 * that is what Add does (no host `@add` listener) and the router can
 		 * resolve it. The bar then renders Add as a real link; null otherwise.
 		 *
+		 * `$.vnode.props` is not reactive, so an `add` listener attached or
+		 * removed after mount does not re-evaluate this.
+		 *
 		 * @return {string|object|null}
 		 */
 		addLinkTo() {
@@ -3229,6 +3261,55 @@ export default {
 			return this.splitSavedViews.control
 		},
 
+		/**
+		 * The filters whose record count this page shows: quick filters that
+		 * set `showCount`, and the saved views `viewCounts` names. Empty when
+		 * nothing opted in, which is what keeps the page from making a count
+		 * request nobody asked for.
+		 *
+		 * @return {Array<{key: string, filter: object}>} The filters to count.
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views
+		 */
+		countEntries() {
+			const entries = []
+			const tabs = this.tabStripEntries || []
+			const lens = this.lensTabs.length > 0
+			tabs.forEach((tab, index) => {
+				const wants = lens ? this.viewWantsCount(tab.id) : (tab && tab.showCount === true)
+				if (wants && tab.narrowsToNothing !== true) {
+					entries.push({ key: `tab:${index}`, filter: tab.filter || {} })
+				}
+			})
+			for (const view of this.viewsForControl) {
+				const id = viewIdOf(view)
+				if (this.viewWantsCount(id)) {
+					entries.push({ key: `view:${id}`, filter: viewAsTab(view).filter })
+				}
+			}
+			return entries
+		},
+
+		/**
+		 * Changes whenever the counts have to be fetched again: another set
+		 * of filters, another register or schema, or a list whose total moved
+		 * (a record was added, removed, or left a filter).
+		 *
+		 * @return {string} The signature.
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views
+		 */
+		countRequestKey() {
+			if (this.countEntries.length === 0) {
+				return ''
+			}
+			return JSON.stringify({
+				r: this.register,
+				s: this.exportSchemaSlug,
+				f: this.filter || null,
+				e: this.countEntries,
+				t: Number(this.effectivePagination?.total ?? 0),
+			})
+		},
+
 		/**
 		 * What the tab strip shows: the page's lens tabs when it named any,
 		 * else its quick filters. One strip, never two, so a person is not
@@ -4267,6 +4348,14 @@ export default {
 	},
 
 	watch: {
+		countRequestKey: {
+			immediate: true,
+			/** @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views */
+			handler() {
+				this.loadFilterCounts()
+			},
+		},
+
 		// Remember the whole folder set whenever no folder narrows the query.
 		folderSidebarLiveFacetValues: {
 			immediate: true,
@@ -4476,6 +4565,61 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Whether a saved view shows its record count (`viewCounts`).
+		 *
+		 * @param {string} id The view id.
+		 * @return {boolean} True when the view opted in.
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views
+		 */
+		viewWantsCount(id) {
+			if (this.viewCounts === true) {
+				return true
+			}
+			return Array.isArray(this.viewCounts) && this.viewCounts.map(String).includes(String(id))
+		},
+
+		/**
+		 * Fetch the record counts for the filters and views that asked for
+		 * one. Filters that narrow the same single field share one grouped
+		 * request. A failed count leaves that entry without a number.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views
+		 */
+		async loadFilterCounts() {
+			const requestKey = this.countRequestKey
+			const schema = this.exportSchemaSlug
+			if (requestKey === '' || !this.register || !schema) {
+				this.tabCounts = null
+				this.savedViewCounts = null
+				return
+			}
+			const params = (this.$route && this.$route.params) || {}
+			const ctx = typeof this.selfFetchTokenCtx === 'function' ? this.selfFetchTokenCtx() : {}
+			const counts = await fetchFilterCounts({
+				register: this.register,
+				schema,
+				entries: this.countEntries.map((entry) => ({ key: entry.key, filter: resolveFilterMap(entry.filter, params, ctx) })),
+				baseFilter: resolveFilterMap(this.filter, params, ctx),
+				ctx,
+			})
+			if (requestKey !== this.countRequestKey) {
+				return
+			}
+			const tabCounts = {}
+			const viewCounts = {}
+			for (const [key, value] of Object.entries(counts)) {
+				if (key.startsWith('tab:')) {
+					tabCounts[Number(key.slice(4))] = value
+				} else {
+					viewCounts[key.slice(5)] = value
+				}
+			}
+			this.tabCounts = tabCounts
+			this.savedViewCounts = viewCounts
+		},
+
 		// ── Split view (case-page-and-list-as-a-place) ──────────────────
 
 		/**
@@ -5565,21 +5709,60 @@ export default {
 		/**
 		 * Row/card click: toggles selection when `selectable` (covers the custom
 		 * `cardComponent` path), otherwise emits `row-click` for navigation. A
-		 * ctrl/cmd/shift or middle click opens a named source's row in a new tab.
+		 * ctrl/cmd/shift click opens a named source's row in a new tab.
 		 *
 		 * The `@event` block below sits directly against its `$emit`, and must
 		 * stay there. vue-docgen binds an event's description to the emit it
 		 * IMMEDIATELY precedes.
 		 *
 		 * @param {object} row The clicked row object
-		 * @param {MouseEvent|KeyboardEvent} [event] The originating click/auxclick event.
+		 * @param {MouseEvent|KeyboardEvent} [event] The originating click event.
 		 */
 		onRowClick(row, event) {
+			if (!this.routeClickedRow(row, event)) {
+				return
+			}
+			/**
+			 * @event row-click Emitted on a row/card click for navigation. Fires when `selectable` is false, OR when `rowClickToView` is set and something can open the row (selection then happens via the checkbox). Payload: `(row, event)` — the clicked row and the native click event (absent for a keyboard shortcut or map marker), so a host can open the row in a new tab on a ctrl/cmd/shift click with `openRowTarget`. A middle click emits `row-aux-click` instead.
+			 * @type {object} The clicked row object.
+			 */
+			this.$emit('row-click', ...(event ? [row, event] : [row]))
+		},
+
+		/**
+		 * Row/card middle click: opens a named source's row in a new tab and
+		 * emits `row-aux-click`, not `row-click`, so a host whose `row-click`
+		 * listener navigates never moves the current tab away.
+		 *
+		 * @param {object} row The clicked row object
+		 * @param {MouseEvent} event The originating auxclick event.
+		 */
+		onRowAuxClick(row, event) {
+			if (!this.routeClickedRow(row, event)) {
+				return
+			}
+			/**
+			 * @event row-aux-click Emitted on a row/card middle click, under the same conditions as `row-click`, so a host can open the row in a new tab with `openRowTarget`. Payload: `(row, event)` — the clicked row and the native auxclick event.
+			 * @type {object} The clicked row object.
+			 */
+			this.$emit('row-aux-click', row, event)
+		},
+
+		/**
+		 * The shared part of a row click and a middle click: on a selectable
+		 * page a plain click toggles selection instead, and a named source opens
+		 * its own row.
+		 *
+		 * @param {object} row The clicked row object
+		 * @param {MouseEvent|KeyboardEvent} [event] The originating event.
+		 * @return {boolean} Whether the click navigates, so the caller emits.
+		 */
+		routeClickedRow(row, event) {
 			if (this.selectable && !this.rowClickOpens) {
 				if (!event || event.button === undefined || event.button === 0) {
 					this.onSelect(this.toggleIdInArray(this.internalSelectedIds, row[this.rowKey]))
 				}
-				return
+				return false
 			}
 			// A named source knows where its rows live. Emitting only would leave
 			// the click inert on a manifest page, which has no listener to bind —
@@ -5626,11 +5809,7 @@ export default {
 					}
 				}
 			}
-			/**
-			 * @event row-click Emitted on a row/card click (or middle click) for navigation. Fires when `selectable` is false, OR when `rowClickToView` is set and something can open the row (selection then happens via the checkbox). Payload: `(row, event)` — the clicked row and the native click/auxclick event (absent for a keyboard shortcut or map marker), so a host can open the row in a new tab on a ctrl/cmd/shift or middle click with `openRowTarget`.
-			 * @type {object} The clicked row object.
-			 */
-			this.$emit('row-click', ...(event ? [row, event] : [row]))
+			return true
 		},
 
 		/**
@@ -5644,17 +5823,31 @@ export default {
 			return typeof Event !== 'undefined' && value instanceof Event
 		},
 
+		/**
+		 * Mousedown on a custom list/card component's root: when a middle click
+		 * opens the row, keep the browser from starting autoscroll.
+		 *
+		 * @param {MouseEvent} event The mousedown event.
+		 * @return {void}
+		 */
+		onCustomItemMouseDown(event) {
+			if (!this.selectable || this.rowClickOpens) {
+				preventMiddleClickAutoscroll(event)
+			}
+		},
+
 		/**
 		 * Middle click on a custom list/card component's root: open the row
-		 * like a click would.
+		 * like a middle click on a built-in card would. Skipped when something
+		 * inside the component already opened it in a new tab.
 		 *
 		 * @param {object} row The component's row.
 		 * @param {MouseEvent} event The auxclick event.
 		 * @return {void}
 		 */
 		onCustomItemAuxClick(row, event) {
-			if (isRowMiddleClick(event)) {
-				this.onRowClick(row, event)
+			if (isRowMiddleClick(event) && !isNewTabHandled(event)) {
+				this.onRowAuxClick(row, event)
 			}
 		},
 

package/src/components/CnIndexPage/manifestActionDispatch.js

@@ -37,19 +37,39 @@ function resolveRowToken(value, row) {
 }
 
 /**
- * The route params a `handler: "navigate"` action pushes for a row: the row id,
- * overridden by the declared `params` after the `{field}` token grammar. A
- * token naming a field the row lacks is dropped.
+ * The implicit `{ id }` param for a row, only when the named route declares
+ * `:id`: vue-router warns about (and drops) a param its path does not take.
+ * Without a router to ask, or for a route it does not know, the id is kept.
  *
- * @param {object} action Manifest action descriptor.
+ * @param {object} [router] The app's router.
+ * @param {string} name The route name.
  * @param {object} row The row.
  * @param {string} rowKey The row's id field.
+ * @return {object} `{ id }`, or an empty object.
+ */
+function rowIdParam(router, name, row, rowKey) {
+	const routes = typeof router?.getRoutes === 'function' ? router.getRoutes() : null
+	const route = routes ? routes.find((r) => r.name === name) : null
+	if (route && !/:id\b/.test(route.path)) {
+		return {}
+	}
+	return { id: row?.[rowKey] }
+}
+
+/**
+ * The route params a `handler: "navigate"` action pushes for a row: the row id
+ * (when the route takes one), overridden by the declared `params` after the
+ * `{field}` token grammar. A token naming a field the row lacks is dropped.
+ *
+ * @param {object} action Manifest action descriptor.
+ * @param {object} row The row.
+ * @param {object} ctx Dispatch context (`rowKey`, `router`).
  * @param {boolean} warn Whether to warn about a dropped param.
  * @return {object} The params.
  */
-function navigateParams(action, row, rowKey, warn) {
+function navigateParams(action, row, ctx, warn) {
 	const declaredParams = (action.params && typeof action.params === 'object') ? action.params : null
-	const params = { id: row?.[rowKey] }
+	const params = rowIdParam(ctx.router, action.route, row, ctx.rowKey)
 	for (const [key, declared] of Object.entries(declaredParams || {})) {
 		const { resolved, value } = resolveRowToken(declared, row)
 		if (resolved) {
@@ -88,7 +108,7 @@ export function resolveActionTarget(action, row, ctx, warn = false) {
 			return null
 		}
 		if (type === 'open-page') {
-			return { target: { name: target, params: { id: row?.[ctx.rowKey] } }, external: false }
+			return { target: { name: target, params: rowIdParam(ctx.router, target, row, ctx.rowKey) }, external: false }
 		}
 		return { target, external: isExternalActionTarget(target) }
 	}
@@ -96,7 +116,7 @@ export function resolveActionTarget(action, row, ctx, warn = false) {
 		if (typeof action.route !== 'string' || action.route.length === 0) {
 			return null
 		}
-		return { target: { name: action.route, params: navigateParams(action, row, ctx.rowKey, warn) }, external: false }
+		return { target: { name: action.route, params: navigateParams(action, row, ctx, warn) }, external: false }
 	}
 	return null
 }
@@ -115,8 +135,8 @@ export function resolveActionTarget(action, row, ctx, warn = false) {
  *   - `open-modal` → not wired for index actions; falls back to `@action`.
  *
  * Handler dispatch (`type: 'handler'`, the default) reads `action.handler`:
- *   - `navigate` → $router.push to `action.route` with `{ id: row[rowKey] }`,
- *     merged with the `action.params` map (declared params win — so a
+ *   - `navigate` → $router.push to `action.route` with `{ id: row[rowKey] }`
+ *     (when the route declares `:id`), merged with the `action.params` map (declared params win — so a
  *     "New X" action can navigate to a detail route with `{ id: "new" }`).
  *     Param strings run the `{field}` row-token grammar: `"{id}"` resolves to
  *     `row.id` (type preserved), `"item-{id}"` interpolates, and a brace-less
@@ -187,7 +207,7 @@ export function resolveActionHandler(action, ctx) {
 		// `{field}` row-token grammar first — an unresolved token is dropped
 		// rather than pushed as a literal `%7Bid%7D` path segment.
 		return (row) => {
-			ctx.router.push({ name: route, params: navigateParams(action, row, ctx.rowKey, true) })
+			ctx.router.push({ name: route, params: navigateParams(action, row, ctx, true) })
 		}
 	}
 

package/src/components/CnIntegrationWidget/CnIntegrationWidgetEmpty.vue

@@ -25,8 +25,7 @@
 			<NcButton
 				variant="primary"
 				:href="docsUrl"
-				target="_blank"
-				rel="noopener">
+				target="_blank">
 				<template #icon>
 					<OpenInNew :size="18" />
 				</template>

package/src/components/CnInteractionFormWidget/CnInteractionFormWidget.vue

@@ -38,7 +38,6 @@
 				variant="tertiary"
 				:href="savedHref"
 				target="_blank"
-				rel="noopener noreferrer"
 				data-testid="cn-interaction-form-open">
 				<template #icon>
 					<OpenInNew :size="20" />

package/src/components/CnLinkButtonWidget/CnLinkButtonWidget.vue

@@ -420,10 +420,9 @@ export default {
 		 * @return {void}
 		 */
 		dispatchAction({ actionType, url, value }) {
+			// An `external` entry with a URL is a real link (see linkAttrsFor);
+			// one without a URL has nothing to open.
 			switch (actionType) {
-				case ACTION_TYPES.EXTERNAL:
-					this.handleExternal(url)
-					break
 				case ACTION_TYPES.INTERNAL:
 					this.$emit('internal-action', url)
 					break
@@ -434,20 +433,6 @@ export default {
 					break
 			}
 		},
-
-		/**
-		 * Open an external URL in a new tab; `noopener,noreferrer` prevents
-		 * the opened page reaching back via `window.opener`.
-		 *
-		 * @param {string} url the URL to open.
-		 * @return {void}
-		 */
-		handleExternal(url) {
-			if (typeof url !== 'string' || url === '') {
-				return
-			}
-			window.open(url, '_blank', 'noopener,noreferrer')
-		},
 	},
 }
 </script>

package/src/components/CnLogsPage/CnLogsPage.vue

@@ -89,7 +89,8 @@
 					:sortKeys="effectiveSortKeys"
 					:emptyText="emptyText"
 					@sort="onSort"
-					@rowClick="onRowClick">
+					@rowClick="onRowClick"
+					@rowAuxClick="onRowAuxClick">
 					<template
 						v-for="col in slotColumns"
 						#[`column-${col}`]="{ row, value }">
@@ -484,14 +485,21 @@ export default {
 		 */
 		'action',
 		/**
-		 * @event row-click Emitted when a log row's body is clicked or
-		 * middle-clicked, whether or not `rowDetail` opened the detail dialog —
-		 * so a host can navigate instead of (or as well as) showing the dialog.
-		 * Payload: `(row, event)`, the second being the native click/auxclick
-		 * event.
+		 * @event row-click Emitted when a log row's body is clicked, whether or
+		 * not `rowDetail` opened the detail dialog — so a host can navigate
+		 * instead of (or as well as) showing the dialog. Payload: `(row, event)`,
+		 * the second being the native click event. A middle click emits
+		 * `row-aux-click` instead.
 		 * @type {object}
 		 */
 		'row-click',
+		/**
+		 * @event row-aux-click Emitted when a log row's body is middle-clicked,
+		 * for opening it in a new tab. Payload: `(row, event)`, the second being
+		 * the native auxclick event.
+		 * @type {object}
+		 */
+		'row-aux-click',
 	],
 
 	setup(props) {
@@ -994,26 +1002,43 @@ export default {
 		/**
 		 * Handle a row-body click: navigate to `rowRoute` when one is declared,
 		 * else open the detail dialog when `rowDetail` is set. Always re-emits
-		 * so a host can do its own thing regardless. A ctrl/cmd/shift or middle
-		 * click opens `rowRoute` in a new tab; a middle click never opens the
-		 * dialog.
+		 * so a host can do its own thing regardless. A ctrl/cmd/shift click
+		 * opens `rowRoute` in a new tab.
 		 *
 		 * @param {object} row The clicked log entry.
-		 * @param {MouseEvent} [event] The originating click/auxclick event.
+		 * @param {MouseEvent} [event] The originating click event.
 		 */
 		onRowClick(row, event) {
 			if (this.rowRoute) {
 				markNewTabHandled(event, openRowTarget(event, { name: this.rowRoute, params: { id: row?.[this.rowKey] } }, this.$router))
-			} else if (this.rowDetail && !(event && event.button === 1)) {
+			} else if (this.rowDetail) {
 				this.detailRow = row
 			}
 			/**
-			 * @event row-click Emitted when a log row's body is clicked or middle-clicked. Payload: `(row, event)` — the log entry and the native click/auxclick event.
+			 * @event row-click Emitted when a log row's body is clicked. Payload: `(row, event)` — the log entry and the native click event.
 			 * @type {object}
 			 */
 			this.$emit('row-click', row, event)
 		},
 
+		/**
+		 * Handle a row-body middle click: open `rowRoute` in a new tab, never
+		 * the detail dialog, and emit `row-aux-click` rather than `row-click`.
+		 *
+		 * @param {object} row The clicked log entry.
+		 * @param {MouseEvent} event The originating auxclick event.
+		 */
+		onRowAuxClick(row, event) {
+			if (this.rowRoute) {
+				markNewTabHandled(event, openRowTarget(event, { name: this.rowRoute, params: { id: row?.[this.rowKey] } }, this.$router))
+			}
+			/**
+			 * @event row-aux-click Emitted when a log row's body is middle-clicked. Payload: `(row, event)` — the log entry and the native auxclick event.
+			 * @type {object}
+			 */
+			this.$emit('row-aux-click', row, event)
+		},
+
 		/** Close the row-detail dialog. */
 		closeDetail() {
 			this.detailRow = null

package/src/components/CnNextStepCard/CnNextStepCard.md

@@ -0,0 +1,40 @@
+A step with one thing done and two to go:
+
+```vue
+<CnNextStepCard
+  title="What now? Step 2: handling"
+  :items="[
+    { label: 'Receipt confirmed to the resident', done: true },
+    { label: 'Review the 3 documents that are still open', hint: '2 of 5 done' },
+    { label: 'Draft the decision' },
+  ]"
+  action-label="Continue reviewing"
+  after="Then: step 3, decision" />
+```
+
+A checklist only, with no button:
+
+```vue
+<CnNextStepCard
+  :items="[
+    { label: 'Inform the resident', done: true },
+    { label: 'Archive the case', done: true },
+  ]" />
+```
+
+As a page section, with the button waiting for its request. `title-tag` sets the heading level, `action-id` gives the button an id a skip link can target, and `done-label` and `todo-label` are the states a screen reader hears:
+
+```vue
+<CnNextStepCard
+  title="What now?"
+  title-tag="h2"
+  action-label="Publish"
+  action-id="case-primary-action"
+  :action-disabled="true"
+  done-label="Klaar"
+  todo-label="Nog doen"
+  :items="[
+    { label: 'Check what can be made public', done: true },
+    { label: 'Create the publication' },
+  ]" />
+```