@conduction/nextcloud-vue 2.96.0 → 2.97.0

package/src/components/CnFilesBrowser/filesBrowserColumns.js

@@ -144,7 +144,8 @@ export function attributePropertiesFor(columns) {
 }
 
 /**
- * The value one column shows for one node.
+ * The value one column shows for one node. A `row` column's key may be a
+ * dotted path into the host's record.
  *
  * @param {object} column A resolved column.
  * @param {object} node The node.
@@ -169,7 +170,12 @@ export function fileColumnValue(column, node, rowData = null) {
 			return undefined
 		}
 		const entry = byId[node.fileid] ?? byId[String(node.fileid)]
-		return entry ? entry[column.key] : undefined
+		if (!entry) {
+			return undefined
+		}
+		// A key the record holds as written wins; otherwise a dotted key reads
+		// a nested field (`scanVerdict.state`, `integrity.value`).
+		return Object.hasOwn(entry, column.key) ? entry[column.key] : atPath(entry, column.key)
 	}
 	return atPath(node, column.nodeKey || column.key)
 }

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -13,15 +13,15 @@
 		     region (WCAG 2.4.6 / 1.3.1). -->
 		<slot
 			name="header"
-			:title="title"
+			:title="presented('title')"
 			:description="headerDescription"
 			:icon="resolvedIcon"
 			:showTitle="showTitle">
 			<CnPageHeader
-				:title="title"
+				:title="presented('title')"
 				:description="headerDescription"
 				:icon="showTitleIcon && !isBoardLook ? resolvedIcon : ''"
-				:breadcrumb="breadcrumb"
+				:breadcrumb="presented('breadcrumb')"
 				:meta="headerMetaText"
 				:visuallyHidden="!showTitle">
 				<!-- The board's header buttons (`headerButtons`), beside the
@@ -125,11 +125,11 @@
 		<!-- Page tabs a named source declares (`pageTabs()`): sibling lists
 		     of the same thing, such as a flow list and its runs this week.
 		     Links, not tabs: each one is its own page. -->
-		<nav v-if="sourcePageTabs.length > 0"
+		<nav v-if="effectivePageTabs.length > 0"
 			class="cn-index-page__page-tabs"
 			:aria-label="title || t('nextcloud-vue', 'Pages')"
 			data-testid="cn-index-page-tabs">
-			<a v-for="tab in sourcePageTabs"
+			<a v-for="tab in effectivePageTabs"
 				:key="tab.id || tab.to"
 				class="cn-index-page__page-tab"
 				:class="{ 'cn-index-page__page-tab--active': isActivePageTab(tab) }"
@@ -193,7 +193,7 @@
 			:sortValue="sortSelectValue"
 			:showSearch="inlineSearch || isBoardLook"
 			:searchValue="effectiveSearchValue"
-			:searchPlaceholder="searchPlaceholder ? cnTranslate(searchPlaceholder) : searchPlaceholder"
+			:searchPlaceholder="presented('searchPlaceholder') ? cnTranslate(presented('searchPlaceholder')) : presented('searchPlaceholder')"
 			:showCountWithSearch="showCountWithSearch"
 			:refreshing="effectiveRefreshing"
 			:refreshDisabled="refreshDisabled"
@@ -1075,6 +1075,23 @@
 					class="cn-index-page__pagination"
 					@pageChanged="onPageEvent"
 					@pageSizeChanged="onPageSizeEvent" />
+
+				<!-- A notice under the list (`notice`): DqPrivacy's "Een
+				     AVG-verzoek is een zaak met ..." band. -->
+				<NcNoteCard
+					v-if="notice && notice.text"
+					class="cn-index-page__notice"
+					:type="noticeType"
+					data-testid="cn-index-page-notice">
+					{{ cnTranslate(notice.text) }}
+				</NcNoteCard>
+
+				<!-- Cards after the list (`afterList`), stacked in order (PqSocial). -->
+				<CnIndexPageWidgets
+					v-if="presentedAfterList.length > 0"
+					class="cn-index-page__after-list"
+					variant="after-list"
+					:widgets="presentedAfterList" />
 			</div>
 
 			<!-- The open record, beside the list on a wide screen and instead
@@ -1158,7 +1175,7 @@
 <script>
 import { getCurrentUser } from '@nextcloud/auth'
 import { translatePlural as n, translate as t } from '@nextcloud/l10n'
-import { NcActionButton, NcActionCaption, NcActionCheckbox, NcActionLink, NcActions, NcActionSeparator, NcButton, NcCheckboxRadioSwitch, NcLoadingIcon } from '@nextcloud/vue'
+import { NcActionButton, NcActionCaption, NcActionCheckbox, NcActionLink, NcActions, NcActionSeparator, NcButton, NcCheckboxRadioSwitch, NcLoadingIcon, NcNoteCard } from '@nextcloud/vue'
 import { getCurrentInstance, inject, markRaw, ref } from 'vue'
 import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
 import Close from 'vue-material-design-icons/Close.vue'
@@ -1200,7 +1217,7 @@ import {
 } from '../../utils/boardReferenceColumns.js'
 import { reportBindingProblems } from '../../utils/diagnostics.js'
 import { fetchGroupedCounts } from '../../utils/fetchAggregate.js'
-import { fetchFilterCounts } from '../../utils/fetchFilterCounts.js'
+import { fetchFilterCounts, fetchListTotal } from '../../utils/fetchFilterCounts.js'
 import { buildExportUrl } from '../../utils/indexExportHelpers.js'
 import { lensUnavailableText } from '../../utils/lensAvailability.js'
 import { isModifiedClick, openRowTarget } from '../../utils/linkNavigation.js'
@@ -1219,7 +1236,7 @@ import { isNewTabClick, isNewTabHandled, isRowMiddleClick, markNewTabHandled, pr
 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'
-import { resolveScopeLayout } from '../../utils/scopeListLayout.js'
+import { resolveScopeLayout, resolveScopePresentation } from '../../utils/scopeListLayout.js'
 import { dispatchObjectCreated } from '../../utils/walkthroughSignals.js'
 import { CnActionButtons } from '../CnActionButtons/index.js'
 import { CnActionsBar } from '../CnActionsBar/index.js'
@@ -1490,6 +1507,7 @@ export default {
 
 	components: {
 		CnIndexPageWidgets,
+		NcNoteCard,
 		CnBuildiqEditButton,
 		CnFollowToggle,
 		NcLoadingIcon,
@@ -1658,6 +1676,35 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Tabs to sibling pages above the toolbar (manifest `config.pageTabs`),
+		 * each `{ id?, label, route?, params?, query?, href?, countFrom?: {
+		 * register, schema, filter? } }`: DqPrivacy's "AVG-verzoeken |
+		 * Datalekken". The current page's tab is marked; `countFrom` adds the
+		 * count of that list. Wins over a named source's own page tabs.
+		 *
+		 * @type {Array<object>|null}
+		 * @spec openspec/changes/index-page-tabs-notice/specs/index-page/spec.md#requirement-an-index-page-can-link-its-sibling-pages-as-tabs
+		 */
+		pageTabs: {
+			type: Array,
+			default: null,
+		},
+
+		/**
+		 * A notice under the list (manifest `config.notice`): `{ text,
+		 * variant?: 'info' | 'success' | 'warning' }`, a band that explains
+		 * the list, such as who decides what. The text goes through the host
+		 * translate.
+		 *
+		 * @type {{text: string, variant?: string}|null}
+		 * @spec openspec/changes/index-page-tabs-notice/specs/index-page/spec.md#requirement-an-index-page-can-show-a-notice-under-its-list
+		 */
+		notice: {
+			type: Object,
+			default: null,
+		},
+
 		/** Optional description shown below the title */
 		description: {
 			type: String,
@@ -3045,6 +3092,33 @@ export default {
 			default: () => [],
 		},
 
+		/**
+		 * Cards after the list (manifest `config.afterList`): dashboard widget
+		 * definitions `{ id, type, title?, content, headerLink? }` stacked
+		 * under the list in the listed order, the counterpart of `statRow`
+		 * above it. A query preset or a scope can set its own.
+		 *
+		 * @spec openspec/changes/index-scope-presentation/specs/index-page/spec.md#requirement-an-index-page-can-draw-widgets-after-its-list
+		 * @type {Array<object>}
+		 */
+		afterList: {
+			type: Array,
+			default: () => [],
+		},
+
+		/**
+		 * The route query pairs that chose this page's query preset, set by
+		 * CnPageRenderer. They scope the list, so they show no removable
+		 * active-filter chip.
+		 *
+		 * @spec openspec/changes/index-scope-presentation/specs/index-page/spec.md#requirement-the-query-that-chose-a-preset-is-not-a-removable-filter
+		 * @type {object|null}
+		 */
+		fixedFilters: {
+			type: Object,
+			default: null,
+		},
+
 		/**
 		 * Where a row carries the actions the server says this caller may run
 		 * on it: a dotted path, read off the rows the list already fetched, so
@@ -3645,6 +3719,8 @@ export default {
 			tabCounts: null,
 			// The counts of the `filterStrip` pills, by pill key ('all', 'v0', ...).
 			filterStripCounts: null,
+			/** The `countFrom` counts of the manifest page tabs, by index. */
+			pageTabCounts: {},
 			/** The tabs `quickFiltersFrom` produced, or null before they load. */
 			generatedQuickFilters: null,
 			/** Count per saved-view id, for the views control; null = none. */
@@ -4194,7 +4270,8 @@ export default {
 			}
 			// The index boards draw all four segments, so the board look does
 			// too unless the manifest names its own list.
-			const listed = Array.isArray(this.viewSwitch) ? this.viewSwitch : ['table', 'cards', 'board', 'map']
+			const viewSwitch = this.presented('viewSwitch')
+			const listed = Array.isArray(viewSwitch) ? viewSwitch : ['table', 'cards', 'board', 'map']
 			const offered = [...this.effectiveToggleModes, ...(this.showMapSegment ? ['map'] : [])]
 			return listed.filter((mode) => ['table', 'cards', 'board', 'map'].includes(mode) && !offered.includes(mode))
 		},
