@conduction/nextcloud-vue 2.80.0 → 2.81.0

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

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

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

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

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

@@ -0,0 +1,252 @@
+import { NcButton } 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;
+
+/**
+ * CnChipsFieldWidget — the `chips-field` widget: a list of short strings in one
+ * array field of the CURRENT object, drawn as chips with a remove button and an
+ * add chip that opens a small input (or a choice of the remaining `options`).
+ * Every add and remove is ONE PATCH of that field with the full new list; each
+ * new entry is checked against `pattern` first, trimmed, optionally lowercased,
+ * and refused when it is already there.
+ *
+ * @spec openspec/changes/abstract-chips-field/specs/chips-field/spec.md
+ */
+var script = {
+	name: 'CnChipsFieldWidget',
+
+	components: { NcButton },
+
+	inject: {
+		cnTranslate: { default: () => (key) => key },
+	},
+
+	props: {
+		/**
+		 * The widget configuration.
+		 *
+		 * - `field` (required) — the top-level array field of strings.
+		 * - `label`, `hint`, `placeholder`.
+		 * - `addLabel` — the add chip's text (default "Add").
+		 * - `removeLabel`, `confirmLabel`.
+		 * - `pattern`, `patternMessage` — checked on every new entry.
+		 * - `lowercase` — store entries in lower case.
+		 * - `options` — `[{ value, label }]`: add by choosing one of the remaining options instead of typing.
+		 * - `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 {
+			labelId: `cn-chips-field-${uid}`,
+			saved: null,
+			adding: false,
+			draft: '',
+			error: '',
+			busy: false,
+		}
+	},
+
+	computed: {
+		/** The stored list. */
+		items() {
+			const list = this.saved !== null ? this.saved : readPath(this.objectData || {}, this.content.field);
+			return Array.isArray(list) ? list.map((item) => String(item)) : []
+		},
+
+		choices() {
+			const list = Array.isArray(this.content.options) ? this.content.options : [];
+			return list.map((option) => (typeof option === 'object' && option !== null
+				? { value: String(option.value), label: this.tr(String(option.label ?? option.value)) }
+				: { value: String(option), label: this.tr(String(option)) }))
+		},
+
+		available() {
+			return this.choices.filter((choice) => !this.items.includes(choice.value))
+		},
+
+		label() {
+			return this.tr(this.content.label || '')
+		},
+
+		hint() {
+			return this.tr(this.content.hint || '')
+		},
+
+		placeholder() {
+			return this.tr(this.content.placeholder || '')
+		},
+
+		addLabel() {
+			return this.tr(this.content.addLabel || 'Add')
+		},
+
+		removeLabel() {
+			return this.tr(this.content.removeLabel || 'Remove')
+		},
+
+		confirmLabel() {
+			return this.tr(this.content.confirmLabel || 'Add')
+		},
+
+		readOnly() {
+			return this.content.readOnly === true || !this.content.field
+		},
+
+		objectUrl() {
+			return objectUrlOf(this.register, this.schema, this.objectId || (this.objectData && this.objectData.id))
+		},
+	},
+
+	watch: {
+		objectData() {
+			this.saved = null;
+		},
+	},
+
+	methods: {
+		tr(text) {
+			if (typeof text !== 'string' || text === '') {
+				return ''
+			}
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
+		},
+
+		/**
+		 * The text on a chip: an option's label, else the value.
+		 *
+		 * @param {string} item The stored value.
+		 * @return {string}
+		 */
+		itemLabel(item) {
+			const choice = this.choices.find((candidate) => candidate.value === item);
+			return choice ? choice.label : item
+		},
+
+		open() {
+			this.adding = true;
+			this.error = '';
+			this.draft = this.choices.length > 0 && this.available.length > 0 ? this.available[0].value : '';
+			this.$nextTick(() => {
+				const el = this.$refs.input;
+				if (el && typeof el.focus === 'function') {
+					el.focus();
+				}
+			});
+		},
+
+		cancel() {
+			this.adding = false;
+			this.draft = '';
+			this.error = '';
+		},
+
+		/**
+		 * Write the new list: ONE PATCH of the field.
+		 *
+		 * @param {string[]} next The new list.
+		 * @return {Promise<boolean>} Whether it saved.
+		 */
+		async write(next) {
+			if (!this.objectUrl) {
+				this.error = this.tr('This list cannot be saved here.');
+				return false
+			}
+			this.busy = true;
+			this.error = '';
+			try {
+				const data = await patchObject(this.objectUrl, { [this.content.field]: next });
+				const written = readPath(data, this.content.field);
+				this.saved = Array.isArray(written) ? written.map((item) => String(item)) : next;
+				/**
+				 * @event saved The list was written.
+				 * @type {{field: string, value: string[]}}
+				 */
+				this.$emit('saved', { field: this.content.field, value: this.saved });
+				return true
+			} catch (e) {
+				this.error = serverErrorMessage(e);
+				return false
+			} finally {
+				this.busy = false;
+			}
+		},
+
+		/**
+		 * Check the draft and add it.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/abstract-chips-field/specs/chips-field/spec.md#requirement-an-entry-is-checked-before-it-is-added
+		 */
+		async add() {
+			let value = String(this.draft ?? '').trim();
+			if (this.content.lowercase === true) {
+				value = value.toLowerCase();
+			}
+			if (value === '') {
+				this.error = this.tr('Fill this in.');
+				return
+			}
+			if (this.choices.length === 0 && this.content.pattern && !new RegExp(this.content.pattern).test(value)) {
+				this.error = this.tr(this.content.patternMessage || 'This value is not valid.');
+				return
+			}
+			if (this.items.includes(value)) {
+				this.error = this.tr('This is already in the list.');
+				return
+			}
+			if (await this.write([...this.items, value])) {
+				this.cancel();
+			}
+		},
+
+		/**
+		 * Remove one entry.
+		 *
+		 * @param {string} item The entry.
+		 * @return {Promise<void>}
+		 */
+		async remove(item) {
+			await this.write(this.items.filter((candidate) => candidate !== item));
+		},
+	},
+};
+
+export { script as default };
+//# sourceMappingURL=CnChipsFieldWidget.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CnChipsFieldWidget.vue2.js","sources":["../../../../src/components/CnChipsFieldWidget/CnChipsFieldWidget.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-chips-field\" data-testid=\"cn-chips-field\">\n\t\t<p v-if=\"label\" :id=\"labelId\" class=\"cn-chips-field__label\">\n\t\t\t{{ label }}\n\t\t</p>\n\t\t<ul class=\"cn-chips-field__chips\" :aria-labelledby=\"label ? labelId : null\">\n\t\t\t<li\n\t\t\t\tv-for=\"item in items\"\n\t\t\t\t:key=\"item\"\n\t\t\t\tclass=\"cn-chips-field__chip\"\n\t\t\t\t:data-testid=\"`cn-chips-field-chip-${item}`\">\n\t\t\t\t<span class=\"cn-chips-field__text\">{{ itemLabel(item) }}</span>\n\t\t\t\t<button\n\t\t\t\t\tv-if=\"!readOnly\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"cn-chips-field__remove\"\n\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t:aria-label=\"`${removeLabel}: ${itemLabel(item)}`\"\n\t\t\t\t\t:data-testid=\"`cn-chips-field-remove-${item}`\"\n\t\t\t\t\t@click=\"remove(item)\">\n\t\t\t\t\t<span aria-hidden=\"true\">×</span>\n\t\t\t\t</button>\n\t\t\t</li>\n\t\t\t<li v-if=\"!readOnly\" class=\"cn-chips-field__add-item\">\n\t\t\t\t<form v-if=\"adding\" class=\"cn-chips-field__form\" @submit.prevent=\"add\">\n\t\t\t\t\t<select\n\t\t\t\t\t\tv-if=\"choices.length > 0\"\n\t\t\t\t\t\tref=\"input\"\n\t\t\t\t\t\tv-model=\"draft\"\n\t\t\t\t\t\tclass=\"cn-chips-field__input\"\n\t\t\t\t\t\t:aria-label=\"addLabel\"\n\t\t\t\t\t\tdata-testid=\"cn-chips-field-input\">\n\t\t\t\t\t\t<option v-for=\"choice in available\" :key=\"choice.value\" :value=\"choice.value\">\n\t\t\t\t\t\t\t{{ choice.label }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<input\n\t\t\t\t\t\tv-else\n\t\t\t\t\t\tref=\"input\"\n\t\t\t\t\t\tv-model=\"draft\"\n\t\t\t\t\t\tclass=\"cn-chips-field__input\"\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t:placeholder=\"placeholder\"\n\t\t\t\t\t\t:aria-label=\"addLabel\"\n\t\t\t\t\t\t:aria-invalid=\"error ? 'true' : null\"\n\t\t\t\t\t\tdata-testid=\"cn-chips-field-input\"\n\t\t\t\t\t\t@keydown.esc=\"cancel\">\n\t\t\t\t\t<NcButton type=\"submit\"\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\tdata-testid=\"cn-chips-field-submit\">\n\t\t\t\t\t\t{{ confirmLabel }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t</form>\n\t\t\t\t<button\n\t\t\t\t\tv-else\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"cn-chips-field__add\"\n\t\t\t\t\t:disabled=\"busy || (choices.length > 0 && available.length === 0)\"\n\t\t\t\t\tdata-testid=\"cn-chips-field-add\"\n\t\t\t\t\t@click=\"open\">\n\t\t\t\t\t+ {{ addLabel }}\n\t\t\t\t</button>\n\t\t\t</li>\n\t\t</ul>\n\t\t<p v-if=\"error\"\n\t\t\tclass=\"cn-chips-field__error\"\n\t\t\trole=\"alert\"\n\t\t\tdata-testid=\"cn-chips-field-error\">\n\t\t\t{{ error }}\n\t\t</p>\n\t\t<p v-else-if=\"hint\" class=\"cn-chips-field__hint\">\n\t\t\t{{ hint }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport { NcButton } 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 * CnChipsFieldWidget — the `chips-field` widget: a list of short strings in one\n * array field of the CURRENT object, drawn as chips with a remove button and an\n * add chip that opens a small input (or a choice of the remaining `options`).\n * Every add and remove is ONE PATCH of that field with the full new list; each\n * new entry is checked against `pattern` first, trimmed, optionally lowercased,\n * and refused when it is already there.\n *\n * @spec openspec/changes/abstract-chips-field/specs/chips-field/spec.md\n */\nexport default {\n\tname: 'CnChipsFieldWidget',\n\n\tcomponents: { NcButton },\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 array field of strings.\n\t\t * - `label`, `hint`, `placeholder`.\n\t\t * - `addLabel` — the add chip's text (default \"Add\").\n\t\t * - `removeLabel`, `confirmLabel`.\n\t\t * - `pattern`, `patternMessage` — checked on every new entry.\n\t\t * - `lowercase` — store entries in lower case.\n\t\t * - `options` — `[{ value, label }]`: add by choosing one of the remaining options instead of typing.\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\tlabelId: `cn-chips-field-${uid}`,\n\t\t\tsaved: null,\n\t\t\tadding: false,\n\t\t\tdraft: '',\n\t\t\terror: '',\n\t\t\tbusy: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/** The stored list. */\n\t\titems() {\n\t\t\tconst list = this.saved !== null ? this.saved : readPath(this.objectData || {}, this.content.field)\n\t\t\treturn Array.isArray(list) ? list.map((item) => String(item)) : []\n\t\t},\n\n\t\tchoices() {\n\t\t\tconst list = Array.isArray(this.content.options) ? this.content.options : []\n\t\t\treturn list.map((option) => (typeof option === 'object' && option !== null\n\t\t\t\t? { value: String(option.value), label: this.tr(String(option.label ?? option.value)) }\n\t\t\t\t: { value: String(option), label: this.tr(String(option)) }))\n\t\t},\n\n\t\tavailable() {\n\t\t\treturn this.choices.filter((choice) => !this.items.includes(choice.value))\n\t\t},\n\n\t\tlabel() {\n\t\t\treturn this.tr(this.content.label || '')\n\t\t},\n\n\t\thint() {\n\t\t\treturn this.tr(this.content.hint || '')\n\t\t},\n\n\t\tplaceholder() {\n\t\t\treturn this.tr(this.content.placeholder || '')\n\t\t},\n\n\t\taddLabel() {\n\t\t\treturn this.tr(this.content.addLabel || 'Add')\n\t\t},\n\n\t\tremoveLabel() {\n\t\t\treturn this.tr(this.content.removeLabel || 'Remove')\n\t\t},\n\n\t\tconfirmLabel() {\n\t\t\treturn this.tr(this.content.confirmLabel || 'Add')\n\t\t},\n\n\t\treadOnly() {\n\t\t\treturn this.content.readOnly === true || !this.content.field\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.saved = null\n\t\t},\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/**\n\t\t * The text on a chip: an option's label, else the value.\n\t\t *\n\t\t * @param {string} item The stored value.\n\t\t * @return {string}\n\t\t */\n\t\titemLabel(item) {\n\t\t\tconst choice = this.choices.find((candidate) => candidate.value === item)\n\t\t\treturn choice ? choice.label : item\n\t\t},\n\n\t\topen() {\n\t\t\tthis.adding = true\n\t\t\tthis.error = ''\n\t\t\tthis.draft = this.choices.length > 0 && this.available.length > 0 ? this.available[0].value : ''\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tconst el = this.$refs.input\n\t\t\t\tif (el && typeof el.focus === 'function') {\n\t\t\t\t\tel.focus()\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\n\t\tcancel() {\n\t\t\tthis.adding = false\n\t\t\tthis.draft = ''\n\t\t\tthis.error = ''\n\t\t},\n\n\t\t/**\n\t\t * Write the new list: ONE PATCH of the field.\n\t\t *\n\t\t * @param {string[]} next The new list.\n\t\t * @return {Promise<boolean>} Whether it saved.\n\t\t */\n\t\tasync write(next) {\n\t\t\tif (!this.objectUrl) {\n\t\t\t\tthis.error = this.tr('This list cannot be saved here.')\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tthis.busy = true\n\t\t\tthis.error = ''\n\t\t\ttry {\n\t\t\t\tconst data = await patchObject(this.objectUrl, { [this.content.field]: next })\n\t\t\t\tconst written = readPath(data, this.content.field)\n\t\t\t\tthis.saved = Array.isArray(written) ? written.map((item) => String(item)) : next\n\t\t\t\t/**\n\t\t\t\t * @event saved The list was written.\n\t\t\t\t * @type {{field: string, value: string[]}}\n\t\t\t\t */\n\t\t\t\tthis.$emit('saved', { field: this.content.field, value: this.saved })\n\t\t\t\treturn true\n\t\t\t} catch (e) {\n\t\t\t\tthis.error = serverErrorMessage(e)\n\t\t\t\treturn false\n\t\t\t} finally {\n\t\t\t\tthis.busy = false\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Check the draft and add it.\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t * @spec openspec/changes/abstract-chips-field/specs/chips-field/spec.md#requirement-an-entry-is-checked-before-it-is-added\n\t\t */\n\t\tasync add() {\n\t\t\tlet value = String(this.draft ?? '').trim()\n\t\t\tif (this.content.lowercase === true) {\n\t\t\t\tvalue = value.toLowerCase()\n\t\t\t}\n\t\t\tif (value === '') {\n\t\t\t\tthis.error = this.tr('Fill this in.')\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.choices.length === 0 && this.content.pattern && !new RegExp(this.content.pattern).test(value)) {\n\t\t\t\tthis.error = this.tr(this.content.patternMessage || 'This value is not valid.')\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.items.includes(value)) {\n\t\t\t\tthis.error = this.tr('This is already in the list.')\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (await this.write([...this.items, value])) {\n\t\t\t\tthis.cancel()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Remove one entry.\n\t\t *\n\t\t * @param {string} item The entry.\n\t\t * @return {Promise<void>}\n\t\t */\n\t\tasync remove(item) {\n\t\t\tawait this.write(this.items.filter((candidate) => candidate !== item))\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-chips-field {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 6px;\n\tmin-width: 0;\n}\n\n.cn-chips-field__label {\n\tmargin: 0;\n\tfont-size: 13px;\n\tfont-weight: 600;\n}\n\n.cn-chips-field__chips {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: 8px;\n}\n\n.cn-chips-field__chip {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 6px;\n\tpadding: 4px 6px 4px 12px;\n\tborder-radius: 999px;\n\tbackground: var(--color-primary-element-light);\n\tcolor: var(--color-primary-element-light-text, var(--color-main-text));\n\tfont-weight: 600;\n\toverflow-wrap: anywhere;\n}\n\n.cn-chips-field__remove {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 20px;\n\theight: 20px;\n\tpadding: 0;\n\tborder: 0;\n\tborder-radius: 50%;\n\tbackground: transparent;\n\tcolor: inherit;\n\tfont-size: 16px;\n\tline-height: 1;\n\tcursor: pointer;\n}\n\n.cn-chips-field__remove:hover:not(:disabled),\n.cn-chips-field__remove:focus-visible {\n\tbackground: var(--color-primary-element-light-hover, var(--color-background-hover));\n}\n\n.cn-chips-field__add {\n\tpadding: 4px 12px;\n\tborder: 1px dashed var(--color-border-maxcontrast);\n\tborder-radius: 999px;\n\tbackground: transparent;\n\tcolor: var(--color-main-text);\n\tfont-weight: 600;\n\tcursor: pointer;\n}\n\n.cn-chips-field__add:hover:not(:disabled) {\n\tbackground: var(--color-background-hover);\n}\n\n.cn-chips-field__form {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n}\n\n.cn-chips-field__input {\n\theight: var(--cn-board-control-height, 40px);\n\tbox-sizing: border-box;\n\tpadding: 0 12px;\n\tborder: 1px solid var(--color-border-maxcontrast);\n\tborder-radius: var(--cn-board-control-radius, 8px);\n\tbackground: var(--color-main-background);\n\tcolor: var(--color-main-text);\n\tfont: inherit;\n}\n\n.cn-chips-field__hint,\n.cn-chips-field__error {\n\tmargin: 0;\n\tfont-size: 12px;\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.cn-chips-field__error {\n\tcolor: var(--color-error-text);\n}\n</style>\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,140 @@
+import { resolveComponent, openBlock, createElementBlock, toDisplayString, createCommentVNode, createElementVNode, Fragment, renderList, withModifiers, withDirectives, vModelSelect, withKeys, vModelText, createVNode, withCtx, createTextVNode } from 'vue';
+
+const _hoisted_1 = {
+  class: "cn-chips-field",
+  "data-testid": "cn-chips-field"
+};
+const _hoisted_2 = ["id"];
+const _hoisted_3 = ["aria-labelledby"];
+const _hoisted_4 = ["data-testid"];
+const _hoisted_5 = { class: "cn-chips-field__text" };
+const _hoisted_6 = ["disabled", "aria-label", "data-testid", "onClick"];
+const _hoisted_7 = {
+  key: 0,
+  class: "cn-chips-field__add-item"
+};
+const _hoisted_8 = ["aria-label"];
+const _hoisted_9 = ["value"];
+const _hoisted_10 = ["placeholder", "aria-label", "aria-invalid"];
+const _hoisted_11 = ["disabled"];
+const _hoisted_12 = {
+  key: 1,
+  class: "cn-chips-field__error",
+  role: "alert",
+  "data-testid": "cn-chips-field-error"
+};
+const _hoisted_13 = {
+  key: 2,
+  class: "cn-chips-field__hint"
+};
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcButton = resolveComponent("NcButton");
+
+  return (openBlock(), createElementBlock("div", _hoisted_1, [
+    ($options.label)
+      ? (openBlock(), createElementBlock("p", {
+          key: 0,
+          id: $data.labelId,
+          class: "cn-chips-field__label"
+        }, toDisplayString($options.label), 9 /* TEXT, PROPS */, _hoisted_2))
+      : createCommentVNode("v-if", true),
+    createElementVNode("ul", {
+      class: "cn-chips-field__chips",
+      "aria-labelledby": $options.label ? $data.labelId : null
+    }, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList($options.items, (item) => {
+        return (openBlock(), createElementBlock("li", {
+          key: item,
+          class: "cn-chips-field__chip",
+          "data-testid": `cn-chips-field-chip-${item}`
+        }, [
+          createElementVNode("span", _hoisted_5, toDisplayString($options.itemLabel(item)), 1 /* TEXT */),
+          (!$options.readOnly)
+            ? (openBlock(), createElementBlock("button", {
+                key: 0,
+                type: "button",
+                class: "cn-chips-field__remove",
+                disabled: $data.busy,
+                "aria-label": `${$options.removeLabel}: ${$options.itemLabel(item)}`,
+                "data-testid": `cn-chips-field-remove-${item}`,
+                onClick: $event => ($options.remove(item))
+              }, [...(_cache[5] || (_cache[5] = [
+                createElementVNode("span", { "aria-hidden": "true" }, "×", -1 /* CACHED */)
+              ]))], 8 /* PROPS */, _hoisted_6))
+            : createCommentVNode("v-if", true)
+        ], 8 /* PROPS */, _hoisted_4))
+      }), 128 /* KEYED_FRAGMENT */)),
+      (!$options.readOnly)
+        ? (openBlock(), createElementBlock("li", _hoisted_7, [
+            ($data.adding)
+              ? (openBlock(), createElementBlock("form", {
+                  key: 0,
+                  class: "cn-chips-field__form",
+                  onSubmit: _cache[3] || (_cache[3] = withModifiers((...args) => ($options.add && $options.add(...args)), ["prevent"]))
+                }, [
+                  ($options.choices.length > 0)
+                    ? withDirectives((openBlock(), createElementBlock("select", {
+                        key: 0,
+                        ref: "input",
+                        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($data.draft) = $event)),
+                        class: "cn-chips-field__input",
+                        "aria-label": $options.addLabel,
+                        "data-testid": "cn-chips-field-input"
+                      }, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList($options.available, (choice) => {
+                          return (openBlock(), createElementBlock("option", {
+                            key: choice.value,
+                            value: choice.value
+                          }, toDisplayString(choice.label), 9 /* TEXT, PROPS */, _hoisted_9))
+                        }), 128 /* KEYED_FRAGMENT */))
+                      ], 8 /* PROPS */, _hoisted_8)), [
+                        [vModelSelect, $data.draft]
+                      ])
+                    : withDirectives((openBlock(), createElementBlock("input", {
+                        key: 1,
+                        ref: "input",
+                        "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (($data.draft) = $event)),
+                        class: "cn-chips-field__input",
+                        type: "text",
+                        placeholder: $options.placeholder,
+                        "aria-label": $options.addLabel,
+                        "aria-invalid": $data.error ? 'true' : null,
+                        "data-testid": "cn-chips-field-input",
+                        onKeydown: _cache[2] || (_cache[2] = withKeys((...args) => ($options.cancel && $options.cancel(...args)), ["esc"]))
+                      }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_10)), [
+                        [vModelText, $data.draft]
+                      ]),
+                  createVNode(_component_NcButton, {
+                    type: "submit",
+                    variant: "secondary",
+                    disabled: $data.busy,
+                    "data-testid": "cn-chips-field-submit"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString($options.confirmLabel), 1 /* TEXT */)
+                    ]),
+                    _: 1 /* STABLE */
+                  }, 8 /* PROPS */, ["disabled"])
+                ], 32 /* NEED_HYDRATION */))
+              : (openBlock(), createElementBlock("button", {
+                  key: 1,
+                  type: "button",
+                  class: "cn-chips-field__add",
+                  disabled: $data.busy || ($options.choices.length > 0 && $options.available.length === 0),
+                  "data-testid": "cn-chips-field-add",
+                  onClick: _cache[4] || (_cache[4] = (...args) => ($options.open && $options.open(...args)))
+                }, " + " + toDisplayString($options.addLabel), 9 /* TEXT, PROPS */, _hoisted_11))
+          ]))
+        : createCommentVNode("v-if", true)
+    ], 8 /* PROPS */, _hoisted_3),
+    ($data.error)
+      ? (openBlock(), createElementBlock("p", _hoisted_12, toDisplayString($data.error), 1 /* TEXT */))
+      : ($options.hint)
+        ? (openBlock(), createElementBlock("p", _hoisted_13, toDisplayString($options.hint), 1 /* TEXT */))
+        : createCommentVNode("v-if", true)
+  ]))
+}
+
+export { render };
+//# sourceMappingURL=CnChipsFieldWidget.vue3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CnChipsFieldWidget.vue3.js","sources":["../../../../src/components/CnChipsFieldWidget/CnChipsFieldWidget.vue?vue&type=template&id=43e5bfcf&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-chips-field\" data-testid=\"cn-chips-field\">\n\t\t<p v-if=\"label\" :id=\"labelId\" class=\"cn-chips-field__label\">\n\t\t\t{{ label }}\n\t\t</p>\n\t\t<ul class=\"cn-chips-field__chips\" :aria-labelledby=\"label ? labelId : null\">\n\t\t\t<li\n\t\t\t\tv-for=\"item in items\"\n\t\t\t\t:key=\"item\"\n\t\t\t\tclass=\"cn-chips-field__chip\"\n\t\t\t\t:data-testid=\"`cn-chips-field-chip-${item}`\">\n\t\t\t\t<span class=\"cn-chips-field__text\">{{ itemLabel(item) }}</span>\n\t\t\t\t<button\n\t\t\t\t\tv-if=\"!readOnly\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"cn-chips-field__remove\"\n\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t:aria-label=\"`${removeLabel}: ${itemLabel(item)}`\"\n\t\t\t\t\t:data-testid=\"`cn-chips-field-remove-${item}`\"\n\t\t\t\t\t@click=\"remove(item)\">\n\t\t\t\t\t<span aria-hidden=\"true\">×</span>\n\t\t\t\t</button>\n\t\t\t</li>\n\t\t\t<li v-if=\"!readOnly\" class=\"cn-chips-field__add-item\">\n\t\t\t\t<form v-if=\"adding\" class=\"cn-chips-field__form\" @submit.prevent=\"add\">\n\t\t\t\t\t<select\n\t\t\t\t\t\tv-if=\"choices.length > 0\"\n\t\t\t\t\t\tref=\"input\"\n\t\t\t\t\t\tv-model=\"draft\"\n\t\t\t\t\t\tclass=\"cn-chips-field__input\"\n\t\t\t\t\t\t:aria-label=\"addLabel\"\n\t\t\t\t\t\tdata-testid=\"cn-chips-field-input\">\n\t\t\t\t\t\t<option v-for=\"choice in available\" :key=\"choice.value\" :value=\"choice.value\">\n\t\t\t\t\t\t\t{{ choice.label }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<input\n\t\t\t\t\t\tv-else\n\t\t\t\t\t\tref=\"input\"\n\t\t\t\t\t\tv-model=\"draft\"\n\t\t\t\t\t\tclass=\"cn-chips-field__input\"\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t:placeholder=\"placeholder\"\n\t\t\t\t\t\t:aria-label=\"addLabel\"\n\t\t\t\t\t\t:aria-invalid=\"error ? 'true' : null\"\n\t\t\t\t\t\tdata-testid=\"cn-chips-field-input\"\n\t\t\t\t\t\t@keydown.esc=\"cancel\">\n\t\t\t\t\t<NcButton type=\"submit\"\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t:disabled=\"busy\"\n\t\t\t\t\t\tdata-testid=\"cn-chips-field-submit\">\n\t\t\t\t\t\t{{ confirmLabel }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t</form>\n\t\t\t\t<button\n\t\t\t\t\tv-else\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"cn-chips-field__add\"\n\t\t\t\t\t:disabled=\"busy || (choices.length > 0 && available.length === 0)\"\n\t\t\t\t\tdata-testid=\"cn-chips-field-add\"\n\t\t\t\t\t@click=\"open\">\n\t\t\t\t\t+ {{ addLabel }}\n\t\t\t\t</button>\n\t\t\t</li>\n\t\t</ul>\n\t\t<p v-if=\"error\"\n\t\t\tclass=\"cn-chips-field__error\"\n\t\t\trole=\"alert\"\n\t\t\tdata-testid=\"cn-chips-field-error\">\n\t\t\t{{ error }}\n\t\t</p>\n\t\t<p v-else-if=\"hint\" class=\"cn-chips-field__hint\">\n\t\t\t{{ hint }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport { NcButton } 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 * CnChipsFieldWidget — the `chips-field` widget: a list of short strings in one\n * array field of the CURRENT object, drawn as chips with a remove button and an\n * add chip that opens a small input (or a choice of the remaining `options`).\n * Every add and remove is ONE PATCH of that field with the full new list; each\n * new entry is checked against `pattern` first, trimmed, optionally lowercased,\n * and refused when it is already there.\n *\n * @spec openspec/changes/abstract-chips-field/specs/chips-field/spec.md\n */\nexport default {\n\tname: 'CnChipsFieldWidget',\n\n\tcomponents: { NcButton },\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 array field of strings.\n\t\t * - `label`, `hint`, `placeholder`.\n\t\t * - `addLabel` — the add chip's text (default \"Add\").\n\t\t * - `removeLabel`, `confirmLabel`.\n\t\t * - `pattern`, `patternMessage` — checked on every new entry.\n\t\t * - `lowercase` — store entries in lower case.\n\t\t * - `options` — `[{ value, label }]`: add by choosing one of the remaining options instead of typing.\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\tlabelId: `cn-chips-field-${uid}`,\n\t\t\tsaved: null,\n\t\t\tadding: false,\n\t\t\tdraft: '',\n\t\t\terror: '',\n\t\t\tbusy: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/** The stored list. */\n\t\titems() {\n\t\t\tconst list = this.saved !== null ? this.saved : readPath(this.objectData || {}, this.content.field)\n\t\t\treturn Array.isArray(list) ? list.map((item) => String(item)) : []\n\t\t},\n\n\t\tchoices() {\n\t\t\tconst list = Array.isArray(this.content.options) ? this.content.options : []\n\t\t\treturn list.map((option) => (typeof option === 'object' && option !== null\n\t\t\t\t? { value: String(option.value), label: this.tr(String(option.label ?? option.value)) }\n\t\t\t\t: { value: String(option), label: this.tr(String(option)) }))\n\t\t},\n\n\t\tavailable() {\n\t\t\treturn this.choices.filter((choice) => !this.items.includes(choice.value))\n\t\t},\n\n\t\tlabel() {\n\t\t\treturn this.tr(this.content.label || '')\n\t\t},\n\n\t\thint() {\n\t\t\treturn this.tr(this.content.hint || '')\n\t\t},\n\n\t\tplaceholder() {\n\t\t\treturn this.tr(this.content.placeholder || '')\n\t\t},\n\n\t\taddLabel() {\n\t\t\treturn this.tr(this.content.addLabel || 'Add')\n\t\t},\n\n\t\tremoveLabel() {\n\t\t\treturn this.tr(this.content.removeLabel || 'Remove')\n\t\t},\n\n\t\tconfirmLabel() {\n\t\t\treturn this.tr(this.content.confirmLabel || 'Add')\n\t\t},\n\n\t\treadOnly() {\n\t\t\treturn this.content.readOnly === true || !this.content.field\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.saved = null\n\t\t},\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/**\n\t\t * The text on a chip: an option's label, else the value.\n\t\t *\n\t\t * @param {string} item The stored value.\n\t\t * @return {string}\n\t\t */\n\t\titemLabel(item) {\n\t\t\tconst choice = this.choices.find((candidate) => candidate.value === item)\n\t\t\treturn choice ? choice.label : item\n\t\t},\n\n\t\topen() {\n\t\t\tthis.adding = true\n\t\t\tthis.error = ''\n\t\t\tthis.draft = this.choices.length > 0 && this.available.length > 0 ? this.available[0].value : ''\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tconst el = this.$refs.input\n\t\t\t\tif (el && typeof el.focus === 'function') {\n\t\t\t\t\tel.focus()\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\n\t\tcancel() {\n\t\t\tthis.adding = false\n\t\t\tthis.draft = ''\n\t\t\tthis.error = ''\n\t\t},\n\n\t\t/**\n\t\t * Write the new list: ONE PATCH of the field.\n\t\t *\n\t\t * @param {string[]} next The new list.\n\t\t * @return {Promise<boolean>} Whether it saved.\n\t\t */\n\t\tasync write(next) {\n\t\t\tif (!this.objectUrl) {\n\t\t\t\tthis.error = this.tr('This list cannot be saved here.')\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tthis.busy = true\n\t\t\tthis.error = ''\n\t\t\ttry {\n\t\t\t\tconst data = await patchObject(this.objectUrl, { [this.content.field]: next })\n\t\t\t\tconst written = readPath(data, this.content.field)\n\t\t\t\tthis.saved = Array.isArray(written) ? written.map((item) => String(item)) : next\n\t\t\t\t/**\n\t\t\t\t * @event saved The list was written.\n\t\t\t\t * @type {{field: string, value: string[]}}\n\t\t\t\t */\n\t\t\t\tthis.$emit('saved', { field: this.content.field, value: this.saved })\n\t\t\t\treturn true\n\t\t\t} catch (e) {\n\t\t\t\tthis.error = serverErrorMessage(e)\n\t\t\t\treturn false\n\t\t\t} finally {\n\t\t\t\tthis.busy = false\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Check the draft and add it.\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t * @spec openspec/changes/abstract-chips-field/specs/chips-field/spec.md#requirement-an-entry-is-checked-before-it-is-added\n\t\t */\n\t\tasync add() {\n\t\t\tlet value = String(this.draft ?? '').trim()\n\t\t\tif (this.content.lowercase === true) {\n\t\t\t\tvalue = value.toLowerCase()\n\t\t\t}\n\t\t\tif (value === '') {\n\t\t\t\tthis.error = this.tr('Fill this in.')\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.choices.length === 0 && this.content.pattern && !new RegExp(this.content.pattern).test(value)) {\n\t\t\t\tthis.error = this.tr(this.content.patternMessage || 'This value is not valid.')\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.items.includes(value)) {\n\t\t\t\tthis.error = this.tr('This is already in the list.')\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (await this.write([...this.items, value])) {\n\t\t\t\tthis.cancel()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Remove one entry.\n\t\t *\n\t\t * @param {string} item The entry.\n\t\t * @return {Promise<void>}\n\t\t */\n\t\tasync remove(item) {\n\t\t\tawait this.write(this.items.filter((candidate) => candidate !== item))\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-chips-field {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 6px;\n\tmin-width: 0;\n}\n\n.cn-chips-field__label {\n\tmargin: 0;\n\tfont-size: 13px;\n\tfont-weight: 600;\n}\n\n.cn-chips-field__chips {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: 8px;\n}\n\n.cn-chips-field__chip {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 6px;\n\tpadding: 4px 6px 4px 12px;\n\tborder-radius: 999px;\n\tbackground: var(--color-primary-element-light);\n\tcolor: var(--color-primary-element-light-text, var(--color-main-text));\n\tfont-weight: 600;\n\toverflow-wrap: anywhere;\n}\n\n.cn-chips-field__remove {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 20px;\n\theight: 20px;\n\tpadding: 0;\n\tborder: 0;\n\tborder-radius: 50%;\n\tbackground: transparent;\n\tcolor: inherit;\n\tfont-size: 16px;\n\tline-height: 1;\n\tcursor: pointer;\n}\n\n.cn-chips-field__remove:hover:not(:disabled),\n.cn-chips-field__remove:focus-visible {\n\tbackground: var(--color-primary-element-light-hover, var(--color-background-hover));\n}\n\n.cn-chips-field__add {\n\tpadding: 4px 12px;\n\tborder: 1px dashed var(--color-border-maxcontrast);\n\tborder-radius: 999px;\n\tbackground: transparent;\n\tcolor: var(--color-main-text);\n\tfont-weight: 600;\n\tcursor: pointer;\n}\n\n.cn-chips-field__add:hover:not(:disabled) {\n\tbackground: var(--color-background-hover);\n}\n\n.cn-chips-field__form {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n}\n\n.cn-chips-field__input {\n\theight: var(--cn-board-control-height, 40px);\n\tbox-sizing: border-box;\n\tpadding: 0 12px;\n\tborder: 1px solid var(--color-border-maxcontrast);\n\tborder-radius: var(--cn-board-control-radius, 8px);\n\tbackground: var(--color-main-background);\n\tcolor: var(--color-main-text);\n\tfont: inherit;\n}\n\n.cn-chips-field__hint,\n.cn-chips-field__error {\n\tmargin: 0;\n\tfont-size: 12px;\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.cn-chips-field__error {\n\tcolor: var(--color-error-text);\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_toDisplayString","_createVNode"],"mappings":";;;AAWK,EAAA,KAAA,EAAA,gBAAA;AAAA,EAAA,aAAA,EAAA,gBAAA;;;;;AAUK,MAAA,UAAA,GAAA,EAAA,KAAK,EAAC,sBAAI,GAAA;;;;AAYA,EAAA,KAAA,EAAA,0BAAA;;;;;;;;AA2CjB,EAAA,KAAK,EAAC,uBAAuB;AAC7B,EAAA,IAAI,EAAC,OAAI;AACT,EAAA,aAAE,EAAA,sBAAA;;;;;;;;;;AAnEF,EAAA,QAAAA,SAAA,EAAA,EAAAC,kBAAA,QAAA;KACQ,QAAK,CAAA,KAAA;sBAAZA,kBAEE,CAAA,GAAA,EAAA;;AAFa,UAAA,EAAE,EAAE,KAAC,CAAA,OAAA;AAAA,UAAA,KAAA,EAAA,uBAAA;2BAClB,QAAK,CAAA,KAAA,CAAA,EAAA,CAAA,oBAAA,UAAA,CAAA;;IAEPC,kBA2DG,CAAA,IAAA,EAAA;AA3DD,MAAA,KAAK,EAAC,uBAAuB;MAAE,iBAAW,EAAA,QAAA,CAAA,KAAA,GAAA,KAAA,CAAA,OAAA,GAAA,IAAA;;0CAiBxC,CAAAC,QAAA,EAAA,IAAA,EAAAC,UAAA,CAfE,QAAA,CAAA,KAAA,EAAA,CAAA,IAAA,KAAA;+CAeF,CAAA,IAAA,EAAA;AAdH,UAAA,GAAG,EAAE,IAAI;eACL,EAAC,sBAAO;AACZ,UAAA,aAAW,yBAAkB,IAAA,CAAA,CAAA;;AAC7B,UAAAF,kBAAA,CAAe,MAAf,EAAA,UAAe,EAAAG,eAAA,CAAA,QAAA,CAAA,SAAA,CAAA,IAAA,CAAA,CAAA,EAAA,CAAA,YAAA;YAER,QAAQ,CAAA,QAAA;8CAQP,CAAA,QAAA,EAAA;;AAPR,gBAAA,IAAI,EAAC,QAAQ;AACb,gBAAA,KAAI,EAAE,wBAAwB;AAC7B,gBAAA,QAAM,EAAA,KAAA,CAAA,IAAA;AACN,gBAAA,YAAC,EAAA,CAAA,EAAA,QAAA,CAAA,WAAA,CAAA,EAAA,EAAA,QAAA,CAAA,SAAA,CAAA,IAAA,CAAA,CAAA,CAAA;6BACU,2BAA2B,IAAI,CAAA,CAAA;gBAC1C,OAAK,EAAA,MAAA,KAAE,QAAM,CAAA,MAAA,CAAC,IAAI,CAAA,CAAA;;AACnB,gBAAAH,kBAAA,CAAM,MAAA,EAAA,EAAA,aAAA,EAAA,MAAA,IAAA,GAAA,EAAA,CAAA,CAAA,cAAA;;;;;QAGG,QAAM,CAAA,QAAA;AAAd,WAAAF,SAAA,EAAA,EAAAC,kBAAA,CAwCE,MAxCF,UAwCE,EAAA;aAvCQ,KAAM,CAAA,MAAA;gDA6BX,CAAA,MAAA,EAAA;;AA7Ba,kBAAA,KAAK,EAAC,sBAAI;AAAA,kBAAA,QAAA,wDAAA,QAAA,CAAA,GAAA,IAAA,QAAA,CAAA,GAAA,CAAA,GAAA,IAAA,CAAA,CAAA,EAAA,CAAA,SAAA,CAAA,CAAA,CAAA;;AAEtB,kBAAA,CAAA,QAAA,CAAA,OAAO,CAAC,MAAM,GAAA,CAAA;mDADpBA,kBAUQ,CAAA,QAAA,EAAA;;AARR,wBAAA,GAAG,EAAC,OAAO;qFACF,KAAK,CAAA,KAAA,IAAA,MAAA,CAAA,CAAA;AACd,wBAAA,KAAK,EAAC,uBAAE;AACP,wBAAA,YAAM,EAAA,QAAA,CAAA,QAAA;AACP,wBAAA,aAAI,EAAA,sBAAA;;0CACJA,kBAES,CAAAE,QAAA,EAAA,IAAA,EAAAC,UAAA,CAFJ,QAAA,CAAA,SAAA,EAAA,CAAA,MAAA,KAAA;+CAALH,kBAES,CAAA,QAAA,EAAA;4BAFJ,GAAA,EAAA,MAAA,CAAA,KAAA;4BAAA,KAAA,EAAA,MAAA,CAAA,KAAA;AACD,2BAAA,EAAAI,eAAA,CAAA,MAAM,CAAA,KAAA,CAAA,EAAA,CAAA,oBAAA,UAAA,CAAA,CAAA;;;uCALD,KAAK,CAAA,KAAA,CAAA;;qEAkBG,CAAA,OAAA,EAAA;;AARjB,wBAAA,GAAG,EAAC,OAAO;qFACF,KAAK,CAAA,KAAA,IAAA,MAAA,CAAA,CAAA;AACd,wBAAA,KAAK,EAAC,uBAAuB;AAC7B,wBAAA,IAAI,EAAC,MAAM;AACV,wBAAA,WAAW,EAAE,QAAO,CAAA,WAAA;AACpB,wBAAA,YAAU,EAAE,QAAK,CAAA,QAAA;AACjB,wBAAA,cAAY,EAAE,KAAA,CAAA,KAAA,GAAA,MAAA,GAAA,IAAA;AACf,wBAAA,aAAW,EAAC,sBAAsB;AACjC,wBAAA,SAAO,mDAAM,QAAG,CAAA,MAAA,IAAA,QAAA,CAAA,MAAA,CAAA,GAAA,IAAA,CAAA,CAAA,EAAA,CAAA,KAAA,CAAA,CAAA,CAAA;;qCAPR,KAAK,CAAA,KAAA,CAAA;;kBAQfC,WAKW,CAAA,mBAAA,EAAA;AALD,oBAAA,IAAA,EAAA,QAAA;AACT,oBAAA,OAAI,EAAA,WAAA;AACH,oBAAA,QAAG,EAAA,KAAA,CAAA,IAAA;AACJ,oBAAA,aAAI,EAAA,uBAAA;;qCACJ,MAAW;sDAAR,QAAQ,CAAA,YAAA,CAAA,EAAA,CAAA,YAAA;;;;;8BAGZL,kBAQQ,CAAA,QAAA,EAAA;;AANR,kBAAA,IAAK,EAAA,QAAO;AACZ,kBAAA,KAAK,EAAC,qBAAC;kBACN,QAAC,EAAA,UAAA,KAAA,QAAA,CAAA,OAAA,CAAA,MAAA,GAAA,CAAA,IAAA,QAAA,CAAA,SAAA,CAAA,MAAA,KAAA,CAAA,CAAA;AACF,kBAAA,aAAC,EAAA,oBAAA;AACA,kBAAA,OAAK,0CAAE,QAAG,CAAA,IAAA,IAAA,QAAA,CAAA,IAAA,CAAA,GAAA,IAAA,CAAA,CAAA,CAAA;AAAA,iBAAA,EAAA,KACT,mBAAG,QAAQ,CAAA,QAAA,CAAA,EAAA,CAAA,oBAAA,WAAA,CAAA,CAAA;;;;KAIb,KAAA,CAAA,KAAA;sBAAHA,wBAAA,6BAII,KAAA,CAAA,KAAA,CAAA,EAAA,CAAA,YAAA;;;;;;;;;"}

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

