@conduction/nextcloud-vue 2.146.0 → 2.148.0

package/l10n/en.json

@@ -2397,7 +2397,8 @@
     "From {date}": "From {date}",
     "Until {date}": "Until {date}",
     "More actions for {name}": "More actions for {name}",
-    "Unlink contact": "Unlink contact"
+    "Unlink contact": "Unlink contact",
+    "{term}, extendable by {extension}": "{term}, extendable by {extension}"
   },
   "plurals": {
     "{count} member": [

package/l10n/nl.json

@@ -2652,7 +2652,8 @@
     "From {date}": "Vanaf {date}",
     "Until {date}": "Tot {date}",
     "More actions for {name}": "Meer acties voor {name}",
-    "Unlink contact": "Contact ontkoppelen"
+    "Unlink contact": "Contact ontkoppelen",
+    "{term}, extendable by {extension}": "{term}, te verdagen met {extension}"
   },
   "plurals": {
     "{count} member": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.146.0",
+  "version": "2.148.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/CnDetailPage/CnDetailPage.md

@@ -438,7 +438,7 @@ Four levels of action and the case surfaces around them. All opt in. See [the re
 | `sideColumnFrom` | String | `''` | A field path, read like a `visibleWhen` field (e.g. `@context.caseType.sideCards`), whose list of ids picks the `sideColumn` entries this record shows and their order. Any other value keeps `sideColumn` as declared. |
 | `tabsFrom` | String | `''` | A field path, read like a `visibleWhen` field, whose list of tab ids picks the tabs of the page's `tabs` widgets and their order for this record: `@context.caseType.tabs` reads the list a case type keeps (DqAanbesteding: Inschrijvingen, Publicaties, Bestanden, Historie). A tab's id is its `id`, else its `widgetId`, or the string entry. An empty or missing list keeps the declared tabs; edit mode shows them all. |
 | `verbEndpoints` | Object | `null` | App routes that replace a record source's own route for a verb, by verb id (manifest `config.verbEndpoints`), such as `{ "complete": "/apps/dossiq/api/case-tasks/{id}/complete" }` for an app that checks something of its own before the engine completes the task. `{id}` is the record id. Only read with `entitySource`. |
-| `accessPurpose` | Object | `null` | Ask for a purpose before the record opens (manifest `config.accessPurpose`): `{ when, options, url, title?, description? }`. `when` is a `visibleWhen` condition on the record and its `visibilityContext` records; `options` are the purposes offered (`{ value, label }`; "Other" with a written purpose is always added); `url` is the app endpoint that records the purpose (POST `{ purpose, note }`, `{objectId}` filled in). Nothing of the record shows until the endpoint accepts, and the same record is not asked again in the same browser session. A refusal keeps the record closed. `null` asks nothing. |
+| `accessPurpose` | Object | `null` | Ask for a purpose before the record opens (manifest `config.accessPurpose`): `{ when, options, url, checkUrl?, title?, description? }`. `when` is a `visibleWhen` condition on the record and its `visibilityContext` records; `options` are the purposes offered (`{ value, label, hint? }`, a `hint` being a line under the option that says what choosing it does; "Other" with a written purpose is always added); `checkUrl` is asked first (GET), and an answer `{ required: false }` opens the record without the dialog, because the app recorded the purpose itself; `url` is the app endpoint that records the purpose (POST `{ purpose, note }`, `{objectId}` filled in). Nothing of the record shows until the endpoint accepts, and the same record is not asked again in the same browser session. A refusal keeps the record closed. `null` asks nothing. |
 | `isAdmin` | Boolean \| null | `null` | Shows `adminOnly` header actions. `null` reads it from Nextcloud. |
 
 ## A body widget's own cards in the side column

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -772,7 +772,7 @@
 		     the reader has stated why they open it and the purpose is recorded. -->
 		<div v-else-if="contentWithheld" class="cn-detail-page__access-purpose" data-testid="cn-detail-page-access-purpose">
 			<CnAccessPurposeDialog
-				v-if="accessPurposeAsking"
+				v-if="accessPurposeAsking && !accessPurposeChecking"
 				:title="accessPurposeText('title')"
 				:description="accessPurposeText('description')"
 				:options="accessPurposeOptions"
@@ -781,7 +781,7 @@
 				@submit="recordAccessPurpose"
 				@cancel="accessPurposeAsking = false" />
 			<NcEmptyContent
-				v-else-if="accessPurposeRequired"
+				v-else-if="accessPurposeRequired && !accessPurposeChecking"
 				:name="t('nextcloud-vue', 'State a purpose to open this')"
 				:description="t('nextcloud-vue', 'This record holds special categories of personal data. It opens once your purpose is recorded.')"
 				data-testid="cn-detail-page-access-purpose-refused">
@@ -3095,6 +3095,12 @@ export default {
 		 * browser session. A refusal keeps the record closed. `null` (the
 		 * default) asks nothing.
 		 *
+		 * `checkUrl` (GET, `{objectId}` filled in) is asked first: an answer
+		 * `{ required: false }` opens the record without the dialog (the app
+		 * recorded the purpose itself, as for the case's own handler); any
+		 * other answer, or a failure, shows the dialog. An option's `hint`
+		 * is a line under it saying what choosing it does besides recording it.
+		 *
 		 * @spec openspec/changes/detail-access-purpose/specs/detail-access-purpose/spec.md#requirement-a-detail-page-can-ask-for-a-purpose-before-it-opens
 		 * @type {object|null}
 		 */
@@ -3413,6 +3419,10 @@ export default {
 			accessPurposeGranted: readGrantedPurposes(),
 			/** Whether the purpose dialog is open; closing it without a purpose keeps the record closed. */
 			accessPurposeAsking: true,
+			/** Whether `accessPurpose.checkUrl` is being asked for the record in view. */
+			accessPurposeChecking: false,
+			/** The record the check last answered for, so it is asked once per record. */
+			accessPurposeCheckedKey: '',
 			/** Whether a purpose is being recorded. */
 			accessPurposeBusy: false,
 			/** Why the last purpose was refused. */
@@ -4129,7 +4139,11 @@ export default {
 			const options = Array.isArray(this.accessPurpose?.options) ? this.accessPurpose.options : []
 			return options
 				.filter((option) => option && typeof option.value === 'string' && option.value !== '')
-				.map((option) => ({ value: option.value, label: this.cnTranslate(option.label || option.value) }))
+				.map((option) => ({
+					value: option.value,
+					label: this.cnTranslate(option.label || option.value),
+					...(typeof option.hint === 'string' && option.hint !== '' ? { hint: this.cnTranslate(option.hint) } : {}),
+				}))
 		},
 
 		/**
@@ -5832,6 +5846,17 @@ export default {
 			this.accessPurposeError = ''
 		},
 
+		/** Once the page knows the record asks a purpose, the app is asked first whether it must (`checkUrl`). */
+		accessPurposeRequired: {
+			handler(required) {
+				if (required && this.contentWithheld) {
+					this.checkAccessPurpose()
+				}
+			},
+
+			immediate: true,
+		},
+
 		// Deep, like `sidebarTabs` / `sidebarProps` below: the manifest editors
 		// mutate `page.config.sidebar` IN PLACE, so the reference CnPageRenderer
 		// forwards never changes. A shallow watcher missed every such edit —
@@ -6089,6 +6114,50 @@ export default {
 		 * @param {{purpose: string, note: string}} answer The chosen purpose.
 		 * @return {Promise<void>}
 		 */
+		/**
+		 * Ask the app whether the reader must state a purpose for this record
+		 * (`accessPurpose.checkUrl`); `{ required: false }` opens it at once.
+		 *
+		 * @spec openspec/changes/detail-access-purpose/specs/detail-access-purpose/spec.md#requirement-a-detail-page-can-ask-for-a-purpose-before-it-opens
+		 * @return {Promise<void>}
+		 */
+		async checkAccessPurpose() {
+			const key = this.accessPurposeKey
+			const url = String(this.accessPurpose?.checkUrl || '').replace(/\{objectId\}/g, encodeURIComponent(String(this.objectId || '')))
+			if (url === '' || this.accessPurposeCheckedKey === key) {
+				return
+			}
+			this.accessPurposeCheckedKey = key
+			this.accessPurposeChecking = true
+			try {
+				const { default: axios } = await import('@nextcloud/axios')
+				const { data } = await axios.get(prefixUrl(url))
+				if (data && data.required === false && this.accessPurposeKey === key) {
+					this.grantAccessPurpose(key)
+				}
+			} catch {
+				// The check is a shortcut: without an answer the reader is asked as before.
+			} finally {
+				this.accessPurposeChecking = false
+			}
+		},
+
+		/**
+		 * Open the record and remember for this browser session that its
+		 * purpose is recorded.
+		 *
+		 * @param {string} key The record's session key.
+		 * @return {void}
+		 */
+		grantAccessPurpose(key) {
+			this.accessPurposeGranted = [...new Set([...this.accessPurposeGranted, key])]
+			try {
+				window.sessionStorage.setItem(ACCESS_PURPOSE_SESSION_KEY, JSON.stringify(this.accessPurposeGranted))
+			} catch {
+				// Without session storage the purpose is asked again on the next visit.
+			}
+		},
+
 		async recordAccessPurpose(answer) {
 			const url = String(this.accessPurpose?.url || '').replace(/\{objectId\}/g, encodeURIComponent(String(this.objectId || '')))
 			if (url === '') {
@@ -6100,13 +6169,7 @@ export default {
 			try {
 				const { default: axios } = await import('@nextcloud/axios')
 				await axios.post(prefixUrl(url), { purpose: answer.purpose, note: answer.note })
-				const key = this.accessPurposeKey
-				this.accessPurposeGranted = [...new Set([...this.accessPurposeGranted, key])]
-				try {
-					window.sessionStorage.setItem(ACCESS_PURPOSE_SESSION_KEY, JSON.stringify(this.accessPurposeGranted))
-				} catch {
-					// Without session storage the purpose is asked again on the next visit.
-				}
+				this.grantAccessPurpose(this.accessPurposeKey)
 			} catch (error) {
 				const data = error?.response?.data
 				this.accessPurposeError = (data && (data.message || data.error)) || t('nextcloud-vue', 'Your purpose could not be recorded, so the record stays closed.')

package/src/components/CnFactsWidget/CnFactsWidget.vue

@@ -175,6 +175,15 @@
 					</span>
 					<span class="cn-facts-widget__line">{{ block.value }}</span>
 				</div>
+				<div v-else-if="block.kind === 'pills'" class="cn-facts-widget__pills">
+					<CnStatusBadge
+						v-for="pill in block.pills"
+						:key="pill.key"
+						:label="pill.value"
+						:variant="pill.variant"
+						size="small"
+						:data-testid="`cn-fact-${pill.key}`" />
+				</div>
 				<div v-else-if="block.kind === 'pill'">
 					<CnStatusBadge
 						:label="block.value"
@@ -191,6 +200,12 @@
 			data-testid="cn-facts-notice">
 			{{ notice.text }}
 		</NcNoteCard>
+		<div
+			v-if="footnote && record"
+			class="cn-facts-widget__footnote"
+			data-testid="cn-facts-footnote">
+			{{ footnote }}
+		</div>
 		<button
 			v-if="link && link.sidebarTab && record"
 			type="button"
@@ -247,6 +262,7 @@ import { useRefLabels } from '../../composables/useRefLabels.js'
 import { dispatchAction } from '../../utils/actionsDispatcher.js'
 import { isBadgeVariant } from '../../utils/badgeVariants.js'
 import { formatBoardDate } from '../../utils/boardDate.js'
+import { formatTermDuration } from '../../utils/builtInFormatters.js'
 import { conditionalLine } from '../../utils/conditionalLine.js'
 import { parseDateValue } from '../../utils/dateVariant.js'
 import { fetchListTotal } from '../../utils/fetchFilterCounts.js'
@@ -296,6 +312,30 @@ function resolveSourceTokens(value, record) {
 }
 
 /** Kinds of entry a `fields[]` item can be. A labelled item without `as` is a row. */
+/**
+ * Two or more pills in a row become one `pills` block, drawn on one line.
+ *
+ * @param {Array<object>} blocks The blocks in order.
+ * @return {Array<object>}
+ * @spec openspec/changes/facts-fields-from-context/specs/facts-widget/spec.md#requirement-a-facts-card-can-take-its-entries-from-the-page-context
+ */
+function groupPills(blocks) {
+	const out = []
+	blocks.forEach((block) => {
+		const last = out[out.length - 1]
+		if (block.kind !== 'pill') {
+			out.push(block)
+		} else if (last && last.kind === 'pills') {
+			last.pills.push(block)
+		} else if (last && last.kind === 'pill') {
+			out[out.length - 1] = { kind: 'pills', key: `pills-${last.key}`, pills: [last, block] }
+		} else {
+			out.push(block)
+		}
+	})
+	return out
+}
+
 const KINDS = Object.freeze(['row', 'title', 'line', 'pill', 'lead', 'text', 'meter', 'progress'])
 
 /** The schemes a facts link opens, besides a path on this server. */
@@ -436,15 +476,17 @@ export default {
 		 *   `resolve: { register, schema, labelField? }` on an entry or a part turns a value that is a reference (an id, or a list of ids) into the label of the referenced object (`labelField`, else `title`, then `name`): the case type or status of a task shows its name, not its uuid. The ids are fetched once per register and schema through the object store and shared by every facts widget on the page; the entry stays empty until its label is known, and when no label can be read. A resolved value works as a pill too: `map` is applied to the resolved label, and `variantMap` / `colorMap` look the tone up by the value of `resolve.toneField` on the referenced object when that is set (a status named by its `name`, coloured by its `state`), then by the resolved label, then by the stored value.
 		 *   `route` (`{ name, params?, query? }`, `@source.<path>` in a param) on a `title` or a `row` links its value to that route; a param that does not fill leaves it plain.
 		 *   `format: 'user'` shows a Nextcloud user id as the user's display name, read once per id; the entry stays empty until the name is known.
-		 *   `template` ("{available} {unit}") fills its `{path}` placeholders from the record instead of reading `path`; it is empty when every placeholder is. `suffix` (" kg") is added to a value that is not empty, its words translated.
+		 *   `template` ("{available} {unit}") fills its `{path}` placeholders from the record instead of reading `path` (`{path:format}` formats one, "{from:year}"); it is empty when every placeholder is. `suffix` (" kg") is added to a value that is not empty, its words translated.
 		 *   `labelPath` ("@context.caseType.handlerLabel") names a value on the record or the page's `@context` records that labels the row when it holds text; `label` is the fallback.
 		 *   `emptyValue` ("No") is shown, translated, when the entry has no value, so the entry stays drawn whatever `hideEmpty` says (an override that was never set reads "No").
 		 * - `action` — an action drawn as a button under the facts; `headerAction` — one drawn in the card header (reported through the `header` event).
 		 * - `actions` — action buttons under the facts in the `headerActions` shape (`api-call`, `open-form`, `navigate`, `open-modal`, ...; `confirm`, `variant`). `@source.<field>` names a field of the record shown, and an action whose token names an empty field is not drawn. `visibleWhen` reads the record shown; `adminOnly: true` draws the action for an instance admin only (visibility, never authorisation). An api-call or a saved form refreshes the page, and the facts read their source again.
+		 * - `fieldsFrom` — `@context.<name>.<path>`, a list of entries on a record the page reads beside this one (a case type's `requestFields`); when it holds entries they are drawn instead of `fields`.
 		 * - `rowsPath` — a path to a list of `{ label, value }` the record holds, drawn as rows after `fields` (a preview the server builds).
 		 * - `headerPill` — a status pill in the card header (reported through the `header` event): `{ path?, text?, map?, variant?, variantMap?, colorMap? }`, read from the record like a `pill` entry (DqBezwaar "Advies ontvangen"); nothing shows while the value is empty.
 		 * - `notice` — `{ text, variant? }`, a note band inside the card under the facts (`info` by default; `success`, `warning` or `error`); the text is translated.
-		 *   `format` is `text` (default), `date` (board short date), `date-long` (always with the year), `longdate` (the month written out, the year only outside this year: "3 oktober"), `list` (an array joined by ", ", each item read at `itemPath` and written in `itemFormat`), `group` (a Nextcloud group by its display name), `bytes` (a size, "1.5 MB"), `number` (in the reader's language, `decimals` fraction digits when set), `months` (a number of months in words, whole years as years: 240 is "20 jaar") or `currency` (a money amount in the reader's language, "€ 1.234,50": the code in `currency`, else the record's `currencyField`, else the app's reporting currency, else EUR; `decimals` defaults to 2).
+		 * - `footnote` — a plain muted line under the facts, without a band (DqZaakBesluiten "Na het ondertekenen ..."); the text is translated.
+		 *   `format` is `text` (default), `date` (board short date), `date-long` (always with the year), `longdate` (the month written out, the year only outside this year: "3 oktober"), `duration` (an ISO period in words, "4 weken"; `extendBy` names the extension period on the record: "4 weken, te verdagen met 2"), `year` ("2026"), `list` (an array joined by ", ", each item read at `itemPath` and written in `itemFormat`), `group` (a Nextcloud group by its display name), `bytes` (a size, "1.5 MB"), `number` (in the reader's language, `decimals` fraction digits when set), `months` (a number of months in words, whole years as years: 240 is "20 jaar") or `currency` (a money amount in the reader's language, "€ 1.234,50": the code in `currency`, else the record's `currencyField`, else the app's reporting currency, else EUR; `decimals` defaults to 2).
 		 *   `map` turns a raw value into a label (translated). `parts` (on a `line`) lists paths, or `{ path, label?, format? }`, joined by `separator` (default " · "); empty parts are dropped.
 		 * - `source` — `{ register, schema, id }` or `{ url }`; omitted = the current object. `{ register, schema, filter, sort? }` without `id` reads the first object that matches `filter` in `sort` order (`{ field, dir }`): the latest count of a shift. An entry with `from: "object"` reads the current object even then (a client card that also shows the ticket's channel).
 		 * - `endpointSource` — `{ url, method?, params?, responsePath? }`, the block a stat or chart takes: the facts read an app endpoint, shared and cached like those.
@@ -503,6 +545,29 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * The entries to draw: the list `fieldsFrom` names on the page's
+		 * `@context` records when it holds entries (a case type's
+		 * `requestFields`), else `fields`.
+		 *
+		 * @return {Array<object>}
+		 * @spec openspec/changes/facts-fields-from-context/specs/facts-widget/spec.md#requirement-a-facts-card-can-take-its-entries-from-the-page-context
+		 */
+		entries() {
+			const from = this.content?.fieldsFrom
+			if (typeof from === 'string' && from.startsWith('@context.')) {
+				const rows = this.cnDetailVisibilityRows && typeof this.cnDetailVisibilityRows === 'object' && 'value' in this.cnDetailVisibilityRows
+					? this.cnDetailVisibilityRows.value
+					: this.cnDetailVisibilityRows
+				const named = readPath({ '@context': rows || {} }, from)
+				const list = Array.isArray(named) ? named.filter((entry) => entry && typeof entry === 'object' && !Array.isArray(entry)) : []
+				if (list.length > 0) {
+					return list
+				}
+			}
+			return Array.isArray(this.content?.fields) ? this.content.fields : []
+		},
+
 		/**
 		 * Whether the rows sit in two columns, label above value.
 		 *
@@ -547,7 +612,7 @@ export default {
 		 * @spec openspec/changes/facts-entry-count/specs/facts-widget/spec.md#requirement-a-facts-entry-can-count-a-related-list
 		 */
 		countJobsKey() {
-			const fields = Array.isArray(this.content?.fields) ? this.content.fields : []
+			const fields = this.entries
 			const keys = fields
 				.filter((field) => field && field.countFrom && typeof field.countFrom === 'object' && field.countFrom.register && field.countFrom.schema)
 				.map((field) => this.countKey(field.countFrom))
@@ -708,7 +773,7 @@ export default {
 		 */
 		blocks() {
 			const sourceRecord = this.record
-			const fields = Array.isArray(this.content?.fields) ? this.content.fields : []
+			const fields = this.entries
 			// A source that finds nothing still leaves the entries that read the
 			// page's own object (`from: "object"`).
 			const ownEntries = Boolean(this.objectData) && fields.some((field) => field && field.from === 'object')
@@ -787,7 +852,7 @@ export default {
 					out.push({ kind: 'rows', key: 'rows-answered', rows: [row] })
 				}
 			})
-			return out
+			return groupPills(out)
 		},
 
 		/**
@@ -879,6 +944,12 @@ export default {
 			return { text, type: ['success', 'warning', 'error'].includes(notice.variant) ? notice.variant : 'info' }
 		},
 
+		/** @return {string} The translated footnote, or '' when none is set. */
+		footnote() {
+			const footnote = this.content?.footnote
+			return typeof footnote === 'string' && footnote.trim() !== '' ? this.tr(footnote) : ''
+		},
+
 		/** @return {string} The reveal button's text. */
 		showLabel() {
 			return t('nextcloud-vue', 'Show')
@@ -1116,7 +1187,7 @@ export default {
 		 * @spec openspec/changes/facts-entry-count/specs/facts-widget/spec.md#requirement-a-facts-entry-can-count-a-related-list
 		 */
 		async loadCounts() {
-			const fields = Array.isArray(this.content?.fields) ? this.content.fields : []
+			const fields = this.entries
 			const seen = new Set()
 			for (const field of fields) {
 				const countFrom = field && field.countFrom
@@ -1193,8 +1264,8 @@ export default {
 		 */
 		templateValue(record, template) {
 			let filled = false
-			const text = this.tr(template).replace(/\{([\w.@]+)\}/g, (match, path) => {
-				const value = this.format(readPath(record, path), {}, record)
+			const text = this.tr(template).replace(/\{([\w.@]+)(?::([\w-]+))?\}/g, (match, path, format) => {
+				const value = this.format(readPath(record, path), format ? { format } : {}, record)
 				filled = filled || value !== ''
 				return value
 			})
@@ -1586,7 +1657,7 @@ export default {
 		 * @return {Array<{spec: object, raw: unknown}>}
 		 */
 		refSpecs(record) {
-			const fields = Array.isArray(this.content?.fields) ? this.content.fields : []
+			const fields = this.entries
 			const specs = []
 			const visit = (spec) => {
 				if (!spec || typeof spec !== 'object') {
@@ -1819,6 +1890,14 @@ export default {
 					.filter((item) => item !== '')
 				return items.join(', ')
 			}
+			if (format === 'year') {
+				const date = parseDateValue(raw)
+				return date === null ? '' : String(date.getFullYear())
+			}
+			// A term in words, with the extension at `extendBy` on the record: "4 weken, te verdagen met 2".
+			if (format === 'duration') {
+				return formatTermDuration(raw, typeof spec.extendBy === 'string' && record ? readPath(record, spec.extendBy) : null)
+			}
 			// The month written out, the year only outside this year: "3 oktober".
 			if (format === 'longdate') {
 				return formatLongDate(raw)
@@ -1960,6 +2039,12 @@ export default {
 	min-width: 0;
 }
 
+.cn-facts-widget__pills {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
 /* `padding: 0`: Nextcloud's core stylesheet pads every `dl` 12px at the top
    and bottom, which put a side card's facts 24px under its title, against
    the board's 12 (DqZaak "Behandeling", DqZaakDocumenten). */
@@ -2216,6 +2301,13 @@ export default {
 	margin: 4px 0 0;
 }
 
+/* A div, not a p: a theme sets every paragraph's size with !important. */
+.cn-facts-widget__footnote {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+	line-height: 1.2;
+}
+
 .cn-facts-widget__link {
 	font-size: 14px;
 	font-weight: 600;

package/src/components/CnObjectDataWidget/CnObjectDataWidget.md

@@ -121,7 +121,7 @@ export default {
 | `icon` | Object\|Function | `null` | MDI icon component shown in the card header |
 | `objectType` | String | `''` | Registered object type slug used by `objectStore.saveObject()` |
 | `store` | Object | `null` | Explicit Pinia objectStore instance; auto-detected via Pinia when omitted |
-| `overrides` | Object | `{}` | Per-property config: `{ key: { order, gridColumn, gridRow, hidden, editable, label, widget, visibleWhen } }`. `visibleWhen` shows the field only when the shared visibility predicate holds for this object, in its local mode: `{ field, op, value }` (ops `eq`, `neq`, `in`, `empty`, ...), or `all` / `any` of those. It reads unsaved changes too. A rule that needs a request (`endpoint`, `source`) is ignored. Read grid only: the Edit form still offers the field. |
+| `overrides` | Object | `{}` | Per-property config: `{ key: { order, gridColumn, gridRow, hidden, editable, label, widget, visibleWhen } }`. `visibleWhen` shows the field only when the shared visibility predicate holds for this object, in its local mode: `{ field, op, value }` (ops `eq`, `neq`, `in`, `empty`, ...), or `all` / `any` of those. It reads unsaved changes too. A rule that needs a request (`endpoint`, `source`) is ignored. Read grid only: the Edit form still offers the field. `format: 'duration'` reads an ISO period in words (`P28D` "4 weken"), and `extendBy` names the object's extension period, read as "4 weken, te verdagen met 2". |
 | `columns` | Number | `3` | Number of CSS grid columns in the widget |
 | `collapsedFields` (`collapsed-fields`) | Number | `null` | Number of fields shown while collapsed, with a "Show all N fields" button for the rest. `null` fits the cell: the whole rows that fit stay, and the button only appears when the cell overflows |
 | `hideEmpty` | Boolean | `false` | Hide fields with no value instead of rendering an em dash. For discriminated supertypes (one `ticket` schema holding request/complaint/contactmoment), so the grid is type-aware without the schema enumerating which fields belong to which variant. Read grid only — the field being edited, a field with unsaved changes, and the Edit form stay visible; `false`/`0` are values and are never hidden. |

package/src/components/CnObjectDataWidget/CnObjectDataWidget.vue

@@ -438,10 +438,12 @@ import CnGroupNameCell from '../CnCellRenderer/CnGroupNameCell.vue'
 import CnFormDialog from '../CnFormDialog/CnFormDialog.vue'
 import { normalizeLook } from '../../composables/useLook.js'
 import { useObjectStore } from '../../store/index.js'
+import { formatTermDuration } from '../../utils/builtInFormatters.js'
 import { foldDottedFields, isDottedKey, spreadDottedFields } from '../../utils/dottedFields.js'
 import { groupDisplayName, loadGroupDisplayName, searchNextcloudGroups } from '../../utils/groupAutocomplete.js'
 import { humaniseKey } from '../../utils/humaniseKey.js'
 import { PANEL_ACTION_SINK } from '../../utils/panelActions.js'
+import { readPath } from '../../utils/readPath.js'
 import { resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 import { saveEdited } from '../../utils/saveEdited.js'
 import { fieldsFromSchema, formatValue } from '../../utils/schema.js'
@@ -1103,6 +1105,12 @@ export default {
 				// label, beside a list that already read "Ingediend".
 				const enumLabel = this.enumDisplayLabel(field, raw)
 				const empty = this.emptyValueFor(field, raw)
+				if (empty === null && field.format === 'duration' && raw !== null && raw !== undefined && raw !== '') {
+					// A term in words, with the extension at `extendBy` when the object holds one.
+					const extension = typeof field.extendBy === 'string' ? readPath(this.objectData || {}, field.extendBy) : null
+					values[field.key] = formatTermDuration(raw, extension)
+					continue
+				}
 				values[field.key] = empty !== null ? empty : (enumLabel !== null ? enumLabel : formatValue(raw, prop || {}))
 			}
 			return values

package/src/components/CnObjectPartiesWidget/CnObjectPartiesWidget.vue

@@ -248,6 +248,7 @@ import {
 	indicatorVerdict,
 	kindCode,
 	newPartyRecord,
+	partyKindAccepted,
 	representedByMap,
 	roleLabel,
 	rolesInOrder,
@@ -892,7 +893,7 @@ export default {
 			if (!party?.partyKind || !this.kinds || (enforce && this.kinds.source !== enforce)) {
 				return false
 			}
-			return !this.kinds.kinds.some((kind) => kindCode(kind) === party.partyKind)
+			return !partyKindAccepted(party.partyKind, this.kinds.kinds, this.listing?.kinds)
 		},
 
 		/**

package/src/components/CnStepper/CnStepper.vue

@@ -154,6 +154,14 @@ export default {
 	font: inherit;
 }
 
+/* Nextcloud's server.css gives every plain button a 3px margin and the
+   clickable-area height (`button:not(.button-vue, …):not(…)`, 0,2,1), which
+   made a done step 40px tall around its 28px circle. Two classes outrank it. */
+.cn-stepper button.cn-stepper__step {
+	margin: 0;
+	min-height: 0;
+}
+
 button.cn-stepper__step {
 	cursor: pointer;
 }
@@ -230,14 +238,14 @@ button.cn-stepper__step {
 }
 
 /* The board look: one row, 28px circles, the label beside the circle. */
-/* The board leaves 20px between the stepper and the step's body (DqInstellen). */
+/* The board leaves 16px between the stepper and the step's body (DqInstellen). */
 .cn-stepper--board {
 	flex-wrap: wrap;
 	align-items: center;
 	justify-content: flex-start;
 	gap: 8px;
 	padding: 0;
-	margin: 0 0 20px;
+	margin: 0 0 16px;
 }
 
 .cn-stepper--board .cn-stepper__item {

package/src/css/dialog.css

@@ -265,8 +265,11 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
 	margin-bottom: 4px;
 }
 
-/* Footer: 16px 24px, hairline on top, right aligned, 40px buttons, 10px gap. */
-.cn-dialog-board .dialog__actions {
+/* Footer: 16px 24px, hairline on top, right aligned, 40px buttons, 10px gap,
+   flush with the dialog's bottom. NcDialog's own footer rule (6px 0 12px
+   margin, 12px end padding) ties a two-class selector and wins when its
+   stylesheet loads later, so `.dialog` is added to outrank it. */
+.cn-dialog-board .dialog .dialog__actions {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;

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

@@ -2363,6 +2363,20 @@
 	padding-inline-start: 12px;
 }
 
+/* The boards draw the leading icon inside the title cell, so the title's
+   heading starts over the icon (DqOrganisaties "Naam" at 76, the icon's x),
+   as an avatar shares its column's heading (DqContacten). The blank icon
+   heading stays for the column count; the title heading reaches back over it.
+   @spec openspec/changes/board-head-over-row-icon/specs/data-table/spec.md#requirement-a-board-title-heading-starts-over-the-row-icon */
+.cn-look-board .cn-table-container--board .cn-data-table th.cn-table-col--icon + th:not(.cn-look-nextcloud *) {
+	padding-inline-start: 0;
+	overflow: visible;
+}
+
+.cn-look-board .cn-table-container--board .cn-data-table th.cn-table-col--icon + th:not(.cn-look-nextcloud *) > :first-child {
+	margin-inline-start: -32px;
+}
+
 /* ---- The table beside the open side panel (DqZakenSorteren, DqFilterBeheren) */
 /* The table takes its column's width: its configured column widths make way
    for the content, titles and names wrap (a long word hyphenated, an

package/src/css/look-board.css

@@ -3220,6 +3220,8 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
    Nextcloud's input height stretched it to 13x36. Its weight outranks the
    18px other native radios take.
    @spec openspec/changes/board-setup-choice-radio/specs/board-setup-choice-radio/spec.md#requirement-a-setup-steps-choice-radio-is-20px */
+/* The board's native radio keeps the browser's 3px end margin before the
+   12px gap, so the option title starts 56px in (DqInstellen), not 53. */
 .cn-look-board .cn-setup-step .cn-choice-cards input.cn-choice-cards__row-input:not(.cn-look-nextcloud *) {
 	box-sizing: border-box;
 	width: 20px;
@@ -3227,6 +3229,7 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	height: 20px;
 	min-height: 20px;
 	accent-color: var(--color-primary-element);
+	margin-inline-end: 3px;
 }
 
 /* The chosen setup choice is edged by a real 2px border, as DqInstellen

package/src/dialogs/CnAccessPurposeDialog.vue

@@ -17,17 +17,23 @@
 			<legend class="cn-access-purpose__legend">
 				{{ t('nextcloud-vue', 'Purpose') }}
 			</legend>
-			<NcCheckboxRadioSwitch
-				v-for="option in choices"
-				:key="option.value"
-				v-model="purpose"
-				type="radio"
-				name="cn-access-purpose"
-				:value="option.value"
-				:disabled="loading"
-				:data-testid="`cn-access-purpose-option-${option.value}`">
-				{{ option.label }}
-			</NcCheckboxRadioSwitch>
+			<template v-for="option in choices" :key="option.value">
+				<NcCheckboxRadioSwitch
+					v-model="purpose"
+					type="radio"
+					name="cn-access-purpose"
+					:value="option.value"
+					:disabled="loading"
+					:data-testid="`cn-access-purpose-option-${option.value}`">
+					{{ option.label }}
+				</NcCheckboxRadioSwitch>
+				<!-- What choosing this purpose does besides recording it ("you become this case's handler"). -->
+				<p v-if="option.hint"
+					class="cn-access-purpose__hint"
+					:data-testid="`cn-access-purpose-hint-${option.value}`">
+					{{ option.hint }}
+				</p>
+			</template>
 		</fieldset>
 		<NcTextArea
 			v-if="purpose === OTHER"
@@ -94,8 +100,10 @@ export default {
 
 		/**
 		 * The purposes offered, already translated. "Other" is added at the end.
+		 * A `hint` is a line under the option that says what choosing it does
+		 * besides recording it.
 		 *
-		 * @type {Array<{value: string, label: string}>}
+		 * @type {Array<{value: string, label: string, hint?: string}>}
 		 */
 		options: {
 			type: Array,
@@ -176,6 +184,13 @@ export default {
 	border: 0;
 }
 
+.cn-access-purpose__hint {
+	margin: 0 0 6px;
+	padding-inline-start: 36px;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
 .cn-access-purpose__legend {
 	margin-bottom: 4px;
 	font-weight: 600;

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.156.0",
+	"version": "2.157.0",
 	"type": "object",
 	"required": ["$schema", "version"],
 	"allOf": [
@@ -5811,11 +5811,13 @@
 										"additionalProperties": false,
 										"properties": {
 											"value": { "type": "string", "minLength": 1 },
-											"label": { "type": "string", "minLength": 1, "description": "i18n key." }
+											"label": { "type": "string", "minLength": 1, "description": "i18n key." },
+											"hint": { "type": "string", "description": "i18n key of a line under the option: what choosing it does besides recording it." }
 										}
 									}
 								},
 								"url": { "type": "string", "minLength": 1, "description": "App endpoint that records the purpose; {objectId} is filled in." },
+								"checkUrl": { "type": "string", "minLength": 1, "description": "App endpoint asked first (GET, {objectId} filled in): an answer { required: false } opens the record without the dialog, because the app recorded the purpose itself." },
 								"title": { "type": "string", "description": "i18n key of the dialog's title." },
 								"description": { "type": "string", "description": "i18n key of the sentence under the title." }
 							}