npm - @conduction/nextcloud-vue - Versions diffs - 2.124.0 → 2.125.0 - Mend

@conduction/nextcloud-vue 2.124.0 → 2.125.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 (66) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CnSavedViewsControl.vue2.js","sources":["../../../../src/components/CnSavedViewsControl/CnSavedViewsControl.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2026 Conduction B.V.\n - SPDX-License-Identifier: EUPL-1.2\n-->\n<template>\n\t<!--\n\t\tThe toolbar half of saved views. Under the board look the views are\n\t\ta row of chips that apply them; everywhere a \"Save view\" button saves\n\t\tthe current filters. Listing, editing, sharing and deleting live in the\n\t\tsidebar's Filters tab (CnSavedViewsPanel).\n\t-->\n\t<div\n\t\tv-if=\"isBoardLook && chipRows.length > 0\"\n\t\tclass=\"cn-saved-views__chips\"\n\t\trole=\"group\"\n\t\t:aria-label=\"t('nextcloud-vue', 'Saved views')\"\n\t\tdata-testid=\"cn-saved-views-chips\">\n\t\t<button\n\t\t\tv-for=\"row in chipRows\"\n\t\t\t:key=\"`chip-${row.view.id \|\| row.view.slug}`\"\n\t\t\ttype=\"button\"\n\t\t\tclass=\"cn-saved-views__chip\"\n\t\t\t:class=\"{ 'cn-saved-views__chip--selected': isSelected(row.view) }\"\n\t\t\t:aria-pressed=\"isSelected(row.view)\"\n\t\t\tdata-testid=\"cn-saved-views-chip\"\n\t\t\t:data-view-id=\"row.view.id \|\| row.view.slug\"\n\t\t\t@click=\"onApply(row.view)\">\n\t\t\t<span class=\"cn-saved-views__chip-name\">{{ row.view.name }}</span>\n\t\t\t<span\n\t\t\t\tv-if=\"countOf(row.view) !== null\"\n\t\t\t\tclass=\"cn-saved-views__chip-count\"\n\t\t\t\tdata-testid=\"cn-saved-views-chip-count\">{{ countOf(row.view) }}</span>\n\t\t</button>\n\t</div>\n\t<!-- The wrapper carries the board look's class, so the bar's row rules\n\t and the ghost-button rules reach the button the way they did when it\n\t was an NcActions trigger. -->\n\t<div v-bind=\"$attrs\" :class=\"{ 'cn-saved-views__save': isBoardLook }\">\n\t\t<NcButton\n\t\t\t:variant=\"isBoardLook ? 'tertiary' : 'secondary'\"\n\t\t\t:aria-label=\"t('nextcloud-vue', 'Save view')\"\n\t\t\tdata-testid=\"cn-saved-views-control\"\n\t\t\t@click=\"onSaveRequest\">\n\t\t\t<template #icon>\n\t\t\t\t<ContentSaveOutline :size=\"isBoardLook ? 14 : 20\" />\n\t\t\t</template>\n\t\t\t{{ t('nextcloud-vue', 'Save view') }}\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport { NcButton } from '@nextcloud/vue'\nimport ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'\nimport { normalizeLook } from '../../composables/useLook.js'\nimport { savedViewsList } from '../../mixins/savedViewsList.js'\n\n/*\n CnSavedViewsControl — the toolbar entry to saved views: a \"Save view\"\n * button and, under the board look, the saved views as chips that apply\n * them. Everything else (the list, edit, share, delete, add to menu) lives in\n * the index sidebar's `CnSavedViewsPanel`.\n \n Purely presentational: `CnIndexPage` owns fetching and every write.\n \n @event {object} apply — A chip was clicked; apply its view. Payload: the View API object.\n * @event {void} save-request — \"Save view\" clicked; open the save dialog.\n /\nexport default {\n\tname: 'CnSavedViewsControl',\n\n\tcomponents: { NcButton, ContentSaveOutline },\n\n\tmixins: [savedViewsList],\n\n\tinject: {\n\t\t/* The look CnAppRoot provides; `board` draws the views as chips. /\n\t\tcnLook: { default: 'nextcloud' },\n\t},\n\n\t// The chips and the button are two roots under the board look.\n\tinheritAttrs: false,\n\n\temits: ['apply', 'save-request'],\n\n\tcomputed: {\n\t\t/* @return {boolean} Whether the saved views draw as chips. /\n\t\tisBoardLook() {\n\t\t\treturn normalizeLook(this.cnLook) === 'board'\n\t\t},\n\n\t\t/* @return {Array<object>} The top level of the tree, in tree order. /\n\t\tchipRows() {\n\t\t\treturn this.rows.filter((row) => row.depth === 0)\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonApply(view) {\n\t\t\t/\n\t\t\t @event apply A chip was clicked; apply its stored state.\n\t\t\t * @type {object}\n\t\t\t /\n\t\t\tthis.$emit('apply', view)\n\t\t},\n\n\t\tonSaveRequest() {\n\t\t\t/* @event save-request \"Save view\" clicked; open the save dialog. */\n\t\t\tthis.$emit('save-request')\n\t\t},\n\t},\n}\n</script>\n"],"names":[],"mappings":";;;;;AAyDA;;;AAGC;AACA;AACA;;AAEA;AACA;;;AAGD,aAAe;CACd,IAAI,EAAE,qBAAqB;;AAE3B,CAAA,UAAU,EAAE,EAAE,QAAQ,EAAE,oBAAoB;;CAE5C,MAAM,EAAE,CAAC,cAAc,CAAC;;AAExB,CAAA,MAAM,EAAE;;EAEP,MAAM,EAAE,EAAE,OAAO,EAAE,WAAU,EAAG;EAChC;;;AAGD,CAAA,YAAY,EAAE,KAAK;;AAEnB,CAAA,KAAK,EAAE,CAAC,OAAO,EAAE,cAAc,CAAC;;AAEhC,CAAA,QAAQ,EAAE;;EAET,WAAW,GAAG;AACb,GAAA,OAAO,aAAa,CAAC,IAAI,CAAC,MAAM,CAAE,KAAI,OAAM;GAC5C;;;EAGD,QAAQ,GAAG;AACV,GAAA,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,UAAU,CAAC,CAAA;GAChD;EACD;;AAED,CAAA,OAAO,EAAE;EACR,OAAO,CAAC,IAAI,EAAE;AACb;;;;GAIA,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,EAAA;GACxB;;AAED,EAAA,aAAa,GAAG;;GAEf,IAAI,CAAC,KAAK,CAAC,cAAc,EAAA;GACzB;EACD;AACF;;;;"}
1	+ {"version":3,"file":"CnSavedViewsControl.vue2.js","sources":["../../../../src/components/CnSavedViewsControl/CnSavedViewsControl.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2026 Conduction B.V.\n - SPDX-License-Identifier: EUPL-1.2\n-->\n<template>\n\t<!--\n\t\tThe toolbar half of saved views. Under the board look the views are\n\t\ta row of chips that apply them; everywhere a \"Save view\" button saves\n\t\tthe current filters. Listing, editing, sharing and deleting live in the\n\t\tsidebar's Filters tab (CnSavedViewsPanel).\n\t-->\n\t<div\n\t\tv-if=\"isBoardLook && chips && chipRows.length > 0\"\n\t\tclass=\"cn-saved-views__chips\"\n\t\trole=\"group\"\n\t\t:aria-label=\"t('nextcloud-vue', 'Saved views')\"\n\t\tdata-testid=\"cn-saved-views-chips\">\n\t\t<button\n\t\t\tv-for=\"row in chipRows\"\n\t\t\t:key=\"`chip-${row.view.id \|\| row.view.slug}`\"\n\t\t\ttype=\"button\"\n\t\t\tclass=\"cn-saved-views__chip\"\n\t\t\t:class=\"{ 'cn-saved-views__chip--selected': isSelected(row.view) }\"\n\t\t\t:aria-pressed=\"isSelected(row.view)\"\n\t\t\tdata-testid=\"cn-saved-views-chip\"\n\t\t\t:data-view-id=\"row.view.id \|\| row.view.slug\"\n\t\t\t@click=\"onApply(row.view)\">\n\t\t\t<span class=\"cn-saved-views__chip-name\">{{ row.view.name }}</span>\n\t\t\t<span\n\t\t\t\tv-if=\"countOf(row.view) !== null\"\n\t\t\t\tclass=\"cn-saved-views__chip-count\"\n\t\t\t\tdata-testid=\"cn-saved-views-chip-count\">{{ countOf(row.view) }}</span>\n\t\t</button>\n\t</div>\n\t<!-- The wrapper carries the board look's class, so the bar's row rules\n\t and the ghost-button rules reach the button the way they did when it\n\t was an NcActions trigger. -->\n\t<div v-bind=\"$attrs\" :class=\"{ 'cn-saved-views__save': isBoardLook }\">\n\t\t<NcButton\n\t\t\t:variant=\"isBoardLook ? 'tertiary' : 'secondary'\"\n\t\t\t:aria-label=\"t('nextcloud-vue', 'Save view')\"\n\t\t\tdata-testid=\"cn-saved-views-control\"\n\t\t\t@click=\"onSaveRequest\">\n\t\t\t<template #icon>\n\t\t\t\t<ContentSaveOutline :size=\"isBoardLook ? 14 : 20\" />\n\t\t\t</template>\n\t\t\t{{ t('nextcloud-vue', 'Save view') }}\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport { NcButton } from '@nextcloud/vue'\nimport ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'\nimport { normalizeLook } from '../../composables/useLook.js'\nimport { savedViewsList } from '../../mixins/savedViewsList.js'\n\n/*\n CnSavedViewsControl — the toolbar entry to saved views: a \"Save view\"\n * button and, under the board look, the saved views as chips that apply\n * them. Everything else (the list, edit, share, delete, add to menu) lives in\n * the index sidebar's `CnSavedViewsPanel`.\n \n Purely presentational: `CnIndexPage` owns fetching and every write.\n \n @event {object} apply — A chip was clicked; apply its view. Payload: the View API object.\n * @event {void} save-request — \"Save view\" clicked; open the save dialog.\n /\nexport default {\n\tname: 'CnSavedViewsControl',\n\n\tcomponents: { NcButton, ContentSaveOutline },\n\n\tmixins: [savedViewsList],\n\n\tinject: {\n\t\t/* The look CnAppRoot provides; `board` draws the views as chips. /\n\t\tcnLook: { default: 'nextcloud' },\n\t},\n\n\t// The chips and the button are two roots under the board look.\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/\n\t\t Whether the board look draws the saved views as chips. `false`\n\t\t * leaves only Save view, for a page whose views live in the side\n\t\t * panel (DqZaken).\n\t\t /\n\t\tchips: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\temits: ['apply', 'save-request'],\n\n\tcomputed: {\n\t\t/* @return {boolean} Whether the saved views draw as chips. /\n\t\tisBoardLook() {\n\t\t\treturn normalizeLook(this.cnLook) === 'board'\n\t\t},\n\n\t\t/* @return {Array<object>} The top level of the tree, in tree order. /\n\t\tchipRows() {\n\t\t\treturn this.rows.filter((row) => row.depth === 0)\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonApply(view) {\n\t\t\t/\n\t\t\t @event apply A chip was clicked; apply its stored state.\n\t\t\t * @type {object}\n\t\t\t /\n\t\t\tthis.$emit('apply', view)\n\t\t},\n\n\t\tonSaveRequest() {\n\t\t\t/* @event save-request \"Save view\" clicked; open the save dialog. */\n\t\t\tthis.$emit('save-request')\n\t\t},\n\t},\n}\n</script>\n"],"names":[],"mappings":";;;;;AAyDA;;;AAGC;AACA;AACA;;AAEA;AACA;;;AAGD,aAAe;CACd,IAAI,EAAE,qBAAqB;;AAE3B,CAAA,UAAU,EAAE,EAAE,QAAQ,EAAE,oBAAoB;;CAE5C,MAAM,EAAE,CAAC,cAAc,CAAC;;AAExB,CAAA,MAAM,EAAE;;EAEP,MAAM,EAAE,EAAE,OAAO,EAAE,WAAU,EAAG;EAChC;;;AAGD,CAAA,YAAY,EAAE,KAAK;;AAEnB,CAAA,KAAK,EAAE;AACN;;;AAGC;;AAED,EAAA,KAAK,EAAE;GACN,IAAI,EAAE,OAAO;GACb,OAAO,EAAE,IAAI;GACb;EACD;;AAED,CAAA,KAAK,EAAE,CAAC,OAAO,EAAE,cAAc,CAAC;;AAEhC,CAAA,QAAQ,EAAE;;EAET,WAAW,GAAG;AACb,GAAA,OAAO,aAAa,CAAC,IAAI,CAAC,MAAM,CAAE,KAAI,OAAM;GAC5C;;;EAGD,QAAQ,GAAG;AACV,GAAA,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,UAAU,CAAC,CAAA;GAChD;EACD;;AAED,CAAA,OAAO,EAAE;EACR,OAAO,CAAC,IAAI,EAAE;AACb;;;;GAIA,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,EAAA;GACxB;;AAED,EAAA,aAAa,GAAG;;GAEf,IAAI,CAAC,KAAK,CAAC,cAAc,EAAA;GACzB;EACD;AACF;;;;"}

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

