@conduction/nextcloud-vue 2.79.0 → 2.81.0

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

@@ -0,0 +1,184 @@
+import { resolveComponent, openBlock, createElementBlock, withModifiers, createElementVNode, normalizeClass, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, createCommentVNode, withDirectives, vModelSelect, vModelText, vModelDynamic, createVNode } from 'vue';
+
+const _hoisted_1 = ["data-testid"];
+const _hoisted_2 = ["for"];
+const _hoisted_3 = ["data-testid"];
+const _hoisted_4 = ["id"];
+const _hoisted_5 = ["id", "onUpdate:modelValue", "disabled"];
+const _hoisted_6 = ["value"];
+const _hoisted_7 = ["id", "onUpdate:modelValue", "rows", "placeholder", "readonly"];
+const _hoisted_8 = ["id", "onUpdate:modelValue", "type", "min", "max", "placeholder", "readonly", "aria-invalid"];
+const _hoisted_9 = {
+  key: 2,
+  class: "cn-settings-form__error",
+  role: "alert"
+};
+const _hoisted_10 = {
+  key: 3,
+  class: "cn-settings-form__hint"
+};
+const _hoisted_11 = {
+  key: 1,
+  class: "cn-settings-form__actions"
+};
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcCheckboxRadioSwitch = resolveComponent("NcCheckboxRadioSwitch");
+  const _component_NcButton = resolveComponent("NcButton");
+  const _component_NcNoteCard = resolveComponent("NcNoteCard");
+
+  return (openBlock(), createElementBlock("form", {
+    class: "cn-settings-form",
+    "data-testid": "cn-settings-form",
+    novalidate: "",
+    onSubmit: _cache[0] || (_cache[0] = withModifiers((...args) => ($options.save && $options.save(...args)), ["prevent"]))
+  }, [
+    createElementVNode("div", {
+      class: normalizeClass(["cn-settings-form__grid", `cn-settings-form__grid--${$options.columns}`])
+    }, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList($options.fields, (field) => {
+        return (openBlock(), createElementBlock("div", {
+          key: field.key,
+          class: normalizeClass(["cn-settings-form__field", { 'cn-settings-form__field--wide': field.wide }]),
+          "data-testid": `cn-settings-form-field-${field.key}`
+        }, [
+          (field.type === 'switch')
+            ? (openBlock(), createBlock(_component_NcCheckboxRadioSwitch, {
+                key: 0,
+                modelValue: $data.form[field.key],
+                "onUpdate:modelValue": $event => (($data.form[field.key]) = $event),
+                type: "switch",
+                disabled: field.readOnly
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(field.label), 1 /* TEXT */)
+                ]),
+                _: 2 /* DYNAMIC */
+              }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["modelValue", "onUpdate:modelValue", "disabled"]))
+            : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createElementVNode("label", {
+                  class: "cn-settings-form__label",
+                  for: $options.inputId(field)
+                }, toDisplayString(field.label), 9 /* TEXT, PROPS */, _hoisted_2),
+                (field.type === 'file')
+                  ? (openBlock(), createElementBlock("div", {
+                      key: 0,
+                      class: "cn-settings-form__file",
+                      "data-testid": `cn-settings-form-file-${field.key}`
+                    }, [
+                      createElementVNode("span", {
+                        id: $options.inputId(field),
+                        class: normalizeClass(["cn-settings-form__control cn-settings-form__control--file", { 'cn-settings-form__control--placeholder': !$data.form[field.key] }])
+                      }, toDisplayString($data.form[field.key] ? $options.fileName($data.form[field.key]) : field.placeholder), 11 /* TEXT, CLASS, PROPS */, _hoisted_4),
+                      (!field.readOnly)
+                        ? (openBlock(), createBlock(_component_NcButton, {
+                            key: 0,
+                            variant: "secondary",
+                            "aria-describedby": $options.inputId(field),
+                            "data-testid": `cn-settings-form-choose-${field.key}`,
+                            onClick: $event => ($options.chooseFile(field))
+                          }, {
+                            default: withCtx(() => [
+                              createTextVNode(toDisplayString(field.chooseLabel), 1 /* TEXT */)
+                            ]),
+                            _: 2 /* DYNAMIC */
+                          }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["aria-describedby", "data-testid", "onClick"]))
+                        : createCommentVNode("v-if", true),
+                      (!field.readOnly && $data.form[field.key])
+                        ? (openBlock(), createBlock(_component_NcButton, {
+                            key: 1,
+                            variant: "tertiary",
+                            "data-testid": `cn-settings-form-clear-${field.key}`,
+                            onClick: $event => ($data.form[field.key] = '')
+                          }, {
+                            default: withCtx(() => [
+                              createTextVNode(toDisplayString(field.clearLabel), 1 /* TEXT */)
+                            ]),
+                            _: 2 /* DYNAMIC */
+                          }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["data-testid", "onClick"]))
+                        : createCommentVNode("v-if", true)
+                    ], 8 /* PROPS */, _hoisted_3))
+                  : (field.type === 'select')
+                    ? withDirectives((openBlock(), createElementBlock("select", {
+                        key: 1,
+                        id: $options.inputId(field),
+                        "onUpdate:modelValue": $event => (($data.form[field.key]) = $event),
+                        class: "cn-settings-form__control",
+                        disabled: field.readOnly
+                      }, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(field.options, (option) => {
+                          return (openBlock(), createElementBlock("option", {
+                            key: String(option.value),
+                            value: option.value
+                          }, toDisplayString(option.label), 9 /* TEXT, PROPS */, _hoisted_6))
+                        }), 128 /* KEYED_FRAGMENT */))
+                      ], 8 /* PROPS */, _hoisted_5)), [
+                        [vModelSelect, $data.form[field.key]]
+                      ])
+                    : (field.type === 'textarea')
+                      ? withDirectives((openBlock(), createElementBlock("textarea", {
+                          key: 2,
+                          id: $options.inputId(field),
+                          "onUpdate:modelValue": $event => (($data.form[field.key]) = $event),
+                          class: "cn-settings-form__control cn-settings-form__control--area",
+                          rows: field.rows,
+                          placeholder: field.placeholder,
+                          readonly: field.readOnly
+                        }, null, 8 /* PROPS */, _hoisted_7)), [
+                          [vModelText, $data.form[field.key]]
+                        ])
+                      : withDirectives((openBlock(), createElementBlock("input", {
+                          key: 3,
+                          id: $options.inputId(field),
+                          "onUpdate:modelValue": $event => (($data.form[field.key]) = $event),
+                          class: "cn-settings-form__control",
+                          type: field.type === 'number' ? 'number' : 'text',
+                          min: field.min,
+                          max: field.max,
+                          placeholder: field.placeholder,
+                          readonly: field.readOnly,
+                          "aria-invalid": $data.errors[field.key] ? 'true' : null
+                        }, null, 8 /* PROPS */, _hoisted_8)), [
+                          [vModelDynamic, $data.form[field.key]]
+                        ])
+              ], 64 /* STABLE_FRAGMENT */)),
+          ($data.errors[field.key])
+            ? (openBlock(), createElementBlock("p", _hoisted_9, toDisplayString($data.errors[field.key]), 1 /* TEXT */))
+            : (field.hint)
+              ? (openBlock(), createElementBlock("p", _hoisted_10, toDisplayString(field.hint), 1 /* TEXT */))
+              : createCommentVNode("v-if", true)
+        ], 10 /* CLASS, PROPS */, _hoisted_1))
+      }), 128 /* KEYED_FRAGMENT */))
+    ], 2 /* CLASS */),
+    ($data.notice)
+      ? (openBlock(), createBlock(_component_NcNoteCard, {
+          key: 0,
+          type: $data.noticeType,
+          "data-testid": "cn-settings-form-notice"
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString($data.notice), 1 /* TEXT */)
+          ]),
+          _: 1 /* STABLE */
+        }, 8 /* PROPS */, ["type"]))
+      : createCommentVNode("v-if", true),
+    (!$options.readOnly)
+      ? (openBlock(), createElementBlock("div", _hoisted_11, [
+          createVNode(_component_NcButton, {
+            variant: "primary",
+            type: "submit",
+            disabled: $data.saving,
+            "data-testid": "cn-settings-form-save"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString($options.saveLabel), 1 /* TEXT */)
+            ]),
+            _: 1 /* STABLE */
+          }, 8 /* PROPS */, ["disabled"])
+        ]))
+      : createCommentVNode("v-if", true)
+  ], 32 /* NEED_HYDRATION */))
+}
+
+export { render };
+//# sourceMappingURL=CnSettingsFormWidget.vue3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CnSettingsFormWidget.vue3.js","sources":["../../../../src/components/CnSettingsFormWidget/CnSettingsFormWidget.vue?vue&type=template&id=731c450f&lang.js"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<form class=\"cn-settings-form\"\n\t\tdata-testid=\"cn-settings-form\"\n\t\tnovalidate\n\t\t@submit.prevent=\"save\">\n\t\t<div class=\"cn-settings-form__grid\" :class=\"`cn-settings-form__grid--${columns}`\">\n\t\t\t<div\n\t\t\t\tv-for=\"field in fields\"\n\t\t\t\t:key=\"field.key\"\n\t\t\t\tclass=\"cn-settings-form__field\"\n\t\t\t\t:class=\"{ 'cn-settings-form__field--wide': field.wide }\"\n\t\t\t\t:data-testid=\"`cn-settings-form-field-${field.key}`\">\n\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\tv-if=\"field.type === 'switch'\"\n\t\t\t\t\tv-model=\"form[field.key]\"\n\t\t\t\t\ttype=\"switch\"\n\t\t\t\t\t:disabled=\"field.readOnly\">\n\t\t\t\t\t{{ field.label }}\n\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t<template v-else>\n\t\t\t\t\t<label class=\"cn-settings-form__label\" :for=\"inputId(field)\">{{ field.label }}</label>\n\t\t\t\t\t<div v-if=\"field.type === 'file'\" class=\"cn-settings-form__file\" :data-testid=\"`cn-settings-form-file-${field.key}`\">\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t:id=\"inputId(field)\"\n\t\t\t\t\t\t\tclass=\"cn-settings-form__control cn-settings-form__control--file\"\n\t\t\t\t\t\t\t:class=\"{ 'cn-settings-form__control--placeholder': !form[field.key] }\">\n\t\t\t\t\t\t\t{{ form[field.key] ? fileName(form[field.key]) : field.placeholder }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<NcButton\n\t\t\t\t\t\t\tv-if=\"!field.readOnly\"\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t:aria-describedby=\"inputId(field)\"\n\t\t\t\t\t\t\t:data-testid=\"`cn-settings-form-choose-${field.key}`\"\n\t\t\t\t\t\t\t@click=\"chooseFile(field)\">\n\t\t\t\t\t\t\t{{ field.chooseLabel }}\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t<NcButton\n\t\t\t\t\t\t\tv-if=\"!field.readOnly && form[field.key]\"\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t:data-testid=\"`cn-settings-form-clear-${field.key}`\"\n\t\t\t\t\t\t\t@click=\"form[field.key] = ''\">\n\t\t\t\t\t\t\t{{ field.clearLabel }}\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t</div>\n\t\t\t\t\t<select\n\t\t\t\t\t\tv-else-if=\"field.type === 'select'\"\n\t\t\t\t\t\t:id=\"inputId(field)\"\n\t\t\t\t\t\tv-model=\"form[field.key]\"\n\t\t\t\t\t\tclass=\"cn-settings-form__control\"\n\t\t\t\t\t\t:disabled=\"field.readOnly\">\n\t\t\t\t\t\t<option v-for=\"option in field.options\" :key=\"String(option.value)\" :value=\"option.value\">\n\t\t\t\t\t\t\t{{ option.label }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\tv-else-if=\"field.type === 'textarea'\"\n\t\t\t\t\t\t:id=\"inputId(field)\"\n\t\t\t\t\t\tv-model=\"form[field.key]\"\n\t\t\t\t\t\tclass=\"cn-settings-form__control cn-settings-form__control--area\"\n\t\t\t\t\t\t:rows=\"field.rows\"\n\t\t\t\t\t\t:placeholder=\"field.placeholder\"\n\t\t\t\t\t\t:readonly=\"field.readOnly\" />\n\t\t\t\t\t<input\n\t\t\t\t\t\tv-else\n\t\t\t\t\t\t:id=\"inputId(field)\"\n\t\t\t\t\t\tv-model=\"form[field.key]\"\n\t\t\t\t\t\tclass=\"cn-settings-form__control\"\n\t\t\t\t\t\t:type=\"field.type === 'number' ? 'number' : 'text'\"\n\t\t\t\t\t\t:min=\"field.min\"\n\t\t\t\t\t\t:max=\"field.max\"\n\t\t\t\t\t\t:placeholder=\"field.placeholder\"\n\t\t\t\t\t\t:readonly=\"field.readOnly\"\n\t\t\t\t\t\t:aria-invalid=\"errors[field.key] ? 'true' : null\">\n\t\t\t\t</template>\n\t\t\t\t<p v-if=\"errors[field.key]\" class=\"cn-settings-form__error\" role=\"alert\">\n\t\t\t\t\t{{ errors[field.key] }}\n\t\t\t\t</p>\n\t\t\t\t<p v-else-if=\"field.hint\" class=\"cn-settings-form__hint\">\n\t\t\t\t\t{{ field.hint }}\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<NcNoteCard v-if=\"notice\" :type=\"noticeType\" data-testid=\"cn-settings-form-notice\">\n\t\t\t{{ notice }}\n\t\t</NcNoteCard>\n\n\t\t<div v-if=\"!readOnly\" class=\"cn-settings-form__actions\">\n\t\t\t<NcButton\n\t\t\t\tvariant=\"primary\"\n\t\t\t\ttype=\"submit\"\n\t\t\t\t:disabled=\"saving\"\n\t\t\t\tdata-testid=\"cn-settings-form-save\">\n\t\t\t\t{{ saveLabel }}\n\t\t\t</NcButton>\n\t\t</div>\n\t</form>\n</template>\n\n<script>\nimport { FilePickerClosed, getFilePickerBuilder } from '@nextcloud/dialogs'\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcButton, NcCheckboxRadioSwitch, NcNoteCard } from '@nextcloud/vue'\nimport { changedFields, objectUrlOf, patchObject } from '../../utils/objectWrite.js'\nimport { readPath } from '../../utils/readPath.js'\nimport { serverErrorMessage } from '../../utils/serverErrorMessage.js'\n\n// The native file-picker modal ships its chrome styles here; without this the\n// spawned picker renders unstyled. Rules are scoped to the picker/dialog classes.\nimport '@nextcloud/dialogs/style.css'\n\nconst TYPES = ['text', 'textarea', 'select', 'switch', 'number', 'file']\n\nlet uid = 0\n\n/**\n * CnSettingsFormWidget — the `settings-form` widget: fields of the CURRENT\n * object as a one- or two-column grid of framed inputs with light labels and\n * hints, saved by ONE PATCH of the fields that changed since the last save.\n *\n * \"Last save\" is the baseline this widget keeps: a save moves it forward, so\n * editing a field back to the value the page loaded with, after a save, still\n * counts as a change (comparing against the loaded object skipped that PATCH).\n *\n * @spec openspec/changes/abstract-settings-form/specs/settings-form/spec.md\n */\nexport default {\n\tname: 'CnSettingsFormWidget',\n\n\tcomponents: { NcButton, 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 * - `fields` (required) — `[{ key, label, type?: 'text'|'textarea'|'select'|'switch'|'number'|'file', picker?: { title?, mimeTypes?, startAt?, valueTemplate? }, chooseLabel?, clearLabel?, hint?, placeholder?, options?: [{ value, label }], required?, pattern?, patternMessage?, min?, max?, rows?, wide?, readOnly? }]`; `key` is a top-level field of the object.\n\t\t * - `columns` — 1 or 2 (default 2).\n\t\t * - `saveLabel`, `savedText`, `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\tuid,\n\t\t\tform: {},\n\t\t\tbaseline: {},\n\t\t\terrors: {},\n\t\t\tsaving: false,\n\t\t\tnotice: '',\n\t\t\tnoticeType: 'success',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * The configured fields, normalised and translated.\n\t\t *\n\t\t * @return {Array<object>}\n\t\t */\n\t\tfields() {\n\t\t\tconst list = Array.isArray(this.content.fields) ? this.content.fields : []\n\t\t\treturn list\n\t\t\t\t.filter((field) => field && field.key)\n\t\t\t\t.map((field) => ({\n\t\t\t\t\t...field,\n\t\t\t\t\ttype: TYPES.includes(field.type) ? field.type : 'text',\n\t\t\t\t\tlabel: this.tr(field.label || field.key),\n\t\t\t\t\thint: this.tr(field.hint || ''),\n\t\t\t\t\tplaceholder: this.tr(field.placeholder || ''),\n\t\t\t\t\tchooseLabel: this.tr(field.chooseLabel || 'Choose a file'),\n\t\t\t\t\tclearLabel: this.tr(field.clearLabel || 'Remove'),\n\t\t\t\t\trows: field.rows || 3,\n\t\t\t\t\twide: field.wide === true || field.type === 'textarea',\n\t\t\t\t\treadOnly: this.readOnly || field.readOnly === true,\n\t\t\t\t\toptions: (Array.isArray(field.options) ? field.options : []).map((option) => (\n\t\t\t\t\t\ttypeof option === 'object' && option !== null\n\t\t\t\t\t\t\t? { value: option.value, label: this.tr(String(option.label ?? option.value)) }\n\t\t\t\t\t\t\t: { value: option, label: this.tr(String(option)) }\n\t\t\t\t\t)),\n\t\t\t\t}))\n\t\t},\n\n\t\tcolumns() {\n\t\t\treturn this.content.columns === 1 ? 1 : 2\n\t\t},\n\n\t\treadOnly() {\n\t\t\treturn this.content.readOnly === true\n\t\t},\n\n\t\tsaveLabel() {\n\t\t\treturn this.tr(this.content.saveLabel || 'Save')\n\t\t},\n\n\t\t/** The object URL the form is saved to, or '' when it is not known. */\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(true)\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\tinputId(field) {\n\t\t\treturn `cn-settings-form-${this.uid}-${field.key}`\n\t\t},\n\n\t\t/**\n\t\t * The name shown for a stored file value: its last path segment.\n\t\t *\n\t\t * @param {string} value The stored value.\n\t\t * @return {string}\n\t\t */\n\t\tfileName(value) {\n\t\t\tconst text = String(value)\n\t\t\treturn text.split('/').filter(Boolean).pop() || text\n\t\t},\n\n\t\t/**\n\t\t * Open the Nextcloud file picker and take the chosen file as the value.\n\t\t * `field.picker` = `{ title?, mimeTypes?, startAt?, valueTemplate? }`; the\n\t\t * template's `{path}`, `{fileid}` and `{name}` are filled from the chosen\n\t\t * node (default `{path}`).\n\t\t *\n\t\t * @param {object} field The field.\n\t\t * @return {Promise<void>}\n\t\t * @spec openspec/changes/abstract-settings-form-file/specs/settings-form/spec.md#requirement-a-file-field-takes-a-file-from-the-nextcloud-picker\n\t\t */\n\t\tasync chooseFile(field) {\n\t\t\tconst picker = field.picker || {}\n\t\t\tlet builder = getFilePickerBuilder(this.tr(picker.title || field.label))\n\t\t\t\t.setMultiSelect(false)\n\t\t\t\t.allowDirectories(false)\n\t\t\t\t.startAt(picker.startAt || '/')\n\t\t\t\t.addButton({ label: t('nextcloud-vue', 'Choose'), type: 'primary', callback: () => {} })\n\t\t\tif (Array.isArray(picker.mimeTypes) && picker.mimeTypes.length > 0) {\n\t\t\t\tbuilder = builder.setMimeTypeFilter(picker.mimeTypes)\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tconst nodes = await builder.build().pickNodes()\n\t\t\t\tconst node = Array.isArray(nodes) ? nodes[0] : nodes\n\t\t\t\tif (!node) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.form[field.key] = String(picker.valueTemplate || '{path}').replace(/\\{(path|fileid|name)\\}/g, (match, part) => {\n\t\t\t\t\tconst value = part === 'name' ? (node.basename || this.fileName(node.path)) : node[part]\n\t\t\t\t\treturn value === undefined || value === null ? '' : String(value)\n\t\t\t\t})\n\t\t\t} catch (e) {\n\t\t\t\tif (e instanceof FilePickerClosed) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.noticeType = 'error'\n\t\t\t\tthis.notice = this.tr('The file picker could not be opened.')\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * The stored value of a field as the input holds it.\n\t\t *\n\t\t * @param {object} field The field.\n\t\t * @return {unknown}\n\t\t */\n\t\tstored(field) {\n\t\t\tconst value = readPath(this.objectData || {}, field.key)\n\t\t\tif (field.type === 'switch') {\n\t\t\t\treturn value === true\n\t\t\t}\n\t\t\treturn value === undefined || value === null ? '' : value\n\t\t},\n\n\t\t/**\n\t\t * Take the object's values as the new baseline; a field the person has\n\t\t * not touched follows it, a touched one keeps the typed value.\n\t\t *\n\t\t * @param {boolean} [first] Whether this is the first read.\n\t\t */\n\t\tadopt(first = false) {\n\t\t\tconst baseline = {}\n\t\t\tconst form = {}\n\t\t\tfor (const field of this.fields) {\n\t\t\t\tbaseline[field.key] = this.stored(field)\n\t\t\t\tconst untouched = first || JSON.stringify(this.form[field.key]) === JSON.stringify(this.baseline[field.key])\n\t\t\t\tform[field.key] = untouched ? baseline[field.key] : this.form[field.key]\n\t\t\t}\n\t\t\tthis.baseline = baseline\n\t\t\tthis.form = form\n\t\t},\n\n\t\t/**\n\t\t * The value to send for a field: numbers as numbers, an empty value as null.\n\t\t *\n\t\t * @param {object} field The field.\n\t\t * @return {unknown}\n\t\t */\n\t\toutgoing(field) {\n\t\t\tconst value = this.form[field.key]\n\t\t\tif (field.type === 'number') {\n\t\t\t\treturn value === '' || value === null || value === undefined ? null : Number(value)\n\t\t\t}\n\t\t\tif (field.type === 'switch') {\n\t\t\t\treturn value === true\n\t\t\t}\n\t\t\tif (typeof value === 'string') {\n\t\t\t\treturn value.trim() === '' ? null : value.trim()\n\t\t\t}\n\t\t\treturn value\n\t\t},\n\n\t\t/**\n\t\t * Check required, number range and pattern before any write.\n\t\t *\n\t\t * @return {object} Error text by field key.\n\t\t */\n\t\tvalidate() {\n\t\t\tconst errors = {}\n\t\t\tfor (const field of this.fields) {\n\t\t\t\tif (field.type === 'switch' || field.readOnly) {\n\t\t\t\t\tcontinue\n\t\t\t\t}\n\t\t\t\tconst value = this.outgoing(field)\n\t\t\t\tconst empty = value === null || value === undefined || value === ''\n\t\t\t\tif (empty) {\n\t\t\t\t\tif (field.required) {\n\t\t\t\t\t\terrors[field.key] = this.tr('Fill this in.')\n\t\t\t\t\t}\n\t\t\t\t\tcontinue\n\t\t\t\t}\n\t\t\t\tif (field.type === 'number') {\n\t\t\t\t\tif (Number.isNaN(value) || (field.min !== undefined && value < field.min) || (field.max !== undefined && value > field.max)) {\n\t\t\t\t\t\terrors[field.key] = this.tr('This number is not valid.')\n\t\t\t\t\t}\n\t\t\t\t} else if (field.pattern && !new RegExp(field.pattern).test(String(value))) {\n\t\t\t\t\terrors[field.key] = this.tr(field.patternMessage || 'This value is not valid.')\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn errors\n\t\t},\n\n\t\t/**\n\t\t * Save: PATCH the fields that differ from the last saved values.\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t * @spec openspec/changes/abstract-settings-form/specs/settings-form/spec.md#requirement-a-settings-form-saves-only-what-changed\n\t\t */\n\t\tasync save() {\n\t\t\tthis.errors = this.validate()\n\t\t\tthis.notice = ''\n\t\t\tif (Object.keys(this.errors).length > 0) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (!this.objectUrl) {\n\t\t\t\tthis.noticeType = 'error'\n\t\t\t\tthis.notice = this.tr('This form cannot be saved here.')\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst next = {}\n\t\t\tconst compare = {}\n\t\t\tfor (const field of this.fields) {\n\t\t\t\tif (!field.readOnly) {\n\t\t\t\t\tnext[field.key] = this.outgoing(field)\n\t\t\t\t\tcompare[field.key] = this.baseline[field.key] === '' ? null : this.baseline[field.key]\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst patch = changedFields(compare, next)\n\t\t\tthis.saving = true\n\t\t\ttry {\n\t\t\t\tif (Object.keys(patch).length > 0) {\n\t\t\t\t\tconst data = await patchObject(this.objectUrl, patch)\n\t\t\t\t\tconst baseline = { ...this.baseline }\n\t\t\t\t\tconst form = { ...this.form }\n\t\t\t\t\tfor (const key of Object.keys(patch)) {\n\t\t\t\t\t\tconst field = this.fields.find((candidate) => candidate.key === key)\n\t\t\t\t\t\tconst written = data[key] !== undefined ? data[key] : patch[key]\n\t\t\t\t\t\tbaseline[key] = field.type === 'switch' ? written === true : (written === null ? '' : written)\n\t\t\t\t\t\tform[key] = baseline[key]\n\t\t\t\t\t}\n\t\t\t\t\tthis.baseline = baseline\n\t\t\t\t\tthis.form = form\n\t\t\t\t}\n\t\t\t\tthis.noticeType = 'success'\n\t\t\t\tthis.notice = this.tr(this.content.savedText || 'Saved.')\n\t\t\t\t/**\n\t\t\t\t * @event saved The changed fields were written.\n\t\t\t\t * @type {{patch: object}}\n\t\t\t\t */\n\t\t\t\tthis.$emit('saved', { patch })\n\t\t\t} catch (e) {\n\t\t\t\tthis.noticeType = 'error'\n\t\t\t\tthis.notice = serverErrorMessage(e)\n\t\t\t} finally {\n\t\t\t\tthis.saving = false\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-settings-form {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 14px;\n\tmin-width: 0;\n}\n\n.cn-settings-form__grid {\n\tdisplay: grid;\n\tgap: 14px 16px;\n\tgrid-template-columns: minmax(0, 1fr);\n}\n\n.cn-settings-form__grid--2 {\n\tgrid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n.cn-settings-form__field {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\tmin-width: 0;\n}\n\n.cn-settings-form__field--wide {\n\tgrid-column: 1 / -1;\n}\n\n.cn-settings-form__label {\n\tfont-size: 13px;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n}\n\n.cn-settings-form__control {\n\twidth: 100%;\n\tbox-sizing: border-box;\n\theight: var(--cn-board-control-height, 40px);\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-settings-form__file {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: 8px;\n}\n\n.cn-settings-form__control--file {\n\tdisplay: inline-flex;\n\talign-items: center;\n\twidth: auto;\n\tmin-width: 120px;\n\tflex: 0 1 auto;\n\toverflow-wrap: anywhere;\n}\n\n.cn-settings-form__control--placeholder {\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.cn-settings-form__control--area {\n\theight: auto;\n\tpadding: 10px 12px;\n\tresize: vertical;\n}\n\n.cn-settings-form__control:focus-visible {\n\toutline: 2px solid var(--color-primary-element);\n\toutline-offset: 1px;\n}\n\n.cn-settings-form__hint,\n.cn-settings-form__error {\n\tmargin: 0;\n\tfont-size: 12px;\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.cn-settings-form__error {\n\tcolor: var(--color-error-text);\n}\n\n.cn-settings-form__actions {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n}\n\n@media (max-width: 640px) {\n\t.cn-settings-form__grid--2 {\n\t\tgrid-template-columns: minmax(0, 1fr);\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_Fragment","_renderList","_createBlock","_createTextVNode","_toDisplayString","_createElementVNode","_openBlock"],"mappings":"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"}

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

