@conduction/nextcloud-vue 2.56.0-beta.5 → 2.56.0-beta.7

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

@@ -0,0 +1,298 @@
+import { translate } from '@nextcloud/l10n';
+import { NcLoadingIcon } from '@nextcloud/vue';
+import { fetchGroupedCounts } from '../../utils/fetchAggregate.js';
+
+/** The lightest step keeps this share of the primary colour, so it still stands out from the page. */
+const LIGHTEST_PRIMARY_SHARE = 70;
+
+/**
+ * The colour of step `index` out of `count`, on one ramp that runs from a
+ * light tint of the primary colour, through the primary colour, to the text
+ * colour. Steps differ in LIGHTNESS, so they stay apart for somebody who
+ * cannot tell hues apart, and the ramp follows the theme because it is built
+ * from Nextcloud's own variables.
+ *
+ * @param {number} index The step, 0-based.
+ * @param {number} count The number of steps.
+ * @return {string} A CSS colour.
+ * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget
+ */
+function rampColor(index, count) {
+	if (count <= 1) {
+		return 'var(--color-primary-element)'
+	}
+	const position = index / (count - 1);
+	if (position < 0.5) {
+		const share = Math.round(LIGHTEST_PRIMARY_SHARE + (position / 0.5) * (100 - LIGHTEST_PRIMARY_SHARE));
+		return `color-mix(in srgb, var(--color-primary-element) ${share}%, var(--color-main-background))`
+	}
+	const textShare = Math.round(((position - 0.5) / 0.5) * 100);
+	if (textShare === 0) {
+		return 'var(--color-primary-element)'
+	}
+	if (textShare === 100) {
+		return 'var(--color-main-text)'
+	}
+	return `color-mix(in srgb, var(--color-main-text) ${textShare}%, var(--color-primary-element))`
+}
+
+/**
+ * CnStackedBarWidget shows how a total divides over a few groups: ONE bar cut
+ * into segments, with a legend below it that names every segment and gives
+ * its count. Use it for "my cases per step" or "requests per channel".
+ *
+ * Segments come from one grouped count request against an OpenRegister
+ * source (`source.groupBy`), or from static `segments`. `order` fixes the
+ * order of the segments, and `labels` gives a group key a readable name.
+ * Colours come from one ramp built on the theme's primary colour; the steps
+ * differ in lightness, never in hue alone. Resolved by its registry type key
+ * `stacked-bar`.
+ *
+ * ```json
+ * {
+ *   "widgetKey": "stacked-bar",
+ *   "props": {
+ *     "content": {
+ *       "source": { "register": "dossiq", "schema": "case", "groupBy": "status", "filter": { "assignee": "@me" } },
+ *       "order": ["received", "in_progress", "decision", "publish"],
+ *       "labels": { "received": "Received", "in_progress": "In progress", "decision": "Decision", "publish": "Publish" }
+ *     }
+ *   }
+ * }
+ * ```
+ */
+var script = {
+	name: 'CnStackedBarWidget',
+
+	components: { NcLoadingIcon },
+
+	inject: {
+		/**
+		 * Host translate function provided by CnAppRoot. Segment labels and
+		 * the empty text run through it. Identity by default.
+		 */
+		cnTranslate: { default: () => (key) => key },
+	},
+
+	props: {
+		/**
+		 * The widget's configuration. `source` names the OpenRegister
+		 * register and schema, the `groupBy` field and an optional `filter`
+		 * (the shared @-token grammar). `segments` are static entries
+		 * `{ key?, label, value }` used when there is no source. `order` lists
+		 * group keys in the order they render; groups it does not list follow
+		 * in the order they arrive, and a listed key without records renders
+		 * with a count of 0. `labels` maps a group key to its label.
+		 * `emptyText` is shown when there is nothing to count.
+		 *
+		 * @type {{source?: {register?: string, schema?: string, groupBy?: string, filter?: object}, segments?: Array<{key?: string, label: string, value: number}>, order?: Array<string>, labels?: {[key: string]: string}, emptyText?: string}}
+		 */
+		content: {
+			type: Object,
+			default: () => ({}),
+		},
+
+		/**
+		 * Translate function. Falls back to the injected `cnTranslate`. Pass it
+		 * when mounting the widget outside a CnAppRoot.
+		 *
+		 * @type {((key: string) => string)|null}
+		 */
+		translate: {
+			type: Function,
+			default: null,
+		},
+	},
+
+	data() {
+		return {
+			groups: [],
+			loading: false,
+			error: '',
+		}
+	},
+
+	computed: {
+		/**
+		 * The translate function in use.
+		 *
+		 * @return {(key: string) => string}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget
+		 */
+		effectiveTranslate() {
+			return this.translate ?? this.cnTranslate
+		},
+
+		/**
+		 * Whether the segments come from OpenRegister.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget
+		 */
+		hasSource() {
+			const s = this.content.source || {};
+			return Boolean(s.register && s.schema && s.groupBy)
+		},
+
+		/**
+		 * The raw groups, from the source or the static list, as `{ key, label, count }`.
+		 *
+		 * @return {Array<{key: string, label: string, count: number}>}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget
+		 */
+		rawGroups() {
+			if (this.hasSource) {
+				return this.groups.map((group) => ({ key: group.key, label: group.key, count: group.count }))
+			}
+			const list = Array.isArray(this.content.segments) ? this.content.segments : [];
+			return list
+				.filter((segment) => segment && typeof segment === 'object')
+				.map((segment, index) => {
+					const count = Number(segment.value);
+					return {
+						key: String(segment.key ?? segment.label ?? index),
+						label: String(segment.label ?? segment.key ?? ''),
+						count: Number.isFinite(count) && count > 0 ? count : 0,
+					}
+				})
+		},
+
+		/**
+		 * The segments in render order, each with its label and colour.
+		 *
+		 * @return {Array<{key: string, label: string, count: number, color: string}>}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget
+		 */
+		segments() {
+			const order = Array.isArray(this.content.order) ? this.content.order.map(String) : [];
+			const labels = (this.content.labels && typeof this.content.labels === 'object') ? this.content.labels : {};
+			const byKey = {};
+			for (const group of this.rawGroups) {
+				byKey[group.key] = group;
+			}
+			const ordered = [];
+			for (const key of order) {
+				ordered.push(byKey[key] || { key, label: key, count: 0 });
+			}
+			for (const group of this.rawGroups) {
+				if (!order.includes(group.key)) {
+					ordered.push(group);
+				}
+			}
+			return ordered.map((group, index) => ({
+				key: group.key,
+				label: this.effectiveTranslate(typeof labels[group.key] === 'string' ? labels[group.key] : group.label),
+				count: group.count,
+				color: rampColor(index, ordered.length),
+			}))
+		},
+
+		/**
+		 * The segments that take up room in the bar.
+		 *
+		 * @return {Array<object>}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget
+		 */
+		barSegments() {
+			return this.segments.filter((segment) => segment.count > 0)
+		},
+
+		/**
+		 * The sum of all counts.
+		 *
+		 * @return {number}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget
+		 */
+		total() {
+			return this.segments.reduce((sum, segment) => sum + segment.count, 0)
+		},
+
+		/**
+		 * The text shown when there is nothing to count.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget
+		 */
+		emptyLabel() {
+			const text = this.content.emptyText;
+			return (typeof text === 'string' && text !== '')
+				? this.effectiveTranslate(text)
+				: translate('nextcloud-vue', 'Nothing to show yet')
+		},
+
+		/**
+		 * @return {string} The loading text.
+		 *
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget
+		 */
+		loadingLabel() {
+			return translate('nextcloud-vue', 'Loading…')
+		},
+
+		/**
+		 * @return {string} The text shown when the counts could not be loaded.
+		 *
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget
+		 */
+		errorLabel() {
+			return translate('nextcloud-vue', 'The numbers could not be loaded.')
+		},
+
+		/**
+		 * Changes whenever a new fetch is needed.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget
+		 */
+		sourceKey() {
+			return JSON.stringify(this.content.source || {})
+		},
+	},
+
+	watch: {
+		/** @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget */
+		sourceKey() {
+			this.fetchGroups();
+		},
+	},
+
+	mounted() {
+		this.fetchGroups();
+	},
+
+	methods: {
+		/**
+		 * Load the count per group in one request.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget
+		 */
+		async fetchGroups() {
+			if (!this.hasSource) {
+				this.groups = [];
+				this.error = '';
+				return
+			}
+			const requestKey = this.sourceKey;
+			this.loading = true;
+			this.error = '';
+			try {
+				const groups = await fetchGroupedCounts(this.content.source);
+				if (requestKey !== this.sourceKey) {
+					return
+				}
+				this.groups = groups;
+			} catch (e) {
+				// eslint-disable-next-line no-console
+				console.warn('[CnStackedBarWidget] failed to load counts:', e);
+				this.error = (e && e.message) || 'error';
+				this.groups = [];
+			} finally {
+				this.loading = false;
+			}
+		},
+	},
+};
+
+export { script as default, rampColor };
+//# sourceMappingURL=CnStackedBarWidget.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CnStackedBarWidget.vue2.js","sources":["../../../../src/components/CnStackedBarWidget/CnStackedBarWidget.vue"],"sourcesContent":["<!--\n  SPDX-FileCopyrightText: 2026 Conduction B.V.\n  SPDX-License-Identifier: EUPL-1.2\n-->\n<template>\n\t<div class=\"cn-stacked-bar\" data-testid=\"cn-stacked-bar\">\n\t\t<div v-if=\"loading\" class=\"cn-stacked-bar__state\" role=\"status\">\n\t\t\t<NcLoadingIcon :size=\"20\" />\n\t\t\t<span>{{ loadingLabel }}</span>\n\t\t</div>\n\t\t<p v-else-if=\"error\" class=\"cn-stacked-bar__state\" role=\"status\">\n\t\t\t{{ errorLabel }}\n\t\t</p>\n\t\t<p v-else-if=\"total === 0\" class=\"cn-stacked-bar__state\" data-testid=\"cn-stacked-bar-empty\">\n\t\t\t{{ emptyLabel }}\n\t\t</p>\n\t\t<template v-else>\n\t\t\t<!-- The bar is a picture of the legend below it. The legend holds\n\t\t\t     every label and number, so the bar itself is hidden from\n\t\t\t     assistive technology rather than described twice. -->\n\t\t\t<div class=\"cn-stacked-bar__bar\" aria-hidden=\"true\">\n\t\t\t\t<span\n\t\t\t\t\tv-for=\"segment in barSegments\"\n\t\t\t\t\t:key=\"segment.key\"\n\t\t\t\t\tclass=\"cn-stacked-bar__segment\"\n\t\t\t\t\t:style=\"{ flexGrow: segment.count, backgroundColor: segment.color }\" />\n\t\t\t</div>\n\t\t\t<ul class=\"cn-stacked-bar__legend\">\n\t\t\t\t<li\n\t\t\t\t\tv-for=\"segment in segments\"\n\t\t\t\t\t:key=\"segment.key\"\n\t\t\t\t\tclass=\"cn-stacked-bar__legend-item\"\n\t\t\t\t\tdata-testid=\"cn-stacked-bar-legend-item\">\n\t\t\t\t\t<span class=\"cn-stacked-bar__label\">\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclass=\"cn-stacked-bar__dot\"\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t:style=\"{ backgroundColor: segment.color }\" />\n\t\t\t\t\t\t{{ segment.label }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<!-- The leading space keeps label and count two words for a\n\t\t\t\t\t     screen reader; it is not drawn in this flex column. -->\n\t\t\t\t\t<strong class=\"cn-stacked-bar__count\">{{ ' ' + segment.count }}</strong>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</template>\n\t</div>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcLoadingIcon } from '@nextcloud/vue'\nimport { fetchGroupedCounts } from '../../utils/fetchAggregate.js'\n\n/** The lightest step keeps this share of the primary colour, so it still stands out from the page. */\nconst LIGHTEST_PRIMARY_SHARE = 70\n\n/**\n * The colour of step `index` out of `count`, on one ramp that runs from a\n * light tint of the primary colour, through the primary colour, to the text\n * colour. Steps differ in LIGHTNESS, so they stay apart for somebody who\n * cannot tell hues apart, and the ramp follows the theme because it is built\n * from Nextcloud's own variables.\n *\n * @param {number} index The step, 0-based.\n * @param {number} count The number of steps.\n * @return {string} A CSS colour.\n * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n */\nexport function rampColor(index, count) {\n\tif (count <= 1) {\n\t\treturn 'var(--color-primary-element)'\n\t}\n\tconst position = index / (count - 1)\n\tif (position < 0.5) {\n\t\tconst share = Math.round(LIGHTEST_PRIMARY_SHARE + (position / 0.5) * (100 - LIGHTEST_PRIMARY_SHARE))\n\t\treturn `color-mix(in srgb, var(--color-primary-element) ${share}%, var(--color-main-background))`\n\t}\n\tconst textShare = Math.round(((position - 0.5) / 0.5) * 100)\n\tif (textShare === 0) {\n\t\treturn 'var(--color-primary-element)'\n\t}\n\tif (textShare === 100) {\n\t\treturn 'var(--color-main-text)'\n\t}\n\treturn `color-mix(in srgb, var(--color-main-text) ${textShare}%, var(--color-primary-element))`\n}\n\n/**\n * CnStackedBarWidget shows how a total divides over a few groups: ONE bar cut\n * into segments, with a legend below it that names every segment and gives\n * its count. Use it for \"my cases per step\" or \"requests per channel\".\n *\n * Segments come from one grouped count request against an OpenRegister\n * source (`source.groupBy`), or from static `segments`. `order` fixes the\n * order of the segments, and `labels` gives a group key a readable name.\n * Colours come from one ramp built on the theme's primary colour; the steps\n * differ in lightness, never in hue alone. Resolved by its registry type key\n * `stacked-bar`.\n *\n * ```json\n * {\n *   \"widgetKey\": \"stacked-bar\",\n *   \"props\": {\n *     \"content\": {\n *       \"source\": { \"register\": \"dossiq\", \"schema\": \"case\", \"groupBy\": \"status\", \"filter\": { \"assignee\": \"@me\" } },\n *       \"order\": [\"received\", \"in_progress\", \"decision\", \"publish\"],\n *       \"labels\": { \"received\": \"Received\", \"in_progress\": \"In progress\", \"decision\": \"Decision\", \"publish\": \"Publish\" }\n *     }\n *   }\n * }\n * ```\n */\nexport default {\n\tname: 'CnStackedBarWidget',\n\n\tcomponents: { NcLoadingIcon },\n\n\tinject: {\n\t\t/**\n\t\t * Host translate function provided by CnAppRoot. Segment labels and\n\t\t * the empty text run through it. Identity by default.\n\t\t */\n\t\tcnTranslate: { default: () => (key) => key },\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The widget's configuration. `source` names the OpenRegister\n\t\t * register and schema, the `groupBy` field and an optional `filter`\n\t\t * (the shared @-token grammar). `segments` are static entries\n\t\t * `{ key?, label, value }` used when there is no source. `order` lists\n\t\t * group keys in the order they render; groups it does not list follow\n\t\t * in the order they arrive, and a listed key without records renders\n\t\t * with a count of 0. `labels` maps a group key to its label.\n\t\t * `emptyText` is shown when there is nothing to count.\n\t\t *\n\t\t * @type {{source?: {register?: string, schema?: string, groupBy?: string, filter?: object}, segments?: Array<{key?: string, label: string, value: number}>, order?: Array<string>, labels?: {[key: string]: string}, emptyText?: string}}\n\t\t */\n\t\tcontent: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\n\t\t/**\n\t\t * Translate function. Falls back to the injected `cnTranslate`. Pass it\n\t\t * when mounting the widget outside a CnAppRoot.\n\t\t *\n\t\t * @type {((key: string) => string)|null}\n\t\t */\n\t\ttranslate: {\n\t\t\ttype: Function,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tgroups: [],\n\t\t\tloading: false,\n\t\t\terror: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * The translate function in use.\n\t\t *\n\t\t * @return {(key: string) => string}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\teffectiveTranslate() {\n\t\t\treturn this.translate ?? this.cnTranslate\n\t\t},\n\n\t\t/**\n\t\t * Whether the segments come from OpenRegister.\n\t\t *\n\t\t * @return {boolean}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\thasSource() {\n\t\t\tconst s = this.content.source || {}\n\t\t\treturn Boolean(s.register && s.schema && s.groupBy)\n\t\t},\n\n\t\t/**\n\t\t * The raw groups, from the source or the static list, as `{ key, label, count }`.\n\t\t *\n\t\t * @return {Array<{key: string, label: string, count: number}>}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\trawGroups() {\n\t\t\tif (this.hasSource) {\n\t\t\t\treturn this.groups.map((group) => ({ key: group.key, label: group.key, count: group.count }))\n\t\t\t}\n\t\t\tconst list = Array.isArray(this.content.segments) ? this.content.segments : []\n\t\t\treturn list\n\t\t\t\t.filter((segment) => segment && typeof segment === 'object')\n\t\t\t\t.map((segment, index) => {\n\t\t\t\t\tconst count = Number(segment.value)\n\t\t\t\t\treturn {\n\t\t\t\t\t\tkey: String(segment.key ?? segment.label ?? index),\n\t\t\t\t\t\tlabel: String(segment.label ?? segment.key ?? ''),\n\t\t\t\t\t\tcount: Number.isFinite(count) && count > 0 ? count : 0,\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * The segments in render order, each with its label and colour.\n\t\t *\n\t\t * @return {Array<{key: string, label: string, count: number, color: string}>}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tsegments() {\n\t\t\tconst order = Array.isArray(this.content.order) ? this.content.order.map(String) : []\n\t\t\tconst labels = (this.content.labels && typeof this.content.labels === 'object') ? this.content.labels : {}\n\t\t\tconst byKey = {}\n\t\t\tfor (const group of this.rawGroups) {\n\t\t\t\tbyKey[group.key] = group\n\t\t\t}\n\t\t\tconst ordered = []\n\t\t\tfor (const key of order) {\n\t\t\t\tordered.push(byKey[key] || { key, label: key, count: 0 })\n\t\t\t}\n\t\t\tfor (const group of this.rawGroups) {\n\t\t\t\tif (!order.includes(group.key)) {\n\t\t\t\t\tordered.push(group)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn ordered.map((group, index) => ({\n\t\t\t\tkey: group.key,\n\t\t\t\tlabel: this.effectiveTranslate(typeof labels[group.key] === 'string' ? labels[group.key] : group.label),\n\t\t\t\tcount: group.count,\n\t\t\t\tcolor: rampColor(index, ordered.length),\n\t\t\t}))\n\t\t},\n\n\t\t/**\n\t\t * The segments that take up room in the bar.\n\t\t *\n\t\t * @return {Array<object>}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tbarSegments() {\n\t\t\treturn this.segments.filter((segment) => segment.count > 0)\n\t\t},\n\n\t\t/**\n\t\t * The sum of all counts.\n\t\t *\n\t\t * @return {number}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\ttotal() {\n\t\t\treturn this.segments.reduce((sum, segment) => sum + segment.count, 0)\n\t\t},\n\n\t\t/**\n\t\t * The text shown when there is nothing to count.\n\t\t *\n\t\t * @return {string}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\temptyLabel() {\n\t\t\tconst text = this.content.emptyText\n\t\t\treturn (typeof text === 'string' && text !== '')\n\t\t\t\t? this.effectiveTranslate(text)\n\t\t\t\t: t('nextcloud-vue', 'Nothing to show yet')\n\t\t},\n\n\t\t/**\n\t\t * @return {string} The loading text.\n\t\t *\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tloadingLabel() {\n\t\t\treturn t('nextcloud-vue', 'Loading…')\n\t\t},\n\n\t\t/**\n\t\t * @return {string} The text shown when the counts could not be loaded.\n\t\t *\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\terrorLabel() {\n\t\t\treturn t('nextcloud-vue', 'The numbers could not be loaded.')\n\t\t},\n\n\t\t/**\n\t\t * Changes whenever a new fetch is needed.\n\t\t *\n\t\t * @return {string}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tsourceKey() {\n\t\t\treturn JSON.stringify(this.content.source || {})\n\t\t},\n\t},\n\n\twatch: {\n\t\t/** @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget */\n\t\tsourceKey() {\n\t\t\tthis.fetchGroups()\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.fetchGroups()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Load the count per group in one request.\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tasync fetchGroups() {\n\t\t\tif (!this.hasSource) {\n\t\t\t\tthis.groups = []\n\t\t\t\tthis.error = ''\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst requestKey = this.sourceKey\n\t\t\tthis.loading = true\n\t\t\tthis.error = ''\n\t\t\ttry {\n\t\t\t\tconst groups = await fetchGroupedCounts(this.content.source)\n\t\t\t\tif (requestKey !== this.sourceKey) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.groups = groups\n\t\t\t} catch (e) {\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.warn('[CnStackedBarWidget] failed to load counts:', e)\n\t\t\t\tthis.error = (e && e.message) || 'error'\n\t\t\t\tthis.groups = []\n\t\t\t} finally {\n\t\t\t\tthis.loading = false\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-stacked-bar {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 16px;\n\twidth: 100%;\n}\n\n.cn-stacked-bar__state {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tmargin: 0;\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.cn-stacked-bar__bar {\n\tdisplay: flex;\n\tgap: 3px;\n\theight: 12px;\n}\n\n.cn-stacked-bar__segment {\n\tflex-basis: 0;\n\tmin-width: 4px;\n\tborder-radius: 6px;\n}\n\n.cn-stacked-bar__legend {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n\tgap: 12px;\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n}\n\n.cn-stacked-bar__legend-item {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n\tmin-width: 0;\n}\n\n.cn-stacked-bar__label {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tfont-size: 0.95em;\n\tcolor: var(--color-text-maxcontrast);\n\toverflow-wrap: anywhere;\n}\n\n.cn-stacked-bar__dot {\n\tflex: none;\n\twidth: 10px;\n\theight: 10px;\n\tborder-radius: 3px;\n}\n\n.cn-stacked-bar__count {\n\tfont-size: 1.5em;\n\tfont-weight: 700;\n\tline-height: 1.2;\n\tcolor: var(--color-main-text);\n}\n</style>\n"],"names":["t"],"mappings":"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"}

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

