@conduction/nextcloud-vue 2.78.0 → 2.80.0

package/src/components/CnSectionsWidget/CnSectionsWidget.vue

@@ -0,0 +1,489 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V.
+  - SPDX-License-Identifier: EUPL-1.2
+-->
+
+<template>
+	<div
+		class="cn-sections-widget"
+		:class="{
+			'cn-sections-widget--cards': cards,
+			'cn-sections-widget--two-column': twoColumn,
+		}"
+		data-testid="cn-sections-widget">
+		<div
+			v-for="column in columns"
+			:key="column.id"
+			class="cn-sections-widget__column"
+			:class="`cn-sections-widget__column--${column.id}`">
+			<section
+				v-for="section in column.sections"
+				:key="section.key"
+				class="cn-sections-widget__section"
+				:class="{ 'cn-sections-widget__section--empty': !isShown(section.key) }"
+				:aria-labelledby="section.title && isShown(section.key) ? headingId(section.key) : undefined"
+				:data-testid="`cn-section-${section.key}`">
+				<!-- The heading waits for content: a widget type that does not
+				     resolve renders nothing, and a heading over nothing is a
+				     label on a void. -->
+				<h3
+					v-if="section.title && isShown(section.key)"
+					:id="headingId(section.key)"
+					class="cn-sections-widget__heading">
+					{{ section.title }}
+				</h3>
+				<p
+					v-if="section.description && isShown(section.key)"
+					class="cn-sections-widget__description">
+					{{ section.description }}
+				</p>
+				<!-- The host always mounts, also while the section reads as
+				     empty: a widget that has not mounted cannot fetch, so it
+				     could never gain the content that would show it. -->
+				<div :ref="(el) => setHostRef(section.key, el)" class="cn-sections-widget__body">
+					<CnDetailWidgetHost
+						:widget="section.widget"
+						chrome="bare"
+						:objectId="objectId"
+						:object="objectData"
+						:objectType="objectType"
+						:schemaObject="schemaObject"
+						:register="register"
+						:schema="schema"
+						:store="store"
+						:surface="surface"
+						:integrationContext="integrationContext"
+						:cnRegistry="cnRegistry"
+						:availableWidgets="availableWidgets" />
+				</div>
+			</section>
+		</div>
+	</div>
+</template>
+
+<script>
+import CnDetailWidgetHost from '../CnDetailWidgetHost/CnDetailWidgetHost.vue'
+
+/** Counter for unique heading ids across instances. */
+let instanceCounter = 0
+
+/**
+ * CnSectionsWidget — the `sections` widget: several widgets in one place,
+ * each under its own heading.
+ *
+ * A tab strip binds one widget per tab, and a tab often holds more than one
+ * thing: the documents list and the case folder (DqZaak), a portal's details
+ * form, house style and sign-in (PtPortalInstellingen). This widget stacks
+ * them as sections under headings with a rule between them (the default), or
+ * as one card per section (`cards: true`), optionally in a main and a side
+ * column (`column: "side"` on a section). A single column of separate titled
+ * cards in a tab is the tabs widget's own `widgetIds` stack; this widget is
+ * for headed sections, and for the two-column card grid a settings tab draws.
+ *
+ * ```json
+ * {
+ *   "type": "sections",
+ *   "content": {
+ *     "sections": [
+ *       { "title": "Documenten", "widgetId": "case-documents" },
+ *       { "title": "Zaakmap", "widget": { "type": "files" } }
+ *     ]
+ *   }
+ * }
+ * ```
+ *
+ * A section names its widget inline (`widget`) or by id (`widgetId`, a
+ * sibling definition on the same surface). Children render through
+ * `CnDetailWidgetHost` in bare mode, the dispatch a tab panel uses, so a child
+ * behaves here as it does in a tab. A section whose widget draws nothing
+ * shows no heading and takes no space (`hideEmpty`, default true). Stacked
+ * children share one cell, so an object list in a section renders every
+ * fetched row (`content.fit: false`) unless its definition says otherwise.
+ *
+ * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md
+ */
+export default {
+	name: 'CnSectionsWidget',
+
+	components: { CnDetailWidgetHost },
+
+	inject: {
+		cnTranslate: { default: () => (key) => key },
+	},
+
+	props: {
+		/**
+		 * The widget configuration.
+		 *
+		 * - `sections` — `[{ key?, title?, description?, column?, widget? | widgetId? }]`, in order.
+		 *   `label` is accepted as an alias of `title`; `column` is `main` (default) or `side`.
+		 * - `cards` — draw each section as its own card (default false: headings and a rule between sections).
+		 * - `hideEmpty` — hide the heading and the space of a section whose widget drew nothing (default true).
+		 *
+		 * @type {{sections?: Array<object>, cards?: boolean, hideEmpty?: boolean}}
+		 */
+		content: {
+			type: Object,
+			default: () => ({}),
+		},
+
+		/** Sibling widget definitions on the surface, for `widgetId` sections. */
+		availableWidgets: {
+			type: Array,
+			default: () => [],
+		},
+
+		/** The bound record's id. */
+		objectId: {
+			type: [String, Number],
+			default: '',
+		},
+
+		/** The loaded record, or null while it is still being fetched. */
+		objectData: {
+			type: Object,
+			default: null,
+		},
+
+		/** The resolved object-type slug. */
+		objectType: {
+			type: String,
+			default: '',
+		},
+
+		/** The resolved JSON Schema object, needed by a `data` child. */
+		schemaObject: {
+			type: Object,
+			default: null,
+		},
+
+		/** OpenRegister register slug of the surface. */
+		register: {
+			type: [String, Object],
+			default: '',
+		},
+
+		/** OpenRegister schema slug of the surface. */
+		schema: {
+			type: [String, Object],
+			default: '',
+		},
+
+		/** The effective object store. */
+		store: {
+			type: Object,
+			default: null,
+		},
+
+		/** Rendering surface forwarded to the children. */
+		surface: {
+			type: String,
+			default: 'detail-page',
+		},
+
+		/** Object context forwarded to integration children. */
+		integrationContext: {
+			type: Object,
+			default: null,
+		},
+
+		/** The consumer's component registry, for custom child widget types. */
+		cnRegistry: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+
+	data() {
+		instanceCounter += 1
+		return {
+			uid: instanceCounter,
+			/**
+			 * Section key to "has this section rendered anything".
+			 *
+			 * @type {Record<string, boolean>}
+			 */
+			filled: {},
+		}
+	},
+
+	computed: {
+		/**
+		 * Whether each section is its own card.
+		 *
+		 * @return {boolean}
+		 */
+		cards() {
+			return this.content?.cards === true
+		},
+
+		/**
+		 * Whether an empty section hides.
+		 *
+		 * @return {boolean}
+		 */
+		hideEmpty() {
+			return this.content?.hideEmpty !== false
+		},
+
+		/**
+		 * The sections to render: a stable key, a translated title, the column
+		 * and the widget definition. A section whose widget cannot be found is
+		 * dropped (with a development warning for an unknown id).
+		 *
+		 * @return {Array<{key: string, title: string, description: string, column: string, widget: object}>}
+		 * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-sections-widget-stacks-configured-widgets-under-headings
+		 */
+		sections() {
+			const raw = Array.isArray(this.content?.sections) ? this.content.sections : []
+			const out = []
+			raw.forEach((entry, index) => {
+				if (!entry || typeof entry !== 'object') {
+					return
+				}
+				let widget = entry.widget && typeof entry.widget === 'object' ? entry.widget : null
+				if (!widget && typeof entry.widgetId === 'string' && entry.widgetId !== '') {
+					widget = this.availableWidgets.find((w) => w && w.id === entry.widgetId) || null
+					if (!widget) {
+						// eslint-disable-next-line no-console
+						console.warn(`[CnSectionsWidget] section widgetId "${entry.widgetId}" names no widget on this surface; section skipped.`)
+					}
+				}
+				if (!widget || !widget.type) {
+					return
+				}
+				out.push({
+					key: String(entry.key || widget.id || entry.widgetId || `${widget.type}-${index}`),
+					title: this.tr(entry.title || entry.label || ''),
+					description: this.tr(entry.description || ''),
+					column: entry.column === 'side' ? 'side' : 'main',
+					widget: this.shared(widget),
+				})
+			})
+			return out
+		},
+
+		/**
+		 * Whether any section sits in the side column.
+		 *
+		 * @return {boolean}
+		 */
+		twoColumn() {
+			return this.sections.some((section) => section.column === 'side')
+		},
+
+		/**
+		 * The columns to draw, each with its sections in order.
+		 *
+		 * @return {Array<{id: string, sections: Array<object>}>}
+		 * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-sections-widget-can-draw-cards-in-a-main-and-a-side-column
+		 */
+		columns() {
+			if (!this.twoColumn) {
+				return [{ id: 'main', sections: this.sections }]
+			}
+			return [
+				{ id: 'main', sections: this.sections.filter((section) => section.column === 'main') },
+				{ id: 'side', sections: this.sections.filter((section) => section.column === 'side') },
+			]
+		},
+	},
+
+	beforeUnmount() {
+		this.stopObserving()
+	},
+
+	methods: {
+		/**
+		 * Translate through the host app.
+		 *
+		 * @param {string} text The text.
+		 * @return {string}
+		 */
+		tr(text) {
+			if (typeof text !== 'string' || text === '') {
+				return ''
+			}
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
+		},
+
+		/**
+		 * The heading id of a section.
+		 *
+		 * @param {string} key The section key.
+		 * @return {string}
+		 */
+		headingId(key) {
+			return `cn-sections-${this.uid}-${key}`.replace(/[^\w-]/g, '-')
+		},
+
+		/**
+		 * A child definition with the cell budget off: stacked children share
+		 * one cell, so an object list must not size itself to that cell.
+		 *
+		 * @param {object} widget The definition.
+		 * @return {object}
+		 */
+		shared(widget) {
+			const content = widget.content || {}
+			if (Object.hasOwn(content, 'fit')) {
+				return widget
+			}
+			return { ...widget, content: { ...content, fit: false } }
+		},
+
+		/**
+		 * Whether a section shows its heading and takes space.
+		 *
+		 * @param {string} key The section key.
+		 * @return {boolean}
+		 * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-section-whose-widget-draws-nothing-stays-silent
+		 */
+		isShown(key) {
+			return !this.hideEmpty || this.filled[key] === true
+		},
+
+		/**
+		 * Watch one section's host for content, so its heading appears when
+		 * the widget renders and stays away when it never does. A
+		 * MutationObserver, because most widgets mount empty and fill after a
+		 * fetch.
+		 *
+		 * @param {string} key The section key.
+		 * @param {HTMLElement|null} el The host wrapper, or null on teardown.
+		 * @return {void}
+		 */
+		setHostRef(key, el) {
+			this.observers = this.observers || {}
+			if (this.observers[key]) {
+				this.observers[key].disconnect()
+				delete this.observers[key]
+			}
+			if (!el) {
+				return
+			}
+			// Assign only on a change: `filled` drives the template, so an
+			// unconditional write re-renders, mutates, and fires again.
+			const measure = () => {
+				const next = this.hasContent(el)
+				if (this.filled[key] === next) {
+					return
+				}
+				this.filled = { ...this.filled, [key]: next }
+			}
+			if (typeof MutationObserver === 'function') {
+				const observer = new MutationObserver(measure)
+				observer.observe(el, { childList: true, subtree: true, characterData: true })
+				this.observers[key] = observer
+			}
+			// Not synchronously: a ref callback runs during the patch.
+			this.$nextTick(measure)
+		},
+
+		/**
+		 * Whether a host rendered anything a reader would see: text (an empty
+		 * state counts), or a graphical or interactive element.
+		 *
+		 * @param {HTMLElement} el The host wrapper.
+		 * @return {boolean}
+		 */
+		hasContent(el) {
+			if (!el) {
+				return false
+			}
+			if (el.textContent && el.textContent.trim().length > 0) {
+				return true
+			}
+			return el.querySelector('img, svg, canvas, table, input, button, select, textarea') !== null
+		},
+
+		/**
+		 * Drop every observer.
+		 *
+		 * @return {void}
+		 */
+		stopObserving() {
+			for (const observer of Object.values(this.observers || {})) {
+				observer.disconnect()
+			}
+			this.observers = {}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-sections-widget {
+	min-width: 0;
+}
+
+.cn-sections-widget__column {
+	display: flex;
+	flex-direction: column;
+	gap: calc(var(--default-grid-baseline, 4px) * 4);
+	min-width: 0;
+}
+
+/* A main and a side column (the settings boards: 1fr and 418px, 20px apart). */
+.cn-sections-widget--two-column {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) minmax(280px, 418px);
+	gap: 20px;
+	align-items: start;
+}
+
+@media (max-width: 1024px) {
+	.cn-sections-widget--two-column {
+		grid-template-columns: minmax(0, 1fr);
+	}
+}
+
+/* A host page may space every <section>; these sections are spaced by the column gap only. */
+.cn-sections-widget__section {
+	margin: 0;
+	min-width: 0;
+}
+
+/* A rule above a section that follows a shown one. */
+.cn-sections-widget:not(.cn-sections-widget--cards) .cn-sections-widget__section:not(.cn-sections-widget__section--empty) ~ .cn-sections-widget__section {
+	padding-top: calc(var(--default-grid-baseline, 4px) * 4);
+	border-top: 1px solid var(--color-border);
+}
+
+/*
+ * An empty section keeps its host mounted (display: none still mounts it, so
+ * the widget fetches and can fill later) but takes no space, gap or rule.
+ */
+.cn-sections-widget__section--empty {
+	display: none;
+}
+
+.cn-sections-widget__heading {
+	margin: 0 0 calc(var(--default-grid-baseline, 4px) * 2);
+	font-size: 16px;
+	font-weight: 600;
+	color: var(--color-main-text);
+}
+
+.cn-sections-widget__description {
+	margin: calc(var(--default-grid-baseline, 4px) * -1) 0 calc(var(--default-grid-baseline, 4px) * 3);
+	color: var(--color-text-maxcontrast);
+}
+
+/* One card per section. */
+.cn-sections-widget--cards .cn-sections-widget__column {
+	gap: 20px;
+}
+
+.cn-sections-widget--cards .cn-sections-widget__section {
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border);
+	border-radius: var(--cn-board-card-radius, var(--border-radius-large, 12px));
+	padding: var(--cn-board-card-padding, 16px 20px);
+}
+
+.cn-sections-widget--cards .cn-sections-widget__heading {
+	font-size: 18px;
+	margin-bottom: 12px;
+}
+</style>

package/src/components/CnSectionsWidget/index.js

@@ -0,0 +1,34 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * CnSectionsWidget — self-registers the `sections` widget type (several
+ * widgets in one place, each under its own heading, optionally as cards in a
+ * main and a side column) into the shared dashboardWidgetRegistry at module
+ * load. Renderer only: the sections are declared in the manifest.
+ */
+
+import CnSectionsWidget from './CnSectionsWidget.vue'
+import { registerDashboardWidget } from '../CnWidgetGrid/dashboardWidgetRegistry.js'
+
+registerDashboardWidget('sections', {
+	renderer: CnSectionsWidget,
+	form: null,
+	defaultContent: {
+		sections: [],
+		cards: false,
+		hideEmpty: true,
+	},
+	displayName: 'Sections',
+	icon: 'ViewSequential',
+	// Renders OTHER widgets, so CnDetailWidgetHost hands it the surface's
+	// sibling definitions and the context its children need.
+	container: true,
+	// The section headings are the titles; a card header above them would
+	// name the group twice.
+	ownsTitle: true,
+	surfaces: ['detail-page'],
+})
+
+export { CnSectionsWidget }
+export default CnSectionsWidget

package/src/components/CnStagesWidget/CnStagesWidget.vue

@@ -178,8 +178,10 @@ import {
 	readAvailableActions,
 	transitionError,
 } from '../../composables/useLifecycleTransitions.js'
+import { normalizeLook } from '../../composables/useLook.js'
 import { useObjectStore } from '../../store/useObjectStore.js'
 import { resolveObjectOpType } from '../../utils/actionsDispatcher.js'
+import { formatBoardDate } from '../../utils/boardDate.js'
 import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js'
 import {
 	dropOptionalUnresolved,
@@ -264,6 +266,14 @@ function userError(message) {
  *   labelField?, descriptionField?, finalField?, limit? }`, an OpenRegister
  *   query whose filter takes the same tokens.
  *
+ * `datesSource`: `{ url, method?, params?, path?, idField?, dateField? }`, an
+ * endpoint (same token grammar) answering the date the record reached each
+ * stage, when the stage list does not carry it: the case type's statuses list
+ * the steps, `/blueprint?case=@objectId` says when this case reached them.
+ * Read once, merged into the steps by `idField` (default `id`) with the value
+ * at `dateField` (default `reachedAt`); a date it does not give falls back to
+ * the stage list's own `dateField`. The bars variant draws it.
+ *
  * `finalField` marks the stages that close the record, which the timeline
  * draws differently. It grants nothing either.
  *
@@ -356,7 +366,7 @@ export default {
 		 * `label`, the placement's own title, so a titled card does not have to
 		 * repeat itself, and then to "Stages".
 		 *
-		 * @type {{currentField?: string, stagesEndpoint?: object, stagesSource?: object, transition?: object, unreachableReason?: string, orientation?: ('horizontal'|'vertical'), size?: ('medium'|'small'), ariaLabel?: string, label?: string, variant?: ('dots'|'bars')}}
+		 * @type {{currentField?: string, stagesEndpoint?: object, stagesSource?: object, transition?: object, unreachableReason?: string, orientation?: ('horizontal'|'vertical'), size?: ('medium'|'small'), ariaLabel?: string, label?: string, variant?: ('dots'|'bars'), datesSource?: {url: string, method?: string, params?: object, path?: string, idField?: string, dateField?: string}}}
 		 */
 		content: {
 			type: Object,
@@ -437,6 +447,8 @@ export default {
 		const workspaceRaw = inject('cnWorkspaceContext', ref({}))
 		const appConfigRaw = inject('cnAppConfig', ref({}))
 		const cnTranslate = inject('cnTranslate', (key) => key)
+		// The app's look (`nextcloud` or `board`), provided by CnAppRoot or CnPageRenderer.
+		const cnLook = inject('cnLook', 'nextcloud')
 
 		/**
 		 * The token context: the bound record, its id, and the page context.
@@ -462,15 +474,24 @@ export default {
 			return (cfg && cfg.url) ? { url: cfg.url, method: cfg.method, params: cfg.params } : null
 		}, { ctx: tokenCtx })
 
+		// The dates the record reached each stage, when they live apart from
+		// the stage list (`datesSource`): one read, merged into the steps by id.
+		const datesRead = useEndpointSource(() => {
+			const cfg = props.content?.datesSource
+			return (cfg && cfg.url) ? { url: cfg.url, method: cfg.method, params: cfg.params } : null
+		}, { ctx: tokenCtx })
+
 		return {
 			detailCtxRaw,
 			objectCtxRaw,
 			cnTranslate,
+			cnLook,
 			tokenCtx,
 			stagesBody: stagesRead.data,
 			stagesBodyLoading: stagesRead.loading,
 			stagesBodyError: stagesRead.error,
 			stagesBodyBlocked: stagesRead.blocked,
+			datesBody: datesRead.data,
 		}
 	},
 
@@ -614,6 +635,42 @@ export default {
 			return normalizeStages(rows, { ...cfg, orderField })
 		},
 
+		/**
+		 * The reached dates by stage id, from `datesSource`: the rows at its
+		 * `path` (or the response itself when it is a list), keyed by
+		 * `idField` (default `id`), the value at `dateField` (default
+		 * `reachedAt`). Empty without the option, while it loads, or when it
+		 * failed: the steps then show the stage list's own dates.
+		 *
+		 * @return {{[id: string]: string}} Date by stage id.
+		 * @spec openspec/changes/screens-stage-dates-source/specs/stage-dates-source/spec.md#requirement-the-reached-dates-can-come-from-their-own-endpoint
+		 */
+		stageDates() {
+			const cfg = this.content.datesSource
+			const body = this.datesBody
+			if (!cfg || !cfg.url || body === null || body === undefined) {
+				return {}
+			}
+			const rows = Array.isArray(body) ? body : getByPath(body, cfg.path || '')
+			if (!Array.isArray(rows)) {
+				return {}
+			}
+			const idField = cfg.idField || 'id'
+			const dateField = cfg.dateField || 'reachedAt'
+			const out = {}
+			for (const row of rows) {
+				if (!row || typeof row !== 'object') {
+					continue
+				}
+				const id = getByPath(row, idField)
+				const date = getByPath(row, dateField)
+				if (id !== null && id !== undefined && id !== '' && typeof date === 'string' && date !== '') {
+					out[String(id)] = date
+				}
+			}
+			return out
+		},
+
 		/**
 		 * Whether the stage list is still on its way.
 		 *
@@ -795,7 +852,7 @@ export default {
 				}
 				return {
 					...stage,
-					date: this.stages[index]?.date || '',
+					date: this.barDate(this.stageDates[stage.id] || this.stages[index]?.date || '', state),
 					state,
 					clickable: this.interactive && state !== 'current',
 				}
@@ -891,6 +948,28 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * A bar's date line. Under the board look a date value reads in the
+		 * board's short form ("3 okt"), and the current step's reads "sinds
+		 * 4 okt", as DqZaak draws it. Any other value, and every value outside
+		 * the board look, shows as written.
+		 *
+		 * @param {string} value The `dateField` value of the stage row.
+		 * @param {string} state The bar state (`done`, `current`, `todo`).
+		 * @return {string} The date line, or ''.
+		 * @spec openspec/changes/screens-stage-bar-dates-parity/specs/stage-bar-dates/spec.md#requirement-a-bar-date-reads-as-the-board-draws-it
+		 */
+		barDate(value, state) {
+			if (!value || normalizeLook(this.cnLook) !== 'board') {
+				return value
+			}
+			const short = formatBoardDate(value)
+			if (short === '') {
+				return value
+			}
+			return state === 'current' ? t('nextcloud-vue', 'since {date}', { date: short }) : short
+		},
+
 		/**
 		 * Translate a library string.
 		 *

package/src/components/CnStatWidget/CnStatWidget.vue

@@ -46,7 +46,7 @@
 					aria-hidden="true">
 					<CnWidgetIcon :name="resolvedIcon" :size="18" />
 				</span>
-				<span v-if="content.label" :title="resolvedLabel">{{ resolvedLabel }}</span>
+				<span v-if="content.label" class="cn-kpi-card__title-text" :title="resolvedLabel">{{ resolvedLabel }}</span>
 
 				<!-- Per-tile range override. Rendered ONLY when the tile declares its
 				     own `content.dateRange.presets`; a tile that merely follows the