@conduction/nextcloud-vue 2.74.0 → 2.76.0

package/src/components/CnBrandBar/CnBrandBar.vue

@@ -0,0 +1,230 @@
+<!--
+  CnBrandBar — the brand block in Nextcloud's own header (screens-brand-block-top-bar).
+
+  Draws the 237px brand block (emblem, organisation, app name, and a 1px
+  divider at its end) at the START of `#header`, before the app menu, under the
+  board look. CnAppRoot mounts it when a brand is declared and `#header` exists.
+
+  `#header` is Nextcloud's and offers no extension point for apps, so this is
+  the one place the library reaches into it, and it does so defensively:
+    - it adds ONE node of its own (a host element) as the first child of the
+      header, and teleports the block into it; it never moves, edits or removes
+      a node Nextcloud drew;
+    - it re-inserts its own host when Nextcloud re-renders the header (a
+      MutationObserver on the header and its parent), never a second one;
+    - with no `#header` it renders nothing and emits `unavailable`, so
+      CnAppRoot lets the navigation draw the block instead.
+
+  Sizes come from the board: `dossiq/DqKop`.
+-->
+<template>
+	<Teleport v-if="host" :to="host">
+		<div class="cn-brand-bar" data-testid="cn-brand-bar">
+			<div class="cn-brand-bar__brand" data-testid="cn-brand-bar-brand">
+				<!-- Decorative beside a name: the name already says whose app this is. -->
+				<img
+					v-if="typeof brand.emblem === 'string' && brand.emblem !== ''"
+					class="cn-brand-bar__emblem"
+					data-testid="cn-brand-bar-emblem"
+					:src="brand.emblem"
+					:alt="brand.name ? '' : brand.alt">
+				<span
+					v-else-if="brand.emblem === true"
+					class="cn-brand-bar__emblem cn-brand-bar__emblem--theme"
+					data-testid="cn-brand-bar-emblem"
+					aria-hidden="true" />
+				<img
+					v-else-if="brand.logo"
+					class="cn-brand-bar__emblem"
+					:src="brand.logo"
+					:alt="brand.name ? '' : brand.alt">
+				<span v-if="brand.name || brand.caption" class="cn-brand-bar__text">
+					<span v-if="brand.caption" class="cn-brand-bar__caption">{{ brand.caption }}</span>
+					<strong v-if="brand.name" class="cn-brand-bar__name">{{ brand.name }}</strong>
+				</span>
+			</div>
+			<span class="cn-brand-bar__divider" aria-hidden="true" />
+		</div>
+	</Teleport>
+</template>
+
+<script>
+import { markRaw } from 'vue'
+
+const HOST_CLASS = 'cn-brand-bar-host'
+
+/**
+ * The brand block in Nextcloud's header.
+ *
+ * @event unavailable Emitted when there is no `#header` to put the block in (or it disappears), so the host lets the navigation draw it.
+ *
+ * @spec openspec/changes/screens-brand-block-top-bar/specs/layout-components/spec.md#requirement-the-board-look-draws-the-brand-block-in-the-nextcloud-header
+ */
+export default {
+	name: 'CnBrandBar',
+
+	props: {
+		/**
+		 * The resolved brand: `{ logo, emblem, name, caption, alt }`. `emblem`
+		 * is a URL, or `true` for the theme's `--nldesign-emblem-url`.
+		 *
+		 * @type {{logo?: string, emblem?: (string|boolean), name?: string, caption?: string, alt?: string}}
+		 */
+		brand: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	emits: ['unavailable'],
+
+	data() {
+		return { host: null, observer: null }
+	},
+
+	mounted() {
+		this.attach()
+	},
+
+	beforeUnmount() {
+		this.detach()
+	},
+
+	methods: {
+		/**
+		 * Insert the host as the first child of `#header` and watch the header.
+		 * Emits `unavailable` when there is no header.
+		 *
+		 * @return {void}
+		 */
+		attach() {
+			const header = document.getElementById('header')
+			if (!header) {
+				/**
+				 * @event unavailable Emitted when there is no `#header` to put the block in.
+				 */
+				this.$emit('unavailable')
+				return
+			}
+			this.host = markRaw(document.createElement('div'))
+			this.host.className = HOST_CLASS
+			header.insertBefore(this.host, header.firstChild)
+			if (typeof MutationObserver === 'function') {
+				this.observer = new MutationObserver(() => this.reattach())
+				this.observer.observe(header, { childList: true })
+				if (header.parentNode) {
+					this.observer.observe(header.parentNode, { childList: true })
+				}
+			}
+		},
+
+		/**
+		 * Put the same host back when Nextcloud re-rendered the header and took
+		 * it out. Never creates a second host; when the header is gone for good
+		 * it hands the block back to the navigation.
+		 *
+		 * @return {void}
+		 */
+		reattach() {
+			if (!this.host) {
+				return
+			}
+			const header = document.getElementById('header')
+			if (!header) {
+				this.$emit('unavailable')
+				return
+			}
+			if (this.host.parentNode !== header) {
+				header.insertBefore(this.host, header.firstChild)
+				this.observer?.observe(header, { childList: true })
+			}
+		},
+
+		/**
+		 * Stop watching and remove only the host this component added.
+		 *
+		 * @return {void}
+		 */
+		detach() {
+			this.observer?.disconnect()
+			this.observer = null
+			this.host?.remove()
+			this.host = null
+		},
+	},
+}
+</script>
+
+<style>
+/* The host is one flex item at the start of Nextcloud's header. */
+.cn-brand-bar-host {
+	flex: none;
+	display: flex;
+	align-items: center;
+	height: 100%;
+	margin-inline-end: 12px;
+}
+
+.cn-brand-bar {
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	width: var(--cn-board-brand-width, 237px);
+}
+
+.cn-brand-bar__brand {
+	flex: 1 1 0;
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	min-width: 0;
+	min-height: 48px;
+	max-height: 100%;
+	padding: 0 6px;
+	border-radius: 8px;
+	color: var(--color-background-plain-text, var(--color-main-text));
+}
+
+.cn-brand-bar__emblem {
+	flex: none;
+	height: var(--cn-nav-emblem-size, 34px);
+	width: auto;
+	object-fit: contain;
+}
+
+.cn-brand-bar__emblem--theme {
+	display: inline-block;
+	width: var(--cn-nav-emblem-size, 34px);
+	background: var(--nldesign-emblem-url) center / contain no-repeat;
+}
+
+.cn-brand-bar__text {
+	display: flex;
+	flex-direction: column;
+	line-height: 1.15;
+	min-width: 0;
+}
+
+.cn-brand-bar__caption {
+	font-size: 13px;
+	white-space: nowrap;
+	opacity: 0.8;
+}
+
+.cn-brand-bar__name {
+	font-size: 18px;
+	font-weight: 700;
+	white-space: nowrap;
+}
+
+.cn-brand-bar__divider {
+	flex: none;
+	width: 1px;
+	height: 28px;
+	background: currentColor;
+	opacity: 0.25;
+	color: var(--color-background-plain-text, var(--color-main-text));
+}
+</style>

package/src/components/CnCardGrid/CnCardGrid.md

@@ -106,6 +106,7 @@ Custom card slot — replace the default CnObjectCard with your own rendering:
 |---|---|---|---|
 | `selectable` | `Boolean` | `false` | When `true`, each card shows a selection checkbox and the grid emits `select` events |
 | `selectedIds` | `Array` | `[]` | Array of currently selected object IDs (matched against `object[rowKey]`) |
+| `accentOf` | `Function` | `null` | `(object) => { variant, icon?, label? } \| null`, each card's status accent (see CnObjectCard `accent`) |
 
 ## Board look props
 

package/src/components/CnCardGrid/CnCardGrid.vue

@@ -40,6 +40,7 @@
 						:status="statusOf ? statusOf(object) : null"
 						:leading="leadingOf ? leadingOf(object) : null"
 						:footerAction="footerActionOf ? footerActionOf(object) : null"
+						:accent="accentOf ? accentOf(object) : null"
 						v-on="cardListeners(object)">
 						<template v-if="$slots['card-actions']" #actions="{ object: obj }">
 							<slot name="card-actions" :object="obj" />
@@ -182,6 +183,12 @@ export default {
 			default: null,
 		},
 
+		/** `(object) => { variant, icon?, label? }` for each card's status accent. See CnObjectCard `accent`. */
+		accentOf: {
+			type: Function,
+			default: null,
+		},
+
 		/** Text shown when there are no objects */
 		emptyText: {
 			type: String,

package/src/components/CnCredentials/CnCredentials.vue

@@ -2,25 +2,25 @@
   - SPDX-License-Identifier: EUPL-1.2
   - SPDX-FileCopyrightText: 2026 Conduction B.V.
   -
-  - CnCredentials — the settings surface for the OpenRegister credential
+  - CnCredentials: the settings surface for the OpenRegister credential
   - broker. Apps occasionally need to act on your behalf against an external
   - service (GitHub, GitLab, …). Rather than hand the secret to the app, you
-  - give it once to OpenRegister, which stores it in Keepiq — Nextcloud's
+  - give it once to OpenRegister, which stores it in Keepiq, Nextcloud's
   - native, encrypted credential vault. Apps then make the outbound call
   - THROUGH OpenRegister and never see the secret itself. You decide which
   - apps may use each credential, so one credential can be shared across apps
   - or kept dedicated to one.
   -
   - Two scopes render from this one component:
-  -   • scope="personal"      (default) — the signed-in user's own
+  -   • scope="personal"      (default), the signed-in user's own
   -     credentials, shown in an app's *personal* settings. From here you may
   -     only add/remove *the app you are currently in* to/from a credential,
   -     or add a new credential (the current app is auto-added). You never
   -     manage the full app list of another app from here.
-  -   • scope="organisation"  — organisation-wide credentials, shown in an
+  -   • scope="organisation" , organisation-wide credentials, shown in an
   -     app's *admin* settings. An admin manages the full allowed-app list.
   -
-  - Talks to OpenRegister's credential endpoints (metadata only — a secret is
+  - Talks to OpenRegister's credential endpoints (metadata only, a secret is
   - write-only and is NEVER returned or displayed):
   -   GET    /apps/openregister/api/credentials?scope={scope}
   -   GET    /apps/openregister/api/credentials/providers
@@ -148,7 +148,7 @@
 				</ul>
 			</section>
 
-			<!-- Add credential — inline wizard: pick a provider, then fill it in. -->
+			<!-- Add credential: inline wizard: pick a provider, then fill it in. -->
 			<section class="cn-credentials__section">
 				<NcButton v-if="!adding"
 					variant="secondary"
@@ -269,7 +269,7 @@ const PROVIDERS_PATH = '/apps/openregister/api/credentials/providers'
  * Hardcoded per-provider presentation. Keyed by the OpenRegister catalogue
  * identifier. `colour` drives the tile; `setupHelp`/`setupUrl` explain how to
  * obtain the secret; `secretLabel` names the field. Providers not listed here
- * still work — they render a neutral tile from their identifier.
+ * still work, they render a neutral tile from their identifier.
  */
 const PROVIDER_META = {
 	github: {
@@ -339,7 +339,7 @@ export default {
 		},
 
 		/**
-		 * The current app's manifest `credentials[]` declarations — the
+		 * The current app's manifest `credentials[]` declarations: the
 		 * providers this app can reach through the broker. Shape:
 		 * `[{ provider, reason, scopes }]`. Rendered read-only under the intro.
 		 *
@@ -404,15 +404,16 @@ export default {
 		},
 
 		/**
-		 * Reframed intro copy per scope.
+		 * Reframed intro copy per scope. No em-dashes, sentences under 16 words.
 		 *
+		 * @spec openspec/changes/r4-object-lock-url-and-credentials-copy/specs/credentials-settings/spec.md
 		 * @return {string} Intro text.
 		 */
 		introText() {
 			if (this.scope === 'organisation') {
-				return t('nextcloud-vue', 'Organisation credentials let apps act on behalf of your organisation. The secret is stored in Keepiq — Nextcloud\'s native credential vault — never in the app. You choose which apps may use each credential.')
+				return t('nextcloud-vue', 'Organisation credentials let apps act for your organisation. Keepiq, the credential vault of Nextcloud, keeps the secret. The app never holds it. You choose which apps may use each credential.')
 			}
-			return t('nextcloud-vue', 'Apps sometimes need to act on your behalf against an external service. So they never hold your secrets, you give a secret to Nextcloud once and it is kept in Keepiq — a native, encrypted credential vault. Apps then make the call through Keepiq and never see the secret. You decide which apps may use each credential — share one across apps, or keep one per app.')
+			return t('nextcloud-vue', 'Apps sometimes act for you on an external service. You give the secret to Nextcloud once, and Keepiq keeps it in an encrypted vault. Apps make the call through Keepiq and never see the secret. You choose which apps may use each credential. Share one across apps, or keep one per app.')
 		},
 
 		/**
@@ -438,7 +439,7 @@ export default {
 			const serverIds = this.providers.map((p) => p.identifier)
 			let ids = serverIds.length ? serverIds : Object.keys(PROVIDER_META)
 			// When the app declares which providers it uses (appCredentials),
-			// only offer those — an app should not let you add a credential for
+			// only offer those, an app should not let you add a credential for
 			// a provider it has no code path to use.
 			if (this.supportedProviders.size > 0) {
 				ids = ids.filter((id) => this.supportedProviders.has(id))
@@ -448,7 +449,7 @@ export default {
 
 		/**
 		 * Provider identifiers the app declares it uses, derived from
-		 * `appCredentials`. Empty when the app declares nothing — filtering is
+		 * `appCredentials`. Empty when the app declares nothing, filtering is
 		 * then a no-op, so consumers that don't declare providers are unchanged.
 		 *
 		 * @return {Set<string>} Supported provider identifiers.
@@ -460,7 +461,7 @@ export default {
 		},
 
 		/**
-		 * Stored credentials to display — filtered to the app's supported
+		 * Stored credentials to display: filtered to the app's supported
 		 * providers when it declares any, so you can only see and authorise
 		 * credentials the app can actually use; otherwise all of them.
 		 *
@@ -503,7 +504,7 @@ export default {
 		},
 
 		/**
-		 * Whether the add form can be submitted — name, provider and a secret
+		 * Whether the add form can be submitted: name, provider and a secret
 		 * are required (the whole point is to store a secret).
 		 *
 		 * @return {boolean} True when submittable.
@@ -727,7 +728,7 @@ export default {
 		},
 
 		/**
-		 * Human-readable provider title — hardcoded catalogue first, then the
+		 * Human-readable provider title: hardcoded catalogue first, then the
 		 * server title, then the raw identifier.
 		 *
 		 * @param {string} identifier The provider identifier.

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -2727,18 +2727,21 @@ export default {
 			() => props.objectId,
 			{ enabled: () => Boolean(resolveType() && props.objectId) },
 		)
-		const sidebarReg = props.sidebarProps?.register || props.resolvedSidebar?.register || props.register || ''
-		const sidebarSchema = props.sidebarProps?.schema || props.resolvedSidebar?.schema || props.schema || ''
+		// Getters, read at call time: a register or schema that arrives after
+		// mount (route params, a resolved sidebar) must reach the lock URL. They
+		// used to be consts captured once at setup.
+		const sidebarReg = () => props.sidebarProps?.register || props.resolvedSidebar?.register || props.register || ''
+		const sidebarSchema = () => props.sidebarProps?.schema || props.resolvedSidebar?.schema || props.schema || ''
 		const lock = useObjectLock(
 			subscriptionStore,
-			() => sidebarReg,
-			() => resolveType() || sidebarSchema,
+			sidebarReg,
+			() => resolveType() || sidebarSchema(),
 			() => props.objectId,
 			// The third argument is the OBJECT CACHE KEY (`<register>-<schema>`)
 			// and the lock URL needs the schema SLUG. They were one string, and
 			// the acquire went to `/api/objects/<register>/<register>-<schema>/`,
 			// which no register answers.
-			{ schemaSlug: () => props.schema || sidebarSchema },
+			{ schemaSlug: () => props.schema || sidebarSchema() },
 		)
 		return {
 			...registryExposed,

package/src/components/CnEnvironmentBanner/CnEnvironmentBanner.vue

@@ -103,7 +103,10 @@ export default {
 				return
 			}
 			const all = Object.values(ENVIRONMENT_TITLE_PREFIX)
-			const bare = document.title.replace(new RegExp(`^(?:${all.map((p) => p.replace(/[[\]]/g, '\\$&')).join('|')}) `), '')
+			// Plain string comparison: no pattern is built from the prefixes, so
+			// there is nothing to escape.
+			const owned = all.find((p) => document.title.startsWith(`${p} `))
+			const bare = owned ? document.title.slice(owned.length + 1) : document.title
 			const wanted = environment ? `${ENVIRONMENT_TITLE_PREFIX[environment]} ${bare}` : bare
 			if (document.title !== wanted) {
 				document.title = wanted

package/src/components/CnFormDialog/CnFormDialog.vue

@@ -309,6 +309,7 @@
 							     and select machinery is unchanged either way. -->
 							<component
 								:is="isUserField(field) ? 'NcSelectUsers' : 'NcSelect'"
+								v-cn-select-aria="fieldAria(field)"
 								:inputId="'cn-form-' + field.key"
 								:inputLabel="fieldLabelText(field)"
 								:labelOutside="isBoardLook"
@@ -358,6 +359,7 @@
 						<!-- Multiselect (array enum items / $ref array / Nextcloud users, supports async function) -->
 						<div v-else-if="field.widget === 'multiselect' || field.widget === 'user-multiselect' || field.widget === 'group-multiselect'" class="cn-form-dialog__select-wrapper">
 							<NcSelect
+								v-cn-select-aria="fieldAria(field)"
 								:inputId="'cn-form-' + field.key"
 								:inputLabel="fieldLabelText(field)"
 								:labelOutside="isBoardLook"
@@ -401,6 +403,7 @@
 						<div v-else-if="field.widget === 'tags'" class="cn-form-dialog__select-wrapper">
 							<!-- TODO: restore `:options` to `asyncState[field.key]?.options` once on Vue 3 (buble doesn't support optional chaining) -->
 							<NcSelect
+								v-cn-select-aria="fieldAria(field)"
 								:inputId="'cn-form-' + field.key"
 								:inputLabel="fieldLabelText(field)"
 								:labelOutside="isBoardLook"
@@ -789,6 +792,7 @@ import { heldFromFailures, splitHeldFiles, uploadHeldFiles } from '../../composa
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
 import { TENANT_CONTEXT_KEY } from '../../composables/useTenantContext.js'
 import { useWriteFeedback } from '../../composables/useWriteFeedback.js'
+import { cnSelectAria } from '../../directives/cnSelectAria.js'
 import { dialogBoardMixin } from '../../mixins/dialogBoard.js'
 import { useObjectStore } from '../../store/useObjectStore.js'
 import { resolveCreateOverrideHandler } from '../../utils/actionsDispatcher.js'
@@ -1009,6 +1013,8 @@ const SEMANTIC_RESOLVE_ENDPOINT = '/apps/openregister/api/schemas/resolve-by-imp
 export default {
 	name: 'CnFormDialog',
 
+	directives: { cnSelectAria },
+
 	components: {
 		CnFileField,
 		CnDurationField,
@@ -3618,6 +3624,10 @@ export default {
 				return
 			}
 			const [head, ...rest] = key.split('.')
+			const unsafe = ['__proto__', 'constructor', 'prototype']
+			if (unsafe.includes(head) || rest.some((k) => unsafe.includes(k))) {
+				return
+			}
 			const clone = JSON.parse(JSON.stringify(this.formData[head] ?? {}))
 			let cur = clone
 			rest.slice(0, -1).forEach((k) => {

package/src/components/CnFormPage/CnFormPage.vue

@@ -217,6 +217,7 @@
 					<component
 						:is="resolveFieldRender(field).tag"
 						v-if="resolveFieldRender(field)"
+						v-cn-select-aria="selectAria(field)"
 						v-bind="fieldProps(field)"
 						v-on="resolveFieldRender(field).listeners">
 						<!-- NcCheckboxRadioSwitch puts its label in the slot -->
@@ -398,6 +399,7 @@ import CnStepper from '../CnStepper/CnStepper.vue'
 import { cnRenderFormField } from '../../composables/cnFormFieldRenderer.js'
 import { draftIndicatorText, draftKey, formDraftMixin, readDraft } from '../../composables/useFormDraft.js'
 import { normalizeLook } from '../../composables/useLook.js'
+import { cnSelectAria } from '../../directives/cnSelectAria.js'
 import { loadCurrentUserProfile } from '../../utils/currentUserProfile.js'
 import { computeAssignments, resolveFieldDefaults } from '../../utils/formAssign.js'
 import { validateFieldValue } from '../../utils/formValidation.js'
@@ -441,6 +443,8 @@ function resolveParams(url, params) {
 export default {
 	name: 'CnFormPage',
 
+	directives: { cnSelectAria },
+
 	components: {
 		CnFormErrorSummary,
 		CnFormField,
@@ -1308,6 +1312,35 @@ export default {
 			return props
 		},
 
+		/**
+		 * The accessibility attributes of an enum field's NcSelect. NcSelect
+		 * forwards no attributes to its input, so these go through
+		 * `v-cn-select-aria` onto the combobox input instead of `fieldProps`.
+		 * The error element exists for an enum in both looks (NcSelect has no
+		 * native error text), so an invalid value lists it before the hint.
+		 *
+		 * @param {object} field The formField shape.
+		 * @return {object|null} The attributes, or null for any other control.
+		 */
+		selectAria(field) {
+			const render = this.resolveFieldRender(field)
+			if (!render || render.kind !== 'enum') {
+				return null
+			}
+			const ids = []
+			if (this.fieldErrors[field.key]) {
+				ids.push(this.errorIdFor(field))
+			}
+			if (field.help) {
+				ids.push(this.helpIdFor(field))
+			}
+			return {
+				'aria-invalid': this.fieldErrors[field.key] ? 'true' : null,
+				'aria-describedby': ids.length > 0 ? ids.join(' ') : null,
+				'aria-required': this.showsBoardHead(field) && this.isFieldRequired(field) ? 'true' : null,
+			}
+		},
+
 		/**
 		 * Cancel (board look footer): go to `cancelRoute` when set, and tell the
 		 * host.

package/src/components/CnIndexPage/CnIndexPage.md

@@ -434,6 +434,21 @@ list nested under a parent route (`/forms/:id/submissions`) is a fully
 declarative page. When `objects` **is** supplied (every existing consumer),
 nothing changes — no store is touched and `filter` has no effect.
 
+### Mixed-schema lists (`collectionUrl`)
+
+Set `collectionUrl` to list from an endpoint that searches several
+register/schema pairs at once. `register` and `schema` stay the page's own
+pair (columns, Add, export, import); a row of another pair edits, saves and
+deletes through its own `@self.register` / `@self.schema`.
+
+```js static
+<CnIndexPage
+  title="Publications"
+  register="19"
+  schema="24"
+  :collection-url="generateUrl('/apps/opencatalogi/api/{slug}', { slug })" />
+```
+
 ## Named entity sources (`config.entitySource`) — lists that are not OpenRegister objects
 
 Self-fetch needs a `register` + `schema` pair. Some lists have neither: a flow