@@ -4665,6 +4742,58 @@ export default {
 			})
 		},
 
+		/**
+		 * This page's own value of each presentation key, which a query preset
+		 * may have set: what `presented()` falls back to without a scope.
+		 *
+		 * @return {object}
+		 * @spec openspec/changes/index-scope-presentation/specs/index-page/spec.md#requirement-a-preset-or-a-scope-sets-the-list-s-presentation
+		 */
+		ownPresentation() {
+			return {
+				title: this.title,
+				quickFilters: this.quickFilters,
+				cardFields: this.cardFields,
+				countText: this.countText,
+				searchPlaceholder: this.searchPlaceholder,
+				footerNote: this.footerNote,
+				viewSwitch: this.viewSwitch,
+				addLabel: this.addLabel,
+				headerButtons: this.headerButtons,
+				breadcrumb: this.breadcrumb,
+				headerMeta: this.headerMeta,
+				afterList: this.afterList,
+			}
+		},
+
+		/**
+		 * The presentation the active scope declares (`title`, `countText`,
+		 * `quickFilters`, `addLabel`, `afterList` and the other query preset
+		 * keys), from its folder entry or its row's `x-index`. Empty without a
+		 * scope, so the page's own values stand.
+		 *
+		 * @return {object}
+		 * @spec openspec/changes/index-scope-presentation/specs/index-page/spec.md#requirement-a-preset-or-a-scope-sets-the-list-s-presentation
+		 */
+		activeScopePresentation() {
+			if (!this.folderSidebar) {
+				return {}
+			}
+			return resolveScopePresentation({ scope: this.activeScope, row: this.activeScopeRow })
+		},
+
+		/**
+		 * The widgets drawn after the list: the active scope's `afterList`,
+		 * else the page's.
+		 *
+		 * @return {Array<object>}
+		 * @spec openspec/changes/index-scope-presentation/specs/index-page/spec.md#requirement-an-index-page-can-draw-widgets-after-its-list
+		 */
+		presentedAfterList() {
+			const list = this.presented('afterList')
+			return Array.isArray(list) ? list : []
+		},
+
 		/**
 		 * The fields the search box searches over while a scope declaring
 		 * `searchFields` is active. Read by `useSelfFetchList`'s fixed-filter
@@ -5124,8 +5253,9 @@ export default {
 		 * @return {?Array<string>}
 		 */
 		resolvedCardFields() {
-			if (Array.isArray(this.cardFields) && this.cardFields.length > 0) {
-				return this.cardFields
+			const cardFields = this.presented('cardFields')
+			if (Array.isArray(cardFields) && cardFields.length > 0) {
+				return cardFields
 			}
 			if (!this.isBoardLook) {
 				return null
@@ -5164,6 +5294,10 @@ export default {
 					}
 				})
 			}
