@conduction/nextcloud-vue 2.79.0 → 2.81.0

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

@@ -0,0 +1,174 @@
+import { NcNoteCard } from '@nextcloud/vue';
+import { objectUrlOf, patchObject } from '../../utils/objectWrite.js';
+import { readPath } from '../../utils/readPath.js';
+import { serverErrorMessage } from '../../utils/serverErrorMessage.js';
+
+let uid = 0;
+
+/**
+ * CnRadioCardsWidget — the `radio-cards` widget: one choice out of a few cards,
+ * each with a title and a description, bound to an enum field of the CURRENT
+ * object. Choosing a card saves at once with ONE PATCH of that field; a refused
+ * PATCH puts the choice back and shows the server's words. Real radio inputs
+ * underneath, so the choice is perceivable without colour and works from the
+ * keyboard.
+ *
+ * @spec openspec/changes/abstract-radio-cards/specs/radio-cards/spec.md
+ */
+var script = {
+	name: 'CnRadioCardsWidget',
+
+	components: { NcNoteCard },
+
+	inject: {
+		cnTranslate: { default: () => (key) => key },
+	},
+
+	props: {
+		/**
+		 * The widget configuration.
+		 *
+		 * - `field` (required) — the top-level enum field.
+		 * - `options` (required) — `[{ value, label, description? }]`.
+		 * - `label` — a legend over the cards (visually shown).
+		 * - `columns` — 1, 2 or 3 (default 2).
+		 * - `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() {
+		uid += 1;
+		return {
+			groupName: `cn-radio-cards-${uid}`,
+			saved: '',
+			value: '',
+			busy: false,
+			notice: '',
+		}
+	},
+
+	computed: {
+		options() {
+			const list = Array.isArray(this.content.options) ? this.content.options : [];
+			return list
+				.filter((option) => option !== null && option !== undefined)
+				.map((option) => (typeof option === 'object'
+					? { value: option.value, label: this.tr(String(option.label ?? option.value)), description: this.tr(option.description || '') }
+					: { value: option, label: this.tr(String(option)), description: '' }))
+		},
+
+		label() {
+			return this.tr(this.content.label || '')
+		},
+
+		columns() {
+			return [1, 3].includes(this.content.columns) ? this.content.columns : 2
+		},
+
+		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 the choice off the object. */
+		adopt() {
+			const stored = readPath(this.objectData || {}, this.content.field);
+			this.saved = stored === undefined || stored === null ? '' : String(stored);
+			this.value = this.saved;
+		},
+
+		isSelected(option) {
+			return this.value === String(option.value)
+		},
+
+		/**
+		 * Choose a card and save that one field.
+		 *
+		 * @param {object} option The chosen option.
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/abstract-radio-cards/specs/radio-cards/spec.md#requirement-choosing-a-card-saves-that-one-field
+		 */
+		async choose(option) {
+			if (!this.objectUrl || !this.content.field) {
+				this.notice = this.tr('This choice cannot be saved here.');
+				return
+			}
+			this.notice = '';
+			this.busy = true;
+			this.value = String(option.value);
+			try {
+				const data = await patchObject(this.objectUrl, { [this.content.field]: option.value });
+				const written = readPath(data, this.content.field);
+				this.saved = String(written !== undefined && written !== null ? written : option.value);
+				this.value = this.saved;
+				/**
+				 * @event saved The choice was written.
+				 * @type {{field: string, value: unknown}}
+				 */
+				this.$emit('saved', { field: this.content.field, value: option.value });
+			} catch (e) {
+				this.value = this.saved;
+				this.notice = serverErrorMessage(e);
+			} finally {
+				this.busy = false;
+			}
+		},
+	},
+};
+
+export { script as default };
+//# sourceMappingURL=CnRadioCardsWidget.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CnRadioCardsWidget.vue2.js","sources":["../../../../src/components/CnRadioCardsWidget/CnRadioCardsWidget.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<fieldset class=\"cn-radio-cards\" data-testid=\"cn-radio-cards\" :aria-busy=\"busy ? 'true' : 'false'\">\n\t\t<legend v-if=\"label\" class=\"cn-radio-cards__legend\">\n\t\t\t{{ label }}\n\t\t</legend>\n\t\t<div class=\"cn-radio-cards__grid\" :class=\"`cn-radio-cards__grid--${columns}`\">\n\t\t\t<label\n\t\t\t\tv-for=\"option in options\"\n\t\t\t\t:key=\"String(option.value)\"\n\t\t\t\tclass=\"cn-radio-cards__card\"\n\t\t\t\t:class=\"{ 'cn-radio-cards__card--selected': isSelected(option) }\"\n\t\t\t\t:data-testid=\"`cn-radio-cards-option-${option.value}`\">\n\t\t\t\t<input\n\t\t\t\t\tclass=\"cn-radio-cards__input\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t:name=\"groupName\"\n\t\t\t\t\t:value=\"String(option.value)\"\n\t\t\t\t\t:checked=\"isSelected(option)\"\n\t\t\t\t\t:disabled=\"readOnly || busy\"\n\t\t\t\t\t@change=\"choose(option)\">\n\t\t\t\t<span class=\"cn-radio-cards__dot\" aria-hidden=\"true\" />\n\t\t\t\t<span class=\"cn-radio-cards__text\">\n\t\t\t\t\t<span class=\"cn-radio-cards__title\">{{ option.label }}</span>\n\t\t\t\t\t<span v-if=\"option.description\" class=\"cn-radio-cards__description\">{{ option.description }}</span>\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>\n\t\t<NcNoteCard v-if=\"notice\" type=\"error\" data-testid=\"cn-radio-cards-notice\">\n\t\t\t{{ notice }}\n\t\t</NcNoteCard>\n\t</fieldset>\n</template>\n\n<script>\nimport { NcNoteCard } from '@nextcloud/vue'\nimport { objectUrlOf, patchObject } from '../../utils/objectWrite.js'\nimport { readPath } from '../../utils/readPath.js'\nimport { serverErrorMessage } from '../../utils/serverErrorMessage.js'\n\nlet uid = 0\n\n/**\n * CnRadioCardsWidget — the `radio-cards` widget: one choice out of a few cards,\n * each with a title and a description, bound to an enum field of the CURRENT\n * object. Choosing a card saves at once with ONE PATCH of that field; a refused\n * PATCH puts the choice back and shows the server's words. Real radio inputs\n * underneath, so the choice is perceivable without colour and works from the\n * keyboard.\n *\n * @spec openspec/changes/abstract-radio-cards/specs/radio-cards/spec.md\n */\nexport default {\n\tname: 'CnRadioCardsWidget',\n\n\tcomponents: { 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 * - `field` (required) — the top-level enum field.\n\t\t * - `options` (required) — `[{ value, label, description? }]`.\n\t\t * - `label` — a legend over the cards (visually shown).\n\t\t * - `columns` — 1, 2 or 3 (default 2).\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\tuid += 1\n\t\treturn {\n\t\t\tgroupName: `cn-radio-cards-${uid}`,\n\t\t\tsaved: '',\n\t\t\tvalue: '',\n\t\t\tbusy: false,\n\t\t\tnotice: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\toptions() {\n\t\t\tconst list = Array.isArray(this.content.options) ? this.content.options : []\n\t\t\treturn list\n\t\t\t\t.filter((option) => option !== null && option !== undefined)\n\t\t\t\t.map((option) => (typeof option === 'object'\n\t\t\t\t\t? { value: option.value, label: this.tr(String(option.label ?? option.value)), description: this.tr(option.description || '') }\n\t\t\t\t\t: { value: option, label: this.tr(String(option)), description: '' }))\n\t\t},\n\n\t\tlabel() {\n\t\t\treturn this.tr(this.content.label || '')\n\t\t},\n\n\t\tcolumns() {\n\t\t\treturn [1, 3].includes(this.content.columns) ? this.content.columns : 2\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 the choice off the object. */\n\t\tadopt() {\n\t\t\tconst stored = readPath(this.objectData || {}, this.content.field)\n\t\t\tthis.saved = stored === undefined || stored === null ? '' : String(stored)\n\t\t\tthis.value = this.saved\n\t\t},\n\n\t\tisSelected(option) {\n\t\t\treturn this.value === String(option.value)\n\t\t},\n\n\t\t/**\n\t\t * Choose a card and save that one field.\n\t\t *\n\t\t * @param {object} option The chosen option.\n\t\t * @return {Promise<void>}\n\t\t * @spec openspec/changes/abstract-radio-cards/specs/radio-cards/spec.md#requirement-choosing-a-card-saves-that-one-field\n\t\t */\n\t\tasync choose(option) {\n\t\t\tif (!this.objectUrl || !this.content.field) {\n\t\t\t\tthis.notice = this.tr('This choice cannot be saved here.')\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.notice = ''\n\t\t\tthis.busy = true\n\t\t\tthis.value = String(option.value)\n\t\t\ttry {\n\t\t\t\tconst data = await patchObject(this.objectUrl, { [this.content.field]: option.value })\n\t\t\t\tconst written = readPath(data, this.content.field)\n\t\t\t\tthis.saved = String(written !== undefined && written !== null ? written : option.value)\n\t\t\t\tthis.value = this.saved\n\t\t\t\t/**\n\t\t\t\t * @event saved The choice was written.\n\t\t\t\t * @type {{field: string, value: unknown}}\n\t\t\t\t */\n\t\t\t\tthis.$emit('saved', { field: this.content.field, value: option.value })\n\t\t\t} catch (e) {\n\t\t\t\tthis.value = this.saved\n\t\t\t\tthis.notice = serverErrorMessage(e)\n\t\t\t} finally {\n\t\t\t\tthis.busy = false\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-radio-cards {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tmin-width: 0;\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n}\n\n.cn-radio-cards__legend {\n\tpadding: 0;\n\tmargin-bottom: 6px;\n\tfont-weight: 600;\n}\n\n.cn-radio-cards__grid {\n\tdisplay: grid;\n\tgap: 10px;\n\tgrid-template-columns: minmax(0, 1fr);\n}\n\n.cn-radio-cards__grid--2 {\n\tgrid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n.cn-radio-cards__grid--3 {\n\tgrid-template-columns: repeat(3, minmax(0, 1fr));\n}\n\n.cn-radio-cards__card {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 10px;\n\tpadding: 12px 14px;\n\tborder: 1px solid var(--color-border-maxcontrast);\n\tborder-radius: var(--cn-board-control-radius, 8px);\n\tbackground: var(--color-main-background);\n\tcursor: pointer;\n}\n\n.cn-radio-cards__card--selected {\n\tborder-color: var(--color-primary-element);\n\tbackground: var(--color-primary-element-light);\n\tbox-shadow: 0 0 0 1px var(--color-primary-element);\n}\n\n.cn-radio-cards__card:focus-within {\n\toutline: 2px solid var(--color-primary-element);\n\toutline-offset: 2px;\n}\n\n/* The real input stays in the DOM and in the accessibility tree; the dot is its picture. */\n.cn-radio-cards__input {\n\tposition: absolute;\n\topacity: 0;\n\tinset: 0;\n\tmargin: 0;\n\tcursor: pointer;\n}\n\n.cn-radio-cards__dot {\n\tflex: 0 0 auto;\n\twidth: 14px;\n\theight: 14px;\n\tmargin-top: 3px;\n\tbox-sizing: border-box;\n\tborder: 1px solid var(--color-border-maxcontrast);\n\tborder-radius: 50%;\n\tbackground: var(--color-main-background);\n}\n\n.cn-radio-cards__card--selected .cn-radio-cards__dot {\n\tborder: 4px solid var(--color-primary-element);\n}\n\n.cn-radio-cards__text {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n\tmin-width: 0;\n}\n\n.cn-radio-cards__title {\n\tfont-weight: 600;\n}\n\n.cn-radio-cards__description {\n\tfont-size: 12px;\n\tcolor: var(--color-text-maxcontrast);\n}\n\n@media (max-width: 640px) {\n\t.cn-radio-cards__grid--2,\n\t.cn-radio-cards__grid--3 {\n\t\tgrid-template-columns: minmax(0, 1fr);\n\t}\n}\n</style>\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,75 @@
+import { resolveComponent, openBlock, createElementBlock, toDisplayString, createCommentVNode, createElementVNode, normalizeClass, Fragment, renderList, createBlock, withCtx, createTextVNode } from 'vue';
+
+const _hoisted_1 = ["aria-busy"];
+const _hoisted_2 = {
+  key: 0,
+  class: "cn-radio-cards__legend"
+};
+const _hoisted_3 = ["data-testid"];
+const _hoisted_4 = ["name", "value", "checked", "disabled", "onChange"];
+const _hoisted_5 = { class: "cn-radio-cards__text" };
+const _hoisted_6 = { class: "cn-radio-cards__title" };
+const _hoisted_7 = {
+  key: 0,
+  class: "cn-radio-cards__description"
+};
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcNoteCard = resolveComponent("NcNoteCard");
+
+  return (openBlock(), createElementBlock("fieldset", {
+    class: "cn-radio-cards",
+    "data-testid": "cn-radio-cards",
+    "aria-busy": $data.busy ? 'true' : 'false'
+  }, [
+    ($options.label)
+      ? (openBlock(), createElementBlock("legend", _hoisted_2, toDisplayString($options.label), 1 /* TEXT */))
+      : createCommentVNode("v-if", true),
+    createElementVNode("div", {
+      class: normalizeClass(["cn-radio-cards__grid", `cn-radio-cards__grid--${$options.columns}`])
+    }, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList($options.options, (option) => {
+        return (openBlock(), createElementBlock("label", {
+          key: String(option.value),
+          class: normalizeClass(["cn-radio-cards__card", { 'cn-radio-cards__card--selected': $options.isSelected(option) }]),
+          "data-testid": `cn-radio-cards-option-${option.value}`
+        }, [
+          createElementVNode("input", {
+            class: "cn-radio-cards__input",
+            type: "radio",
+            name: $data.groupName,
+            value: String(option.value),
+            checked: $options.isSelected(option),
+            disabled: $options.readOnly || $data.busy,
+            onChange: $event => ($options.choose(option))
+          }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_4),
+          _cache[0] || (_cache[0] = createElementVNode("span", {
+            class: "cn-radio-cards__dot",
+            "aria-hidden": "true"
+          }, null, -1 /* CACHED */)),
+          createElementVNode("span", _hoisted_5, [
+            createElementVNode("span", _hoisted_6, toDisplayString(option.label), 1 /* TEXT */),
+            (option.description)
+              ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(option.description), 1 /* TEXT */))
+              : createCommentVNode("v-if", true)
+          ])
+        ], 10 /* CLASS, PROPS */, _hoisted_3))
+      }), 128 /* KEYED_FRAGMENT */))
+    ], 2 /* CLASS */),
+    ($data.notice)
+      ? (openBlock(), createBlock(_component_NcNoteCard, {
+          key: 1,
+          type: "error",
+          "data-testid": "cn-radio-cards-notice"
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString($data.notice), 1 /* TEXT */)
+          ]),
+          _: 1 /* STABLE */
+        }))
+      : createCommentVNode("v-if", true)
+  ], 8 /* PROPS */, _hoisted_1))
+}
+
+export { render };
+//# sourceMappingURL=CnRadioCardsWidget.vue3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CnRadioCardsWidget.vue3.js","sources":["../../../../src/components/CnRadioCardsWidget/CnRadioCardsWidget.vue?vue&type=template&id=8aefa4a2&lang.js"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<fieldset class=\"cn-radio-cards\" data-testid=\"cn-radio-cards\" :aria-busy=\"busy ? 'true' : 'false'\">\n\t\t<legend v-if=\"label\" class=\"cn-radio-cards__legend\">\n\t\t\t{{ label }}\n\t\t</legend>\n\t\t<div class=\"cn-radio-cards__grid\" :class=\"`cn-radio-cards__grid--${columns}`\">\n\t\t\t<label\n\t\t\t\tv-for=\"option in options\"\n\t\t\t\t:key=\"String(option.value)\"\n\t\t\t\tclass=\"cn-radio-cards__card\"\n\t\t\t\t:class=\"{ 'cn-radio-cards__card--selected': isSelected(option) }\"\n\t\t\t\t:data-testid=\"`cn-radio-cards-option-${option.value}`\">\n\t\t\t\t<input\n\t\t\t\t\tclass=\"cn-radio-cards__input\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t:name=\"groupName\"\n\t\t\t\t\t:value=\"String(option.value)\"\n\t\t\t\t\t:checked=\"isSelected(option)\"\n\t\t\t\t\t:disabled=\"readOnly || busy\"\n\t\t\t\t\t@change=\"choose(option)\">\n\t\t\t\t<span class=\"cn-radio-cards__dot\" aria-hidden=\"true\" />\n\t\t\t\t<span class=\"cn-radio-cards__text\">\n\t\t\t\t\t<span class=\"cn-radio-cards__title\">{{ option.label }}</span>\n\t\t\t\t\t<span v-if=\"option.description\" class=\"cn-radio-cards__description\">{{ option.description }}</span>\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>\n\t\t<NcNoteCard v-if=\"notice\" type=\"error\" data-testid=\"cn-radio-cards-notice\">\n\t\t\t{{ notice }}\n\t\t</NcNoteCard>\n\t</fieldset>\n</template>\n\n<script>\nimport { NcNoteCard } from '@nextcloud/vue'\nimport { objectUrlOf, patchObject } from '../../utils/objectWrite.js'\nimport { readPath } from '../../utils/readPath.js'\nimport { serverErrorMessage } from '../../utils/serverErrorMessage.js'\n\nlet uid = 0\n\n/**\n * CnRadioCardsWidget — the `radio-cards` widget: one choice out of a few cards,\n * each with a title and a description, bound to an enum field of the CURRENT\n * object. Choosing a card saves at once with ONE PATCH of that field; a refused\n * PATCH puts the choice back and shows the server's words. Real radio inputs\n * underneath, so the choice is perceivable without colour and works from the\n * keyboard.\n *\n * @spec openspec/changes/abstract-radio-cards/specs/radio-cards/spec.md\n */\nexport default {\n\tname: 'CnRadioCardsWidget',\n\n\tcomponents: { 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 * - `field` (required) — the top-level enum field.\n\t\t * - `options` (required) — `[{ value, label, description? }]`.\n\t\t * - `label` — a legend over the cards (visually shown).\n\t\t * - `columns` — 1, 2 or 3 (default 2).\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\tuid += 1\n\t\treturn {\n\t\t\tgroupName: `cn-radio-cards-${uid}`,\n\t\t\tsaved: '',\n\t\t\tvalue: '',\n\t\t\tbusy: false,\n\t\t\tnotice: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\toptions() {\n\t\t\tconst list = Array.isArray(this.content.options) ? this.content.options : []\n\t\t\treturn list\n\t\t\t\t.filter((option) => option !== null && option !== undefined)\n\t\t\t\t.map((option) => (typeof option === 'object'\n\t\t\t\t\t? { value: option.value, label: this.tr(String(option.label ?? option.value)), description: this.tr(option.description || '') }\n\t\t\t\t\t: { value: option, label: this.tr(String(option)), description: '' }))\n\t\t},\n\n\t\tlabel() {\n\t\t\treturn this.tr(this.content.label || '')\n\t\t},\n\n\t\tcolumns() {\n\t\t\treturn [1, 3].includes(this.content.columns) ? this.content.columns : 2\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 the choice off the object. */\n\t\tadopt() {\n\t\t\tconst stored = readPath(this.objectData || {}, this.content.field)\n\t\t\tthis.saved = stored === undefined || stored === null ? '' : String(stored)\n\t\t\tthis.value = this.saved\n\t\t},\n\n\t\tisSelected(option) {\n\t\t\treturn this.value === String(option.value)\n\t\t},\n\n\t\t/**\n\t\t * Choose a card and save that one field.\n\t\t *\n\t\t * @param {object} option The chosen option.\n\t\t * @return {Promise<void>}\n\t\t * @spec openspec/changes/abstract-radio-cards/specs/radio-cards/spec.md#requirement-choosing-a-card-saves-that-one-field\n\t\t */\n\t\tasync choose(option) {\n\t\t\tif (!this.objectUrl || !this.content.field) {\n\t\t\t\tthis.notice = this.tr('This choice cannot be saved here.')\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.notice = ''\n\t\t\tthis.busy = true\n\t\t\tthis.value = String(option.value)\n\t\t\ttry {\n\t\t\t\tconst data = await patchObject(this.objectUrl, { [this.content.field]: option.value })\n\t\t\t\tconst written = readPath(data, this.content.field)\n\t\t\t\tthis.saved = String(written !== undefined && written !== null ? written : option.value)\n\t\t\t\tthis.value = this.saved\n\t\t\t\t/**\n\t\t\t\t * @event saved The choice was written.\n\t\t\t\t * @type {{field: string, value: unknown}}\n\t\t\t\t */\n\t\t\t\tthis.$emit('saved', { field: this.content.field, value: option.value })\n\t\t\t} catch (e) {\n\t\t\t\tthis.value = this.saved\n\t\t\t\tthis.notice = serverErrorMessage(e)\n\t\t\t} finally {\n\t\t\t\tthis.busy = false\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-radio-cards {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tmin-width: 0;\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n}\n\n.cn-radio-cards__legend {\n\tpadding: 0;\n\tmargin-bottom: 6px;\n\tfont-weight: 600;\n}\n\n.cn-radio-cards__grid {\n\tdisplay: grid;\n\tgap: 10px;\n\tgrid-template-columns: minmax(0, 1fr);\n}\n\n.cn-radio-cards__grid--2 {\n\tgrid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n.cn-radio-cards__grid--3 {\n\tgrid-template-columns: repeat(3, minmax(0, 1fr));\n}\n\n.cn-radio-cards__card {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 10px;\n\tpadding: 12px 14px;\n\tborder: 1px solid var(--color-border-maxcontrast);\n\tborder-radius: var(--cn-board-control-radius, 8px);\n\tbackground: var(--color-main-background);\n\tcursor: pointer;\n}\n\n.cn-radio-cards__card--selected {\n\tborder-color: var(--color-primary-element);\n\tbackground: var(--color-primary-element-light);\n\tbox-shadow: 0 0 0 1px var(--color-primary-element);\n}\n\n.cn-radio-cards__card:focus-within {\n\toutline: 2px solid var(--color-primary-element);\n\toutline-offset: 2px;\n}\n\n/* The real input stays in the DOM and in the accessibility tree; the dot is its picture. */\n.cn-radio-cards__input {\n\tposition: absolute;\n\topacity: 0;\n\tinset: 0;\n\tmargin: 0;\n\tcursor: pointer;\n}\n\n.cn-radio-cards__dot {\n\tflex: 0 0 auto;\n\twidth: 14px;\n\theight: 14px;\n\tmargin-top: 3px;\n\tbox-sizing: border-box;\n\tborder: 1px solid var(--color-border-maxcontrast);\n\tborder-radius: 50%;\n\tbackground: var(--color-main-background);\n}\n\n.cn-radio-cards__card--selected .cn-radio-cards__dot {\n\tborder: 4px solid var(--color-primary-element);\n}\n\n.cn-radio-cards__text {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n\tmin-width: 0;\n}\n\n.cn-radio-cards__title {\n\tfont-weight: 600;\n}\n\n.cn-radio-cards__description {\n\tfont-size: 12px;\n\tcolor: var(--color-text-maxcontrast);\n}\n\n@media (max-width: 640px) {\n\t.cn-radio-cards__grid--2,\n\t.cn-radio-cards__grid--3 {\n\t\tgrid-template-columns: minmax(0, 1fr);\n\t}\n}\n</style>\n"],"names":["_toDisplayString","_normalizeClass","_Fragment","_renderList","_createElementVNode"],"mappings":";;;;;AAYuB,EAAA,KAAK,EAAA,wBAAA;;;;AAmBrB,MAAA,UAAA,GAAA,EAAA,KAAA,EAAA,sBAAA,GAAA;AACI,MAAA,UAAA,GAAA,EAAA,KAAK,EAAC,uBAAwB,GAAA;;;AAC3B,EAAA,KAAA,EAAA,6BAAA;;;;;;;AAtBN,IAAA,KAAA,EAAA,gBAAA;AAAA,IAAA,aAAA,EAAA,gBAAA;AAAA,IAAA,WAAA,EAAA,KAAA,CAAA,IAAA,GAAA,MAAA,GAAA,OAAA;;KACQ,QAAK,CAAA,KAAA;wCAEV,CAAA,QAAA,YAAA,EAAAA,eAAA,CADL,QAAK,CAAA,KAAA,CAAA,EAAA,CAAA,YAAA;;;MAEJ,KAAK,EAAAC,cAAA,CAAA,CAAE,sBAAqB,EAAA,CAAA,sBAAA,EAAiC,QAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA;;0CAoBzD,CAAAC,QAAA,EAAA,IAAA,EAAAC,UAAA,CAlBF,QAAA,CAAA,OAAA,EAAA,CAAA,MAAA,KAAA;+CAkBE,CAAA,OAAA,EAAA;AAjBN,UAAA,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAA;eACpB,EAACF,cAAA,CAAA,CAAA,sBAAM,EACK,EAAA,gCAAA,EAAA,QAAA,CAAA,UAAA,CAAA,MAAA,CAAA,EAAA,CAAA,CAAA;UAChB,aAAW,EAAA,CAAA,sBAAA,EAAiB,MAAA,CAAA,KAAA,CAAA,CAAA;;4BAQvB,CAAA,OAAA,EAAA;AANL,YAAA,KAAK,EAAC,uBAAqB;AAC3B,YAAA,IAAI,EAAC,OAAO;AACX,YAAA,IAAI,EAAE,KAAS,CAAA,SAAA;AACf,YAAA,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAA;YAC1B,OAAO,EAAE,QAAU,CAAA,UAAA,CAAC,MAAM,CAAA;YAC1B,QAAQ,EAAE,QAAQ,CAAA,QAAA,IAAI,KAAI,CAAA,IAAA;YAC1B,QAAI,EAAA,MAAA,KAAA,QAAA,CAAA,MAAA,CAAA,MAAA,CAAA,CAAA;;oCACNG,kBAAM,CAAA,MAAA,EAAA;AAAA,YAAA,KAAA,EAAA,qBAAA;AAAA,YAAA,aAAA,EAAA,MAAA;;AACN,UAAAA,kBAAA,CAGO,QAHP,UAGO,EAAA;AAFN,YAAAA,kBAAA,CAA6D,MAA7D,EAAA,UAA6D,EAAtBJ,eAAA,CAAA,MAAM,CAAC,KAAK,CAAA,EAAA,CAAA,YAAA;AAC1C,YAAA,CAAA,MAAA,CAAA,WAAA;iDAAA,kBAAA,EAAAA,eAAA,CAAA,MAAA,CAAA,WAAA,CAAA,EAAA,CAAA,YAAA;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,28 @@
+import __sfc_main from './CnRadioCardsWidget.vue.js';
+import { registerDashboardWidget } from '../CnWidgetGrid/dashboardWidgetRegistry.js';
+
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * CnRadioCardsWidget — self-registers the `radio-cards` widget type (one
+ * choice out of a few cards with a title and a description, bound to an enum
+ * field of the current object and saved on selection) into the shared
+ * dashboardWidgetRegistry at module load.
+ */
+
+
+registerDashboardWidget('radio-cards', {
+	renderer: __sfc_main,
+	form: null,
+	defaultContent: {
+		field: '',
+		options: [],
+	},
+	displayName: 'Radio cards',
+	icon: 'RadioboxMarked',
+	surfaces: ['detail-page'],
+});
+
+export { __sfc_main as CnRadioCardsWidget, __sfc_main as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/CnRadioCardsWidget/index.js"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2026 Conduction B.V.\n * SPDX-License-Identifier: EUPL-1.2\n *\n * CnRadioCardsWidget — self-registers the `radio-cards` widget type (one\n * choice out of a few cards with a title and a description, bound to an enum\n * field of the current object and saved on selection) into the shared\n * dashboardWidgetRegistry at module load.\n */\n\nimport CnRadioCardsWidget from './CnRadioCardsWidget.vue'\nimport { registerDashboardWidget } from '../CnWidgetGrid/dashboardWidgetRegistry.js'\n\nregisterDashboardWidget('radio-cards', {\n\trenderer: CnRadioCardsWidget,\n\tform: null,\n\tdefaultContent: {\n\t\tfield: '',\n\t\toptions: [],\n\t},\n\tdisplayName: 'Radio cards',\n\ticon: 'RadioboxMarked',\n\tsurfaces: ['detail-page'],\n})\n\nexport { CnRadioCardsWidget }\nexport default CnRadioCardsWidget\n"],"names":["CnRadioCardsWidget"],"mappings":";;;AAAA;AACA;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,KAAK,EAAE,EAAE;AACX,EAAE,OAAO,EAAE,EAAE;AACb,EAAE;AACF,CAAC,WAAW,EAAE,aAAa;AAC3B,CAAC,IAAI,EAAE,gBAAgB;AACvB,CAAC,QAAQ,EAAE,CAAC,aAAa,CAAC;AAC1B,CAAC;;;;"}

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

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

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

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