npm - @conduction/nextcloud-vue - Versions diffs - 2.92.0 → 2.94.0 - Mend

@conduction/nextcloud-vue 2.92.0 → 2.94.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (199) hide show

package/dist/esm/components/CnUserSettingsDialog/CnUserSettingsDialog.vue3.js ADDED Viewed

@@ -0,0 +1,93 @@
+import { resolveComponent, openBlock, createBlock, normalizeStyle, withCtx, createElementVNode, toDisplayString, createVNode, createTextVNode, createElementBlock, Fragment, renderList, normalizeClass, withModifiers, createCommentVNode, renderSlot } from 'vue';
+const _hoisted_1 = { class: "cn-user-settings-dialog__body" };
+const _hoisted_2 = ["aria-label"];
+const _hoisted_3 = ["href", "aria-current", "data-testid", "onClick"];
+const _hoisted_4 = {
+  key: 0,
+  class: "cn-user-settings-dialog__nav-icon",
+  "aria-hidden": "true"
+};
+const _hoisted_5 = { class: "cn-user-settings-dialog__sections" };
+const _hoisted_6 = {
+  class: "cn-user-settings-dialog__note",
+  "data-testid": "cn-user-settings-note"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CnVNodes = resolveComponent("CnVNodes");
+  const _component_NcButton = resolveComponent("NcButton");
+  const _component_CnDialog = resolveComponent("CnDialog");
+  return (openBlock(), createBlock(_component_CnDialog, {
+    class: "cn-user-settings-dialog",
+    name: $props.title,
+    look: "board",
+    width: "wizard",
+    eyebrow: $props.eyebrow,
+    subtitle: $props.subtitle,
+    open: $props.open,
+    style: normalizeStyle($options.eyebrowStyle),
+    "data-testid": "cn-user-settings-dialog",
+    "onUpdate:open": $options.onUpdateOpen,
+    onClosing: $options.close
+  }, {
+    actions: withCtx(() => [
+      createElementVNode("p", _hoisted_6, toDisplayString($options.footerNote), 1 /* TEXT */),
+      createVNode(_component_NcButton, {
+        variant: "secondary",
+        "data-testid": "cn-user-settings-close",
+        onClick: $options.close
+      }, {
+        default: withCtx(() => [
+          createTextVNode(toDisplayString($options.closeLabel), 1 /* TEXT */)
+        ]),
+        _: 1 /* STABLE */
+      }, 8 /* PROPS */, ["onClick"])
+    ]),
+    default: withCtx(() => [
+      createElementVNode("div", _hoisted_1, [
+        ($data.sections.length > 0)
+          ? (openBlock(), createElementBlock("nav", {
+              key: 0,
+              class: "cn-user-settings-dialog__nav",
+              "aria-label": $options.navLabel,
+              "data-testid": "cn-user-settings-nav"
+            }, [
+              createElementVNode("ul", null, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList($data.sections, (section) => {
+                  return (openBlock(), createElementBlock("li", {
+                    key: section.id
+                  }, [
+                    createElementVNode("a", {
+                      href: `#settings-section_${section.id}`,
+                      class: normalizeClass(["cn-user-settings-dialog__nav-link", { 'cn-user-settings-dialog__nav-link--active': section.id === $data.selected }]),
+                      "aria-current": section.id === $data.selected ? 'true' : undefined,
+                      "data-testid": `cn-user-settings-nav-${section.id}`,
+                      onClick: withModifiers($event => ($options.selectSection(section.id)), ["prevent"])
+                    }, [
+                      (section.icon)
+                        ? (openBlock(), createElementBlock("span", _hoisted_4, [
+                            createVNode(_component_CnVNodes, {
+                              vnodes: section.icon
+                            }, null, 8 /* PROPS */, ["vnodes"])
+                          ]))
+                        : createCommentVNode("v-if", true),
+                      createElementVNode("span", null, toDisplayString(section.name), 1 /* TEXT */)
+                    ], 10 /* CLASS, PROPS */, _hoisted_3)
+                  ]))
+                }), 128 /* KEYED_FRAGMENT */))
+              ])
+            ], 8 /* PROPS */, _hoisted_2))
+          : createCommentVNode("v-if", true),
+        createElementVNode("div", _hoisted_5, [
+          renderSlot(_ctx.$slots, "default")
+        ])
+      ])
+    ]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["name", "eyebrow", "subtitle", "open", "style", "onUpdate:open", "onClosing"]))
+}
+export { render };
+//# sourceMappingURL=CnUserSettingsDialog.vue3.js.map

