@conduction/nextcloud-vue 2.99.0 → 2.101.0

package/src/css/look-board.css

@@ -99,6 +99,50 @@
 	padding-inline-start: 56px;
 }
 
+/* The dashboard header as the board draws it (DqTermijnen): the actions on
+   the title's row, the description and its segmented period under both, at
+   the header's full width. As two flex columns the description sat in the
+   title's column only, so a long period group wrapped under its text and the
+   actions dropped to a line of their own. The title column never shrinks
+   below its longest word; the actions wrap their buttons first.
+   @spec openspec/changes/dashboard-board-header-row/specs/dashboard-page/spec.md#requirement-the-board-dashboard-header-keeps-its-actions-on-the-title-row */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-dashboard-page__header {
+	display: grid;
+	grid-template-columns: minmax(min-content, 1fr) auto;
+	align-items: start;
+	column-gap: 16px;
+	row-gap: 0;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-dashboard-page__header-left {
+	display: contents;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-dashboard-page__title-row {
+	grid-column: 1;
+	grid-row: 1;
+	align-self: center;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-dashboard-page__header-left > :not(.cn-dashboard-page__title-row) {
+	grid-column: 1 / -1;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-dashboard-page__header > .cn-dashboard-page__header-actions {
+	grid-column: 2;
+	grid-row: 1;
+	justify-content: flex-end;
+	margin-inline-start: 0;
+}
+
+/* A stat tile in the board's KPI row carries the board's own 18px 20px inset
+   (`cn-kpi-card--board`), so the card-fit cell adds none of its own: with
+   both the label sat 29px from the tile's top and 37px from its side, and
+   the row stood about 1.4 times the board's height. */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-dashboard-page__kpi-cell .cn-dashboard-page__card-fit .cn-widget-wrapper__content:has(> .cn-kpi-card--board.cn-kpi-card--stacked) {
+	padding: 0;
+}
+
 /* ---- The header button ------------------------------------------------- */
 .cn-look-board .cn-index-page__header-buttons:not(.cn-look-nextcloud *),
 .cn-look-board .cn-detail-page__header-actions:not(.cn-look-nextcloud *),
@@ -302,6 +346,40 @@
 	color: inherit;
 }
 
+/* A caption's edit pencil ("Mijn zaaktypen") sits on the caption's line at
+   its end, 4px in: a 28px round muted button with a 16px icon that adds no
+   height (DqZijbalk). It is placed absolutely because a theme may force the
+   caption to `display: block` at id strength (thematiq's Zuiddrecht sheet),
+   which put the pencil on a line of its own. */
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-caption:has(.app-navigation-caption__actions) {
+	position: relative;
+	padding-inline-end: 36px;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-caption .app-navigation-caption__actions {
+	--default-clickable-area: 28px;
+	position: absolute;
+	inset-block-start: -6px;
+	inset-inline-end: 4px;
+	margin: 0;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-caption .app-navigation-caption__actions .button-vue {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	width: 28px;
+	min-width: 28px;
+	height: 28px;
+	min-height: 28px;
+	padding: 0;
+	border-radius: 14px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-caption .app-navigation-caption__actions .button-vue svg {
+	width: 16px;
+	height: 16px;
+}
+
 .cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-entry,
 .cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-entry-link {
 	min-height: 42px;
@@ -316,7 +394,15 @@
 	color: var(--color-main-text);
 }
 
+/* The open entry sits on the tonal primary. NcAppNavigationItem paints an
+   active entry with a 16% (22% hovered) primary mix at `!important`, so the
+   board value needs `!important` too; the selector is the more specific one.
+   The link carries the same ground. */
 .cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-entry.active,
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-entry.active:hover {
+	background-color: var(--color-primary-element-light) !important;
+}
+
 .cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-entry.active .app-navigation-entry-link {
 	background: var(--color-primary-element-light);
 	color: var(--color-primary-element-light-text);
@@ -362,9 +448,11 @@
 	font-weight: 700;
 }
 
+/* White on the error colour: --color-error-text is the error colour for text on
+   a light ground (#8A0000 under thematiq), not the text on an error pill. */
 .cn-look-board .cn-app-nav__count--attention {
 	background: var(--color-error);
-	color: var(--color-error-text, var(--color-primary-element-text));
+	color: var(--color-primary-element-text);
 }
 
 /* The footer: Help, then Advanced, whatever the declared order. */
@@ -951,6 +1039,44 @@
 	--nldesign-color-on-surface: var(--cn-status-badge-ink);
 }
 
+/* ---- Info notes (NcNoteCard type="info") -------------------------------- */
+/* The board's info note is a light-blue rounded box: no edge bar, 12px 14px
+   of padding, radius 8, an 18px icon 10px before the text, 14px text in the
+   deep primary ink at 1.5, and a bold heading line (DqBesluit and 13 other
+   boards). NcNoteCard paints its ground and ink with `!important`, and a
+   theme forces the body ink onto every p and span (thematiq), so the ground,
+   the ink and the paragraph colour carry `!important` here too, scoped to
+   the board look; the ink also goes to --nldesign-color-on-surface. */
+.cn-look-board .notecard.notecard--info:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-primary-element-light-text);
+	--note-card-icon-size: 18px;
+	--note-theme: var(--color-primary-element-light-text);
+	gap: 10px;
+	padding: 12px 14px;
+	border-inline-start: 0;
+	border-radius: 8px;
+	background-color: var(--color-primary-element-light) !important;
+	color: var(--color-primary-element-light-text) !important;
+	font-size: 14px;
+	line-height: 1.5;
+}
+
+.cn-look-board .notecard.notecard--info:not(.cn-look-nextcloud *) p {
+	color: var(--color-primary-element-light-text) !important;
+	font-size: inherit;
+	line-height: inherit;
+}
+
+.cn-look-board .notecard.notecard--info:not(.cn-look-nextcloud *) .notecard__heading {
+	font-size: inherit;
+	font-weight: 700 !important;
+}
+
+.cn-look-board .notecard.notecard--info:not(.cn-look-nextcloud *) .notecard__icon {
+	padding-top: 1px;
+	color: var(--color-primary-element-light-text);
+}
+
 /* ---- Date and age cells (screens-cell-date-parity) ---------------------- */
 /* The board sets every waiting time ("3 dagen", "4 uur") in weight 600; a
    late one is red through its variant class. */

package/src/index.js

@@ -158,6 +158,7 @@ export {
 	CnGaugeWidget,
 	CnGaugeWidgetForm,
 	CnGraphCanvas,
+	CnGroupedCardsWidget,
 	CnGuardianHome,
 	CnHeaderWidget,
 	CnHeaderWidgetForm,

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.122.0",
+	"version": "2.124.0",
 	"type": "object",
 	"required": ["$schema", "version"],
 	"allOf": [
@@ -97,6 +97,9 @@
 							"type": { "type": "string", "enum": ["info", "config-fields", "choice", "run-action", "summary", "component"], "description": "Built-in step renderer." },
 							"title": { "type": "string" },
 							"body": { "type": "string", "description": "info: explanatory copy." },
+							"note": { "type": "string", "minLength": 1, "description": "choice: a footnote under the options, translated like body." },
+							"visibleWhen": { "description": "Offer the step only when the setup status says so: a dotted path into the setup status document whose value must be truthy, or { path, equals } for an exact value. Hidden while the status loads.", "oneOf": [ { "type": "string", "minLength": 1 }, { "type": "object", "required": ["path"], "additionalProperties": false, "properties": { "path": { "type": "string", "minLength": 1 }, "equals": {} } } ] },
+							"footnote": { "type": "string", "minLength": 1, "description": "choice: the same footnote under another name; note wins when both are set." },
 							"required": { "type": "boolean", "default": false, "description": "When true the step gates the app until done." },
 							"schema": { "description": "config-fields: a JSON Schema ref (string) or inline object rendered via fieldsFromSchema." },
 							"configKey": { "type": "string", "description": "choice: app-config key the selection is written to." },
@@ -4024,6 +4027,14 @@
 									"type": "boolean",
 									"description": "false removes Request a feature, Report a bug and Documentation, for an app that offers them in its own help menu."
 								},
+								"showMarkUnread": {
+									"type": "boolean",
+									"description": "false removes the built-in Mark as unread entry."
+								},
+								"showOpenSidebar": {
+									"type": "boolean",
+									"description": "false removes the built-in Open sidebar entry of the board look."
+								},
 								"label": {
 									"type": "string",
 									"minLength": 1,
@@ -4333,6 +4344,20 @@
 							"minLength": 1,
 							"description": "type='detail', board look: the meta line on row 2 of the header, after the breadcrumb and a middle dot (screens-detail-page-parity). A field template such as `\"via {channel}\"`: every `{path}` is read from the record, and a line with an empty value is dropped. Maps to CnDetailPage `headerMeta`. type='index' | 'dashboard' | 'settings' (page-header-breadcrumb): the note after the breadcrumb and a middle dot under the title; on an index page `{total}` and `{shown}` are the list's counts."
 						},
+						"headerMetaCounts": {
+							"type": "object",
+							"description": "type='index': the other lists headerMeta counts, by name. Each is read as one list total and fills `{count:<name>}` in headerMeta (\"{total} contracten bij {count:suppliers} leveranciers\"); while a count loads or when it fails, the note is left out.",
+							"additionalProperties": {
+								"type": "object",
+								"required": ["register", "schema"],
+								"additionalProperties": false,
+								"properties": {
+									"register": { "type": "string", "minLength": 1 },
+									"schema": { "type": "string", "minLength": 1 },
+									"filter": { "type": "object" }
+								}
+							}
+						},
 						"tabsLabel": {
 							"type": "string",
 							"minLength": 1,
@@ -4348,6 +4373,35 @@
 							"default": true,
 							"description": "type='dashboard' and type='detail': `false` drops the overflow Actions menu from every widget that does not set `showActions` itself, for a dashboard whose widget headers carry a header link and nothing else (zuiddrecht-pixel-gaps-2), or a record page whose data cards carry none (zuiddrecht-pixel-gaps-3; a card with an Add action keeps it). When the key is not set a detail page keeps the menu, except under the board look, where side cards carry none (screens-detail-page-parity). Maps to CnDashboardPage / CnDetailPage `showWidgetActions`."
 						},
+						"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.",
+							"items": {
+								"type": "object",
+								"required": ["key", "options"],
+								"additionalProperties": false,
+								"properties": {
+									"key": { "type": "string", "minLength": 1, "description": "Workspace-context key written on change (the `@page.<key>` / `@workspace.<key>` token name)." },
+									"label": { "type": "string", "description": "Control label (i18n key or plain text)." },
+									"type": { "type": "string", "enum": ["select"], "default": "select", "description": "Control type, carried over from v1." },
+									"control": { "type": "string", "enum": ["select", "segmented"], "default": "select", "description": "How the filter is drawn: a select, or a compact segmented group." },
+									"placement": { "type": "string", "enum": ["row", "description"], "default": "row", "description": "Where the filter sits: in the header's filter row, or (a segmented group) on the description line after the period group (DqProcesanalyse)." },
+									"default": { "type": ["string", "number"], "description": "Initial value seeded into the context on mount; the first option's value when omitted." },
+									"options": {
+										"type": "array",
+										"items": {
+											"type": "object",
+											"required": ["value", "label"],
+											"additionalProperties": false,
+											"properties": {
+												"value": { "type": ["string", "number"], "description": "Value written into the context when picked." },
+												"label": { "type": "string", "description": "Display text (i18n key or plain text)." }
+											}
+										}
+									}
+								}
+							}
+						},
 						"kpiRow": {
 							"type": "array",
 							"items": { "type": "string" },

package/src/utils/languageMapText.js

@@ -0,0 +1,46 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+
+import { getLanguage } from '@nextcloud/l10n'
+
+/**
+ * The user's Nextcloud language as a bare code (`nl_NL` reads `nl`), or ''.
+ *
+ * @return {string} The code.
+ */
+function userLanguage() {
+	try {
+		return String(getLanguage() || '').split(/[-_]/)[0].toLowerCase()
+	} catch {
+		return ''
+	}
+}
+
+/**
+ * The text of a value that may be a language map (`{ nl: 'Ontvangst', en:
+ * 'Intake' }`), in the user's Nextcloud language, then Dutch, then English,
+ * then the first text it holds. A plain value comes back as text; anything
+ * else as ''.
+ *
+ * @param {(string|number|object|null|undefined)} value The value.
+ * @return {string} The text.
+ * @spec openspec/changes/grouped-cards-widget/specs/grouped-cards-widget/spec.md#requirement-a-widget-draws-groups-of-cards-from-an-endpoint
+ */
+export function languageMapText(value) {
+	if (typeof value === 'string' || typeof value === 'number') {
+		return String(value)
+	}
+	if (!value || typeof value !== 'object' || Array.isArray(value)) {
+		return ''
+	}
+	const language = userLanguage()
+	for (const key of [language, 'nl', 'en']) {
+		if (key && typeof value[key] === 'string' && value[key] !== '') {
+			return value[key]
+		}
+	}
+	const first = Object.values(value).find((text) => typeof text === 'string' && text !== '')
+	return first || ''
+}

package/src/utils/libraryWidgetKeys.js

@@ -71,6 +71,8 @@ export const BUILT_IN_WIDGET_KEYS = Object.freeze([
 	'header',
 	'text',
 	'divider',
+	'saved-view-alert',
+	'exports',
 ])
 
 /**
@@ -109,6 +111,7 @@ export const DASHBOARD_CATALOG_WIDGET_KEYS = Object.freeze([
 	'files',
 	'flow-runs',
 	'gauge',
+	'grouped-cards',
 	'header',
 	'image',
 	'interaction-form',

package/src/utils/mapList.js

@@ -0,0 +1,67 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+import { isBadgeVariant } from './badgeVariants.js'
+import { fillTemplate } from './fillTemplate.js'
+import { readPath } from './readPath.js'
+
+/**
+ * The numbered list beside an index map (DqZakenKaart): one entry per row
+ * that has a place on the map, numbered in list order so the number on the
+ * pin and the number in the list are the same, and the rows without one.
+ *
+ * `spec` is `mapConfig.list`: `{ title, sub?, pills?: [{ path?, text?, map?,
+ * colorMap? }], due? }`. `title`, `sub` and `due` are field templates
+ * (`"{title}"`, `"{address} · {identifier}"`, `"{deadline|date}"`), already
+ * translated by the caller; a pill reads `path` (or shows `text`), maps it
+ * through `map`, and takes its tone from `colorMap` by the raw value.
+ *
+ * @param {Array<object>} rows The rows, in display order.
+ * @param {object} spec The list declaration.
+ * @param {object} options How to read a row.
+ * @param {string} options.rowKey The row's key field.
+ * @param {Function} options.located Whether a row has a place on the map.
+ * @param {Function} [options.translate] The host's translate, for pill labels.
+ * @return {{items: Array<{key: string, n: number, row: object, title: string, sub: string, due: string, pills: Array<{label: string, variant: string}>}>, missing: Array<object>}}
+ */
+export function mapListItems(rows, spec, { rowKey, located, translate = (text) => text }) {
+	const items = []
+	const missing = []
+	const list = spec && typeof spec === 'object' ? spec : {}
+	for (const row of Array.isArray(rows) ? rows : []) {
+		if (!located(row)) {
+			missing.push(row)
+			continue
+		}
+		const pills = (Array.isArray(list.pills) ? list.pills : [])
+			.map((pill) => {
+				if (!pill || typeof pill !== 'object') {
+					return null
+				}
+				const raw = typeof pill.path === 'string' && pill.path !== '' ? readPath(row, pill.path) : undefined
+				const mapped = pill.map && (typeof raw === 'string' || typeof raw === 'number') && Object.hasOwn(pill.map, raw) ? pill.map[raw] : undefined
+				const text = mapped ?? pill.text ?? raw
+				if (typeof text !== 'string' && typeof text !== 'number') {
+					return null
+				}
+				const label = translate(String(text))
+				if (label === '') {
+					return null
+				}
+				const tone = pill.colorMap && (typeof raw === 'string' || typeof raw === 'number') ? pill.colorMap[raw] : pill.variant
+				return { label, variant: isBadgeVariant(tone) ? tone : 'default' }
+			})
+			.filter(Boolean)
+		items.push({
+			key: String(row[rowKey]),
+			n: items.length + 1,
+			row,
+			title: fillTemplate(list.title || '', row),
+			sub: fillTemplate(list.sub || '', row),
+			due: fillTemplate(list.due || '', row),
+			pills,
+		})
+	}
+	return { items, missing }
+}