@conduction/nextcloud-vue 2.100.0 → 2.102.0

package/dist/esm/components/CnFilesBrowser/filesReview.js

@@ -0,0 +1,61 @@
+import { fileColumnValue } from './filesBrowserColumns.js';
+
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+
+/** The tones a review segment may take; anything else draws as `default`. */
+const TONES = ['success', 'warning', 'error', 'info', 'default'];
+
+/**
+ * The review summary of a file list (DqZaakDocumenten "4 van 7 beoordeeld"):
+ * how many files carry each review value, read from the host's row data.
+ *
+ * `spec` is `{ key, open, values: [{ value, label?, tone? }] }`: `key` is the
+ * row-data field that holds the review state, `open` the value (or values) of
+ * a file still to review. A file with no value, or one not listed, counts as
+ * open. Values compare without case.
+ *
+ * @param {object} spec The summary declaration.
+ * @param {Array<object>} nodes The file nodes (folders already left out).
+ * @param {object|null} rowData The host's row data, by file id.
+ * @return {{total: number, done: number, open: number, segments: Array<{value: string, label: string, tone: string, count: number, share: number}>}|null}
+ *   The counts, or null when the declaration names no key or no values.
+ */
+function reviewSummary(spec, nodes, rowData) {
+	if (!spec || typeof spec !== 'object' || typeof spec.key !== 'string' || spec.key === '' || !Array.isArray(spec.values) || spec.values.length === 0) {
+		return null
+	}
+	const files = Array.isArray(nodes) ? nodes : [];
+	const openValues = (Array.isArray(spec.open) ? spec.open : [spec.open]).filter((v) => v !== undefined && v !== null).map((v) => String(v).toLowerCase());
+	const segments = spec.values
+		.filter((entry) => entry && entry.value !== undefined && entry.value !== null)
+		.map((entry) => ({
+			value: String(entry.value),
+			label: typeof entry.label === 'string' && entry.label !== '' ? entry.label : String(entry.value),
+			tone: TONES.includes(entry.tone) ? entry.tone : 'default',
+			count: 0,
+			share: 0,
+		}));
+	let open = 0;
+	for (const node of files) {
+		const raw = fileColumnValue({ key: spec.key, source: 'row' }, node, rowData);
+		const value = raw === null || raw === undefined ? '' : String(raw).toLowerCase();
+		const segment = segments.find((s) => s.value.toLowerCase() === value);
+		if (segment) {
+			segment.count++;
+		}
+		if (!segment || openValues.includes(value)) {
+			open++;
+		}
+	}
+	const total = files.length;
+	for (const segment of segments) {
+		segment.share = total > 0 ? Math.round((segment.count / total) * 1000) / 10 : 0;
+	}
+	return { total, done: total - open, open, segments }
+}
+
+export { reviewSummary };
+//# sourceMappingURL=filesReview.js.map

package/dist/esm/components/CnFilesBrowser/filesReview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filesReview.js","sources":["../../../../src/components/CnFilesBrowser/filesReview.js"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2026 Conduction B.V.\n * SPDX-License-Identifier: EUPL-1.2\n */\nimport { fileColumnValue } from './filesBrowserColumns.js'\n\n/** The tones a review segment may take; anything else draws as `default`. */\nconst TONES = ['success', 'warning', 'error', 'info', 'default']\n\n/**\n * The review summary of a file list (DqZaakDocumenten \"4 van 7 beoordeeld\"):\n * how many files carry each review value, read from the host's row data.\n *\n * `spec` is `{ key, open, values: [{ value, label?, tone? }] }`: `key` is the\n * row-data field that holds the review state, `open` the value (or values) of\n * a file still to review. A file with no value, or one not listed, counts as\n * open. Values compare without case.\n *\n * @param {object} spec The summary declaration.\n * @param {Array<object>} nodes The file nodes (folders already left out).\n * @param {object|null} rowData The host's row data, by file id.\n * @return {{total: number, done: number, open: number, segments: Array<{value: string, label: string, tone: string, count: number, share: number}>}|null}\n *   The counts, or null when the declaration names no key or no values.\n */\nexport function reviewSummary(spec, nodes, rowData) {\n\tif (!spec || typeof spec !== 'object' || typeof spec.key !== 'string' || spec.key === '' || !Array.isArray(spec.values) || spec.values.length === 0) {\n\t\treturn null\n\t}\n\tconst files = Array.isArray(nodes) ? nodes : []\n\tconst openValues = (Array.isArray(spec.open) ? spec.open : [spec.open]).filter((v) => v !== undefined && v !== null).map((v) => String(v).toLowerCase())\n\tconst segments = spec.values\n\t\t.filter((entry) => entry && entry.value !== undefined && entry.value !== null)\n\t\t.map((entry) => ({\n\t\t\tvalue: String(entry.value),\n\t\t\tlabel: typeof entry.label === 'string' && entry.label !== '' ? entry.label : String(entry.value),\n\t\t\ttone: TONES.includes(entry.tone) ? entry.tone : 'default',\n\t\t\tcount: 0,\n\t\t\tshare: 0,\n\t\t}))\n\tlet open = 0\n\tfor (const node of files) {\n\t\tconst raw = fileColumnValue({ key: spec.key, source: 'row' }, node, rowData)\n\t\tconst value = raw === null || raw === undefined ? '' : String(raw).toLowerCase()\n\t\tconst segment = segments.find((s) => s.value.toLowerCase() === value)\n\t\tif (segment) {\n\t\t\tsegment.count++\n\t\t}\n\t\tif (!segment || openValues.includes(value)) {\n\t\t\topen++\n\t\t}\n\t}\n\tconst total = files.length\n\tfor (const segment of segments) {\n\t\tsegment.share = total > 0 ? Math.round((segment.count / total) * 1000) / 10 : 0\n\t}\n\treturn { total, done: total - open, open, segments }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/CnGroupedCardsWidget/CnGroupedCardsWidget.vue.js

@@ -0,0 +1,9 @@
+import script from './CnGroupedCardsWidget.vue2.js';
+import { render } from './CnGroupedCardsWidget.vue3.js';
+
+script.render = render;
+script.__scopeId = "data-v-cf2cd50a";
+const __sfc_main = script;
+
+export { __sfc_main as default };
+//# sourceMappingURL=CnGroupedCardsWidget.vue.js.map

package/dist/esm/components/CnGroupedCardsWidget/CnGroupedCardsWidget.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CnGroupedCardsWidget.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

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

