@conduction/nextcloud-vue 2.78.0 → 2.80.0

package/dist/esm/components/CnSectionsWidget/CnSectionsWidget.vue2.js

@@ -0,0 +1,351 @@
+import __sfc_main from '../CnDetailWidgetHost/CnDetailWidgetHost.vue.js';
+
+/** 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
+ */
+var script = {
+	name: 'CnSectionsWidget',
+
+	components: { CnDetailWidgetHost: __sfc_main },
+
+	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 = {};
+		},
+	},
+};
+
+export { script as default };
+//# sourceMappingURL=CnSectionsWidget.vue2.js.map

package/dist/esm/components/CnSectionsWidget/CnSectionsWidget.vue2.js.map

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

package/dist/esm/components/CnSectionsWidget/CnSectionsWidget.vue3.js

@@ -0,0 +1,71 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, toDisplayString, createCommentVNode, createElementVNode, createVNode } from 'vue';
+
+const _hoisted_1 = ["aria-labelledby", "data-testid"];
+const _hoisted_2 = ["id"];
+const _hoisted_3 = {
+  key: 1,
+  class: "cn-sections-widget__description"
+};
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CnDetailWidgetHost = resolveComponent("CnDetailWidgetHost");
+
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(["cn-sections-widget", {
+			'cn-sections-widget--cards': $options.cards,
+			'cn-sections-widget--two-column': $options.twoColumn,
+		}]),
+    "data-testid": "cn-sections-widget"
+  }, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList($options.columns, (column) => {
+      return (openBlock(), createElementBlock("div", {
+        key: column.id,
+        class: normalizeClass(["cn-sections-widget__column", `cn-sections-widget__column--${column.id}`])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(column.sections, (section) => {
+          return (openBlock(), createElementBlock("section", {
+            key: section.key,
+            class: normalizeClass(["cn-sections-widget__section", { 'cn-sections-widget__section--empty': !$options.isShown(section.key) }]),
+            "aria-labelledby": section.title && $options.isShown(section.key) ? $options.headingId(section.key) : undefined,
+            "data-testid": `cn-section-${section.key}`
+          }, [
+            (section.title && $options.isShown(section.key))
+              ? (openBlock(), createElementBlock("h3", {
+                  key: 0,
+                  id: $options.headingId(section.key),
+                  class: "cn-sections-widget__heading"
+                }, toDisplayString(section.title), 9 /* TEXT, PROPS */, _hoisted_2))
+              : createCommentVNode("v-if", true),
+            (section.description && $options.isShown(section.key))
+              ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(section.description), 1 /* TEXT */))
+              : createCommentVNode("v-if", true),
+            createElementVNode("div", {
+              ref_for: true,
+              ref: (el) => $options.setHostRef(section.key, el),
+              class: "cn-sections-widget__body"
+            }, [
+              createVNode(_component_CnDetailWidgetHost, {
+                widget: section.widget,
+                chrome: "bare",
+                objectId: $props.objectId,
+                object: $props.objectData,
+                objectType: $props.objectType,
+                schemaObject: $props.schemaObject,
+                register: $props.register,
+                schema: $props.schema,
+                store: $props.store,
+                surface: $props.surface,
+                integrationContext: $props.integrationContext,
+                cnRegistry: $props.cnRegistry,
+                availableWidgets: $props.availableWidgets
+              }, null, 8 /* PROPS */, ["widget", "objectId", "object", "objectType", "schemaObject", "register", "schema", "store", "surface", "integrationContext", "cnRegistry", "availableWidgets"])
+            ], 512 /* NEED_PATCH */)
+          ], 10 /* CLASS, PROPS */, _hoisted_1))
+        }), 128 /* KEYED_FRAGMENT */))
+      ], 2 /* CLASS */))
+    }), 128 /* KEYED_FRAGMENT */))
+  ], 2 /* CLASS */))
+}
+
+export { render };
+//# sourceMappingURL=CnSectionsWidget.vue3.js.map

