@conduction/nextcloud-vue 2.127.0 → 2.128.0

package/src/css/detail-page.css

@@ -464,6 +464,48 @@
 	flex: 1 1 300px;
 }
 
+/* The band (`config.band`): a wrapping row across the page, above the body
+   and the side column. An entry takes `--cn-band-span` twelfths of the row,
+   less its share of the gaps, and wraps under 220px. It is a full line in the
+   with-side flex row, like every child but the body and the column. */
+.cn-detail-page__band {
+	display: flex;
+	flex-wrap: wrap;
+	gap: calc(5 * var(--default-grid-baseline));
+	margin-block-end: calc(5 * var(--default-grid-baseline));
+}
+
+/* The page filters: a right-aligned row above the band's widgets, a label
+   before each control. */
+.cn-detail-page__page-filters {
+	display: flex;
+	flex: 1 1 100%;
+	flex-wrap: wrap;
+	justify-content: flex-end;
+	align-items: center;
+	gap: calc(2 * var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));
+}
+
+.cn-detail-page__page-filter {
+	display: inline-flex;
+	align-items: center;
+	gap: calc(2 * var(--default-grid-baseline));
+}
+
+.cn-detail-page__page-filter-label {
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+}
+
+.cn-detail-page__band-item {
+	flex: 1 1 calc(var(--cn-band-span, 12) / 12 * 100% - calc(5 * var(--default-grid-baseline)));
+	min-width: min(220px, 100%);
+}
+
+.cn-detail-page__band-item--full {
+	flex-basis: 100%;
+}
+
 .cn-detail-page__side {
 	display: flex;
 	flex-direction: column;

package/src/css/dialog.css

@@ -314,6 +314,19 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
 	border-radius: 8px;
 }
 
+/* A field's help line sits right under the control in 13px muted ink, flush
+   with the label, as the boards draw it (PtUitnodigen "De uitnodiging met een
+   eenmalige code gaat naar dit adres.", PtAccountUitgeven). The ink carries
+   `!important` against a theme that colours every span and p (thematiq).
+   @spec openspec/changes/board-dialog-field-help/specs/board-dialog-field-help/spec.md#requirement-a-board-dialog-fields-help-line-is-13px-muted-under-the-control */
+.cn-dialog-board .dialog__content .input-field__helper-text-message,
+.cn-dialog-board .dialog__content .textarea__helper-text-message {
+	padding: 4px 0 0;
+	color: var(--color-text-maxcontrast) !important;
+	font-size: 13px;
+	line-height: 1.3;
+}
+
 .cn-dialog-board .dialog__content .input-field:has(.input-field__label) .input-field__input:not(:focus)::placeholder,
 .cn-dialog-board .dialog__content .textarea__input:not(:focus)::placeholder {
 	opacity: 1 !important;

package/src/css/look-board-detail.css

@@ -575,7 +575,7 @@
 }
 
 /* The same for a CnDetailCard (DqTaak "Notities", DqZaakEmail "E-mail",
-   DqZaakTaken "Afspraken", DqHandhaving "Historie"). */
+   DqZaakTaken "Afspraken", DqHandhaving "Historie", PtInzending "Bewijslog"). */
 .cn-look-board.cn-detail-page .cn-detail-card__header .cn-detail-card__icon {
 	display: none;
 }

package/src/css/look-board-index.css

@@ -1560,6 +1560,14 @@
 	color: var(--color-primary-element-light-text);
 }
 
