@conduction/nextcloud-vue 2.101.0 → 2.103.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"CnSearchSelect.vue2.js","sources":["../../../../src/components/CnSearchSelect/CnSearchSelect.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n<template>\n\t<div class=\"cn-search-select\" :class=\"{ 'cn-search-select--label-outside': labelOutside }\" data-testid=\"cn-search-select\">\n\t\t<NcSelect\n\t\t\t:inputId=\"inputId\"\n\t\t\t:inputLabel=\"inputLabel\"\n\t\t\t:labelOutside=\"labelOutside\"\n\t\t\t:modelValue=\"selectedOption\"\n\t\t\t:options=\"options\"\n\t\t\t:loading=\"loading\"\n\t\t\t:clearable=\"clearable\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:placeholder=\"resolvedPlaceholder\"\n\t\t\t:filterable=\"filterable\"\n\t\t\tlabel=\"label\"\n\t\t\t@search=\"onSearch\"\n\t\t\t@update:modelValue=\"onInput\">\n\t\t\t<template #option=\"option\">\n\t\t\t\t<span class=\"cn-search-select__row\" data-testid=\"cn-search-select-row\">\n\t\t\t\t\t<span\n\t\t\t\t\t\tv-if=\"option.avatar || option.icon\"\n\t\t\t\t\t\tclass=\"cn-search-select__lead\"\n\t\t\t\t\t\t:class=\"{ 'cn-search-select__lead--avatar': option.avatar && !option.icon }\"\n\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t\t<CnIcon v-if=\"option.icon\" :name=\"option.icon\" :size=\"18\" />\n\t\t\t\t\t\t<template v-else>{{ initialsOf(option) }}</template>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span class=\"cn-search-select__text\">\n\t\t\t\t\t\t<span class=\"cn-search-select__name\">{{ option.label }}</span>\n\t\t\t\t\t\t<span v-if=\"option.secondary\" class=\"cn-search-select__secondary\">{{ option.secondary }}</span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<Check\n\t\t\t\t\t\tv-if=\"isSelected(option)\"\n\t\t\t\t\t\tclass=\"cn-search-select__check\"\n\t\t\t\t\t\t:size=\"18\"\n\t\t\t\t\t\tdata-testid=\"cn-search-select-check\" />\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t</NcSelect>\n\t\t<Magnify class=\"cn-search-select__magnifier\" :size=\"18\" aria-hidden=\"true\" />\n\t</div>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcSelect } from '@nextcloud/vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport Magnify from 'vue-material-design-icons/Magnify.vue'\nimport CnIcon from '../CnIcon/CnIcon.vue'\nimport { initialsOf } from '../../utils/initials.js'\n\n/**\n * CnSearchSelect — a single picker drawn as a search field: a magnifier\n * instead of the chevron, and results as rows with an icon or initials, a\n * name, a secondary line and a check on the chosen one (boards DqOverdragen\n * \"Nieuw team\", DqNieuweZaak \"Aanvrager\").\n *\n * Each option is `{ id, label, secondary?, icon?, avatar? }`: `icon` names a\n * CnIcon, `avatar: true` draws the label's initials in a circle. The value is\n * the option's `id` (or `value`); `update:modelValue` emits that id, or null\n * when cleared. Searching is the host's: listen to `search` and pass new\n * `options`, with `filterable: false` when the host already filtered them.\n *\n * ```vue\n * <CnSearchSelect\n *   v-model=\"team\"\n *   inputLabel=\"Nieuw team\"\n *   :options=\"[{ id: 'legal', label: 'Juridische zaken', secondary: '6 leden · bezwaar, beroep en Woo-advies', avatar: true }]\" />\n * ```\n */\nexport default {\n\tname: 'CnSearchSelect',\n\n\tcomponents: { Check, CnIcon, Magnify, NcSelect },\n\n\tprops: {\n\t\t/** The chosen option's id, or the option itself. */\n\t\tmodelValue: {\n\t\t\ttype: [String, Number, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The options: `{ id, label, secondary?, icon?, avatar? }`.\n\t\t *\n\t\t * @type {Array<{id: (string|number), label: string, secondary?: string, icon?: string, avatar?: boolean}>}\n\t\t */\n\t\toptions: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** The field's label. */\n\t\tinputLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Draw the label above the field instead of inside it. */\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** The input's id. */\n\t\tinputId: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/** Placeholder text; defaults to \"Search…\". */\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Show the loading spinner. */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** Offer a clear button. */\n\t\tclearable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/** Disable the field. */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** Filter the options on the typed text; false when the host searches. */\n\t\tfilterable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\temits: ['update:modelValue', 'search'],\n\n\tcomputed: {\n\t\t/**\n\t\t * The option matching `modelValue`, or a bare one carrying it.\n\t\t *\n\t\t * @return {object|null}\n\t\t */\n\t\tselectedOption() {\n\t\t\tconst value = this.modelValue\n\t\t\tif (value === null || value === undefined || value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tif (typeof value === 'object') {\n\t\t\t\treturn value\n\t\t\t}\n\t\t\treturn this.options.find((o) => this.idOf(o) === String(value)) || { id: value, label: String(value) }\n\t\t},\n\n\t\t/** @return {string} The placeholder. */\n\t\tresolvedPlaceholder() {\n\t\t\treturn this.placeholder || t('nextcloud-vue', 'Search…')\n\t\t},\n\t},\n\n\tmethods: {\n\t\tinitialsOf(option) {\n\t\t\treturn initialsOf(option.label || '')\n\t\t},\n\n\t\t/**\n\t\t * @param {object} option An option.\n\t\t * @return {string} Its id as a string, '' without one.\n\t\t */\n\t\tidOf(option) {\n\t\t\tconst id = option && (option.id ?? option.value)\n\t\t\treturn id === null || id === undefined ? '' : String(id)\n\t\t},\n\n\t\t/**\n\t\t * @param {object} option An option.\n\t\t * @return {boolean} Whether it is the chosen one.\n\t\t */\n\t\tisSelected(option) {\n\t\t\treturn this.selectedOption !== null && this.idOf(option) !== '' && this.idOf(option) === this.idOf(this.selectedOption)\n\t\t},\n\n\t\t/**\n\t\t * @param {object|null} option The picked option.\n\t\t */\n\t\tonInput(option) {\n\t\t\tconst id = option ? (option.id ?? option.value ?? null) : null\n\t\t\t/** @event update:modelValue The picked option's id, or null when cleared. */\n\t\t\tthis.$emit('update:modelValue', id)\n\t\t},\n\n\t\t/**\n\t\t * @param {string} query The typed text.\n\t\t */\n\t\tonSearch(query) {\n\t\t\t/** @event search The typed text, for a host that searches itself. */\n\t\t\tthis.$emit('search', query)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-search-select {\n\tposition: relative;\n}\n\n/* The magnifier sits where the chevron was: in the field, at its end. */\n.cn-search-select__magnifier {\n\tposition: absolute;\n\tinset-inline-end: 12px;\n\tbottom: 0;\n\theight: var(--default-clickable-area, 34px);\n\tdisplay: flex;\n\talign-items: center;\n\tcolor: var(--color-text-maxcontrast);\n\tpointer-events: none;\n}\n\n.cn-search-select :deep(.vs__open-indicator),\n.cn-search-select :deep(.vs__open-indicator-button) {\n\tdisplay: none;\n}\n\n.cn-search-select :deep(.vs__actions) {\n\tpadding-inline-end: 36px;\n}\n\n.cn-search-select__row {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n\twidth: 100%;\n\tmin-width: 0;\n\tpadding: 4px 0;\n}\n\n.cn-search-select__lead {\n\tflex: 0 0 32px;\n\twidth: 32px;\n\theight: 32px;\n\tborder-radius: 50%;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: var(--color-primary-element-light);\n\tcolor: var(--color-primary-element-light-text);\n\tfont-size: 13px;\n\tfont-weight: 600;\n}\n\n.cn-search-select__text {\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex: 1 1 auto;\n\tmin-width: 0;\n}\n\n.cn-search-select__name {\n\tfont-weight: 600;\n\toverflow-wrap: anywhere;\n}\n\n.cn-search-select__secondary {\n\tfont-size: 13px;\n\tcolor: var(--color-text-maxcontrast);\n\toverflow-wrap: anywhere;\n}\n\n.cn-search-select__check {\n\tflex: 0 0 auto;\n\tcolor: var(--color-primary-element);\n}\n</style>\n"],"names":["CnIcon","t"],"mappings":";;;;;;;AAsDA;;;;AAIC;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;AAGA;;AAED,aAAe;AACd,CAAA,IAAI,EAAE,gBAAgB;;AAEtB,CAAA,UAAU,EAAE,EAAE,KAAK,UAAEA,UAAM,EAAE,OAAO,EAAE,UAAU;;AAEhD,CAAA,KAAK,EAAE;AACN;EACA,UAAU,EAAE;GACX,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;GAC9B,OAAO,EAAE,IAAI;GACb;;AAED;;AAEC;;;AAGD,EAAA,OAAO,EAAE;GACR,IAAI,EAAE,KAAK;AACX,GAAA,OAAO,EAAE,MAAM,EAAE;GACjB;;AAED;EACA,UAAU,EAAE;GACX,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;;EAGD,YAAY,EAAE;GACb,IAAI,EAAE,OAAO;GACb,OAAO,EAAE,KAAK;GACd;;AAED;AACA,EAAA,OAAO,EAAE;GACR,IAAI,EAAE,MAAM;AACZ,GAAA,OAAO,EAAE,SAAS;GAClB;;AAED;EACA,WAAW,EAAE;GACZ,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;;AAGD,EAAA,OAAO,EAAE;GACR,IAAI,EAAE,OAAO;GACb,OAAO,EAAE,KAAK;GACd;;;EAGD,SAAS,EAAE;GACV,IAAI,EAAE,OAAO;GACb,OAAO,EAAE,IAAI;GACb;;AAED;AACA,EAAA,QAAQ,EAAE;GACT,IAAI,EAAE,OAAO;GACb,OAAO,EAAE,KAAK;GACd;;;EAGD,UAAU,EAAE;GACX,IAAI,EAAE,OAAO;GACb,OAAO,EAAE,IAAI;GACb;EACD;;AAED,CAAA,KAAK,EAAE,CAAC,mBAAmB,EAAE,QAAQ,CAAC;;AAEtC,CAAA,QAAQ,EAAE;AACT;;AAEC;AACA;;AAED,EAAA,cAAc,GAAG;GAChB,MAAM,KAAI,GAAI,IAAI,CAAC,WAAS;GAC5B,IAAI,KAAI,KAAM,QAAQ,KAAM,KAAI,SAAU,IAAG,KAAI,KAAM,EAAE,EAAE;AAC1D,IAAA,OAAO,IAAG;AACX,IAAA;GACA,IAAI,OAAO,UAAU,QAAQ,EAAE;IAC9B,OAAO,KAAI;AACZ,IAAA;AACA,GAAA,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA,KAAM,MAAM,CAAC,KAAK,CAAC,CAAA,IAAK,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAE,EAAA;GACrG;;AAED;AACA,EAAA,mBAAmB,GAAG;GACrB,OAAO,IAAI,CAAC,WAAY,IAAGC,SAAC,CAAC,eAAe,EAAE,SAAS,CAAA;GACvD;EACD;;AAED,CAAA,OAAO,EAAE;AACR,EAAA,UAAU,CAAC,MAAM,EAAE;AAClB,GAAA,OAAO,UAAU,CAAC,MAAM,CAAC,KAAI,IAAK,EAAE,CAAA;GACpC;;AAED;;AAEC;;EAED,IAAI,CAAC,MAAM,EAAE;AACZ,GAAA,MAAM,KAAK,MAAK,KAAM,MAAM,CAAC,EAAG,IAAG,MAAM,CAAC,KAAK,EAAA;AAC/C,GAAA,OAAO,OAAO,IAAK,IAAG,EAAC,KAAM,YAAY,KAAK,MAAM,CAAC,EAAE,CAAA;GACvD;;AAED;;AAEC;;AAED,EAAA,UAAU,CAAC,MAAM,EAAE;GAClB,OAAO,IAAI,CAAC,cAAe,KAAI,IAAG,IAAK,IAAI,CAAC,IAAI,CAAC,MAAM,CAAA,KAAM,EAAC,IAAK,IAAI,CAAC,IAAI,CAAC,MAAM,CAAE,KAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAA;GACtH;;AAED;AACC;;AAED,EAAA,OAAO,CAAC,MAAM,EAAE;GACf,MAAM,EAAG,GAAE,MAAO,IAAG,MAAM,CAAC,EAAC,IAAK,MAAM,CAAC,SAAS,IAAI,IAAI,KAAG;AAC7D;AACA,GAAA,IAAI,CAAC,KAAK,CAAC,mBAAmB,EAAE,EAAE,EAAA;GAClC;;AAED;AACC;;AAED,EAAA,QAAQ,CAAC,KAAK,EAAE;;GAEf,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,EAAA;GAC1B;EACD;AACF;;;;"}

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