@@ -0,0 +1,279 @@
+import { translate } from '@nextcloud/l10n';
+import { NcLoadingIcon } from '@nextcloud/vue';
+import { inject, ref } from 'vue';
+import { useEndpointSource } from '../../composables/useEndpointSource.js';
+import { fillTemplate } from '../../utils/fillTemplate.js';
+import { unwrapAppConfig } from '../../utils/formatMetric.js';
+import { languageMapText } from '../../utils/languageMapText.js';
+import { readPath } from '../../utils/readPath.js';
+
+let uid = 0;
+
+/**
+ * Unwrap a value that may be a ref.
+ *
+ * @param {unknown} value The value.
+ * @return {unknown} The plain value.
+ */
+function unwrap(value) {
+	return value && typeof value === 'object' && 'value' in value ? value.value : value
+}
+
+/**
+ * A row as the templates read it: a language map (`{ nl, en }`) becomes its
+ * text in the user's language, and a list of plain values is joined with ", ".
+ * Nested objects stay as they are, for a template that reads a deeper path.
+ *
+ * @param {object} row The row.
+ * @return {object} A shallow copy with readable values.
+ */
+function readable(row) {
+	if (!row || typeof row !== 'object') {
+		return {}
+	}
+	const out = {};
+	for (const [key, value] of Object.entries(row)) {
+		if (Array.isArray(value)) {
+			const plain = value.filter((entry) => typeof entry === 'string' || typeof entry === 'number');
+			out[key] = plain.length === value.length ? plain.join(', ') : value;
+		} else if (value && typeof value === 'object' && Object.values(value).every((entry) => typeof entry === 'string')) {
+			out[key] = languageMapText(value);
+		} else {
+			out[key] = value;
+		}
+	}
+	return out
+}
+
+/**
+ * CnGroupedCardsWidget — groups of cards side by side, read from an app
+ * endpoint: a case type's phases, each with the tasks it runs, and a dashed
+ * box of what is available in every phase (board DqZaaktype, Fasen en taken).
+ *
+ * Content-only on a card surface: the detail host or the dashboard draws the
+ * titled card around it.
+ */
+var script = {
+	name: 'CnGroupedCardsWidget',
+
+	components: { NcLoadingIcon },
+
+	inject: {
+		/** The host app's translate function. */
+		cnTranslate: { default: () => (key) => key },
+		/** The page's app config map, for money tokens in a template. */
+		cnAppConfig: { default: () => ({}) },
+	},
+
+	props: {
+		/**
+		 * The widget config: `{ endpointSource, groupsPath?, itemsKey?,
+		 * groupTitle?, groupCount?, itemTitle?, itemMeta?, columns?,
+		 * extraGroup?, emptyText?, groupEmptyText?, errorText? }`.
+		 *
+		 * - `endpointSource` (`{ url, params?, responsePath? }`) reads the payload; tokens
+		 *   such as `@objectId` resolve as on every widget.
+		 * - `groupsPath` (default `groups`) is the list of groups in the payload, and
+		 *   `itemsKey` (default `items`) the list of cards in each group.
+		 * - `groupTitle` and `itemTitle` are templates (`"Phase {order}: {name}"`,
+		 *   `"{title}"`); `itemMeta` is a template or a list of templates joined
+		 *   with " · ", a part whose token is empty being left out.
+		 * - `groupCount` (`{ one, other }`, `{count}` filled in) draws a count pill.
+		 * - `extraGroup` (`{ title, path, itemText, join? }`) closes the grid with a
+		 *   dashed box whose entries, read at `path` of the payload, are one line.
+		 * - `columns` (default 2) is the number of groups side by side.
+		 *
+		 * A language map (`{ nl, en }`) reads in the user's language, and a list
+		 * of plain values reads joined with ", ". Texts go through the app's
+		 * translate.
+		 *
+		 * @type {object}
+		 */
+		content: {
+			type: Object,
+			default: () => ({}),
+		},
+
+		/** The current record's id, for the `@objectId` token. */
+		objectId: {
+			type: [String, Number],
+			default: null,
+		},
+
+		/** The current record, for `@object.<field>` tokens. */
+		objectData: {
+			type: Object,
+			default: null,
+		},
+	},
+
+	setup(props) {
+		const objectCtxRaw = inject('cnObjectContext', null);
+		const workspaceRaw = inject('cnWorkspaceContext', null);
+		const appConfigRaw = inject('cnAppConfig', ref({}));
+		const { data, loading, error } = useEndpointSource(
+			() => props.content?.endpointSource || null,
+			{
+				ctx: () => {
+					const injected = unwrap(objectCtxRaw) || {};
+					return {
+						...injected,
+						objectId: props.objectId ?? injected.objectId ?? props.objectData?.id ?? null,
+						object: props.objectData || injected.object || null,
+						workspace: unwrap(workspaceRaw) || {},
+						config: unwrapAppConfig(appConfigRaw) || {},
+					}
+				},
+			},
+		);
+		uid += 1;
+		return { payload: data, loading, error, idPrefix: `cn-grouped-cards-${uid}` }
+	},
+
+	computed: {
+		/** @return {number} The groups side by side. */
+		columns() {
+			const value = Number(this.content?.columns);
+			return Number.isFinite(value) && value >= 1 ? Math.min(4, Math.floor(value)) : 2
+		},
+
+		/**
+		 * The groups ready to draw.
+		 *
+		 * @return {Array<{key: string, headingId: string, title: string, count: string, items: Array<object>}>} The groups.
+		 * @spec openspec/changes/grouped-cards-widget/specs/grouped-cards-widget/spec.md#requirement-a-widget-draws-groups-of-cards-from-an-endpoint
+		 */
+		groups() {
+			const c = this.content || {};
+			const list = readPath(this.payload, c.groupsPath || 'groups');
+			if (!Array.isArray(list)) {
+				return []
+			}
+			return list.filter((group) => group && typeof group === 'object').map((raw, index) => {
+				const group = readable(raw);
+				const itemList = Array.isArray(raw[c.itemsKey || 'items']) ? raw[c.itemsKey || 'items'] : [];
+				const items = itemList.filter((item) => item && typeof item === 'object').map((rawItem, itemIndex) => {
+					const item = readable(rawItem);
+					return {
+						key: String(rawItem.id ?? `item-${itemIndex}`),
+						title: this.fill(c.itemTitle || '{title}', item),
+						meta: this.metaOf(item),
+					}
+				});
+				return {
+					key: String(raw.id ?? `group-${index}`),
+					headingId: `${this.idPrefix}-group-${index}`,
+					title: this.fill(c.groupTitle || '{name}', group),
+					count: this.countOf(items.length),
+					items,
+				}
+			})
+		},
+
+		/**
+		 * The closing box of entries available everywhere, or null.
+		 *
+		 * @return {{headingId: string, title: string, text: string}|null} The box.
+		 * @spec openspec/changes/grouped-cards-widget/specs/grouped-cards-widget/spec.md#requirement-a-widget-draws-groups-of-cards-from-an-endpoint
+		 */
+		extra() {
+			const spec = this.content?.extraGroup;
+			if (!spec || typeof spec !== 'object' || !spec.path) {
+				return null
+			}
+			const list = readPath(this.payload, spec.path);
+			if (!Array.isArray(list) || list.length === 0) {
+				return null
+			}
+			const parts = list
+				.map((entry) => (entry && typeof entry === 'object' ? this.fill(spec.itemText || '{label}', readable(entry)) : languageMapText(entry)))
+				.filter((text) => text !== '');
+			if (parts.length === 0) {
+				return null
+			}
+			return {
+				headingId: `${this.idPrefix}-extra`,
+				title: this.translate(spec.title || 'Always available'),
+				text: parts.join(typeof spec.join === 'string' ? spec.join : ' · '),
+			}
+		},
+
+		/** @return {string} The empty text. */
+		emptyLabel() {
+			return this.content?.emptyText ? this.translate(this.content.emptyText) : translate('nextcloud-vue', 'Nothing to show yet')
+		},
+
+		/** @return {string} The text of a group without cards. */
+		groupEmptyLabel() {
+			return this.content?.groupEmptyText ? this.translate(this.content.groupEmptyText) : translate('nextcloud-vue', 'Nothing here yet')
+		},
+
+		/** @return {string} The error text. */
+		errorLabel() {
+			return this.content?.errorText ? this.translate(this.content.errorText) : translate('nextcloud-vue', 'This list could not be loaded.')
+		},
+
+		/** @return {string} The loading label. */
+		loadingLabel() {
+			return translate('nextcloud-vue', 'Loading')
+		},
+	},
+
+	methods: {
+		/**
+		 * Translate a text through the host app's catalogue.
+		 *
+		 * @param {string} text The text.
+		 * @return {string} The translated text.
+		 */
+		translate(text) {
+			const fn = typeof this.cnTranslate === 'function' ? this.cnTranslate : (key) => key;
+			return fn(text)
+		},
+
+		/**
+		 * Fill a template from a row, after translating it.
+		 *
+		 * @param {string} template The template.
+		 * @param {object} row The row.
+		 * @return {string} The text, '' when a token is empty.
+		 */
+		fill(template, row) {
+			if (typeof template !== 'string' || template === '') {
+				return ''
+			}
+			return fillTemplate(this.translate(template), row, new Date(), { config: unwrapAppConfig(this.cnAppConfig) })
+		},
+
+		/**
+		 * A card's meta line: one template, or several joined with " · ", a
+		 * part whose token is empty being left out with its separator.
+		 *
+		 * @param {object} item The card's row.
+		 * @return {string} The line.
+		 */
+		metaOf(item) {
+			const spec = this.content?.itemMeta;
+			const parts = Array.isArray(spec) ? spec : (typeof spec === 'string' ? [spec] : []);
+			return parts.map((part) => this.fill(part, item)).filter((text) => text !== '').join(' · ')
+		},
+
+		/**
+		 * The count pill of a group (`groupCount: { one, other }`).
+		 *
+		 * @param {number} count The number of cards.
+		 * @return {string} The text, '' without `groupCount`.
+		 */
+		countOf(count) {
+			const spec = this.content?.groupCount;
+			if (!spec || typeof spec !== 'object') {
+				return ''
+			}
+			const template = count === 1 ? spec.one : spec.other;
+			return typeof template === 'string' && template !== '' ? this.translate(template).replace(/\{count\}/g, String(count)) : ''
+		},
+	},
+};
+
+export { script as default };
+//# sourceMappingURL=CnGroupedCardsWidget.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CnGroupedCardsWidget.vue2.js","sources":["../../../../src/components/CnGroupedCardsWidget/CnGroupedCardsWidget.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<div class=\"cn-grouped-cards\" data-testid=\"cn-grouped-cards\">\n\t\t<p v-if=\"error\" class=\"cn-grouped-cards__state\" data-testid=\"cn-grouped-cards-error\">\n\t\t\t{{ errorLabel }}\n\t\t</p>\n\t\t<div v-else-if=\"loading && groups.length === 0\" class=\"cn-grouped-cards__loading\">\n\t\t\t<NcLoadingIcon :size=\"20\" :name=\"loadingLabel\" />\n\t\t</div>\n\t\t<p v-else-if=\"groups.length === 0 && !extra\" class=\"cn-grouped-cards__state\" data-testid=\"cn-grouped-cards-empty\">\n\t\t\t{{ emptyLabel }}\n\t\t</p>\n\t\t<div\n\t\t\tv-else\n\t\t\tclass=\"cn-grouped-cards__grid\"\n\t\t\t:style=\"{ '--cn-grouped-cards-columns': columns }\">\n\t\t\t<section\n\t\t\t\tv-for=\"group in groups\"\n\t\t\t\t:key=\"group.key\"\n\t\t\t\tclass=\"cn-grouped-cards__group\"\n\t\t\t\t:aria-labelledby=\"group.headingId\"\n\t\t\t\tdata-testid=\"cn-grouped-cards-group\">\n\t\t\t\t<header class=\"cn-grouped-cards__group-header\">\n\t\t\t\t\t<h4 :id=\"group.headingId\" class=\"cn-grouped-cards__group-title\">\n\t\t\t\t\t\t{{ group.title }}\n\t\t\t\t\t</h4>\n\t\t\t\t\t<span v-if=\"group.count\" class=\"cn-grouped-cards__count\" data-testid=\"cn-grouped-cards-count\">{{ group.count }}</span>\n\t\t\t\t</header>\n\t\t\t\t<ul v-if=\"group.items.length > 0\" class=\"cn-grouped-cards__items\">\n\t\t\t\t\t<li\n\t\t\t\t\t\tv-for=\"item in group.items\"\n\t\t\t\t\t\t:key=\"item.key\"\n\t\t\t\t\t\tclass=\"cn-grouped-cards__item\"\n\t\t\t\t\t\tdata-testid=\"cn-grouped-cards-item\">\n\t\t\t\t\t\t<span class=\"cn-grouped-cards__item-title\">{{ item.title }}</span>\n\t\t\t\t\t\t<span v-if=\"item.meta\" class=\"cn-grouped-cards__item-meta\">{{ item.meta }}</span>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t\t<p v-else class=\"cn-grouped-cards__group-empty\">\n\t\t\t\t\t{{ groupEmptyLabel }}\n\t\t\t\t</p>\n\t\t\t</section>\n\t\t\t<section\n\t\t\t\tv-if=\"extra\"\n\t\t\t\tclass=\"cn-grouped-cards__group cn-grouped-cards__group--extra\"\n\t\t\t\t:aria-labelledby=\"extra.headingId\"\n\t\t\t\tdata-testid=\"cn-grouped-cards-extra\">\n\t\t\t\t<header class=\"cn-grouped-cards__group-header\">\n\t\t\t\t\t<h4 :id=\"extra.headingId\" class=\"cn-grouped-cards__group-title\">\n\t\t\t\t\t\t{{ extra.title }}\n\t\t\t\t\t</h4>\n\t\t\t\t</header>\n\t\t\t\t<p class=\"cn-grouped-cards__extra-text\">\n\t\t\t\t\t{{ extra.text }}\n\t\t\t\t</p>\n\t\t\t</section>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcLoadingIcon } from '@nextcloud/vue'\nimport { inject, ref } from 'vue'\nimport { useEndpointSource } from '../../composables/useEndpointSource.js'\nimport { fillTemplate } from '../../utils/fillTemplate.js'\nimport { unwrapAppConfig } from '../../utils/formatMetric.js'\nimport { languageMapText } from '../../utils/languageMapText.js'\nimport { readPath } from '../../utils/readPath.js'\n\nlet uid = 0\n\n/**\n * Unwrap a value that may be a ref.\n *\n * @param {unknown} value The value.\n * @return {unknown} The plain value.\n */\nfunction unwrap(value) {\n\treturn value && typeof value === 'object' && 'value' in value ? value.value : value\n}\n\n/**\n * A row as the templates read it: a language map (`{ nl, en }`) becomes its\n * text in the user's language, and a list of plain values is joined with \", \".\n * Nested objects stay as they are, for a template that reads a deeper path.\n *\n * @param {object} row The row.\n * @return {object} A shallow copy with readable values.\n */\nfunction readable(row) {\n\tif (!row || typeof row !== 'object') {\n\t\treturn {}\n\t}\n\tconst out = {}\n\tfor (const [key, value] of Object.entries(row)) {\n\t\tif (Array.isArray(value)) {\n\t\t\tconst plain = value.filter((entry) => typeof entry === 'string' || typeof entry === 'number')\n\t\t\tout[key] = plain.length === value.length ? plain.join(', ') : value\n\t\t} else if (value && typeof value === 'object' && Object.values(value).every((entry) => typeof entry === 'string')) {\n\t\t\tout[key] = languageMapText(value)\n\t\t} else {\n\t\t\tout[key] = value\n\t\t}\n\t}\n\treturn out\n}\n\n/**\n * CnGroupedCardsWidget — groups of cards side by side, read from an app\n * endpoint: a case type's phases, each with the tasks it runs, and a dashed\n * box of what is available in every phase (board DqZaaktype, Fasen en taken).\n *\n * Content-only on a card surface: the detail host or the dashboard draws the\n * titled card around it.\n */\nexport default {\n\tname: 'CnGroupedCardsWidget',\n\n\tcomponents: { NcLoadingIcon },\n\n\tinject: {\n\t\t/** The host app's translate function. */\n\t\tcnTranslate: { default: () => (key) => key },\n\t\t/** The page's app config map, for money tokens in a template. */\n\t\tcnAppConfig: { default: () => ({}) },\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The widget config: `{ endpointSource, groupsPath?, itemsKey?,\n\t\t * groupTitle?, groupCount?, itemTitle?, itemMeta?, columns?,\n\t\t * extraGroup?, emptyText?, groupEmptyText?, errorText? }`.\n\t\t *\n\t\t * - `endpointSource` (`{ url, params?, responsePath? }`) reads the payload; tokens\n\t\t *   such as `@objectId` resolve as on every widget.\n\t\t * - `groupsPath` (default `groups`) is the list of groups in the payload, and\n\t\t *   `itemsKey` (default `items`) the list of cards in each group.\n\t\t * - `groupTitle` and `itemTitle` are templates (`\"Phase {order}: {name}\"`,\n\t\t *   `\"{title}\"`); `itemMeta` is a template or a list of templates joined\n\t\t *   with \" · \", a part whose token is empty being left out.\n\t\t * - `groupCount` (`{ one, other }`, `{count}` filled in) draws a count pill.\n\t\t * - `extraGroup` (`{ title, path, itemText, join? }`) closes the grid with a\n\t\t *   dashed box whose entries, read at `path` of the payload, are one line.\n\t\t * - `columns` (default 2) is the number of groups side by side.\n\t\t *\n\t\t * A language map (`{ nl, en }`) reads in the user's language, and a list\n\t\t * of plain values reads joined with \", \". Texts go through the app's\n\t\t * translate.\n\t\t *\n\t\t * @type {object}\n\t\t */\n\t\tcontent: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\n\t\t/** The current record's id, for the `@objectId` token. */\n\t\tobjectId: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** The current record, for `@object.<field>` tokens. */\n\t\tobjectData: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tsetup(props) {\n\t\tconst objectCtxRaw = inject('cnObjectContext', null)\n\t\tconst workspaceRaw = inject('cnWorkspaceContext', null)\n\t\tconst appConfigRaw = inject('cnAppConfig', ref({}))\n\t\tconst { data, loading, error } = useEndpointSource(\n\t\t\t() => props.content?.endpointSource || null,\n\t\t\t{\n\t\t\t\tctx: () => {\n\t\t\t\t\tconst injected = unwrap(objectCtxRaw) || {}\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...injected,\n\t\t\t\t\t\tobjectId: props.objectId ?? injected.objectId ?? props.objectData?.id ?? null,\n\t\t\t\t\t\tobject: props.objectData || injected.object || null,\n\t\t\t\t\t\tworkspace: unwrap(workspaceRaw) || {},\n\t\t\t\t\t\tconfig: unwrapAppConfig(appConfigRaw) || {},\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t)\n\t\tuid += 1\n\t\treturn { payload: data, loading, error, idPrefix: `cn-grouped-cards-${uid}` }\n\t},\n\n\tcomputed: {\n\t\t/** @return {number} The groups side by side. */\n\t\tcolumns() {\n\t\t\tconst value = Number(this.content?.columns)\n\t\t\treturn Number.isFinite(value) && value >= 1 ? Math.min(4, Math.floor(value)) : 2\n\t\t},\n\n\t\t/**\n\t\t * The groups ready to draw.\n\t\t *\n\t\t * @return {Array<{key: string, headingId: string, title: string, count: string, items: Array<object>}>} The groups.\n\t\t * @spec openspec/changes/grouped-cards-widget/specs/grouped-cards-widget/spec.md#requirement-a-widget-draws-groups-of-cards-from-an-endpoint\n\t\t */\n\t\tgroups() {\n\t\t\tconst c = this.content || {}\n\t\t\tconst list = readPath(this.payload, c.groupsPath || 'groups')\n\t\t\tif (!Array.isArray(list)) {\n\t\t\t\treturn []\n\t\t\t}\n\t\t\treturn list.filter((group) => group && typeof group === 'object').map((raw, index) => {\n\t\t\t\tconst group = readable(raw)\n\t\t\t\tconst itemList = Array.isArray(raw[c.itemsKey || 'items']) ? raw[c.itemsKey || 'items'] : []\n\t\t\t\tconst items = itemList.filter((item) => item && typeof item === 'object').map((rawItem, itemIndex) => {\n\t\t\t\t\tconst item = readable(rawItem)\n\t\t\t\t\treturn {\n\t\t\t\t\t\tkey: String(rawItem.id ?? `item-${itemIndex}`),\n\t\t\t\t\t\ttitle: this.fill(c.itemTitle || '{title}', item),\n\t\t\t\t\t\tmeta: this.metaOf(item),\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\treturn {\n\t\t\t\t\tkey: String(raw.id ?? `group-${index}`),\n\t\t\t\t\theadingId: `${this.idPrefix}-group-${index}`,\n\t\t\t\t\ttitle: this.fill(c.groupTitle || '{name}', group),\n\t\t\t\t\tcount: this.countOf(items.length),\n\t\t\t\t\titems,\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * The closing box of entries available everywhere, or null.\n\t\t *\n\t\t * @return {{headingId: string, title: string, text: string}|null} The box.\n\t\t * @spec openspec/changes/grouped-cards-widget/specs/grouped-cards-widget/spec.md#requirement-a-widget-draws-groups-of-cards-from-an-endpoint\n\t\t */\n\t\textra() {\n\t\t\tconst spec = this.content?.extraGroup\n\t\t\tif (!spec || typeof spec !== 'object' || !spec.path) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst list = readPath(this.payload, spec.path)\n\t\t\tif (!Array.isArray(list) || list.length === 0) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parts = list\n\t\t\t\t.map((entry) => (entry && typeof entry === 'object' ? this.fill(spec.itemText || '{label}', readable(entry)) : languageMapText(entry)))\n\t\t\t\t.filter((text) => text !== '')\n\t\t\tif (parts.length === 0) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\treturn {\n\t\t\t\theadingId: `${this.idPrefix}-extra`,\n\t\t\t\ttitle: this.translate(spec.title || 'Always available'),\n\t\t\t\ttext: parts.join(typeof spec.join === 'string' ? spec.join : ' · '),\n\t\t\t}\n\t\t},\n\n\t\t/** @return {string} The empty text. */\n\t\temptyLabel() {\n\t\t\treturn this.content?.emptyText ? this.translate(this.content.emptyText) : t('nextcloud-vue', 'Nothing to show yet')\n\t\t},\n\n\t\t/** @return {string} The text of a group without cards. */\n\t\tgroupEmptyLabel() {\n\t\t\treturn this.content?.groupEmptyText ? this.translate(this.content.groupEmptyText) : t('nextcloud-vue', 'Nothing here yet')\n\t\t},\n\n\t\t/** @return {string} The error text. */\n\t\terrorLabel() {\n\t\t\treturn this.content?.errorText ? this.translate(this.content.errorText) : t('nextcloud-vue', 'This list could not be loaded.')\n\t\t},\n\n\t\t/** @return {string} The loading label. */\n\t\tloadingLabel() {\n\t\t\treturn t('nextcloud-vue', 'Loading')\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Translate a text through the host app's catalogue.\n\t\t *\n\t\t * @param {string} text The text.\n\t\t * @return {string} The translated text.\n\t\t */\n\t\ttranslate(text) {\n\t\t\tconst fn = typeof this.cnTranslate === 'function' ? this.cnTranslate : (key) => key\n\t\t\treturn fn(text)\n\t\t},\n\n\t\t/**\n\t\t * Fill a template from a row, after translating it.\n\t\t *\n\t\t * @param {string} template The template.\n\t\t * @param {object} row The row.\n\t\t * @return {string} The text, '' when a token is empty.\n\t\t */\n\t\tfill(template, row) {\n\t\t\tif (typeof template !== 'string' || template === '') {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t\treturn fillTemplate(this.translate(template), row, new Date(), { config: unwrapAppConfig(this.cnAppConfig) })\n\t\t},\n\n\t\t/**\n\t\t * A card's meta line: one template, or several joined with \" · \", a\n\t\t * part whose token is empty being left out with its separator.\n\t\t *\n\t\t * @param {object} item The card's row.\n\t\t * @return {string} The line.\n\t\t */\n\t\tmetaOf(item) {\n\t\t\tconst spec = this.content?.itemMeta\n\t\t\tconst parts = Array.isArray(spec) ? spec : (typeof spec === 'string' ? [spec] : [])\n\t\t\treturn parts.map((part) => this.fill(part, item)).filter((text) => text !== '').join(' · ')\n\t\t},\n\n\t\t/**\n\t\t * The count pill of a group (`groupCount: { one, other }`).\n\t\t *\n\t\t * @param {number} count The number of cards.\n\t\t * @return {string} The text, '' without `groupCount`.\n\t\t */\n\t\tcountOf(count) {\n\t\t\tconst spec = this.content?.groupCount\n\t\t\tif (!spec || typeof spec !== 'object') {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t\tconst template = count === 1 ? spec.one : spec.other\n\t\t\treturn typeof template === 'string' && template !== '' ? this.translate(template).replace(/\\{count\\}/g, String(count)) : ''\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-grouped-cards__grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(var(--cn-grouped-cards-columns, 2), minmax(0, 1fr));\n\tgap: 16px;\n}\n\n@media (max-width: 700px) {\n\t.cn-grouped-cards__grid {\n\t\tgrid-template-columns: minmax(0, 1fr);\n\t}\n}\n\n.cn-grouped-cards__group {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tpadding: 12px 14px 14px;\n\tborder-radius: var(--border-radius-large, 10px);\n\tbackground: var(--color-background-hover);\n}\n\n.cn-grouped-cards__group--extra {\n\tbackground: transparent;\n\tborder: 1px dashed var(--color-border-dark);\n}\n\n.cn-grouped-cards__group-header {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 8px;\n}\n\n.cn-grouped-cards__group-title {\n\tmargin: 0;\n\tfont-size: 15px;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n}\n\n.cn-grouped-cards__count {\n\tpadding: 2px 8px;\n\tborder-radius: var(--border-radius-pill, 12px);\n\tbackground: var(--color-main-background);\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 12px;\n\tfont-weight: 600;\n\twhite-space: nowrap;\n}\n\n.cn-grouped-cards__items {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n}\n\n.cn-grouped-cards__item {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n\tpadding: 10px 12px;\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius-large, 8px);\n\tbackground: var(--color-main-background);\n}\n\n.cn-grouped-cards__item-title {\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n}\n\n.cn-grouped-cards__item-meta,\n.cn-grouped-cards__extra-text,\n.cn-grouped-cards__group-empty,\n.cn-grouped-cards__state {\n\tmargin: 0;\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 13px;\n}\n\n.cn-grouped-cards__loading {\n\tdisplay: flex;\n\tjustify-content: center;\n\tpadding: 8px 0;\n}\n</style>\n"],"names":["t"],"mappings":"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"}

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