+/* A row the manifest marks as asking for attention (`config.rowClass` with
+   `class: "cn-row--attention"`) is tinted warm, as the boards draw the open
+   requests on top of a list (PtToegangsverzoeken, PtUitnodigingen).
+   @spec openspec/changes/board-attention-row/specs/board-attention-row/spec.md#requirement-a-board-table-row-marked-for-attention-is-tinted-warm */
+.cn-look-board .cn-data-table tr.cn-row--attention > td:not(.cn-look-nextcloud *) {
+	background: color-mix(in srgb, var(--color-warning) 4%, var(--color-main-background));
+}
+
 /* ---- A kanban column's show-more button ---------------------------------- */
 /* The board draws "Toon 12 meer" in the soft ink, its dashed edge in the 3:1
    control colour, 6px in at the sides (DqWerkbord); the view draws the main

package/src/css/look-board.css

@@ -1659,6 +1659,103 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	align-self: flex-start;
 }
 
+/* ---- Warning and error banners (CnBannerWidget) ------------------------- */
+/* The boards draw a warning or error banner as a tinted box with a 1px edge
+   in its own tone, radius 10, 12px 14px of padding, the text in the main ink
+   (PtInzending "De ontvangstbevestiging kwam niet aan.", PtAccounts
+   "aanmeldingen wachten op goedkeuring"), not NcNoteCard's 4px edge bar. A
+   settings card's notes take the same box, success included
+   (PtBeheerinstellingen "Er is een eigen ondertekeningssleutel ingesteld").
+   @spec openspec/changes/board-banner-note-tone/specs/board-banner-note-tone/spec.md#requirement-a-board-warning-or-error-banner-is-a-tinted-box-with-an-edge-in-its-tone */
+.cn-look-board .cn-banner-widget .notecard.notecard--warning:not(.cn-look-nextcloud *),
+.cn-look-board .settings-section .notecard.notecard--warning:not(.cn-look-nextcloud *) {
+	--cn-banner-ground: color-mix(in srgb, var(--color-warning) 13%, var(--color-main-background));
+	--cn-banner-edge: color-mix(in srgb, var(--color-warning) 50%, var(--color-main-background));
+}
+
+.cn-look-board .cn-banner-widget .notecard.notecard--error:not(.cn-look-nextcloud *),
+.cn-look-board .settings-section .notecard.notecard--error:not(.cn-look-nextcloud *) {
+	--cn-banner-ground: color-mix(in srgb, var(--color-error) 7%, var(--color-main-background));
+	--cn-banner-edge: color-mix(in srgb, var(--color-error) 30%, var(--color-main-background));
+}
+
+.cn-look-board .settings-section .notecard.notecard--success:not(.cn-look-nextcloud *) {
+	--cn-banner-ground: color-mix(in srgb, var(--color-success) 9%, var(--color-main-background));
+	--cn-banner-edge: color-mix(in srgb, var(--color-success) 30%, var(--color-main-background));
+}
+
+.cn-look-board .cn-banner-widget .notecard.notecard--warning:not(.cn-look-nextcloud *),
+.cn-look-board .cn-banner-widget .notecard.notecard--error:not(.cn-look-nextcloud *),
+.cn-look-board .settings-section .notecard.notecard--warning:not(.cn-look-nextcloud *),
+.cn-look-board .settings-section .notecard.notecard--error:not(.cn-look-nextcloud *),
+.cn-look-board .settings-section .notecard.notecard--success:not(.cn-look-nextcloud *) {
+	--note-card-icon-size: 18px;
+	gap: 10px;
+	margin: 0;
+	padding: 12px 14px;
+	border: 1px solid var(--cn-banner-edge);
+	border-radius: 10px;
+	background-color: var(--cn-banner-ground) !important;
+	color: var(--color-main-text) !important;
+	font-size: 14px;
+	line-height: 1.5;
+}
+
+/* A stat-row cell that holds only a banner is the banner: no card around it. */
+.cn-look-board .cn-index-page-widgets__cell .cn-widget-wrapper:has(.cn-banner-widget):not(:has(.cn-widget-wrapper__header)):not(.cn-look-nextcloud *) {
+	border: none;
+	background: transparent;
+}
+
+.cn-look-board .cn-index-page-widgets__cell .cn-widget-wrapper:has(.cn-banner-widget):not(:has(.cn-widget-wrapper__header)):not(.cn-look-nextcloud *) > .cn-widget-wrapper__content {
+	padding: 0;
+}
+
+/* ---- Link tiles (CnTileWidget) ------------------------------------------ */
+/* The board draws a link tile as a rounded card, its icon on the left beside
+   a 15px bold title and a 13px line under it, all left-aligned (PtThemas
+   "Themacatalogus", "Portalen en hun thema's"), not a square with a centred
+   48px icon.
+   @spec openspec/changes/board-link-tile/specs/board-link-tile/spec.md#requirement-a-board-link-tile-is-a-rounded-card-with-its-icon-beside-the-title */
+.cn-look-board .cn-tile-widget:not(.cn-look-nextcloud *) {
+	border-radius: var(--cn-board-card-radius, 12px);
+}
+
+.cn-look-board .cn-tile-widget .cn-tile-widget__link:not(.cn-look-nextcloud *) {
+	flex-direction: row;
+	justify-content: flex-start;
+	gap: 14px;
+	padding: 20px 22px;
+}
+
+.cn-look-board .cn-tile-widget .cn-tile-widget__link:not(.cn-look-nextcloud *):hover {
+	transform: none;
+}
+
+.cn-look-board .cn-tile-widget .cn-tile-widget__icon:not(.cn-look-nextcloud *),
+.cn-look-board .cn-tile-widget .cn-tile-widget__icon--svg:not(.cn-look-nextcloud *) {
+	width: 24px;
+	height: 24px;
+	font-size: 24px;
+}
+
+.cn-look-board .cn-tile-widget .cn-tile-widget__text:not(.cn-look-nextcloud *) {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+
+.cn-look-board .cn-tile-widget .cn-tile-widget__title:not(.cn-look-nextcloud *),
+.cn-look-board .cn-tile-widget .cn-tile-widget__subtitle:not(.cn-look-nextcloud *) {
+	text-align: start;
+}
+
+.cn-look-board .cn-tile-widget .cn-tile-widget__title:not(.cn-look-nextcloud *) {
+	font-size: 15px;
+	line-height: 1.2;
+}
+
 /* A record list's notice is the board's note box too: 10px 14px, radius 10
    (DqZaaktypeOverzicht).
    @spec openspec/changes/board-record-list-notice-box/specs/board-record-list-notice-box/spec.md#requirement-a-board-record-list-notice-is-the-boards-note-box */

package/src/css/table.css

@@ -186,6 +186,18 @@
 	text-overflow: ellipsis;
 }
 