@@ -0,0 +1,26 @@
+import __sfc_main from './CnChipsFieldWidget.vue.js';
+import { registerDashboardWidget } from '../CnWidgetGrid/dashboardWidgetRegistry.js';
+
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * CnChipsFieldWidget — self-registers the `chips-field` widget type (a list of
+ * short strings in one array field of the current object, added and removed as
+ * chips, saved on each change) into the shared dashboardWidgetRegistry.
+ */
+
+
+registerDashboardWidget('chips-field', {
+	renderer: __sfc_main,
+	form: null,
+	defaultContent: {
+		field: '',
+	},
+	displayName: 'Chips field',
+	icon: 'TagMultiple',
+	surfaces: ['detail-page'],
+});
+
+export { __sfc_main as CnChipsFieldWidget, __sfc_main as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/CnChipsFieldWidget/index.js"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2026 Conduction B.V.\n * SPDX-License-Identifier: EUPL-1.2\n *\n * CnChipsFieldWidget — self-registers the `chips-field` widget type (a list of\n * short strings in one array field of the current object, added and removed as\n * chips, saved on each change) into the shared dashboardWidgetRegistry.\n */\n\nimport CnChipsFieldWidget from './CnChipsFieldWidget.vue'\nimport { registerDashboardWidget } from '../CnWidgetGrid/dashboardWidgetRegistry.js'\n\nregisterDashboardWidget('chips-field', {\n\trenderer: CnChipsFieldWidget,\n\tform: null,\n\tdefaultContent: {\n\t\tfield: '',\n\t},\n\tdisplayName: 'Chips field',\n\ticon: 'TagMultiple',\n\tsurfaces: ['detail-page'],\n})\n\nexport { CnChipsFieldWidget }\nexport default CnChipsFieldWidget\n"],"names":["CnChipsFieldWidget"],"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,KAAK,EAAE,EAAE;AACX,EAAE;AACF,CAAC,WAAW,EAAE,aAAa;AAC3B,CAAC,IAAI,EAAE,aAAa;AACpB,CAAC,QAAQ,EAAE,CAAC,aAAa,CAAC;AAC1B,CAAC;;;;"}

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

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

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

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