@conduction/nextcloud-vue 2.89.2 → 2.90.0

package/src/components/CnAdminSettingsShell/CnAdminSettingsShell.vue

@@ -76,7 +76,7 @@
 				:active="tab.id === activeTabId">
 				<div class="cn-admin-settings-shell__panel" :data-tab="tab.id">
 					<!-- @slot tab-<id> The panel of the tab with that `id` in `tabs`. -->
-					<slot :name="`tab-${tab.id}`" />
+					<slot v-if="!lazyTabs || tab.id === activeTabId" :name="`tab-${tab.id}`" />
 				</div>
 			</CnTab>
 		</CnTabs>
@@ -491,6 +491,19 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Mount a tab's `tab-<id>` slot only while that tab is open, and
+		 * unmount it when another tab opens, so each visit mounts it afresh
+		 * and the page does not load every tab at once. Off (the default),
+		 * every panel stays mounted and only the open one shows.
+		 *
+		 * @spec openspec/changes/admin-settings-lazy-tabs/specs/settings-board-look/spec.md#requirement-the-admin-shell-can-mount-only-the-open-tab
+		 */
+		lazyTabs: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * How the `tabs` strip is drawn, as CnTabs' `variant`: `line`, the
 		 * folder tabs (the default), or `underline`, plain labels on a rule

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -421,7 +421,7 @@
 						:is="registryRenderer(item)"
 						:widgetId="item.widgetId"
 						:content="registryWidgetBindings(item)"
-						v-bind="{ ...registryWidgetBindings(item), ...containerBindings(item) }"
+						v-bind="{ ...registryWidgetProps(item), ...containerBindings(item) }"
 						@header="onWidgetHeader(item, $event)" />
 				</CnWidgetWrapper>
 				<CnWidgetWrapper
@@ -882,7 +882,7 @@
 							:is="registryRenderer(item)"
 							:widgetId="item.widgetId"
 							:content="registryWidgetBindings(item)"
-							v-bind="{ ...registryWidgetBindings(item), ...containerBindings(item), ...cellChromeBindings(item) }"
+							v-bind="{ ...registryWidgetProps(item), ...containerBindings(item), ...cellChromeBindings(item) }"
 							@header="onWidgetHeader(item, $event)" />
 					</CnWidgetWrapper>
 				</template>
@@ -984,6 +984,7 @@ import { pageViews } from '../../mixins/pageViews.js'
 import { mergeUserLayout, resolveUserLayoutApi } from '../../store/plugins/dashboardLayouts.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
 import { contentHeaderLink } from '../../utils/contentHeaderLink.js'
+import { pickDeclaredProps } from '../../utils/declaredProps.js'
 import { userLocale } from '../../utils/userLocale.js'
 import { compareVisibleWhen, evaluateWorkspaceCondition, isWorkspaceCondition, readVisibleWhenValue } from '../../utils/visibleWhen.js'
 import { canonicalWidgetType } from '../../utils/widgetTypeAliases.js'
@@ -3642,6 +3643,23 @@ export default {
 			return outcome ? { ...content, conditionOutcome: outcome } : content
 		},
 