package/dist/esm/components/CnSectionsWidget/CnSectionsWidget.vue3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CnSectionsWidget.vue3.js","sources":["../../../../src/components/CnSectionsWidget/CnSectionsWidget.vue?vue&type=template&id=ea4f8722&lang.js"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<div\n\t\tclass=\"cn-sections-widget\"\n\t\t:class=\"{\n\t\t\t'cn-sections-widget--cards': cards,\n\t\t\t'cn-sections-widget--two-column': twoColumn,\n\t\t}\"\n\t\tdata-testid=\"cn-sections-widget\">\n\t\t<div\n\t\t\tv-for=\"column in columns\"\n\t\t\t:key=\"column.id\"\n\t\t\tclass=\"cn-sections-widget__column\"\n\t\t\t:class=\"`cn-sections-widget__column--${column.id}`\">\n\t\t\t<section\n\t\t\t\tv-for=\"section in column.sections\"\n\t\t\t\t:key=\"section.key\"\n\t\t\t\tclass=\"cn-sections-widget__section\"\n\t\t\t\t:class=\"{ 'cn-sections-widget__section--empty': !isShown(section.key) }\"\n\t\t\t\t:aria-labelledby=\"section.title && isShown(section.key) ? headingId(section.key) : undefined\"\n\t\t\t\t:data-testid=\"`cn-section-${section.key}`\">\n\t\t\t\t<!-- The heading waits for content: a widget type that does not\n\t\t\t\t     resolve renders nothing, and a heading over nothing is a\n\t\t\t\t     label on a void. -->\n\t\t\t\t<h3\n\t\t\t\t\tv-if=\"section.title && isShown(section.key)\"\n\t\t\t\t\t:id=\"headingId(section.key)\"\n\t\t\t\t\tclass=\"cn-sections-widget__heading\">\n\t\t\t\t\t{{ section.title }}\n\t\t\t\t</h3>\n\t\t\t\t<p\n\t\t\t\t\tv-if=\"section.description && isShown(section.key)\"\n\t\t\t\t\tclass=\"cn-sections-widget__description\">\n\t\t\t\t\t{{ section.description }}\n\t\t\t\t</p>\n\t\t\t\t<!-- The host always mounts, also while the section reads as\n\t\t\t\t     empty: a widget that has not mounted cannot fetch, so it\n\t\t\t\t     could never gain the content that would show it. -->\n\t\t\t\t<div :ref=\"(el) => setHostRef(section.key, el)\" class=\"cn-sections-widget__body\">\n\t\t\t\t\t<CnDetailWidgetHost\n\t\t\t\t\t\t:widget=\"section.widget\"\n\t\t\t\t\t\tchrome=\"bare\"\n\t\t\t\t\t\t:objectId=\"objectId\"\n\t\t\t\t\t\t:object=\"objectData\"\n\t\t\t\t\t\t:objectType=\"objectType\"\n\t\t\t\t\t\t:schemaObject=\"schemaObject\"\n\t\t\t\t\t\t:register=\"register\"\n\t\t\t\t\t\t:schema=\"schema\"\n\t\t\t\t\t\t:store=\"store\"\n\t\t\t\t\t\t:surface=\"surface\"\n\t\t\t\t\t\t:integrationContext=\"integrationContext\"\n\t\t\t\t\t\t:cnRegistry=\"cnRegistry\"\n\t\t\t\t\t\t:availableWidgets=\"availableWidgets\" />\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport CnDetailWidgetHost from '../CnDetailWidgetHost/CnDetailWidgetHost.vue'\n\n/** Counter for unique heading ids across instances. */\nlet instanceCounter = 0\n\n/**\n * CnSectionsWidget — the `sections` widget: several widgets in one place,\n * each under its own heading.\n *\n * A tab strip binds one widget per tab, and a tab often holds more than one\n * thing: the documents list and the case folder (DqZaak), a portal's details\n * form, house style and sign-in (PtPortalInstellingen). This widget stacks\n * them as sections under headings with a rule between them (the default), or\n * as one card per section (`cards: true`), optionally in a main and a side\n * column (`column: \"side\"` on a section). A single column of separate titled\n * cards in a tab is the tabs widget's own `widgetIds` stack; this widget is\n * for headed sections, and for the two-column card grid a settings tab draws.\n *\n * ```json\n * {\n *   \"type\": \"sections\",\n *   \"content\": {\n *     \"sections\": [\n *       { \"title\": \"Documenten\", \"widgetId\": \"case-documents\" },\n *       { \"title\": \"Zaakmap\", \"widget\": { \"type\": \"files\" } }\n *     ]\n *   }\n * }\n * ```\n *\n * A section names its widget inline (`widget`) or by id (`widgetId`, a\n * sibling definition on the same surface). Children render through\n * `CnDetailWidgetHost` in bare mode, the dispatch a tab panel uses, so a child\n * behaves here as it does in a tab. A section whose widget draws nothing\n * shows no heading and takes no space (`hideEmpty`, default true). Stacked\n * children share one cell, so an object list in a section renders every\n * fetched row (`content.fit: false`) unless its definition says otherwise.\n *\n * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md\n */\nexport default {\n\tname: 'CnSectionsWidget',\n\n\tcomponents: { CnDetailWidgetHost },\n\n\tinject: {\n\t\tcnTranslate: { default: () => (key) => key },\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The widget configuration.\n\t\t *\n\t\t * - `sections` — `[{ key?, title?, description?, column?, widget? | widgetId? }]`, in order.\n\t\t *   `label` is accepted as an alias of `title`; `column` is `main` (default) or `side`.\n\t\t * - `cards` — draw each section as its own card (default false: headings and a rule between sections).\n\t\t * - `hideEmpty` — hide the heading and the space of a section whose widget drew nothing (default true).\n\t\t *\n\t\t * @type {{sections?: Array<object>, cards?: boolean, hideEmpty?: boolean}}\n\t\t */\n\t\tcontent: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\n\t\t/** Sibling widget definitions on the surface, for `widgetId` sections. */\n\t\tavailableWidgets: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** The bound record's id. */\n\t\tobjectId: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The loaded record, or null while it is still being fetched. */\n\t\tobjectData: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** The resolved object-type slug. */\n\t\tobjectType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The resolved JSON Schema object, needed by a `data` child. */\n\t\tschemaObject: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** OpenRegister register slug of the surface. */\n\t\tregister: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** OpenRegister schema slug of the surface. */\n\t\tschema: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The effective object store. */\n\t\tstore: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** Rendering surface forwarded to the children. */\n\t\tsurface: {\n\t\t\ttype: String,\n\t\t\tdefault: 'detail-page',\n\t\t},\n\n\t\t/** Object context forwarded to integration children. */\n\t\tintegrationContext: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** The consumer's component registry, for custom child widget types. */\n\t\tcnRegistry: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\n\n\tdata() {\n\t\tinstanceCounter += 1\n\t\treturn {\n\t\t\tuid: instanceCounter,\n\t\t\t/**\n\t\t\t * Section key to \"has this section rendered anything\".\n\t\t\t *\n\t\t\t * @type {Record<string, boolean>}\n\t\t\t */\n\t\t\tfilled: {},\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Whether each section is its own card.\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tcards() {\n\t\t\treturn this.content?.cards === true\n\t\t},\n\n\t\t/**\n\t\t * Whether an empty section hides.\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\thideEmpty() {\n\t\t\treturn this.content?.hideEmpty !== false\n\t\t},\n\n\t\t/**\n\t\t * The sections to render: a stable key, a translated title, the column\n\t\t * and the widget definition. A section whose widget cannot be found is\n\t\t * dropped (with a development warning for an unknown id).\n\t\t *\n\t\t * @return {Array<{key: string, title: string, description: string, column: string, widget: object}>}\n\t\t * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-sections-widget-stacks-configured-widgets-under-headings\n\t\t */\n\t\tsections() {\n\t\t\tconst raw = Array.isArray(this.content?.sections) ? this.content.sections : []\n\t\t\tconst out = []\n\t\t\traw.forEach((entry, index) => {\n\t\t\t\tif (!entry || typeof entry !== 'object') {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tlet widget = entry.widget && typeof entry.widget === 'object' ? entry.widget : null\n\t\t\t\tif (!widget && typeof entry.widgetId === 'string' && entry.widgetId !== '') {\n\t\t\t\t\twidget = this.availableWidgets.find((w) => w && w.id === entry.widgetId) || null\n\t\t\t\t\tif (!widget) {\n\t\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\t\tconsole.warn(`[CnSectionsWidget] section widgetId \"${entry.widgetId}\" names no widget on this surface; section skipped.`)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (!widget || !widget.type) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tout.push({\n\t\t\t\t\tkey: String(entry.key || widget.id || entry.widgetId || `${widget.type}-${index}`),\n\t\t\t\t\ttitle: this.tr(entry.title || entry.label || ''),\n\t\t\t\t\tdescription: this.tr(entry.description || ''),\n\t\t\t\t\tcolumn: entry.column === 'side' ? 'side' : 'main',\n\t\t\t\t\twidget: this.shared(widget),\n\t\t\t\t})\n\t\t\t})\n\t\t\treturn out\n\t\t},\n\n\t\t/**\n\t\t * Whether any section sits in the side column.\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\ttwoColumn() {\n\t\t\treturn this.sections.some((section) => section.column === 'side')\n\t\t},\n\n\t\t/**\n\t\t * The columns to draw, each with its sections in order.\n\t\t *\n\t\t * @return {Array<{id: string, sections: Array<object>}>}\n\t\t * @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\n\t\t */\n\t\tcolumns() {\n\t\t\tif (!this.twoColumn) {\n\t\t\t\treturn [{ id: 'main', sections: this.sections }]\n\t\t\t}\n\t\t\treturn [\n\t\t\t\t{ id: 'main', sections: this.sections.filter((section) => section.column === 'main') },\n\t\t\t\t{ id: 'side', sections: this.sections.filter((section) => section.column === 'side') },\n\t\t\t]\n\t\t},\n\t},\n\n\tbeforeUnmount() {\n\t\tthis.stopObserving()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Translate through the host app.\n\t\t *\n\t\t * @param {string} text The text.\n\t\t * @return {string}\n\t\t */\n\t\ttr(text) {\n\t\t\tif (typeof text !== 'string' || text === '') {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t\treturn typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text\n\t\t},\n\n\t\t/**\n\t\t * The heading id of a section.\n\t\t *\n\t\t * @param {string} key The section key.\n\t\t * @return {string}\n\t\t */\n\t\theadingId(key) {\n\t\t\treturn `cn-sections-${this.uid}-${key}`.replace(/[^\\w-]/g, '-')\n\t\t},\n\n\t\t/**\n\t\t * A child definition with the cell budget off: stacked children share\n\t\t * one cell, so an object list must not size itself to that cell.\n\t\t *\n\t\t * @param {object} widget The definition.\n\t\t * @return {object}\n\t\t */\n\t\tshared(widget) {\n\t\t\tconst content = widget.content || {}\n\t\t\tif (Object.hasOwn(content, 'fit')) {\n\t\t\t\treturn widget\n\t\t\t}\n\t\t\treturn { ...widget, content: { ...content, fit: false } }\n\t\t},\n\n\t\t/**\n\t\t * Whether a section shows its heading and takes space.\n\t\t *\n\t\t * @param {string} key The section key.\n\t\t * @return {boolean}\n\t\t * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-section-whose-widget-draws-nothing-stays-silent\n\t\t */\n\t\tisShown(key) {\n\t\t\treturn !this.hideEmpty || this.filled[key] === true\n\t\t},\n\n\t\t/**\n\t\t * Watch one section's host for content, so its heading appears when\n\t\t * the widget renders and stays away when it never does. A\n\t\t * MutationObserver, because most widgets mount empty and fill after a\n\t\t * fetch.\n\t\t *\n\t\t * @param {string} key The section key.\n\t\t * @param {HTMLElement|null} el The host wrapper, or null on teardown.\n\t\t * @return {void}\n\t\t */\n\t\tsetHostRef(key, el) {\n\t\t\tthis.observers = this.observers || {}\n\t\t\tif (this.observers[key]) {\n\t\t\t\tthis.observers[key].disconnect()\n\t\t\t\tdelete this.observers[key]\n\t\t\t}\n\t\t\tif (!el) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Assign only on a change: `filled` drives the template, so an\n\t\t\t// unconditional write re-renders, mutates, and fires again.\n\t\t\tconst measure = () => {\n\t\t\t\tconst next = this.hasContent(el)\n\t\t\t\tif (this.filled[key] === next) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.filled = { ...this.filled, [key]: next }\n\t\t\t}\n\t\t\tif (typeof MutationObserver === 'function') {\n\t\t\t\tconst observer = new MutationObserver(measure)\n\t\t\t\tobserver.observe(el, { childList: true, subtree: true, characterData: true })\n\t\t\t\tthis.observers[key] = observer\n\t\t\t}\n\t\t\t// Not synchronously: a ref callback runs during the patch.\n\t\t\tthis.$nextTick(measure)\n\t\t},\n\n\t\t/**\n\t\t * Whether a host rendered anything a reader would see: text (an empty\n\t\t * state counts), or a graphical or interactive element.\n\t\t *\n\t\t * @param {HTMLElement} el The host wrapper.\n\t\t * @return {boolean}\n\t\t */\n\t\thasContent(el) {\n\t\t\tif (!el) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tif (el.textContent && el.textContent.trim().length > 0) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\treturn el.querySelector('img, svg, canvas, table, input, button, select, textarea') !== null\n\t\t},\n\n\t\t/**\n\t\t * Drop every observer.\n\t\t *\n\t\t * @return {void}\n\t\t */\n\t\tstopObserving() {\n\t\t\tfor (const observer of Object.values(this.observers || {})) {\n\t\t\t\tobserver.disconnect()\n\t\t\t}\n\t\t\tthis.observers = {}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-sections-widget {\n\tmin-width: 0;\n}\n\n.cn-sections-widget__column {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(var(--default-grid-baseline, 4px) * 4);\n\tmin-width: 0;\n}\n\n/* A main and a side column (the settings boards: 1fr and 418px, 20px apart). */\n.cn-sections-widget--two-column {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr) minmax(280px, 418px);\n\tgap: 20px;\n\talign-items: start;\n}\n\n@media (max-width: 1024px) {\n\t.cn-sections-widget--two-column {\n\t\tgrid-template-columns: minmax(0, 1fr);\n\t}\n}\n\n/* A host page may space every <section>; these sections are spaced by the column gap only. */\n.cn-sections-widget__section {\n\tmargin: 0;\n\tmin-width: 0;\n}\n\n/* A rule above a section that follows a shown one. */\n.cn-sections-widget:not(.cn-sections-widget--cards) .cn-sections-widget__section:not(.cn-sections-widget__section--empty) ~ .cn-sections-widget__section {\n\tpadding-top: calc(var(--default-grid-baseline, 4px) * 4);\n\tborder-top: 1px solid var(--color-border);\n}\n\n/*\n * An empty section keeps its host mounted (display: none still mounts it, so\n * the widget fetches and can fill later) but takes no space, gap or rule.\n */\n.cn-sections-widget__section--empty {\n\tdisplay: none;\n}\n\n.cn-sections-widget__heading {\n\tmargin: 0 0 calc(var(--default-grid-baseline, 4px) * 2);\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n}\n\n.cn-sections-widget__description {\n\tmargin: calc(var(--default-grid-baseline, 4px) * -1) 0 calc(var(--default-grid-baseline, 4px) * 3);\n\tcolor: var(--color-text-maxcontrast);\n}\n\n/* One card per section. */\n.cn-sections-widget--cards .cn-sections-widget__column {\n\tgap: 20px;\n}\n\n.cn-sections-widget--cards .cn-sections-widget__section {\n\tbackground: var(--color-main-background);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--cn-board-card-radius, var(--border-radius-large, 12px));\n\tpadding: var(--cn-board-card-padding, 16px 20px);\n}\n\n.cn-sections-widget--cards .cn-sections-widget__heading {\n\tfont-size: 18px;\n\tmargin-bottom: 12px;\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_openBlock","_renderList","_toDisplayString","_createElementVNode"],"mappings":";;;;;;AAyCS,EAAA,KAAC,EAAC,iCAAiC;;;;;;;AA7B1C,IAAA,KAAK,kBAAC,oBAAoB,EAAA;gCACvB,QAAA,CAAA,KAAA;qCAAA,QAAA,CAAA,SAAA;;iBAIQ,EAAC,oBAAoB;;sBAC/BA,8CACiB,QAAO,CAAA,OAAA,EAAA,CAAjB,MAAM,KAAA;2BADbA;QAEC,GAAG,EAAE,MAAM,CAAC,EAAE;AACd,QAAA,KAAI,EAACC,cAAA,CAAA,CAAA,4BAA4B,EACK,CAAA,4BAAA,EAAA,MAAM,CAAC,EAAC,CAAA,CAAA,CAAA,CAAA;;AAC9C,SAAAC,SAAA,CAAA,IAAA,CAAA,EAAAF,kBAAA,SACkB,EAAA,IAAA,EAAAG,UAAA,CAAA,MAAM,CAAC,QAAQ,GAA1B,OAAO,KAAA;+BADdH;YAEC,GAAI,EAAC,OAAO,CAAC,GAAG;iBACZ,kBAAC,6BAA4B,EAAA,EAAA,oCAAA,EAAA,CACV,gBAAA,CAAA,OAAA,CAAA,GAAA,CAAA,EAAA,CAAA,CAAA;AACvB,YAAA,iBAAC,EAAA,OAAA,CAAA,KAAA,IAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,IAAA,QAAA,CAAA,SAAA,CAAA,OAAA,CAAA,GAAA,IAAA,SAAA;YACD,aAAW,EAAA,CAAA,WAAA,EAAgB,OAAO,CAAC,GAAG,CAAA,CAAA;;AAKtC,YAAA,CAAA,OAAA,CAAA,KAAA,IAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,CAAA;8BADDA,kBAKG,CAAA,IAAA,EAAA;;AAHD,kBAAA,EAAE,EAAE,QAAA,CAAA,SAAS,CAAC,OAAO,CAAC,GAAG,CAAA;AAC1B,kBAAA,KAAK,EAAC,6BAA6B;AAChC,iBAAA,EAAAI,eAAA,CAAA,OAAO,CAAC,KAAK,CAAA,EAAA,CAAA,oBAAA,UAAA,CAAA;;AAGV,YAAA,CAAA,OAAO,CAAC,WAAW,IAAI,gBAAO,CAAC,OAAO,CAAC,GAAG,CAAA;AADjD,iBAAAF,SAAA,EAAA,EAAAF,kBAAA,CAII,GAJJ,EAAA,UAII,EADCI,eAAA,CAAA,OAAM,CAAC,WAAW,CAAA,EAAA,CAAA,YAAA;;YAKrBC;;cAAI,GAAG,EAAA,CAAG,EAAE,KAAK,QAAA,CAAA,UAAE,CAAA,OAAA,CAAA,GAAA,EAAA,EAAA,CAAA;AAAA,cAAA,KAAA,EAAA,0BAAA;;;gBAElB,MAAM,EAAE,OAAO,CAAC,MAAM;AACvB,gBAAA,MAAM,EAAC,MAAM;AACZ,gBAAA,QAAQ,EAAE,MAAI,CAAA,QAAA;AACd,gBAAA,MAAM,EAAE,MAAI,CAAA,UAAA;AACZ,gBAAA,UAAU,EAAE,MAAI,CAAA,UAAA;AAChB,gBAAA,YAAY,EAAE,MAAY,CAAA,YAAA;AAC1B,gBAAA,QAAQ,EAAE,MAAQ,CAAA,QAAA;AAClB,gBAAA,MAAM,EAAE,MAAM,CAAA,MAAA;AACd,gBAAA,KAAE,EAAA,MAAA,CAAA,KAAA;AACF,gBAAA,OAAK,EAAA,MAAA,CAAA,OAAA;AACL,gBAAA,kBAAA,EAAA,MAAA,CAAA,kBAAA;AACD,gBAAA,UAAA,EAAA,MAAA,CAAA,UAAA;;;;;;;;;;;;;"}