@@ -0,0 +1,122 @@
+import { resolveComponent, openBlock, createElementBlock, toDisplayString, createVNode, normalizeStyle, Fragment, renderList, createElementVNode, createCommentVNode } from 'vue';
+
+const _hoisted_1 = {
+  class: "cn-grouped-cards",
+  "data-testid": "cn-grouped-cards"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "cn-grouped-cards__state",
+  "data-testid": "cn-grouped-cards-error"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "cn-grouped-cards__loading"
+};
+const _hoisted_4 = {
+  key: 2,
+  class: "cn-grouped-cards__state",
+  "data-testid": "cn-grouped-cards-empty"
+};
+const _hoisted_5 = ["aria-labelledby"];
+const _hoisted_6 = { class: "cn-grouped-cards__group-header" };
+const _hoisted_7 = ["id"];
+const _hoisted_8 = {
+  key: 0,
+  class: "cn-grouped-cards__count",
+  "data-testid": "cn-grouped-cards-count"
+};
+const _hoisted_9 = {
+  key: 0,
+  class: "cn-grouped-cards__items"
+};
+const _hoisted_10 = { class: "cn-grouped-cards__item-title" };
+const _hoisted_11 = {
+  key: 0,
+  class: "cn-grouped-cards__item-meta"
+};
+const _hoisted_12 = {
+  key: 1,
+  class: "cn-grouped-cards__group-empty"
+};
+const _hoisted_13 = ["aria-labelledby"];
+const _hoisted_14 = { class: "cn-grouped-cards__group-header" };
+const _hoisted_15 = ["id"];
+const _hoisted_16 = { class: "cn-grouped-cards__extra-text" };
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcLoadingIcon = resolveComponent("NcLoadingIcon");
+
+  return (openBlock(), createElementBlock("div", _hoisted_1, [
+    ($setup.error)
+      ? (openBlock(), createElementBlock("p", _hoisted_2, toDisplayString($options.errorLabel), 1 /* TEXT */))
+      : ($setup.loading && $options.groups.length === 0)
+        ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            createVNode(_component_NcLoadingIcon, {
+              size: 20,
+              name: $options.loadingLabel
+            }, null, 8 /* PROPS */, ["name"])
+          ]))
+        : ($options.groups.length === 0 && !$options.extra)
+          ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString($options.emptyLabel), 1 /* TEXT */))
+          : (openBlock(), createElementBlock("div", {
+              key: 3,
+              class: "cn-grouped-cards__grid",
+              style: normalizeStyle({ '--cn-grouped-cards-columns': $options.columns })
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList($options.groups, (group) => {
+                return (openBlock(), createElementBlock("section", {
+                  key: group.key,
+                  class: "cn-grouped-cards__group",
+                  "aria-labelledby": group.headingId,
+                  "data-testid": "cn-grouped-cards-group"
+                }, [
+                  createElementVNode("header", _hoisted_6, [
+                    createElementVNode("h4", {
+                      id: group.headingId,
+                      class: "cn-grouped-cards__group-title"
+                    }, toDisplayString(group.title), 9 /* TEXT, PROPS */, _hoisted_7),
+                    (group.count)
+                      ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(group.count), 1 /* TEXT */))
+                      : createCommentVNode("v-if", true)
+                  ]),
+                  (group.items.length > 0)
+                    ? (openBlock(), createElementBlock("ul", _hoisted_9, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(group.items, (item) => {
+                          return (openBlock(), createElementBlock("li", {
+                            key: item.key,
+                            class: "cn-grouped-cards__item",
+                            "data-testid": "cn-grouped-cards-item"
+                          }, [
+                            createElementVNode("span", _hoisted_10, toDisplayString(item.title), 1 /* TEXT */),
+                            (item.meta)
+                              ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(item.meta), 1 /* TEXT */))
+                              : createCommentVNode("v-if", true)
+                          ]))
+                        }), 128 /* KEYED_FRAGMENT */))
+                      ]))
+                    : (openBlock(), createElementBlock("p", _hoisted_12, toDisplayString($options.groupEmptyLabel), 1 /* TEXT */))
+                ], 8 /* PROPS */, _hoisted_5))
+              }), 128 /* KEYED_FRAGMENT */)),
+              ($options.extra)
+                ? (openBlock(), createElementBlock("section", {
+                    key: 0,
+                    class: "cn-grouped-cards__group cn-grouped-cards__group--extra",
+                    "aria-labelledby": $options.extra.headingId,
+                    "data-testid": "cn-grouped-cards-extra"
+                  }, [
+                    createElementVNode("header", _hoisted_14, [
+                      createElementVNode("h4", {
+                        id: $options.extra.headingId,
+                        class: "cn-grouped-cards__group-title"
+                      }, toDisplayString($options.extra.title), 9 /* TEXT, PROPS */, _hoisted_15)
+                    ]),
+                    createElementVNode("p", _hoisted_16, toDisplayString($options.extra.text), 1 /* TEXT */)
+                  ], 8 /* PROPS */, _hoisted_13))
+                : createCommentVNode("v-if", true)
+            ], 4 /* STYLE */))
+  ]))
+}
+
+export { render };
+//# sourceMappingURL=CnGroupedCardsWidget.vue3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CnGroupedCardsWidget.vue3.js","sources":["../../../../src/components/CnGroupedCardsWidget/CnGroupedCardsWidget.vue?vue&type=template&id=cf2cd50a&lang.js"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<div class=\"cn-grouped-cards\" data-testid=\"cn-grouped-cards\">\n\t\t<p v-if=\"error\" class=\"cn-grouped-cards__state\" data-testid=\"cn-grouped-cards-error\">\n\t\t\t{{ errorLabel }}\n\t\t</p>\n\t\t<div v-else-if=\"loading && groups.length === 0\" class=\"cn-grouped-cards__loading\">\n\t\t\t<NcLoadingIcon :size=\"20\" :name=\"loadingLabel\" />\n\t\t</div>\n\t\t<p v-else-if=\"groups.length === 0 && !extra\" class=\"cn-grouped-cards__state\" data-testid=\"cn-grouped-cards-empty\">\n\t\t\t{{ emptyLabel }}\n\t\t</p>\n\t\t<div\n\t\t\tv-else\n\t\t\tclass=\"cn-grouped-cards__grid\"\n\t\t\t:style=\"{ '--cn-grouped-cards-columns': columns }\">\n\t\t\t<section\n\t\t\t\tv-for=\"group in groups\"\n\t\t\t\t:key=\"group.key\"\n\t\t\t\tclass=\"cn-grouped-cards__group\"\n\t\t\t\t:aria-labelledby=\"group.headingId\"\n\t\t\t\tdata-testid=\"cn-grouped-cards-group\">\n\t\t\t\t<header class=\"cn-grouped-cards__group-header\">\n\t\t\t\t\t<h4 :id=\"group.headingId\" class=\"cn-grouped-cards__group-title\">\n\t\t\t\t\t\t{{ group.title }}\n\t\t\t\t\t</h4>\n\t\t\t\t\t<span v-if=\"group.count\" class=\"cn-grouped-cards__count\" data-testid=\"cn-grouped-cards-count\">{{ group.count }}</span>\n\t\t\t\t</header>\n\t\t\t\t<ul v-if=\"group.items.length > 0\" class=\"cn-grouped-cards__items\">\n\t\t\t\t\t<li\n\t\t\t\t\t\tv-for=\"item in group.items\"\n\t\t\t\t\t\t:key=\"item.key\"\n\t\t\t\t\t\tclass=\"cn-grouped-cards__item\"\n\t\t\t\t\t\tdata-testid=\"cn-grouped-cards-item\">\n\t\t\t\t\t\t<span class=\"cn-grouped-cards__item-title\">{{ item.title }}</span>\n\t\t\t\t\t\t<span v-if=\"item.meta\" class=\"cn-grouped-cards__item-meta\">{{ item.meta }}</span>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t\t<p v-else class=\"cn-grouped-cards__group-empty\">\n\t\t\t\t\t{{ groupEmptyLabel }}\n\t\t\t\t</p>\n\t\t\t</section>\n\t\t\t<section\n\t\t\t\tv-if=\"extra\"\n\t\t\t\tclass=\"cn-grouped-cards__group cn-grouped-cards__group--extra\"\n\t\t\t\t:aria-labelledby=\"extra.headingId\"\n\t\t\t\tdata-testid=\"cn-grouped-cards-extra\">\n\t\t\t\t<header class=\"cn-grouped-cards__group-header\">\n\t\t\t\t\t<h4 :id=\"extra.headingId\" class=\"cn-grouped-cards__group-title\">\n\t\t\t\t\t\t{{ extra.title }}\n\t\t\t\t\t</h4>\n\t\t\t\t</header>\n\t\t\t\t<p class=\"cn-grouped-cards__extra-text\">\n\t\t\t\t\t{{ extra.text }}\n\t\t\t\t</p>\n\t\t\t</section>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcLoadingIcon } from '@nextcloud/vue'\nimport { inject, ref } from 'vue'\nimport { useEndpointSource } from '../../composables/useEndpointSource.js'\nimport { fillTemplate } from '../../utils/fillTemplate.js'\nimport { unwrapAppConfig } from '../../utils/formatMetric.js'\nimport { languageMapText } from '../../utils/languageMapText.js'\nimport { readPath } from '../../utils/readPath.js'\n\nlet uid = 0\n\n/**\n * Unwrap a value that may be a ref.\n *\n * @param {unknown} value The value.\n * @return {unknown} The plain value.\n */\nfunction unwrap(value) {\n\treturn value && typeof value === 'object' && 'value' in value ? value.value : value\n}\n\n/**\n * A row as the templates read it: a language map (`{ nl, en }`) becomes its\n * text in the user's language, and a list of plain values is joined with \", \".\n * Nested objects stay as they are, for a template that reads a deeper path.\n *\n * @param {object} row The row.\n * @return {object} A shallow copy with readable values.\n */\nfunction readable(row) {\n\tif (!row || typeof row !== 'object') {\n\t\treturn {}\n\t}\n\tconst out = {}\n\tfor (const [key, value] of Object.entries(row)) {\n\t\tif (Array.isArray(value)) {\n\t\t\tconst plain = value.filter((entry) => typeof entry === 'string' || typeof entry === 'number')\n\t\t\tout[key] = plain.length === value.length ? plain.join(', ') : value\n\t\t} else if (value && typeof value === 'object' && Object.values(value).every((entry) => typeof entry === 'string')) {\n\t\t\tout[key] = languageMapText(value)\n\t\t} else {\n\t\t\tout[key] = value\n\t\t}\n\t}\n\treturn out\n}\n\n/**\n * CnGroupedCardsWidget — groups of cards side by side, read from an app\n * endpoint: a case type's phases, each with the tasks it runs, and a dashed\n * box of what is available in every phase (board DqZaaktype, Fasen en taken).\n *\n * Content-only on a card surface: the detail host or the dashboard draws the\n * titled card around it.\n */\nexport default {\n\tname: 'CnGroupedCardsWidget',\n\n\tcomponents: { NcLoadingIcon },\n\n\tinject: {\n\t\t/** The host app's translate function. */\n\t\tcnTranslate: { default: () => (key) => key },\n\t\t/** The page's app config map, for money tokens in a template. */\n\t\tcnAppConfig: { default: () => ({}) },\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The widget config: `{ endpointSource, groupsPath?, itemsKey?,\n\t\t * groupTitle?, groupCount?, itemTitle?, itemMeta?, columns?,\n\t\t * extraGroup?, emptyText?, groupEmptyText?, errorText? }`.\n\t\t *\n\t\t * - `endpointSource` (`{ url, params?, responsePath? }`) reads the payload; tokens\n\t\t *   such as `@objectId` resolve as on every widget.\n\t\t * - `groupsPath` (default `groups`) is the list of groups in the payload, and\n\t\t *   `itemsKey` (default `items`) the list of cards in each group.\n\t\t * - `groupTitle` and `itemTitle` are templates (`\"Phase {order}: {name}\"`,\n\t\t *   `\"{title}\"`); `itemMeta` is a template or a list of templates joined\n\t\t *   with \" · \", a part whose token is empty being left out.\n\t\t * - `groupCount` (`{ one, other }`, `{count}` filled in) draws a count pill.\n\t\t * - `extraGroup` (`{ title, path, itemText, join? }`) closes the grid with a\n\t\t *   dashed box whose entries, read at `path` of the payload, are one line.\n\t\t * - `columns` (default 2) is the number of groups side by side.\n\t\t *\n\t\t * A language map (`{ nl, en }`) reads in the user's language, and a list\n\t\t * of plain values reads joined with \", \". Texts go through the app's\n\t\t * translate.\n\t\t *\n\t\t * @type {object}\n\t\t */\n\t\tcontent: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\n\t\t/** The current record's id, for the `@objectId` token. */\n\t\tobjectId: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** The current record, for `@object.<field>` tokens. */\n\t\tobjectData: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tsetup(props) {\n\t\tconst objectCtxRaw = inject('cnObjectContext', null)\n\t\tconst workspaceRaw = inject('cnWorkspaceContext', null)\n\t\tconst appConfigRaw = inject('cnAppConfig', ref({}))\n\t\tconst { data, loading, error } = useEndpointSource(\n\t\t\t() => props.content?.endpointSource || null,\n\t\t\t{\n\t\t\t\tctx: () => {\n\t\t\t\t\tconst injected = unwrap(objectCtxRaw) || {}\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...injected,\n\t\t\t\t\t\tobjectId: props.objectId ?? injected.objectId ?? props.objectData?.id ?? null,\n\t\t\t\t\t\tobject: props.objectData || injected.object || null,\n\t\t\t\t\t\tworkspace: unwrap(workspaceRaw) || {},\n\t\t\t\t\t\tconfig: unwrapAppConfig(appConfigRaw) || {},\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t)\n\t\tuid += 1\n\t\treturn { payload: data, loading, error, idPrefix: `cn-grouped-cards-${uid}` }\n\t},\n\n\tcomputed: {\n\t\t/** @return {number} The groups side by side. */\n\t\tcolumns() {\n\t\t\tconst value = Number(this.content?.columns)\n\t\t\treturn Number.isFinite(value) && value >= 1 ? Math.min(4, Math.floor(value)) : 2\n\t\t},\n\n\t\t/**\n\t\t * The groups ready to draw.\n\t\t *\n\t\t * @return {Array<{key: string, headingId: string, title: string, count: string, items: Array<object>}>} The groups.\n\t\t * @spec openspec/changes/grouped-cards-widget/specs/grouped-cards-widget/spec.md#requirement-a-widget-draws-groups-of-cards-from-an-endpoint\n\t\t */\n\t\tgroups() {\n\t\t\tconst c = this.content || {}\n\t\t\tconst list = readPath(this.payload, c.groupsPath || 'groups')\n\t\t\tif (!Array.isArray(list)) {\n\t\t\t\treturn []\n\t\t\t}\n\t\t\treturn list.filter((group) => group && typeof group === 'object').map((raw, index) => {\n\t\t\t\tconst group = readable(raw)\n\t\t\t\tconst itemList = Array.isArray(raw[c.itemsKey || 'items']) ? raw[c.itemsKey || 'items'] : []\n\t\t\t\tconst items = itemList.filter((item) => item && typeof item === 'object').map((rawItem, itemIndex) => {\n\t\t\t\t\tconst item = readable(rawItem)\n\t\t\t\t\treturn {\n\t\t\t\t\t\tkey: String(rawItem.id ?? `item-${itemIndex}`),\n\t\t\t\t\t\ttitle: this.fill(c.itemTitle || '{title}', item),\n\t\t\t\t\t\tmeta: this.metaOf(item),\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\treturn {\n\t\t\t\t\tkey: String(raw.id ?? `group-${index}`),\n\t\t\t\t\theadingId: `${this.idPrefix}-group-${index}`,\n\t\t\t\t\ttitle: this.fill(c.groupTitle || '{name}', group),\n\t\t\t\t\tcount: this.countOf(items.length),\n\t\t\t\t\titems,\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * The closing box of entries available everywhere, or null.\n\t\t *\n\t\t * @return {{headingId: string, title: string, text: string}|null} The box.\n\t\t * @spec openspec/changes/grouped-cards-widget/specs/grouped-cards-widget/spec.md#requirement-a-widget-draws-groups-of-cards-from-an-endpoint\n\t\t */\n\t\textra() {\n\t\t\tconst spec = this.content?.extraGroup\n\t\t\tif (!spec || typeof spec !== 'object' || !spec.path) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst list = readPath(this.payload, spec.path)\n\t\t\tif (!Array.isArray(list) || list.length === 0) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst parts = list\n\t\t\t\t.map((entry) => (entry && typeof entry === 'object' ? this.fill(spec.itemText || '{label}', readable(entry)) : languageMapText(entry)))\n\t\t\t\t.filter((text) => text !== '')\n\t\t\tif (parts.length === 0) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\treturn {\n\t\t\t\theadingId: `${this.idPrefix}-extra`,\n\t\t\t\ttitle: this.translate(spec.title || 'Always available'),\n\t\t\t\ttext: parts.join(typeof spec.join === 'string' ? spec.join : ' · '),\n\t\t\t}\n\t\t},\n\n\t\t/** @return {string} The empty text. */\n\t\temptyLabel() {\n\t\t\treturn this.content?.emptyText ? this.translate(this.content.emptyText) : t('nextcloud-vue', 'Nothing to show yet')\n\t\t},\n\n\t\t/** @return {string} The text of a group without cards. */\n\t\tgroupEmptyLabel() {\n\t\t\treturn this.content?.groupEmptyText ? this.translate(this.content.groupEmptyText) : t('nextcloud-vue', 'Nothing here yet')\n\t\t},\n\n\t\t/** @return {string} The error text. */\n\t\terrorLabel() {\n\t\t\treturn this.content?.errorText ? this.translate(this.content.errorText) : t('nextcloud-vue', 'This list could not be loaded.')\n\t\t},\n\n\t\t/** @return {string} The loading label. */\n\t\tloadingLabel() {\n\t\t\treturn t('nextcloud-vue', 'Loading')\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Translate a text through the host app's catalogue.\n\t\t *\n\t\t * @param {string} text The text.\n\t\t * @return {string} The translated text.\n\t\t */\n\t\ttranslate(text) {\n\t\t\tconst fn = typeof this.cnTranslate === 'function' ? this.cnTranslate : (key) => key\n\t\t\treturn fn(text)\n\t\t},\n\n\t\t/**\n\t\t * Fill a template from a row, after translating it.\n\t\t *\n\t\t * @param {string} template The template.\n\t\t * @param {object} row The row.\n\t\t * @return {string} The text, '' when a token is empty.\n\t\t */\n\t\tfill(template, row) {\n\t\t\tif (typeof template !== 'string' || template === '') {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t\treturn fillTemplate(this.translate(template), row, new Date(), { config: unwrapAppConfig(this.cnAppConfig) })\n\t\t},\n\n\t\t/**\n\t\t * A card's meta line: one template, or several joined with \" · \", a\n\t\t * part whose token is empty being left out with its separator.\n\t\t *\n\t\t * @param {object} item The card's row.\n\t\t * @return {string} The line.\n\t\t */\n\t\tmetaOf(item) {\n\t\t\tconst spec = this.content?.itemMeta\n\t\t\tconst parts = Array.isArray(spec) ? spec : (typeof spec === 'string' ? [spec] : [])\n\t\t\treturn parts.map((part) => this.fill(part, item)).filter((text) => text !== '').join(' · ')\n\t\t},\n\n\t\t/**\n\t\t * The count pill of a group (`groupCount: { one, other }`).\n\t\t *\n\t\t * @param {number} count The number of cards.\n\t\t * @return {string} The text, '' without `groupCount`.\n\t\t */\n\t\tcountOf(count) {\n\t\t\tconst spec = this.content?.groupCount\n\t\t\tif (!spec || typeof spec !== 'object') {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t\tconst template = count === 1 ? spec.one : spec.other\n\t\t\treturn typeof template === 'string' && template !== '' ? this.translate(template).replace(/\\{count\\}/g, String(count)) : ''\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-grouped-cards__grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(var(--cn-grouped-cards-columns, 2), minmax(0, 1fr));\n\tgap: 16px;\n}\n\n@media (max-width: 700px) {\n\t.cn-grouped-cards__grid {\n\t\tgrid-template-columns: minmax(0, 1fr);\n\t}\n}\n\n.cn-grouped-cards__group {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tpadding: 12px 14px 14px;\n\tborder-radius: var(--border-radius-large, 10px);\n\tbackground: var(--color-background-hover);\n}\n\n.cn-grouped-cards__group--extra {\n\tbackground: transparent;\n\tborder: 1px dashed var(--color-border-dark);\n}\n\n.cn-grouped-cards__group-header {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 8px;\n}\n\n.cn-grouped-cards__group-title {\n\tmargin: 0;\n\tfont-size: 15px;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n}\n\n.cn-grouped-cards__count {\n\tpadding: 2px 8px;\n\tborder-radius: var(--border-radius-pill, 12px);\n\tbackground: var(--color-main-background);\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 12px;\n\tfont-weight: 600;\n\twhite-space: nowrap;\n}\n\n.cn-grouped-cards__items {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n}\n\n.cn-grouped-cards__item {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n\tpadding: 10px 12px;\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius-large, 8px);\n\tbackground: var(--color-main-background);\n}\n\n.cn-grouped-cards__item-title {\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n}\n\n.cn-grouped-cards__item-meta,\n.cn-grouped-cards__extra-text,\n.cn-grouped-cards__group-empty,\n.cn-grouped-cards__state {\n\tmargin: 0;\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 13px;\n}\n\n.cn-grouped-cards__loading {\n\tdisplay: flex;\n\tjustify-content: center;\n\tpadding: 8px 0;\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_toDisplayString","_createVNode","_Fragment","_renderList","_createElementVNode"],"mappings":";;;AAWM,EAAA,KAAK,EAAC,kBAAkB;AAAC,EAAA,aAAW,EAAC,kBAAQ;;;;AAC5C,EAAA,KAAA,EAAA,yBAAA;AAAA,EAAA,aAAA,EAAA,wBAAA;;;;AAGF,EAAA,KAAA,EAAA,2BAAA;;;;AAG2B,EAAA,KAAA,EAAA,yBAAA;AAAA,EAAA,aAAA,EAAA,wBAAA;;;AAapB,MAAA,UAAA,GAAA,EAAA,KAAA,EAAA,gCAAA,GAAA;;;;AAIQ,EAAA,KAAA,EAAA,yBAAA;AAAA,EAAA,aAAA,EAAA,wBAAA;;;;AAEkB,EAAA,KAAG,EAAA,yBAAA;;AAM7B,MAAA,WAAA,GAAA,EAAA,KAAK,EAAC,8BAAO,GAAA;;;AAClB,EAAA,KAAA,EAAA,6BAAA;;;;AAGO,EAAA,KAAC,EAAA,+BAAA;;;AASH,MAAA,WAAA,GAAA,EAAA,KAAK,EAAC,gCAAyB,GAAA;;AAKrC,MAAA,WAAA,GAAA,EAAA,KAAA,EAAA,8BAAA,GAAA;;;;;AAlDH,EAAA,QAAAA,SAAA,EAAA,EAAAC,kBAAA,QAAA;KACI,MAAA,CAAA,KAAA;sBAALA,kBAEI,CAAA,GAAA,EAFJ,UAEI,EAAAC,eAAA,CADA,QAAU,CAAA,UAAA,CAAA,EAAA,CAAA,YAAA;SAEX,MAAA,CAAA,OAAA,IAAA,QAAA,CAAA,MAAA,CAAA,MAAA,KAAA,CAAA;AAAH,WAAAF,SAAA,EAAA,EAAAC,kBAAA,CAEM,OAFN,UAEM,EAAA;YADLE,WAAE,CAAA,wBAAA,EAAA;AAAA,cAAA,IAAA,EAAA,EAAA;AAAA,cAAA,IAAA,EAAA,QAAA,CAAA,YAAA;;;WAEW,QAAM,CAAA,MAAA,CAAC,MAAM,KAAA,CAAA,IAAA,CAAG,QAAA,CAAA,KAAA;4CAE1B,CAAA,GAAA,YAAA,EAAAD,eAAA,CADA,QAAU,CAAA,UAAA,CAAA,EAAA,CAAA,YAAA;0BAEZD;;AAEA,cAAA,KAAI,EAAC,wBAAwB;AAC7B,cAAA,KAAK,iDAA4B,QAAA,CAAA,OAAA,EAAA,CAAA;;gCACjCA,kBAyBS,CAAAG,QAAA,EAAA,IAAA,EAAAC,UAAA,CAxBO,QAAM,CAAA,MAAA,EAAA,CAAhB,KAAM,KAAA;qCADZJ,kBAyBS,CAAA,SAAA,EAAA;kBAvBR,GAAI,EAAC,KAAK,CAAC,GAAG;AACb,kBAAA,KAAG,EAAC,yBAAY;kBACjB,iBAAI,EAAA,KAAA,CAAA,SAAA;+BACM,EAAC,wBAAwB;;AACpC,kBAAAK,kBAAA,CAKS,UALT,UAKS,EAAA;oBAJRA,kBAEK,CAAA,IAAA,EAAA;sBAFA,EAAE,EAAE,KAAK,CAAC,SAAS;AAAE,sBAAA,KAAK,EAAA,+BAAgC;AAC7D,qBAAA,EAAAJ,eAAA,CAAA,KAAA,CAAA,KAAA,CAAA,EAAA,CAAA,oBAAA,UAAA,CAAA;AAEU,oBAAA,CAAA,KAAG,CAAA,KAAA;AAAd,yBAAAF,SAAA,EAAA,EAAAC,kBAAA,CAAc,MAAd,EAAA,UAAc,EAAAC,eAAA,CAAA,KAAA,CAAA,KAAA,CAAA,EAAA,CAAA,YAAA;;;mBAEN,KAAK,CAAC,KAAK,CAAC,MAAM,GAAA,CAAA;AAA1B,uBAAAF,SAAA,EAAA,EAAAC,kBAAA,CASG,MATH,UASG,EAAA;AARH,yBAAAD,SAAA,CAAA,IAAA,CAAA,EAAAC,kBAAA,CAOIG,QANW,EAAA,IAAA,EAAAC,UAAA,CAAA,KAAK,CAAC,KAAK,GAAnB,IAAI,KAAA;+CADXJ,kBAOI,CAAA,IAAA,EAAA;4BALH,GAAE,EAAA,IAAA,CAAA,GAAA;AACH,4BAAA,KAAE,EAAA,wBAAA;yCACS,EAAC,uBAAuB;;AACnC,4BAAAK,kBAAA,CAAmB,MAAnB,EAAA,WAAmB,EAAAJ,eAAA,CAAA,IAAA,CAAA,KAAA,CAAA,EAAA,CAAA,YAAA;AAClB,4BAAA,CAAA,IAAA,CAAA,IAAA;AAAD,iCAAAF,SAAA,EAAA,EAAAC,kBAAA,CAAC,MAAD,EAAA,WAAC,EAAAC,eAAA,CAAA,IAAA,CAAA,IAAA,CAAA,EAAA,CAAA,YAAA;;;;;oCAGHD,kBAEI,CAAA,GAAA,EAFJ,WAEI,EAAAC,eAAA,CADA,QAAe,CAAA,eAAA,CAAA,EAAA,CAAA,YAAA,CAAA;;;eAIb,QAAK,CAAA,KAAA;gCADXD;;AAEE,oBAAA,KAAG,EAAC,wDAAY;oBACjB,iBAAI,EAAA,QAAA,CAAA,KAAA,CAAA,SAAA;AACL,oBAAA,aAAQ,EAAA,wBAAA;;AACR,oBAAAK,kBAAA,CAIG,UAJH,WAIG,EAAA;sBAHFA,kBAEK,CAAA,IAAA,EAAA;wBAFA,EAAE,EAAE,QAAK,CAAA,KAAA,CAAC,SAAA;AAAA,wBAAA,KAAA,EAAA,+BAAA;AACb,uBAAA,EAAAJ,eAAA,CAAA,QAAA,CAAA,KAAA,CAAA,KAAA,CAAA,EAAA,CAAA,oBAAA,WAAA,CAAA;;AAGH,oBAAAI,kBAAA,IAAA,EAAA;;;;;;;;;"}

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

