@conduction/nextcloud-vue 1.0.0-beta.20 → 1.0.0-beta.21

package/dist/nextcloud-vue.cjs.js

@@ -56105,7 +56105,70 @@ function validateTypeConfig(page, index, errors) {
 		break
 	}
 	case 'settings': {
-		if (!cfg || !Array.isArray(cfg.sections)) {
+		// `manifest-settings-orchestration` REQ-MSO-1: a settings page
+		// MUST declare EXACTLY ONE of `sections` | `tabs`. When both
+		// are set, emit the orchestration mutex error. When neither is
+		// set, fall through to the legacy `sections required` error
+		// (back-compat — REQ-MSO-7 / REQ-MSO-1 last scenario).
+		const hasSections = cfg && Array.isArray(cfg.sections);
+		const hasTabs = cfg && Array.isArray(cfg.tabs);
+
+		if (hasSections && hasTabs) {
+			errors.push(`${pathSlash}: ${pathBracket}: must declare exactly one of sections | tabs`);
+			break
+		}
+
+		if (hasTabs) {
+			// `manifest-settings-orchestration` REQ-MSO-2..4: validate
+			// the `tabs[]` orchestration shape.
+			if (cfg.tabs.length === 0) {
+				errors.push(`${pathSlash}/tabs: ${pathBracket}.tabs: must contain at least 1 tab`);
+				break
+			}
+			const seenTabIds = Object.create(null);
+			cfg.tabs.forEach((tab, tIndex) => {
+				if (!isPlainObject$1(tab)) {
+					errors.push(`${pathSlash}/tabs/${tIndex}: must be an object`);
+					return
+				}
+				if (typeof tab.id !== 'string' || tab.id.length === 0) {
+					errors.push(`${pathSlash}/tabs/${tIndex}/id: required, must be a non-empty string`);
+				}
+				if (typeof tab.label !== 'string' || tab.label.length === 0) {
+					errors.push(`${pathSlash}/tabs/${tIndex}/label: required, must be a non-empty string`);
+				}
+				// REQ-MSO-3: tab IDs must be unique within a page.
+				if (typeof tab.id === 'string' && tab.id.length > 0) {
+					if (seenTabIds[tab.id]) {
+						errors.push(`${pathSlash}/tabs/${tIndex}/id: ${pathBracket}.tabs[${tIndex}].id: duplicate id "${tab.id}" — tab IDs must be unique within a page`);
+					}
+					seenTabIds[tab.id] = true;
+				}
+				// `tab.sections` MUST be a non-empty array.
+				if (!Array.isArray(tab.sections)) {
+					errors.push(`${pathSlash}/tabs/${tIndex}/sections: ${pathBracket}.tabs[${tIndex}].sections: required, must be an array`);
+					return
+				}
+				if (tab.sections.length === 0) {
+					errors.push(`${pathSlash}/tabs/${tIndex}/sections: ${pathBracket}.tabs[${tIndex}].sections: must contain at least 1 section`);
+					return
+				}
+				// REQ-MSO-4: each tab's sections follow the same rules
+				// as the flat case — share the per-section validator.
+				tab.sections.forEach((section, sIndex) => {
+					validateSettingsSection(
+						section,
+						`${pathSlash}/tabs/${tIndex}/sections/${sIndex}`,
+						`${pathBracket}.tabs[${tIndex}].sections[${sIndex}]`,
+						errors,
+					);
+				});
+			});
+			break
+		}
+
+		// Flat `sections[]` (existing path — REQ-MSRS-* + back-compat).
+		if (!hasSections) {
 			errors.push(`${pathSlash}/sections: ${pathBracket}.sections: required, must be an array`);
 			break
 		}
@@ -56114,56 +56177,12 @@ function validateTypeConfig(page, index, errors) {
 			break
 		}
 		cfg.sections.forEach((section, sIndex) => {
-			if (!isPlainObject$1(section)) {
-				errors.push(`${pathSlash}/sections/${sIndex}: must be an object`);
-				return
-			}
-			if (typeof section.title !== 'string') {
-				errors.push(`${pathSlash}/sections/${sIndex}/title: required, must be a string`);
-			}
-
-			// `manifest-settings-rich-sections` REQ-MSRS-1: each
-			// section MUST declare exactly one of fields | component
-			// | widgets. Mixed bodies confuse the renderer + duplicate
-			// the section chrome; empty bodies render nothing so they
-			// are a manifest-author bug.
-			const hasFields = Array.isArray(section.fields);
-			const hasComponent = typeof section.component === 'string' && section.component.length > 0;
-			const hasWidgets = Array.isArray(section.widgets) && section.widgets.length > 0;
-			const bodyCount = (hasFields ? 1 : 0) + (hasComponent ? 1 : 0) + (hasWidgets ? 1 : 0);
-
-			if (bodyCount !== 1) {
-				errors.push(`${pathSlash}/sections/${sIndex}: ${pathBracket}.sections[${sIndex}]: must declare exactly one of fields | component | widgets`);
-			}
-
-			// `widgets` set but not an array (string / object / etc.)
-			if (section.widgets !== undefined && !Array.isArray(section.widgets)) {
-				errors.push(`${pathSlash}/sections/${sIndex}/widgets: must be an array when set`);
-			}
-
-			// `component` set but not a string.
-			if (section.component !== undefined && typeof section.component !== 'string') {
-				errors.push(`${pathSlash}/sections/${sIndex}/component: must be a string when set`);
-			}
-
-			// Per-widget shape rules.
-			if (hasWidgets) {
-				section.widgets.forEach((widget, wIndex) => {
-					if (!isPlainObject$1(widget)) {
-						errors.push(`${pathSlash}/sections/${sIndex}/widgets/${wIndex}: must be an object`);
-						return
-					}
-					if (typeof widget.type !== 'string' || widget.type.length === 0) {
-						errors.push(`${pathSlash}/sections/${sIndex}/widgets/${wIndex}/type: must be a non-empty string`);
-					}
-				});
-			}
-
-			// `manifest-config-refs` REQ-MCR — when fields[] body is
-			// used, each entry must match the formField $def shape.
-			if (hasFields) {
-				validateFieldsArray(section.fields, `${pathSlash}/sections/${sIndex}/fields`, errors);
-			}
+			validateSettingsSection(
+				section,
+				`${pathSlash}/sections/${sIndex}`,
+				`${pathBracket}.sections[${sIndex}]`,
+				errors,
+			);
 		});
 		break
 	}
@@ -56591,6 +56610,82 @@ function validateLayoutArray(cfg, pathSlash, pathBracket, errors) {
 	});
 }
 