package/dist/esm/components/CnSectionsWidget/index.js

@@ -0,0 +1,35 @@
+import __sfc_main from './CnSectionsWidget.vue.js';
+import { registerDashboardWidget } from '../CnWidgetGrid/dashboardWidgetRegistry.js';
+
+/**
+ * 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.
+ */
+
+
+registerDashboardWidget('sections', {
+	renderer: __sfc_main,
+	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 { __sfc_main as CnSectionsWidget, __sfc_main as default };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/CnSectionsWidget/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/CnSectionsWidget/index.js"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2026 Conduction B.V.\n * SPDX-License-Identifier: EUPL-1.2\n *\n * CnSectionsWidget — self-registers the `sections` widget type (several\n * widgets in one place, each under its own heading, optionally as cards in a\n * main and a side column) into the shared dashboardWidgetRegistry at module\n * load. Renderer only: the sections are declared in the manifest.\n */\n\nimport CnSectionsWidget from './CnSectionsWidget.vue'\nimport { registerDashboardWidget } from '../CnWidgetGrid/dashboardWidgetRegistry.js'\n\nregisterDashboardWidget('sections', {\n\trenderer: CnSectionsWidget,\n\tform: null,\n\tdefaultContent: {\n\t\tsections: [],\n\t\tcards: false,\n\t\thideEmpty: true,\n\t},\n\tdisplayName: 'Sections',\n\ticon: 'ViewSequential',\n\t// Renders OTHER widgets, so CnDetailWidgetHost hands it the surface's\n\t// sibling definitions and the context its children need.\n\tcontainer: true,\n\t// The section headings are the titles; a card header above them would\n\t// name the group twice.\n\townsTitle: true,\n\tsurfaces: ['detail-page'],\n})\n\nexport { CnSectionsWidget }\nexport default CnSectionsWidget\n"],"names":["CnSectionsWidget"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA,uBAAuB,CAAC,UAAU,EAAE;AACpC,CAAC,QAAQ,EAAEA,UAAgB;AAC3B,CAAC,IAAI,EAAE,IAAI;AACX,CAAC,cAAc,EAAE;AACjB,EAAE,QAAQ,EAAE,EAAE;AACd,EAAE,KAAK,EAAE,KAAK;AACd,EAAE,SAAS,EAAE,IAAI;AACjB,EAAE;AACF,CAAC,WAAW,EAAE,UAAU;AACxB,CAAC,IAAI,EAAE,gBAAgB;AACvB;AACA;AACA,CAAC,SAAS,EAAE,IAAI;AAChB;AACA;AACA,CAAC,SAAS,EAAE,IAAI;AAChB,CAAC,QAAQ,EAAE,CAAC,aAAa,CAAC;AAC1B,CAAC;;;;"}