+			// An `actions` column: the page's row actions it names, as buttons.
+			cols = cols.map((col) => (col && typeof col === 'object' && col.widget === 'actions'
+				? { ...col, sortable: false, widgetProps: { ...(col.widgetProps || {}), items: (row) => this.actionColumnItems(col, row), run: this.runColumnAction } }
+				: col))
 			// The Recent lens owns the order: no column sorts while it is on.
 			if (this.recentLensActive) {
 				cols = cols.map((col) => (col && typeof col === 'object' ? { ...col, sortable: false } : col))
@@ -6040,6 +6174,51 @@ export default {
 			return (source.pageTabs() || []).filter((tab) => tab && tab.to && tab.label)
 		},
 
+		/**
+		 * The page tabs to draw: the manifest's `pageTabs`, each with its
+		 * `countFrom` count once known, else a named source's own.
+		 *
+		 * @return {Array<object>} The tabs, `{ id, label, to, count? }`.
+		 * @spec openspec/changes/index-page-tabs-notice/specs/index-page/spec.md#requirement-an-index-page-can-link-its-sibling-pages-as-tabs
+		 */
+		/**
+		 * The notice band's NcNoteCard type: its `variant`, else info.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/index-page-tabs-notice/specs/index-page/spec.md#requirement-an-index-page-can-show-a-notice-under-its-list
+		 */
+		noticeType() {
+			const variant = this.notice && this.notice.variant
+			return ['success', 'warning', 'error'].includes(variant) ? variant : 'info'
+		},
+
+		effectivePageTabs() {
+			if (!Array.isArray(this.pageTabs) || this.pageTabs.length === 0) {
+				return this.sourcePageTabs
+			}
+			return this.pageTabs
+				.filter((tab) => tab && typeof tab.label === 'string' && tab.label !== '' && (tab.route || tab.to || tab.href))
+				.map((tab, index) => {
+					const to = tab.route
+						? { name: tab.route, ...(tab.params ? { params: tab.params } : {}), ...(tab.query ? { query: tab.query } : {}) }
+						: (tab.to || tab.href)
+					const count = this.pageTabCounts[index]
+					return { id: tab.id || `page-tab-${index}`, label: this.cnTranslate(tab.label), to, ...(typeof count === 'number' ? { count } : {}) }
+				})
+		},
+
+		/**
+		 * What the page tab counts depend on, as one key.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/index-page-tabs-notice/specs/index-page/spec.md#requirement-an-index-page-can-link-its-sibling-pages-as-tabs
+		 */
+		pageTabCountKey() {
+			const tabs = Array.isArray(this.pageTabs) ? this.pageTabs : []
+			const sources = tabs.map((tab) => (tab && tab.countFrom && tab.countFrom.register && tab.countFrom.schema ? tab.countFrom : null))
+			return sources.some(Boolean) ? JSON.stringify(sources) : ''
+		},
+
 		/**
 		 * The numbers on the quick filters: a named source counts its own
 		 * tabs (`tabCounts()`), a self-fetching page asks OpenRegister.
@@ -6061,11 +6240,15 @@ export default {
 		 * @return {string} The note, translated, or ''.
 		 */
 		effectiveFooterNote() {
-			if (this.footerNote) {
-				return this.cnTranslate(this.footerNote)
+			// The scope's note, else the page's (a preset may have set it),
+			// else the named source's.
+			const scoped = this.activeScopePresentation ? this.activeScopePresentation.footerNote : undefined
+			const footerNote = scoped !== undefined ? scoped : this.footerNote
+			if (footerNote) {
+				return this.cnTranslate(footerNote)
 			}
 			const source = this.isNamedSource ? this.namedSource : null
-			return (source && source.footerNote) || this.footerNote
+			return (source && source.footerNote) || footerNote
 		},
 
 		/**
@@ -6076,7 +6259,7 @@ export default {
 		 * @return {Array<object>|null} The tabs, or null when there are none.
 		 */
 		effectiveQuickFilters() {
-			const own = withPersonalLenses(this.quickFilters || this.generatedQuickFilters, this.personalLenses)
+			const own = withPersonalLenses(this.presented('quickFilters') || this.generatedQuickFilters, this.personalLenses)
 			if (own && own.length > 0) {
 				return own
 			}
@@ -6142,7 +6325,8 @@ export default {
 		 * @return {Array<{key: string, label: string, action: string, variant: string, icon: string, format: string}>}
 		 */
 		resolvedHeaderButtons() {
-			const declared = Array.isArray(this.headerButtons) ? this.headerButtons : []
+			const headerButtons = this.presented('headerButtons')
+			const declared = Array.isArray(headerButtons) ? headerButtons : []
 			return declared
 				.filter((button) => button && typeof button === 'object' && typeof button.action === 'string' && button.action !== '')
 				.map((button, index) => {
@@ -6267,6 +6451,7 @@ export default {
 			for (const [key, raw] of Object.entries(this.effectiveActiveFilters || {})) {
 				const values = (Array.isArray(raw) ? raw : [raw])
 					.filter((value) => value !== null && value !== undefined && value !== '')
+					.filter((value) => !this.isFixedFilter(key, value))
 					.map((value) => this.activeFilterValueLabel(key, value))
 				if (values.length === 0) {
 					continue
@@ -6450,11 +6635,12 @@ export default {
 		 * @return {string}
 		 */
 		headerMetaText() {
-			if (!this.headerMeta) {
+			const headerMeta = this.presented('headerMeta')
+			if (!headerMeta) {
 				return ''
 			}
 			const total = this.effectivePagination?.total
-			return this.cnTranslate(this.headerMeta)
+			return this.cnTranslate(headerMeta)
 				.replace('{shown}', String(this.effectiveObjects.length))
 				.replace('{total}', typeof total === 'number' ? String(total) : '')
 		},
@@ -6468,11 +6654,12 @@ export default {
 				// The default count line is the library's own string, so it
 				// reads "14 van 14" in Dutch; a page's own template goes
 				// through the app's label lookup.
-				if (!this.countText && !this.countSubtitle) {
+				const countText = this.presented('countText')
+				if (!countText && !this.countSubtitle) {
 					return t('nextcloud-vue', '{shown} of {total}', { shown, total })
 				}
-				if (this.countText) {
-					return this.cnTranslate(this.countText)
+				if (countText) {
+					return this.cnTranslate(countText)
 						.replace('{shown}', String(shown))
 						.replace('{total}', String(total))
 				}
@@ -6486,8 +6673,10 @@ export default {
 
 		/** Add button label — derived from schema.title if not explicitly set */
 		resolvedAddLabel() {
-			if (this.addLabel) {
-				return this.cnTranslate(this.addLabel)
+			const scoped = this.activeScopePresentation ? this.activeScopePresentation.addLabel : undefined
+			const addLabel = scoped !== undefined ? scoped : this.addLabel
+			if (addLabel) {
+				return this.cnTranslate(addLabel)
 			}
 			// A named source names its own create action. Without this the button
 			// falls back to a schema-derived noun, and a named source has no
@@ -6712,6 +6901,14 @@ export default {
 			},
 		},
 
+		pageTabCountKey: {
+			immediate: true,
+			/** @spec openspec/changes/index-page-tabs-notice/specs/index-page/spec.md#requirement-an-index-page-can-link-its-sibling-pages-as-tabs */
+			handler() {
+				this.loadPageTabCounts()
+			},
+		},
+
 		filterStripCountKey: {
 			immediate: true,
 			/** @spec openspec/changes/screens-filter-strip/specs/index-filter-strip/spec.md#requirement-an-index-page-can-draw-a-second-filter-strip */
@@ -6979,6 +7176,36 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * A presentation value: the active scope's when it declares the key,
+		 * else this page's own prop (which a query preset may have set).
+		 *
+		 * @param {string} key One of the query preset keys.
+		 * @return {unknown} The value.
+		 * @spec openspec/changes/index-scope-presentation/specs/index-page/spec.md#requirement-a-preset-or-a-scope-sets-the-list-s-presentation
+		 */
+		presented(key) {
+			const scoped = this.activeScopePresentation
+			return scoped[key] !== undefined ? scoped[key] : this.ownPresentation[key]
+		},
+
+		/**
+		 * Whether a filter value is one of the query pairs that chose the
+		 * preset, so it shows no removable chip.
+		 *
+		 * @param {string} key The filter key.
+		 * @param {unknown} value One filter value.
+		 * @return {boolean}
+		 * @spec openspec/changes/index-scope-presentation/specs/index-page/spec.md#requirement-the-query-that-chose-a-preset-is-not-a-removable-filter
+		 */
+		isFixedFilter(key, value) {
+			const fixed = this.fixedFilters
+			if (!fixed || !Object.hasOwn(fixed, key)) {
+				return false
+			}
+			return String(fixed[key]) === String(value)
+		},
+
 		/**
 		 * The manifest page that shows one object of a schema, for a linked
 		 * label. Null without a manifest or a matching detail page.
@@ -7092,6 +7319,32 @@ export default {
 			]
 		},
 
+		/**
+		 * Count the lists behind the manifest page tabs (`countFrom`), one list
+		 * request each. A failed count shows no number.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/index-page-tabs-notice/specs/index-page/spec.md#requirement-an-index-page-can-link-its-sibling-pages-as-tabs
+		 */
+		async loadPageTabCounts() {
+			const key = this.pageTabCountKey
+			if (key === '') {
+				this.pageTabCounts = {}
+				return
+			}
+			const ctx = typeof this.selfFetchTokenCtx === 'function' ? this.selfFetchTokenCtx() : {}
+			const counts = {}
+			await Promise.all(this.pageTabs.map(async (tab, index) => {
+				const from = tab && tab.countFrom
+				if (from && from.register && from.schema) {
+					counts[index] = await fetchListTotal(from.register, from.schema, from.filter || {}, ctx).catch(() => null)
+				}
+			}))
+			if (key === this.pageTabCountKey) {
+				this.pageTabCounts = counts
+			}
+		},
+
 		/**
 		 * Read the counts of the `filterStrip` pills in one grouped request,
 		 * narrowed by the page filter and the active quick filter. A failed
@@ -8525,6 +8778,50 @@ export default {
 			this.$emit('quick-edit-save', { id, patch })
 		},
 
+		/**
+		 * The buttons an `actions` column shows on a row: the row actions its
+		 * `widgetProps.actions` names (by id, else by label), in that order,
+		 * that are visible for the row.
+		 *
+		 * @param {object} col The column.
+		 * @param {object} row The row.
+		 * @return {Array<{key: string, label: string, variant: string, disabled: boolean}>}
+		 * @spec openspec/changes/table-actions-column/specs/index-page/spec.md#requirement-a-column-can-show-row-actions-as-buttons
+		 */
+		actionColumnItems(col, row) {
+			const wanted = Array.isArray(col.widgetProps && col.widgetProps.actions) ? col.widgetProps.actions : []
+			const available = this.rowActionsFor(row)
+			return wanted
+				.map((ref) => available.find((action) => action.id === ref) || available.find((action) => action.label === ref))
+				.filter((action) => action && isRowActionVisible(action, row))
+				.map((action, index) => ({
+					key: action.id || action.label,
+					label: this.cnTranslate(action.label),
+					variant: action.variant || (index === 0 ? 'secondary' : 'tertiary'),
+					disabled: typeof action.disabled === 'function' ? !!action.disabled(row) : action.disabled === true,
+				}))
+		},
+
+		/**
+		 * Run one `actions` column button: its handler, then the same `action`
+		 * event a row menu entry emits.
+		 *
+		 * @param {string} key The action's id, else its label.
+		 * @param {object} row The row.
+		 * @return {void}
+		 * @spec openspec/changes/table-actions-column/specs/index-page/spec.md#requirement-a-column-can-show-row-actions-as-buttons
+		 */
+		runColumnAction(key, row) {
+			const action = this.rowActionsFor(row).find((entry) => (entry.id || entry.label) === key)
+			if (!action) {
+				return
+			}
+			if (typeof action.handler === 'function') {
+				action.handler(row)
+			}
+			this.onRowAction(rowActionPayload(action, row))
+		},
+
 		/**
 		 * Take the server's version of a row after a conflict. Nothing of this
 		 * person's edit is written, and the row in the list is refreshed to
@@ -9377,6 +9674,9 @@ export default {
 		 * @return {boolean} True for the current page.
 		 */
 		isActivePageTab(tab) {
+			if (tab.to && typeof tab.to === 'object') {
+				return !!this.$route && tab.to.name !== undefined && this.$route.name === tab.to.name
+			}
 			const path = this.$route && this.$route.path
 			return !!path && String(path).replace(/\/+$/, '') === String(tab.to).replace(/\/+$/, '')
 		},

package/src/components/CnIndexPage/CnIndexPageWidgets.vue

@@ -11,7 +11,7 @@
 -->
 <template>
 	<component
-		:is="variant === 'stat-row' ? 'CnKpiGrid' : 'aside'"
+		:is="variant === 'stat-row' ? 'CnKpiGrid' : (variant === 'after-list' ? 'section' : 'aside')"
 		v-if="entries.length > 0"
 		:columns="variant === 'stat-row' ? 'auto' : undefined"
 		class="cn-index-page-widgets"
@@ -25,7 +25,7 @@
 			<CnWidgetWrapper
 				:widgetId="entry.id"
 				:title="entry.title"
-				:showTitle="variant === 'side-panel' && entry.title !== ''"
+				:showTitle="variant !== 'stat-row' && entry.title !== ''"
 				:showActions="false"
 				:showRefresh="false"
 				:headerLink="entry.headerLink"
@@ -77,11 +77,11 @@ export default {
 			default: () => [],
 		},
 
-		/** Where the widgets sit: `stat-row` above the list, `side-panel` beside it. */
+		/** Where the widgets sit: `stat-row` above the list, `side-panel` beside it, `after-list` under it. */
 		variant: {
 			type: String,
 			default: 'stat-row',
-			validator: (v) => ['stat-row', 'side-panel'].includes(v),
+			validator: (v) => ['stat-row', 'side-panel', 'after-list'].includes(v),
 		},
 	},
 
@@ -172,6 +172,15 @@ export default {
 	min-width: 0;
 }
 
+/* The cards after the list, stacked full width (PqSocial). */
+.cn-index-page-widgets--after-list {
+	display: flex;
+	flex-direction: column;
+	gap: var(--cn-board-section-gap, 16px);
+	margin-top: var(--cn-board-section-gap, 16px);
+	min-width: 0;
+}
+
 /* The side panel column (DqTeamwachtrij: 300px, 16px between cards). Its
    place beside the toolbar and the list is set by CnIndexPage
    (`cn-index-page--with-side-panel`, index-page.css). */

package/src/components/CnIndexPage/useNamedSource.js

@@ -75,7 +75,7 @@ export function useNamedSource(props, options = {}) {
 		}
 	}
 
-	const source = resolveIndexSource(props.entitySource)
+	const source = resolveIndexSource(props.entitySource, props.sourceConfig)
 
 	// An unknown source name resolves to null and was already warned about.
 	// The page then behaves as an empty index rather than throwing.

package/src/components/CnObjectSidebar/CnFilesTab.vue

@@ -21,6 +21,10 @@
 			:preferenceApp="preferenceApp"
 			:preferenceKey="preferenceKey"
 			:bulkActions="bulkActions"
+			:selectionLabel="selectionLabel"
+			:selectionLabelOne="selectionLabelOne"
+			:showClearSelection="showClearSelection"
+			:sideCards="sideCards"
 			:groupBy="groupBy"
 			:facets="facets"
 			@changed="onBrowserChanged" />
@@ -394,6 +398,19 @@ export default {
 		 * @type {Array<{id: string, label: string, icon?: string, type?: string, target?: string, props?: object}>}
 		 */
 		bulkActions: { type: Array, default: () => [] },
+		/** Forwarded to CnFilesBrowser: the bulk bar's count, a template with `{count}`. */
+		selectionLabel: { type: String, default: '' },
+		/** Forwarded to CnFilesBrowser: the bulk bar's count for one file. */
+		selectionLabelOne: { type: String, default: '' },
+		/** Forwarded to CnFilesBrowser: whether the bulk bar ends in "Clear selection". */
+		showClearSelection: { type: Boolean, default: true },
+		/**
+		 * Forwarded to CnFilesBrowser: cards beside the list about the last
+		 * selected file.
+		 *
+		 * @type {Array<{id: string, title: string, fields?: Array<object>, actions?: Array<object>}>}
+		 */
+		sideCards: { type: Array, default: () => [] },
 		/** Forwarded to CnFilesBrowser: the key of a declared column to group the files on. */
 		groupBy: { type: String, default: '' },
 		/**