@conduction/nextcloud-vue 2.147.0 → 2.149.0

package/src/components/CnFactsWidget/CnFactsWidget.vue

@@ -227,6 +227,9 @@
 			<CnIcon v-if="link.icon" :name="link.icon" :size="18" />
 			{{ link.label }}
 		</component>
+		<p v-if="link && link.note && record" class="cn-facts-widget__link-note" data-testid="cn-facts-link-note">
+			{{ link.note }}
+		</p>
 		<button
 			v-if="action && record"
 			type="button"
@@ -262,6 +265,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'
@@ -485,7 +489,7 @@ export default {
 		 * - `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.
 		 * - `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"), `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).
+		 *   `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.
@@ -866,18 +870,19 @@ export default {
 			if (!link || typeof link !== 'object' || !link.label) {
 				return null
 			}
+			const linkView = this.linkWords(link)
 			if (typeof link.sidebarTab === 'string' && link.sidebarTab !== '') {
 				return this.objectSidebarState
-					? { label: this.tr(link.label), sidebarTab: link.sidebarTab, icon: typeof link.icon === 'string' ? link.icon : '' }
+					? { ...linkView, sidebarTab: link.sidebarTab, icon: typeof link.icon === 'string' ? link.icon : '' }
 					: null
 			}
 			if (link.route) {
 				const to = this.resolveRoute(link.route, this.record)
-				return to ? { label: this.tr(link.label), to } : null
+				return to ? { ...linkView, to } : null
 			}
 			if (typeof link.href === 'string' && link.href !== '') {
 				const href = this.linkHref(link, this.record)
-				return href ? { label: this.tr(link.label), href, target: link.target === '_blank' ? '_blank' : '', icon: typeof link.icon === 'string' ? link.icon : '' } : null
+				return href ? { ...linkView, href, target: link.target === '_blank' ? '_blank' : '', icon: typeof link.icon === 'string' ? link.icon : '' } : null
 			}
 			return null
 		},
@@ -1016,6 +1021,23 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * A link's label and the muted note under it, their `{path}` and
+		 * `{path:format}` placeholders filled from the record ("{page:last-segment}").
+		 *
+		 * @param {object} link The configured link.
+		 * @return {{label: string, note: string}}
+		 * @spec openspec/changes/facts-link-label-from-record/specs/facts-widget/spec.md#requirement-a-facts-link-can-take-its-words-from-the-record
+		 */
+		linkWords(link) {
+			const fill = (text) => (text.includes('{') && this.record ? this.templateValue(this.record, text) : this.tr(text))
+			const label = fill(String(link.label))
+			return {
+				label: label || this.tr(String(link.label)),
+				note: typeof link.note === 'string' && link.note !== '' ? fill(link.note) : '',
+			}
+		},
+
 		/**
 		 * Open the page's object sidebar on one of its tabs.
 		 *
@@ -1893,7 +1915,16 @@ export default {
 				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".
+			// One segment of a path ("Team/Page"): its first or its last.
+			if (format === 'first-segment' || format === 'last-segment') {
+				const segments = String(raw).split('/').map((part) => part.trim()).filter((part) => part !== '')
+				return (format === 'first-segment' ? segments[0] : segments[segments.length - 1]) || ''
+			}
 			if (format === 'longdate') {
 				return formatLongDate(raw)
 			}
@@ -2310,6 +2341,12 @@ export default {
 	text-decoration: underline;
 }
 
+.cn-facts-widget__link-note {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
 .cn-facts-widget__link--button {
 	display: inline-flex;
 	align-items: center;

package/src/components/CnFieldListWidget/CnFieldListWidget.vue

@@ -165,13 +165,28 @@
 				</NcButton>
 			</div>
 		</div>
-		<ul v-else class="cn-field-list-widget__rows">
+		<ul v-else class="cn-field-list-widget__rows" :class="{ 'cn-field-list-widget__rows--options': isOptions }">
 			<li
 				v-for="row in rows"
 				:key="row.key"
 				class="cn-field-list-widget__row"
-				:data-testid="`cn-field-list-row-${row.key}`">
+				:draggable="canReorder ? 'true' : undefined"
+				:data-testid="`cn-field-list-row-${row.key}`"
+				@dragstart="dragFrom = row.index"
+				@dragover.prevent
+				@drop.prevent="dropOn(row.index)">
 				<div class="cn-field-list-widget__line">
+					<!-- `variant: "options"`: a grip that moves the option, by drag or with the arrow keys. -->
+					<button
+						v-if="canReorder"
+						type="button"
+						class="cn-field-list-widget__grip"
+						:aria-label="moveLabel(row)"
+						:data-testid="`cn-field-list-grip-${row.key}`"
+						@keydown.up.prevent="move(row.index, -1)"
+						@keydown.down.prevent="move(row.index, 1)">
+						<DragVertical :size="16" />
+					</button>
 					<span v-if="row.initials" class="cn-field-list-widget__avatar" aria-hidden="true">{{ row.initials }}</span>
 					<span class="cn-field-list-widget__main">
 						<a
@@ -187,6 +202,7 @@
 						:label="row.pill.label"
 						:variant="row.pill.variant"
 						size="small" />
+					<span v-if="row.code" class="cn-field-list-widget__code" :data-testid="`cn-field-list-code-${row.key}`">{{ row.code }}</span>
 					<span v-if="row.aside" class="cn-field-list-widget__aside">{{ row.aside }}</span>
 					<NcButton
 						v-for="action in row.actions"
@@ -307,7 +323,9 @@
 </template>
 
 <script>
+import { translate as t } from '@nextcloud/l10n'
 import { NcActionButton, NcActions, NcButton, NcCheckboxRadioSwitch, NcNoteCard, NcSelect, NcTextField } from '@nextcloud/vue'
+import DragVertical from 'vue-material-design-icons/DragVertical.vue'
 import CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'
 import { isBadgeVariant } from '../../utils/badgeVariants.js'
 import { formatBoardDate } from '../../utils/boardDate.js'
@@ -368,7 +386,7 @@ function rowHref(entry, spec) {
 export default {
 	name: 'CnFieldListWidget',
 
-	components: { CnStatusBadge, NcActionButton, NcActions, NcButton, NcCheckboxRadioSwitch, NcNoteCard, NcSelect, NcTextField },
+	components: { CnStatusBadge, DragVertical, NcActionButton, NcActions, NcButton, NcCheckboxRadioSwitch, NcNoteCard, NcSelect, NcTextField },
 
 	inject: {
 		cnTranslate: { default: () => (key) => key },
@@ -388,6 +406,7 @@ export default {
 		 * - `rowActions` — `[{ id, label, ariaLabel?, when?, placement?: 'band'|'inline', request: { method?, url, payload? } }]`, or `{ id, label, dialog, props }` to open a modal registered in the app registry with filled props (shown in `readOnly` too, since it writes nothing, and only when every token in `props` fills); tokens `@object.<field>`, `@objectId`, `@row.<field>`, `@index`. In the table variant `placement: 'inline'` draws the action as a button in the row instead of in the "..." menu; `ariaLabel` is a template filled from the row.
 		 * - `when` (row actions, `detail`) — `{ field: value }`, every field equal; or per field `{ eq?, neq?, set? }`, where a value `@row.<field>` (or `@<field>`) is another field of the same row: `{ deliveredRef: { set: true, neq: '@originalRef' } }`.
 		 * - `rowSource` — `{ url, path?, key }`: live per-row state merged by key.
+		 * - `variant: 'options'` — the rows as framed options (a field's choice list): a grip that moves the option by drag or with the arrow keys and saves the order, and a code chip from `code` (`{ path }` on an object option, or `{ field }`, a map on the record from a plain option to its code).
 		 * - `variant: 'table'` + `columns` — `[{ header, path, map?, format?, strong?, pill?, variantMap?, labelsFrom? }]` (a list value reads as its items joined; `labelsFrom` names an add field whose option labels word the values): rows as a table; a per-row "..." menu holds the row actions and remove; `detail` lines become a warning band under the table, with the row actions that have `placement: 'band'`.
 		 * - `add.trigger: 'button'`, `add.placement: 'header' | 'title' | 'footer'` — the add form opens from a button; `title` reports the button for the card's title row on the `header` event.
 		 * - `readOnly`, `hint`, `emptyText`.
@@ -436,6 +455,8 @@ export default {
 		return {
 			/** The list as last saved by this widget; null = read it off objectData. */
 			saved: null,
+			/** The place of the option being dragged, -1 while none is. */
+			dragFrom: -1,
 			/** Live per-row state from `rowSource`, by key. */
 			live: {},
 			draft: {},
@@ -500,10 +521,21 @@ export default {
 					copies: spec.detail && this.matches(entry, spec.detail.when) ? this.copiesOf(entry, spec.detail.copy) : [],
 					actions: this.actionsFor(entry, index),
 					cells: this.isTable ? this.cellsOf(entry) : [],
+					code: this.isOptions ? this.codeOf(item, entry) : '',
 				}
 			})
 		},
 
+		/** Whether the rows are drawn as framed options (`variant: 'options'`): a grip, the name, a code chip. */
+		isOptions() {
+			return this.content.variant === 'options'
+		},
+
+		/** Whether the options can be moved: the options look on a list that saves. */
+		canReorder() {
+			return this.isOptions && !this.readOnly && Boolean(this.content.field)
+		},
+
 		/** Whether the list is read-only. */
 		readOnly() {
 			return this.content.readOnly === true
@@ -1300,6 +1332,73 @@ export default {
 		 * @param {object} row The row.
 		 * @return {Promise<void>}
 		 */
+		/**
+		 * An option's code chip: `content.code.path` on an object option, or the
+		 * value's entry in the record's map at `content.code.field` for a plain
+		 * one ("Woning" -> "WON"); '' for none.
+		 *
+		 * @param {unknown} item The stored option.
+		 * @param {object} entry The option as a row reads it.
+		 * @return {string}
+		 */
+		codeOf(item, entry) {
+			const spec = this.content.code
+			if (!spec || typeof spec !== 'object') {
+				return ''
+			}
+			if (item && typeof item === 'object' && typeof spec.path === 'string') {
+				return String(readPath(item, spec.path) ?? '')
+			}
+			const map = typeof spec.field === 'string' ? readPath(this.objectData || {}, spec.field) : null
+			const code = map && typeof map === 'object' ? map[String(entry.value ?? item)] : ''
+			return typeof code === 'string' ? code : ''
+		},
+
+		/**
+		 * The grip's accessible name.
+		 *
+		 * @param {object} row The row.
+		 * @return {string}
+		 */
+		moveLabel(row) {
+			return t('nextcloud-vue', 'Move {item}, use the arrow keys', { item: row.title })
+		},
+
+		/**
+		 * Drop the dragged option on this one's place.
+		 *
+		 * @param {number} to The place it lands on.
+		 * @return {Promise<void>}
+		 */
+		async dropOn(to) {
+			const from = this.dragFrom
+			this.dragFrom = -1
+			if (from < 0 || from === to) {
+				return
+			}
+			await this.move(from, to - from)
+		},
+
+		/**
+		 * Move an option by a number of places and save the list.
+		 *
+		 * @param {number} from Its place.
+		 * @param {number} by How far, negative is up.
+		 * @return {Promise<void>}
+		 */
+		async move(from, by) {
+			const to = from + by
+			if (!this.canReorder || to < 0 || to >= this.items.length) {
+				return
+			}
+			await this.save((stored) => {
+				const list = [...stored]
+				const [moved] = list.splice(from, 1)
+				list.splice(to, 0, moved)
+				return list
+			}, this.keyOf(this.items[from], from))
+		},
+
 		async remove(row) {
 			await this.save((stored) => stored.filter((item, index) => this.keyOf(item, index) !== row.key), row.key)
 		},
@@ -1409,6 +1508,35 @@ export default {
 	padding-top: 0;
 }
 
+/* `variant: "options"` (DqZaaktypeVelden Keuzelijst): each option a framed
+   row, 6px apart, with a grip before its name and its code in a chip. */
+.cn-field-list-widget__rows--options {
+	gap: 6px;
+}
+
+.cn-field-list-widget__rows--options .cn-field-list-widget__row,
+.cn-field-list-widget__rows--options .cn-field-list-widget__row:first-child {
+	padding: 6px 12px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-element, 8px);
+}
+
+.cn-field-list-widget__grip {
+	flex: none;
+	display: inline-flex;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: var(--color-text-maxcontrast);
+	cursor: grab;
+}
+
+.cn-field-list-widget__code {
+	flex: none;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
 .cn-field-list-widget__line {
 	display: flex;
 	align-items: center;

package/src/components/CnFlowRunsWidget/CnFlowRunsWidget.vue

@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: EUPL-1.2
 -->
 <template>
-	<div class="cn-flow-runs-widget">
+	<div class="cn-flow-runs-widget" :class="{ 'cn-flow-runs-widget--pills': pills }">
 		<!-- One quiet line on failure, never a leaked axios status string
 		     (ADR-062). The real error goes to the console. -->
 		<p v-if="error" class="cn-flow-runs-widget__error">
@@ -26,7 +26,7 @@
 			{{ emptyLabel }}
 		</p>
 		<template v-else>
-			<p v-if="rows.length === 0" class="cn-flow-runs-widget__empty">
+			<p v-if="rows.length === 0 && content.quietLineWithHistory !== false" class="cn-flow-runs-widget__empty">
 				{{ emptyLabel }}
 			</p>
 			<ul v-else class="cn-flow-runs-widget__list">
@@ -42,6 +42,7 @@
 						:href="runHref(run) || undefined"
 						@click="onRowClick($event, run)">
 						<span
+							v-if="!pills"
 							class="cn-flow-runs-widget__dot"
 							:class="`cn-flow-runs-widget__dot--${run.status}`"
 							:title="statusLabel(run.status)" />
@@ -49,6 +50,12 @@
 							<span class="cn-flow-runs-widget__name">{{ run.flowName }}</span>
 							<span class="cn-flow-runs-widget__meta">{{ metaLine(run) }}</span>
 						</span>
+						<CnStatusBadge
+							v-if="pills"
+							class="cn-flow-runs-widget__pill"
+							:label="statusLabel(run.status)"
+							:variant="statusVariant(run.status)"
+							size="small" />
 						<span class="cn-flow-runs-widget__age">{{ ageLabel(run) }}</span>
 					</component>
 				</li>
@@ -62,7 +69,7 @@
 			     labelled section with a hollow dot and a muted name, so live
 			     and finished never rely on colour alone to tell apart. -->
 			<template v-if="showHistory">
-				<p class="cn-flow-runs-widget__history-title">
+				<p v-if="content.historyTitle !== false" class="cn-flow-runs-widget__history-title">
 					{{ tr('Earlier runs') }}
 				</p>
 				<p v-if="completedError" class="cn-flow-runs-widget__error">
@@ -81,6 +88,7 @@
 							:href="runHref(run) || undefined"
 							@click="onRowClick($event, run)">
 							<span
+								v-if="!pills"
 								class="cn-flow-runs-widget__dot cn-flow-runs-widget__dot--terminal"
 								:class="`cn-flow-runs-widget__dot--${run.status}`"
 								:title="statusLabel(run.status)" />
@@ -88,6 +96,12 @@
 								<span class="cn-flow-runs-widget__name">{{ run.flowName }}</span>
 								<span class="cn-flow-runs-widget__meta">{{ metaLine(run) }}</span>
 							</span>
+							<CnStatusBadge
+								v-if="pills"
+								class="cn-flow-runs-widget__pill"
+								:label="statusLabel(run.status)"
+								:variant="statusVariant(run.status)"
+								size="small" />
 							<span class="cn-flow-runs-widget__age">{{ ageLabel(run) }}</span>
 						</component>
 					</li>
@@ -106,9 +120,11 @@ import { NcLoadingIcon } from '@nextcloud/vue'
 import { computed, inject, ref } from 'vue'
 import { useEndpointSource } from '../../composables/useEndpointSource.js'
 import { dispatchAction } from '../../utils/actionsDispatcher.js'
+import { formatBoardDate } from '../../utils/boardDate.js'
 import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js'
 import { followLinkClick, resolveHref } from '../../utils/linkNavigation.js'
 import { resolveDeepTokens, resolveFilterValue } from '../../utils/resolveFilterTokens.js'
+import { CnStatusBadge } from '../CnStatusBadge/index.js'
 
 /**
  * The OpenRegister endpoint that lists the caller's live flow runs.
@@ -197,6 +213,7 @@ export default {
 	name: 'CnFlowRunsWidget',
 
 	components: {
+		CnStatusBadge,
 		NcLoadingIcon,
 	},
 
@@ -231,6 +248,17 @@ export default {
 		 *   subject's finished runs render below it. Absent = today's org-wide
 		 *   widget, unchanged.
 		 * - `emptyText` — override for the "nothing running" line.
+		 * - `quietLineWithHistory` — `false` leaves out the "nothing running"
+		 *   line while the subject has finished runs to list.
+		 * - `historyTitle` — `false` leaves out the "Earlier runs" heading.
+		 * - `statusPill` — `true` shows the status as a pill on each row
+		 *   (no dot, and the meta line leaves the status out), rows ruled.
+		 * - `statusLabels` — words per status (`{ completed: 'Succeeded' }`),
+		 *   translated, over the built-in ones.
+		 * - `triggerLabels` — the meta line per trigger in words
+		 *   (`{ 'object.created': 'Started when the case was created' }`), translated.
+		 * - `age` — `'datetime'` shows when the run started ("3 okt, 14:32")
+		 *   instead of how long ago ("13d").
 		 * - `headerAction` — an action descriptor drawn in the card header
 		 *   (`{ label, icon?, ...action }`, "Flow uitvoeren"), reported through
 		 *   the `header` event and dispatched with the page's dispatcher; its
@@ -421,6 +449,11 @@ export default {
 			return this.tr('+{count} more').replace('{count}', String(this.hiddenCount))
 		},
 
+		/** Whether each row shows its status as a pill (`content.statusPill`). */
+		pills() {
+			return this.content.statusPill === true
+		},
+
 		/** The nothing-running line. */
 		emptyLabel() {
 			const override = this.content.emptyText
@@ -678,10 +711,29 @@ export default {
 		 * @return {string} The label.
 		 */
 		statusLabel(status) {
-			const key = STATUS_LABELS[status]
+			const own = this.content.statusLabels && this.content.statusLabels[status]
+			const key = (typeof own === 'string' && own !== '') ? own : STATUS_LABELS[status]
 			return key ? this.tr(key) : String(status || '')
 		},
 
+		/**
+		 * The pill tone of a status: finished well is success, failed is error,
+		 * anything still going is info.
+		 *
+		 * @param {string} status The run status.
+		 * @return {string} A CnStatusBadge variant.
+		 * @spec openspec/changes/flow-runs-ruled-with-pills/specs/cn-flow-runs-widget/spec.md
+		 */
+		statusVariant(status) {
+			if (status === 'completed') {
+				return 'success'
+			}
+			if (status === 'failed' || status === 'dead_letter') {
+				return 'error'
+			}
+			return status === 'stopped' ? 'default' : 'info'
+		},
+
 		/**
 		 * The secondary line: status, the step the run sits on, and what
 		 * triggered it — whichever of those the run actually carries.
@@ -690,7 +742,11 @@ export default {
 		 * @return {string} The meta line.
 		 */
 		metaLine(run) {
-			const parts = [this.statusLabel(run.status)]
+			const words = this.content.triggerLabels && this.content.triggerLabels[run.trigger]
+			if (typeof words === 'string' && words !== '') {
+				return this.tr(words)
+			}
+			const parts = this.pills ? [] : [this.statusLabel(run.status)]
 			if (run.step) {
 				parts.push(String(run.step))
 			}
@@ -714,6 +770,11 @@ export default {
 			if (Number.isFinite(started) === false) {
 				return ''
 			}
+			if (this.content.age === 'datetime') {
+				const at = new Date(started)
+				const pad = (value) => String(value).padStart(2, '0')
+				return `${formatBoardDate(at)}, ${pad(at.getHours())}:${pad(at.getMinutes())}`
+			}
 			const seconds = Math.max(0, Math.round((Date.now() - started) / 1000))
 			if (seconds < 60) {
 				return this.tr('now')
@@ -965,6 +1026,43 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name {
 	letter-spacing: 0.04em;
 }
 
+/* Status pills: each row ruled on top, the name over its meta line, the pill
+   and the start moment at the end, as the Dq case boards draw the Flows card. */
+.cn-flow-runs-widget--pills .cn-flow-runs-widget__row {
+	border-top: 1px solid var(--color-border);
+	border-bottom: none;
+}
+
+.cn-flow-runs-widget--pills .cn-flow-runs-widget__row-content {
+	flex-wrap: wrap;
+	gap: 6px 16px;
+	padding: 11px 0;
+}
+
+.cn-flow-runs-widget--pills .cn-flow-runs-widget__body {
+	flex: 1 1 260px;
+	gap: 2px;
+}
+
+.cn-flow-runs-widget--pills .cn-flow-runs-widget__name,
+.cn-flow-runs-widget--pills .cn-flow-runs-widget__row--terminal .cn-flow-runs-widget__name {
+	font-size: 15px;
+	font-weight: 500;
+	color: var(--color-main-text);
+	white-space: normal;
+}
+
+.cn-flow-runs-widget--pills .cn-flow-runs-widget__meta {
+	font-size: 13px;
+	white-space: normal;
+}
+
+.cn-flow-runs-widget--pills .cn-flow-runs-widget__age {
+	flex: 0 0 104px;
+	font-size: 13px;
+	text-align: end;
+}
+
 @keyframes cn-flow-runs-pulse {
 	0%, 100% { opacity: 1; }
 	50% { opacity: 0.35; }

package/src/components/CnFollowingWidgetHost/CnFollowingWidgetHost.vue

@@ -42,6 +42,8 @@ export default {
 		cnWidgetSelection: { from: WIDGET_SELECTION, default: null },
 		/** The host's translate (CnAppRoot provides `cnTranslate`), applied to the title before it is filled. */
 		cnTranslate: { default: () => (key) => key },
+		/** The app's named formatters (CnAppRoot provides `cnFormatters`), for a `{field|formatter}` token in the title. */
+		cnFormatters: { default: () => ({}) },
 	},
 
 	inheritAttrs: false,
@@ -93,7 +95,7 @@ export default {
 				return this.widget
 			}
 			const translated = this.cnTranslate(title)
-			return { ...this.widget, title: fillTemplate(translated, this.row) || translated.replace(/\s*\{[^}]*\}/g, '') }
+			return { ...this.widget, title: fillTemplate(translated, this.row, new Date(), { formatters: this.cnFormatters }) || translated.replace(/\s*\{[^}]*\}/g, '') }
 		},
 	},
 }

package/src/components/CnNotesCard/CnNotesCard.vue

@@ -176,6 +176,8 @@ import CnNoteComposer from '../CnNoteComposer/CnNoteComposer.vue'
 import CnUserActionMenu from '../CnUserActionMenu/CnUserActionMenu.vue'
 import CnVisibilityChip from '../CnVisibilityChip/CnVisibilityChip.vue'
 import { useFileComments } from '../../composables/useFileComments.js'
+import { normalizeLook } from '../../composables/useLook.js'
+import { formatBoardDateTime } from '../../utils/fillTemplate.js'
 import { buildHeaders, prefixUrl } from '../../utils/index.js'
 import { initialsOf } from '../../utils/initials.js'
 import { leafSourceUrl } from '../../utils/leafSourceUrl.js'
@@ -248,6 +250,10 @@ export default {
 		Delete,
 	},
 
+	inject: {
+		cnLook: { default: 'nextcloud' },
+	},
+
 	props: {
 		/** OpenRegister register ID */
 		registerId: {
@@ -795,6 +801,10 @@ export default {
 			if (!dateStr) {
 				return ''
 			}
+			// The board look writes a note's moment as the boards do: "6 okt 11:10", the year only outside this year.
+			if (normalizeLook(this.cnLook) === 'board') {
+				return formatBoardDateTime(dateStr) || dateStr
+			}
 			try {
 				return new Date(dateStr).toLocaleString(userLocale(), {
 					year: 'numeric',

package/src/components/CnObjectCard/CnObjectCard.vue

@@ -112,6 +112,11 @@
 						:row="object" />
 					<template v-else>{{ recordFootCell.text }}</template>
 				</span>
+				<!-- An empty footerCell keeps its place as a dash, as an empty table cell. -->
+				<span
+					v-else-if="recordFootCellDeclared"
+					class="cn-object-card__record-foot-cell cn-object-card__record-foot-cell--empty"
+					data-testid="cn-object-card-foot-cell-empty">—</span>
 				<span
 					v-if="recordDate"
 					class="cn-object-card__record-date"
@@ -589,6 +594,17 @@ export default {
 			return { text: part.text, tone }
 		},
 
+		/**
+		 * Whether the record layout names a `footerCell`, so an empty one
+		 * keeps its place.
+		 *
+		 * @spec openspec/changes/card-empty-footer-cell-dash/specs/card-empty-footer-cell-dash/spec.md#requirement-an-empty-footer-cell-reads-as-a-dash
+		 * @return {boolean}
+		 */
+		recordFootCellDeclared() {
+			return Boolean(this.recordLayout && this.recordLayout.footerCell)
+		},
+
 		/**
 		 * The footer's `footerCell` part, read as a meta part is (through the
 		 * page column it names), or null while it is empty.

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/CnObjectListWidget/CnObjectListWidget.vue

@@ -860,7 +860,7 @@ export default {
 				// `secondary` (a second, muted line under the cell) rides
 				// along too: the table draws it, and dropping it here took the
 				// list rows' second line away (zuiddrecht-pixel-gaps-3).
-				for (const k of ['format', 'widget', 'widgetProps', 'formatter', 'align', 'width', 'type', 'enum', 'enumLabels', 'sortable', 'secondary', 'colorMap', 'grow', 'cellClass']) {
+				for (const k of ['format', 'widget', 'widgetProps', 'formatter', 'align', 'width', 'type', 'enum', 'enumLabels', 'sortable', 'secondary', 'colorMap', 'grow', 'cellClass', 'emptyValue']) {
 					if (c[k] !== undefined) {
 						out[k] = c[k]
 					}