+/**
+ * Validate a single `sections[]` entry for `type:"settings"` pages.
+ * Shared between the flat `pages[].config.sections[]` path AND the
+ * tab-nested `pages[].config.tabs[].sections[]` path
+ * (`manifest-settings-orchestration` REQ-MSO-4).
+ *
+ * Enforces the rich-sections REQ-MSRS-1 mutex (`fields | component |
+ * widgets` exactly-one-of) plus per-widget shape rules. The new
+ * `widget.type === "component"` discriminator (REQ-MSO-6) requires
+ * `componentName: <non-empty string>`.
+ *
+ * @param {*} section The section under validation
+ * @param {string} pathSlash JSON-pointer-style path prefix for errors
+ * @param {string} pathBracket Human-readable bracket-path for errors
+ * @param {string[]} errors Accumulator
+ */
+function validateSettingsSection(section, pathSlash, pathBracket, errors) {
+	if (!isPlainObject$1(section)) {
+		errors.push(`${pathSlash}: must be an object`);
+		return
+	}
+	if (typeof section.title !== 'string') {
+		errors.push(`${pathSlash}/title: required, must be a string`);
+	}
+
+	// `manifest-settings-rich-sections` REQ-MSRS-1: exactly one of
+	// fields | component | widgets.
+	const hasFields = Array.isArray(section.fields);
+	const hasComponent = typeof section.component === 'string' && section.component.length > 0;
+	const hasWidgets = Array.isArray(section.widgets) && section.widgets.length > 0;
+	const bodyCount = (hasFields ? 1 : 0) + (hasComponent ? 1 : 0) + (hasWidgets ? 1 : 0);
+
+	if (bodyCount !== 1) {
+		errors.push(`${pathSlash}: ${pathBracket}: must declare exactly one of fields | component | widgets`);
+	}
+
+	// `widgets` set but not an array (string / object / etc.)
+	if (section.widgets !== undefined && !Array.isArray(section.widgets)) {
+		errors.push(`${pathSlash}/widgets: must be an array when set`);
+	}
+
+	// `component` set but not a string.
+	if (section.component !== undefined && typeof section.component !== 'string') {
+		errors.push(`${pathSlash}/component: must be a string when set`);
+	}
+
+	// Per-widget shape rules.
+	if (hasWidgets) {
+		section.widgets.forEach((widget, wIndex) => {
+			if (!isPlainObject$1(widget)) {
+				errors.push(`${pathSlash}/widgets/${wIndex}: must be an object`);
+				return
+			}
+			if (typeof widget.type !== 'string' || widget.type.length === 0) {
+				errors.push(`${pathSlash}/widgets/${wIndex}/type: must be a non-empty string`);
+				return
+			}
+			// `manifest-settings-orchestration` REQ-MSO-6: when the
+			// discriminator is "component", `componentName` MUST be a
+			// non-empty string. Other widget types ignore
+			// `componentName`.
+			if (widget.type === 'component') {
+				if (typeof widget.componentName !== 'string' || widget.componentName.length === 0) {
+					errors.push(`${pathSlash}/widgets/${wIndex}/componentName: required when type is "component", must be a non-empty string`);
+				}
+			}
+		});
+	}
+
+	// `manifest-config-refs` REQ-MCR — when fields[] body is used,
+	// each entry must match the formField $def shape.
+	if (hasFields) {
+		validateFieldsArray(section.fields, `${pathSlash}/fields`, errors);
+	}
+}
+
 /**
  * Validate `config.sections[].fields[]` for settings page type
  * (`manifest-config-refs` REQ-MCR). Each field MUST be an object with
@@ -107628,8 +107723,46 @@ var CnSettingsWidgetMount = {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
+/**
+ * Sentinel value used in the built-in widget registry to mark the
+ * `'component'` discriminator (manifest-settings-orchestration
+ * REQ-MSO-6). The discriminator does NOT resolve to a fixed
+ * component — instead, the resolver detects this sentinel and looks
+ * up `widget.componentName` in the customComponents registry.
+ */
+const COMPONENT_DISCRIMINATOR = Symbol('cn-settings-component-widget');
+
 /**
  * Built-in widget registry. Used by `CnSettingsPage` to resolve
  * `widgets[].type` to a component BEFORE consulting the
@@ -107638,13 +107771,19 @@ var CnSettingsWidgetMount = {
  * The order matters — built-ins win on collision so consumers can't
  * accidentally shadow `version-info` with their own component. If a
  * consumer needs to truly replace one of these, they can render their
- * own component via `section.component` instead of `widgets[]`.
+ * own component via `section.component` or
+ * `{ type: "component", componentName: <name> }` instead of `widgets[]`.
  *
- * Spec: REQ-MSRS-2 (manifest-settings-rich-sections).
+ * Spec:
+ *  - REQ-MSRS-2 (manifest-settings-rich-sections) — fixed-component
+ *    built-ins (`version-info`, `register-mapping`).
+ *  - REQ-MSO-6 (manifest-settings-orchestration) — `'component'`
+ *    discriminator (sentinel value, resolved via componentName).
  */
 const BUILTIN_SETTINGS_WIDGETS = Object.freeze({
 	'version-info': __vue_component__$17,
 	'register-mapping': __vue_component__$I,
+	component: COMPONENT_DISCRIMINATOR,
 });
 
 /**
@@ -107752,19 +107891,50 @@ var script$8 = {
 			default: '',
 		},
 		/**
-		 * Section definitions. Each section MUST declare EXACTLY ONE of:
+		 * Section definitions (flat shape — back-compat). Each section
+		 * MUST declare EXACTLY ONE of:
 		 *  - `fields: Array<Field>` (back-compat flat-field body)
 		 *  - `component: <registry-name>` + optional `props`
-		 *  - `widgets: Array<{ type, props? }>`
+		 *  - `widgets: Array<{ type, props?, componentName? }>`
 		 *
 		 * Common keys: `{ title, description?, icon?, collapsible?, docUrl? }`.
 		 *
+		 * Mutually exclusive with `tabs[]` (XOR — see
+		 * manifest-settings-orchestration REQ-MSO-1).
+		 *
 		 * @type {Array<object>}
 		 */
 		sections: {
 			type: Array,
 			default: () => [],
 		},