@@ -0,0 +1,27 @@
+import __sfc_main from './CnSettingsFormWidget.vue.js';
+import { registerDashboardWidget } from '../CnWidgetGrid/dashboardWidgetRegistry.js';
+
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * CnSettingsFormWidget — self-registers the `settings-form` widget type (framed
+ * inputs for fields of the current object, saved by PATCH of the changed
+ * fields) into the shared dashboardWidgetRegistry at module load.
+ */
+
+
+registerDashboardWidget('settings-form', {
+	renderer: __sfc_main,
+	form: null,
+	defaultContent: {
+		fields: [],
+		columns: 2,
+	},
+	displayName: 'Settings form',
+	icon: 'FormTextbox',
+	surfaces: ['detail-page'],
+});
+
+export { __sfc_main as CnSettingsFormWidget, __sfc_main as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/CnSettingsFormWidget/index.js"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2026 Conduction B.V.\n * SPDX-License-Identifier: EUPL-1.2\n *\n * CnSettingsFormWidget — self-registers the `settings-form` widget type (framed\n * inputs for fields of the current object, saved by PATCH of the changed\n * fields) into the shared dashboardWidgetRegistry at module load.\n */\n\nimport CnSettingsFormWidget from './CnSettingsFormWidget.vue'\nimport { registerDashboardWidget } from '../CnWidgetGrid/dashboardWidgetRegistry.js'\n\nregisterDashboardWidget('settings-form', {\n\trenderer: CnSettingsFormWidget,\n\tform: null,\n\tdefaultContent: {\n\t\tfields: [],\n\t\tcolumns: 2,\n\t},\n\tdisplayName: 'Settings form',\n\ticon: 'FormTextbox',\n\tsurfaces: ['detail-page'],\n})\n\nexport { CnSettingsFormWidget }\nexport default CnSettingsFormWidget\n"],"names":["CnSettingsFormWidget"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA,uBAAuB,CAAC,eAAe,EAAE;AACzC,CAAC,QAAQ,EAAEA,UAAoB;AAC/B,CAAC,IAAI,EAAE,IAAI;AACX,CAAC,cAAc,EAAE;AACjB,EAAE,MAAM,EAAE,EAAE;AACZ,EAAE,OAAO,EAAE,CAAC;AACZ,EAAE;AACF,CAAC,WAAW,EAAE,eAAe;AAC7B,CAAC,IAAI,EAAE,aAAa;AACpB,CAAC,QAAQ,EAAE,CAAC,aAAa,CAAC;AAC1B,CAAC;;;;"}

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

@@ -6,8 +6,10 @@ import __sfc_main$1 from '../../dialogs/CnTransitionInputDialog.vue.js';
 import __sfc_main from '../CnTimelineStages/CnTimelineStages.vue.js';
 import { useEndpointSource, getByPath } from '../../composables/useEndpointSource.js';
 import { actionsByTarget, isBlockedAction, actionNote, declaresInputs, performTransition, transitionError, readAvailableActions } from '../../composables/useLifecycleTransitions.js';
+import { normalizeLook } from '../../composables/useLook.js';
 import { useObjectStore } from '../../store/useObjectStore.js';
 import { resolveObjectOpType } from '../../utils/actionsDispatcher.js';
+import { formatBoardDate } from '../../utils/boardDate.js';
 import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js';
 import { resolveFilterTokens, dropOptionalUnresolved, hasUnresolvedTokens } from '../../utils/resolveFilterTokens.js';
 import { normalizeStages, stageSavePayload } from './stagesModel.js';
@@ -83,6 +85,14 @@ function userError(message) {
  *   labelField?, descriptionField?, finalField?, limit? }`, an OpenRegister
  *   query whose filter takes the same tokens.
  *
+ * `datesSource`: `{ url, method?, params?, path?, idField?, dateField? }`, an
+ * endpoint (same token grammar) answering the date the record reached each
+ * stage, when the stage list does not carry it: the case type's statuses list
+ * the steps, `/blueprint?case=@objectId` says when this case reached them.
+ * Read once, merged into the steps by `idField` (default `id`) with the value
+ * at `dateField` (default `reachedAt`); a date it does not give falls back to
+ * the stage list's own `dateField`. The bars variant draws it.
+ *
  * `finalField` marks the stages that close the record, which the timeline
  * draws differently. It grants nothing either.
  *
@@ -175,7 +185,7 @@ var script = {
 		 * `label`, the placement's own title, so a titled card does not have to
 		 * repeat itself, and then to "Stages".
 		 *
-		 * @type {{currentField?: string, stagesEndpoint?: object, stagesSource?: object, transition?: object, unreachableReason?: string, orientation?: ('horizontal'|'vertical'), size?: ('medium'|'small'), ariaLabel?: string, label?: string, variant?: ('dots'|'bars')}}
+		 * @type {{currentField?: string, stagesEndpoint?: object, stagesSource?: object, transition?: object, unreachableReason?: string, orientation?: ('horizontal'|'vertical'), size?: ('medium'|'small'), ariaLabel?: string, label?: string, variant?: ('dots'|'bars'), datesSource?: {url: string, method?: string, params?: object, path?: string, idField?: string, dateField?: string}}}
 		 */
 		content: {
 			type: Object,
@@ -256,6 +266,8 @@ var script = {
 		const workspaceRaw = inject('cnWorkspaceContext', ref({}));
 		const appConfigRaw = inject('cnAppConfig', ref({}));
 		const cnTranslate = inject('cnTranslate', (key) => key);
+		// The app's look (`nextcloud` or `board`), provided by CnAppRoot or CnPageRenderer.
+		const cnLook = inject('cnLook', 'nextcloud');
 
 		/**
 		 * The token context: the bound record, its id, and the page context.
@@ -281,15 +293,24 @@ var script = {
 			return (cfg && cfg.url) ? { url: cfg.url, method: cfg.method, params: cfg.params } : null
 		}, { ctx: tokenCtx });
 
+		// The dates the record reached each stage, when they live apart from
+		// the stage list (`datesSource`): one read, merged into the steps by id.
+		const datesRead = useEndpointSource(() => {
+			const cfg = props.content?.datesSource;
+			return (cfg && cfg.url) ? { url: cfg.url, method: cfg.method, params: cfg.params } : null
+		}, { ctx: tokenCtx });
+
 		return {
 			detailCtxRaw,
 			objectCtxRaw,
 			cnTranslate,
+			cnLook,
 			tokenCtx,
 			stagesBody: stagesRead.data,
 			stagesBodyLoading: stagesRead.loading,
 			stagesBodyError: stagesRead.error,
 			stagesBodyBlocked: stagesRead.blocked,
+			datesBody: datesRead.data,
 		}
 	},
 
@@ -433,6 +454,42 @@ var script = {
 			return normalizeStages(rows, { ...cfg, orderField })
 		},
 
+		/**
+		 * The reached dates by stage id, from `datesSource`: the rows at its
+		 * `path` (or the response itself when it is a list), keyed by
+		 * `idField` (default `id`), the value at `dateField` (default
+		 * `reachedAt`). Empty without the option, while it loads, or when it
+		 * failed: the steps then show the stage list's own dates.
+		 *
+		 * @return {{[id: string]: string}} Date by stage id.
+		 * @spec openspec/changes/screens-stage-dates-source/specs/stage-dates-source/spec.md#requirement-the-reached-dates-can-come-from-their-own-endpoint
+		 */
+		stageDates() {
+			const cfg = this.content.datesSource;
+			const body = this.datesBody;
+			if (!cfg || !cfg.url || body === null || body === undefined) {
+				return {}
+			}
+			const rows = Array.isArray(body) ? body : getByPath(body, cfg.path || '');
+			if (!Array.isArray(rows)) {
+				return {}
+			}
+			const idField = cfg.idField || 'id';
+			const dateField = cfg.dateField || 'reachedAt';
+			const out = {};
+			for (const row of rows) {
+				if (!row || typeof row !== 'object') {
+					continue
+				}
+				const id = getByPath(row, idField);
+				const date = getByPath(row, dateField);
+				if (id !== null && id !== undefined && id !== '' && typeof date === 'string' && date !== '') {
+					out[String(id)] = date;
+				}
+			}
+			return out
+		},
+
 		/**
 		 * Whether the stage list is still on its way.
 		 *
@@ -614,7 +671,7 @@ var script = {
 				}
 				return {
 					...stage,
-					date: this.stages[index]?.date || '',
+					date: this.barDate(this.stageDates[stage.id] || this.stages[index]?.date || '', state),
 					state,
 					clickable: this.interactive && state !== 'current',
 				}
@@ -710,6 +767,28 @@ var script = {
 	},
 
 	methods: {
+		/**
+		 * A bar's date line. Under the board look a date value reads in the
+		 * board's short form ("3 okt"), and the current step's reads "sinds
+		 * 4 okt", as DqZaak draws it. Any other value, and every value outside
+		 * the board look, shows as written.
+		 *
+		 * @param {string} value The `dateField` value of the stage row.
+		 * @param {string} state The bar state (`done`, `current`, `todo`).
+		 * @return {string} The date line, or ''.
+		 * @spec openspec/changes/screens-stage-bar-dates-parity/specs/stage-bar-dates/spec.md#requirement-a-bar-date-reads-as-the-board-draws-it
+		 */
+		barDate(value, state) {
+			if (!value || normalizeLook(this.cnLook) !== 'board') {
+				return value
+			}
+			const short = formatBoardDate(value);
+			if (short === '') {
+				return value
+			}
+			return state === 'current' ? translate('nextcloud-vue', 'since {date}', { date: short }) : short
+		},
+
 		/**
 		 * Translate a library string.
 		 *