@conduction/nextcloud-vue 2.56.0-beta.21 → 2.56.0-beta.23

package/dist/nextcloud-vue.cjs.js.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/dist/nextcloud-vue.cjs.js.map
-size: 35684577 bytes
-sha256: 40220f92c6defbd478644408d9d23a88047c47798fb52eefee28e6d70e0fbc9a
+size: 35731122 bytes
+sha256: 2f00e1767fdb1c72a109ba42b159ca43fb36fbd6a93a33087f4c8529da77b80b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.56.0-beta.21",
+  "version": "2.56.0-beta.23",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/scripts/openregister-reliance.js

@@ -0,0 +1,206 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+
+/**
+ * Scores every component under src/components on how much it relies on
+ * OpenRegister and writes the result to docs/components/_generated/reliance.json
+ * for the documentation site.
+ *
+ * Two numbers per component:
+ *   - direct: lines inside the component's own directory that reference
+ *     OpenRegister (store imports, API paths, composables, the register and
+ *     schema selector).
+ *   - transitive: files outside the directory, reached by following the actual
+ *     import statements, that carry such a reference. A wrapper with no
+ *     reference of its own still counts the children it cannot render without,
+ *     while importing the widget registry alone does not drag in every widget.
+ *
+ * The tier follows the sum: none (0), light (1 to 3), medium (4 to 10) and
+ * heavy (11 and more). A component with tier none does not touch OpenRegister
+ * itself nor through anything it imports.
+ *
+ * Usage: node scripts/openregister-reliance.js
+ */
+
+const fs = require('fs')
+const path = require('path')
+
+/** Patterns that mark a direct OpenRegister reliance; each hit counts once per line. */
+const DIRECT_MARKERS = [
+	/\/apps\/openregister/,
+	/\bopenregister\b/i,
+	/useObjectStore|useRegisterStore|useSchemaStore|createObjectStore|createCrudStore/,
+	/from '[^']*\/store(\/index\.js)?'/,
+	/from '[^']*\/store\/[^']+'/,
+	/objectService|ObjectService/,
+	/CnRegisterSchemaSelect/,
+]
+
+const SOURCE_FILE = /\.(vue|js|ts|mjs)$/
+const TEST_FILE = /\.(spec|test)\./
+
+/**
+ * @param {string} dir directory to walk
+ * @return {string[]} source files below it, tests excluded
+ */
+function walk(dir) {
+	const files = []
+	for (const entry of fs.readdirSync(dir)) {
+		const full = path.join(dir, entry)
+		if (fs.statSync(full).isDirectory()) {
+			if (entry !== 'node_modules' && entry !== '__tests__') {
+				files.push(...walk(full))
+			}
+		} else if (SOURCE_FILE.test(entry) && !TEST_FILE.test(entry)) {
+			files.push(full)
+		}
+	}
+	return files
+}
+
+/**
+ * @param {string} source file contents
+ * @return {number} lines with a direct marker, comments excluded
+ */
+function countDirect(source) {
+	let count = 0
+	for (const line of source.split('\n')) {
+		const trimmed = line.trimStart()
+		if (trimmed.startsWith('*') || trimmed.startsWith('//') || trimmed.startsWith('/*')) {
+			continue
+		}
+		if (DIRECT_MARKERS.some((marker) => marker.test(line))) {
+			count++
+		}
+	}
+	return count
+}
+
+/**
+ * Resolves a relative import to a file on disk the way the bundler does.
+ *
+ * @param {string} fromFile importing file
+ * @param {string} specifier the relative import path
+ * @return {string|null}
+ */
+function resolveImport(fromFile, specifier) {
+	const base = path.resolve(path.dirname(fromFile), specifier)
+	const candidates = [base, base + '.js', base + '.mjs', base + '.ts', base + '.vue', path.join(base, 'index.js'), path.join(base, 'index.mjs'), path.join(base, 'index.ts')]
+	return candidates.find((candidate) => fs.existsSync(candidate) && fs.statSync(candidate).isFile()) ?? null
+}
+
+/**
+ * @param {string} source file contents
+ * @return {string[]} relative import specifiers, static and dynamic
+ */
+function relativeImports(source) {
+	return [...source.matchAll(/(?:from\s+|import\s*\(\s*|import\s+)'(\.{1,2}\/[^']+)'/g)].map((match) => match[1])
+}
+
+/**
+ * @param {number} score direct lines plus transitive files
+ * @return {'none'|'light'|'medium'|'heavy'}
+ */
+function tierOf(score) {
+	if (score === 0) {
+		return 'none'
+	}
+	if (score <= 3) {
+		return 'light'
+	}
+	if (score <= 10) {
+		return 'medium'
+	}
+	return 'heavy'
+}
+
+/**
+ * @param {string} componentName e.g. CnDeleteDialog
+ * @return {string} the docs page slug, e.g. cn-delete-dialog
+ */
+function pageSlug(componentName) {
+	return componentName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+/**
+ * @param {string} srcDir the src directory holding components/
+ * @param {string|null} docsComponentsDir where the component pages live, to link only existing pages
+ * @return {Record<string, {direct: number, transitive: number, tier: string, via: string[], page: string|null}>}
+ */
+function computeReliance(srcDir, docsComponentsDir = null) {
+	const componentsDir = path.join(srcDir, 'components')
+	const files = new Map()
+	for (const file of walk(srcDir)) {
+		const source = fs.readFileSync(file, 'utf8')
+		files.set(file, {
+			direct: countDirect(source),
+			imports: relativeImports(source).map((specifier) => resolveImport(file, specifier)).filter(Boolean),
+		})
+	}
+
+	const reachable = (startFiles) => {
+		const own = new Set(startFiles)
+		const seen = new Set()
+		const queue = [...startFiles]
+		while (queue.length > 0) {
+			const file = queue.pop()
+			for (const next of (files.get(file) ?? { imports: [] }).imports) {
+				if (!own.has(next) && !seen.has(next)) {
+					seen.add(next)
+					queue.push(next)
+				}
+			}
+		}
+		return [...seen]
+	}
+
+	const result = {}
+	for (const entry of fs.readdirSync(componentsDir).sort()) {
+		const dir = path.join(componentsDir, entry)
+		if (!fs.statSync(dir).isDirectory() || !/^Cn[A-Z]/.test(entry)) {
+			continue
+		}
+		const ownFiles = walk(dir)
+		const direct = ownFiles.reduce((sum, file) => sum + (files.get(file)?.direct ?? 0), 0)
+		const relyingFiles = reachable(ownFiles).filter((file) => (files.get(file)?.direct ?? 0) > 0)
+		const via = new Set(relyingFiles
+			.filter((file) => file.startsWith(componentsDir + path.sep))
+			.map((file) => file.slice(componentsDir.length + 1).split(path.sep)[0])
+			.filter((name) => name !== entry))
+		const slug = pageSlug(entry)
+		const hasPage = docsComponentsDir !== null && fs.existsSync(path.join(docsComponentsDir, slug + '.md'))
+		result[entry] = {
+			direct,
+			transitive: relyingFiles.length,
+			tier: tierOf(direct + relyingFiles.length),
+			via: [...via].sort(),
+			page: hasPage ? slug : null,
+		}
+	}
+	return result
+}
+
+/**
+ * @param {string} repoRoot the repository root
+ * @return {{outFile: string, components: object}}
+ */
+function writeReliance(repoRoot) {
+	const components = computeReliance(path.join(repoRoot, 'src'), path.join(repoRoot, 'docs/components'))
+	const outFile = path.join(repoRoot, 'docs/components/_generated/reliance.json')
+	fs.mkdirSync(path.dirname(outFile), { recursive: true })
+	fs.writeFileSync(outFile, JSON.stringify({ generatedBy: 'scripts/openregister-reliance.js', components }, null, '\t') + '\n')
+	return { outFile, components }
+}
+
+module.exports = { computeReliance, countDirect, tierOf, pageSlug, writeReliance }
+
+if (require.main === module) {
+	const { outFile, components } = writeReliance(path.resolve(__dirname, '..'))
+	const tiers = {}
+	for (const item of Object.values(components)) {
+		tiers[item.tier] = (tiers[item.tier] ?? 0) + 1
+	}
+	console.log(`wrote ${path.relative(process.cwd(), outFile)}: ${Object.keys(components).length} components`, tiers)
+}

package/src/components/CnAppRoot/CnAppRoot.md

@@ -78,6 +78,7 @@ With loading state, custom components, translate, permissions, and custom page t
 | `cellWidgets` | Object | No | `{}` | Cell-widget registry — map of widget-id → Vue component, rendered for a column that declares `pages[].config.columns[].widget`. The component receives `{ value, row, property, formatted, ...widgetProps }`. The library ships one built-in id, `"badge"` (renders `CnStatusBadge`); consumer entries cover everything else (status pills with custom colour maps, inline toggles, link cells, …). Provided to descendant `CnDataTable` / `CnCellRenderer` as `cnCellWidgets`. See `docs/migrating-to-manifest.md` → "Column widgets". |
 | `kbSearchProviders` | Object | No | `{}` | Pluggable knowledge-base search providers (#91 Wave 3) — map of provider-key → `{ search(query, opts), externalOpen? }`, merged OVER the library built-in `default` (endpoint) provider and provided to descendant `CnKbSearchWidget` as `cnKbSearchProviders`. A `kb-search` widget selects its provider via `content.provider`; an app talking to a bespoke KB backend (the xwiki proxy) registers its client here — the library ships only the seam. |
 | `translate` | Function | No | `key => key` | Translate function from the consuming app, typically `(key) => t(appId, key)`. Provided to descendants as `cnTranslate` |
+| `notificationLabels` | Object | No | `{}` | Labels for the app's notification rules in the user-settings notification pane, keyed `<schema>.<key>` or `<key>`; values are translated strings or `{ nl, en }` maps. A rule without a label reads as its key split into words ("Case assigned"), never as the raw key. Provided to descendants as `cnNotificationLabels` |
 | `permissions` | Array | No | `[]` | Permission strings for the current user; forwarded to `CnAppNav` for menu filtering |
 | `pageTypes` | Object | No | `null` | Page-type registry map (`type → component`). Falls back to the library's `defaultPageTypes`. Extend with `{ ...defaultPageTypes, report: MyReportPage }` |
 | `userSettingsTitle` | String | No | `''` | Title shown at the top of the hosted `NcAppSettingsDialog`. Empty (the default) resolves to `translate('User settings')`. Override per app to brand the modal (e.g. `'Decidiq preferences'`). |

package/src/components/CnAppRoot/CnAppRoot.vue

@@ -996,6 +996,18 @@ export default {
 			 * wiring.
 			 */
 			cnAppId: this.appId,
+			/**
+			 * The app's labels for its notification rules, read by the
+			 * notification-preferences pane in the user-settings modal. A
+			 * getter so a late prop update is still seen by a pane that
+			 * mounts after it.
+			 *
+			 * @spec openspec/changes/notification-rule-labels-and-runtime-version/specs/notification-preferences/spec.md
+			 */
+			get cnNotificationLabels() {
+				return self.notificationLabels || {}
+			},
+
 			/**
 			 * Target repo slug for the in-product feature-request deep
 			 * link (e.g. `ConductionNL/pipelinq`). Read from the
@@ -1411,6 +1423,23 @@ export default {
 			default: (key) => key,
 		},
 
+		/**
+		 * Labels for the app's notification rules, shown in the
+		 * user-settings notification pane instead of the rule keys. Keyed
+		 * `<schema>.<key>` (or just `<key>`); values are already translated
+		 * strings, e.g. `{ 'case.caseAssigned': t('dossiq', 'A case is
+		 * assigned to me') }`, or per-locale maps `{ nl, en }`. A rule's own
+		 * `label` from OpenRegister wins; a rule with no label anywhere reads
+		 * as its key split into words, never as the raw key.
+		 *
+		 * @type {{[key: string]: (string|object)}}
+		 * @spec openspec/changes/notification-rule-labels-and-runtime-version/specs/notification-preferences/spec.md
+		 */
+		notificationLabels: {
+			type: Object,
+			default: () => ({}),
+		},
+
 		/**
 		 * List of permission strings the current user holds. Forwarded
 		 * to CnAppNav's permission filter.

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -454,7 +454,8 @@
 						:cnRegistry="cnRegistry"
 						:availableWidgets="widgets"
 						@geoSaved="onGeoSaved"
-						@openIntegration="onAutoBodyOpenIntegration" />
+						@openIntegration="onAutoBodyOpenIntegration"
+						@selectObject="onRelatedObjectSelect" />
 				</slot>
 			</div>
 		</div>
@@ -764,7 +765,8 @@
 								:cnRegistry="cnRegistry"
 								:availableWidgets="bodyGridWidgets"
 								@geoSaved="onGeoSaved"
-								@openIntegration="onAutoBodyOpenIntegration" />
+								@openIntegration="onAutoBodyOpenIntegration"
+								@selectObject="onRelatedObjectSelect" />
 						</slot>
 					</div>
 				</template>
@@ -975,7 +977,8 @@
 						:cnRegistry="cnRegistry"
 						:availableWidgets="widgets"
 						@geoSaved="onGeoSaved"
-						@openIntegration="onAutoBodyOpenIntegration" />
+						@openIntegration="onAutoBodyOpenIntegration"
+						@selectObject="onRelatedObjectSelect" />
 				</slot>
 			</div>
 		</aside>
@@ -2334,6 +2337,7 @@ export default {
 		'layout-change',
 		'open-integration',
 		'refresh',
+		'related-object-click',
 		'related-row-click',
 		'relation-linked',
 		'request-feature',
@@ -4315,6 +4319,23 @@ export default {
 			this.$emit('open-integration', integrationId)
 		},
 
+		/**
+		 * Re-emit a click on an object in the Related widget. The page does not
+		 * know the routes; the host (CnPageRenderer on a manifest page) opens
+		 * the object's own detail page.
+		 *
+		 * @param {object} raw The clicked object; `@self` names its register and schema.
+		 */
+		onRelatedObjectSelect(raw) {
+			/**
+			 * @event related-object-click An object in the Related widget was
+			 * clicked. Payload is the raw object; `@self` carries its register,
+			 * schema and id.
+			 * @type {object}
+			 */
+			this.$emit('related-object-click', raw)
+		},
+
 		/**
 		 * Re-fetch the object after the geo widget persists `@self.geo` (so the
 		 * rest of the page — metadata, other widgets — reflects the new value),

package/src/components/CnDetailWidgetHost/CnDetailWidgetHost.vue

@@ -114,7 +114,8 @@
 			:includeGroups="content.groups || []"
 			:hideSingleTabTitle="content.hideSingleTabTitle !== false"
 			:showTotalCount="content.showTotalCount !== false"
-			@openIntegration="onOpenIntegration" />
+			@openIntegration="onOpenIntegration"
+			@selectObject="onSelectObject" />
 
 		<!-- `type: 'object-geo'` — view/edit the object's `@self.geo` on a map. -->
 		<CnObjectGeoWidget
@@ -183,7 +184,8 @@
 			<component
 				:is="renderer"
 				ref="renderer"
-				v-bind="rendererProps" />
+				v-bind="rendererProps"
+				@selectObject="onSelectObject" />
 		</CnWidgetWrapper>
 
 		<!-- Registry "card" widgets (stat / gauge / delta) render bare tile
@@ -218,7 +220,8 @@
 			:is="renderer"
 			v-else-if="renderer"
 			ref="renderer"
-			v-bind="rendererProps" />
+			v-bind="rendererProps"
+			@selectObject="onSelectObject" />
 
 		<!-- No renderer resolves: render nothing, which is what CnDetailPage has
 		     always done here. Surfacing an "unknown widget" box instead would be
@@ -501,7 +504,7 @@ export default {
 		},
 	},
 
-	emits: ['geo-saved', 'open-integration'],
+	emits: ['geo-saved', 'open-integration', 'select-object'],
 
 	setup() {
 		// Every integration component this host renders goes through the
@@ -1006,6 +1009,21 @@ export default {
 			this.$emit('open-integration', integrationId)
 		},
 
+		/**
+		 * Pass a related-object click up; the page decides where it opens. Heard
+		 * from the Related widget itself and from a registry widget that nests a
+		 * host of its own (a Tabs widget with a Related tab).
+		 *
+		 * @param {object} raw The clicked object as the related widget holds it.
+		 */
+		onSelectObject(raw) {
+			/**
+			 * @event select-object A related object was clicked in the related widget. Payload is the raw object; its `@self` names the register and schema.
+			 * @type {object}
+			 */
+			this.$emit('select-object', raw)
+		},
+
 		/**
 		 * Delegate to the rendered list widget's own create affordance, so the
 		 * card's Add action and the widget's footer button open the same form.

package/src/components/CnFlowDetail/CnFlowDetail.vue

@@ -200,6 +200,8 @@
 			:maxZoom="maxZoom"
 			@zoomChange="zoom = $event"
 			@nodeSelect="onNodeSelect"
+			@nodeActivate="onNodeActivate"
+			@nodeMenu="onNodeMenu"
 			@edgeSelect="onEdgeSelect"
 			@edgeLabelClick="onEdgeLabelClick"
 			@edgeLabelContext="onEdgeLabelContext"
@@ -1713,6 +1715,31 @@ export default {
 			this.openNodeMenu({ item: id, event: mouse })
 		},
 
+		/**
+		 * Enter or Space on a step: open its editor, as a double-click does.
+		 *
+		 * @param {string} id The step id.
+		 * @return {void}
+		 */
+		onNodeActivate(id) {
+			this.store.selectedNodeId = id
+			this.store.editingNodeId = id
+		},
+
+		/**
+		 * Shift+F10 or the menu key on a step: its menu, at the step.
+		 *
+		 * @param {object} request          The node's request.
+		 * @param {string} request.id       The step id.
+		 * @param {number} request.clientX  Where to place the menu.
+		 * @param {number} request.clientY  Where to place the menu.
+		 * @return {void}
+		 */
+		onNodeMenu({ id, clientX, clientY }) {
+			this.store.selectedNodeId = id
+			this.openNodeMenu({ item: id, event: { clientX, clientY } })
+		},
+
 		/**
 		 * Place a palette node where it was dropped.
 		 *

package/src/components/CnGraphCanvas/CnFlowNode.vue

@@ -224,6 +224,19 @@ export default {
 		 *   edges, its undo stack, its persistence — so nothing is removed here.
 		 */
 		'remove',
+
+		/**
+		 * @event activate Enter or Space on the focused node: open this step.
+		 *   Carries the node id. The pointer equivalent is a double-click.
+		 */
+		'activate',
+
+		/**
+		 * @event menu Shift+F10 or the menu key on the focused node: show this
+		 *   step's actions. Carries `{ id, clientX, clientY }`, a point at the
+		 *   node, so a host positions the menu as it would for a click.
+		 */
+		'menu',
 	],
 
 	setup() {
@@ -478,7 +491,8 @@ export default {
 		 * The keyboard contract.
 		 *
 		 * Arrow keys move; `c` arms an exit and, on a second node, completes the
-		 * connection; `Escape` cancels. Repeated `c` on the SAME node steps
+		 * connection; `Escape` cancels. Enter or Space opens the step, Shift+F10
+		 * or the menu key opens its actions. Repeated `c` on the SAME node steps
 		 * through its exits rather than re-arming the first — the behaviour a
 		 * mouse gets for free by pointing.
 		 *
@@ -527,6 +541,27 @@ export default {
 				return
 			}
 
+			// Opening the step, and its menu, from the keyboard. Only for a key
+			// pressed ON the node: a port inside it is a control of its own.
+			if (event.target === event.currentTarget) {
+				if (event.key === 'Enter' || event.key === ' ') {
+					event.preventDefault()
+					this.$emit('activate', this.id)
+					return
+				}
+
+				if ((event.key === 'F10' && event.shiftKey === true) || event.key === 'ContextMenu') {
+					event.preventDefault()
+					const rect = event.currentTarget.getBoundingClientRect()
+					this.$emit('menu', {
+						id: this.id,
+						clientX: rect.left + rect.width / 2,
+						clientY: rect.bottom,
+					})
+					return
+				}
+			}
+
 			// Delete and Backspace both, because which one removes a thing is a
 			// platform habit rather than a preference: Backspace is the delete
 			// key on a Mac keyboard, and a user who learned one does not think

package/src/components/CnGraphCanvas/CnGraphCanvas.vue

@@ -37,7 +37,9 @@
 					v-bind="nodeProps"
 					:deletable="!readOnly"
 					@connect="onConnect"
-					@remove="onNodeRemove">
+					@remove="onNodeRemove"
+					@activate="onNodeActivate"
+					@menu="onNodeMenu">
 					<template #default="slotProps">
 						<!-- @slot node The body of a step, rendered inside the
 						     focusable node wrapper. Receives `{ node }` with the
@@ -266,6 +268,8 @@ export default {
 		'canvas-drop',
 
 		'node-remove',
+		'node-activate',
+		'node-menu',
 
 		/**
 		 * The canvas zoom changed, by any route — a control here, the host's own
@@ -415,6 +419,41 @@ export default {
 			return port === 'in' ? null : port
 		},
 
+		/**
+		 * Forward Enter or Space on a node: the keyboard double-click.
+		 *
+		 * @param {string} id The node id.
+		 * @return {void}
+		 */
+		onNodeActivate(id) {
+			if (this.readOnly === true) {
+				return
+			}
+
+			/**
+			 * @event node-activate Enter or Space on a node. Payload is the id.
+			 */
+			this.$emit('node-activate', id)
+		},
+
+		/**
+		 * Forward Shift+F10 or the menu key on a node: the keyboard click menu.
+		 *
+		 * @param {object} request `{ id, clientX, clientY }`, a point at the node.
+		 * @return {void}
+		 */
+		onNodeMenu(request) {
+			if (this.readOnly === true) {
+				return
+			}
+
+			/**
+			 * @event node-menu Shift+F10 or the menu key on a node. Payload is
+			 *   `{ id, clientX, clientY }`.
+			 */
+			this.$emit('node-menu', request)
+		},
+
 		/**
 		 * Forward a node click.
 		 *

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -731,7 +731,7 @@
 					:currentPageSize="effectivePagination.limit || 20"
 					class="cn-index-page__pagination"
 					@pageChanged="onPageEvent"
-					@pageSizeChanged="$emit('page-size-changed', $event)" />
+					@pageSizeChanged="onPageSizeEvent" />
 			</div>
 
 			<!-- The open record, beside the list on a wide screen and instead
@@ -1057,7 +1057,7 @@ function namedFilterToQuery(values) {
  * @event {object} row-aux-click — Table row or card middle-clicked. Payload: (row, event) — the row object and the native auxclick event
  * @event {{ key: string, order: string }} sort — Column sort changed
  * @event {number} page-changed — Pagination page changed
- * @event {number} page-size-changed — Pagination page size changed
+ * @event {number} page-size-changed — Pagination page size changed. In self-fetch mode the list refetches page 1 at the new size first.
  * @event {string[]} select — Selection changed. Payload: array of selected IDs
  * @event {object} action — Row action triggered. Payload: { action, row }
  * @event {{ action: string, id: string, selectedIds: Array, count: number }} bulk-action — A declarative bulk action was triggered from the selection strip. The SELECTION travels with it: an action that has to go and find out what was selected is one re-render away from acting on a different set than the user saw highlighted.
@@ -5482,6 +5482,21 @@ export default {
 			this.$emit('page-changed', page)
 		},
 
+		/**
+		 * Page-size pick from CnPagination. In self-fetch mode the list refetches
+		 * page 1 at the new size — the event alone left the select changing and
+		 * the table not, since a manifest page has no host listening.
+		 *
+		 * @param {number} size Requested page size.
+		 * @return {void}
+		 */
+		onPageSizeEvent(size) {
+			if (this.isSelfFetchMode && typeof this.list.onPageSizeChange === 'function') {
+				this.list.onPageSizeChange(size)
+			}
+			this.$emit('page-size-changed', size)
+		},
+
 		/**
 		 * @param {{key: string, values: Array}} payload Facet-filter change from the sidebar.
 		 * @return {void}