+		/**
+		 * Tab definitions (orchestration shape — manifest-settings-
+		 * orchestration REQ-MSO-2). When set, CnSettingsPage renders
+		 * a tab strip above the section area; the active tab's
+		 * `sections[]` flow into the same renderer used by the flat
+		 * shape. Mutually exclusive with `sections[]`.
+		 *
+		 * Each tab MUST be `{ id: string, label: string,
+		 * icon?: string, sections: array<Section> }`.
+		 *
+		 * @type {Array<object>}
+		 */
+		tabs: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * Optional ID of the tab to activate on mount. When empty AND
+		 * `tabs[]` is non-empty, the first tab is active by default.
+		 * Unknown IDs fall back to the first tab.
+		 *
+		 * @type {string}
+		 */
+		initialTab: {
+			type: String,
+			default: '',
+		},
 		/**
 		 * Initial values keyed by `field.key`. Defaults to an empty
 		 * object; in practice the consumer passes the current
@@ -107826,14 +107996,30 @@ var script$8 = {
 		},
 	},
 
-	emits: ['save', 'error', 'input', 'widget-event'],
+	emits: ['save', 'error', 'input', 'widget-event', 'tab-change'],
 
 	data() {
+		// Resolve the initial active-tab id synchronously so the very
+		// first render has the correct tab active (otherwise tests
+		// that mount + assert without an `await tick` see the empty
+		// default). Mirrors the logic in `resolveInitialTabId` (the
+		// watcher path); keep them aligned.
+		let activeTabId = '';
+		const tabs = Array.isArray(this.tabs) ? this.tabs : [];
+		if (tabs.length > 0) {
+			if (typeof this.initialTab === 'string' && this.initialTab.length > 0
+				&& tabs.some(t => t && t.id === this.initialTab)) {
+				activeTabId = this.initialTab;
+			} else if (tabs[0] && typeof tabs[0].id === 'string') {
+				activeTabId = tabs[0].id;
+			}
+		}
 		return {
 			formData: this.cloneInitial(),
 			originalData: this.cloneInitial(),
 			saving: false,
 			lastError: null,
+			activeTabId,
 		}
 	},
 
@@ -107852,6 +108038,35 @@ var script$8 = {
 		effectiveCustomComponents() {
 			return this.customComponents ?? this.cnCustomComponents ?? {}
 		},
+		/**
+		 * Whether the page is in tabs orchestration mode. True when
+		 * `tabs[]` is non-empty — drives the tab-strip render gate
+		 * (manifest-settings-orchestration REQ-MSO-5).
+		 *
+		 * @return {boolean}
+		 */
+		hasTabs() {
+			return Array.isArray(this.tabs) && this.tabs.length > 0
+		},
+		/**
+		 * The sections to render right now. In flat mode, this is the
+		 * `sections` prop directly. In tabs mode, this is the
+		 * `sections[]` array of the currently active tab. Centralising
+		 * this in one computed keeps the template's `v-for` simple
+		 * and decouples it from the body kind dispatcher (which
+		 * applies per-section, not per-mode).
+		 *
+		 * @return {Array<object>}
+		 */
+		activeSections() {
+			if (!this.hasTabs) return this.sections || []
+			const active = this.tabs.find(t => t && t.id === this.activeTabId);
+			if (active && Array.isArray(active.sections)) return active.sections
+			// Defensive fallback — should not happen because
+			// `resolveInitialTabId` always lands on a known tab.
+			const first = this.tabs[0];
+			return first && Array.isArray(first.sections) ? first.sections : []
+		},
 	},
 
 	watch: {
@@ -107862,6 +108077,22 @@ var script$8 = {
 				this.originalData = this.cloneInitial();
 			},
 		},