@@ -0,0 +1,77 @@
+import { resolveComponent, openBlock, createElementBlock, createVNode, createElementVNode, toDisplayString, Fragment, renderList, normalizeStyle, createTextVNode } from 'vue';
+
+const _hoisted_1 = {
+  class: "cn-stacked-bar",
+  "data-testid": "cn-stacked-bar"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "cn-stacked-bar__state",
+  role: "status"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "cn-stacked-bar__state",
+  role: "status"
+};
+const _hoisted_4 = {
+  key: 2,
+  class: "cn-stacked-bar__state",
+  "data-testid": "cn-stacked-bar-empty"
+};
+const _hoisted_5 = {
+  class: "cn-stacked-bar__bar",
+  "aria-hidden": "true"
+};
+const _hoisted_6 = { class: "cn-stacked-bar__legend" };
+const _hoisted_7 = { class: "cn-stacked-bar__label" };
+const _hoisted_8 = { class: "cn-stacked-bar__count" };
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcLoadingIcon = resolveComponent("NcLoadingIcon");
+
+  return (openBlock(), createElementBlock("div", _hoisted_1, [
+    ($data.loading)
+      ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createVNode(_component_NcLoadingIcon, { size: 20 }),
+          createElementVNode("span", null, toDisplayString($options.loadingLabel), 1 /* TEXT */)
+        ]))
+      : ($data.error)
+        ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString($options.errorLabel), 1 /* TEXT */))
+        : ($options.total === 0)
+          ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString($options.emptyLabel), 1 /* TEXT */))
+          : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+              createElementVNode("div", _hoisted_5, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList($options.barSegments, (segment) => {
+                  return (openBlock(), createElementBlock("span", {
+                    key: segment.key,
+                    class: "cn-stacked-bar__segment",
+                    style: normalizeStyle({ flexGrow: segment.count, backgroundColor: segment.color })
+                  }, null, 4 /* STYLE */))
+                }), 128 /* KEYED_FRAGMENT */))
+              ]),
+              createElementVNode("ul", _hoisted_6, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList($options.segments, (segment) => {
+                  return (openBlock(), createElementBlock("li", {
+                    key: segment.key,
+                    class: "cn-stacked-bar__legend-item",
+                    "data-testid": "cn-stacked-bar-legend-item"
+                  }, [
+                    createElementVNode("span", _hoisted_7, [
+                      createElementVNode("span", {
+                        class: "cn-stacked-bar__dot",
+                        "aria-hidden": "true",
+                        style: normalizeStyle({ backgroundColor: segment.color })
+                      }, null, 4 /* STYLE */),
+                      createTextVNode(" " + toDisplayString(segment.label), 1 /* TEXT */)
+                    ]),
+                    createElementVNode("strong", _hoisted_8, toDisplayString(' ' + segment.count), 1 /* TEXT */)
+                  ]))
+                }), 128 /* KEYED_FRAGMENT */))
+              ])
+            ], 64 /* STABLE_FRAGMENT */))
+  ]))
+}
+
+export { render };
+//# sourceMappingURL=CnStackedBarWidget.vue3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CnStackedBarWidget.vue3.js","sources":["../../../../src/components/CnStackedBarWidget/CnStackedBarWidget.vue?vue&type=template&id=c0bac1a2&lang.js"],"sourcesContent":["<!--\n  SPDX-FileCopyrightText: 2026 Conduction B.V.\n  SPDX-License-Identifier: EUPL-1.2\n-->\n<template>\n\t<div class=\"cn-stacked-bar\" data-testid=\"cn-stacked-bar\">\n\t\t<div v-if=\"loading\" class=\"cn-stacked-bar__state\" role=\"status\">\n\t\t\t<NcLoadingIcon :size=\"20\" />\n\t\t\t<span>{{ loadingLabel }}</span>\n\t\t</div>\n\t\t<p v-else-if=\"error\" class=\"cn-stacked-bar__state\" role=\"status\">\n\t\t\t{{ errorLabel }}\n\t\t</p>\n\t\t<p v-else-if=\"total === 0\" class=\"cn-stacked-bar__state\" data-testid=\"cn-stacked-bar-empty\">\n\t\t\t{{ emptyLabel }}\n\t\t</p>\n\t\t<template v-else>\n\t\t\t<!-- The bar is a picture of the legend below it. The legend holds\n\t\t\t     every label and number, so the bar itself is hidden from\n\t\t\t     assistive technology rather than described twice. -->\n\t\t\t<div class=\"cn-stacked-bar__bar\" aria-hidden=\"true\">\n\t\t\t\t<span\n\t\t\t\t\tv-for=\"segment in barSegments\"\n\t\t\t\t\t:key=\"segment.key\"\n\t\t\t\t\tclass=\"cn-stacked-bar__segment\"\n\t\t\t\t\t:style=\"{ flexGrow: segment.count, backgroundColor: segment.color }\" />\n\t\t\t</div>\n\t\t\t<ul class=\"cn-stacked-bar__legend\">\n\t\t\t\t<li\n\t\t\t\t\tv-for=\"segment in segments\"\n\t\t\t\t\t:key=\"segment.key\"\n\t\t\t\t\tclass=\"cn-stacked-bar__legend-item\"\n\t\t\t\t\tdata-testid=\"cn-stacked-bar-legend-item\">\n\t\t\t\t\t<span class=\"cn-stacked-bar__label\">\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclass=\"cn-stacked-bar__dot\"\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t:style=\"{ backgroundColor: segment.color }\" />\n\t\t\t\t\t\t{{ segment.label }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<!-- The leading space keeps label and count two words for a\n\t\t\t\t\t     screen reader; it is not drawn in this flex column. -->\n\t\t\t\t\t<strong class=\"cn-stacked-bar__count\">{{ ' ' + segment.count }}</strong>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</template>\n\t</div>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcLoadingIcon } from '@nextcloud/vue'\nimport { fetchGroupedCounts } from '../../utils/fetchAggregate.js'\n\n/** The lightest step keeps this share of the primary colour, so it still stands out from the page. */\nconst LIGHTEST_PRIMARY_SHARE = 70\n\n/**\n * The colour of step `index` out of `count`, on one ramp that runs from a\n * light tint of the primary colour, through the primary colour, to the text\n * colour. Steps differ in LIGHTNESS, so they stay apart for somebody who\n * cannot tell hues apart, and the ramp follows the theme because it is built\n * from Nextcloud's own variables.\n *\n * @param {number} index The step, 0-based.\n * @param {number} count The number of steps.\n * @return {string} A CSS colour.\n * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n */\nexport function rampColor(index, count) {\n\tif (count <= 1) {\n\t\treturn 'var(--color-primary-element)'\n\t}\n\tconst position = index / (count - 1)\n\tif (position < 0.5) {\n\t\tconst share = Math.round(LIGHTEST_PRIMARY_SHARE + (position / 0.5) * (100 - LIGHTEST_PRIMARY_SHARE))\n\t\treturn `color-mix(in srgb, var(--color-primary-element) ${share}%, var(--color-main-background))`\n\t}\n\tconst textShare = Math.round(((position - 0.5) / 0.5) * 100)\n\tif (textShare === 0) {\n\t\treturn 'var(--color-primary-element)'\n\t}\n\tif (textShare === 100) {\n\t\treturn 'var(--color-main-text)'\n\t}\n\treturn `color-mix(in srgb, var(--color-main-text) ${textShare}%, var(--color-primary-element))`\n}\n\n/**\n * CnStackedBarWidget shows how a total divides over a few groups: ONE bar cut\n * into segments, with a legend below it that names every segment and gives\n * its count. Use it for \"my cases per step\" or \"requests per channel\".\n *\n * Segments come from one grouped count request against an OpenRegister\n * source (`source.groupBy`), or from static `segments`. `order` fixes the\n * order of the segments, and `labels` gives a group key a readable name.\n * Colours come from one ramp built on the theme's primary colour; the steps\n * differ in lightness, never in hue alone. Resolved by its registry type key\n * `stacked-bar`.\n *\n * ```json\n * {\n *   \"widgetKey\": \"stacked-bar\",\n *   \"props\": {\n *     \"content\": {\n *       \"source\": { \"register\": \"dossiq\", \"schema\": \"case\", \"groupBy\": \"status\", \"filter\": { \"assignee\": \"@me\" } },\n *       \"order\": [\"received\", \"in_progress\", \"decision\", \"publish\"],\n *       \"labels\": { \"received\": \"Received\", \"in_progress\": \"In progress\", \"decision\": \"Decision\", \"publish\": \"Publish\" }\n *     }\n *   }\n * }\n * ```\n */\nexport default {\n\tname: 'CnStackedBarWidget',\n\n\tcomponents: { NcLoadingIcon },\n\n\tinject: {\n\t\t/**\n\t\t * Host translate function provided by CnAppRoot. Segment labels and\n\t\t * the empty text run through it. Identity by default.\n\t\t */\n\t\tcnTranslate: { default: () => (key) => key },\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The widget's configuration. `source` names the OpenRegister\n\t\t * register and schema, the `groupBy` field and an optional `filter`\n\t\t * (the shared @-token grammar). `segments` are static entries\n\t\t * `{ key?, label, value }` used when there is no source. `order` lists\n\t\t * group keys in the order they render; groups it does not list follow\n\t\t * in the order they arrive, and a listed key without records renders\n\t\t * with a count of 0. `labels` maps a group key to its label.\n\t\t * `emptyText` is shown when there is nothing to count.\n\t\t *\n\t\t * @type {{source?: {register?: string, schema?: string, groupBy?: string, filter?: object}, segments?: Array<{key?: string, label: string, value: number}>, order?: Array<string>, labels?: {[key: string]: string}, emptyText?: string}}\n\t\t */\n\t\tcontent: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\n\t\t/**\n\t\t * Translate function. Falls back to the injected `cnTranslate`. Pass it\n\t\t * when mounting the widget outside a CnAppRoot.\n\t\t *\n\t\t * @type {((key: string) => string)|null}\n\t\t */\n\t\ttranslate: {\n\t\t\ttype: Function,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tgroups: [],\n\t\t\tloading: false,\n\t\t\terror: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * The translate function in use.\n\t\t *\n\t\t * @return {(key: string) => string}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\teffectiveTranslate() {\n\t\t\treturn this.translate ?? this.cnTranslate\n\t\t},\n\n\t\t/**\n\t\t * Whether the segments come from OpenRegister.\n\t\t *\n\t\t * @return {boolean}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\thasSource() {\n\t\t\tconst s = this.content.source || {}\n\t\t\treturn Boolean(s.register && s.schema && s.groupBy)\n\t\t},\n\n\t\t/**\n\t\t * The raw groups, from the source or the static list, as `{ key, label, count }`.\n\t\t *\n\t\t * @return {Array<{key: string, label: string, count: number}>}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\trawGroups() {\n\t\t\tif (this.hasSource) {\n\t\t\t\treturn this.groups.map((group) => ({ key: group.key, label: group.key, count: group.count }))\n\t\t\t}\n\t\t\tconst list = Array.isArray(this.content.segments) ? this.content.segments : []\n\t\t\treturn list\n\t\t\t\t.filter((segment) => segment && typeof segment === 'object')\n\t\t\t\t.map((segment, index) => {\n\t\t\t\t\tconst count = Number(segment.value)\n\t\t\t\t\treturn {\n\t\t\t\t\t\tkey: String(segment.key ?? segment.label ?? index),\n\t\t\t\t\t\tlabel: String(segment.label ?? segment.key ?? ''),\n\t\t\t\t\t\tcount: Number.isFinite(count) && count > 0 ? count : 0,\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * The segments in render order, each with its label and colour.\n\t\t *\n\t\t * @return {Array<{key: string, label: string, count: number, color: string}>}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tsegments() {\n\t\t\tconst order = Array.isArray(this.content.order) ? this.content.order.map(String) : []\n\t\t\tconst labels = (this.content.labels && typeof this.content.labels === 'object') ? this.content.labels : {}\n\t\t\tconst byKey = {}\n\t\t\tfor (const group of this.rawGroups) {\n\t\t\t\tbyKey[group.key] = group\n\t\t\t}\n\t\t\tconst ordered = []\n\t\t\tfor (const key of order) {\n\t\t\t\tordered.push(byKey[key] || { key, label: key, count: 0 })\n\t\t\t}\n\t\t\tfor (const group of this.rawGroups) {\n\t\t\t\tif (!order.includes(group.key)) {\n\t\t\t\t\tordered.push(group)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn ordered.map((group, index) => ({\n\t\t\t\tkey: group.key,\n\t\t\t\tlabel: this.effectiveTranslate(typeof labels[group.key] === 'string' ? labels[group.key] : group.label),\n\t\t\t\tcount: group.count,\n\t\t\t\tcolor: rampColor(index, ordered.length),\n\t\t\t}))\n\t\t},\n\n\t\t/**\n\t\t * The segments that take up room in the bar.\n\t\t *\n\t\t * @return {Array<object>}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tbarSegments() {\n\t\t\treturn this.segments.filter((segment) => segment.count > 0)\n\t\t},\n\n\t\t/**\n\t\t * The sum of all counts.\n\t\t *\n\t\t * @return {number}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\ttotal() {\n\t\t\treturn this.segments.reduce((sum, segment) => sum + segment.count, 0)\n\t\t},\n\n\t\t/**\n\t\t * The text shown when there is nothing to count.\n\t\t *\n\t\t * @return {string}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\temptyLabel() {\n\t\t\tconst text = this.content.emptyText\n\t\t\treturn (typeof text === 'string' && text !== '')\n\t\t\t\t? this.effectiveTranslate(text)\n\t\t\t\t: t('nextcloud-vue', 'Nothing to show yet')\n\t\t},\n\n\t\t/**\n\t\t * @return {string} The loading text.\n\t\t *\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tloadingLabel() {\n\t\t\treturn t('nextcloud-vue', 'Loading…')\n\t\t},\n\n\t\t/**\n\t\t * @return {string} The text shown when the counts could not be loaded.\n\t\t *\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\terrorLabel() {\n\t\t\treturn t('nextcloud-vue', 'The numbers could not be loaded.')\n\t\t},\n\n\t\t/**\n\t\t * Changes whenever a new fetch is needed.\n\t\t *\n\t\t * @return {string}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tsourceKey() {\n\t\t\treturn JSON.stringify(this.content.source || {})\n\t\t},\n\t},\n\n\twatch: {\n\t\t/** @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget */\n\t\tsourceKey() {\n\t\t\tthis.fetchGroups()\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.fetchGroups()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Load the count per group in one request.\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget\n\t\t */\n\t\tasync fetchGroups() {\n\t\t\tif (!this.hasSource) {\n\t\t\t\tthis.groups = []\n\t\t\t\tthis.error = ''\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst requestKey = this.sourceKey\n\t\t\tthis.loading = true\n\t\t\tthis.error = ''\n\t\t\ttry {\n\t\t\t\tconst groups = await fetchGroupedCounts(this.content.source)\n\t\t\t\tif (requestKey !== this.sourceKey) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.groups = groups\n\t\t\t} catch (e) {\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.warn('[CnStackedBarWidget] failed to load counts:', e)\n\t\t\t\tthis.error = (e && e.message) || 'error'\n\t\t\t\tthis.groups = []\n\t\t\t} finally {\n\t\t\t\tthis.loading = false\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-stacked-bar {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 16px;\n\twidth: 100%;\n}\n\n.cn-stacked-bar__state {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tmargin: 0;\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.cn-stacked-bar__bar {\n\tdisplay: flex;\n\tgap: 3px;\n\theight: 12px;\n}\n\n.cn-stacked-bar__segment {\n\tflex-basis: 0;\n\tmin-width: 4px;\n\tborder-radius: 6px;\n}\n\n.cn-stacked-bar__legend {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n\tgap: 12px;\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n}\n\n.cn-stacked-bar__legend-item {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n\tmin-width: 0;\n}\n\n.cn-stacked-bar__label {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tfont-size: 0.95em;\n\tcolor: var(--color-text-maxcontrast);\n\toverflow-wrap: anywhere;\n}\n\n.cn-stacked-bar__dot {\n\tflex: none;\n\twidth: 10px;\n\theight: 10px;\n\tborder-radius: 3px;\n}\n\n.cn-stacked-bar__count {\n\tfont-size: 1.5em;\n\tfont-weight: 700;\n\tline-height: 1.2;\n\tcolor: var(--color-main-text);\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_createVNode","_createElementVNode","_toDisplayString","_Fragment","_renderList","_normalizeStyle"],"mappings":";;;AASM,EAAA,KAAC,EAAA,gBAAA;AAAA,EAAA,aAAA,EAAA,gBAAA;;;;AACgB,EAAA,KAAI,EAAC,uBAAuB;AAAA,EAAA,IAAK,EAAC,QAAQ;;;;AAI/C,EAAA,KAAA,EAAA,uBAAA;AAAA,EAAA,IAAA,EAAA,QAAA;;;;AAGW,EAAA,KAAK,EAAE,uBAAsB;AAAC,EAAA,aAAS,EAAA,sBAAA;;;AAO5D,EAAA,KAAK,EAAC,qBAAqB;AAAA,EAAA,aAAA,EAAA,MAAA;;AAO5B,MAAA,UAAA,GAAA,EAAA,KAAK,EAAC,wBAAwB,GAAA;AAM1B,MAAA,UAAA,GAAA,EAAA,KAAI,EAAE,uBAAuB,GAAA;AASlC,MAAA,UAAA,GAAA,EAAA,KAAA,EAAA,uBAAA,GAAA;;;;;;KApCO,KAAO,CAAA,OAAA;AAAlB,SAAAA,SAAA,EAAA,EAAAC,kBAAA,CAGM,OAHN,UAGM,EAAA;UAFLC,WAAe,CAAA,wBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AACf,UAAAC,kBAAA,CAAE,8BAAA,QAAA,CAAA,YAAA,CAAA,EAAA,CAAA,YAAA;;SAEU,KAAG,CAAA,KAAA;0CAEZ,CAAA,GAAA,YAAA,EAAAC,eAAA,CADD,QAAA,CAAA,UAAA,CAAA,EAAA,CAAA,YAAA;WAEW,QAAK,CAAA,KAAA,KAAA,CAAA;8EACb,QAAQ,CAAA,UAAA,CAAA,EAAA,CAAA,YAAA;;AAMX,cAAAD,kBAAA,CAMI,OANJ,UAMI,EAAA;kCALJF,kBAI0B,CAAAI,QAAA,EAAA,IAAA,EAAAC,UAAA,CAHvB,QAAA,CAAA,WAAA,EAAA,CAAA,OAAA,KAAA;uCADHL,kBAI0B,CAAA,MAAA,EAAA;oBAF1B,GAAI,EAAE,OAAO,CAAC,GAAG;AACjB,oBAAA,KAAC,EAAA,yBAAA;AACA,oBAAA,KAAK,6BAAc,OAAM,CAAA,KAAA,EAAA,eAAA,EAAA,OAAA,CAAA,KAAA,EAAA,CAAA;;;;AAE1B,cAAAE,kBAAA,OAAA;kCACAF,8CACkB,QAAQ,CAAA,QAAA,EAAA,CAAnB,OAAO,KAAA;uCADdA;oBAEC,GAAG,EAAC,OAAA,CAAA,GAAA;yBACA,EAAC,6BAAsB;AAC1B,oBAAA,aAAS,EAAC,4BAAO;;AACjB,oBAAAE,kBAAA,CAMC,QAND,UAMC,EAAA;sBALFA,kBAGgD,CAAA,MAAA,EAAA;AAF/C,wBAAA,KAAI,EAAA,qBAAA;AACJ,wBAAA,aAAW,EAAC,MAAM;wBACf,KAAG,EAAAI,cAAA,CAAA,EAAA,eAAA,SAA4B,CAAC,KAAK,EAAA,CAAA;;sCAAO,GAChD,GAAAH,eAAA,CAAG,OAAO,CAAC,KAAK,CAAA,EAAA,CAAA,YAAA;;AAIjB,oBAAAD,kBAAA,CAAC,QAAD,EAAA,UAAC,EAAAC,eAAA,CAAA,GAAA,GAAA,OAAA,CAAA,KAAA,CAAA,EAAA,CAAA,YAAA;;;;;;;;;;"}

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