package/dist/esm/components/CnUserSettingsDialog/CnUserSettingsDialog.vue3.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CnUserSettingsDialog.vue3.js","sources":["../../../../src/components/CnUserSettingsDialog/CnUserSettingsDialog.vue?vue&type=template&id=8ebfd3c8&lang.js"],"sourcesContent":["\n<template>\n\t<CnDialog\n\t\tclass=\"cn-user-settings-dialog\"\n\t\t:name=\"title\"\n\t\tlook=\"board\"\n\t\twidth=\"wizard\"\n\t\t:eyebrow=\"eyebrow\"\n\t\t:subtitle=\"subtitle\"\n\t\t:open=\"open\"\n\t\t:style=\"eyebrowStyle\"\n\t\tdata-testid=\"cn-user-settings-dialog\"\n\t\t@update:open=\"onUpdateOpen\"\n\t\t@closing=\"close\">\n\t\t<div class=\"cn-user-settings-dialog__body\">\n\t\t\t<nav\n\t\t\t\tv-if=\"sections.length > 0\"\n\t\t\t\tclass=\"cn-user-settings-dialog__nav\"\n\t\t\t\t:aria-label=\"navLabel\"\n\t\t\t\tdata-testid=\"cn-user-settings-nav\">\n\t\t\t\t<ul>\n\t\t\t\t\t<li v-for=\"section in sections\" :key=\"section.id\">\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t:href=\"`#settings-section_${section.id}`\"\n\t\t\t\t\t\t\tclass=\"cn-user-settings-dialog__nav-link\"\n\t\t\t\t\t\t\t:class=\"{ 'cn-user-settings-dialog__nav-link--active': section.id === selected }\"\n\t\t\t\t\t\t\t:aria-current=\"section.id === selected ? 'true' : undefined\"\n\t\t\t\t\t\t\t:data-testid=\"`cn-user-settings-nav-${section.id}`\"\n\t\t\t\t\t\t\t@click.prevent=\"selectSection(section.id)\">\n\t\t\t\t\t\t\t<span v-if=\"section.icon\" class=\"cn-user-settings-dialog__nav-icon\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t<CnVNodes :vnodes=\"section.icon\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span>{{ section.name }}</span>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t\t<div class=\"cn-user-settings-dialog__sections\">\n\t\t\t\t\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t\t<template #actions>\n\t\t\t<p class=\"cn-user-settings-dialog__note\" data-testid=\"cn-user-settings-note\">\n\t\t\t\t{{ footerNote }}\n\t\t\t</p>\n\t\t\t<NcButton variant=\"secondary\" data-testid=\"cn-user-settings-close\" @click=\"close\">\n\t\t\t\t{{ closeLabel }}\n\t\t\t</NcButton>\n\t\t</template>\n\t</CnDialog>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcButton } from '@nextcloud/vue'\nimport { markRaw } from 'vue'\nimport CnDialog from '../CnDialog/CnDialog.vue'\n\n/**\n * The key NcAppSettingsSection injects to register itself with its dialog\n * (`Symbol.for`, so the same symbol `@nextcloud/vue` provides).\n */\nconst REGISTRATION_KEY = Symbol.for('NcAppSettingsDialog:registration')\n\n/** Renders a section's icon vnodes as they were registered. */\nconst CnVNodes = {\n\tname: 'CnVNodes',\n\tprops: { vnodes: { type: [Array, Object], default: null } },\n\trender() {\n\t\treturn this.vnodes\n\t},\n}\n\n/**\n * CnUserSettingsDialog - the user settings dialog in the board look (board\n * PqPersoonlijk): eyebrow, title and subtitle, a left navigation listing the\n * sections with their icons, the sections themselves, and a footer with a\n * note that changes save straight away and a Close button.\n *\n * The sections stay the app's: any `NcAppSettingsSection` in the default slot\n * registers itself with this dialog exactly as it does with\n * `NcAppSettingsDialog`, with its name, order and `#icon` slot. CnAppRoot\n * renders this dialog instead of `NcAppSettingsDialog` under the board look.\n *\n * @spec openspec/changes/user-settings-board-dialog/specs/user-settings-board-dialog/spec.md#requirement-the-user-settings-dialog-takes-the-board-look\n *\n * @event update:open Emitted with `false` when the dialog closes.\n */\nexport default {\n\tname: 'CnUserSettingsDialog',\n\n\tcomponents: { CnDialog, CnVNodes, NcButton },\n\n\tprovide() {\n\t\treturn {\n\t\t\t[REGISTRATION_KEY]: {\n\t\t\t\tregisterSection: this.registerSection,\n\t\t\t\tunregisterSection: this.unregisterSection,\n\t\t\t},\n\t\t}\n\t},\n\n\tprops: {\n\t\t/** Whether the dialog is open. */\n\t\topen: { type: Boolean, default: false },\n\t\t/** Dialog title; also its accessible name. */\n\t\ttitle: { type: String, required: true },\n\t\t/** Context line above the title. */\n\t\teyebrow: { type: String, default: () => t('nextcloud-vue', 'Your account') },\n\t\t/** Sentence under the title. */\n\t\tsubtitle: { type: String, default: () => t('nextcloud-vue', 'Only for you. Colleagues keep their own settings.') },\n\t\t/** The app's name, after the footer note. */\n\t\tappName: { type: String, default: '' },\n\t},\n\n\temits: ['update:open'],\n\n\tdata() {\n\t\treturn {\n\t\t\tsections: [],\n\t\t\tselected: '',\n\t\t\tpicked: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/** @return {object} The board's eyebrow: muted, in sentence case. */\n\t\teyebrowStyle() {\n\t\t\treturn { '--cn-dialog-eyebrow-transform': 'none', '--cn-dialog-eyebrow-color': 'var(--color-text-maxcontrast)' }\n\t\t},\n\n\t\t/** @return {string} The navigation's accessible name. */\n\t\tnavLabel() {\n\t\t\treturn t('nextcloud-vue', 'Sections of the settings')\n\t\t},\n\n\t\t/** @return {string} The footer note, with the app's name when known. */\n\t\tfooterNote() {\n\t\t\tconst note = t('nextcloud-vue', 'Changes are saved straight away')\n\t\t\treturn this.appName ? `${note} · ${this.appName}` : note\n\t\t},\n\n\t\t/** @return {string} The Close button label. */\n\t\tcloseLabel() {\n\t\t\treturn t('nextcloud-vue', 'Close')\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Add a section to the navigation, kept in `order`; a section\n\t\t * without one goes last. Until the reader picks one, the first\n\t\t * section is current.\n\t\t *\n\t\t * @param {string} id The section id.\n\t\t * @param {string} name The section name.\n\t\t * @param {number} [order] The section's place.\n\t\t * @param {Array} [icon] The section's icon vnodes.\n\t\t */\n\t\tregisterSection(id, name, order, icon) {\n\t\t\tconst rest = this.sections.filter((section) => section.id !== id)\n\t\t\tconst place = typeof order === 'number' ? order : Math.max(0, ...rest.map((section) => section.order)) + 1\n\t\t\tthis.sections = [...rest, { id, name, order: place, icon: icon ? markRaw(icon) : null }].sort((a, b) => a.order - b.order)\n\t\t\tif (!this.picked) {\n\t\t\t\tthis.selected = this.sections[0].id\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Remove a section from the navigation.\n\t\t *\n\t\t * @param {string} id The section id.\n\t\t */\n\t\tunregisterSection(id) {\n\t\t\tthis.sections = this.sections.filter((section) => section.id !== id)\n\t\t\tif (this.selected === id) {\n\t\t\t\tthis.selected = this.sections.length > 0 ? this.sections[0].id : ''\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Mark a section current and scroll it into view.\n\t\t *\n\t\t * @param {string} id The section id.\n\t\t */\n\t\tselectSection(id) {\n\t\t\tthis.picked = true\n\t\t\tthis.selected = id\n\t\t\tconst target = typeof document !== 'undefined' ? document.getElementById(`settings-section_${id}`) : null\n\t\t\tif (target && typeof target.scrollIntoView === 'function') {\n\t\t\t\ttarget.scrollIntoView({ behavior: 'smooth', block: 'start' })\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Follow NcDialog's own open state.\n\t\t *\n\t\t * @param {boolean} value Whether NcDialog is open.\n\t\t */\n\t\tonUpdateOpen(value) {\n\t\t\tif (!value) {\n\t\t\t\tthis.close()\n\t\t\t}\n\t\t},\n\n\t\t/** Close the dialog. */\n\t\tclose() {\n\t\t\t/**\n\t\t\t * @event update:open Emitted with `false` when the dialog closes (Close button, close icon, Escape).\n\t\t\t */\n\t\t\tthis.$emit('update:open', false)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-user-settings-dialog__body {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 0 24px;\n}\n\n.cn-user-settings-dialog__nav {\n\tflex: 0 0 200px;\n\twidth: 200px;\n\tpadding-top: 18px;\n}\n\n.cn-user-settings-dialog__nav ul {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n}\n\n.cn-user-settings-dialog__nav-link {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n\tmin-height: 40px;\n\tpadding: 0 12px;\n\tborder-radius: var(--border-radius-element, 8px);\n\tfont-size: 15px;\n\tcolor: var(--color-main-text);\n\ttext-decoration: none;\n}\n\n.cn-user-settings-dialog__nav-link:hover {\n\tbackground: var(--color-background-hover);\n}\n\n.cn-user-settings-dialog__nav-link:focus-visible {\n\toutline: 2px solid var(--color-primary-element);\n\toutline-offset: 2px;\n}\n\n.cn-user-settings-dialog__nav-link--active,\n.cn-user-settings-dialog__nav-link--active:hover {\n\tbackground: var(--color-primary-element-light);\n\tcolor: var(--color-primary-element-light-text);\n\tfont-weight: 600;\n}\n\n.cn-user-settings-dialog__nav-icon {\n\tdisplay: inline-flex;\n\tflex: none;\n\twidth: 18px;\n\theight: 18px;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.cn-user-settings-dialog__sections {\n\tdisplay: flex;\n\tflex: 1 1 380px;\n\tflex-direction: column;\n\tmin-width: 0;\n}\n\n.cn-user-settings-dialog__sections :deep(.app-settings-section) {\n\tmargin: 0;\n\tpadding: 18px 0;\n\tborder-top: 1px solid var(--color-border);\n}\n\n.cn-user-settings-dialog__sections :deep(.app-settings-section__name) {\n\tmargin: 0 0 12px;\n\tfont-size: 17px;\n\tfont-weight: 700;\n}\n\n.cn-user-settings-dialog__note {\n\tflex: 1 1 auto;\n\tmargin: 0;\n\tfont-size: 14px;\n\tcolor: var(--color-text-maxcontrast);\n}\n</style>\n"],"names":["_toDisplayString","_createVNode","_createElementVNode","_createElementBlock","_Fragment","_renderList","_withModifiers","_openBlock","_renderSlot"],"mappings":";;AAqBO,MAAA,UAAA,GAAA,EAAA,KAAK,EAAC,+BAAY,GAAA;;;;;AAehB,EAAA,KAAA,EAAA,mCAAA;AAAA,EAAA,aAAA,EAAA,MAAA;;AAQF,MAAA,UAAA,GAAA,EAAA,KAAA,EAAA,mCAAA,GAAA;;AAMF,EAAA,KAAM,EAAC,+BAAO;AAAA,EAAA,aAAA,EAAA,uBAAA;;;;;;;;;AAxCjB,IAAA,KAAK,EAAC,yBAAW;AAChB,IAAA,IAAI,EAAE,MAAK,CAAA,KAAA;AACZ,IAAA,IAAI,EAAC,OAAM;AACX,IAAA,KAAK,EAAC,QAAQ;AACb,IAAA,OAAO,EAAE,MAAO,CAAA,OAAA;AAChB,IAAA,QAAQ,EAAE,MAAQ,CAAA,QAAA;AAClB,IAAA,IAAI,EAAE,MAAI,CAAA,IAAA;AACV,IAAA,KAAK,iBAAE,QAAY,CAAA,YAAA,CAAA;AACnB,IAAA,aAAG,EAAA,yBAAA;mBACQ,EAAE,QAAY,CAAA,YAAA;AACxB,IAAA,SAAM,EAAE,QAAK,CAAA,KAAA;;AA6BJ,IAAA,OAAO,gBAGb;wBAAA,CAAA,GAAA,YAAA,EAAAA,eAAA,CADA,QAAM,CAAA,UAAA,CAAA,EAAA,CAAA,YAAA;MAEVC;AAAQ,QAAA,OAAA,EAAA,WAAA;AAAA,QAAA,aAAA,EAAA,wBAAA;AAAA,QAAA,OAAA,EAAA,QAAA,CAAA,KAAA;;;;;;;;qBAhCP,MA2BE;AA3BF,MAAAC,kBAAA,CA2BE,OA3BF,UA2BE,EAAA;AAzBC,QAAA,CAAA,KAAA,CAAA,QAAA,CAAA,MAAA,GAAA,CAAA;0BADHC,kBAqBI,CAAA,KAAA,EAAA;;AAnBH,cAAA,KAAI,EAAC,8BAA8B;0BACjC,EAAA,QAAA,CAAA,QAAA;AACA,cAAA,aAAQ,EAAC,sBAAsB;;cAC/BD,kBAeC,CAAA,IAAA,EAAA,IAAA,EAAA;kCAdDC,kBAaG,CAAAC,QAAA,EAAA,IAAA,EAAAC,UAAA,CAbiB,KAAQ,CAAA,QAAA,EAAA,CAAlB,OAAM,KAAA;uCAAhBF,kBAaG,CAAA,IAAA,EAAA;oBAb4B,GAAG,EAAE,OAAO,CAAC,EAAE;;sCAY3C,CAAA,GAAA,EAAA;sBAVF,IAAI,EAAA,CAAA,kBAAA,EAAuB,OAAO,CAAC,EAAE,CAAA,CAAA;AACtC,sBAAA,KAAK,kBAAC,mCAAmC,EAAA,EAAA,2CAAA,EACc,OAAO,CAAC,EAAE,KAAK,KAAQ,CAAA,QAAA,EAAA,CAAA,CAAA;AAC7E,sBAAA,cAAY,EAAE,OAAO,CAAC,EAAE,KAAK,KAAA,CAAA,QAAK,YAAA,SAAA;sBAClC,aAAK,EAAA,CAAA,qBAAA,EAAA,OAAA,CAAA,EAAA,CAAA,CAAA;AACL,sBAAA,OAAK,EAAUG,aAAA,CAAA,MAAA,KAAA,QAAA,CAAA,aAAa,CAAC,OAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,SAAA,CAAA,CAAA;;AAC5B,sBAAA,CAAA,OAAA,CAAA,IAAA;AAAF,2BAAAC,SAAA,EAAA,EAAAJ,kBAAA,CAEC,QAFD,UAEC,EAAA;4BADAF,WAAC,CAAA,mBAAA,EAAA;8BAAA,MAAA,EAAA,OAAA,CAAA,IAAA;;;;sBAEFC,kBAAC,CAAA,MAAA,EAAA,IAAA,EAAAF,eAAA,CAAA,OAAA,CAAA,IAAA,CAAA,EAAA,CAAA,YAAA;;;;;;;AAKL,QAAAE,kBAAA,CAGM,OAHN,UAGM,EAAA;UADLM,UAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;;;;;;;;;;"}

