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

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

@@ -0,0 +1,186 @@
+/**
+ * CnSegmentedControl is a switch between a few views of the same thing, such
+ * as "My work / My team". One option is always the chosen one.
+ *
+ * It is a radio group: screen readers announce the group and which option is
+ * checked, the arrow keys move the choice, and Tab enters and leaves the group
+ * in one step. Give it a name with `aria-label` (or `aria-labelledby`).
+ *
+ * ```vue
+ * <CnSegmentedControl
+ *   v-model="view"
+ *   aria-label="View"
+ *   :options="[
+ *     { value: 'mine', label: 'My work' },
+ *     { value: 'team', label: 'My team' },
+ *   ]" />
+ * ```
+ *
+ * To switch between panels of content, use `CnTabs` with `variant="segmented"`
+ * instead: that keeps the tab and panel semantics and looks the same.
+ */
+var script = {
+	name: 'CnSegmentedControl',
+
+	props: {
+		/**
+		 * The options. Each is `{ value, label, disabled?, count? }`, or a
+		 * plain string that is both the value and the label. `count` shows a
+		 * number after the label.
+		 *
+		 * @type {Array<string|{value: (string|number|boolean), label: string, disabled?: boolean, count?: number}>}
+		 */
+		options: {
+			type: Array,
+			required: true,
+		},
+
+		/**
+		 * The value of the chosen option (v-model).
+		 *
+		 * @type {string|number|boolean|null}
+		 */
+		modelValue: {
+			type: [Boolean, String, Number],
+			default: null,
+		},
+
+		/** Accessible name of the group, read out when focus enters it. */
+		ariaLabel: {
+			type: String,
+			default: '',
+		},
+
+		/** Id of an element that names the group, as an alternative to `ariaLabel`. */
+		ariaLabelledby: {
+			type: String,
+			default: '',
+		},
+
+		/** Stretch the control to the full width, with options of equal width. */
+		stretch: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	emits: [
+		/**
+		 * Emitted with the value of the newly chosen option.
+		 *
+		 * @event update:modelValue
+		 * @type {string|number|boolean}
+		 */
+		'update:modelValue',
+	],
+
+	computed: {
+		/**
+		 * The options in one shape.
+		 *
+		 * @return {Array<{key: string, value: (string|number|boolean), label: string, disabled: boolean, count: (number|null)}>}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-segmented-control
+		 */
+		normalizedOptions() {
+			return (Array.isArray(this.options) ? this.options : [])
+				.filter((option) => option !== null && option !== undefined)
+				.map((option) => {
+					if (typeof option !== 'object') {
+						return { key: String(option), value: option, label: String(option), disabled: false, count: null }
+					}
+					return {
+						key: String(option.value),
+						value: option.value,
+						label: String(option.label ?? option.value),
+						disabled: option.disabled === true,
+						count: Number.isFinite(option.count) ? option.count : null,
+					}
+				})
+		},
+
+		/**
+		 * The option Tab lands on: the chosen one, else the first enabled one.
+		 *
+		 * @return {number} Its index, or -1 when no option can take focus.
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-segmented-control
+		 */
+		focusableIndex() {
+			const checked = this.normalizedOptions.findIndex((option) => this.isChecked(option) && !option.disabled);
+			if (checked !== -1) {
+				return checked
+			}
+			return this.normalizedOptions.findIndex((option) => !option.disabled)
+		},
+	},
+
+	methods: {
+		/**
+		 * Whether an option is the chosen one.
+		 *
+		 * @param {{value: (string|number|boolean)}} option The option.
+		 * @return {boolean}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-segmented-control
+		 */
+		isChecked(option) {
+			return this.modelValue !== null && String(option.value) === String(this.modelValue)
+		},
+
+		/**
+		 * Choose an option.
+		 *
+		 * @param {{value: (string|number|boolean), disabled: boolean}} option The option.
+		 * @return {void}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-segmented-control
+		 */
+		select(option) {
+			if (option.disabled || this.isChecked(option)) {
+				return
+			}
+			this.$emit('update:modelValue', option.value);
+		},
+
+		/**
+		 * Arrow keys, Home and End move the choice, as in a native radio
+		 * group. Disabled options are passed over and the ends wrap around.
+		 *
+		 * @param {KeyboardEvent} event The key press.
+		 * @return {void}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-segmented-control
+		 */
+		onKeydown(event) {
+			const enabled = this.normalizedOptions
+				.map((option, index) => ({ option, index }))
+				.filter((entry) => !entry.option.disabled);
+			if (enabled.length === 0) {
+				return
+			}
+			const buttons = Array.from(this.$el.querySelectorAll('[role="radio"]'));
+			const focused = buttons.indexOf(document.activeElement);
+			const from = focused !== -1 ? focused : this.focusableIndex;
+			let position = enabled.findIndex((entry) => entry.index === from);
+			if (position === -1) {
+				position = 0;
+			}
+			if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+				position = (position + 1) % enabled.length;
+			} else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+				position = (position - 1 + enabled.length) % enabled.length;
+			} else if (event.key === 'Home') {
+				position = 0;
+			} else if (event.key === 'End') {
+				position = enabled.length - 1;
+			} else {
+				return
+			}
+			event.preventDefault();
+			const target = enabled[position];
+			this.select(target.option);
+			if (buttons[target.index] && typeof buttons[target.index].focus === 'function') {
+				buttons[target.index].focus();
+			}
+		},
+	},
+};
+
+export { script as default };
+//# sourceMappingURL=CnSegmentedControl.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CnSegmentedControl.vue2.js","sources":["../../../../src/components/CnSegmentedControl/CnSegmentedControl.vue"],"sourcesContent":["<!--\n  SPDX-FileCopyrightText: 2026 Conduction B.V.\n  SPDX-License-Identifier: EUPL-1.2\n-->\n<template>\n\t<div\n\t\tclass=\"cn-segmented-control\"\n\t\t:class=\"{ 'cn-segmented-control--stretch': stretch }\"\n\t\trole=\"radiogroup\"\n\t\t:aria-label=\"ariaLabel || null\"\n\t\t:aria-labelledby=\"ariaLabelledby || null\"\n\t\t@keydown=\"onKeydown\">\n\t\t<button\n\t\t\tv-for=\"(option, index) in normalizedOptions\"\n\t\t\t:key=\"option.key\"\n\t\t\ttype=\"button\"\n\t\t\trole=\"radio\"\n\t\t\tclass=\"cn-segmented-control__option\"\n\t\t\t:class=\"{ 'cn-segmented-control__option--checked': isChecked(option) }\"\n\t\t\t:aria-checked=\"isChecked(option) ? 'true' : 'false'\"\n\t\t\t:tabindex=\"index === focusableIndex ? 0 : -1\"\n\t\t\t:disabled=\"option.disabled || null\"\n\t\t\t:data-value=\"option.key\"\n\t\t\t@click=\"select(option)\">\n\t\t\t<!-- @slot option Replaces the content of one option. -->\n\t\t\t<!-- @binding {object} option The option: `{ value, label, disabled, count }`. -->\n\t\t\t<!-- @binding {boolean} checked Whether this option is the chosen one. -->\n\t\t\t<slot name=\"option\" :option=\"option\" :checked=\"isChecked(option)\">\n\t\t\t\t<span class=\"cn-segmented-control__label\">{{ option.label }}</span>\n\t\t\t\t<!-- The leading space is not drawn in this flex row; it keeps a\n\t\t\t\t     screen reader from reading label and count as one word. -->\n\t\t\t\t<span v-if=\"option.count !== null\" class=\"cn-segmented-control__count\">{{ ' ' + option.count }}</span>\n\t\t\t</slot>\n\t\t</button>\n\t</div>\n</template>\n\n<script>\n/**\n * CnSegmentedControl is a switch between a few views of the same thing, such\n * as \"My work / My team\". One option is always the chosen one.\n *\n * It is a radio group: screen readers announce the group and which option is\n * checked, the arrow keys move the choice, and Tab enters and leaves the group\n * in one step. Give it a name with `aria-label` (or `aria-labelledby`).\n *\n * ```vue\n * <CnSegmentedControl\n *   v-model=\"view\"\n *   aria-label=\"View\"\n *   :options=\"[\n *     { value: 'mine', label: 'My work' },\n *     { value: 'team', label: 'My team' },\n *   ]\" />\n * ```\n *\n * To switch between panels of content, use `CnTabs` with `variant=\"segmented\"`\n * instead: that keeps the tab and panel semantics and looks the same.\n */\nexport default {\n\tname: 'CnSegmentedControl',\n\n\tprops: {\n\t\t/**\n\t\t * The options. Each is `{ value, label, disabled?, count? }`, or a\n\t\t * plain string that is both the value and the label. `count` shows a\n\t\t * number after the label.\n\t\t *\n\t\t * @type {Array<string|{value: (string|number|boolean), label: string, disabled?: boolean, count?: number}>}\n\t\t */\n\t\toptions: {\n\t\t\ttype: Array,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The value of the chosen option (v-model).\n\t\t *\n\t\t * @type {string|number|boolean|null}\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [Boolean, String, Number],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** Accessible name of the group, read out when focus enters it. */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Id of an element that names the group, as an alternative to `ariaLabel`. */\n\t\tariaLabelledby: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Stretch the control to the full width, with options of equal width. */\n\t\tstretch: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t/**\n\t\t * Emitted with the value of the newly chosen option.\n\t\t *\n\t\t * @event update:modelValue\n\t\t * @type {string|number|boolean}\n\t\t */\n\t\t'update:modelValue',\n\t],\n\n\tcomputed: {\n\t\t/**\n\t\t * The options in one shape.\n\t\t *\n\t\t * @return {Array<{key: string, value: (string|number|boolean), label: string, disabled: boolean, count: (number|null)}>}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-segmented-control\n\t\t */\n\t\tnormalizedOptions() {\n\t\t\treturn (Array.isArray(this.options) ? this.options : [])\n\t\t\t\t.filter((option) => option !== null && option !== undefined)\n\t\t\t\t.map((option) => {\n\t\t\t\t\tif (typeof option !== 'object') {\n\t\t\t\t\t\treturn { key: String(option), value: option, label: String(option), disabled: false, count: null }\n\t\t\t\t\t}\n\t\t\t\t\treturn {\n\t\t\t\t\t\tkey: String(option.value),\n\t\t\t\t\t\tvalue: option.value,\n\t\t\t\t\t\tlabel: String(option.label ?? option.value),\n\t\t\t\t\t\tdisabled: option.disabled === true,\n\t\t\t\t\t\tcount: Number.isFinite(option.count) ? option.count : null,\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * The option Tab lands on: the chosen one, else the first enabled one.\n\t\t *\n\t\t * @return {number} Its index, or -1 when no option can take focus.\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-segmented-control\n\t\t */\n\t\tfocusableIndex() {\n\t\t\tconst checked = this.normalizedOptions.findIndex((option) => this.isChecked(option) && !option.disabled)\n\t\t\tif (checked !== -1) {\n\t\t\t\treturn checked\n\t\t\t}\n\t\t\treturn this.normalizedOptions.findIndex((option) => !option.disabled)\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Whether an option is the chosen one.\n\t\t *\n\t\t * @param {{value: (string|number|boolean)}} option The option.\n\t\t * @return {boolean}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-segmented-control\n\t\t */\n\t\tisChecked(option) {\n\t\t\treturn this.modelValue !== null && String(option.value) === String(this.modelValue)\n\t\t},\n\n\t\t/**\n\t\t * Choose an option.\n\t\t *\n\t\t * @param {{value: (string|number|boolean), disabled: boolean}} option The option.\n\t\t * @return {void}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-segmented-control\n\t\t */\n\t\tselect(option) {\n\t\t\tif (option.disabled || this.isChecked(option)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.$emit('update:modelValue', option.value)\n\t\t},\n\n\t\t/**\n\t\t * Arrow keys, Home and End move the choice, as in a native radio\n\t\t * group. Disabled options are passed over and the ends wrap around.\n\t\t *\n\t\t * @param {KeyboardEvent} event The key press.\n\t\t * @return {void}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-segmented-control\n\t\t */\n\t\tonKeydown(event) {\n\t\t\tconst enabled = this.normalizedOptions\n\t\t\t\t.map((option, index) => ({ option, index }))\n\t\t\t\t.filter((entry) => !entry.option.disabled)\n\t\t\tif (enabled.length === 0) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst buttons = Array.from(this.$el.querySelectorAll('[role=\"radio\"]'))\n\t\t\tconst focused = buttons.indexOf(document.activeElement)\n\t\t\tconst from = focused !== -1 ? focused : this.focusableIndex\n\t\t\tlet position = enabled.findIndex((entry) => entry.index === from)\n\t\t\tif (position === -1) {\n\t\t\t\tposition = 0\n\t\t\t}\n\t\t\tif (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n\t\t\t\tposition = (position + 1) % enabled.length\n\t\t\t} else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n\t\t\t\tposition = (position - 1 + enabled.length) % enabled.length\n\t\t\t} else if (event.key === 'Home') {\n\t\t\t\tposition = 0\n\t\t\t} else if (event.key === 'End') {\n\t\t\t\tposition = enabled.length - 1\n\t\t\t} else {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tevent.preventDefault()\n\t\t\tconst target = enabled[position]\n\t\t\tthis.select(target.option)\n\t\t\tif (buttons[target.index] && typeof buttons[target.index].focus === 'function') {\n\t\t\t\tbuttons[target.index].focus()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-segmented-control {\n\tdisplay: inline-flex;\n\tgap: 4px;\n\tmax-width: 100%;\n\tpadding: 4px;\n\tborder-radius: var(--border-radius-container, var(--border-radius-large, 10px));\n\tbackground-color: var(--color-background-dark);\n\toverflow-x: auto;\n}\n\n.cn-segmented-control--stretch {\n\tdisplay: flex;\n}\n\n.cn-segmented-control--stretch .cn-segmented-control__option {\n\tflex: 1 1 0;\n}\n\n/* The parent class outscores Nextcloud's server rule that gives every plain\n   `button` a margin and a border. */\n.cn-segmented-control .cn-segmented-control__option {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 8px;\n\tbox-sizing: border-box;\n\tmin-height: 36px;\n\tmargin: 0;\n\tpadding: 0 16px;\n\tborder: 1px solid transparent;\n\tborder-radius: var(--border-radius-element, var(--border-radius-large, 8px));\n\tbackground-color: transparent;\n\t/* Full-contrast label on every option: the choice is carried by the\n\t   raised surface, not by dimming the others. */\n\tcolor: var(--color-main-text);\n\tfont: inherit;\n\tfont-weight: 600;\n\twhite-space: nowrap;\n\tcursor: pointer;\n}\n\n.cn-segmented-control .cn-segmented-control__option:hover {\n\tbackground-color: var(--color-background-hover);\n}\n\n.cn-segmented-control .cn-segmented-control__option:focus-visible {\n\toutline: 2px solid var(--color-primary-element);\n\toutline-offset: 2px;\n}\n\n/* The border survives forced-colours mode, which drops background and shadow. */\n.cn-segmented-control .cn-segmented-control__option--checked,\n.cn-segmented-control .cn-segmented-control__option--checked:hover {\n\tborder-color: var(--color-border-dark);\n\tbackground-color: var(--color-main-background);\n\tbox-shadow: 0 1px 2px var(--color-box-shadow);\n}\n\n.cn-segmented-control .cn-segmented-control__option[disabled] {\n\tcursor: default;\n\topacity: 0.5;\n}\n\n.cn-segmented-control__count {\n\tfont-weight: 400;\n}\n</style>\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,46 @@
+import { openBlock, createElementBlock, normalizeClass, Fragment, renderList, renderSlot, createElementVNode, toDisplayString, createCommentVNode } from 'vue';
+
+const _hoisted_1 = ["aria-label", "aria-labelledby"];
+const _hoisted_2 = ["aria-checked", "tabindex", "disabled", "data-value", "onClick"];
+const _hoisted_3 = { class: "cn-segmented-control__label" };
+const _hoisted_4 = {
+  key: 0,
+  class: "cn-segmented-control__count"
+};
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(["cn-segmented-control", { 'cn-segmented-control--stretch': $props.stretch }]),
+    role: "radiogroup",
+    "aria-label": $props.ariaLabel || null,
+    "aria-labelledby": $props.ariaLabelledby || null,
+    onKeydown: _cache[0] || (_cache[0] = (...args) => ($options.onKeydown && $options.onKeydown(...args)))
+  }, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList($options.normalizedOptions, (option, index) => {
+      return (openBlock(), createElementBlock("button", {
+        key: option.key,
+        type: "button",
+        role: "radio",
+        class: normalizeClass(["cn-segmented-control__option", { 'cn-segmented-control__option--checked': $options.isChecked(option) }]),
+        "aria-checked": $options.isChecked(option) ? 'true' : 'false',
+        tabindex: index === $options.focusableIndex ? 0 : -1,
+        disabled: option.disabled || null,
+        "data-value": option.key,
+        onClick: $event => ($options.select(option))
+      }, [
+        renderSlot(_ctx.$slots, "option", {
+          option: option,
+          checked: $options.isChecked(option)
+        }, () => [
+          createElementVNode("span", _hoisted_3, toDisplayString(option.label), 1 /* TEXT */),
+          (option.count !== null)
+            ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(' ' + option.count), 1 /* TEXT */))
+            : createCommentVNode("v-if", true)
+        ])
+      ], 10 /* CLASS, PROPS */, _hoisted_2))
+    }), 128 /* KEYED_FRAGMENT */))
+  ], 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_1))
+}
+
+export { render };
+//# sourceMappingURL=CnSegmentedControl.vue3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CnSegmentedControl.vue3.js","sources":["../../../../src/components/CnSegmentedControl/CnSegmentedControl.vue?vue&type=template&id=7b344b4f&lang.js"],"sourcesContent":["<!--\n  SPDX-FileCopyrightText: 2026 Conduction B.V.\n  SPDX-License-Identifier: EUPL-1.2\n-->\n<template>\n\t<div\n\t\tclass=\"cn-segmented-control\"\n\t\t:class=\"{ 'cn-segmented-control--stretch': stretch }\"\n\t\trole=\"radiogroup\"\n\t\t:aria-label=\"ariaLabel || null\"\n\t\t:aria-labelledby=\"ariaLabelledby || null\"\n\t\t@keydown=\"onKeydown\">\n\t\t<button\n\t\t\tv-for=\"(option, index) in normalizedOptions\"\n\t\t\t:key=\"option.key\"\n\t\t\ttype=\"button\"\n\t\t\trole=\"radio\"\n\t\t\tclass=\"cn-segmented-control__option\"\n\t\t\t:class=\"{ 'cn-segmented-control__option--checked': isChecked(option) }\"\n\t\t\t:aria-checked=\"isChecked(option) ? 'true' : 'false'\"\n\t\t\t:tabindex=\"index === focusableIndex ? 0 : -1\"\n\t\t\t:disabled=\"option.disabled || null\"\n\t\t\t:data-value=\"option.key\"\n\t\t\t@click=\"select(option)\">\n\t\t\t<!-- @slot option Replaces the content of one option. -->\n\t\t\t<!-- @binding {object} option The option: `{ value, label, disabled, count }`. -->\n\t\t\t<!-- @binding {boolean} checked Whether this option is the chosen one. -->\n\t\t\t<slot name=\"option\" :option=\"option\" :checked=\"isChecked(option)\">\n\t\t\t\t<span class=\"cn-segmented-control__label\">{{ option.label }}</span>\n\t\t\t\t<!-- The leading space is not drawn in this flex row; it keeps a\n\t\t\t\t     screen reader from reading label and count as one word. -->\n\t\t\t\t<span v-if=\"option.count !== null\" class=\"cn-segmented-control__count\">{{ ' ' + option.count }}</span>\n\t\t\t</slot>\n\t\t</button>\n\t</div>\n</template>\n\n<script>\n/**\n * CnSegmentedControl is a switch between a few views of the same thing, such\n * as \"My work / My team\". One option is always the chosen one.\n *\n * It is a radio group: screen readers announce the group and which option is\n * checked, the arrow keys move the choice, and Tab enters and leaves the group\n * in one step. Give it a name with `aria-label` (or `aria-labelledby`).\n *\n * ```vue\n * <CnSegmentedControl\n *   v-model=\"view\"\n *   aria-label=\"View\"\n *   :options=\"[\n *     { value: 'mine', label: 'My work' },\n *     { value: 'team', label: 'My team' },\n *   ]\" />\n * ```\n *\n * To switch between panels of content, use `CnTabs` with `variant=\"segmented\"`\n * instead: that keeps the tab and panel semantics and looks the same.\n */\nexport default {\n\tname: 'CnSegmentedControl',\n\n\tprops: {\n\t\t/**\n\t\t * The options. Each is `{ value, label, disabled?, count? }`, or a\n\t\t * plain string that is both the value and the label. `count` shows a\n\t\t * number after the label.\n\t\t *\n\t\t * @type {Array<string|{value: (string|number|boolean), label: string, disabled?: boolean, count?: number}>}\n\t\t */\n\t\toptions: {\n\t\t\ttype: Array,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The value of the chosen option (v-model).\n\t\t *\n\t\t * @type {string|number|boolean|null}\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [Boolean, String, Number],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** Accessible name of the group, read out when focus enters it. */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Id of an element that names the group, as an alternative to `ariaLabel`. */\n\t\tariaLabelledby: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Stretch the control to the full width, with options of equal width. */\n\t\tstretch: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t/**\n\t\t * Emitted with the value of the newly chosen option.\n\t\t *\n\t\t * @event update:modelValue\n\t\t * @type {string|number|boolean}\n\t\t */\n\t\t'update:modelValue',\n\t],\n\n\tcomputed: {\n\t\t/**\n\t\t * The options in one shape.\n\t\t *\n\t\t * @return {Array<{key: string, value: (string|number|boolean), label: string, disabled: boolean, count: (number|null)}>}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-segmented-control\n\t\t */\n\t\tnormalizedOptions() {\n\t\t\treturn (Array.isArray(this.options) ? this.options : [])\n\t\t\t\t.filter((option) => option !== null && option !== undefined)\n\t\t\t\t.map((option) => {\n\t\t\t\t\tif (typeof option !== 'object') {\n\t\t\t\t\t\treturn { key: String(option), value: option, label: String(option), disabled: false, count: null }\n\t\t\t\t\t}\n\t\t\t\t\treturn {\n\t\t\t\t\t\tkey: String(option.value),\n\t\t\t\t\t\tvalue: option.value,\n\t\t\t\t\t\tlabel: String(option.label ?? option.value),\n\t\t\t\t\t\tdisabled: option.disabled === true,\n\t\t\t\t\t\tcount: Number.isFinite(option.count) ? option.count : null,\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * The option Tab lands on: the chosen one, else the first enabled one.\n\t\t *\n\t\t * @return {number} Its index, or -1 when no option can take focus.\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-segmented-control\n\t\t */\n\t\tfocusableIndex() {\n\t\t\tconst checked = this.normalizedOptions.findIndex((option) => this.isChecked(option) && !option.disabled)\n\t\t\tif (checked !== -1) {\n\t\t\t\treturn checked\n\t\t\t}\n\t\t\treturn this.normalizedOptions.findIndex((option) => !option.disabled)\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Whether an option is the chosen one.\n\t\t *\n\t\t * @param {{value: (string|number|boolean)}} option The option.\n\t\t * @return {boolean}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-segmented-control\n\t\t */\n\t\tisChecked(option) {\n\t\t\treturn this.modelValue !== null && String(option.value) === String(this.modelValue)\n\t\t},\n\n\t\t/**\n\t\t * Choose an option.\n\t\t *\n\t\t * @param {{value: (string|number|boolean), disabled: boolean}} option The option.\n\t\t * @return {void}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-segmented-control\n\t\t */\n\t\tselect(option) {\n\t\t\tif (option.disabled || this.isChecked(option)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.$emit('update:modelValue', option.value)\n\t\t},\n\n\t\t/**\n\t\t * Arrow keys, Home and End move the choice, as in a native radio\n\t\t * group. Disabled options are passed over and the ends wrap around.\n\t\t *\n\t\t * @param {KeyboardEvent} event The key press.\n\t\t * @return {void}\n\t\t * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-segmented-control\n\t\t */\n\t\tonKeydown(event) {\n\t\t\tconst enabled = this.normalizedOptions\n\t\t\t\t.map((option, index) => ({ option, index }))\n\t\t\t\t.filter((entry) => !entry.option.disabled)\n\t\t\tif (enabled.length === 0) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst buttons = Array.from(this.$el.querySelectorAll('[role=\"radio\"]'))\n\t\t\tconst focused = buttons.indexOf(document.activeElement)\n\t\t\tconst from = focused !== -1 ? focused : this.focusableIndex\n\t\t\tlet position = enabled.findIndex((entry) => entry.index === from)\n\t\t\tif (position === -1) {\n\t\t\t\tposition = 0\n\t\t\t}\n\t\t\tif (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n\t\t\t\tposition = (position + 1) % enabled.length\n\t\t\t} else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n\t\t\t\tposition = (position - 1 + enabled.length) % enabled.length\n\t\t\t} else if (event.key === 'Home') {\n\t\t\t\tposition = 0\n\t\t\t} else if (event.key === 'End') {\n\t\t\t\tposition = enabled.length - 1\n\t\t\t} else {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tevent.preventDefault()\n\t\t\tconst target = enabled[position]\n\t\t\tthis.select(target.option)\n\t\t\tif (buttons[target.index] && typeof buttons[target.index].focus === 'function') {\n\t\t\t\tbuttons[target.index].focus()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-segmented-control {\n\tdisplay: inline-flex;\n\tgap: 4px;\n\tmax-width: 100%;\n\tpadding: 4px;\n\tborder-radius: var(--border-radius-container, var(--border-radius-large, 10px));\n\tbackground-color: var(--color-background-dark);\n\toverflow-x: auto;\n}\n\n.cn-segmented-control--stretch {\n\tdisplay: flex;\n}\n\n.cn-segmented-control--stretch .cn-segmented-control__option {\n\tflex: 1 1 0;\n}\n\n/* The parent class outscores Nextcloud's server rule that gives every plain\n   `button` a margin and a border. */\n.cn-segmented-control .cn-segmented-control__option {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 8px;\n\tbox-sizing: border-box;\n\tmin-height: 36px;\n\tmargin: 0;\n\tpadding: 0 16px;\n\tborder: 1px solid transparent;\n\tborder-radius: var(--border-radius-element, var(--border-radius-large, 8px));\n\tbackground-color: transparent;\n\t/* Full-contrast label on every option: the choice is carried by the\n\t   raised surface, not by dimming the others. */\n\tcolor: var(--color-main-text);\n\tfont: inherit;\n\tfont-weight: 600;\n\twhite-space: nowrap;\n\tcursor: pointer;\n}\n\n.cn-segmented-control .cn-segmented-control__option:hover {\n\tbackground-color: var(--color-background-hover);\n}\n\n.cn-segmented-control .cn-segmented-control__option:focus-visible {\n\toutline: 2px solid var(--color-primary-element);\n\toutline-offset: 2px;\n}\n\n/* The border survives forced-colours mode, which drops background and shadow. */\n.cn-segmented-control .cn-segmented-control__option--checked,\n.cn-segmented-control .cn-segmented-control__option--checked:hover {\n\tborder-color: var(--color-border-dark);\n\tbackground-color: var(--color-main-background);\n\tbox-shadow: 0 1px 2px var(--color-box-shadow);\n}\n\n.cn-segmented-control .cn-segmented-control__option[disabled] {\n\tcursor: default;\n\topacity: 0.5;\n}\n\n.cn-segmented-control__count {\n\tfont-weight: 400;\n}\n</style>\n"],"names":["_normalizeClass","_renderList","_renderSlot","_createElementVNode","_toDisplayString"],"mappings":";;;;AAgCS,MAAA,UAAA,GAAA,EAAA,KAAA,EAAA,6BAAA,GAAA;;;;;;;;IAtBP,KAAK,EAAAA,cAAA,CAAA,CAAC,sBAAsB,EAAA,EAAA,+BAAA,EACR,MAAA,CAAA,OAAA,EAAA,CAAA,CAAA;AACpB,IAAA,IAAI,EAAC,YAAC;AACL,IAAA,YAAU,EAAE,MAAS,CAAA,SAAA,IAAA,IAAA;AACrB,IAAA,iBAAe,EAAC,MAAA,CAAA,cAAA,IAAA,IAAA;AAChB,IAAA,SAAO,0CAAE,QAAG,CAAA,SAAA,IAAA,QAAA,CAAA,SAAA,CAAA,GAAA,IAAA,CAAA,CAAA,CAAA;;iDAEc,EAAA,IAAA,EAAAC,UAAA,CAAA,QAAA,CAAA,iBAAS,EAA3B,CAAA,MAAM,EAAE,KAAK,KAAA;;QACpB,GAAG,EAAE,MAAM,CAAC,GAAG;AAChB,QAAA,IAAI,EAAC,QAAQ;AACb,QAAA,IAAI,EAAC,OAAO;AACZ,QAAA,KAAK,EAACD,cAAA,CAAA,CAAA,8BAA4B,EACX,EAAA,uCAAA,EAAA,QAAA,CAAA,SAAA,CAAA,MAAA,CAAA,EAAA,CAAA,CAAA;QACtB,cAAY,EAAE,QAAQ,CAAA,SAAA,CAAA,MAAA,CAAA,GAAA,MAAA,GAAA,OAAA;QACtB,QAAQ,EAAE,KAAK,KAAK,QAAc,CAAA,cAAA,GAAA,CAAA,GAAA,CAAA,CAAA;QAClC,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAAA,IAAA;QACzB,YAAU,EAAG,MAAK,CAAC,GAAE;QACrB,OAAK,EAAA,MAAA,KAAE,QAAM,CAAA,MAAA,CAAC,MAAM,CAAA,CAAA;;QAIpBE;AAAoB,UAAA,MAAM,QAAO;UAAI,OAAO,EAAE,QAAS,CAAA,SAAA,CAAC,MAAM,CAAA;WAA9D;AACA,UAAAC,kBAAA,CAAK,MAAL,EAAA,UAAK,EAAAC,eAAA,CAAA,MAAA,CAAA,KAAA,CAAA,EAAA,CAAA,YAAA;;;;;;;;;;;;"}

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

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

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

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

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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"}