@@ -0,0 +1,10 @@
+import script from './CnStackedBarWidgetForm.vue2.js';
+import { render } from './CnStackedBarWidgetForm.vue3.js';
+
+script.render = render;
+script.__scopeId = "data-v-56e6c6a2";
+script.__file = "src/components/CnStackedBarWidgetForm/CnStackedBarWidgetForm.vue";
+const __sfc_main = script;
+
+export { __sfc_main as default };
+//# sourceMappingURL=CnStackedBarWidgetForm.vue.js.map

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

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

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

@@ -0,0 +1,169 @@
+import { translate } from '@nextcloud/l10n';
+import { NcTextField } from '@nextcloud/vue';
+import __sfc_main from '../CnFieldPicker/CnFieldPicker.vue.js';
+import __sfc_main$1 from '../CnFilterRowsEditor/CnFilterRowsEditor.vue.js';
+import __sfc_main$2 from '../CnRegisterSchemaSelect/CnRegisterSchemaSelect.vue.js';
+import { fetchSchemaProperties } from '../../utils/fetchSchemaProperties.js';
+import { filterToRows, rowsToFilter } from '../CnFilterRowsEditor/filterRows.js';
+
+/**
+ * CnStackedBarWidgetForm is the settings form of a `stacked-bar` widget. It
+ * edits the source (register, schema, filter), the field the records are
+ * grouped by, the order of the segments and the empty text. Static `segments`
+ * and the `labels` map are written in the manifest and pass through
+ * untouched. Emits `update:content` on every change; `validate()` asks for a
+ * register, a schema and a group field unless the widget has static segments.
+ */
+var script = {
+	name: 'CnStackedBarWidgetForm',
+
+	components: { NcTextField, CnFieldPicker: __sfc_main, CnFilterRowsEditor: __sfc_main$1, CnRegisterSchemaSelect: __sfc_main$2 },
+
+	props: {
+		/**
+		 * The placement being edited (pre-fills from `editingWidget.content`), or null.
+		 *
+		 * @type {{content: object}|null}
+		 */
+		editingWidget: { type: Object, default: null },
+		/**
+		 * Initial content values when not editing (registry defaults).
+		 *
+		 * @type {object}
+		 */
+		value: { type: Object, default: () => ({}) },
+	},
+
+	emits: [
+		/**
+		 * Emitted with the assembled content blob on every field change.
+		 *
+		 * @event update:content
+		 * @type {object}
+		 */
+		'update:content',
+	],
+
+	data() {
+		const initial = this.editingWidget?.content || this.value || {};
+		const src = initial.source || {};
+		return {
+			initial,
+			source: { register: src.register ?? '', schema: src.schema ?? '' },
+			groupBy: src.groupBy ?? '',
+			filterRows: filterToRows(src.filter || {}),
+			orderText: Array.isArray(initial.order) ? initial.order.join(', ') : '',
+			emptyText: initial.emptyText ?? '',
+			availableFields: [],
+		}
+	},
+
+	computed: {
+		/**
+		 * The assembled content blob. Keys the form does not edit (static
+		 * segments, labels) are carried over from the initial content.
+		 *
+		 * @return {object}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget
+		 */
+		assembledContent() {
+			return {
+				...this.initial,
+				source: {
+					register: this.source.register,
+					schema: this.source.schema,
+					groupBy: this.groupBy,
+					filter: rowsToFilter(this.filterRows),
+				},
+
+				order: this.orderText.split(',').map((key) => key.trim()).filter((key) => key !== ''),
+				emptyText: this.emptyText,
+			}
+		},
+	},
+
+	watch: {
+		'source.register': 'loadFields',
+		'source.schema': 'loadFields',
+	},
+
+	mounted() {
+		this.loadFields();
+	},
+
+	methods: {
+		t: translate,
+
+		/**
+		 * Load the schema's field names for the picker.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget
+		 */
+		async loadFields() {
+			this.availableFields = await fetchSchemaProperties(this.source.register, this.source.schema);
+		},
+
+		/**
+		 * Set one field and emit the assembled content.
+		 *
+		 * @param {string} field The data key to write.
+		 * @param {string} value The new value.
+		 * @return {void}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget
+		 */
+		updateField(field, value) {
+			this[field] = value;
+			this.$emit('update:content', this.assembledContent);
+		},
+
+		/**
+		 * Set the register or the schema and emit.
+		 *
+		 * @param {'register'|'schema'} field The source key to write.
+		 * @param {string} value The chosen slug.
+		 * @return {void}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget
+		 */
+		updateSource(field, value) {
+			this.source[field] = value;
+			this.$emit('update:content', this.assembledContent);
+		},
+
+		/**
+		 * Take the filter editor's rows and emit.
+		 *
+		 * @param {Array<{key: string, op: string, value: string}>} rows The rows.
+		 * @return {void}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget
+		 */
+		onFilterRows(rows) {
+			this.filterRows = rows;
+			this.$emit('update:content', this.assembledContent);
+		},
+
+		/**
+		 * Validate the form; an empty array means valid.
+		 *
+		 * @return {string[]} The validation errors.
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-stacked-bar-widget
+		 */
+		validate() {
+			const hasStatic = Array.isArray(this.initial.segments) && this.initial.segments.length > 0;
+			if (hasStatic && !this.source.register && !this.source.schema) {
+				return []
+			}
+			const errors = [];
+			if (!this.source.register || !this.source.schema) {
+				errors.push(translate('nextcloud-vue', 'A register and schema are required'));
+			}
+			if (!this.groupBy) {
+				errors.push(translate('nextcloud-vue', 'A field to group by is required'));
+			}
+			return errors
+		},
+	},
+};
+
+export { script as default };
+//# sourceMappingURL=CnStackedBarWidgetForm.vue2.js.map