package/dist/esm/components/CnVersionInfoCard/CnVersionInfoCard.vue.js CHANGED Viewed

@@ -2,7 +2,7 @@ import script from './CnVersionInfoCard.vue2.js';
 import { render } from './CnVersionInfoCard.vue3.js';
 script.render = render;
-script.__scopeId = "data-v-52e4d484";
+script.__scopeId = "data-v-95a2bdce";
 const __sfc_main = script;
 export { __sfc_main as default };

package/dist/esm/components/CnVersionInfoCard/CnVersionInfoCard.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CnVersionInfoCard.vue2.js","sources":["../../../../src/components/CnVersionInfoCard/CnVersionInfoCard.vue"],"sourcesContent":["<template>\n\t<CnSettingsSection\n\t\t:name=\"title\"\n\t\t:description=\"description\"\n\t\t:docUrl=\"docUrl\"\n\t\t:loading=\"loading\"\n\t\t:wide=\"isBoard && wide\"\n\t\t:loadingMessage=\"t('nextcloud-vue', 'Loading version information…')\">\n\t\t<!-- Actions slot (top right). Under the board look the same buttons sit\n\t\t in the footer row of the card instead. -->\n\t\t<template v-if=\"!isBoard\" #actions>\n\t\t\t<!-- Update Button -->\n\t\t\t<NcButton\n\t\t\t\tv-if=\"showUpdateButton\"\n\t\t\t\t:type=\"updateButtonType\"\n\t\t\t\t:disabled=\"updateButtonDisabled\"\n\t\t\t\t@click=\"handleUpdateClick\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcLoadingIcon v-if=\"updating\" :size=\"20\" />\n\t\t\t\t\t<Check v-else-if=\"isUpToDate\" :size=\"20\" />\n\t\t\t\t\t<Update v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ updateButtonText }}\n\t\t\t</NcButton>\n\n\t\t\t<!-- Additional Actions (slot) -->\n\t\t\t<slot name=\"actions\" />\n\t\t</template>\n\n\t\t<!-- Main content (only shown when not loading) -->\n\t\t<div v-if=\"!loading\" class=\"cn-version-info\" :class=\"{ 'cn-version-info--board': isBoard }\">\n\t\t\t<!-- Version card with gray background -->\n\t\t\t<div class=\"cn-version-info__card\">\n\t\t\t\t<h4>{{ cardTitle }}</h4>\n\t\t\t\t<div class=\"cn-version-info__details\">\n\t\t\t\t\t<!-- Application Name -->\n\t\t\t\t\t<div class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ fieldLabels.appName }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\">{{ appName }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Version -->\n\t\t\t\t\t<div class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ fieldLabels.version }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\">{{ appVersion }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Configured Version (if provided) -->\n\t\t\t\t\t<div v-if=\"configuredVersion\" class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ fieldLabels.configuredVersion }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\">{{ configuredVersion }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Additional items -->\n\t\t\t\t\t<div v-for=\"item in additionalItems\" :key=\"item.label\" class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ item.label }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\" :class=\"item.statusClass\">{{ item.value }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Optional additional items slot -->\n\t\t\t\t\t<slot name=\"additional-items\" />\n\t\t\t\t</div>\n\n\t\t\t\t<!-- The state, then the actions (re-import), after a hairline. -->\n\t\t\t\t<div v-if=\"isBoard\" class=\"cn-version-info__footer-row\" data-testid=\"cn-version-info-footer-row\">\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tv-if=\"showUpdateButton\"\n\t\t\t\t\t\t:type=\"updateButtonType\"\n\t\t\t\t\t\t:disabled=\"updateButtonDisabled\"\n\t\t\t\t\t\t@click=\"handleUpdateClick\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcLoadingIcon v-if=\"updating\" :size=\"20\" />\n\t\t\t\t\t\t\t<Check v-else-if=\"isUpToDate\" :size=\"20\" />\n\t\t\t\t\t\t\t<Update v-else :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t{{ updateButtonText }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Optional footer slot -->\n\t\t\t\t<slot name=\"footer\" />\n\t\t\t</div>\n\n\t\t\t<!-- Optional extra cards slot -->\n\t\t\t<slot name=\"extra-cards\" />\n\t\t</div>\n\t</CnSettingsSection>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcButton, NcLoadingIcon } from '@nextcloud/vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport Update from 'vue-material-design-icons/Update.vue'\nimport { useLook } from '../../composables/useLook.js'\nimport { ensureTranslations } from '../../l10n/index.js'\nimport { CnSettingsSection } from '../CnSettingsSection/index.js'\n\n/*\n CnVersionInfoCard - App version information card for admin settings pages.\n \n Displays application name, version, and optional configured version with an\n * update button. Wraps CnSettingsSection for consistent admin settings layout.\n \n Every Conduction Nextcloud app should show this as the first section on its\n * admin settings page.\n \n Basic usage\n * ```vue\n * <CnVersionInfoCard app-name=\"Open Register\" app-version=\"0.2.3\" />\n * ```\n \n With update button\n * ```vue\n * <CnVersionInfoCard\n * app-name=\"Open Register\"\n * app-version=\"0.2.3\"\n * configured-version=\"0.2.2\"\n * :is-up-to-date=\"false\"\n * :show-update-button=\"true\"\n * :updating=\"isUpdating\"\n * @update=\"runUpdate\" />\n * ```\n \n With additional items and actions\n * ```vue\n * <CnVersionInfoCard\n * app-name=\"Pipelinq\"\n * app-version=\"0.1.7\"\n * :additional-items=\"[{ label: 'Database', value: 'Connected', statusClass: 'cn-version-info__status--ok' }]\">\n * <template #actions>\n * <NcButton @click=\"clearCache\">Clear App Store Cache</NcButton>\n * </template>\n * </CnVersionInfoCard>\n * ```\n /\nexport default {\n\tname: 'CnVersionInfoCard',\n\n\tcomponents: {\n\t\tCnSettingsSection,\n\t\tNcLoadingIcon,\n\t\tNcButton,\n\t\tCheck,\n\t\tUpdate,\n\t},\n\n\tprops: {\n\t\t/\n\t\t The look the card is drawn in: `board` or `nextcloud`. Empty follows\n\t\t * the `cnLook` that CnAppRoot provides. Under `board` the facts are a\n\t\t * two-column list and the actions sit in a footer row.\n\t\t \n\t\t @spec openspec/changes/screens-chrome-parity/specs/settings-board-look/spec.md#requirement-the-version-card-takes-the-board-facts-and-footer\n\t\t /\n\t\tlook: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Under the board look the card spans the whole settings grid, as the\n\t\t * boards draw the version card. Set to `false` to keep it one card in\n\t\t * the grid. Without the board look it has no effect.\n\t\t \n\t\t @spec openspec/changes/board-version-card-full-width/specs/settings-board-look/spec.md#requirement-the-board-version-card-spans-the-settings-grid\n\t\t /\n\t\twide: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/* Section title /\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Version information'),\n\t\t},\n\n\t\t/* Section description /\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Information about the current application installation'),\n\t\t},\n\n\t\t/* Documentation URL (shows info icon next to title) /\n\t\tdocUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Card heading text /\n\t\tcardTitle: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Application information'),\n\t\t},\n\n\t\t/* Application name to display /\n\t\tappName: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Application version string /\n\t\tappVersion: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Configured version (optional, for apps that track configuration versions separately) /\n\t\tconfiguredVersion: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Whether the app configuration is up to date /\n\t\tisUpToDate: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/* Whether to show the update button /\n\t\tshowUpdateButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/* Whether an update is currently in progress /\n\t\tupdating: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Additional key-value items to display.\n\t\t * Format: [{ label: 'Label', value: 'Value', statusClass: 'cn-version-info__status--ok' }]\n\t\t /\n\t\tadditionalItems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/* Whether version info is loading /\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Custom labels for the standard fields, `{ appName?, version?, configuredVersion? }`.\n\t\t * A label left out keeps the translated default.\n\t\t /\n\t\tlabels: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\n\n\temits: ['update'],\n\n\tsetup(props) {\n\t\t// An admin page can be an entry with no other library surface: its\n\t\t// chrome reads in the user's language without the app registering.\n\t\tensureTranslations()\n\t\tconst { isBoard } = useLook(props)\n\t\treturn { isBoard }\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t The field labels: the app's, else the library's in the reader's language.\n\t\t \n\t\t @return {{appName: string, version: string, configuredVersion: string}}\n\t\t * @spec openspec/changes/version-card-dutch-and-header/specs/settings-board-look/spec.md#requirement-the-admin-chrome-reads-in-the-readers-language\n\t\t /\n\t\tfieldLabels() {\n\t\t\treturn {\n\t\t\t\tappName: t('nextcloud-vue', 'Application name'),\n\t\t\t\tversion: t('nextcloud-vue', 'Version'),\n\t\t\t\tconfiguredVersion: t('nextcloud-vue', 'Configured version'),\n\t\t\t\t...(this.labels \|\| {}),\n\t\t\t}\n\t\t},\n\n\t\t/* @return {string} Button type based on update status /\n\t\tupdateButtonType() {\n\t\t\tif (this.isUpToDate) {\n\t\t\t\treturn 'success'\n\t\t\t}\n\t\t\treturn 'error'\n\t\t},\n\n\t\t/* @return {boolean} Whether the update button should be disabled /\n\t\tupdateButtonDisabled() {\n\t\t\treturn this.isUpToDate \|\| this.updating\n\t\t},\n\n\t\t/* @return {string} Update button label text /\n\t\tupdateButtonText() {\n\t\t\tif (this.updating) {\n\t\t\t\treturn t('nextcloud-vue', 'Updating…')\n\t\t\t}\n\t\t\tif (this.isUpToDate) {\n\t\t\t\treturn t('nextcloud-vue', 'Up to date')\n\t\t\t}\n\t\t\treturn t('nextcloud-vue', 'Update')\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\thandleUpdateClick() {\n\t\t\tif (!this.updateButtonDisabled) {\n\t\t\t\tthis.$emit('update')\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-version-info__card {\n\tbackground: var(--color-background-hover);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius-large);\n\tpadding: 20px;\n\tmargin-bottom: 20px;\n}\n\n.cn-version-info__card h4 {\n\tmargin: 0 0 16px 0;\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n}\n\n.cn-version-info__details {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 12px;\n}\n\n.cn-version-info__item {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tpadding: 8px 0;\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.cn-version-info__item:last-child {\n\tborder-bottom: none;\n}\n\n.cn-version-info__label {\n\tfont-weight: 500;\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 14px;\n}\n\n.cn-version-info__value {\n\tfont-family: 'Courier New', Courier, monospace;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n\tfont-size: 14px;\n}\n\n/ Status classes for values */\n.cn-version-info__status--ok {\n\tcolor: var(--color-success);\n\tfont-weight: 600;\n}\n\n.cn-version-info__status--warning {\n\tcolor: var(--color-warning);\n\tfont-weight: 600;\n}\n\n.cn-version-info__status--error {\n\tcolor: var(--color-error);\n\tfont-weight: 600;\n}\n\n@media (max-width: 768px) {\n\t.cn-version-info__item {\n\t\tflex-direction: column;\n\t\talign-items: flex-start;\n\t\tgap: 4px;\n\t}\n\n\t.cn-version-info__label {\n\t\tfont-weight: 600;\n\t}\n\n\t.cn-version-info__value {\n\t\tword-break: break-all;\n\t}\n}\n</style>\n"],"names":["CnSettingsSection","t"],"mappings":"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"}
1	+ {"version":3,"file":"CnVersionInfoCard.vue2.js","sources":["../../../../src/components/CnVersionInfoCard/CnVersionInfoCard.vue"],"sourcesContent":["<template>\n\t<CnSettingsSection\n\t\t:name=\"title\"\n\t\t:description=\"description\"\n\t\t:docUrl=\"docUrl\"\n\t\t:loading=\"loading\"\n\t\t:wide=\"isBoard && wide\"\n\t\t:loadingMessage=\"t('nextcloud-vue', 'Loading version information…')\">\n\t\t<!-- Actions slot (top right). Under the board look the same buttons sit\n\t\t in the footer row of the card instead. -->\n\t\t<template v-if=\"!isBoard\" #actions>\n\t\t\t<!-- Update Button -->\n\t\t\t<NcButton\n\t\t\t\tv-if=\"showUpdateButton\"\n\t\t\t\t:type=\"updateButtonType\"\n\t\t\t\t:disabled=\"updateButtonDisabled\"\n\t\t\t\t@click=\"handleUpdateClick\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcLoadingIcon v-if=\"updating\" :size=\"20\" />\n\t\t\t\t\t<Check v-else-if=\"isUpToDate\" :size=\"20\" />\n\t\t\t\t\t<Update v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ updateButtonText }}\n\t\t\t</NcButton>\n\n\t\t\t<!-- Additional Actions (slot) -->\n\t\t\t<slot name=\"actions\" />\n\t\t</template>\n\n\t\t<!-- Main content (only shown when not loading) -->\n\t\t<div v-if=\"!loading\" class=\"cn-version-info\" :class=\"{ 'cn-version-info--board': isBoard }\">\n\t\t\t<!-- Version card with gray background -->\n\t\t\t<div class=\"cn-version-info__card\">\n\t\t\t\t<h4>{{ cardTitle }}</h4>\n\t\t\t\t<div class=\"cn-version-info__details\">\n\t\t\t\t\t<!-- Application Name -->\n\t\t\t\t\t<div class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ fieldLabels.appName }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\">{{ appName }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Version -->\n\t\t\t\t\t<div class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ fieldLabels.version }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\">{{ appVersion }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Configured version: when provided, and always in the board look,\n\t\t\t\t\t which draws the row (\"Unknown\" until the app reports it). -->\n\t\t\t\t\t<div v-if=\"configuredVersion \|\| isBoard\" class=\"cn-version-info__item\" data-testid=\"cn-version-info-configured\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ fieldLabels.configuredVersion }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\">{{ configuredVersion \|\| t('nextcloud-vue', 'Unknown') }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Additional items -->\n\t\t\t\t\t<div v-for=\"item in additionalItems\" :key=\"item.label\" class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ item.label }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\" :class=\"item.statusClass\">{{ item.value }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Optional additional items slot -->\n\t\t\t\t\t<slot name=\"additional-items\" />\n\t\t\t\t</div>\n\n\t\t\t\t<!-- The state, then the actions (re-import), after a hairline. -->\n\t\t\t\t<div v-if=\"isBoard\" class=\"cn-version-info__footer-row\" data-testid=\"cn-version-info-footer-row\">\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tv-if=\"showUpdateButton\"\n\t\t\t\t\t\t:type=\"updateButtonType\"\n\t\t\t\t\t\t:disabled=\"updateButtonDisabled\"\n\t\t\t\t\t\t@click=\"handleUpdateClick\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcLoadingIcon v-if=\"updating\" :size=\"20\" />\n\t\t\t\t\t\t\t<Check v-else-if=\"isUpToDate\" :size=\"20\" />\n\t\t\t\t\t\t\t<Update v-else :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t{{ updateButtonText }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Optional footer slot -->\n\t\t\t\t<slot name=\"footer\" />\n\t\t\t</div>\n\n\t\t\t<!-- Optional extra cards slot -->\n\t\t\t<slot name=\"extra-cards\" />\n\t\t</div>\n\t</CnSettingsSection>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcButton, NcLoadingIcon } from '@nextcloud/vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport Update from 'vue-material-design-icons/Update.vue'\nimport { useLook } from '../../composables/useLook.js'\nimport { ensureTranslations } from '../../l10n/index.js'\nimport { CnSettingsSection } from '../CnSettingsSection/index.js'\n\n/*\n CnVersionInfoCard - App version information card for admin settings pages.\n \n Displays application name, version, and optional configured version with an\n * update button. Wraps CnSettingsSection for consistent admin settings layout.\n \n Every Conduction Nextcloud app should show this as the first section on its\n * admin settings page.\n \n Basic usage\n * ```vue\n * <CnVersionInfoCard app-name=\"Open Register\" app-version=\"0.2.3\" />\n * ```\n \n With update button\n * ```vue\n * <CnVersionInfoCard\n * app-name=\"Open Register\"\n * app-version=\"0.2.3\"\n * configured-version=\"0.2.2\"\n * :is-up-to-date=\"false\"\n * :show-update-button=\"true\"\n * :updating=\"isUpdating\"\n * @update=\"runUpdate\" />\n * ```\n \n With additional items and actions\n * ```vue\n * <CnVersionInfoCard\n * app-name=\"Pipelinq\"\n * app-version=\"0.1.7\"\n * :additional-items=\"[{ label: 'Database', value: 'Connected', statusClass: 'cn-version-info__status--ok' }]\">\n * <template #actions>\n * <NcButton @click=\"clearCache\">Clear App Store Cache</NcButton>\n * </template>\n * </CnVersionInfoCard>\n * ```\n /\nexport default {\n\tname: 'CnVersionInfoCard',\n\n\tcomponents: {\n\t\tCnSettingsSection,\n\t\tNcLoadingIcon,\n\t\tNcButton,\n\t\tCheck,\n\t\tUpdate,\n\t},\n\n\tprops: {\n\t\t/\n\t\t The look the card is drawn in: `board` or `nextcloud`. Empty follows\n\t\t * the `cnLook` that CnAppRoot provides. Under `board` the facts are a\n\t\t * two-column list and the actions sit in a footer row.\n\t\t \n\t\t @spec openspec/changes/screens-chrome-parity/specs/settings-board-look/spec.md#requirement-the-version-card-takes-the-board-facts-and-footer\n\t\t /\n\t\tlook: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Under the board look the card spans the whole settings grid, as the\n\t\t * boards draw the version card. Set to `false` to keep it one card in\n\t\t * the grid. Without the board look it has no effect.\n\t\t \n\t\t @spec openspec/changes/board-version-card-full-width/specs/settings-board-look/spec.md#requirement-the-board-version-card-spans-the-settings-grid\n\t\t /\n\t\twide: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/* Section title /\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Version information'),\n\t\t},\n\n\t\t/* Section description /\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Information about the current application installation'),\n\t\t},\n\n\t\t/* Documentation URL (shows info icon next to title) /\n\t\tdocUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Card heading text /\n\t\tcardTitle: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Application information'),\n\t\t},\n\n\t\t/* Application name to display /\n\t\tappName: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Application version string /\n\t\tappVersion: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Configured version (optional, for apps that track configuration versions separately) /\n\t\tconfiguredVersion: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Whether the app configuration is up to date /\n\t\tisUpToDate: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/* Whether to show the update button /\n\t\tshowUpdateButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/* Whether an update is currently in progress /\n\t\tupdating: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Additional key-value items to display.\n\t\t * Format: [{ label: 'Label', value: 'Value', statusClass: 'cn-version-info__status--ok' }]\n\t\t /\n\t\tadditionalItems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/* Whether version info is loading /\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Custom labels for the standard fields, `{ appName?, version?, configuredVersion? }`.\n\t\t * A label left out keeps the translated default.\n\t\t /\n\t\tlabels: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\n\n\temits: ['update'],\n\n\tsetup(props) {\n\t\t// An admin page can be an entry with no other library surface: its\n\t\t// chrome reads in the user's language without the app registering.\n\t\tensureTranslations()\n\t\tconst { isBoard } = useLook(props)\n\t\treturn { isBoard }\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t The field labels: the app's, else the library's in the reader's language.\n\t\t \n\t\t @return {{appName: string, version: string, configuredVersion: string}}\n\t\t * @spec openspec/changes/version-card-dutch-and-header/specs/settings-board-look/spec.md#requirement-the-admin-chrome-reads-in-the-readers-language\n\t\t /\n\t\tfieldLabels() {\n\t\t\treturn {\n\t\t\t\tappName: t('nextcloud-vue', 'Application name'),\n\t\t\t\tversion: t('nextcloud-vue', 'Version'),\n\t\t\t\tconfiguredVersion: t('nextcloud-vue', 'Configured version'),\n\t\t\t\t...(this.labels \|\| {}),\n\t\t\t}\n\t\t},\n\n\t\t/* @return {string} Button type based on update status /\n\t\tupdateButtonType() {\n\t\t\tif (this.isUpToDate) {\n\t\t\t\treturn 'success'\n\t\t\t}\n\t\t\treturn 'error'\n\t\t},\n\n\t\t/* @return {boolean} Whether the update button should be disabled /\n\t\tupdateButtonDisabled() {\n\t\t\treturn this.isUpToDate \|\| this.updating\n\t\t},\n\n\t\t/* @return {string} Update button label text /\n\t\tupdateButtonText() {\n\t\t\tif (this.updating) {\n\t\t\t\treturn t('nextcloud-vue', 'Updating…')\n\t\t\t}\n\t\t\tif (this.isUpToDate) {\n\t\t\t\treturn t('nextcloud-vue', 'Up to date')\n\t\t\t}\n\t\t\treturn t('nextcloud-vue', 'Update')\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\thandleUpdateClick() {\n\t\t\tif (!this.updateButtonDisabled) {\n\t\t\t\tthis.$emit('update')\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-version-info__card {\n\tbackground: var(--color-background-hover);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius-large);\n\tpadding: 20px;\n\tmargin-bottom: 20px;\n}\n\n.cn-version-info__card h4 {\n\tmargin: 0 0 16px 0;\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n}\n\n.cn-version-info__details {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 12px;\n}\n\n.cn-version-info__item {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tpadding: 8px 0;\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.cn-version-info__item:last-child {\n\tborder-bottom: none;\n}\n\n.cn-version-info__label {\n\tfont-weight: 500;\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 14px;\n}\n\n.cn-version-info__value {\n\tfont-family: 'Courier New', Courier, monospace;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n\tfont-size: 14px;\n}\n\n/ Status classes for values */\n.cn-version-info__status--ok {\n\tcolor: var(--color-success);\n\tfont-weight: 600;\n}\n\n.cn-version-info__status--warning {\n\tcolor: var(--color-warning);\n\tfont-weight: 600;\n}\n\n.cn-version-info__status--error {\n\tcolor: var(--color-error);\n\tfont-weight: 600;\n}\n\n@media (max-width: 768px) {\n\t.cn-version-info__item {\n\t\tflex-direction: column;\n\t\talign-items: flex-start;\n\t\tgap: 4px;\n\t}\n\n\t.cn-version-info__label {\n\t\tfont-weight: 600;\n\t}\n\n\t.cn-version-info__value {\n\t\tword-break: break-all;\n\t}\n}\n</style>\n"],"names":["CnSettingsSection","t"],"mappings":";;;;;;;;AAoGA;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;;;AAKA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;;AAGA;AACA;;AAED,aAAe;CACd,IAAI,EAAE,mBAAmB;;CAEzB,UAAU,EAAE;AACX,qBAAAA,UAAiB;EACjB,aAAa;AACb,EAAA,QAAQ;EACR,KAAK;AACL,EAAA,MAAM;EACN;;AAED,CAAA,KAAK,EAAE;AACN;;;AAGC;AACA;AACA;;EAED,IAAI,EAAE;GACL,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;AAED;;;AAGC;AACA;AACA;;EAED,IAAI,EAAE;GACL,IAAI,EAAE,OAAO;GACb,OAAO,EAAE,IAAI;GACb;;AAED;AACA,EAAA,KAAK,EAAE;GACN,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,MAAMC,SAAC,CAAC,eAAe,EAAE,qBAAqB,CAAC;GACxD;;;EAGD,WAAW,EAAE;GACZ,IAAI,EAAE,MAAM;AACZ,GAAA,OAAO,EAAE,MAAMA,SAAC,CAAC,eAAe,EAAE,wDAAwD,CAAC;GAC3F;;;AAGD,EAAA,MAAM,EAAE;GACP,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;AAED;EACA,SAAS,EAAE;GACV,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,MAAMA,SAAC,CAAC,eAAe,EAAE,yBAAyB,CAAC;GAC5D;;;AAGD,EAAA,OAAO,EAAE;GACR,IAAI,EAAE,MAAM;GACZ,QAAQ,EAAE,IAAI;GACd;;;EAGD,UAAU,EAAE;GACX,IAAI,EAAE,MAAM;GACZ,QAAQ,EAAE,IAAI;GACd;;AAED;AACA,EAAA,iBAAiB,EAAE;GAClB,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;AAED;EACA,UAAU,EAAE;GACX,IAAI,EAAE,OAAO;GACb,OAAO,EAAE,IAAI;GACb;;AAED;AACA,EAAA,gBAAgB,EAAE;GACjB,IAAI,EAAE,OAAO;GACb,OAAO,EAAE,KAAK;GACd;;AAED;AACA,EAAA,QAAQ,EAAE;GACT,IAAI,EAAE,OAAO;GACb,OAAO,EAAE,KAAK;GACd;;AAED;AACC;AACA;;AAED,EAAA,eAAe,EAAE;GAChB,IAAI,EAAE,KAAK;AACX,GAAA,OAAO,EAAE,MAAM,EAAE;GACjB;;AAED;AACA,EAAA,OAAO,EAAE;GACR,IAAI,EAAE,OAAO;GACb,OAAO,EAAE,KAAK;GACd;;AAED;AACC;AACA;;AAED,EAAA,MAAM,EAAE;GACP,IAAI,EAAE,MAAM;AACZ,GAAA,OAAO,EAAE,OAAO,EAAE,CAAC;GACnB;EACD;;AAED,CAAA,KAAK,EAAE,CAAC,QAAQ,CAAC;;CAEjB,KAAK,CAAC,KAAK,EAAE;;;AAGZ,EAAA,kBAAkB,GAAC;EACnB,MAAM,EAAE,OAAQ,EAAA,GAAI,OAAO,CAAC,KAAK,EAAA;AACjC,EAAA,OAAO,EAAE,OAAQ,EAAA;EACjB;;AAED,CAAA,QAAQ,EAAE;AACT;AACC;AACA;AACA;AACA;;EAED,WAAW,GAAG;AACb,GAAA,OAAO;AACN,IAAA,OAAO,EAAEA,SAAC,CAAC,eAAe,EAAE,kBAAkB,CAAC;AAC/C,IAAA,OAAO,EAAEA,SAAC,CAAC,eAAe,EAAE,SAAS,CAAC;IACtC,iBAAiB,EAAEA,SAAC,CAAC,eAAe,EAAE,oBAAoB,CAAC;AAC3D,IAAA,IAAI,IAAI,CAAC,MAAK,IAAK,EAAE,CAAC;AACvB,IAAA;GACA;;;AAGD,EAAA,gBAAgB,GAAG;AAClB,GAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACpB,IAAA,OAAO,SAAQ;AAChB,IAAA;GACA,OAAO,OAAM;GACb;;;EAGD,oBAAoB,GAAG;AACtB,GAAA,OAAO,IAAI,CAAC,UAAS,IAAK,IAAI,CAAC,QAAO;GACtC;;AAED;AACA,EAAA,gBAAgB,GAAG;AAClB,GAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AAClB,IAAA,OAAOA,SAAC,CAAC,eAAe,EAAE,WAAW,CAAA;AACtC,IAAA;AACA,GAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACpB,IAAA,OAAOA,SAAC,CAAC,eAAe,EAAE,YAAY,CAAA;AACvC,IAAA;AACA,GAAA,OAAOA,SAAC,CAAC,eAAe,EAAE,QAAQ,CAAA;GAClC;EACD;;AAED,CAAA,OAAO,EAAE;KACRA,SAAC;;AAED,EAAA,iBAAiB,GAAG;AACnB,GAAA,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;AAC/B,IAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAA;AACpB,IAAA;GACA;EACD;AACF;;;;"}