@@ -0,0 +1,29 @@
+import __sfc_main from './CnGroupedCardsWidget.vue.js';
+import { registerDashboardWidget } from '../CnWidgetGrid/dashboardWidgetRegistry.js';
+
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * CnGroupedCardsWidget — self-registers the `grouped-cards` widget type
+ * (groups of cards side by side, read from an app endpoint) into the shared
+ * dashboardWidgetRegistry at module load.
+ */
+
+
+registerDashboardWidget('grouped-cards', {
+	renderer: __sfc_main,
+	form: null,
+	defaultContent: {
+		endpointSource: { url: '' },
+		groupsPath: 'groups',
+		itemsKey: 'items',
+		columns: 2,
+	},
+	displayName: 'Grouped cards',
+	icon: 'ViewGridOutline',
+	surfaces: ['detail-page', 'app-dashboard'],
+});
+
+export { __sfc_main as CnGroupedCardsWidget, __sfc_main as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/CnGroupedCardsWidget/index.js"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2026 Conduction B.V.\n * SPDX-License-Identifier: EUPL-1.2\n *\n * CnGroupedCardsWidget — self-registers the `grouped-cards` widget type\n * (groups of cards side by side, read from an app endpoint) into the shared\n * dashboardWidgetRegistry at module load.\n */\n\nimport CnGroupedCardsWidget from './CnGroupedCardsWidget.vue'\nimport { registerDashboardWidget } from '../CnWidgetGrid/dashboardWidgetRegistry.js'\n\nregisterDashboardWidget('grouped-cards', {\n\trenderer: CnGroupedCardsWidget,\n\tform: null,\n\tdefaultContent: {\n\t\tendpointSource: { url: '' },\n\t\tgroupsPath: 'groups',\n\t\titemsKey: 'items',\n\t\tcolumns: 2,\n\t},\n\tdisplayName: 'Grouped cards',\n\ticon: 'ViewGridOutline',\n\tsurfaces: ['detail-page', 'app-dashboard'],\n})\n\nexport { CnGroupedCardsWidget }\nexport default CnGroupedCardsWidget\n"],"names":["CnGroupedCardsWidget"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA,uBAAuB,CAAC,eAAe,EAAE;AACzC,CAAC,QAAQ,EAAEA,UAAoB;AAC/B,CAAC,IAAI,EAAE,IAAI;AACX,CAAC,cAAc,EAAE;AACjB,EAAE,cAAc,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE;AAC7B,EAAE,UAAU,EAAE,QAAQ;AACtB,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,OAAO,EAAE,CAAC;AACZ,EAAE;AACF,CAAC,WAAW,EAAE,eAAe;AAC7B,CAAC,IAAI,EAAE,iBAAiB;AACxB,CAAC,QAAQ,EAAE,CAAC,aAAa,EAAE,eAAe,CAAC;AAC3C,CAAC;;;;"}