+/* The overline of a cell (`columns[].overline` / `overlineText`): muted and
+   smaller, on its own line above the value. Same theme hooks as the
+   secondary line. */
+.cn-data-table .cn-table-cell__overline {
+	display: block;
+	color: var(--cn-table-secondary-color, var(--color-text-maxcontrast));
+	font-size: var(--cn-table-secondary-size, 0.9em);
+	line-height: 1.35;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 /* Back to wrapping, for a column holding prose rather than a label:
    `columns: [{ key: 'description', cellClass: 'cn-cell--wrap' }]`. */
 .cn-data-table th.cn-cell--wrap,

package/src/mixins/pageFilters.js

@@ -0,0 +1,138 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+
+import { isOptionsFrom, loadOptionsFrom } from '../utils/optionsFrom.js'
+import { generatedPageFilterOptions } from '../utils/periodOptions.js'
+
+/**
+ * Page-level filters (manifest `config.pageFilters`), shared by CnDashboardPage
+ * and CnDetailPage: seeding each filter's value, reading its options and
+ * writing a choice into the page's workspace context, where a widget reads it
+ * through `@page.<key>` / `@workspace.<key>`.
+ *
+ * The host provides `pageFilters` (the declared filters), `workspaceContext`
+ * (the reactive bag it provides as `cnWorkspaceContext`) and
+ * `effectiveTranslate` (the host app's translate).
+ *
+ * @spec openspec/changes/detail-page-filters/specs/detail-page/spec.md#requirement-a-detail-page-can-draw-page-filters-that-its-widgets-read
+ */
+export const pageFilters = {
+	data() {
+		return {
+			/** Options read through a page filter's `optionsFrom`, by filter key. */
+			pageFilterFetched: {},
+			/** Whether a page filter's `optionsFrom` read is in flight, by filter key. */
+			pageFilterLoading: {},
+		}
+	},
+
+	methods: {
+		/**
+		 * Seed the reactive workspace context with each page filter's default
+		 * (its `default`, else the first option's value) so endpoint-bound
+		 * widgets have a value to interpolate on first render. Only writes keys
+		 * that aren't already present, so a value another widget set survives.
+		 *
+		 * @return {void}
+		 */
+		initPageFilters() {
+			for (const pf of this.pageFilters || []) {
+				if (!pf || !pf.key) {
+					continue
+				}
+				if (this.workspaceContext[pf.key] !== undefined) {
+					continue
+				}
+				const listed = Array.isArray(pf.options) ? pf.options : generatedPageFilterOptions(pf)
+				const fallback = (listed && listed.length && pf.clearable !== true) ? listed[0].value : undefined
+				const value = pf.default !== undefined ? pf.default : fallback
+				if (value !== undefined) {
+					this.workspaceContext[pf.key] = value
+				}
+			}
+		},
+
+		/**
+		 * The currently-selected option object for a page filter's NcSelect
+		 * (matched by `value` against the workspace context), or null.
+		 *
+		 * @param {object} pf The page-filter descriptor.
+		 * @return {object|null}
+		 */
+		selectedPageFilterOption(pf) {
+			if (!pf || !pf.key) {
+				return null
+			}
+			const current = this.workspaceContext[pf.key]
+			return this.pageFilterSegments(pf).find((o) => o.value === current) || null
+		},
+
+		/**
+		 * A page filter's options, labels through the host translate: the
+		 * segments of a segmented filter and the options of a select.
+		 *
+		 * @spec openspec/changes/dashboard-board-termijnen/specs/dashboard-page/spec.md#requirement-a-page-filter-as-a-segmented-group-on-the-description-line
+		 * @param {object} pf The page-filter descriptor.
+		 * @return {Array<{value: (string|number), label: string}>}
+		 */
+		pageFilterSegments(pf) {
+			const options = Array.isArray(pf.options) ? pf.options : (generatedPageFilterOptions(pf) || this.pageFilterFetched[pf.key] || [])
+			return options.map((o) => ({ value: o.value, label: o.label ? this.effectiveTranslate(o.label) : String(o.value) }))
+		},
+
+		/**
+		 * Read the options of every page filter with `optionsFrom`, then seed
+		 * a filter that is not clearable with its first option when it has no
+		 * value yet.
+		 *
+		 * @spec openspec/changes/page-filter-options-from/specs/dashboard-page/spec.md#requirement-a-page-filter-can-read-its-options
+		 * @return {Promise<void>}
+		 */
+		async loadPageFilterOptions() {
+			const ctx = { workspace: this.workspaceContext || {} }
+			await Promise.all((this.pageFilters || [])
+				.filter((pf) => pf && pf.key && !Array.isArray(pf.options) && pf.optionsFrom && typeof pf.optionsFrom === 'object')
+				.map(async (pf) => {
+					const from = pf.optionsFrom
+					if (!isOptionsFrom(from)) {
+						return
+					}
+					this.pageFilterLoading = { ...this.pageFilterLoading, [pf.key]: true }
+					let options
+					try {
+						options = (await loadOptionsFrom(from, ctx)).map((o) => ({ value: o.id, label: o.label }))
+					} catch {
+						options = []
+					}
+					this.pageFilterFetched = { ...this.pageFilterFetched, [pf.key]: options }
+					this.pageFilterLoading = { ...this.pageFilterLoading, [pf.key]: false }
+					if (pf.clearable !== true && pf.default === undefined && this.workspaceContext[pf.key] === undefined && options.length > 0) {
+						this.workspaceContext[pf.key] = options[0].value
+					}
+				}))
+		},
+
+		/**
+		 * Write a page filter's new selection into the reactive workspace
+		 * context so every `@page.<key>` / `@workspace.<key>` token re-resolves.
+		 *
+		 * @param {object} pf The page-filter descriptor.
+		 * @param {object|null} option The chosen NcSelect option (`{ value, label }`).
+		 * @return {void}
+		 */
+		onPageFilterChange(pf, option) {
+			if (!pf || !pf.key) {
+				return
+			}
+			const value = option && typeof option === 'object' ? option.value : (option ?? null)
+			this.workspaceContext[pf.key] = value
+			/**
+			 * @event page-filter-change Emitted when a page-level filter selection changes.
+			 * @type {{ key: string, value: (string|number|null) }}
+			 */
+			this.$emit('page-filter-change', { key: pf.key, value })
+		},
+	},
+}

package/src/schemas/app-manifest-v2.schema.json

@@ -3,7 +3,7 @@
 	"$id": "https://raw.githubusercontent.com/ConductionNL/nextcloud-vue/main/src/schemas/app-manifest-v2.schema.json",
 	"title": "Conduction App Manifest v2",
 	"description": "v2 schema for the JSON-driven page and navigation manifest consumed by @conduction/nextcloud-vue. Introduces a uniform widgets[] array on every page type with a per-slot grid coordinate system, a typed actions[] discriminator, and the required $schema field for version detection. v1 manifests continue to validate against app-manifest.schema.json (unchanged).",
-	"version": "2.144.0",
+	"version": "2.145.0",
 	"type": "object",
 	"required": ["$schema", "version"],
 	"allOf": [
@@ -1581,9 +1581,14 @@
 					"type": "string",
 					"description": "Named vue-router route to navigate to on click."
 				},
+				"query": {
+					"type": "object",
+					"additionalProperties": { "type": "string" },
+					"description": "Query for `route`, e.g. { \"action\": \"create\" } to open an index page's create flow (detail-band, 2.140.0)."
+				},
 				"href": {
 					"type": "string",
-					"description": "External URL opened in a new tab on click."
+					"description": "External URL opened in a new tab on click. On a detail page it may name the record's fields as @object.<field> tokens."
 				},
 				"payload": {
 					"description": "Free-form payload echoed back to the host inside the @primary-action-click event."
@@ -4600,6 +4605,39 @@
 							"$ref": "#/$defs/headerPill",
 							"description": "type='detail': a pill above the title saying where the record stands."
 						},
+						"band": {
+							"type": "array",
+							"description": "type='detail': a row of widgets across the whole page, above the body and the side column (detail-band). An item is the id of a widget declared on the page, a widget definition, or { widgetId, span, chrome } where span is the share of the row in twelfths (default 12) and chrome is card or bare. The row wraps; each item follows its visibleWhen.",
+							"items": {
+								"oneOf": [
+									{ "type": "string", "minLength": 1 },
+									{
+										"type": "object",
+										"additionalProperties": false,
+										"required": ["widgetId"],
+										"properties": {
+											"widgetId": { "type": "string", "minLength": 1 },
+											"span": { "type": "integer", "minimum": 1, "maximum": 12 },
+											"chrome": { "type": "string", "enum": ["card", "bare"], "description": "card (default) or bare, for a widget that draws its own card; a banner defaults to bare." }
+										}
+									},
+									{
+										"type": "object",
+										"additionalProperties": true,
+										"required": ["type"],
+										"not": { "required": ["widgetId"] },
+										"properties": {
+											"id": { "type": "string" },
+											"type": { "type": "string", "minLength": 1 },
+											"title": { "type": "string" },
+											"span": { "type": "integer", "minimum": 1, "maximum": 12 },
+											"chrome": { "type": "string", "enum": ["card", "bare"], "description": "card (default) or bare, for a widget that draws its own card; a banner defaults to bare." },
+											"content": { "type": "object", "additionalProperties": true }
+										}
+									}
+								]
+							}
+						},
 						"sideColumn": {
 							"type": "array",
 							"description": "type='detail': a column of cards beside the body, for the record's facts. An item is a widget definition, or the id of a widget declared on the page. The column stacks under the body on a narrow page.",
@@ -5290,7 +5328,7 @@
 						},
 						"pageFilters": {
 							"type": "array",
-							"description": "type='dashboard': page-level filter controls in the header. Each selection is written into the page's workspace context, so a widget reads it through a `@page.<key>` / `@workspace.<key>` token (an endpoint widget also in its `responsePath`). Maps to the CnDashboardPage `pageFilters` prop.",
+							"description": "type='dashboard' and type='detail': page-level filter controls, in a dashboard's header and in a detail page's band (detail-page-filters, 2.141.0). Each selection is written into the page's workspace context, so a widget reads it through a `@page.<key>` / `@workspace.<key>` token (an endpoint widget also in its `responsePath`). Maps to the CnDashboardPage `pageFilters` prop.",
 							"items": {
 								"type": "object",
 								"required": ["key"],

package/src/utils/actionLink.js

@@ -16,6 +16,7 @@
  */
 
 import { generateUrl, getRootUrl } from '@nextcloud/router'
+import { interpolateUrlTokens } from './interpolateUrlTokens.js'
 import { followLinkClick } from './linkNavigation.js'
 
 /** An absolute URL a manifest link may name, matching the schema's lowercase pattern. */
@@ -80,16 +81,21 @@ export function resolveManifestHref(href) {
  * function `handler` is dropped like any other, with a one-time warning.
  *
  * @spec openspec/changes/header-action-href/specs/header-action-href/spec.md#requirement-a-header-action-with-href-is-a-link-that-runs-and-emits-nothing
+ * With `tokenCtx` the `href` first resolves its `@object.<field>`,
+ * `@objectId`, `@page.<key>` and `@config.<key>` tokens, so a detail page can
+ * link to a URL built from its record (PtPortal "Website bekijken").
+ *
  * @param {object} entry The manifest header action.
+ * @param {object|null} [tokenCtx] The token context (`{ objectId?, object?, workspace?, config? }`).
  * @return {object} The entry, or a copy in link form.
  */
-export function headerActionAsLink(entry) {
+export function headerActionAsLink(entry, tokenCtx = null) {
 	if (!entry || typeof entry !== 'object') {
 		return entry
 	}
 	let resolved = entry
 	if (Array.isArray(entry.children)) {
-		const children = entry.children.map(headerActionAsLink)
+		const children = entry.children.map((child) => headerActionAsLink(child, tokenCtx))
 		if (children.some((child, index) => child !== entry.children[index])) {
 			resolved = { ...entry, children }
 		}
@@ -99,7 +105,7 @@ export function headerActionAsLink(entry) {
 	}
 	const { href: declared, ...withoutHref } = resolved
 	const { handler: _handler, ...rest } = withoutHref
-	const href = resolveManifestHref(declared)
+	const href = resolveManifestHref(tokenCtx ? interpolateUrlTokens(declared, tokenCtx) : declared)
 	if (!href) {
 		if (!warnedHrefs.has(declared)) {
 			warnedHrefs.add(declared)