@@ -14,7 +14,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_NcButton = resolveComponent("NcButton");
   return (openBlock(), createElementBlock(Fragment, null, [
-    ($options.isBoardLook && $options.chipRows.length > 0)
+    ($options.isBoardLook && $props.chips && $options.chipRows.length > 0)
       ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: "cn-saved-views__chips",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CnSavedViewsControl.vue3.js","sources":["../../../../src/components/CnSavedViewsControl/CnSavedViewsControl.vue?vue&type=template&id=~~957c35b6~~&lang.js"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2026 Conduction B.V.\n - SPDX-License-Identifier: EUPL-1.2\n-->\n<template>\n\t<!--\n\t\tThe toolbar half of saved views. Under the board look the views are\n\t\ta row of chips that apply them; everywhere a \"Save view\" button saves\n\t\tthe current filters. Listing, editing, sharing and deleting live in the\n\t\tsidebar's Filters tab (CnSavedViewsPanel).\n\t-->\n\t<div\n\t\tv-if=\"isBoardLook && chipRows.length > 0\"\n\t\tclass=\"cn-saved-views__chips\"\n\t\trole=\"group\"\n\t\t:aria-label=\"t('nextcloud-vue', 'Saved views')\"\n\t\tdata-testid=\"cn-saved-views-chips\">\n\t\t<button\n\t\t\tv-for=\"row in chipRows\"\n\t\t\t:key=\"`chip-${row.view.id \|\| row.view.slug}`\"\n\t\t\ttype=\"button\"\n\t\t\tclass=\"cn-saved-views__chip\"\n\t\t\t:class=\"{ 'cn-saved-views__chip--selected': isSelected(row.view) }\"\n\t\t\t:aria-pressed=\"isSelected(row.view)\"\n\t\t\tdata-testid=\"cn-saved-views-chip\"\n\t\t\t:data-view-id=\"row.view.id \|\| row.view.slug\"\n\t\t\t@click=\"onApply(row.view)\">\n\t\t\t<span class=\"cn-saved-views__chip-name\">{{ row.view.name }}</span>\n\t\t\t<span\n\t\t\t\tv-if=\"countOf(row.view) !== null\"\n\t\t\t\tclass=\"cn-saved-views__chip-count\"\n\t\t\t\tdata-testid=\"cn-saved-views-chip-count\">{{ countOf(row.view) }}</span>\n\t\t</button>\n\t</div>\n\t<!-- The wrapper carries the board look's class, so the bar's row rules\n\t and the ghost-button rules reach the button the way they did when it\n\t was an NcActions trigger. -->\n\t<div v-bind=\"$attrs\" :class=\"{ 'cn-saved-views__save': isBoardLook }\">\n\t\t<NcButton\n\t\t\t:variant=\"isBoardLook ? 'tertiary' : 'secondary'\"\n\t\t\t:aria-label=\"t('nextcloud-vue', 'Save view')\"\n\t\t\tdata-testid=\"cn-saved-views-control\"\n\t\t\t@click=\"onSaveRequest\">\n\t\t\t<template #icon>\n\t\t\t\t<ContentSaveOutline :size=\"isBoardLook ? 14 : 20\" />\n\t\t\t</template>\n\t\t\t{{ t('nextcloud-vue', 'Save view') }}\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport { NcButton } from '@nextcloud/vue'\nimport ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'\nimport { normalizeLook } from '../../composables/useLook.js'\nimport { savedViewsList } from '../../mixins/savedViewsList.js'\n\n/*\n CnSavedViewsControl — the toolbar entry to saved views: a \"Save view\"\n * button and, under the board look, the saved views as chips that apply\n * them. Everything else (the list, edit, share, delete, add to menu) lives in\n * the index sidebar's `CnSavedViewsPanel`.\n \n Purely presentational: `CnIndexPage` owns fetching and every write.\n \n @event {object} apply — A chip was clicked; apply its view. Payload: the View API object.\n * @event {void} save-request — \"Save view\" clicked; open the save dialog.\n /\nexport default {\n\tname: 'CnSavedViewsControl',\n\n\tcomponents: { NcButton, ContentSaveOutline },\n\n\tmixins: [savedViewsList],\n\n\tinject: {\n\t\t/* The look CnAppRoot provides; `board` draws the views as chips. /\n\t\tcnLook: { default: 'nextcloud' },\n\t},\n\n\t// The chips and the button are two roots under the board look.\n\tinheritAttrs: false,\n\n\temits: ['apply', 'save-request'],\n\n\tcomputed: {\n\t\t/* @return {boolean} Whether the saved views draw as chips. /\n\t\tisBoardLook() {\n\t\t\treturn normalizeLook(this.cnLook) === 'board'\n\t\t},\n\n\t\t/* @return {Array<object>} The top level of the tree, in tree order. /\n\t\tchipRows() {\n\t\t\treturn this.rows.filter((row) => row.depth === 0)\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonApply(view) {\n\t\t\t/\n\t\t\t @event apply A chip was clicked; apply its stored state.\n\t\t\t * @type {object}\n\t\t\t /\n\t\t\tthis.$emit('apply', view)\n\t\t},\n\n\t\tonSaveRequest() {\n\t\t\t/* @event save-request \"Save view\" clicked; open the save dialog. */\n\t\t\tthis.$emit('save-request')\n\t\t},\n\t},\n}\n</script>\n"],"names":["_createElementBlock","_Fragment","_renderList","_createElementVNode","_toDisplayString","_openBlock","_mergeProps","_createVNode"],"mappings":";;;;AA+BS,MAAA,UAAA,GAAA,EAAA,KAAK,EAAC,2BAA2B,GAAA;;;AAGtC,EAAA,KAAM,EAAA,4BAA4B;eACvB,EAAC,2BAA2B;;;;;;;;~~KAnBnC~~,~~QAAW~~,CAAA,~~WAAA~~,IAAI,~~QAAQ~~,CAAA,QAAA,~~CAAC~~,~~MAAI~~,GAAA,CAAA;sBADlCA,kBAsBK,CAAA,KAAA,EAAA;;AApBL,UAAA,KAAK,EAAC,uBAAA;AACL,UAAA,IAAG,EAAC,OAAO;AACX,UAAA,YAAU,EAAE,IAAC,CAAA,CAAA,CAAA,eAAA,EAAA,aAAA,CAAA;uBACH,EAAC,sBAAC;;8CAgBJ,CAAAC,QAAA,EAAA,IAAA,EAAAC,UAAA,CAdM,QAAQ,CAAA,QAAA,EAAA,CAAf,GAAG,KAAA;mDAcF,CAAA,QAAA,EAAA;cAbP,GAAG,EAAA,CAAA,KAAA,EAAU,GAAG,CAAC,IAAI,CAAC,EAAE,IAAI,GAAG,CAAC,IAAE,CAAA,IAAA,CAAA,CAAA;AACnC,cAAA,IAAI,EAAC,QAAQ;AACb,cAAA,KAAK,kBAAC,sBAAsB,EAAA,EAAA,gCAAA,EACF,eAAA,CAAA,GAAA,CAAA,IAAA,CAAA,EAAA,CAAA,CAAA;AACzB,cAAA,cAAY,EAAE,IAAA,CAAA,UAAU,CAAC,GAAG,CAAC,IAAI,CAAA;AAClC,cAAA,aAAI,EAAA,qBAAA;cACH,cAAY,EAAE,GAAG,CAAC,IAAI,CAAA,EAAG,IAAI,GAAG,CAAA,IAAA,CAAA,IAAA;AAChC,cAAA,OAAK,EAAE,MAAA,KAAA,QAAA,CAAA,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,CAAA;;AACvB,cAAAC,kBAAA,CAAiE,QAAjE,UAAiE,EAAAC,eAAA,CAAtB,GAAE,CAAC,IAAI,CAAC,IAAI,CAAA,EAAA,CAAA,YAAA;eAErD,IAAA,CAAA,OAAA,CAAA,GAAA,CAAA,IAAA,CAAA,KAAA,IAAA;AADH,mBAAAC,SAAA,EAAA,EAAAL,kBAAA,CAGsE,QAHtE,UAGsE,EAAAI,eAAA,CAA1B,YAAO,CAAC,GAAG,CAAC,IAAI,CAAA,CAAA,EAAA,CAAA,YAAA;;;;;;IAM5DD,0BAAAG,UAAW,KAAM,CAAA,MAAA,EAAA;AAAG,MAAA,KAAK,4BAAU,QAAA,CAAA,WAAA,EAAA;;;AAElC,QAAA,OAAO,EAAE,QAAK,CAAA,WAAA,GAAA,UAAA,GAAA,WAAA;AACd,QAAA,YAAU,EAAE,IAAC,CAAA,CAAA,CAAA,eAAA,EAAA,WAAA,CAAA;AACd,QAAA,aAAU,EAAA,wBAAA;AACT,QAAA,OAAK,EAAE,QAAY,CAAA,aAAA;;AACX,QAAA,IAAA,UACR,MAAE;UAAFC,WAAE,CAAA,6BAAA,EAAA;AAAA,YAAA,IAAA,EAAA,QAAA,CAAA,WAAA,GAAA,EAAA,GAAA,EAAA;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"CnSavedViewsControl.vue3.js","sources":["../../../../src/components/CnSavedViewsControl/CnSavedViewsControl.vue?vue&type=template&id=6cb497db&lang.js"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2026 Conduction B.V.\n - SPDX-License-Identifier: EUPL-1.2\n-->\n<template>\n\t<!--\n\t\tThe toolbar half of saved views. Under the board look the views are\n\t\ta row of chips that apply them; everywhere a \"Save view\" button saves\n\t\tthe current filters. Listing, editing, sharing and deleting live in the\n\t\tsidebar's Filters tab (CnSavedViewsPanel).\n\t-->\n\t<div\n\t\tv-if=\"isBoardLook && chips && chipRows.length > 0\"\n\t\tclass=\"cn-saved-views__chips\"\n\t\trole=\"group\"\n\t\t:aria-label=\"t('nextcloud-vue', 'Saved views')\"\n\t\tdata-testid=\"cn-saved-views-chips\">\n\t\t<button\n\t\t\tv-for=\"row in chipRows\"\n\t\t\t:key=\"`chip-${row.view.id \|\| row.view.slug}`\"\n\t\t\ttype=\"button\"\n\t\t\tclass=\"cn-saved-views__chip\"\n\t\t\t:class=\"{ 'cn-saved-views__chip--selected': isSelected(row.view) }\"\n\t\t\t:aria-pressed=\"isSelected(row.view)\"\n\t\t\tdata-testid=\"cn-saved-views-chip\"\n\t\t\t:data-view-id=\"row.view.id \|\| row.view.slug\"\n\t\t\t@click=\"onApply(row.view)\">\n\t\t\t<span class=\"cn-saved-views__chip-name\">{{ row.view.name }}</span>\n\t\t\t<span\n\t\t\t\tv-if=\"countOf(row.view) !== null\"\n\t\t\t\tclass=\"cn-saved-views__chip-count\"\n\t\t\t\tdata-testid=\"cn-saved-views-chip-count\">{{ countOf(row.view) }}</span>\n\t\t</button>\n\t</div>\n\t<!-- The wrapper carries the board look's class, so the bar's row rules\n\t and the ghost-button rules reach the button the way they did when it\n\t was an NcActions trigger. -->\n\t<div v-bind=\"$attrs\" :class=\"{ 'cn-saved-views__save': isBoardLook }\">\n\t\t<NcButton\n\t\t\t:variant=\"isBoardLook ? 'tertiary' : 'secondary'\"\n\t\t\t:aria-label=\"t('nextcloud-vue', 'Save view')\"\n\t\t\tdata-testid=\"cn-saved-views-control\"\n\t\t\t@click=\"onSaveRequest\">\n\t\t\t<template #icon>\n\t\t\t\t<ContentSaveOutline :size=\"isBoardLook ? 14 : 20\" />\n\t\t\t</template>\n\t\t\t{{ t('nextcloud-vue', 'Save view') }}\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport { NcButton } from '@nextcloud/vue'\nimport ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'\nimport { normalizeLook } from '../../composables/useLook.js'\nimport { savedViewsList } from '../../mixins/savedViewsList.js'\n\n/*\n CnSavedViewsControl — the toolbar entry to saved views: a \"Save view\"\n * button and, under the board look, the saved views as chips that apply\n * them. Everything else (the list, edit, share, delete, add to menu) lives in\n * the index sidebar's `CnSavedViewsPanel`.\n \n Purely presentational: `CnIndexPage` owns fetching and every write.\n \n @event {object} apply — A chip was clicked; apply its view. Payload: the View API object.\n * @event {void} save-request — \"Save view\" clicked; open the save dialog.\n /\nexport default {\n\tname: 'CnSavedViewsControl',\n\n\tcomponents: { NcButton, ContentSaveOutline },\n\n\tmixins: [savedViewsList],\n\n\tinject: {\n\t\t/* The look CnAppRoot provides; `board` draws the views as chips. /\n\t\tcnLook: { default: 'nextcloud' },\n\t},\n\n\t// The chips and the button are two roots under the board look.\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/\n\t\t Whether the board look draws the saved views as chips. `false`\n\t\t * leaves only Save view, for a page whose views live in the side\n\t\t * panel (DqZaken).\n\t\t /\n\t\tchips: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\temits: ['apply', 'save-request'],\n\n\tcomputed: {\n\t\t/* @return {boolean} Whether the saved views draw as chips. /\n\t\tisBoardLook() {\n\t\t\treturn normalizeLook(this.cnLook) === 'board'\n\t\t},\n\n\t\t/* @return {Array<object>} The top level of the tree, in tree order. /\n\t\tchipRows() {\n\t\t\treturn this.rows.filter((row) => row.depth === 0)\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonApply(view) {\n\t\t\t/\n\t\t\t @event apply A chip was clicked; apply its stored state.\n\t\t\t * @type {object}\n\t\t\t /\n\t\t\tthis.$emit('apply', view)\n\t\t},\n\n\t\tonSaveRequest() {\n\t\t\t/* @event save-request \"Save view\" clicked; open the save dialog. */\n\t\t\tthis.$emit('save-request')\n\t\t},\n\t},\n}\n</script>\n"],"names":["_createElementBlock","_Fragment","_renderList","_createElementVNode","_toDisplayString","_openBlock","_mergeProps","_createVNode"],"mappings":";;;;AA+BS,MAAA,UAAA,GAAA,EAAA,KAAK,EAAC,2BAA2B,GAAA;;;AAGtC,EAAA,KAAM,EAAA,4BAA4B;eACvB,EAAC,2BAA2B;;;;;;;;AAnBnC,IAAA,CAAA,QAAA,CAAA,WAAW,IAAI,MAAA,CAAA,KAAK,IAAI,QAAA,CAAA,QAAI,CAAA,MAAA,GAAA,CAAA;sBADlCA,kBAsBK,CAAA,KAAA,EAAA;;AApBL,UAAA,KAAK,EAAC,uBAAA;AACL,UAAA,IAAG,EAAC,OAAO;AACX,UAAA,YAAU,EAAE,IAAC,CAAA,CAAA,CAAA,eAAA,EAAA,aAAA,CAAA;uBACH,EAAC,sBAAC;;8CAgBJ,CAAAC,QAAA,EAAA,IAAA,EAAAC,UAAA,CAdM,QAAQ,CAAA,QAAA,EAAA,CAAf,GAAG,KAAA;mDAcF,CAAA,QAAA,EAAA;cAbP,GAAG,EAAA,CAAA,KAAA,EAAU,GAAG,CAAC,IAAI,CAAC,EAAE,IAAI,GAAG,CAAC,IAAE,CAAA,IAAA,CAAA,CAAA;AACnC,cAAA,IAAI,EAAC,QAAQ;AACb,cAAA,KAAK,kBAAC,sBAAsB,EAAA,EAAA,gCAAA,EACF,eAAA,CAAA,GAAA,CAAA,IAAA,CAAA,EAAA,CAAA,CAAA;AACzB,cAAA,cAAY,EAAE,IAAA,CAAA,UAAU,CAAC,GAAG,CAAC,IAAI,CAAA;AAClC,cAAA,aAAI,EAAA,qBAAA;cACH,cAAY,EAAE,GAAG,CAAC,IAAI,CAAA,EAAG,IAAI,GAAG,CAAA,IAAA,CAAA,IAAA;AAChC,cAAA,OAAK,EAAE,MAAA,KAAA,QAAA,CAAA,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,CAAA;;AACvB,cAAAC,kBAAA,CAAiE,QAAjE,UAAiE,EAAAC,eAAA,CAAtB,GAAE,CAAC,IAAI,CAAC,IAAI,CAAA,EAAA,CAAA,YAAA;eAErD,IAAA,CAAA,OAAA,CAAA,GAAA,CAAA,IAAA,CAAA,KAAA,IAAA;AADH,mBAAAC,SAAA,EAAA,EAAAL,kBAAA,CAGsE,QAHtE,UAGsE,EAAAI,eAAA,CAA1B,YAAO,CAAC,GAAG,CAAC,IAAI,CAAA,CAAA,EAAA,CAAA,YAAA;;;;;;IAM5DD,0BAAAG,UAAW,KAAM,CAAA,MAAA,EAAA;AAAG,MAAA,KAAK,4BAAU,QAAA,CAAA,WAAA,EAAA;;;AAElC,QAAA,OAAO,EAAE,QAAK,CAAA,WAAA,GAAA,UAAA,GAAA,WAAA;AACd,QAAA,YAAU,EAAE,IAAC,CAAA,CAAA,CAAA,eAAA,EAAA,WAAA,CAAA;AACd,QAAA,aAAU,EAAA,wBAAA;AACT,QAAA,OAAK,EAAE,QAAY,CAAA,aAAA;;AACX,QAAA,IAAA,UACR,MAAE;UAAFC,WAAE,CAAA,6BAAA,EAAA;AAAA,YAAA,IAAA,EAAA,QAAA,CAAA,WAAA,GAAA,EAAA,GAAA,EAAA;;;;;;;;;;;;;;"}

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