@@ -0,0 +1,85 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, createElementVNode, createBlock, Fragment, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
+
+const _hoisted_1 = {
+  class: "cn-search-select__row",
+  "data-testid": "cn-search-select-row"
+};
+const _hoisted_2 = { class: "cn-search-select__text" };
+const _hoisted_3 = { class: "cn-search-select__name" };
+const _hoisted_4 = {
+  key: 0,
+  class: "cn-search-select__secondary"
+};
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CnIcon = resolveComponent("CnIcon");
+  const _component_Check = resolveComponent("Check");
+  const _component_NcSelect = resolveComponent("NcSelect");
+  const _component_Magnify = resolveComponent("Magnify");
+
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(["cn-search-select", { 'cn-search-select--label-outside': $props.labelOutside }]),
+    "data-testid": "cn-search-select"
+  }, [
+    createVNode(_component_NcSelect, {
+      inputId: $props.inputId,
+      inputLabel: $props.inputLabel,
+      labelOutside: $props.labelOutside,
+      modelValue: $options.selectedOption,
+      options: $props.options,
+      loading: $props.loading,
+      clearable: $props.clearable,
+      disabled: $props.disabled,
+      placeholder: $options.resolvedPlaceholder,
+      filterable: $props.filterable,
+      label: "label",
+      onSearch: $options.onSearch,
+      "onUpdate:modelValue": $options.onInput
+    }, {
+      option: withCtx((option) => [
+        createElementVNode("span", _hoisted_1, [
+          (option.avatar || option.icon)
+            ? (openBlock(), createElementBlock("span", {
+                key: 0,
+                class: normalizeClass(["cn-search-select__lead", { 'cn-search-select__lead--avatar': option.avatar && !option.icon }]),
+                "aria-hidden": "true"
+              }, [
+                (option.icon)
+                  ? (openBlock(), createBlock(_component_CnIcon, {
+                      key: 0,
+                      name: option.icon,
+                      size: 18
+                    }, null, 8 /* PROPS */, ["name"]))
+                  : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                      createTextVNode(toDisplayString($options.initialsOf(option)), 1 /* TEXT */)
+                    ], 64 /* STABLE_FRAGMENT */))
+              ], 2 /* CLASS */))
+            : createCommentVNode("v-if", true),
+          createElementVNode("span", _hoisted_2, [
+            createElementVNode("span", _hoisted_3, toDisplayString(option.label), 1 /* TEXT */),
+            (option.secondary)
+              ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(option.secondary), 1 /* TEXT */))
+              : createCommentVNode("v-if", true)
+          ]),
+          ($options.isSelected(option))
+            ? (openBlock(), createBlock(_component_Check, {
+                key: 1,
+                class: "cn-search-select__check",
+                size: 18,
+                "data-testid": "cn-search-select-check"
+              }))
+            : createCommentVNode("v-if", true)
+        ])
+      ]),
+      _: 1 /* STABLE */
+    }, 8 /* PROPS */, ["inputId", "inputLabel", "labelOutside", "modelValue", "options", "loading", "clearable", "disabled", "placeholder", "filterable", "onSearch", "onUpdate:modelValue"]),
+    createVNode(_component_Magnify, {
+      class: "cn-search-select__magnifier",
+      size: 18,
+      "aria-hidden": "true"
+    })
+  ], 2 /* CLASS */))
+}
+
+export { render };
+//# sourceMappingURL=CnSearchSelect.vue3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CnSearchSelect.vue3.js","sources":["../../../../src/components/CnSearchSelect/CnSearchSelect.vue?vue&type=template&id=6cd354af&lang.js"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n<template>\n\t<div class=\"cn-search-select\" :class=\"{ 'cn-search-select--label-outside': labelOutside }\" data-testid=\"cn-search-select\">\n\t\t<NcSelect\n\t\t\t:inputId=\"inputId\"\n\t\t\t:inputLabel=\"inputLabel\"\n\t\t\t:labelOutside=\"labelOutside\"\n\t\t\t:modelValue=\"selectedOption\"\n\t\t\t:options=\"options\"\n\t\t\t:loading=\"loading\"\n\t\t\t:clearable=\"clearable\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:placeholder=\"resolvedPlaceholder\"\n\t\t\t:filterable=\"filterable\"\n\t\t\tlabel=\"label\"\n\t\t\t@search=\"onSearch\"\n\t\t\t@update:modelValue=\"onInput\">\n\t\t\t<template #option=\"option\">\n\t\t\t\t<span class=\"cn-search-select__row\" data-testid=\"cn-search-select-row\">\n\t\t\t\t\t<span\n\t\t\t\t\t\tv-if=\"option.avatar || option.icon\"\n\t\t\t\t\t\tclass=\"cn-search-select__lead\"\n\t\t\t\t\t\t:class=\"{ 'cn-search-select__lead--avatar': option.avatar && !option.icon }\"\n\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t\t<CnIcon v-if=\"option.icon\" :name=\"option.icon\" :size=\"18\" />\n\t\t\t\t\t\t<template v-else>{{ initialsOf(option) }}</template>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span class=\"cn-search-select__text\">\n\t\t\t\t\t\t<span class=\"cn-search-select__name\">{{ option.label }}</span>\n\t\t\t\t\t\t<span v-if=\"option.secondary\" class=\"cn-search-select__secondary\">{{ option.secondary }}</span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<Check\n\t\t\t\t\t\tv-if=\"isSelected(option)\"\n\t\t\t\t\t\tclass=\"cn-search-select__check\"\n\t\t\t\t\t\t:size=\"18\"\n\t\t\t\t\t\tdata-testid=\"cn-search-select-check\" />\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t</NcSelect>\n\t\t<Magnify class=\"cn-search-select__magnifier\" :size=\"18\" aria-hidden=\"true\" />\n\t</div>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcSelect } from '@nextcloud/vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport Magnify from 'vue-material-design-icons/Magnify.vue'\nimport CnIcon from '../CnIcon/CnIcon.vue'\nimport { initialsOf } from '../../utils/initials.js'\n\n/**\n * CnSearchSelect — a single picker drawn as a search field: a magnifier\n * instead of the chevron, and results as rows with an icon or initials, a\n * name, a secondary line and a check on the chosen one (boards DqOverdragen\n * \"Nieuw team\", DqNieuweZaak \"Aanvrager\").\n *\n * Each option is `{ id, label, secondary?, icon?, avatar? }`: `icon` names a\n * CnIcon, `avatar: true` draws the label's initials in a circle. The value is\n * the option's `id` (or `value`); `update:modelValue` emits that id, or null\n * when cleared. Searching is the host's: listen to `search` and pass new\n * `options`, with `filterable: false` when the host already filtered them.\n *\n * ```vue\n * <CnSearchSelect\n *   v-model=\"team\"\n *   inputLabel=\"Nieuw team\"\n *   :options=\"[{ id: 'legal', label: 'Juridische zaken', secondary: '6 leden · bezwaar, beroep en Woo-advies', avatar: true }]\" />\n * ```\n */\nexport default {\n\tname: 'CnSearchSelect',\n\n\tcomponents: { Check, CnIcon, Magnify, NcSelect },\n\n\tprops: {\n\t\t/** The chosen option's id, or the option itself. */\n\t\tmodelValue: {\n\t\t\ttype: [String, Number, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The options: `{ id, label, secondary?, icon?, avatar? }`.\n\t\t *\n\t\t * @type {Array<{id: (string|number), label: string, secondary?: string, icon?: string, avatar?: boolean}>}\n\t\t */\n\t\toptions: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** The field's label. */\n\t\tinputLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Draw the label above the field instead of inside it. */\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** The input's id. */\n\t\tinputId: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/** Placeholder text; defaults to \"Search…\". */\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Show the loading spinner. */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** Offer a clear button. */\n\t\tclearable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/** Disable the field. */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** Filter the options on the typed text; false when the host searches. */\n\t\tfilterable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\temits: ['update:modelValue', 'search'],\n\n\tcomputed: {\n\t\t/**\n\t\t * The option matching `modelValue`, or a bare one carrying it.\n\t\t *\n\t\t * @return {object|null}\n\t\t */\n\t\tselectedOption() {\n\t\t\tconst value = this.modelValue\n\t\t\tif (value === null || value === undefined || value === '') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tif (typeof value === 'object') {\n\t\t\t\treturn value\n\t\t\t}\n\t\t\treturn this.options.find((o) => this.idOf(o) === String(value)) || { id: value, label: String(value) }\n\t\t},\n\n\t\t/** @return {string} The placeholder. */\n\t\tresolvedPlaceholder() {\n\t\t\treturn this.placeholder || t('nextcloud-vue', 'Search…')\n\t\t},\n\t},\n\n\tmethods: {\n\t\tinitialsOf(option) {\n\t\t\treturn initialsOf(option.label || '')\n\t\t},\n\n\t\t/**\n\t\t * @param {object} option An option.\n\t\t * @return {string} Its id as a string, '' without one.\n\t\t */\n\t\tidOf(option) {\n\t\t\tconst id = option && (option.id ?? option.value)\n\t\t\treturn id === null || id === undefined ? '' : String(id)\n\t\t},\n\n\t\t/**\n\t\t * @param {object} option An option.\n\t\t * @return {boolean} Whether it is the chosen one.\n\t\t */\n\t\tisSelected(option) {\n\t\t\treturn this.selectedOption !== null && this.idOf(option) !== '' && this.idOf(option) === this.idOf(this.selectedOption)\n\t\t},\n\n\t\t/**\n\t\t * @param {object|null} option The picked option.\n\t\t */\n\t\tonInput(option) {\n\t\t\tconst id = option ? (option.id ?? option.value ?? null) : null\n\t\t\t/** @event update:modelValue The picked option's id, or null when cleared. */\n\t\t\tthis.$emit('update:modelValue', id)\n\t\t},\n\n\t\t/**\n\t\t * @param {string} query The typed text.\n\t\t */\n\t\tonSearch(query) {\n\t\t\t/** @event search The typed text, for a host that searches itself. */\n\t\t\tthis.$emit('search', query)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-search-select {\n\tposition: relative;\n}\n\n/* The magnifier sits where the chevron was: in the field, at its end. */\n.cn-search-select__magnifier {\n\tposition: absolute;\n\tinset-inline-end: 12px;\n\tbottom: 0;\n\theight: var(--default-clickable-area, 34px);\n\tdisplay: flex;\n\talign-items: center;\n\tcolor: var(--color-text-maxcontrast);\n\tpointer-events: none;\n}\n\n.cn-search-select :deep(.vs__open-indicator),\n.cn-search-select :deep(.vs__open-indicator-button) {\n\tdisplay: none;\n}\n\n.cn-search-select :deep(.vs__actions) {\n\tpadding-inline-end: 36px;\n}\n\n.cn-search-select__row {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n\twidth: 100%;\n\tmin-width: 0;\n\tpadding: 4px 0;\n}\n\n.cn-search-select__lead {\n\tflex: 0 0 32px;\n\twidth: 32px;\n\theight: 32px;\n\tborder-radius: 50%;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: var(--color-primary-element-light);\n\tcolor: var(--color-primary-element-light-text);\n\tfont-size: 13px;\n\tfont-weight: 600;\n}\n\n.cn-search-select__text {\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex: 1 1 auto;\n\tmin-width: 0;\n}\n\n.cn-search-select__name {\n\tfont-weight: 600;\n\toverflow-wrap: anywhere;\n}\n\n.cn-search-select__secondary {\n\tfont-size: 13px;\n\tcolor: var(--color-text-maxcontrast);\n\toverflow-wrap: anywhere;\n}\n\n.cn-search-select__check {\n\tflex: 0 0 auto;\n\tcolor: var(--color-primary-element);\n}\n</style>\n"],"names":["_normalizeClass","_withCtx","_createElementVNode","_createElementBlock","_createBlock","_Fragment","_createTextVNode","_toDisplayString","_openBlock"],"mappings":";;;AAyBU,EAAA,KAAM,EAAA,uBAAuB;AAAC,EAAA,aAAW,EAAC,sBAAsB;;AAShE,MAAA,UAAA,GAAA,EAAA,KAAA,EAAA,wBAAA,GAAA;AACE,MAAA,UAAA,GAAA,EAAA,KAAK,EAAC,wBAAY,GAAA;;;AACM,EAAA,KAAA,EAAA,6BAAA;;;;;;;;;;IA3B9B,KAAK,EAAAA,cAAA,CAAA,CAAC,kBAAkB,EAAA,EAAA,iCAAA,EAAA,MAAA,CAAA,YAAA,EAAA,CAAA,CAAA;AAAA,IAAA,aAAA,EAAA,kBAAA;;;AAE1B,MAAA,OAAO,EAAE,MAAO,CAAA,OAAA;AAChB,MAAA,UAAU,EAAE,MAAI,CAAA,UAAA;AAChB,MAAA,YAAY,EAAE,MAAM,CAAA,YAAA;AACpB,MAAA,UAAU,EAAE,QAAM,CAAA,cAAA;AAClB,MAAA,OAAO,EAAE,MAAO,CAAA,OAAA;AAChB,MAAA,OAAO,EAAE,MAAO,CAAA,OAAA;AAChB,MAAA,SAAS,EAAE,MAAA,CAAA,SAAA;AACX,MAAA,QAAQ,EAAE,MAAM,CAAA,QAAA;AAChB,MAAA,WAAW,EAAE,QAAc,CAAA,mBAAA;AAC3B,MAAA,UAAU,EAAE,MAAU,CAAA,UAAA;AACtB,MAAA,KAAI,EAAA,OAAQ;cACP,EAAA,QAAA,CAAA,QAAA;AACH,MAAA,qBAAe,EAAE,QAAO,CAAA,OAAA;;MAChB,MAAM,EAAAC,OAAA,CACd,CAkBA,MAnBsB,KAAA;AACtB,QAAAC,kBAAA,CAkBA,QAlBA,UAkBA,EAAA;AAhBM,UAAA,CAAA,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI;4BADlCC,kBAOK,CAAA,MAAA,EAAA;;gBALL,KAAK,EAAAH,cAAA,CAAA,CAAC,wBAAwB,EACzB,EAAA,gCAAA,EAAA,MAAA,CAAA,MAAA,IAAA,CAAA,MAAA,CAAA,IAAA,EAAA,CAAA,CAAA;AACL,gBAAA,aAAW,EAAC,MAAM;;AACJ,gBAAA,CAAA,MAAM,CAAC,IAAI;kCAAzBI,WAA4D,CAAA,iBAAA,EAAA;;sBAAhC,IAAI,EAAE,MAAM,CAAC,IAAI;AAAG,sBAAA,IAAK,EAAC,EAAE;;kCACxDD,kBAAoD,CAAAE,QAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,EAAA;AAAhC,sBAAAC,eAAA,CAAAC,eAAA,CAAA,QAAA,CAAA,UAAU,CAAC,MAAM,CAAA,CAAA,EAAA,CAAA,YAAA;;;;AAEtC,UAAAL,kBAAA,CAGO,QAHP,UAGO,EAAA;AAFN,YAAAA,kBAAA,CAAwB,MAAxB,EAAA,UAAwB,EAAAK,eAAA,CAAA,MAAA,CAAA,KAAA,CAAA,EAAA,CAAA,YAAA;AACZ,YAAA,CAAA,MAAM,CAAC,SAAS;AAA5B,iBAAAC,SAAA,EAAA,EAAAL,kBAAA,CAA8B,MAA9B,EAAA,UAA8B,EAAAI,eAAA,CAAA,MAAA,CAAA,SAAA,CAAA,EAAA,CAAA,YAAA;;;AAG1B,UAAA,CAAA,QAAA,CAAA,UAAA,CAAA,MAAA,CAAA;4BADJH,WAIuC,CAAA,gBAAA,EAAA;;AAFvC,gBAAA,KAAK,EAAC,yBAAC;AACN,gBAAA,IAAI,EAAC,EAAA;AACN,gBAAA,aAAW,EAAC,wBAAwB;;;;;;;;;;;;;;;;;"}

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