+		/**
+		 * The content keys a registry widget receives as props: only the ones
+		 * its renderer declares. An undeclared key would otherwise fall through
+		 * as an attribute onto the renderer's root component and could override
+		 * a value the widget computes for it. The whole content still arrives
+		 * as `content`. A renderer that forwards its own attributes
+		 * (`inheritAttrs: false`) keeps receiving every key.
+		 *
+		 * @param {object} item Layout item.
+		 * @return {object} The bindings the renderer declares.
+		 * @spec openspec/changes/dashboard-declared-widget-props/specs/dashboard-page/spec.md#requirement-a-dashboard-widget-receives-only-the-content-keys-it-declares
+		 */
+		registryWidgetProps(item) {
+			const def = this.getWidgetDef(item.widgetId)
+			return pickDeclaredProps(this.registryRenderer(item), this.registryWidgetBindings(item), def?.type || item.widgetId)
+		},
+
 		/**
 		 * What a container widget (registry `container`, such as `tabs`) needs
 		 * beside its content: the page's widget definitions, so its tabs find

package/src/utils/declaredProps.js

@@ -0,0 +1,115 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+
+/*
+ * `process.env.NODE_ENV` is substituted by every consuming app's bundler at
+ * build time; see NcSelectTags.js.
+ */
+/* global process */
+
+import { camelize } from 'vue'
+
+const warned = new Set()
+
+/**
+ * Add the prop names one component options object declares, following its
+ * `extends` and `mixins`.
+ *
+ * @param {object} options A component options object.
+ * @param {Set<string>} names The set to add camelCase prop names to.
+ * @param {number} depth Recursion guard.
+ */
+function collect(options, names, depth) {
+	if (!options || typeof options !== 'object' || depth > 8) {
+		return
+	}
+	const props = options.props
+	if (Array.isArray(props)) {
+		props.forEach((name) => names.add(camelize(String(name))))
+	} else if (props && typeof props === 'object') {
+		Object.keys(props).forEach((name) => names.add(camelize(name)))
+	}
+	collect(options.extends, names, depth + 1)
+	if (Array.isArray(options.mixins)) {
+		options.mixins.forEach((mixin) => collect(mixin, names, depth + 1))
+	}
+}
+
+/**
+ * The prop names a component declares, or `null` when it takes every
+ * attribute itself and so must keep receiving all of them:
+ *  - `inheritAttrs: false`: the component forwards `$attrs` on purpose;
+ *  - a functional component without `props`: its attrs are its props;
+ *  - an async component that has not resolved yet.
+ *
+ * @spec openspec/changes/dashboard-declared-widget-props/specs/dashboard-page/spec.md#requirement-a-dashboard-widget-receives-only-the-content-keys-it-declares
+ * @param {object|((...args: unknown[]) => unknown)|null} component A component definition.
+ * @return {Set<string>|null} camelCase prop names, or null for "all".
+ */
+export function declaredPropNames(component) {
+	if (!component) {
+		return null
+	}
+	if (typeof component === 'function') {
+		if (!component.props) {
+			return null
+		}
+		const names = new Set()
+		collect({ props: component.props }, names, 0)
+		return names
+	}
+	if (typeof component !== 'object') {
+		return null
+	}
+	if (component.__asyncLoader) {
+		return component.__asyncResolved ? declaredPropNames(component.__asyncResolved) : null
+	}
+	const chain = [component, component.extends, ...(component.mixins || [])]
+	if (chain.some((options) => options && options.inheritAttrs === false)) {
+		return null
+	}
+	const names = new Set()
+	collect(component, names, 0)
+	return names
+}
+
+/**
+ * Keep the entries of `bindings` whose key `component` declares as a prop.
+ * A component for which {@link declaredPropNames} returns null gets every
+ * entry. A dropped key is warned about once outside production when the
+ * component has no `content` prop either, so the key reaches nothing.
+ *
+ * @spec openspec/changes/dashboard-declared-widget-props/specs/dashboard-page/spec.md#requirement-a-dashboard-widget-receives-only-the-content-keys-it-declares
+ * @param {object|((...args: unknown[]) => unknown)|null} component The component that will receive the bindings.
+ * @param {object} bindings The candidate bindings.
+ * @param {string} label Names the component in the warning (for example the widget type).
+ * @return {object} The bindings the component declares.
+ */
+export function pickDeclaredProps(component, bindings, label) {
+	const declared = declaredPropNames(component)
+	if (!declared || !bindings || typeof bindings !== 'object') {
+		return bindings
+	}
+	const out = {}
+	for (const [key, value] of Object.entries(bindings)) {
+		if (declared.has(camelize(key))) {
+			out[key] = value
+			continue
+		}
+		if (process.env.NODE_ENV !== 'production' && !declared.has('content') && !warned.has(`${label}\u0000${key}`)) {
+			warned.add(`${label}\u0000${key}`)
+			// eslint-disable-next-line no-console
+			console.warn(`[nextcloud-vue] content key "${key}" is not passed to widget "${label}": it declares neither that prop nor \`content\`.`)
+		}
+	}
+	return out
+}
+
+/**
+ * Forget which keys were warned about. For tests.
+ */
+export function resetDeclaredPropWarnings() {
+	warned.clear()
+}