@conduction/nextcloud-vue 2.79.0 → 2.81.0

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

@@ -0,0 +1,159 @@
+import { NcCheckboxRadioSwitch, NcNoteCard } from '@nextcloud/vue';
+import { objectUrlOf, patchObject } from '../../utils/objectWrite.js';
+import { readPath } from '../../utils/readPath.js';
+import { serverErrorMessage } from '../../utils/serverErrorMessage.js';
+
+/**
+ * CnSwitchRowsWidget — the `switch-rows` widget: a card of switches, each with
+ * a label and a hint, bound to boolean fields of the CURRENT object. A toggle
+ * saves at once with ONE PATCH of that field; a refused PATCH puts the switch
+ * back and shows the server's words.
+ *
+ * @spec openspec/changes/abstract-switch-rows/specs/switch-rows/spec.md
+ */
+var script = {
+	name: 'CnSwitchRowsWidget',
+
+	components: { NcCheckboxRadioSwitch, NcNoteCard },
+
+	inject: {
+		cnTranslate: { default: () => (key) => key },
+	},
+
+	props: {
+		/**
+		 * The widget configuration.
+		 *
+		 * - `rows` (required) — `[{ key, label, hint?, invert? }]`; `key` is a top-level boolean field. `invert` shows the switch on when the field is false (a stored `disabled` read as "enabled").
+		 * - `readOnly`.
+		 *
+		 * @type {object}
+		 */
+		content: {
+			type: Object,
+			default: () => ({}),
+		},
+
+		/** The current detail-page object. */
+		objectData: {
+			type: Object,
+			default: null,
+		},
+
+		/** The current object id. */
+		objectId: {
+			type: [String, Number],
+			default: '',
+		},
+
+		/** OpenRegister register slug of the surface. */
+		register: {
+			type: [String, Object],
+			default: '',
+		},
+
+		/** OpenRegister schema slug of the surface. */
+		schema: {
+			type: [String, Object],
+			default: '',
+		},
+	},
+
+	emits: ['saved'],
+
+	data() {
+		return {
+			/** The switch states as last saved (by key, as the switch shows them). */
+			saved: {},
+			values: {},
+			busy: '',
+			notice: '',
+		}
+	},
+
+	computed: {
+		rows() {
+			const list = Array.isArray(this.content.rows) ? this.content.rows : [];
+			return list
+				.filter((row) => row && row.key)
+				.map((row) => ({ ...row, label: this.tr(row.label || row.key), hint: this.tr(row.hint || '') }))
+		},
+
+		readOnly() {
+			return this.content.readOnly === true
+		},
+
+		objectUrl() {
+			return objectUrlOf(this.register, this.schema, this.objectId || (this.objectData && this.objectData.id))
+		},
+	},
+
+	watch: {
+		objectData() {
+			this.adopt();
+		},
+	},
+
+	created() {
+		this.adopt();
+	},
+
+	methods: {
+		tr(text) {
+			if (typeof text !== 'string' || text === '') {
+				return ''
+			}
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
+		},
+
+		/** Read every switch off the object. */
+		adopt() {
+			const values = {};
+			for (const row of this.rows) {
+				const stored = readPath(this.objectData || {}, row.key) === true;
+				values[row.key] = row.invert ? !stored : stored;
+			}
+			this.saved = values;
+			this.values = { ...values };
+		},
+
+		/**
+		 * Flip one switch and save that one field.
+		 *
+		 * @param {object} row The row.
+		 * @param {boolean} on The new switch state.
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/abstract-switch-rows/specs/switch-rows/spec.md#requirement-a-toggle-saves-that-one-field
+		 */
+		async toggle(row, on) {
+			if (!this.objectUrl) {
+				this.notice = this.tr('This switch cannot be saved here.');
+				return
+			}
+			this.notice = '';
+			this.busy = row.key;
+			this.values = { ...this.values, [row.key]: on };
+			const stored = row.invert ? !on : on;
+			try {
+				const data = await patchObject(this.objectUrl, { [row.key]: stored });
+				const written = data[row.key] !== undefined ? data[row.key] === true : stored;
+				const shown = row.invert ? !written : written;
+				this.saved = { ...this.saved, [row.key]: shown };
+				this.values = { ...this.values, [row.key]: shown };
+				/**
+				 * @event saved A switch was written.
+				 * @type {{field: string, value: boolean}}
+				 */
+				this.$emit('saved', { field: row.key, value: written });
+			} catch (e) {
+				this.values = { ...this.values, [row.key]: this.saved[row.key] };
+				this.notice = serverErrorMessage(e);
+			} finally {
+				this.busy = '';
+			}
+		},
+	},
+};
+
+export { script as default };
+//# sourceMappingURL=CnSwitchRowsWidget.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CnSwitchRowsWidget.vue2.js","sources":["../../../../src/components/CnSwitchRowsWidget/CnSwitchRowsWidget.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<div class=\"cn-switch-rows\" data-testid=\"cn-switch-rows\">\n\t\t<ul class=\"cn-switch-rows__list\">\n\t\t\t<li\n\t\t\t\tv-for=\"row in rows\"\n\t\t\t\t:key=\"row.key\"\n\t\t\t\tclass=\"cn-switch-rows__row\"\n\t\t\t\t:data-testid=\"`cn-switch-rows-row-${row.key}`\">\n\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t:modelValue=\"values[row.key] === true\"\n\t\t\t\t\ttype=\"switch\"\n\t\t\t\t\t:disabled=\"readOnly || busy === row.key\"\n\t\t\t\t\t@update:modelValue=\"toggle(row, $event)\">\n\t\t\t\t\t<span class=\"cn-switch-rows__label\">{{ row.label }}</span>\n\t\t\t\t\t<span v-if=\"row.hint\" class=\"cn-switch-rows__hint\">{{ row.hint }}</span>\n\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t</li>\n\t\t</ul>\n\t\t<NcNoteCard v-if=\"notice\" type=\"error\" data-testid=\"cn-switch-rows-notice\">\n\t\t\t{{ notice }}\n\t\t</NcNoteCard>\n\t</div>\n</template>\n\n<script>\nimport { NcCheckboxRadioSwitch, NcNoteCard } from '@nextcloud/vue'\nimport { objectUrlOf, patchObject } from '../../utils/objectWrite.js'\nimport { readPath } from '../../utils/readPath.js'\nimport { serverErrorMessage } from '../../utils/serverErrorMessage.js'\n\n/**\n * CnSwitchRowsWidget — the `switch-rows` widget: a card of switches, each with\n * a label and a hint, bound to boolean fields of the CURRENT object. A toggle\n * saves at once with ONE PATCH of that field; a refused PATCH puts the switch\n * back and shows the server's words.\n *\n * @spec openspec/changes/abstract-switch-rows/specs/switch-rows/spec.md\n */\nexport default {\n\tname: 'CnSwitchRowsWidget',\n\n\tcomponents: { NcCheckboxRadioSwitch, NcNoteCard },\n\n\tinject: {\n\t\tcnTranslate: { default: () => (key) => key },\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The widget configuration.\n\t\t *\n\t\t * - `rows` (required) — `[{ key, label, hint?, invert? }]`; `key` is a top-level boolean field. `invert` shows the switch on when the field is false (a stored `disabled` read as \"enabled\").\n\t\t * - `readOnly`.\n\t\t *\n\t\t * @type {object}\n\t\t */\n\t\tcontent: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\n\t\t/** The current detail-page object. */\n\t\tobjectData: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** The current object id. */\n\t\tobjectId: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** OpenRegister register slug of the surface. */\n\t\tregister: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** OpenRegister schema slug of the surface. */\n\t\tschema: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['saved'],\n\n\tdata() {\n\t\treturn {\n\t\t\t/** The switch states as last saved (by key, as the switch shows them). */\n\t\t\tsaved: {},\n\t\t\tvalues: {},\n\t\t\tbusy: '',\n\t\t\tnotice: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\trows() {\n\t\t\tconst list = Array.isArray(this.content.rows) ? this.content.rows : []\n\t\t\treturn list\n\t\t\t\t.filter((row) => row && row.key)\n\t\t\t\t.map((row) => ({ ...row, label: this.tr(row.label || row.key), hint: this.tr(row.hint || '') }))\n\t\t},\n\n\t\treadOnly() {\n\t\t\treturn this.content.readOnly === true\n\t\t},\n\n\t\tobjectUrl() {\n\t\t\treturn objectUrlOf(this.register, this.schema, this.objectId || (this.objectData && this.objectData.id))\n\t\t},\n\t},\n\n\twatch: {\n\t\tobjectData() {\n\t\t\tthis.adopt()\n\t\t},\n\t},\n\n\tcreated() {\n\t\tthis.adopt()\n\t},\n\n\tmethods: {\n\t\ttr(text) {\n\t\t\tif (typeof text !== 'string' || text === '') {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t\treturn typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text\n\t\t},\n\n\t\t/** Read every switch off the object. */\n\t\tadopt() {\n\t\t\tconst values = {}\n\t\t\tfor (const row of this.rows) {\n\t\t\t\tconst stored = readPath(this.objectData || {}, row.key) === true\n\t\t\t\tvalues[row.key] = row.invert ? !stored : stored\n\t\t\t}\n\t\t\tthis.saved = values\n\t\t\tthis.values = { ...values }\n\t\t},\n\n\t\t/**\n\t\t * Flip one switch and save that one field.\n\t\t *\n\t\t * @param {object} row The row.\n\t\t * @param {boolean} on The new switch state.\n\t\t * @return {Promise<void>}\n\t\t * @spec openspec/changes/abstract-switch-rows/specs/switch-rows/spec.md#requirement-a-toggle-saves-that-one-field\n\t\t */\n\t\tasync toggle(row, on) {\n\t\t\tif (!this.objectUrl) {\n\t\t\t\tthis.notice = this.tr('This switch cannot be saved here.')\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.notice = ''\n\t\t\tthis.busy = row.key\n\t\t\tthis.values = { ...this.values, [row.key]: on }\n\t\t\tconst stored = row.invert ? !on : on\n\t\t\ttry {\n\t\t\t\tconst data = await patchObject(this.objectUrl, { [row.key]: stored })\n\t\t\t\tconst written = data[row.key] !== undefined ? data[row.key] === true : stored\n\t\t\t\tconst shown = row.invert ? !written : written\n\t\t\t\tthis.saved = { ...this.saved, [row.key]: shown }\n\t\t\t\tthis.values = { ...this.values, [row.key]: shown }\n\t\t\t\t/**\n\t\t\t\t * @event saved A switch was written.\n\t\t\t\t * @type {{field: string, value: boolean}}\n\t\t\t\t */\n\t\t\t\tthis.$emit('saved', { field: row.key, value: written })\n\t\t\t} catch (e) {\n\t\t\t\tthis.values = { ...this.values, [row.key]: this.saved[row.key] }\n\t\t\t\tthis.notice = serverErrorMessage(e)\n\t\t\t} finally {\n\t\t\t\tthis.busy = ''\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-switch-rows {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tmin-width: 0;\n}\n\n.cn-switch-rows__list {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.cn-switch-rows__row {\n\tpadding: 10px 0;\n\tborder-top: 1px solid var(--cn-board-hairline, var(--color-border));\n}\n\n.cn-switch-rows__row:first-child {\n\tborder-top: none;\n\tpadding-top: 0;\n}\n\n.cn-switch-rows__label {\n\tdisplay: block;\n\tfont-weight: 600;\n}\n\n.cn-switch-rows__hint {\n\tdisplay: block;\n\tfont-size: 12px;\n\tfont-weight: 400;\n\tcolor: var(--color-text-maxcontrast);\n}\n</style>\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,60 @@
+import { resolveComponent, openBlock, createElementBlock, createElementVNode, Fragment, renderList, createVNode, withCtx, toDisplayString, createCommentVNode, createBlock, createTextVNode } from 'vue';
+
+const _hoisted_1 = {
+  class: "cn-switch-rows",
+  "data-testid": "cn-switch-rows"
+};
+const _hoisted_2 = { class: "cn-switch-rows__list" };
+const _hoisted_3 = ["data-testid"];
+const _hoisted_4 = { class: "cn-switch-rows__label" };
+const _hoisted_5 = {
+  key: 0,
+  class: "cn-switch-rows__hint"
+};
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcCheckboxRadioSwitch = resolveComponent("NcCheckboxRadioSwitch");
+  const _component_NcNoteCard = resolveComponent("NcNoteCard");
+
+  return (openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("ul", _hoisted_2, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList($options.rows, (row) => {
+        return (openBlock(), createElementBlock("li", {
+          key: row.key,
+          class: "cn-switch-rows__row",
+          "data-testid": `cn-switch-rows-row-${row.key}`
+        }, [
+          createVNode(_component_NcCheckboxRadioSwitch, {
+            modelValue: $data.values[row.key] === true,
+            type: "switch",
+            disabled: $options.readOnly || $data.busy === row.key,
+            "onUpdate:modelValue": $event => ($options.toggle(row, $event))
+          }, {
+            default: withCtx(() => [
+              createElementVNode("span", _hoisted_4, toDisplayString(row.label), 1 /* TEXT */),
+              (row.hint)
+                ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(row.hint), 1 /* TEXT */))
+                : createCommentVNode("v-if", true)
+            ]),
+            _: 2 /* DYNAMIC */
+          }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["modelValue", "disabled", "onUpdate:modelValue"])
+        ], 8 /* PROPS */, _hoisted_3))
+      }), 128 /* KEYED_FRAGMENT */))
+    ]),
+    ($data.notice)
+      ? (openBlock(), createBlock(_component_NcNoteCard, {
+          key: 0,
+          type: "error",
+          "data-testid": "cn-switch-rows-notice"
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString($data.notice), 1 /* TEXT */)
+          ]),
+          _: 1 /* STABLE */
+        }))
+      : createCommentVNode("v-if", true)
+  ]))
+}
+
+export { render };
+//# sourceMappingURL=CnSwitchRowsWidget.vue3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CnSwitchRowsWidget.vue3.js","sources":["../../../../src/components/CnSwitchRowsWidget/CnSwitchRowsWidget.vue?vue&type=template&id=9dd5b4e2&lang.js"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<div class=\"cn-switch-rows\" data-testid=\"cn-switch-rows\">\n\t\t<ul class=\"cn-switch-rows__list\">\n\t\t\t<li\n\t\t\t\tv-for=\"row in rows\"\n\t\t\t\t:key=\"row.key\"\n\t\t\t\tclass=\"cn-switch-rows__row\"\n\t\t\t\t:data-testid=\"`cn-switch-rows-row-${row.key}`\">\n\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t:modelValue=\"values[row.key] === true\"\n\t\t\t\t\ttype=\"switch\"\n\t\t\t\t\t:disabled=\"readOnly || busy === row.key\"\n\t\t\t\t\t@update:modelValue=\"toggle(row, $event)\">\n\t\t\t\t\t<span class=\"cn-switch-rows__label\">{{ row.label }}</span>\n\t\t\t\t\t<span v-if=\"row.hint\" class=\"cn-switch-rows__hint\">{{ row.hint }}</span>\n\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t</li>\n\t\t</ul>\n\t\t<NcNoteCard v-if=\"notice\" type=\"error\" data-testid=\"cn-switch-rows-notice\">\n\t\t\t{{ notice }}\n\t\t</NcNoteCard>\n\t</div>\n</template>\n\n<script>\nimport { NcCheckboxRadioSwitch, NcNoteCard } from '@nextcloud/vue'\nimport { objectUrlOf, patchObject } from '../../utils/objectWrite.js'\nimport { readPath } from '../../utils/readPath.js'\nimport { serverErrorMessage } from '../../utils/serverErrorMessage.js'\n\n/**\n * CnSwitchRowsWidget — the `switch-rows` widget: a card of switches, each with\n * a label and a hint, bound to boolean fields of the CURRENT object. A toggle\n * saves at once with ONE PATCH of that field; a refused PATCH puts the switch\n * back and shows the server's words.\n *\n * @spec openspec/changes/abstract-switch-rows/specs/switch-rows/spec.md\n */\nexport default {\n\tname: 'CnSwitchRowsWidget',\n\n\tcomponents: { NcCheckboxRadioSwitch, NcNoteCard },\n\n\tinject: {\n\t\tcnTranslate: { default: () => (key) => key },\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The widget configuration.\n\t\t *\n\t\t * - `rows` (required) — `[{ key, label, hint?, invert? }]`; `key` is a top-level boolean field. `invert` shows the switch on when the field is false (a stored `disabled` read as \"enabled\").\n\t\t * - `readOnly`.\n\t\t *\n\t\t * @type {object}\n\t\t */\n\t\tcontent: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\n\t\t/** The current detail-page object. */\n\t\tobjectData: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** The current object id. */\n\t\tobjectId: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** OpenRegister register slug of the surface. */\n\t\tregister: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** OpenRegister schema slug of the surface. */\n\t\tschema: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['saved'],\n\n\tdata() {\n\t\treturn {\n\t\t\t/** The switch states as last saved (by key, as the switch shows them). */\n\t\t\tsaved: {},\n\t\t\tvalues: {},\n\t\t\tbusy: '',\n\t\t\tnotice: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\trows() {\n\t\t\tconst list = Array.isArray(this.content.rows) ? this.content.rows : []\n\t\t\treturn list\n\t\t\t\t.filter((row) => row && row.key)\n\t\t\t\t.map((row) => ({ ...row, label: this.tr(row.label || row.key), hint: this.tr(row.hint || '') }))\n\t\t},\n\n\t\treadOnly() {\n\t\t\treturn this.content.readOnly === true\n\t\t},\n\n\t\tobjectUrl() {\n\t\t\treturn objectUrlOf(this.register, this.schema, this.objectId || (this.objectData && this.objectData.id))\n\t\t},\n\t},\n\n\twatch: {\n\t\tobjectData() {\n\t\t\tthis.adopt()\n\t\t},\n\t},\n\n\tcreated() {\n\t\tthis.adopt()\n\t},\n\n\tmethods: {\n\t\ttr(text) {\n\t\t\tif (typeof text !== 'string' || text === '') {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t\treturn typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text\n\t\t},\n\n\t\t/** Read every switch off the object. */\n\t\tadopt() {\n\t\t\tconst values = {}\n\t\t\tfor (const row of this.rows) {\n\t\t\t\tconst stored = readPath(this.objectData || {}, row.key) === true\n\t\t\t\tvalues[row.key] = row.invert ? !stored : stored\n\t\t\t}\n\t\t\tthis.saved = values\n\t\t\tthis.values = { ...values }\n\t\t},\n\n\t\t/**\n\t\t * Flip one switch and save that one field.\n\t\t *\n\t\t * @param {object} row The row.\n\t\t * @param {boolean} on The new switch state.\n\t\t * @return {Promise<void>}\n\t\t * @spec openspec/changes/abstract-switch-rows/specs/switch-rows/spec.md#requirement-a-toggle-saves-that-one-field\n\t\t */\n\t\tasync toggle(row, on) {\n\t\t\tif (!this.objectUrl) {\n\t\t\t\tthis.notice = this.tr('This switch cannot be saved here.')\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.notice = ''\n\t\t\tthis.busy = row.key\n\t\t\tthis.values = { ...this.values, [row.key]: on }\n\t\t\tconst stored = row.invert ? !on : on\n\t\t\ttry {\n\t\t\t\tconst data = await patchObject(this.objectUrl, { [row.key]: stored })\n\t\t\t\tconst written = data[row.key] !== undefined ? data[row.key] === true : stored\n\t\t\t\tconst shown = row.invert ? !written : written\n\t\t\t\tthis.saved = { ...this.saved, [row.key]: shown }\n\t\t\t\tthis.values = { ...this.values, [row.key]: shown }\n\t\t\t\t/**\n\t\t\t\t * @event saved A switch was written.\n\t\t\t\t * @type {{field: string, value: boolean}}\n\t\t\t\t */\n\t\t\t\tthis.$emit('saved', { field: row.key, value: written })\n\t\t\t} catch (e) {\n\t\t\t\tthis.values = { ...this.values, [row.key]: this.saved[row.key] }\n\t\t\t\tthis.notice = serverErrorMessage(e)\n\t\t\t} finally {\n\t\t\t\tthis.busy = ''\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-switch-rows {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tmin-width: 0;\n}\n\n.cn-switch-rows__list {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.cn-switch-rows__row {\n\tpadding: 10px 0;\n\tborder-top: 1px solid var(--cn-board-hairline, var(--color-border));\n}\n\n.cn-switch-rows__row:first-child {\n\tborder-top: none;\n\tpadding-top: 0;\n}\n\n.cn-switch-rows__label {\n\tdisplay: block;\n\tfont-weight: 600;\n}\n\n.cn-switch-rows__hint {\n\tdisplay: block;\n\tfont-size: 12px;\n\tfont-weight: 400;\n\tcolor: var(--color-text-maxcontrast);\n}\n</style>\n"],"names":["_createElementBlock","_Fragment","_renderList","_createElementVNode","_toDisplayString"],"mappings":";;;AAWM,EAAA,KAAK,EAAC,gBAAgB;AAAC,EAAA,aAAC,EAAA,gBAAA;;AACxB,MAAA,UAAA,GAAA,EAAA,KAAK,EAAC,sBAAsB,GAAA;;AAWvB,MAAA,UAAA,GAAA,EAAA,KAAK,EAAC,uBAAwB,GAAA;;;AAC3B,EAAA,KAAA,EAAA,sBAAA;;;;;;;;;wBAXVA,kBAaE,CAAAC,QAAA,EAAA,IAAA,EAAAC,UAAA,CAZY,QAAI,CAAA,IAAA,EAAA,CAAX,GAAG,KAAA;6BADVF,kBAaE,CAAA,IAAA,EAAA;UAXD,GAAG,EAAE,GAAG,CAAC,GAAG;AACZ,UAAA,KAAI,EAAC,qBAAqB;UAC1B,aAAW,EAAA,CAAA,mBAAA,EAAwB,GAAG,CAAC,GAAC,CAAA,CAAA;;qBAQ/B,CAAA,gCAAA,EAAA;AANR,YAAA,UAAU,EAAE,KAAA,CAAA,MAAM,CAAC,GAAG,CAAC,GAAG,CAAA,KAAA,IAAA;AAC3B,YAAA,IAAI,EAAC,QAAQ;AACZ,YAAA,QAAC,EAAA,QAAA,CAAA,QAAA,IAAA,UAAA,KAAA,GAAA,CAAA,GAAA;AACD,YAAA,qBAAA,EAAA,MAAA,KAAA,QAAA,CAAA,MAAA,CAAA,GAAA,EAAA,MAAA,CAAA,CAAA;;6BACD,MAA0D;AAA1D,cAAAG,kBAAA,CAA0D,MAA1D,EAAA,UAA0D,EAAnBC,eAAA,CAAA,GAAG,CAAC,KAAK,CAAA,EAAA,CAAA,YAAA;AACvC,cAAA,CAAA,GAAA,CAAA,IAAA;mDAAA,kBAAA,EAAAA,eAAA,CAAA,GAAA,CAAA,IAAA,CAAA,EAAA,CAAA,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,26 @@
+import __sfc_main from './CnSwitchRowsWidget.vue.js';
+import { registerDashboardWidget } from '../CnWidgetGrid/dashboardWidgetRegistry.js';
+
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * CnSwitchRowsWidget — self-registers the `switch-rows` widget type (a card of
+ * switches, each with a label and a hint, bound to boolean fields of the
+ * current object and saved on toggle) into the shared dashboardWidgetRegistry.
+ */
+
+
+registerDashboardWidget('switch-rows', {
+	renderer: __sfc_main,
+	form: null,
+	defaultContent: {
+		rows: [],
+	},
+	displayName: 'Switch rows',
+	icon: 'ToggleSwitch',
+	surfaces: ['detail-page'],
+});
+
+export { __sfc_main as CnSwitchRowsWidget, __sfc_main as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/CnSwitchRowsWidget/index.js"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2026 Conduction B.V.\n * SPDX-License-Identifier: EUPL-1.2\n *\n * CnSwitchRowsWidget — self-registers the `switch-rows` widget type (a card of\n * switches, each with a label and a hint, bound to boolean fields of the\n * current object and saved on toggle) into the shared dashboardWidgetRegistry.\n */\n\nimport CnSwitchRowsWidget from './CnSwitchRowsWidget.vue'\nimport { registerDashboardWidget } from '../CnWidgetGrid/dashboardWidgetRegistry.js'\n\nregisterDashboardWidget('switch-rows', {\n\trenderer: CnSwitchRowsWidget,\n\tform: null,\n\tdefaultContent: {\n\t\trows: [],\n\t},\n\tdisplayName: 'Switch rows',\n\ticon: 'ToggleSwitch',\n\tsurfaces: ['detail-page'],\n})\n\nexport { CnSwitchRowsWidget }\nexport default CnSwitchRowsWidget\n"],"names":["CnSwitchRowsWidget"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA,uBAAuB,CAAC,aAAa,EAAE;AACvC,CAAC,QAAQ,EAAEA,UAAkB;AAC7B,CAAC,IAAI,EAAE,IAAI;AACX,CAAC,cAAc,EAAE;AACjB,EAAE,IAAI,EAAE,EAAE;AACV,EAAE;AACF,CAAC,WAAW,EAAE,aAAa;AAC3B,CAAC,IAAI,EAAE,cAAc;AACrB,CAAC,QAAQ,EAAE,CAAC,aAAa,CAAC;AAC1B,CAAC;;;;"}

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

@@ -8,6 +8,7 @@ import __sfc_main$3 from '../CnTabs/CnTab.vue.js';
 import __sfc_main$4 from '../CnTabs/CnTabs.vue.js';
 import { normalizeLook } from '../../composables/useLook.js';
 import { resolveTabCount } from '../../utils/detailActionModel.js';
+import { fetchListTotal } from '../../utils/fetchFilterCounts.js';
 import { isActivityWidget } from '../../utils/headerMeta.js';
 import { PANEL_ACTION_SINK } from '../../utils/panelActions.js';
 import { isLocallyDecidableVisibleWhen, evaluateVisibleWhenLocal, evaluateVisibleWhen } from '../../utils/visibleWhen.js';
@@ -162,15 +163,24 @@ var script = {
 		 * `tabs[]` entries are `{ widgetId, label?, icon?, count?, countField?, overflow? }`.
 		 * `label` and `icon` fall back to the referenced widget's own title and
 		 * icon. `count` is a number shown after the label; `countField` reads
-		 * it off the record instead (a list counts its items). `overflow: true`
+		 * it off the record instead (a list counts its items). `countFrom`
+		 * counts a list on the server: `"widget"` counts the child widget's
+		 * own list (`content.register`, `schema`, `filter`, tokens such as
+		 * `@objectId` resolved), an object `{ register, schema, filter? }`
+		 * names the list; `count` and `countField` win over it. `overflow: true`
 		 * lists the tab under "More".
 		 *
+		 * A tab with `widgetIds` can lay them out in a grid instead of one under
+		 * the other: `columns: 4` gives each a quarter of the row, and
+		 * `layout: [{ widgetId, gridWidth }]` sets a width (of 12) per widget, as
+		 * the page grid does. Widgets wrap onto the next row.
+		 *
 		 * `maxVisibleTabs` caps the strip: later tabs go under "More".
 		 * `hideEmpty: true` moves a tab whose count is 0 there too.
 		 * `moreLabel` names that menu. `variant: "segmented"` draws the strip
 		 * as a pill switch (CnTabs' segmented variant); `line` is the default.
 		 *
-		 * @type {{ tabs?: Array<{widgetId: string, label?: string, icon?: string, count?: number, countField?: string, overflow?: boolean}>, ariaLabel?: string, maxVisibleTabs?: number, hideEmpty?: boolean, moreLabel?: string, variant?: ('line'|'segmented') }}
+		 * @type {{ tabs?: Array<{widgetId?: string, widgetIds?: string[], label?: string, icon?: string, count?: number, countField?: string, countFrom?: ('widget'|{register: string, schema: string, filter?: object}), overflow?: boolean, columns?: number, layout?: Array<{widgetId: string, gridWidth: number}>}>, ariaLabel?: string, maxVisibleTabs?: number, hideEmpty?: boolean, moreLabel?: string, variant?: ('line'|'segmented') }}
 		 */
 		content: {
 			type: Object,
@@ -290,6 +300,9 @@ var script = {
 			sourceVisibility: {},
 			// Bumped per evaluation round, so a slow answer from an earlier round is dropped.
 			visibilitySeq: 0,
+			// Totals counted for tabs with `countFrom`, by position in `content.tabs`.
+			widgetCounts: {},
+			countSeq: 0,
 			// Tab id named by the route hash that has not appeared yet (still pending).
 			hashTargetId: '',
 			// Items published by the panels, keyed by widget id. Keyed rather
@@ -332,7 +345,7 @@ var script = {
 			// whatever its place in the manifest. `index` stays the position in
 			// `content.tabs`, which the source-mode conditions are keyed on.
 			const isActivityTab = (tab) => {
-				const id = typeof tab === 'string' ? tab : tab?.widgetId;
+				const id = this.tabWidgetIds(tab)[0];
 				return isActivityWidget(this.availableWidgets.find((w) => w && w.id === id))
 			};
 			const ordered = authored.map((tab, index) => ({ tab, index }));
@@ -354,9 +367,19 @@ var script = {
 				if (visibility === 'hidden') {
 					return
 				}
-				const widgetId = typeof tab === 'string' ? tab : tab?.widgetId;
-				const widget = this.availableWidgets.find((w) => w && w.id === widgetId) || null;
-				const count = resolveTabCount(typeof tab === 'object' ? tab : null, this.objectData);
+				// A stack (`widgetIds`) resolves every id; one that names no
+				// widget is skipped. The first that resolves is the panel's.
+				const ids = this.tabWidgetIds(tab);
+				const widgets = ids.length > 1
+					? ids.map((id) => this.availableWidgets.find((w) => w && w.id === id) || null).filter(Boolean)
+					: [];
+				const widget = ids.length > 1
+					? (widgets[0] || null)
+					: (this.availableWidgets.find((w) => w && w.id === ids[0]) || null);
+				const widgetId = widget ? widget.id : ids[0];
+				const declared = resolveTabCount(typeof tab === 'object' ? tab : null, this.objectData);
+				const counted = this.widgetCounts[index];
+				const count = declared === null && typeof counted === 'number' ? counted : declared;
 				// The board strip has no "More": every tab is in the strip.
 				let overflow = !this.isBoard && ((tab && tab.overflow === true) || (hideEmpty && count === 0));
 				if (!overflow && !this.isBoard) {
@@ -373,6 +396,8 @@ var script = {
 					label: this.tabLabel(tab, widget, widgetId),
 					icon: (tab && tab.icon) || widget?.icon || '',
 					widget,
+					stack: widgets.slice(1),
+					grid: this.stackGrid(tab, widgets),
 					count,
 					overflow,
 					pending: visibility === 'pending',
@@ -391,6 +416,17 @@ var script = {
 			return translate('nextcloud-vue', 'Loading …')
 		},
 
+		/**
+		 * The lists the tabs count (`countFrom`), serialised, to count again
+		 * when they change.
+		 *
+		 * @return {string} The key.
+		 */
+		countSourcesKey() {
+			const tabs = Array.isArray(this.content?.tabs) ? this.content.tabs : [];
+			return JSON.stringify(tabs.map((tab) => this.countSourceOf(tab)))
+		},
+
 		/** @return {string} The source-mode conditions, serialised, to re-evaluate when they change. */
 		sourceConditionsKey() {
 			const tabs = Array.isArray(this.content?.tabs) ? this.content.tabs : [];
@@ -503,6 +539,12 @@ var script = {
 		objectId() {
 			this.sourceVisibility = {};
 			this.refreshSourceVisibility();
+			this.widgetCounts = {};
+			this.refreshWidgetCounts();
+		},
+
+		countSourcesKey() {
+			this.refreshWidgetCounts();
 		},
 
 		sourceConditionsKey() {
@@ -537,10 +579,14 @@ var script = {
 		}
 		this.activeKey = this.resolvedTabs[this.activeIndex]?.key || '';
 		this.refreshSourceVisibility();
+		this.refreshWidgetCounts();
 	},
 
 	mounted() {
-		this._onRefresh = () => this.refreshSourceVisibility();
+		this._onRefresh = () => {
+			this.refreshSourceVisibility();
+			this.refreshWidgetCounts();
+		};
 		subscribe('cn:page:refresh', this._onRefresh);
 		subscribe('cn:widget:refresh', this._onRefresh);
 	},
@@ -551,6 +597,67 @@ var script = {
 	},
 
 	methods: {
+		/**
+		 * The grid a stack lays its widgets out in, as one column span (of 12)
+		 * per widget in order, or null for the plain vertical stack. A tab says
+		 * `columns: 4` (every widget spans a quarter of the row) and/or
+		 * `layout: [{ widgetId, gridWidth }]`, the page grid's width key per
+		 * widget (of 12; a widget it does not name takes the `columns` share, or
+		 * the whole row). Widgets wrap onto the next row. Heights follow the
+		 * content.
+		 *
+		 * @param {object|string} tab The `content.tabs[]` entry.
+		 * @param {Array<object>} widgets The widgets of the stack, in order.
+		 * @return {number[]|null} The column span of each widget, or null.
+		 */
+		stackGrid(tab, widgets) {
+			if (!tab || typeof tab !== 'object' || widgets.length < 2) {
+				return null
+			}
+			const clamp = (value) => Math.min(12, Math.max(1, Math.floor(Number(value))));
+			const columns = Number(tab.columns);
+			const share = Number.isFinite(columns) && columns >= 1 ? clamp(12 / Math.min(12, Math.floor(columns))) : 12;
+			const placed = new Map((Array.isArray(tab.layout) ? tab.layout : [])
+				.filter((entry) => entry && typeof entry.widgetId === 'string' && Number.isFinite(Number(entry.gridWidth)))
+				.map((entry) => [entry.widgetId, clamp(entry.gridWidth)]));
+			if (placed.size === 0 && share === 12) {
+				return null
+			}
+			return widgets.map((widget) => placed.get(widget.id) ?? share)
+		},
+
+		/**
+		 * The inline column span of one widget of a gridded stack.
+		 *
+		 * @param {number[]|null} grid The spans of the stack, or null.
+		 * @param {number} index The widget's position in the stack.
+		 * @return {object|undefined} The style, or undefined without a grid.
+		 */
+		spanStyle(grid, index) {
+			return grid ? { gridColumn: `span ${grid[index] || 12}` } : undefined
+		},
+
+		/**
+		 * The widget ids a tab names: `widgetIds` (a stack) when it holds at
+		 * least one id, else `widgetId`, or the bare string.
+		 *
+		 * @param {object|string} tab The `content.tabs[]` entry.
+		 * @return {string[]} The ids, at least one entry (possibly undefined).
+		 * @spec openspec/changes/screens-relation-pages/specs/relation-pages/spec.md#requirement-a-tab-can-hold-a-stack-of-widgets
+		 */
+		tabWidgetIds(tab) {
+			if (typeof tab === 'string') {
+				return [tab]
+			}
+			if (tab && Array.isArray(tab.widgetIds)) {
+				const ids = tab.widgetIds.filter((id) => typeof id === 'string' && id !== '');
+				if (ids.length) {
+					return ids
+				}
+			}
+			return [tab?.widgetId]
+		},
+
 		/**
 		 * The label a tab shows: the authored `label`, else (board look) History
 		 * for the activity widget, else the child widget's title, else its id.
@@ -627,6 +734,60 @@ var script = {
 			}));
 		},
 
+		/**
+		 * The list a tab counts (`countFrom`): `"widget"` counts the child
+		 * widget's own list (its `content.register`, `content.schema` and
+		 * `content.filter`); an object `{ register, schema, filter? }` names
+		 * the list itself. Null for a tab that does not ask, or a child with
+		 * no list.
+		 *
+		 * @param {object|string} tab The `content.tabs[]` entry.
+		 * @return {{register: string, schema: string, filter: object}|null} The list.
+		 * @spec openspec/changes/screens-tab-counts-parity/specs/tab-counts/spec.md#requirement-a-tab-can-count-its-list
+		 */
+		countSourceOf(tab) {
+			const from = tab && typeof tab === 'object' ? tab.countFrom : null;
+			let source = null;
+			if (from === 'widget') {
+				// A stack counts its first widget that has a list.
+				const lists = this.tabWidgetIds(tab)
+					.map((id) => this.availableWidgets.find((w) => w && w.id === id))
+					.filter((w) => w && w.content && typeof w.content === 'object' && w.content.register && w.content.schema);
+				source = lists.length ? lists[0].content : null;
+			} else if (from && typeof from === 'object') {
+				source = from;
+			}
+			if (!source || typeof source.register !== 'string' || source.register === '' || typeof source.schema !== 'string' || source.schema === '') {
+				return null
+			}
+			const filter = source.filter && typeof source.filter === 'object' && !Array.isArray(source.filter) ? source.filter : {};
+			return { register: source.register, schema: source.schema, filter }
+		},
+
+		/**
+		 * Count the list behind every tab with `countFrom`: once on mount,
+		 * when the record changes and after a refresh. A tab keeps its last
+		 * total while the new one is on its way; a failed count shows none.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/screens-tab-counts-parity/specs/tab-counts/spec.md#requirement-a-tab-can-count-its-list
+		 */
+		async refreshWidgetCounts() {
+			const tabs = Array.isArray(this.content?.tabs) ? this.content.tabs : [];
+			const seq = ++this.countSeq;
+			const ctx = { objectId: this.objectId, object: this.objectData || undefined };
+			await Promise.all(tabs.map(async (tab, index) => {
+				const source = this.countSourceOf(tab);
+				if (!source) {
+					return
+				}
+				const total = await fetchListTotal(source.register, source.schema, source.filter, ctx).catch(() => null);
+				if (seq === this.countSeq) {
+					this.widgetCounts = { ...this.widgetCounts, [index]: total };
+				}
+			}));
+		},
+
 		/** @return {string} The route hash without its `#`, or ''. */
 		currentHash() {
 			const fromRoute = this.$route && typeof this.$route.hash === 'string' ? this.$route.hash : '';