@conduction/nextcloud-vue 2.56.0-beta.24 → 2.56.0-beta.26

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: 38245574 bytes
-sha256: a5678854a3205a4621af802be47ea65067c29bb280f4f1765558f532f8d9e13c
+size: 38337896 bytes
+sha256: a7d0d4bb2ccffd14adbe47978a666f89a6e3b1376dfecb854356280ac6440360

package/dist/nextcloud-vue.css

@@ -795,7 +795,7 @@
 }
 
 /* An invalid field: 2px error border on the control, 4px edge on the group. */
-.cn-look-board .cn-form-field--invalid input,
+.cn-look-board .cn-form-field--invalid input:not([type='checkbox']):not([type='radio']),
 .cn-look-board .cn-form-field--invalid textarea,
 .cn-look-board .cn-form-field--invalid .select {
 	border: var(--cn-field-error-border) solid var(--color-error);
@@ -1490,7 +1490,10 @@
 }
 
 .cn-look-board .cn-index-page__main.cn-index-page__main--table {
-	flex: 0 1 auto;
+	/* The body is a row: the card takes the width left beside a sidebar (the
+	   board's table card spans the content), and keeps the height of its rows. */
+	flex: 1 1 auto;
+	align-self: flex-start;
 	border: 1px solid var(--color-border);
 	border-radius: var(--cn-board-card-radius, 12px);
 	background: var(--color-main-background);
@@ -1680,6 +1683,37 @@
 	background: var(--color-primary-element-light);
 }
 