package/dist/esm/components/CnVersionInfoCard/CnVersionInfoCard.vue3.js CHANGED Viewed

@@ -10,7 +10,8 @@ const _hoisted_7 = { class: "cn-version-info__label" };
 const _hoisted_8 = { class: "cn-version-info__value" };
 const _hoisted_9 = {
   key: 0,
-  class: "cn-version-info__item"
+  class: "cn-version-info__item",
+  "data-testid": "cn-version-info-configured"
 };
 const _hoisted_10 = { class: "cn-version-info__label" };
 const _hoisted_11 = { class: "cn-version-info__value" };
@@ -53,10 +54,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   createElementVNode("span", _hoisted_7, toDisplayString($options.fieldLabels.version) + ":", 1 /* TEXT */),
                   createElementVNode("span", _hoisted_8, toDisplayString($props.appVersion), 1 /* TEXT */)
                 ]),
-                ($props.configuredVersion)
+                ($props.configuredVersion || $setup.isBoard)
                   ? (openBlock(), createElementBlock("div", _hoisted_9, [
                       createElementVNode("span", _hoisted_10, toDisplayString($options.fieldLabels.configuredVersion) + ":", 1 /* TEXT */),
-                      createElementVNode("span", _hoisted_11, toDisplayString($props.configuredVersion), 1 /* TEXT */)
+                      createElementVNode("span", _hoisted_11, toDisplayString($props.configuredVersion || $options.t('nextcloud-vue', 'Unknown')), 1 /* TEXT */)
                     ]))
                   : createCommentVNode("v-if", true),
                 (openBlock(true), createElementBlock(Fragment, null, renderList($props.additionalItems, (item) => {

package/dist/esm/components/CnVersionInfoCard/CnVersionInfoCard.vue3.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CnVersionInfoCard.vue3.js","sources":["../../../../src/components/CnVersionInfoCard/CnVersionInfoCard.vue?vue&type=template&id=52e4d484&lang.js"],"sourcesContent":["<template>\n\t<CnSettingsSection\n\t\t:name=\"title\"\n\t\t:description=\"description\"\n\t\t:docUrl=\"docUrl\"\n\t\t:loading=\"loading\"\n\t\t:wide=\"isBoard && wide\"\n\t\t:loadingMessage=\"t('nextcloud-vue', 'Loading version information…')\">\n\t\t<!-- Actions slot (top right). Under the board look the same buttons sit\n\t\t in the footer row of the card instead. -->\n\t\t<template v-if=\"!isBoard\" #actions>\n\t\t\t<!-- Update Button -->\n\t\t\t<NcButton\n\t\t\t\tv-if=\"showUpdateButton\"\n\t\t\t\t:type=\"updateButtonType\"\n\t\t\t\t:disabled=\"updateButtonDisabled\"\n\t\t\t\t@click=\"handleUpdateClick\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcLoadingIcon v-if=\"updating\" :size=\"20\" />\n\t\t\t\t\t<Check v-else-if=\"isUpToDate\" :size=\"20\" />\n\t\t\t\t\t<Update v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ updateButtonText }}\n\t\t\t</NcButton>\n\n\t\t\t<!-- Additional Actions (slot) -->\n\t\t\t<slot name=\"actions\" />\n\t\t</template>\n\n\t\t<!-- Main content (only shown when not loading) -->\n\t\t<div v-if=\"!loading\" class=\"cn-version-info\" :class=\"{ 'cn-version-info--board': isBoard }\">\n\t\t\t<!-- Version card with gray background -->\n\t\t\t<div class=\"cn-version-info__card\">\n\t\t\t\t<h4>{{ cardTitle }}</h4>\n\t\t\t\t<div class=\"cn-version-info__details\">\n\t\t\t\t\t<!-- Application Name -->\n\t\t\t\t\t<div class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ fieldLabels.appName }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\">{{ appName }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Version -->\n\t\t\t\t\t<div class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ fieldLabels.version }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\">{{ appVersion }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Configured Version (if provided) -->\n\t\t\t\t\t<div v-if=\"configuredVersion\" class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ fieldLabels.configuredVersion }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\">{{ configuredVersion }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Additional items -->\n\t\t\t\t\t<div v-for=\"item in additionalItems\" :key=\"item.label\" class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ item.label }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\" :class=\"item.statusClass\">{{ item.value }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Optional additional items slot -->\n\t\t\t\t\t<slot name=\"additional-items\" />\n\t\t\t\t</div>\n\n\t\t\t\t<!-- The state, then the actions (re-import), after a hairline. -->\n\t\t\t\t<div v-if=\"isBoard\" class=\"cn-version-info__footer-row\" data-testid=\"cn-version-info-footer-row\">\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tv-if=\"showUpdateButton\"\n\t\t\t\t\t\t:type=\"updateButtonType\"\n\t\t\t\t\t\t:disabled=\"updateButtonDisabled\"\n\t\t\t\t\t\t@click=\"handleUpdateClick\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcLoadingIcon v-if=\"updating\" :size=\"20\" />\n\t\t\t\t\t\t\t<Check v-else-if=\"isUpToDate\" :size=\"20\" />\n\t\t\t\t\t\t\t<Update v-else :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t{{ updateButtonText }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Optional footer slot -->\n\t\t\t\t<slot name=\"footer\" />\n\t\t\t</div>\n\n\t\t\t<!-- Optional extra cards slot -->\n\t\t\t<slot name=\"extra-cards\" />\n\t\t</div>\n\t</CnSettingsSection>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcButton, NcLoadingIcon } from '@nextcloud/vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport Update from 'vue-material-design-icons/Update.vue'\nimport { useLook } from '../../composables/useLook.js'\nimport { ensureTranslations } from '../../l10n/index.js'\nimport { CnSettingsSection } from '../CnSettingsSection/index.js'\n\n/*\n CnVersionInfoCard - App version information card for admin settings pages.\n \n Displays application name, version, and optional configured version with an\n * update button. Wraps CnSettingsSection for consistent admin settings layout.\n \n Every Conduction Nextcloud app should show this as the first section on its\n * admin settings page.\n \n Basic usage\n * ```vue\n * <CnVersionInfoCard app-name=\"Open Register\" app-version=\"0.2.3\" />\n * ```\n \n With update button\n * ```vue\n * <CnVersionInfoCard\n * app-name=\"Open Register\"\n * app-version=\"0.2.3\"\n * configured-version=\"0.2.2\"\n * :is-up-to-date=\"false\"\n * :show-update-button=\"true\"\n * :updating=\"isUpdating\"\n * @update=\"runUpdate\" />\n * ```\n \n With additional items and actions\n * ```vue\n * <CnVersionInfoCard\n * app-name=\"Pipelinq\"\n * app-version=\"0.1.7\"\n * :additional-items=\"[{ label: 'Database', value: 'Connected', statusClass: 'cn-version-info__status--ok' }]\">\n * <template #actions>\n * <NcButton @click=\"clearCache\">Clear App Store Cache</NcButton>\n * </template>\n * </CnVersionInfoCard>\n * ```\n /\nexport default {\n\tname: 'CnVersionInfoCard',\n\n\tcomponents: {\n\t\tCnSettingsSection,\n\t\tNcLoadingIcon,\n\t\tNcButton,\n\t\tCheck,\n\t\tUpdate,\n\t},\n\n\tprops: {\n\t\t/\n\t\t The look the card is drawn in: `board` or `nextcloud`. Empty follows\n\t\t * the `cnLook` that CnAppRoot provides. Under `board` the facts are a\n\t\t * two-column list and the actions sit in a footer row.\n\t\t \n\t\t @spec openspec/changes/screens-chrome-parity/specs/settings-board-look/spec.md#requirement-the-version-card-takes-the-board-facts-and-footer\n\t\t /\n\t\tlook: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Under the board look the card spans the whole settings grid, as the\n\t\t * boards draw the version card. Set to `false` to keep it one card in\n\t\t * the grid. Without the board look it has no effect.\n\t\t \n\t\t @spec openspec/changes/board-version-card-full-width/specs/settings-board-look/spec.md#requirement-the-board-version-card-spans-the-settings-grid\n\t\t /\n\t\twide: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/* Section title /\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Version information'),\n\t\t},\n\n\t\t/* Section description /\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Information about the current application installation'),\n\t\t},\n\n\t\t/* Documentation URL (shows info icon next to title) /\n\t\tdocUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Card heading text /\n\t\tcardTitle: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Application information'),\n\t\t},\n\n\t\t/* Application name to display /\n\t\tappName: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Application version string /\n\t\tappVersion: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Configured version (optional, for apps that track configuration versions separately) /\n\t\tconfiguredVersion: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Whether the app configuration is up to date /\n\t\tisUpToDate: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/* Whether to show the update button /\n\t\tshowUpdateButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/* Whether an update is currently in progress /\n\t\tupdating: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Additional key-value items to display.\n\t\t * Format: [{ label: 'Label', value: 'Value', statusClass: 'cn-version-info__status--ok' }]\n\t\t /\n\t\tadditionalItems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/* Whether version info is loading /\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Custom labels for the standard fields, `{ appName?, version?, configuredVersion? }`.\n\t\t * A label left out keeps the translated default.\n\t\t /\n\t\tlabels: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\n\n\temits: ['update'],\n\n\tsetup(props) {\n\t\t// An admin page can be an entry with no other library surface: its\n\t\t// chrome reads in the user's language without the app registering.\n\t\tensureTranslations()\n\t\tconst { isBoard } = useLook(props)\n\t\treturn { isBoard }\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t The field labels: the app's, else the library's in the reader's language.\n\t\t \n\t\t @return {{appName: string, version: string, configuredVersion: string}}\n\t\t * @spec openspec/changes/version-card-dutch-and-header/specs/settings-board-look/spec.md#requirement-the-admin-chrome-reads-in-the-readers-language\n\t\t /\n\t\tfieldLabels() {\n\t\t\treturn {\n\t\t\t\tappName: t('nextcloud-vue', 'Application name'),\n\t\t\t\tversion: t('nextcloud-vue', 'Version'),\n\t\t\t\tconfiguredVersion: t('nextcloud-vue', 'Configured version'),\n\t\t\t\t...(this.labels \|\| {}),\n\t\t\t}\n\t\t},\n\n\t\t/* @return {string} Button type based on update status /\n\t\tupdateButtonType() {\n\t\t\tif (this.isUpToDate) {\n\t\t\t\treturn 'success'\n\t\t\t}\n\t\t\treturn 'error'\n\t\t},\n\n\t\t/* @return {boolean} Whether the update button should be disabled /\n\t\tupdateButtonDisabled() {\n\t\t\treturn this.isUpToDate \|\| this.updating\n\t\t},\n\n\t\t/* @return {string} Update button label text /\n\t\tupdateButtonText() {\n\t\t\tif (this.updating) {\n\t\t\t\treturn t('nextcloud-vue', 'Updating…')\n\t\t\t}\n\t\t\tif (this.isUpToDate) {\n\t\t\t\treturn t('nextcloud-vue', 'Up to date')\n\t\t\t}\n\t\t\treturn t('nextcloud-vue', 'Update')\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\thandleUpdateClick() {\n\t\t\tif (!this.updateButtonDisabled) {\n\t\t\t\tthis.$emit('update')\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-version-info__card {\n\tbackground: var(--color-background-hover);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius-large);\n\tpadding: 20px;\n\tmargin-bottom: 20px;\n}\n\n.cn-version-info__card h4 {\n\tmargin: 0 0 16px 0;\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n}\n\n.cn-version-info__details {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 12px;\n}\n\n.cn-version-info__item {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tpadding: 8px 0;\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.cn-version-info__item:last-child {\n\tborder-bottom: none;\n}\n\n.cn-version-info__label {\n\tfont-weight: 500;\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 14px;\n}\n\n.cn-version-info__value {\n\tfont-family: 'Courier New', Courier, monospace;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n\tfont-size: 14px;\n}\n\n/ Status classes for values */\n.cn-version-info__status--ok {\n\tcolor: var(--color-success);\n\tfont-weight: 600;\n}\n\n.cn-version-info__status--warning {\n\tcolor: var(--color-warning);\n\tfont-weight: 600;\n}\n\n.cn-version-info__status--error {\n\tcolor: var(--color-error);\n\tfont-weight: 600;\n}\n\n@media (max-width: 768px) {\n\t.cn-version-info__item {\n\t\tflex-direction: column;\n\t\talign-items: flex-start;\n\t\tgap: 4px;\n\t}\n\n\t.cn-version-info__label {\n\t\tfont-weight: 600;\n\t}\n\n\t.cn-version-info__value {\n\t\tword-break: break-all;\n\t}\n}\n</style>\n"],"names":["_createBlock","_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString","_openBlock","_Fragment","_renderList","_renderSlot","_createTextVNode"],"mappings":"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"}
1	+ {"version":3,"file":"CnVersionInfoCard.vue3.js","sources":["../../../../src/components/CnVersionInfoCard/CnVersionInfoCard.vue?vue&type=template&id=95a2bdce&lang.js"],"sourcesContent":["<template>\n\t<CnSettingsSection\n\t\t:name=\"title\"\n\t\t:description=\"description\"\n\t\t:docUrl=\"docUrl\"\n\t\t:loading=\"loading\"\n\t\t:wide=\"isBoard && wide\"\n\t\t:loadingMessage=\"t('nextcloud-vue', 'Loading version information…')\">\n\t\t<!-- Actions slot (top right). Under the board look the same buttons sit\n\t\t in the footer row of the card instead. -->\n\t\t<template v-if=\"!isBoard\" #actions>\n\t\t\t<!-- Update Button -->\n\t\t\t<NcButton\n\t\t\t\tv-if=\"showUpdateButton\"\n\t\t\t\t:type=\"updateButtonType\"\n\t\t\t\t:disabled=\"updateButtonDisabled\"\n\t\t\t\t@click=\"handleUpdateClick\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcLoadingIcon v-if=\"updating\" :size=\"20\" />\n\t\t\t\t\t<Check v-else-if=\"isUpToDate\" :size=\"20\" />\n\t\t\t\t\t<Update v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ updateButtonText }}\n\t\t\t</NcButton>\n\n\t\t\t<!-- Additional Actions (slot) -->\n\t\t\t<slot name=\"actions\" />\n\t\t</template>\n\n\t\t<!-- Main content (only shown when not loading) -->\n\t\t<div v-if=\"!loading\" class=\"cn-version-info\" :class=\"{ 'cn-version-info--board': isBoard }\">\n\t\t\t<!-- Version card with gray background -->\n\t\t\t<div class=\"cn-version-info__card\">\n\t\t\t\t<h4>{{ cardTitle }}</h4>\n\t\t\t\t<div class=\"cn-version-info__details\">\n\t\t\t\t\t<!-- Application Name -->\n\t\t\t\t\t<div class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ fieldLabels.appName }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\">{{ appName }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Version -->\n\t\t\t\t\t<div class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ fieldLabels.version }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\">{{ appVersion }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Configured version: when provided, and always in the board look,\n\t\t\t\t\t which draws the row (\"Unknown\" until the app reports it). -->\n\t\t\t\t\t<div v-if=\"configuredVersion \|\| isBoard\" class=\"cn-version-info__item\" data-testid=\"cn-version-info-configured\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ fieldLabels.configuredVersion }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\">{{ configuredVersion \|\| t('nextcloud-vue', 'Unknown') }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Additional items -->\n\t\t\t\t\t<div v-for=\"item in additionalItems\" :key=\"item.label\" class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ item.label }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\" :class=\"item.statusClass\">{{ item.value }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Optional additional items slot -->\n\t\t\t\t\t<slot name=\"additional-items\" />\n\t\t\t\t</div>\n\n\t\t\t\t<!-- The state, then the actions (re-import), after a hairline. -->\n\t\t\t\t<div v-if=\"isBoard\" class=\"cn-version-info__footer-row\" data-testid=\"cn-version-info-footer-row\">\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tv-if=\"showUpdateButton\"\n\t\t\t\t\t\t:type=\"updateButtonType\"\n\t\t\t\t\t\t:disabled=\"updateButtonDisabled\"\n\t\t\t\t\t\t@click=\"handleUpdateClick\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcLoadingIcon v-if=\"updating\" :size=\"20\" />\n\t\t\t\t\t\t\t<Check v-else-if=\"isUpToDate\" :size=\"20\" />\n\t\t\t\t\t\t\t<Update v-else :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t{{ updateButtonText }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Optional footer slot -->\n\t\t\t\t<slot name=\"footer\" />\n\t\t\t</div>\n\n\t\t\t<!-- Optional extra cards slot -->\n\t\t\t<slot name=\"extra-cards\" />\n\t\t</div>\n\t</CnSettingsSection>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcButton, NcLoadingIcon } from '@nextcloud/vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport Update from 'vue-material-design-icons/Update.vue'\nimport { useLook } from '../../composables/useLook.js'\nimport { ensureTranslations } from '../../l10n/index.js'\nimport { CnSettingsSection } from '../CnSettingsSection/index.js'\n\n/*\n CnVersionInfoCard - App version information card for admin settings pages.\n \n Displays application name, version, and optional configured version with an\n * update button. Wraps CnSettingsSection for consistent admin settings layout.\n \n Every Conduction Nextcloud app should show this as the first section on its\n * admin settings page.\n \n Basic usage\n * ```vue\n * <CnVersionInfoCard app-name=\"Open Register\" app-version=\"0.2.3\" />\n * ```\n \n With update button\n * ```vue\n * <CnVersionInfoCard\n * app-name=\"Open Register\"\n * app-version=\"0.2.3\"\n * configured-version=\"0.2.2\"\n * :is-up-to-date=\"false\"\n * :show-update-button=\"true\"\n * :updating=\"isUpdating\"\n * @update=\"runUpdate\" />\n * ```\n \n With additional items and actions\n * ```vue\n * <CnVersionInfoCard\n * app-name=\"Pipelinq\"\n * app-version=\"0.1.7\"\n * :additional-items=\"[{ label: 'Database', value: 'Connected', statusClass: 'cn-version-info__status--ok' }]\">\n * <template #actions>\n * <NcButton @click=\"clearCache\">Clear App Store Cache</NcButton>\n * </template>\n * </CnVersionInfoCard>\n * ```\n /\nexport default {\n\tname: 'CnVersionInfoCard',\n\n\tcomponents: {\n\t\tCnSettingsSection,\n\t\tNcLoadingIcon,\n\t\tNcButton,\n\t\tCheck,\n\t\tUpdate,\n\t},\n\n\tprops: {\n\t\t/\n\t\t The look the card is drawn in: `board` or `nextcloud`. Empty follows\n\t\t * the `cnLook` that CnAppRoot provides. Under `board` the facts are a\n\t\t * two-column list and the actions sit in a footer row.\n\t\t \n\t\t @spec openspec/changes/screens-chrome-parity/specs/settings-board-look/spec.md#requirement-the-version-card-takes-the-board-facts-and-footer\n\t\t /\n\t\tlook: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Under the board look the card spans the whole settings grid, as the\n\t\t * boards draw the version card. Set to `false` to keep it one card in\n\t\t * the grid. Without the board look it has no effect.\n\t\t \n\t\t @spec openspec/changes/board-version-card-full-width/specs/settings-board-look/spec.md#requirement-the-board-version-card-spans-the-settings-grid\n\t\t /\n\t\twide: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/* Section title /\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Version information'),\n\t\t},\n\n\t\t/* Section description /\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Information about the current application installation'),\n\t\t},\n\n\t\t/* Documentation URL (shows info icon next to title) /\n\t\tdocUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Card heading text /\n\t\tcardTitle: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Application information'),\n\t\t},\n\n\t\t/* Application name to display /\n\t\tappName: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Application version string /\n\t\tappVersion: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Configured version (optional, for apps that track configuration versions separately) /\n\t\tconfiguredVersion: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Whether the app configuration is up to date /\n\t\tisUpToDate: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/* Whether to show the update button /\n\t\tshowUpdateButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/* Whether an update is currently in progress /\n\t\tupdating: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Additional key-value items to display.\n\t\t * Format: [{ label: 'Label', value: 'Value', statusClass: 'cn-version-info__status--ok' }]\n\t\t /\n\t\tadditionalItems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/* Whether version info is loading /\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Custom labels for the standard fields, `{ appName?, version?, configuredVersion? }`.\n\t\t * A label left out keeps the translated default.\n\t\t /\n\t\tlabels: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\n\n\temits: ['update'],\n\n\tsetup(props) {\n\t\t// An admin page can be an entry with no other library surface: its\n\t\t// chrome reads in the user's language without the app registering.\n\t\tensureTranslations()\n\t\tconst { isBoard } = useLook(props)\n\t\treturn { isBoard }\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t The field labels: the app's, else the library's in the reader's language.\n\t\t \n\t\t @return {{appName: string, version: string, configuredVersion: string}}\n\t\t * @spec openspec/changes/version-card-dutch-and-header/specs/settings-board-look/spec.md#requirement-the-admin-chrome-reads-in-the-readers-language\n\t\t /\n\t\tfieldLabels() {\n\t\t\treturn {\n\t\t\t\tappName: t('nextcloud-vue', 'Application name'),\n\t\t\t\tversion: t('nextcloud-vue', 'Version'),\n\t\t\t\tconfiguredVersion: t('nextcloud-vue', 'Configured version'),\n\t\t\t\t...(this.labels \|\| {}),\n\t\t\t}\n\t\t},\n\n\t\t/* @return {string} Button type based on update status /\n\t\tupdateButtonType() {\n\t\t\tif (this.isUpToDate) {\n\t\t\t\treturn 'success'\n\t\t\t}\n\t\t\treturn 'error'\n\t\t},\n\n\t\t/* @return {boolean} Whether the update button should be disabled /\n\t\tupdateButtonDisabled() {\n\t\t\treturn this.isUpToDate \|\| this.updating\n\t\t},\n\n\t\t/* @return {string} Update button label text /\n\t\tupdateButtonText() {\n\t\t\tif (this.updating) {\n\t\t\t\treturn t('nextcloud-vue', 'Updating…')\n\t\t\t}\n\t\t\tif (this.isUpToDate) {\n\t\t\t\treturn t('nextcloud-vue', 'Up to date')\n\t\t\t}\n\t\t\treturn t('nextcloud-vue', 'Update')\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\thandleUpdateClick() {\n\t\t\tif (!this.updateButtonDisabled) {\n\t\t\t\tthis.$emit('update')\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-version-info__card {\n\tbackground: var(--color-background-hover);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius-large);\n\tpadding: 20px;\n\tmargin-bottom: 20px;\n}\n\n.cn-version-info__card h4 {\n\tmargin: 0 0 16px 0;\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n}\n\n.cn-version-info__details {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 12px;\n}\n\n.cn-version-info__item {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tpadding: 8px 0;\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.cn-version-info__item:last-child {\n\tborder-bottom: none;\n}\n\n.cn-version-info__label {\n\tfont-weight: 500;\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 14px;\n}\n\n.cn-version-info__value {\n\tfont-family: 'Courier New', Courier, monospace;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n\tfont-size: 14px;\n}\n\n/ Status classes for values */\n.cn-version-info__status--ok {\n\tcolor: var(--color-success);\n\tfont-weight: 600;\n}\n\n.cn-version-info__status--warning {\n\tcolor: var(--color-warning);\n\tfont-weight: 600;\n}\n\n.cn-version-info__status--error {\n\tcolor: var(--color-error);\n\tfont-weight: 600;\n}\n\n@media (max-width: 768px) {\n\t.cn-version-info__item {\n\t\tflex-direction: column;\n\t\talign-items: flex-start;\n\t\tgap: 4px;\n\t}\n\n\t.cn-version-info__label {\n\t\tfont-weight: 600;\n\t}\n\n\t.cn-version-info__value {\n\t\tword-break: break-all;\n\t}\n}\n</style>\n"],"names":["_createBlock","_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString","_openBlock","_Fragment","_renderList","_renderSlot","_createTextVNode"],"mappings":"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"}

package/dist/esm/components/CnWidgetWrapper/CnWidgetWrapper.vue.js CHANGED Viewed

@@ -2,7 +2,7 @@ import script from './CnWidgetWrapper.vue2.js';
 import { render } from './CnWidgetWrapper.vue3.js';
 script.render = render;
-script.__scopeId = "data-v-4f6c55f6";
+script.__scopeId = "data-v-cc60e4c8";
 const __sfc_main = script;
 export { __sfc_main as default };

package/dist/esm/components/CnWidgetWrapper/CnWidgetWrapper.vue2.js CHANGED Viewed

@@ -48,6 +48,18 @@ var script = {
 		CnActionsMenu: __sfc_main,
 	},
+	provide() {
+		return {
+			/**
+			 * Whether this card draws a title row, so a widget inside it can
+			 * leave out a heading of its own (nc-widget-header).
+			 *
+			 * @return {boolean}
+			 */
+			cnWidgetTitled: () => this.titleVisible && Boolean(this.displayTitle),
+		}
+	},
 	inject: {
 		/**
 		 * Host translate function provided by CnAppRoot as
@@ -75,6 +87,17 @@ var script = {
 			default: '',
 		},
+		/**
+		 * A muted line under the title, such as the period a chart covers.
+		 * Run through the host translate function. Empty draws none.
+		 *
+		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-dashboard-widget-card-can-carry-a-line-under-its-title
+		 */
+		subtitle: {
+			type: String,
+			default: '',
+		},
 		/** Whether to show the header with title */
 		showTitle: {
 			type: Boolean,
@@ -544,6 +567,15 @@ var script = {
 			return this.eyebrow ? this.effectiveTranslate(this.eyebrow) : ''
 		},
+		/**
+		 * The subtitle run through the host translate function.
+		 *
+		 * @return {string}
+		 */
+		resolvedSubtitle() {
+			return this.subtitle ? this.effectiveTranslate(this.subtitle) : ''
+		},
 		/**
 		 * The RENDERED widget title — `displayTitle` run through the host
 		 * translate function. Kept separate from `displayTitle` on purpose: