@conduction/nextcloud-vue 2.111.0 → 2.113.0

package/l10n/en.json

@@ -1912,7 +1912,9 @@
     "New team": "New team",
     "Why it is moving": "Why it is moving",
     "Use \"{name}\"": "Use \"{name}\"",
-    "It was not handed over.": "It was not handed over."
+    "It was not handed over.": "It was not handed over.",
+    "This search could not be read.": "This search could not be read.",
+    "{source} could not be searched, so this list may be incomplete.": "{source} could not be searched, so this list may be incomplete."
   },
   "plurals": {
     "{count} member": [

package/l10n/nl.json

@@ -2124,7 +2124,9 @@
     "New team": "Nieuw team",
     "Why it is moving": "Waarom het overgaat",
     "Use \"{name}\"": "\"{name}\" gebruiken",
-    "It was not handed over.": "Het is niet overgedragen."
+    "It was not handed over.": "Het is niet overgedragen.",
+    "This search could not be read.": "Deze zoekopdracht kon niet worden gelezen.",
+    "{source} could not be searched, so this list may be incomplete.": "{source} kon niet worden doorzocht, dus deze lijst is mogelijk niet compleet."
   },
   "plurals": {
     "{count} member": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.111.0",
+  "version": "2.113.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/CnActionButtons/CnActionButtons.vue

@@ -329,12 +329,10 @@ export default {
 		 * browser keeps middle-click, "open in new tab" and the link semantics
 		 * assistive tech announces.
 		 *
-		 * `href` is JS-composition-only, like `onSelect` — manifest JSON cannot
-		 * carry it (the schema's `target` field already names the `navigate`
-		 * destination URL, and `additionalProperties: false` rejects an
-		 * unlisted `href`). A manifest author reaching for a link should use
-		 * `type: "navigate"` with an external `target`, which auto-derives the
-		 * anchor/`window.open` behaviour instead.
+		 * `href` is used as given, so it must be a finished URL. A manifest
+		 * `headerActions[]` entry may carry `href` too: the page (CnDetailPage,
+		 * CnDashboardPage) resolves an instance path through `generateUrl()`
+		 * and sets `target` before the entry reaches this component.
 		 *
 		 * @type {Array<object>}
 		 */

package/src/components/CnActionDialog/CnActionDialog.vue

@@ -31,7 +31,7 @@
 					{{ section.title }}
 				</h3>
 				<dl class="cn-action-dialog__facts">
-					<div v-for="fact in section.facts" :key="fact.label">
+					<div v-for="fact in section.facts" :key="fact.label" class="cn-action-dialog__fact">
 						<dt>{{ fact.label }}</dt>
 						<dd>{{ fact.value }}</dd>
 					</div>
@@ -87,6 +87,7 @@
 					v-model="reason"
 					:label="reasonLabel"
 					:labelOutside="false"
+					:rows="config.reason.rows || 2"
 					resize="vertical"
 					data-testid="cn-action-dialog-reason" />
 				<span v-if="config.reason.hint" class="cn-action-dialog__muted">{{ text(config.reason.hint) }}</span>
@@ -176,8 +177,9 @@ let reasonSeq = 0
  *   required?, options?: [{ value, label, fills? }] }]`: inputs sent beside
  *   the reason, required by default; a select option's `fills` sets other
  *   fields that are still empty.
- * - `reason`: `{ label?, hint?, required?, field? }`: a text area; required by
- *   default; sent as `field` (default `reason`).
+ * - `reason`: `{ label?, hint?, required?, field?, rows? }`: a text area; required by
+ *   default; sent as `field` (default `reason`). `rows` is its height in lines
+ *   (default 2; board DqBesluit draws 4).
  * - `note`: `{ variant?, title?, text }`: a read-only note.
  * - `confirm`: `{ label, icon?, request?: { method?, url, body? }, action? }`.
  *   `request` posts itself (`body` templates filled with the record and
@@ -604,17 +606,27 @@ export default {
 
 .cn-action-dialog__title {
 	margin: 0 0 8px;
-	font-size: 15px;
-	font-weight: 700;
+	font-size: 14px;
+	font-weight: 600;
 }
 
+/* Facts in columns of at least 200px, each a label over its value above a
+   hairline (DqArchiveren "Bewaring volgens het zaaktype"). */
 .cn-action-dialog__facts {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-	gap: 8px 16px;
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+	gap: 12px 24px;
 	margin: 0;
 }
 
+.cn-action-dialog__fact {
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+	padding-bottom: 10px;
+	border-bottom: 1px solid var(--color-border);
+}
+
 .cn-action-dialog__facts dt {
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
@@ -622,12 +634,15 @@ export default {
 
 .cn-action-dialog__facts dd {
 	margin: 0;
+	font-size: 15px;
+	font-weight: 500;
 }
 
+/* Checklist rows divided by hairlines, the detail at the row's end
+   (DqArchiveren "Klaar om te archiveren"). */
 .cn-action-dialog__checks {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
 	margin: 0;
 	padding: 0;
 	list-style: none;
@@ -637,7 +652,15 @@ export default {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
-	gap: 8px;
+	gap: 2px 12px;
+	padding: 10px 0;
+	border-top: 1px solid var(--color-border);
+	font-size: 15px;
+}
+
+.cn-action-dialog__check-label {
+	flex: 1 1 auto;
+	font-weight: 600;
 }
 
 .cn-action-dialog__check-icon {

package/src/components/CnAssignDialog/CnAssignDialog.vue

@@ -34,6 +34,7 @@
 					v-model="note"
 					:label="noteLabel"
 					:labelOutside="false"
+					:rows="noteConfig.rows || 3"
 					resize="vertical"
 					data-testid="cn-assign-dialog-note" />
 				<span v-if="noteConfig.hint" class="cn-assign-dialog__hint">{{ text(noteConfig.hint) }}</span>
@@ -139,8 +140,9 @@ export function withTypedAssignee(found, typed, label) {
  *   by `currentAs`) says so, in place of `hint`; `allowTyped`
  *   offers what was typed as a choice; the id is sent as `field` (default
  *   `assignee`) and its kind as `kindField` when set.
- * - `note`: `{ label?, hint?, required?, field? }`, required by default and
- *   sent as `field` (default `note`); `false` drops it.
+ * - `note`: `{ label?, hint?, required?, field?, rows? }`, required by default and
+ *   sent as `field` (default `note`); `false` drops it. `rows` is the text
+ *   area's height in lines (default 3, as board DqOverdragen draws it).
  * - `toggles`: `[{ field, label, note? }]`: switches that start off and are
  *   sent as booleans.
  * - `confirm`: `{ label?, icon?, request?: { method?, url, body? }, action? }`.

package/src/components/CnBoardView/CnBoardView.vue

@@ -228,7 +228,11 @@
 										class="cn-board-view__pill"
 										data-testid="cn-board-card-pill"
 										:label="roleText(card, roles.pill)"
-										:variant="pillVariant(card)" />
+										:variant="pillVariant(card)">
+										<template v-if="pillIcon(card)" #icon>
+											<CnIcon :name="pillIcon(card)" :size="14" />
+										</template>
+									</CnStatusBadge>
 								</span>
 								<span
 									v-if="dueText(card) !== '' || ownerName(card) !== ''"
@@ -352,12 +356,14 @@
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
+import CnIcon from '../CnIcon/CnIcon.vue'
 import CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'
 import { normalizeLook } from '../../composables/useLook.js'
 import { isBadgeVariant } from '../../utils/badgeVariants.js'
 import { buildBoardColumns, normalizeAllowed, resolveStageColor } from '../../utils/boardColumns.js'
 import { buildSwimlanes } from '../../utils/boardSwimlanes.js'
 import { DROP_OUTCOMES, runBoardDrop } from '../../utils/boardTransition.js'
+import { pillLook } from '../../utils/detailActionModel.js'
 import { daysUntil, dueStateForRow } from '../../utils/dueRule.js'
 import { formatMetricValue } from '../../utils/formatMetric.js'
 import { readPath } from '../../utils/readPath.js'
@@ -393,7 +399,7 @@ import '../../css/board.css'
 export default {
 	name: 'CnBoardView',
 
-	components: { CnStatusBadge },
+	components: { CnIcon, CnStatusBadge },
 
 	inject: {
 		/**
@@ -489,9 +495,10 @@ export default {
 
 		/**
 		 * The board look's card roles (manifest `config.board.card`):
-		 * `{ title, sub, pill, due, owner, pillColors? }`. `sub` is a field or
-		 * a list of fields joined by a middle dot; `pillColors` maps a pill
-		 * value to a badge variant. Missing, the first of `cardFields` is the
+		 * `{ title, sub, pill, due, owner, pillColors?, resolve? }`. `sub` is a
+		 * field or a list of fields joined by a middle dot; `pillColors` maps a
+		 * pill value to a badge variant; `resolve: { colorField?, iconField? }`
+		 * takes the pill's tone and icon from the record it points at. Missing, the first of `cardFields` is the
 		 * title and the rest form the sub line. The Nextcloud look ignores it.
 		 *
 		 * @type {{title?: string, sub?: string|Array<string>, pill?: string, due?: string, owner?: string, pillColors?: object}|null}
@@ -502,6 +509,20 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * The referenced records' colour and icon names, by field and id
+		 * (`{ [field]: { [id]: { color, icon } } }`, CnIndexPage reads them).
+		 * With `cardRoles.resolve: { colorField?, iconField? }` the card's pill
+		 * takes its record's tone and icon from here.
+		 *
+		 * @type {object}
+		 * @spec openspec/changes/pill-color-field/specs/pill-color-field/spec.md#requirement-a-card-pill-takes-its-tone-and-icon-from-the-referenced-record
+		 */
+		pillLooks: {
+			type: Object,
+			default: () => ({}),
+		},
+
 		/**
 		 * The field on a column's state that holds its dot colour (manifest
 		 * `config.board.colorField`). Empty, the lifecycle state's declared
@@ -1064,11 +1085,43 @@ export default {
 		 * @return {string} A CnStatusBadge variant.
 		 */
 		pillVariant(card) {
+			const look = this.pillLookOf(card)
+			if (look.variant) {
+				return look.variant
+			}
 			const raw = this.fieldText(card, this.roles.pill)
 			const variant = this.roles.pillColors[raw] ?? this.roles.pillColors[raw.toLowerCase()]
 			return isBadgeVariant(variant) ? variant : 'default'
 		},
 
+		/**
+		 * The pill's icon, from the record it points at (`cardRoles.resolve`).
+		 *
+		 * @param {object} card The card's row.
+		 * @return {string} An icon name, or ''.
+		 * @spec openspec/changes/pill-color-field/specs/pill-color-field/spec.md#requirement-a-card-pill-takes-its-tone-and-icon-from-the-referenced-record
+		 */
+		pillIcon(card) {
+			return this.pillLookOf(card).icon || ''
+		},
+
+		/**
+		 * The tone and icon of the record the card's pill points at, when
+		 * `cardRoles.resolve` asks for them; empty otherwise.
+		 *
+		 * @param {object} card The card's row.
+		 * @return {{variant?: string, icon?: string}} The look.
+		 */
+		pillLookOf(card) {
+			const given = this.cardRoles && typeof this.cardRoles === 'object' ? this.cardRoles : null
+			if (!given || !given.resolve || !this.roles.pill || !this.pillLooks) {
+				return {}
+			}
+			const raw = readPath(card, this.roles.pill)
+			const looks = this.pillLooks[this.roles.pill]
+			return pillLook(looks && raw !== null && raw !== undefined && typeof raw !== 'object' ? looks[String(raw)] : null)
+		},
+
 		/**
 		 * The footer's due text: "Due today", "Due 2 Nov", or "Overdue 2 Nov"
 		 * for a date in the past. Words, so the late tone is not colour alone.

package/src/components/CnCardGrid/CnCardGrid.md

@@ -107,6 +107,7 @@ Custom card slot — replace the default CnObjectCard with your own rendering:
 | `selectable` | `Boolean` | `false` | When `true`, each card shows a selection checkbox and the grid emits `select` events |
 | `selectedIds` | `Array` | `[]` | Array of currently selected object IDs (matched against `object[rowKey]`) |
 | `accentOf` | `Function` | `null` | `(object) => { variant, icon?, label? } \| null`, each card's status accent (see CnObjectCard `accent`) |
+| `pillLooks` | `Object` | `{}` | The referenced records' colour and icon names, by field and id (`{ [field]: { [id]: { color, icon } } }`), passed to each CnObjectCard for the record layout's pills that declare `resolve`. |
 
 ## Board look props
 

package/src/components/CnCardGrid/CnCardGrid.vue

@@ -38,6 +38,7 @@
 						:selected="isSelected(object)"
 						:cardFields="cardFields"
 						:layout="cardLayout"
+						:pillLooks="pillLooks"
 						:cardFieldColumns="cardFieldColumns"
 						:status="statusOf ? statusOf(object) : null"
 						:leading="leadingOf ? leadingOf(object) : null"
@@ -179,6 +180,16 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * The referenced records' colour and icon names, by field and id
+		 * (`{ [field]: { [id]: { color, icon } } }`), passed through to
+		 * CnObjectCard for the record layout's pills that declare `resolve`.
+		 */
+		pillLooks: {
+			type: Object,
+			default: () => ({}),
+		},
+
 		/** The page's columns by key, passed through to CnObjectCard. */
 		cardFieldColumns: {
 			type: Object,

package/src/components/CnCellRenderer/CnCellRenderer.vue

@@ -50,7 +50,11 @@
 				:label="labelledValue"
 				:variant="badgeVariant"
 				:colorMap="badgeColorMap"
-				:colorKey="badgeColorKey" />
+				:colorKey="badgeColorKey">
+				<template v-if="badgeLook.icon" #icon>
+					<CnIcon :name="badgeLook.icon" :size="14" class="cn-cell-renderer__badge-icon" />
+				</template>
+			</CnStatusBadge>
 			<span v-else class="cn-cell-renderer__dash">—</span>
 		</template>
 
@@ -376,6 +380,7 @@ import CnGroupNameCell from './CnGroupNameCell.vue'
 import { normalizeLook } from '../../composables/useLook.js'
 import { ageInDays, boardDateLocale, formatAge, formatBoardDate, formatRelativeDate, formatTimeOfDay, resolveAgeVariant } from '../../utils/boardDate.js'
 import { parseDateValue, resolveDateVariant } from '../../utils/dateVariant.js'
+import { pillLook } from '../../utils/detailActionModel.js'
 import { resolveDue } from '../../utils/dueText.js'
 import { formatMoney } from '../../utils/formatMetric.js'
 import { objectFieldValue } from '../../utils/objectName.js'
@@ -1177,9 +1182,25 @@ export default {
 			return Object.keys(map).some((key) => key.toLowerCase() === raw) ? String(this.value) : ''
 		},
 
-		/** Variant for the built-in `badge` widget — `widgetProps.variant` or `'default'`. */
+		/**
+		 * What the built-in `badge` widget takes from the record its value
+		 * points at (`widgetProps.looks`, filled by CnIndexPage from
+		 * `widgetProps.resolve`): a tone and an icon, or nothing.
+		 *
+		 * @return {{variant?: string, colorMap?: null, icon?: string}}
+		 * @spec openspec/changes/pill-color-field/specs/pill-color-field/spec.md#requirement-a-badge-cell-takes-its-tone-and-icon-from-the-referenced-record
+		 */
+		badgeLook() {
+			const looks = this.widgetProps && this.widgetProps.looks
+			if (!looks || typeof looks !== 'object' || !this.hasValue || typeof this.value === 'object') {
+				return {}
+			}
+			return pillLook(looks[String(this.value)])
+		},
+
+		/** Variant for the built-in `badge` widget: the referenced record's tone, else `widgetProps.variant`, else `'default'`. */
 		badgeVariant() {
-			return (this.widgetProps && this.widgetProps.variant) || 'default'
+			return this.badgeLook.variant || (this.widgetProps && this.widgetProps.variant) || 'default'
 		},
 
 		/**
@@ -1194,6 +1215,9 @@ export default {
 		 * @return {object|null}
 		 */
 		badgeColorMap() {
+			if (this.badgeLook.variant) {
+				return null
+			}
 			return (this.widgetProps && this.widgetProps.colorMap) || this.enumColorMap || null
 		},
 

package/src/components/CnChartWidget/CnChartWidget.vue

@@ -2830,6 +2830,7 @@ export default {
 }
 
 .cn-chart-widget__matrix-head {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	color: var(--color-text-maxcontrast);
 	padding: 6px;
 }
@@ -2866,7 +2867,11 @@ export default {
 	outline-offset: -3px;
 }
 
+/* A cell is a span: its ink also goes to --nldesign-color-on-surface, which a
+   theme that forces the body ink onto every span (thematiq) reads. Level 3
+   leaves the theme's body ink in place: white on its tint is below 4.5:1. */
 .cn-chart-widget__matrix-cell--1 {
+	--nldesign-color-on-surface: var(--color-primary-element-light-text);
 	background: var(--color-primary-element-light);
 	color: var(--color-primary-element-light-text);
 }
@@ -2882,6 +2887,7 @@ export default {
 }
 
 .cn-chart-widget__matrix-cell--4 {
+	--nldesign-color-on-surface: var(--color-primary-element-text);
 	background: var(--color-primary-element);
 	color: var(--color-primary-element-text);
 }

package/src/components/CnChoiceCards/CnChoiceCards.vue

@@ -522,7 +522,6 @@ export default {
    still legible (DqVolgendeStap), not faded. */
 .cn-choice-cards__row--disabled,
 .cn-choice-cards__row--disabled:hover {
-	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	border-color: var(--color-border);
 	background: var(--color-background-hover);
 	color: var(--color-text-maxcontrast);
@@ -532,7 +531,6 @@ export default {
 /* The title takes the muted ink itself: a theme that colours every label
    with `!important` (thematiq) would otherwise hand it the label colour. */
 .cn-choice-cards__row--disabled .cn-choice-cards__row-title {
-	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	color: var(--color-text-maxcontrast);
 }
 
@@ -600,7 +598,6 @@ export default {
    with `!important` (thematiq) reaches a span that only inherits. */
 .cn-choice-cards__row-description,
 .cn-choice-cards__reason {
-	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	font-size: 13px;
 	font-weight: 400;
 	color: var(--color-text-maxcontrast);

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -96,7 +96,7 @@
 				<template v-if="!isBoardLook">
 					<CnActionButtons
 						v-if="headerActions && headerActions.length"
-						:actions="headerActions"
+						:actions="linkedHeaderActions"
 						data-testid="cn-dashboard-page-header-actions" />
 					<!-- @slot header-actions Inline buttons rendered in the dashboard header next to the edit toggle. Used by every existing consumer (decidesk, launchpad, opencatalogi, pipelinq, procest). -->
 					<slot name="header-actions" />
@@ -169,7 +169,7 @@
 					<CnBuildiqEditButton />
 					<CnActionButtons
 						v-if="headerActions && headerActions.length"
-						:actions="headerActions"
+						:actions="linkedHeaderActions"
 						data-testid="cn-dashboard-page-header-actions" />
 					<slot name="header-actions" />
 					<slot name="actions" />
@@ -1042,6 +1042,7 @@ import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry
 import { normalizeLook } from '../../composables/useLook.js'
 import { pageViews } from '../../mixins/pageViews.js'
 import { mergeUserLayout, resolveUserLayoutApi } from '../../store/plugins/dashboardLayouts.js'
+import { headerActionAsLink } from '../../utils/actionLink.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
 import { contentHeaderLink } from '../../utils/contentHeaderLink.js'
 import { pickDeclaredProps } from '../../utils/declaredProps.js'
@@ -1693,9 +1694,12 @@ export default {
 		 * in the dashboard header via CnActionButtons — `open-form` (schema
 		 * create dialog), `api-call` (POST/PUT + toast + refresh), `toggle`
 		 * (two-way state button), `navigate` / `open-modal` / `refresh`, each
-		 * with an optional `visibleWhen` predicate. Empty (the default) renders
-		 * nothing; the `#header-actions` slot still works alongside it for
-		 * bespoke buttons.
+		 * with an optional `visibleWhen` predicate. An entry with `href` is a
+		 * link button, never dispatched: an absolute `http(s)`, `mailto:`,
+		 * `tel:` or `//host/...` URL as written, an instance path (leading `/`) through
+		 * `generateUrl()`, in a new tab with `target: '_blank'`. Empty (the
+		 * default) renders nothing; the `#header-actions` slot still works
+		 * alongside it for bespoke buttons.
 		 *
 		 * @type {Array<object>}
 		 */
@@ -2102,6 +2106,17 @@ export default {
 			return typeof this.cnTranslate === 'function' ? this.cnTranslate : (key) => key
 		},
 
+		/**
+		 * The header actions handed to CnActionButtons, an entry with `href`
+		 * in its link form (resolved URL, anchor target, no handler).
+		 *
+		 * @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
+		 * @return {Array<object>}
+		 */
+		linkedHeaderActions() {
+			return (this.headerActions || []).map(headerActionAsLink)
+		},
+
 		/**
 		 * The greeting for the time of day, with the reader's first (or
 		 * full) name when known, or '' when `greeting` is off.