@conduction/nextcloud-vue 2.89.2 → 2.91.0

package/src/components/CnIndexPage/CnIndexPageWidgets.vue

@@ -34,7 +34,7 @@
 					:is="entry.renderer"
 					:widgetId="entry.id"
 					:content="entry.content"
-					v-bind="entry.content" />
+					v-bind="declaredContent(entry)" />
 			</CnWidgetWrapper>
 		</div>
 	</component>
@@ -43,6 +43,7 @@
 <script>
 import CnKpiGrid from '../CnKpiGrid/CnKpiGrid.vue'
 import CnWidgetWrapper from '../CnWidgetWrapper/CnWidgetWrapper.vue'
+import { pickDeclaredProps } from '../../utils/declaredProps.js'
 import { canonicalWidgetType } from '../../utils/widgetTypeAliases.js'
 import { BUILT_IN_WIDGETS } from '../CnWidgetGrid/builtInWidgets.js'
 import { getWidgetTypeEntry } from '../CnWidgetGrid/dashboardWidgetRegistry.js'
@@ -89,7 +90,7 @@ export default {
 		 * The renderable entries, in the listed order.
 		 *
 		 * @spec openspec/changes/screens-index-stat-row/specs/index-page/spec.md#requirement-an-index-page-can-draw-a-stat-row-above-the-list
-		 * @return {Array<{id: string, title: string, content: object, headerLink: (object|null), renderer: object}>}
+		 * @return {Array<{id: string, type: string, title: string, content: object, headerLink: (object|null), renderer: object}>}
 		 */
 		entries() {
 			const list = Array.isArray(this.widgets) ? this.widgets : []
@@ -109,6 +110,7 @@ export default {
 				const translate = typeof this.cnTranslate === 'function' ? this.cnTranslate : (key) => key
 				out.push({
 					id: def.id,
+					type: def.type,
 					title: typeof def.title === 'string' && def.title !== '' ? translate(def.title) : '',
 					content: (def.content && typeof def.content === 'object') ? def.content : {},
 					headerLink: (def.headerLink && typeof def.headerLink === 'object') ? def.headerLink : null,
@@ -120,6 +122,19 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * The content keys an entry's renderer declares as props. An undeclared
+		 * key would fall through onto the renderer's root; the whole content
+		 * still arrives as `content`.
+		 *
+		 * @param {{ renderer: object, content: object, type?: string, id: string }} entry A resolved entry.
+		 * @return {object} The declared content keys.
+		 * @spec openspec/changes/declared-props-detail-index-sidebar/specs/widget-hosts/spec.md#requirement-a-widget-host-passes-only-the-keys-a-widget-declares
+		 */
+		declaredContent(entry) {
+			return pickDeclaredProps(entry.renderer, entry.content, entry.type || entry.id)
+		},
+
 		/**
 		 * Resolve a widget type: the consumer registry, then the dashboard
 		 * catalog (the type as written, then its alias), then the built-ins.

package/src/components/CnObjectSidebar/CnObjectSidebar.vue

@@ -229,6 +229,7 @@ import CnTagsTab from './CnTagsTab.vue'
 import CnTasksTab from './CnTasksTab.vue'
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
 import { useObjectSubscription } from '../../composables/useObjectSubscription.js'
+import { pickDeclaredProps } from '../../utils/declaredProps.js'
 import { labelLang } from '../../utils/manifestTranslate.js'
 import { CnIcon } from '../CnIcon/index.js'
 import { CnLeafMountHost } from '../CnLeafMountHost/index.js'
@@ -965,9 +966,11 @@ export default {
 		 * widgets get the shared coordinate context plus the loaded object
 		 * (`objectData`); the prop-driven `data` built-in also gets the schema
 		 * OBJECT bound to its `schema` prop (the other tabs use the `schema`
-		 * slug string, so the override is scoped to `type: 'data'`). A widget's
-		 * own `props` win on overlap.
+		 * slug string, so the override is scoped to `type: 'data'`). Of a
+		 * widget's own `props`, the ones its component declares win on overlap;
+		 * an undeclared one would only fall through onto the component's root.
 		 *
+		 * @spec openspec/changes/declared-props-detail-index-sidebar/specs/widget-hosts/spec.md#requirement-a-widget-host-passes-only-the-keys-a-widget-declares
 		 * @param {{ type: string, props?: object }} w Widget spec
 		 * @return {object} Props to v-bind onto the resolved widget component
 		 */
@@ -980,7 +983,7 @@ export default {
 				// a String `schema`.
 				bindings.schema = this.objectSchema
 			}
-			return { ...bindings, ...(w.props || {}) }
+			return { ...bindings, ...pickDeclaredProps(this.resolveWidgetComponent(w.type), w.props || {}, w.type || '') }
 		},
 
 		/**

package/src/components/index.js

@@ -43,6 +43,8 @@ export { CnDeleteDialog } from './CnDeleteDialog/index.js'
 export { CnCopyDialog } from './CnCopyDialog/index.js'
 export { CnFieldHelper } from './CnFieldHelper/index.js'
 export { CnFormDialog } from './CnFormDialog/index.js'
+export { CnDialog } from './CnDialog/index.js'
+export { CnDialogHeader } from './CnDialogHeader/index.js'
 export { CnFormBuilder } from './CnFormBuilder/index.js'
 export { CnAdvancedFormDialog, CnMetadataTab, CnPropertiesTab, CnPropertyValueCell } from './CnAdvancedFormDialog/index.js'
 export { CnMassDeleteDialog } from './CnMassDeleteDialog/index.js'

package/src/index.js

@@ -99,6 +99,8 @@ export {
 	CnDetailGrid,
 	CnDetailPage,
 	CnDetailWidgetHost,
+	CnDialog,
+	CnDialogHeader,
 	CnDividerWidget,
 	CnDividerWidgetForm,
 	CnDocumentReviewList,

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()
+}