@@ -2,7 +2,7 @@ import script from './CnSetupWizard.vue2.js';
 import { render } from './CnSetupWizard.vue3.js';
 
 script.render = render;
-script.__scopeId = "data-v-44988d3d";
+script.__scopeId = "data-v-130330d9";
 const __sfc_main = script;
 
 export { __sfc_main as default };

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

@@ -249,14 +249,16 @@ var script = {
 	computed: {
 		/**
 		 * The title actually rendered by CnWizardDialog: "Set up {appName}"
-		 * when a display name was passed, otherwise whatever `dialogTitle`
-		 * resolves to (a caller override, or its own generic default).
+		 * when a display name was passed (the name through the host's
+		 * translate), otherwise whatever `dialogTitle` resolves to (a caller
+		 * override, or its own generic default). In the board look it is the
+		 * eyebrow's context and the current step's title is the heading.
 		 *
 		 * @return {string}
 		 */
 		resolvedDialogTitle() {
 			return this.appName
-				? translate('nextcloud-vue', 'Set up {app}', { app: this.appName })
+				? translate('nextcloud-vue', 'Set up {app}', { app: this.cnTranslate(this.appName) })
 				: this.dialogTitle
 		},
 
@@ -512,6 +514,12 @@ var script = {
 		},
 	},
 
+	created() {
+		for (const step of this.setupSteps) {
+			this.applyDefault(step);
+		}
+	},
+
 	mounted() {
 		// Covers a RESUMED wizard opening straight onto its run-action step
 		// (`initialStepId`) — `onStepChange` only fires on later navigation,
@@ -729,13 +737,14 @@ var script = {
 		},
 
 		/**
-		 * Whether a choice step renders as a card grid rather than a dropdown.
+		 * Whether a choice step renders as CnChoiceCards (a card grid, or radio
+		 * rows with `display: "rows"`) rather than a dropdown.
 		 *
 		 * @param {object} step The choice step.
-		 * @return {boolean} True for `display: "cards"`.
+		 * @return {boolean} True for `display: "cards"` and `display: "rows"`.
 		 */
 		isCardChoice(step) {
-			return step.display === 'cards'
+			return step.display === 'cards' || step.display === 'rows'
 		},
 
 		/**
@@ -839,6 +848,36 @@ var script = {
 			}
 		},
 
+		/**
+		 * Preselect a `choice` step's `default` option. Skipped once the user
+		 * picked here, when a value is already chosen, and for a step the
+		 * server already completed (its stored value must not be overwritten
+		 * by a Next). A card step holds the plain value; a dropdown holds the
+		 * option object, or the value while the options are still loading.
+		 *
+		 * @param {object} step The choice step.
+		 * @return {void}
+		 */
+		applyDefault(step) {
+			if (!step || step.type !== 'choice' || step.default === undefined || step.default === null) {
+				return
+			}
+			if (this.userTouched[step.id] === true || this.hasChoice(step) || this.isServerDone(step.id)) {
+				return
+			}
+			const wanted = step.multiple === true ? [].concat(step.default) : step.default;
+			if (this.isCardChoice(step)) {
+				this.choiceModel[step.id] = wanted;
+			} else {
+				const options = this.optionsFor(step);
+				const pick = (value) => options.find((o) => o.value === value) || value;
+				this.choiceModel[step.id] = Array.isArray(wanted) ? wanted.map(pick) : pick(wanted);
+			}
+			if (step.configKey) {
+				this.choiceValues[step.configKey] = this.scalarChoice(step);
+			}
+		},
+
 		/**
 		 * Auto-fill a `choice` step's suggested default from an earlier choice
 		 * (its `suggestFrom` configKey → `suggestMap[parentValue]`). No-op once
@@ -1145,6 +1184,15 @@ var script = {
 			if (step && step.suggestFrom) {
 				this.applySuggestion(step);
 			}
+			// A default seeded before a dropdown's options arrived is a bare
+			// value; swap in its option object now the step opens.
+			if (step && step.default !== undefined && this.userTouched[step.id] !== true && !this.isCardChoice(step)) {
+				const held = this.choiceModel[step.id];
+				const option = this.optionsFor(step).find((o) => o.value === held);
+				if (option && held !== null && typeof held !== 'object') {
+					this.choiceModel[step.id] = option;
+				}
+			}
 			this.maybeAutoRunStep(payload.stepId);
 			/**
 			 * @event step-change Emitted when the active step changes.