+/* The status accent outranks the board's border, also on hover and selection. */
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent {
+	border-inline-start-width: 4px;
+	padding-inline-start: 13px;
+}
+
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-success,
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-success:hover {
+	border-inline-start-color: var(--color-element-success);
+}
+
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-warning,
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-warning:hover {
+	border-inline-start-color: var(--color-element-warning);
+}
+
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-error,
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-error:hover {
+	border-inline-start-color: var(--color-element-error);
+}
+
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-info,
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-info:hover {
+	border-inline-start-color: var(--color-element-info);
+}
+
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-primary,
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-primary:hover {
+	border-inline-start-color: var(--color-primary-element);
+}
+
 .cn-look-board .cn-object-card--board .cn-object-card__content {
 	display: flex;
 	flex: 1 1 auto;
@@ -19425,6 +19459,18 @@ a.cn-xwiki-card__title[data-v-54e85fe3]:hover {
 	color: var(--color-text-maxcontrast);
 	font-style: italic;
 }
+.cn-related-objects-widget__section-status[data-v-44c2988f] {
+	margin: 0;
+	padding: var(--default-grid-baseline, 4px) calc(2 * var(--default-grid-baseline, 4px));
+	color: var(--color-text-maxcontrast);
+	font-size: 0.85em;
+}
+.cn-related-objects-widget__section-error[data-v-44c2988f] {
+	margin: 0;
+	padding: var(--default-grid-baseline, 4px) calc(2 * var(--default-grid-baseline, 4px));
+	color: var(--color-error-text, var(--color-error));
+	font-size: 0.85em;
+}
 .cn-related-objects-widget__empty-state[data-v-44c2988f] {
 	/* NcEmptyContent defaults to filling tall parents; inside a widget cell a
 	   compact block reads better. */
@@ -22090,6 +22136,47 @@ to { background-position: -200% 0;
 	border-color: var(--color-primary-element);
 	background: var(--color-primary-element-light);
 }
+
+/* The 4px start border takes 3px of padding, so the content stays put. */
+.cn-object-card.cn-object-card--accent[data-v-6f672c8f] {
+	border-inline-start-width: 4px;
+	padding-inline-start: 13px;
+}
+.cn-object-card.cn-object-card--accent-success[data-v-6f672c8f] {
+	border-inline-start-color: var(--color-element-success);
+}
+.cn-object-card.cn-object-card--accent-warning[data-v-6f672c8f] {
+	border-inline-start-color: var(--color-element-warning);
+}
+.cn-object-card.cn-object-card--accent-error[data-v-6f672c8f] {
+	border-inline-start-color: var(--color-element-error);
+}
+.cn-object-card.cn-object-card--accent-info[data-v-6f672c8f] {
+	border-inline-start-color: var(--color-element-info);
+}
+.cn-object-card.cn-object-card--accent-primary[data-v-6f672c8f] {
+	border-inline-start-color: var(--color-primary-element);
+}
+.cn-object-card__accent-icon[data-v-6f672c8f] {
+	display: inline-flex;
+	vertical-align: -2px;
+	margin-inline-end: 4px;
+}
+.cn-object-card--accent-success .cn-object-card__accent-icon[data-v-6f672c8f] {
+	color: var(--color-text-success);
+}
+.cn-object-card--accent-warning .cn-object-card__accent-icon[data-v-6f672c8f] {
+	color: var(--color-text-warning);
+}
+.cn-object-card--accent-error .cn-object-card__accent-icon[data-v-6f672c8f] {
+	color: var(--color-text-error);
+}
+.cn-object-card--accent-info .cn-object-card__accent-icon[data-v-6f672c8f] {
+	color: var(--color-element-info);
+}
+.cn-object-card--accent-primary .cn-object-card__accent-icon[data-v-6f672c8f] {
+	color: var(--color-primary-element);
+}
 .cn-object-card__checkbox[data-v-6f672c8f] {
 	flex-shrink: 0;
 	padding-top: 2px;
@@ -38840,6 +38927,71 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 }
 
 
+/* 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));
+}
+
+
 .cn-notif-prefs__intro[data-v-72cc0056] {
 	margin-bottom: 12px;
 	color: var(--color-text-maxcontrast);

package/l10n/en.json

@@ -1,5 +1,10 @@
 {
   "translations": {
+    "Linked items": "Linked items",
+    "Still loading: {sections}": "Still loading: {sections}",
+    "Could not load {section}.": "Could not load {section}.",
+    "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.": "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.",
+    "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.": "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.",
     "Show as": "Show as",
     "Board": "Board",
     "Calendar": "Calendar",
@@ -1284,7 +1289,8 @@
     "Development environment": "Development environment",
     "Test environment": "Test environment",
     "Acceptance environment": "Acceptance environment",
-    "About {label}": "About {label}"
+    "About {label}": "About {label}",
+    "Could not load the form for this item.": "Could not load the form for this item."
   },
   "plurals": {
     "%n year": [

package/l10n/nl.json

@@ -1,5 +1,10 @@
 {
   "translations": {
+    "Linked items": "Gekoppelde items",
+    "Still loading: {sections}": "Nog aan het laden: {sections}",
+    "Could not load {section}.": "{section} kon niet worden geladen.",
+    "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.": "Met inloggegevens van de organisatie handelen apps namens je organisatie. Keepiq, de kluis voor inloggegevens van Nextcloud, bewaart het geheim. De app krijgt het nooit in handen. Je kiest welke apps elk inloggegeven mogen gebruiken.",
+    "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.": "Apps handelen soms namens jou bij een externe dienst. Je geeft het geheim één keer aan Nextcloud, en Keepiq bewaart het in een versleutelde kluis. Apps doen de aanvraag via Keepiq en zien het geheim nooit. Je kiest welke apps elk inloggegeven mogen gebruiken. Deel er één tussen apps, of houd er één per app.",
     "Show as": "Toon als",
     "Board": "Bord",
     "Calendar": "Kalender",
@@ -171,7 +176,7 @@
     "This integration is not set up yet. Configure a connection to start using it.": "Deze integratie is nog niet ingesteld. Configureer een verbinding om hem te gebruiken.",
     "This integration is not set up yet. Install and enable the {app} app to start using it.": "Deze integratie is nog niet ingesteld. Installeer en activeer de app {app} om hem te gebruiken.",
     "Set up {app}": "{app} instellen",
-    "Add {type}": "Nieuwe {type}",
+    "Add {type}": "{type} toevoegen",
     "Add new contact": "Nieuw contact toevoegen",
     "Link contact": "Contact koppelen",
     "Search contacts": "Contacten zoeken",
@@ -1335,7 +1340,8 @@
     "Development environment": "Ontwikkelomgeving",
     "Test environment": "Testomgeving",
     "Acceptance environment": "Acceptatieomgeving",
-    "About {label}": "Over {label}"
+    "About {label}": "Over {label}",
+    "Could not load the form for this item.": "Kon het formulier voor dit item niet laden."
   },
   "plurals": {
     "%n year": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.56.0-beta.24",
+  "version": "2.56.0-beta.26",
   "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/src/components/CnAppNav/CnAppNav.vue

@@ -75,7 +75,7 @@
 -->
 <template>
 	<NcAppNavigation :aria-label="ariaLabel" data-testid="cn-nav">
-		<template v-if="$slots.search || $slots.brand || resolvedBrand" #search>
+		<template v-if="$slots.search || $slots.brand || navBrand" #search>
 			<!--
 				@slot brand
 				@description Replace the brand block at the very top of the
@@ -86,7 +86,7 @@
 			-->
 			<slot name="brand" :brand="resolvedBrand">
 				<div
-					v-if="resolvedBrand"
+					v-if="navBrand"
 					class="cn-app-nav__brand"
 					data-testid="cn-nav-brand">
 					<!-- Decorative beside a name: the name already says whose
@@ -481,6 +481,7 @@ import CnMenuItemIcon from '../CnMenuWidget/CnMenuItemIcon.vue'
 import { useLook } from '../../composables/useLook.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
 import { isSvgPath } from '../../utils/iconUtils.js'
+import { resolveBrand } from '../../utils/resolveBrand.js'
 import { passesContextPredicates } from '../../utils/visibleIfContext.js'
 import { CnActionButtons } from '../CnActionButtons/index.js'
 // The legacy `icon-*` → MDI bridge lives beside CnIcon now, so the menu EDITOR
@@ -579,6 +580,12 @@ export default {
 
 	inject: {
 		cnManifest: { default: null },
+		/**
+		 * Provided by CnAppRoot as true while the board look draws the brand
+		 * block in Nextcloud's header (screens-brand-block-top-bar): the
+		 * navigation then skips its own.
+		 */
+		cnBrandInHeader: { default: false },
 		cnTranslate: { default: () => (key) => key },
 		/**
 		 * Provided by CnAppRoot — opens the host app's
@@ -808,6 +815,17 @@ export default {
 			return this.translate ?? this.cnTranslate
 		},
 
+		/**
+		 * The brand the navigation draws itself: the resolved brand, or null
+		 * while the app's top bar draws it.
+		 *
+		 * @spec openspec/changes/screens-brand-block-top-bar/specs/layout-components/spec.md#requirement-the-navigation-does-not-draw-a-brand-block-the-bar-already-draws
+		 * @return {object|null}
+		 */
+		navBrand() {
+			return this.cnBrandInHeader ? null : this.resolvedBrand
+		},
+
 		/**
 		 * The brand to draw: the `brand` prop, else the manifest's
 		 * `nav.brand`. Name and caption go through the translate function,
@@ -819,20 +837,7 @@ export default {
 		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-navigation-brand
 		 */
 		resolvedBrand() {
-			const declared = this.brand ?? this.effectiveManifest?.nav?.brand
-			if (!declared || typeof declared !== 'object') {
-				return null
-			}
-			const text = (value) => (typeof value === 'string' && value !== '' ? this.effectiveTranslate(value) : '')
-			const brand = {
-				logo: typeof declared.logo === 'string' ? declared.logo : '',
-				// A URL, or `true` for the theme's emblem (--nldesign-emblem-url).
-				emblem: declared.emblem === true ? true : (typeof declared.emblem === 'string' ? declared.emblem : ''),
-				name: text(declared.name),
-				caption: text(declared.caption),
-				alt: text(declared.alt),
-			}
-			return (brand.logo || brand.emblem || brand.name || brand.caption) ? brand : null
+			return resolveBrand(this.brand ?? this.effectiveManifest?.nav?.brand, (value) => this.effectiveTranslate(value))
 		},
 
 		/**

package/src/components/CnAppRoot/CnAppRoot.vue

@@ -189,6 +189,8 @@
 
 		<!-- Phase 3: shell -->
 		<template v-else>
+			<!-- The brand block in Nextcloud's own header (board look); teleported, renders nothing here. -->
+			<CnBrandBar v-if="brandInHeader" :brand="resolvedBrandBlock" @unavailable="headerMissing = true" />
 			<!--
 			  @slot menu
 			  @description Left-rail navigation surface. Default:
@@ -681,6 +683,7 @@ import Restart from 'vue-material-design-icons/Restart.vue'
 import CnAiCompanion from '../CnAiCompanion/CnAiCompanion.vue'
 import CnAppLoading from '../CnAppLoading/CnAppLoading.vue'
 import CnAppNav from '../CnAppNav/CnAppNav.vue'
+import CnBrandBar from '../CnBrandBar/CnBrandBar.vue'
 import CnCommandPalette from '../CnCommandPalette/CnCommandPalette.vue'
 import CnCredentials from '../CnCredentials/CnCredentials.vue'
 import CnDependencyMissing from '../CnDependencyMissing/CnDependencyMissing.vue'
@@ -721,6 +724,7 @@ import { DEFAULT_FORGE, resolveForge } from '../../utils/forge.js'
 import { BUILT_IN_KB_PROVIDERS } from '../../utils/kbSearchProviders.js'
 import { createManifestTranslate } from '../../utils/manifestTranslate.js'
 import { installModalStack, uninstallModalStack } from '../../utils/modalStack.js'
+import { resolveBrand } from '../../utils/resolveBrand.js'
 import { resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 import { passesContextPredicates } from '../../utils/visibleIfContext.js'
 
@@ -781,6 +785,7 @@ export default {
 	name: 'CnAppRoot',
 
 	components: {
+		CnBrandBar,
 		NcAppContent,
 		NcAppSettingsDialog,
 		NcAppSettingsSection,
@@ -831,6 +836,9 @@ export default {
 			// value once, so a getter would freeze the look at creation.
 			cnLook: computed(() => self.resolvedLook),
 
+			// True while CnBrandBar draws the block in Nextcloud's header, so CnAppNav skips its own.
+			cnBrandInHeader: computed(() => self.brandInHeader),
+
 			get cnManifest() {
 				return self.manifestEditor ? self.manifestEditor.source.value : self.manifest
 			},
@@ -1591,6 +1599,19 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * The brand block (`{ logo, emblem, name, caption, alt, placement }`)
+		 * the board look draws at the start of Nextcloud's header. Empty falls back
+		 * to the manifest's `nav.brand`. `placement: "nav"` keeps the block
+		 * in the navigation.
+		 *
+		 * @type {object|null}
+		 */
+		brand: {
+			type: Object,
+			default: null,
+		},
+
 		/**
 		 * Title rendered at the top of the user-settings modal
 		 * (NcAppSettingsDialog `name` prop). Defaults to the
@@ -1790,6 +1811,12 @@ export default {
 	data() {
 		const willCheck = Array.isArray(this.requiresApps) && this.requiresApps.length > 0
 		return {
+			// Nextcloud's own header, present on a server-rendered page; the
+			// brand block goes into it (CnBrandBar). Read once at creation so
+			// the navigation never draws a block that then moves.
+			headerPresent: typeof document !== 'undefined' && !!document.getElementById('header'),
+			// Set when CnBrandBar finds the header gone: the navigation draws the block.
+			headerMissing: false,
 			capabilitiesLoading: willCheck,
 			missingApps: [],
 			guardError: null,
@@ -2062,6 +2089,32 @@ export default {
 			return (this.look || this.manifest?.look) === 'board' ? 'board' : 'nextcloud'
 		},
 
+		/**
+		 * The brand CnBrandBar draws in the header: the `brand` prop, else the manifest's
+		 * `nav.brand`, read into one shape.
+		 *
+		 * @return {object|null} The resolved brand, or null.
+		 */
+		resolvedBrandBlock() {
+			return resolveBrand(this.brand || this.manifest?.nav?.brand, (text) => this.manifestTranslate(text))
+		},
+
+		/**
+		 * Whether CnBrandBar draws the brand block in Nextcloud's header: the
+		 * board look, a brand that can be drawn, a placement other than `nav`,
+		 * and a `#header` to put it in. Without `#header` the navigation draws 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
+		 * @return {boolean}
+		 */
+		brandInHeader() {
+			return this.resolvedLook === 'board'
+				&& !this.headerMissing
+				&& this.headerPresent
+				&& !!this.resolvedBrandBlock
+				&& this.resolvedBrandBlock.placement !== 'nav'
+		},
+
 		/**
 		 * The label lookup provided as `cnTranslate`: the manifest's own
 		 * translations for the language first, then the host `translate`, then the

package/src/components/CnBannerWidget/CnBannerWidget.vue

@@ -142,6 +142,14 @@ export default {
 
 	components: { NcNoteCard },
 
+	inject: {
+		/**
+		 * The host's label lookup (CnAppRoot provides it); identity without one, so a
+		 * label that is not a key renders as written.
+		 */
+		cnTranslate: { default: () => (key) => key },
+	},
+
 	props: {
 		/**
 		 * Banner severity variant: `info | warning | error` (plus `success`
@@ -362,7 +370,7 @@ export default {
 		 */
 		resolvedKicker() {
 			const kicker = this.kicker || (this.content && this.content.kicker) || ''
-			return kicker
+			return kicker ? this.tl(kicker) : ''
 		},
 
 		/**
@@ -373,7 +381,7 @@ export default {
 		 */
 		displayTitle() {
 			const title = this.title || (this.content && this.content.title) || ''
-			return title ? this.fillValue(title) : this.displayText
+			return title ? this.fillValue(this.tl(title)) : this.displayText
 		},
 
 		/**
@@ -386,7 +394,7 @@ export default {
 		displayReason() {
 			const reason = this.reason || (this.content && this.content.reason) || ''
 			if (reason) {
-				return this.fillValue(reason)
+				return this.fillValue(this.tl(reason))
 			}
 			const title = this.title || (this.content && this.content.title) || ''
 			// A card that sets `text` to the same words as its `title` says
@@ -424,7 +432,7 @@ export default {
 				return {
 					key: `${index}-${action.id || action.label}`,
 					id: action.id,
-					label: action.label,
+					label: this.tl(action.label),
 					href,
 					target,
 					primary: index === primaryIndex,
@@ -526,6 +534,17 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * A manifest string through the host's label lookup (`cnTranslate`), so a key
+		 * such as "Mine" reads in the user's language.
+		 *
+		 * @param {string} text The text as written in the manifest.
+		 * @return {string} The translated text.
+		 */
+		tl(text) {
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
+		},
+
 		/**
 		 * Replace `{value}` in a text by the value the predicate read, once
 		 * one is known.