+		// When `tabs[]` changes (e.g. consumer swaps manifests at
+		// runtime), re-resolve the active tab so the page doesn't get
+		// stuck on a removed id.
+		tabs: {
+			handler() {
+				this.activeTabId = this.resolveInitialTabId();
+			},
+		},
+		// When `initialTab` changes (consumer-controlled tab
+		// activation), follow it.
+		initialTab(next) {
+			if (typeof next === 'string' && next.length > 0) {
+				const exists = this.tabs.some(t => t && t.id === next);
+				if (exists) this.activeTabId = next;
+			}
+		},
 	},
 
 	methods: {
@@ -107907,11 +108138,20 @@ var script$8 = {
 		},
 		cloneInitial() {
 			const merged = { ...(this.initialValues || {}) };
-			// Pre-populate any field with a `default` if no value is set yet.
-			// Only flat-field sections contribute defaults; component and
-			// widgets sections own their own state.
-			for (const section of this.sections || []) {
-				if (!Array.isArray(section.fields)) continue
+			// Collect every section across both modes (flat
+			// `sections[]` AND `tabs[].sections[]`) so default values
+			// are applied regardless of orchestration shape.
+			// Only flat-field sections contribute defaults; component
+			// and widgets sections own their own state.
+			const allSections = [];
+			for (const section of this.sections || []) allSections.push(section);
+			for (const tab of this.tabs || []) {
+				if (tab && Array.isArray(tab.sections)) {
+					for (const section of tab.sections) allSections.push(section);
+				}
+			}
+			for (const section of allSections) {
+				if (!section || !Array.isArray(section.fields)) continue
 				for (const field of section.fields) {
 					if (field.default !== undefined && merged[field.key] === undefined) {
 						merged[field.key] = field.default;
@@ -107977,23 +108217,55 @@ var script$8 = {
 		},
 
 		/**
-		 * Resolve a `widgets[].type` string to a Vue component. Lookup
-		 * order:
+		 * Resolve a single `widgets[]` entry to a concrete Vue
+		 * component. Lookup order:
 		 *
 		 *   1. Built-in widget map (`version-info`, `register-mapping`).
-		 *   2. `effectiveCustomComponents` registry.
+		 *   2. `'component'` discriminator (REQ-MSO-6) — resolves
+		 *      `widget.componentName` against `effectiveCustomComponents`.
+		 *   3. Legacy fallback — looks up `widget.type` against
+		 *      `effectiveCustomComponents`. Kept for back-compat with
+		 *      manifest-settings-rich-sections consumers; flagged as
+		 *      deprecated in JSDoc — manifest authors should migrate to
+		 *      the explicit `{ type: "component", componentName }` shape.
 		 *
-		 * Returns `null` (and warns) when neither resolves. Built-ins
-		 * win on collision so consumers can't accidentally shadow them
-		 * (REQ-MSRS-2).
+		 * Returns `null` (and warns) when nothing resolves. Built-ins
+		 * win on collision so consumers can't accidentally shadow them.
 		 *
-		 * @param {string} type The widget type string.
+		 * @param {object} widget A `widgets[]` entry, e.g. `{ type, props?, componentName? }`.
 		 * @return {object|null} Vue component or null.
 		 */
-		resolveWidgetComponent(type) {
+		resolveWidgetComponent(widget) {
+			const type = widget && typeof widget.type === 'string' ? widget.type : '';
+			if (!type) return null
 			if (Object.prototype.hasOwnProperty.call(BUILTIN_SETTINGS_WIDGETS, type)) {
-				return BUILTIN_SETTINGS_WIDGETS[type]
+				const builtin = BUILTIN_SETTINGS_WIDGETS[type];
+				if (builtin === COMPONENT_DISCRIMINATOR) {
+					// REQ-MSO-6: discriminator — look up `componentName`.
+					const name = widget.componentName;
+					if (typeof name !== 'string' || name.length === 0) {
+						// eslint-disable-next-line no-console
+						console.warn(
+							'[CnSettingsPage] Widget {type:"component"} requires a non-empty `componentName`. Widget will be skipped.',
+						);
+						return null
+					}
+					const resolved = this.effectiveCustomComponents[name];
+					if (!resolved) {
+						// eslint-disable-next-line no-console
+						console.warn(
+							`[CnSettingsPage] Widget component "${name}" not found in customComponents registry. Widget will be skipped.`,
+						);
+						return null
+					}
+					return resolved
+				}
+				return builtin
 			}
+			// Legacy fallback (manifest-settings-rich-sections REQ-MSRS-2).
+			// Deprecated — manifest authors should migrate to
+			// `{ type: "component", componentName: <X> }`. Kept here so
+			// existing consumers continue working unchanged.
 			const resolved = this.effectiveCustomComponents[type];
 			if (!resolved) {
 				// eslint-disable-next-line no-console
@@ -108012,6 +108284,11 @@ var script$8 = {
 		 * has already logged a warn. The filter happens here so the
 		 * template can use a clean `v-for` without nested `v-if`.
 		 *
+		 * The `widgetType` carried on the bubbled `@widget-event`
+		 * payload is the widget's `componentName` (when the
+		 * discriminator is `'component'`) or `widget.type` otherwise —
+		 * giving consumers a stable identifier for the dispatch.
+		 *
 		 * @param {object} section A section entry with `widgets[]`.
 		 * @param {number} sectionIndex Index in `sections[]`.
 		 * @return {Array<{key: string, component: object, props: object, widgetType: string, widgetIndex: number}>}
@@ -108021,19 +108298,57 @@ var script$8 = {
 			const widgets = Array.isArray(section.widgets) ? section.widgets : [];
 			for (let widgetIndex = 0; widgetIndex < widgets.length; widgetIndex++) {
 				const widget = widgets[widgetIndex] || {};
-				const component = this.resolveWidgetComponent(widget.type);
+				const component = this.resolveWidgetComponent(widget);
 				if (!component) continue
+				const widgetType = widget.type === 'component' && typeof widget.componentName === 'string'
+					? widget.componentName
+					: widget.type;
 				entries.push({
 					key: `widget-${sectionIndex}-${widgetIndex}`,
 					component,
 					props: widget.props || {},
-					widgetType: widget.type,
+					widgetType,
 					widgetIndex,
 				});
 			}
 			return entries
 		},
 
+		/**
+		 * Resolve the active-tab id on mount / when `tabs[]` changes.
+		 * Lookup order: explicit `initialTab` prop → first tab in
+		 * `tabs[]` → empty string. Unknown `initialTab` values fall
+		 * back to the first tab so the page never gets stuck.
+		 * (manifest-settings-orchestration REQ-MSO-5.)
+		 *
+		 * @return {string} The resolved tab id (empty in flat mode).
+		 */
+		resolveInitialTabId() {
+			if (!this.hasTabs) return ''
+			if (typeof this.initialTab === 'string' && this.initialTab.length > 0) {
+				const exists = this.tabs.some(t => t && t.id === this.initialTab);
+				if (exists) return this.initialTab
+			}
+			const first = this.tabs[0];
+			return first && typeof first.id === 'string' ? first.id : ''
+		},
+
+		/**
+		 * Handle a tab button click. Switches the active tab and
+		 * emits `@tab-change` so consumers can react (e.g. persist the
+		 * active tab in their preference store, update the URL hash).
+		 * (manifest-settings-orchestration REQ-MSO-5.)
+		 *
+		 * @param {object} tab The clicked tab definition.
+		 * @param {number} tabIndex The tab's index in `tabs[]`.
+		 */
+		onTabClick(tab, tabIndex) {
+			if (!tab || typeof tab.id !== 'string') return
+			if (this.activeTabId === tab.id) return
+			this.activeTabId = tab.id;
+			this.$emit('tab-change', { tabId: tab.id, tabIndex });
+		},
+
 		/**
 		 * Re-emit a widget's `widget-event` (caught by the local
 		 * CnSettingsWidgetMount helper) as a top-level `widget-event`
@@ -108109,11 +108424,51 @@ var __vue_render__$8 = function () {
           )
         : _vm._e(),
       _vm._v(" "),
-      _vm._l(_vm.sections, function (section, sectionIndex) {
+      _vm.hasTabs
+        ? _c(
+            "div",
+            {
+              staticClass: "cn-settings-page__tabs",
+              attrs: { role: "tablist" },
+            },
+            _vm._l(_vm.tabs, function (tab, tabIndex) {
+              return _c(
+                "button",
+                {
+                  key: "tab-" + tab.id,
+                  staticClass: "cn-settings-page__tab",
+                  class: {
+                    "cn-settings-page__tab--active": _vm.activeTabId === tab.id,
+                  },
+                  attrs: {
+                    role: "tab",
+                    type: "button",
+                    "aria-selected":
+                      _vm.activeTabId === tab.id ? "true" : "false",
+                    "aria-controls": "cn-settings-tab-panel-" + tab.id,
+                  },
+                  on: {
+                    click: function ($event) {
+                      return _vm.onTabClick(tab, tabIndex)
+                    },
+                  },
+                },
+                [
+                  _vm._v(
+                    "\n\t\t\t" + _vm._s(_vm.resolveLabel(tab.label)) + "\n\t\t"
+                  ),
+                ]
+              )
+            }),
+            0
+          )
+        : _vm._e(),
+      _vm._v(" "),
+      _vm._l(_vm.activeSections, function (section, sectionIndex) {
         return _c(
           "CnSettingsCard",
           {
-            key: "section-" + sectionIndex,
+            key: "section-" + (_vm.activeTabId || "flat") + "-" + sectionIndex,
             attrs: {
               title: _vm.resolveLabel(section.title),
               icon: section.icon || "",
@@ -108378,7 +108733,7 @@ __vue_render__$8._withStripped = true;
   /* style */
   const __vue_inject_styles__$8 = undefined;
   /* scoped */
-  const __vue_scope_id__$8 = "data-v-f43cb932";
+  const __vue_scope_id__$8 = "data-v-4286dbd4";
   /* module identifier */
   const __vue_module_identifier__$8 = undefined;
   /* functional template */