@@ -2,7 +2,7 @@ import script from './CnUserSettingsDialog.vue2.js';
 import { render } from './CnUserSettingsDialog.vue3.js';
 script.render = render;
-script.__scopeId = "data-v-6d3e749e";
+script.__scopeId = "data-v-7d896e3e";
 const __sfc_main = script;
 export { __sfc_main as default };

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

@@ -1,9 +1,9 @@
 import { translate } from '@nextcloud/l10n';
 import { generateUrl } from '@nextcloud/router';
 import { NcButton } from '@nextcloud/vue';
-import { ref, markRaw, cloneVNode } from 'vue';
+import { ref } from 'vue';
+import Close from 'vue-material-design-icons/Close.vue';
 import __sfc_main from '../CnDialog/CnDialog.vue.js';
-import __sfc_main$1 from '../CnIcon/CnIcon.vue.js';
 /**
  * The key NcAppSettingsSection injects to register itself with its dialog
@@ -14,37 +14,28 @@ const REGISTRATION_KEY = Symbol.for('NcAppSettingsDialog:registration');
 /** The key NcAppSettingsSection injects for the legacy design flag. */
 const LEGACY_DESIGN_KEY = Symbol.for('NcAppSettingsDialog:legacy');
-/** Renders a section's icon vnodes as they were registered. */
-const CnVNodes = {
-	name: 'CnVNodes',
-	props: { vnodes: { type: [Array, Object], default: null } },
-	render() {
-		// A section's icon is drawn twice (navigation and heading), so each draw gets its own copy.
-		const list = Array.isArray(this.vnodes) ? this.vnodes : [this.vnodes];
-		return list.map((vnode) => (vnode && typeof vnode === 'object' ? cloneVNode(vnode) : vnode))
-	},
-};
 /**
- * CnUserSettingsDialog - the user settings dialog in the board look (board
- * PqPersoonlijk): eyebrow, title and subtitle, a left navigation listing the
- * sections with their icons, the current section (the others stay mounted
- * but hidden), and a footer with a note that changes save straight away and
- * a Close button.
+ * CnUserSettingsDialog - the user settings dialog in the board look, as the
+ * DqPersoonlijkeInstellingen board draws Nextcloud's own settings dialog:
+ * 900px wide, the title at the top of a tinted navigation column, every
+ * section stacked on a white pane that the navigation scrolls, a close icon
+ * in the corner, and no header or footer. Under the sections a line says
+ * that changes save straight away.
  *
  * The sections stay the app's: any `NcAppSettingsSection` in the default slot
  * registers itself with this dialog exactly as it does with
- * `NcAppSettingsDialog`, with its name, order and `#icon` slot. CnAppRoot
- * renders this dialog instead of `NcAppSettingsDialog` under the board look.
+ * `NcAppSettingsDialog`, with its name and order. CnAppRoot renders this
+ * dialog instead of `NcAppSettingsDialog` under the board look.
  *
  * @spec openspec/changes/user-settings-board-dialog/specs/user-settings-board-dialog/spec.md#requirement-the-user-settings-dialog-takes-the-board-look
+ * @spec openspec/changes/user-settings-dialog-dq-board/specs/user-settings-dialog-dq-board/spec.md#requirement-the-user-settings-dialog-follows-the-dq-board
  *
  * @event update:open Emitted with `false` when the dialog closes.
  */
 var script = {
 	name: 'CnUserSettingsDialog',
-	components: { CnDialog: __sfc_main, CnIcon: __sfc_main$1, CnVNodes, NcButton },
+	components: { Close, CnDialog: __sfc_main, NcButton },
 	provide() {
 		return {
@@ -63,9 +54,19 @@ var script = {
 		open: { type: Boolean, default: false },
 		/** Dialog title; also its accessible name. */
 		title: { type: String, required: true },
-		/** Context line above the title. */
+		/**
+		 * Deprecated and ignored: the board draws no line above the title.
+		 * Kept so a host that passes it stays valid.
+		 *
+		 * @deprecated
+		 */
 		eyebrow: { type: String, default: () => translate('nextcloud-vue', 'Your account') },
-		/** Sentence under the title. */
+		/**
+		 * Deprecated and ignored: the board draws no line under the title.
+		 * Kept so a host that passes it stays valid.
+		 *
+		 * @deprecated
+		 */
 		subtitle: { type: String, default: () => translate('nextcloud-vue', 'Only for you. Colleagues keep their own settings.') },
 		/** The app's name, after the footer note and as the navigation entry holding its sections. */
 		appName: { type: String, default: '' },
@@ -84,8 +85,6 @@ var script = {
 		return {
 			sections: [],
 			selected: '',
-			/** Ids of the sections whose heading is in the page, for the heading icons. */
-			headingTargets: [],
 			picked: false,
 		}
 	},
@@ -108,9 +107,9 @@ var script = {
 				}))
 		},
-		/** @return {object} The board's eyebrow: muted, in sentence case. */
-		eyebrowStyle() {
-			return { '--cn-dialog-eyebrow-transform': 'none', '--cn-dialog-eyebrow-color': 'var(--color-text-maxcontrast)' }
+		/** @return {object} The board's 900px width, over CnDialog's width roles. */
+		frameStyle() {
+			return { '--cn-dialog-width': '900px' }
 		},
 		/** @return {string} The navigation's accessible name. */
@@ -130,21 +129,6 @@ var script = {
 		},
 	},
-	watch: {
-		sections() {
-			this.$nextTick(() => {
-				this.headingTargets = typeof document === 'undefined'
-					? []
-					: this.sections.filter((section) => section.icon && document.getElementById(`settings-section_${section.id}--label`)).map((section) => section.id);
-				this.showSelected();
-			});
-		},
-		selected() {
-			this.$nextTick(() => this.showSelected());
-		},
-	},
 	methods: {
 		/**
 		 * Add a section to the navigation, kept in `order`; a section
@@ -153,13 +137,14 @@ var script = {
 		 *
 		 * @param {string} id The section id.
 		 * @param {string} name The section name.
-		 * @param {number} [order] The section's place.
-		 * @param {Array} [icon] The section's icon vnodes.
+		 * @param {number} [order] The section's place. A section's icon, the
+		 *   fourth argument NcAppSettingsSection passes, is not drawn: the
+		 *   board lists the sections by name alone.
 		 */
-		registerSection(id, name, order, icon) {
+		registerSection(id, name, order) {
 			const rest = this.sections.filter((section) => section.id !== id);
 			const place = typeof order === 'number' ? order : Math.max(0, ...rest.map((section) => section.order)) + 1;
-			this.sections = [...rest, { id, name, order: place, icon: icon ? markRaw(icon) : null }].sort((a, b) => a.order - b.order);
+			this.sections = [...rest, { id, name, order: place }].sort((a, b) => a.order - b.order);
 			if (!this.picked) {
 				this.selected = this.sections[0].id;
 			}
@@ -178,7 +163,8 @@ var script = {
 		},
 		/**
-		 * Mark a section current and scroll it into view.
+		 * Mark a section current, scroll it to the top of the pane and focus
+		 * its heading. Every section stays in the pane.
 		 *
 		 * @param {string} id The section id.
 		 */
@@ -186,33 +172,18 @@ var script = {
 			this.picked = true;
 			this.selected = id;
 			this.$nextTick(() => {
-				this.showSelected();
+				const el = typeof document !== 'undefined' ? document.getElementById(`settings-section_${id}`) : null;
+				if (el && typeof el.scrollIntoView === 'function') {
+					el.scrollIntoView({ block: 'start', behavior: 'smooth' });
+				}
 				const heading = typeof document !== 'undefined' ? document.getElementById(`settings-section_${id}--label`) : null;
 				if (heading) {
 					heading.setAttribute('tabindex', '-1');
-					heading.focus();
+					heading.focus({ preventScroll: true });
 				}
 			});
 		},
-		/**
-		 * Show the current section and hide the others. They stay mounted,
-		 * so what a reader typed in one survives a switch.
-		 *
-		 * @spec openspec/changes/user-settings-one-section/specs/user-settings-board-dialog/spec.md#requirement-the-board-user-settings-dialog-shows-one-section-at-a-time
-		 */
-		showSelected() {
-			if (typeof document === 'undefined') {
-				return
-			}
-			for (const section of this.sections) {
-				const el = document.getElementById(`settings-section_${section.id}`);
-				if (el) {
-					el.hidden = section.id !== this.selected;
-				}
-			}
-		},
 		/**
 		 * Follow NcDialog's own open state.
 		 *

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CnUserSettingsDialog.vue2.js","sources":["../../../../src/components/CnUserSettingsDialog/CnUserSettingsDialog.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2026 Conduction B.V.\n - SPDX-License-Identifier: EUPL-1.2\n-->\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<!-- `nextcloudLinks`: Nextcloud's own personal settings first, as\n\t\t\t\t links, then one entry for this app holding its sections. -->\n\t\t\t\t<ul v-if=\"ncLinks.length > 0\" class=\"cn-user-settings-dialog__nc-links\" data-testid=\"cn-user-settings-nc-links\">\n\t\t\t\t\t<li v-for=\"link in ncLinks\" :key=\"link.key\">\n\t\t\t\t\t\t<a :href=\"link.href\" class=\"cn-user-settings-dialog__nav-link\">\n\t\t\t\t\t\t\t<span v-if=\"link.icon\" class=\"cn-user-settings-dialog__nav-icon\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t<CnIcon :name=\"link.icon\" :size=\"18\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span>{{ link.label }}</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\t<p v-if=\"ncLinks.length > 0 && appName\"\n\t\t\t\t\tclass=\"cn-user-settings-dialog__group\"\n\t\t\t\t\tdata-testid=\"cn-user-settings-app-group\">\n\t\t\t\t\t{{ appName }}\n\t\t\t\t</p>\n\t\t\t\t<ul :class=\"{ 'cn-user-settings-dialog__group-sections': ncLinks.length > 0 }\">\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<!-- @slot default NcAppSettingsSection children; each registers itself in the navigation. -->\n\t\t\t\t<slot />\n\t\t\t\t<!-- A section's `#icon` also stands before its heading. -->\n\t\t\t\t<template v-for=\"section in sections\" :key=\"`heading-icon-${section.id}-${section.name}`\">\n\t\t\t\t\t<Teleport v-if=\"section.icon && headingTargets.includes(section.id)\" :to=\"`#settings-section_${section.id}--label`\">\n\t\t\t\t\t\t<span class=\"cn-user-settings-dialog__heading-icon\" aria-hidden=\"true\" :data-testid=\"`cn-user-settings-heading-icon-${section.id}`\">\n\t\t\t\t\t\t\t<CnVNodes :vnodes=\"section.icon\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</Teleport>\n\t\t\t\t</template>\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 { generateUrl } from '@nextcloud/router'\nimport { NcButton } from '@nextcloud/vue'\nimport { cloneVNode, markRaw, ref } from 'vue'\nimport CnDialog from '../CnDialog/CnDialog.vue'\nimport CnIcon from '../CnIcon/CnIcon.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/* The key NcAppSettingsSection injects for the legacy design flag. /\nconst LEGACY_DESIGN_KEY = Symbol.for('NcAppSettingsDialog:legacy')\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\t// A section's icon is drawn twice (navigation and heading), so each draw gets its own copy.\n\t\tconst list = Array.isArray(this.vnodes) ? this.vnodes : [this.vnodes]\n\t\treturn list.map((vnode) => (vnode && typeof vnode === 'object' ? cloneVNode(vnode) : vnode))\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 current section (the others stay mounted\n * but hidden), and a footer with a note that changes save straight away and\n * 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, CnIcon, 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\n\t\t\t// NcAppSettingsSection also asks its dialog whether to use the legacy design.\n\t\t\t[LEGACY_DESIGN_KEY]: ref(false),\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 and as the navigation entry holding its sections. /\n\t\tappName: { type: String, default: '' },\n\t\t/\n\t\t Nextcloud's own personal settings, listed first in the navigation as\n\t\t * links: `[{ label, section? \| href?, icon? }]`. `section` is a\n\t\t * personal settings section id (`/settings/user/<section>`). With any,\n\t\t * the app's sections sit under one entry named after the app.\n\t\t /\n\t\tnextcloudLinks: { type: Array, 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\t/* Ids of the sections whose heading is in the page, for the heading icons. /\n\t\t\theadingTargets: [],\n\t\t\tpicked: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t The Nextcloud links with their URL.\n\t\t \n\t\t @spec openspec/changes/user-settings-nav-groups/specs/user-settings-board-dialog/spec.md#requirement-the-board-user-settings-navigation-can-list-nextclouds-own-sections-first\n\t\t * @return {Array<{key: string, label: string, href: string, icon: string}>}\n\t\t /\n\t\tncLinks() {\n\t\t\treturn (Array.isArray(this.nextcloudLinks) ? this.nextcloudLinks : [])\n\t\t\t\t.filter((link) => link && typeof link === 'object' && typeof link.label === 'string' && link.label !== '' && (link.href \|\| link.section))\n\t\t\t\t.map((link, index) => ({\n\t\t\t\t\tkey: String(link.section \|\| link.href \|\| index),\n\t\t\t\t\tlabel: link.label,\n\t\t\t\t\thref: link.href \|\| generateUrl('/settings/user/{section}', { section: String(link.section) }),\n\t\t\t\t\ticon: typeof link.icon === 'string' ? link.icon : '',\n\t\t\t\t}))\n\t\t},\n\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\twatch: {\n\t\tsections() {\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.headingTargets = typeof document === 'undefined'\n\t\t\t\t\t? []\n\t\t\t\t\t: this.sections.filter((section) => section.icon && document.getElementById(`settings-section_${section.id}--label`)).map((section) => section.id)\n\t\t\t\tthis.showSelected()\n\t\t\t})\n\t\t},\n\n\t\tselected() {\n\t\t\tthis.$nextTick(() => this.showSelected())\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\tthis.$nextTick(() => {\n\t\t\t\tthis.showSelected()\n\t\t\t\tconst heading = typeof document !== 'undefined' ? document.getElementById(`settings-section_${id}--label`) : null\n\t\t\t\tif (heading) {\n\t\t\t\t\theading.setAttribute('tabindex', '-1')\n\t\t\t\t\theading.focus()\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\n\t\t/\n\t\t Show the current section and hide the others. They stay mounted,\n\t\t * so what a reader typed in one survives a switch.\n\t\t \n\t\t @spec openspec/changes/user-settings-one-section/specs/user-settings-board-dialog/spec.md#requirement-the-board-user-settings-dialog-shows-one-section-at-a-time\n\t\t /\n\t\tshowSelected() {\n\t\t\tif (typeof document === 'undefined') {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tfor (const section of this.sections) {\n\t\t\t\tconst el = document.getElementById(`settings-section_${section.id}`)\n\t\t\t\tif (el) {\n\t\t\t\t\tel.hidden = section.id !== this.selected\n\t\t\t\t}\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/ A navigation entry, not a link in running text: no underline, also not\n on hover. `!important` because a theme's `a { text-decoration }` carries\n it (thematiq), and a bare `a` with `!important` beats any class. /\n.cn-user-settings-dialog__nav-link,\n.cn-user-settings-dialog__nav-link:visited {\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 !important;\n}\n\n.cn-user-settings-dialog__nav-link:hover {\n\tbackground: var(--color-background-hover);\n\ttext-decoration: none !important;\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\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\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\n.cn-user-settings-dialog__nc-links {\n\tmargin-bottom: 2px;\n}\n\n.cn-user-settings-dialog__group {\n\tmargin: 10px 0 2px;\n\tpadding: 0 12px;\n\tfont-size: 15px;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n}\n\n.cn-user-settings-dialog__group-sections {\n\tpadding-inline-start: 12px;\n}\n\n.cn-user-settings-dialog__heading-icon {\n\tdisplay: inline-flex;\n\torder: -1;\n\tcolor: var(--color-text-maxcontrast);\n}\n\n/ One section at a time: the others are mounted but hidden. */\n.cn-user-settings-dialog__sections :deep(.app-settings-section[hidden]) {\n\tdisplay: none;\n}\n</style>\n"],"names":["CnDialog","CnIcon","t"],"mappings":"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"}
1	+ {"version":3,"file":"CnUserSettingsDialog.vue2.js","sources":["../../../../src/components/CnUserSettingsDialog/CnUserSettingsDialog.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2026 Conduction B.V.\n - SPDX-License-Identifier: EUPL-1.2\n-->\n<template>\n\t<CnDialog\n\t\tclass=\"cn-user-settings-dialog\"\n\t\t:name=\"title\"\n\t\tlook=\"board\"\n\t\theadless\n\t\t:open=\"open\"\n\t\t:style=\"frameStyle\"\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\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<h2 class=\"cn-user-settings-dialog__title\" data-testid=\"cn-user-settings-title\">\n\t\t\t\t\t{{ title }}\n\t\t\t\t</h2>\n\t\t\t\t<!-- `nextcloudLinks`: Nextcloud's own personal settings first, as\n\t\t\t\t links, then one entry for this app holding its sections. -->\n\t\t\t\t<ul v-if=\"ncLinks.length > 0\" class=\"cn-user-settings-dialog__nc-links\" data-testid=\"cn-user-settings-nc-links\">\n\t\t\t\t\t<li v-for=\"link in ncLinks\" :key=\"link.key\">\n\t\t\t\t\t\t<a :href=\"link.href\" class=\"cn-user-settings-dialog__nav-link\">\n\t\t\t\t\t\t\t<span class=\"cn-user-settings-dialog__nav-label\">{{ link.label }}</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\t<p v-if=\"ncLinks.length > 0 && appName\"\n\t\t\t\t\tclass=\"cn-user-settings-dialog__group\"\n\t\t\t\t\tdata-testid=\"cn-user-settings-app-group\">\n\t\t\t\t\t{{ appName }}\n\t\t\t\t</p>\n\t\t\t\t<ul :class=\"{ 'cn-user-settings-dialog__group-sections': ncLinks.length > 0 }\">\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 class=\"cn-user-settings-dialog__nav-label\">{{ 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<!-- @slot default NcAppSettingsSection children; each registers itself in the navigation. -->\n\t\t\t\t<slot />\n\t\t\t\t<p class=\"cn-user-settings-dialog__note\" data-testid=\"cn-user-settings-note\">\n\t\t\t\t\t{{ footerNote }}\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t\t<NcButton\n\t\t\t\tclass=\"cn-user-settings-dialog__close\"\n\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t:aria-label=\"closeLabel\"\n\t\t\t\t:title=\"closeLabel\"\n\t\t\t\tdata-testid=\"cn-user-settings-close\"\n\t\t\t\t@click=\"close\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Close :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t</div>\n\t</CnDialog>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { generateUrl } from '@nextcloud/router'\nimport { NcButton } from '@nextcloud/vue'\nimport { ref } from 'vue'\nimport Close from 'vue-material-design-icons/Close.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/* The key NcAppSettingsSection injects for the legacy design flag. /\nconst LEGACY_DESIGN_KEY = Symbol.for('NcAppSettingsDialog:legacy')\n\n/\n CnUserSettingsDialog - the user settings dialog in the board look, as the\n * DqPersoonlijkeInstellingen board draws Nextcloud's own settings dialog:\n * 900px wide, the title at the top of a tinted navigation column, every\n * section stacked on a white pane that the navigation scrolls, a close icon\n * in the corner, and no header or footer. Under the sections a line says\n * that changes save straight away.\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 and order. CnAppRoot renders this\n * 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 * @spec openspec/changes/user-settings-dialog-dq-board/specs/user-settings-dialog-dq-board/spec.md#requirement-the-user-settings-dialog-follows-the-dq-board\n \n @event update:open Emitted with `false` when the dialog closes.\n /\nexport default {\n\tname: 'CnUserSettingsDialog',\n\n\tcomponents: { Close, CnDialog, 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\n\t\t\t// NcAppSettingsSection also asks its dialog whether to use the legacy design.\n\t\t\t[LEGACY_DESIGN_KEY]: ref(false),\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/\n\t\t Deprecated and ignored: the board draws no line above the title.\n\t\t * Kept so a host that passes it stays valid.\n\t\t \n\t\t @deprecated\n\t\t /\n\t\teyebrow: { type: String, default: () => t('nextcloud-vue', 'Your account') },\n\t\t/\n\t\t Deprecated and ignored: the board draws no line under the title.\n\t\t * Kept so a host that passes it stays valid.\n\t\t \n\t\t @deprecated\n\t\t /\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 and as the navigation entry holding its sections. /\n\t\tappName: { type: String, default: '' },\n\t\t/\n\t\t Nextcloud's own personal settings, listed first in the navigation as\n\t\t * links: `[{ label, section? \| href?, icon? }]`. `section` is a\n\t\t * personal settings section id (`/settings/user/<section>`). With any,\n\t\t * the app's sections sit under one entry named after the app.\n\t\t /\n\t\tnextcloudLinks: { type: Array, 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/\n\t\t The Nextcloud links with their URL.\n\t\t \n\t\t @spec openspec/changes/user-settings-nav-groups/specs/user-settings-board-dialog/spec.md#requirement-the-board-user-settings-navigation-can-list-nextclouds-own-sections-first\n\t\t * @return {Array<{key: string, label: string, href: string, icon: string}>}\n\t\t /\n\t\tncLinks() {\n\t\t\treturn (Array.isArray(this.nextcloudLinks) ? this.nextcloudLinks : [])\n\t\t\t\t.filter((link) => link && typeof link === 'object' && typeof link.label === 'string' && link.label !== '' && (link.href \|\| link.section))\n\t\t\t\t.map((link, index) => ({\n\t\t\t\t\tkey: String(link.section \|\| link.href \|\| index),\n\t\t\t\t\tlabel: link.label,\n\t\t\t\t\thref: link.href \|\| generateUrl('/settings/user/{section}', { section: String(link.section) }),\n\t\t\t\t\ticon: typeof link.icon === 'string' ? link.icon : '',\n\t\t\t\t}))\n\t\t},\n\n\t\t/* @return {object} The board's 900px width, over CnDialog's width roles. /\n\t\tframeStyle() {\n\t\t\treturn { '--cn-dialog-width': '900px' }\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. A section's icon, the\n\t\t * fourth argument NcAppSettingsSection passes, is not drawn: the\n\t\t * board lists the sections by name alone.\n\t\t /\n\t\tregisterSection(id, name, order) {\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 }].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, scroll it to the top of the pane and focus\n\t\t * its heading. Every section stays in the pane.\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\tthis.$nextTick(() => {\n\t\t\t\tconst el = typeof document !== 'undefined' ? document.getElementById(`settings-section_${id}`) : null\n\t\t\t\tif (el && typeof el.scrollIntoView === 'function') {\n\t\t\t\t\tel.scrollIntoView({ block: 'start', behavior: 'smooth' })\n\t\t\t\t}\n\t\t\t\tconst heading = typeof document !== 'undefined' ? document.getElementById(`settings-section_${id}--label`) : null\n\t\t\t\tif (heading) {\n\t\t\t\t\theading.setAttribute('tabindex', '-1')\n\t\t\t\t\theading.focus({ preventScroll: true })\n\t\t\t\t}\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/ The DqPersoonlijkeInstellingen board: a tinted navigation column with the\n title on top, the sections on a white pane beside it, and the close icon\n in the corner. The dialog's frame (900px, its tint, no padding) is in\n dialog.css, on the teleported container. /\n.cn-user-settings-dialog__body {\n\tposition: relative;\n\tdisplay: flex;\n\tmin-height: 440px;\n\tmax-height: min(760px, calc(100vh - 112px));\n}\n\n.cn-user-settings-dialog__nav {\n\tdisplay: flex;\n\tflex: 0 0 200px;\n\tflex-direction: column;\n\tgap: 2px;\n\tbox-sizing: border-box;\n\twidth: 200px;\n\tpadding: 0 4px 12px;\n\toverflow-y: auto;\n}\n\n.cn-user-settings-dialog__title {\n\tmargin: 0;\n\tpadding: 14px 10px 12px;\n\tfont-size: 20px;\n\tfont-weight: 700;\n\tline-height: 1.25;\n\tcolor: var(--color-main-text);\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/ A navigation entry, not a link in running text: no underline, also not\n on hover. `!important` because a theme's `a { text-decoration }` carries\n it (thematiq), and a bare `a` with `!important` beats any class. /\n.cn-user-settings-dialog__nav-link,\n.cn-user-settings-dialog__nav-link:visited {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tmin-height: 36px;\n\tpadding: 0 10px;\n\tborder-radius: var(--border-radius-element, 8px);\n\tfont-size: 15px;\n\tfont-weight: 500;\n\tcolor: var(--color-main-text);\n\ttext-decoration: none !important;\n}\n\n.cn-user-settings-dialog__nav-label {\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n}\n\n.cn-user-settings-dialog__nav-link:hover {\n\tbackground: color-mix(in srgb, var(--color-primary-element) 8%, transparent);\n\ttext-decoration: none !important;\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/ The open section: a stronger tint and a 3px bar at the left edge. */\n.cn-user-settings-dialog__nav-link--active,\n.cn-user-settings-dialog__nav-link--active:hover {\n\tbackground: color-mix(in srgb, var(--color-primary-element) 16%, var(--color-primary-element-light));\n}\n\n.cn-user-settings-dialog__nav-link--active::before {\n\tcontent: '';\n\tposition: absolute;\n\ttop: 6px;\n\tbottom: 6px;\n\tinset-inline-start: 0;\n\twidth: 3px;\n\tborder-radius: 2px;\n\tbackground: var(--color-primary-element);\n}\n\n.cn-user-settings-dialog__group {\n\tmargin: 10px 0 2px;\n\tpadding: 0 10px;\n\tfont-size: 15px;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n}\n\n.cn-user-settings-dialog__group-sections {\n\tpadding-inline-start: 10px;\n}\n\n.cn-user-settings-dialog__sections {\n\tdisplay: flex;\n\tflex: 1 1 auto;\n\tflex-direction: column;\n\tgap: 32px;\n\tbox-sizing: border-box;\n\tmin-width: 0;\n\tpadding: 20px 64px 20px 24px;\n\toverflow-y: auto;\n\tborder-inline-start: 1px solid var(--color-border);\n\tborder-radius: 8px 0 0 8px;\n\tbackground: var(--color-main-background);\n}\n\n.cn-user-settings-dialog__sections :deep(.app-settings-section) {\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n}\n\n.cn-user-settings-dialog__sections :deep(.app-settings-section__name) {\n\tmargin: 0 0 6px;\n\tfont-size: 20px;\n\tfont-weight: 700;\n\tline-height: 1.3;\n}\n\n.cn-user-settings-dialog__note {\n\tmargin: 0;\n\tfont-size: 14px;\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.cn-user-settings-dialog__close {\n\tposition: absolute;\n\ttop: 8px;\n\tinset-inline-end: 8px;\n}\n\n@media (max-width: 600px) {\n\t.cn-user-settings-dialog__body {\n\t\tflex-direction: column;\n\t}\n\n\t.cn-user-settings-dialog__nav {\n\t\tflex-basis: auto;\n\t\twidth: auto;\n\t\tmax-height: 40vh;\n\t}\n\n\t.cn-user-settings-dialog__sections {\n\t\tpadding: 20px 16px;\n\t\tborder-inline-start: 0;\n\t\tborder-radius: 8px 8px 0 0;\n\t}\n}\n</style>\n"],"names":["CnDialog","t"],"mappings":"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"}

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

@@ -1,39 +1,33 @@
-import { resolveComponent, openBlock, createBlock, normalizeStyle, withCtx, createElementVNode, toDisplayString, createVNode, createTextVNode, createElementBlock, Fragment, renderList, createCommentVNode, normalizeClass, withModifiers, renderSlot, Teleport } from 'vue';
+import { resolveComponent, openBlock, createBlock, normalizeStyle, withCtx, createElementVNode, toDisplayString, createElementBlock, Fragment, renderList, createCommentVNode, normalizeClass, withModifiers, renderSlot, createVNode } from 'vue';
 const _hoisted_1 = { class: "cn-user-settings-dialog__body" };
 const _hoisted_2 = ["aria-label"];
 const _hoisted_3 = {
+  class: "cn-user-settings-dialog__title",
+  "data-testid": "cn-user-settings-title"
+};
+const _hoisted_4 = {
   key: 0,
   class: "cn-user-settings-dialog__nc-links",
   "data-testid": "cn-user-settings-nc-links"
 };
-const _hoisted_4 = ["href"];
-const _hoisted_5 = {
-  key: 0,
-  class: "cn-user-settings-dialog__nav-icon",
-  "aria-hidden": "true"
-};
-const _hoisted_6 = {
+const _hoisted_5 = ["href"];
+const _hoisted_6 = { class: "cn-user-settings-dialog__nav-label" };
+const _hoisted_7 = {
   key: 1,
   class: "cn-user-settings-dialog__group",
   "data-testid": "cn-user-settings-app-group"
 };
-const _hoisted_7 = ["href", "aria-current", "data-testid", "onClick"];
-const _hoisted_8 = {
-  key: 0,
-  class: "cn-user-settings-dialog__nav-icon",
-  "aria-hidden": "true"
-};
-const _hoisted_9 = { class: "cn-user-settings-dialog__sections" };
-const _hoisted_10 = ["data-testid"];
+const _hoisted_8 = ["href", "aria-current", "data-testid", "onClick"];
+const _hoisted_9 = { class: "cn-user-settings-dialog__nav-label" };
+const _hoisted_10 = { class: "cn-user-settings-dialog__sections" };
 const _hoisted_11 = {
   class: "cn-user-settings-dialog__note",
   "data-testid": "cn-user-settings-note"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_CnIcon = resolveComponent("CnIcon");
-  const _component_CnVNodes = resolveComponent("CnVNodes");
+  const _component_Close = resolveComponent("Close");
   const _component_NcButton = resolveComponent("NcButton");
   const _component_CnDialog = resolveComponent("CnDialog");
@@ -41,121 +35,81 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     class: "cn-user-settings-dialog",
     name: $props.title,
     look: "board",
-    width: "wizard",
-    eyebrow: $props.eyebrow,
-    subtitle: $props.subtitle,
+    headless: "",
     open: $props.open,
-    style: normalizeStyle($options.eyebrowStyle),
+    style: normalizeStyle($options.frameStyle),
     "data-testid": "cn-user-settings-dialog",
     "onUpdate:open": $options.onUpdateOpen,
     onClosing: $options.close
   }, {
-    actions: withCtx(() => [
-      createElementVNode("p", _hoisted_11, 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"
-            }, [
-              ($options.ncLinks.length > 0)
-                ? (openBlock(), createElementBlock("ul", _hoisted_3, [
-                    (openBlock(true), createElementBlock(Fragment, null, renderList($options.ncLinks, (link) => {
-                      return (openBlock(), createElementBlock("li", {
-                        key: link.key
-                      }, [
-                        createElementVNode("a", {
-                          href: link.href,
-                          class: "cn-user-settings-dialog__nav-link"
-                        }, [
-                          (link.icon)
-                            ? (openBlock(), createElementBlock("span", _hoisted_5, [
-                                createVNode(_component_CnIcon, {
-                                  name: link.icon,
-                                  size: 18
-                                }, null, 8 /* PROPS */, ["name"])
-                              ]))
-                            : createCommentVNode("v-if", true),
-                          createElementVNode("span", null, toDisplayString(link.label), 1 /* TEXT */)
-                        ], 8 /* PROPS */, _hoisted_4)
-                      ]))
-                    }), 128 /* KEYED_FRAGMENT */))
-                  ]))
-                : createCommentVNode("v-if", true),
-              ($options.ncLinks.length > 0 && $props.appName)
-                ? (openBlock(), createElementBlock("p", _hoisted_6, toDisplayString($props.appName), 1 /* TEXT */))
-                : createCommentVNode("v-if", true),
-              createElementVNode("ul", {
-                class: normalizeClass({ 'cn-user-settings-dialog__group-sections': $options.ncLinks.length > 0 })
-              }, [
-                (openBlock(true), createElementBlock(Fragment, null, renderList($data.sections, (section) => {
+        createElementVNode("nav", {
+          class: "cn-user-settings-dialog__nav",
+          "aria-label": $options.navLabel,
+          "data-testid": "cn-user-settings-nav"
+        }, [
+          createElementVNode("h2", _hoisted_3, toDisplayString($props.title), 1 /* TEXT */),
+          ($options.ncLinks.length > 0)
+            ? (openBlock(), createElementBlock("ul", _hoisted_4, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList($options.ncLinks, (link) => {
                   return (openBlock(), createElementBlock("li", {
-                    key: section.id
+                    key: link.key
                   }, [
                     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"])
+                      href: link.href,
+                      class: "cn-user-settings-dialog__nav-link"
                     }, [
-                      (section.icon)
-                        ? (openBlock(), createElementBlock("span", _hoisted_8, [
-                            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_7)
+                      createElementVNode("span", _hoisted_6, toDisplayString(link.label), 1 /* TEXT */)
+                    ], 8 /* PROPS */, _hoisted_5)
                   ]))
                 }), 128 /* KEYED_FRAGMENT */))
-              ], 2 /* CLASS */)
-            ], 8 /* PROPS */, _hoisted_2))
-          : createCommentVNode("v-if", true),
-        createElementVNode("div", _hoisted_9, [
+              ]))
+            : createCommentVNode("v-if", true),
+          ($options.ncLinks.length > 0 && $props.appName)
+            ? (openBlock(), createElementBlock("p", _hoisted_7, toDisplayString($props.appName), 1 /* TEXT */))
+            : createCommentVNode("v-if", true),
+          createElementVNode("ul", {
+            class: normalizeClass({ 'cn-user-settings-dialog__group-sections': $options.ncLinks.length > 0 })
+          }, [
+            (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"])
+                }, [
+                  createElementVNode("span", _hoisted_9, toDisplayString(section.name), 1 /* TEXT */)
+                ], 10 /* CLASS, PROPS */, _hoisted_8)
+              ]))
+            }), 128 /* KEYED_FRAGMENT */))
+          ], 2 /* CLASS */)
+        ], 8 /* PROPS */, _hoisted_2),
+        createElementVNode("div", _hoisted_10, [
           renderSlot(_ctx.$slots, "default"),
-          (openBlock(true), createElementBlock(Fragment, null, renderList($data.sections, (section) => {
-            return (openBlock(), createElementBlock(Fragment, {
-              key: `heading-icon-${section.id}-${section.name}`
-            }, [
-              (section.icon && $data.headingTargets.includes(section.id))
-                ? (openBlock(), createBlock(Teleport, {
-                    key: 0,
-                    to: `#settings-section_${section.id}--label`
-                  }, [
-                    createElementVNode("span", {
-                      class: "cn-user-settings-dialog__heading-icon",
-                      "aria-hidden": "true",
-                      "data-testid": `cn-user-settings-heading-icon-${section.id}`
-                    }, [
-                      createVNode(_component_CnVNodes, {
-                        vnodes: section.icon
-                      }, null, 8 /* PROPS */, ["vnodes"])
-                    ], 8 /* PROPS */, _hoisted_10)
-                  ], 8 /* PROPS */, ["to"]))
-                : createCommentVNode("v-if", true)
-            ], 64 /* STABLE_FRAGMENT */))
-          }), 128 /* KEYED_FRAGMENT */))
-        ])
+          createElementVNode("p", _hoisted_11, toDisplayString($options.footerNote), 1 /* TEXT */)
+        ]),
+        createVNode(_component_NcButton, {
+          class: "cn-user-settings-dialog__close",
+          variant: "tertiary",
+          "aria-label": $options.closeLabel,
+          title: $options.closeLabel,
+          "data-testid": "cn-user-settings-close",
+          onClick: $options.close
+        }, {
+          icon: withCtx(() => [
+            createVNode(_component_Close, { size: 20 })
+          ]),
+          _: 1 /* STABLE */
+        }, 8 /* PROPS */, ["aria-label", "title", "onClick"])
       ])
     ]),
     _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["name", "eyebrow", "subtitle", "open", "style", "onUpdate:open", "onClosing"]))
+  }, 8 /* PROPS */, ["name", "open", "style", "onUpdate:open", "onClosing"]))
 }
 export { render };