@conduction/nextcloud-vue 2.56.0-beta.31 → 2.56.0-beta.32

package/l10n/en.json

@@ -54,6 +54,7 @@
     "Could not update the view \"{name}\"": "Could not update the view \"{name}\"",
     "Unread": "Unread",
     "Mark as unread": "Mark as unread",
+    "Open sidebar": "Open sidebar",
     "Could not mark this record as unread.": "Could not mark this record as unread.",
     "Add to favourites": "Add to favourites",
     "Remove from favourites": "Remove from favourites",

package/l10n/nl.json

@@ -54,6 +54,7 @@
     "Could not update the view \"{name}\"": "Weergave \"{name}\" kon niet worden bijgewerkt",
     "Unread": "Ongelezen",
     "Mark as unread": "Markeren als ongelezen",
+    "Open sidebar": "Zijbalk openen",
     "Could not mark this record as unread.": "Dit dossier kon niet als ongelezen worden gemarkeerd.",
     "Add to favourites": "Aan favorieten toevoegen",
     "Remove from favourites": "Uit favorieten verwijderen",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.56.0-beta.31",
+  "version": "2.56.0-beta.32",
   "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/CnBannerWidget/CnBannerWidget.vue

@@ -48,15 +48,27 @@
 	</p>
 	<div v-else-if="visible" class="cn-banner-widget">
 		<NcNoteCard :type="resolvedVariant" class="cn-banner-widget__card">
-			<component
-				:is="clickable ? 'a' : 'span'"
-				class="cn-banner-widget__text"
-				:class="{ 'cn-banner-widget__text--clickable': clickable }"
-				:href="clickable ? routeHref : null"
-				data-testid="cn-banner-widget-text"
-				@click="onClick">
-				{{ displayText }}
-			</component>
+			<!-- A named icon replaces the variant's own glyph. -->
+			<template v-if="resolvedIcon" #icon>
+				<CnIcon :name="resolvedIcon" :size="22" data-testid="cn-banner-widget-icon" />
+			</template>
+			<span class="cn-banner-widget__line">
+				<component
+					:is="clickable ? 'a' : 'span'"
+					class="cn-banner-widget__text"
+					:class="{ 'cn-banner-widget__text--clickable': clickable }"
+					:href="clickable ? routeHref : null"
+					data-testid="cn-banner-widget-text"
+					@click="onClick"><strong v-if="displayLead" class="cn-banner-widget__lead" data-testid="cn-banner-widget-lead">{{ displayLead }}</strong>{{ displayLead && displayText ? ' ' : '' }}{{ displayText }}</component>
+				<!-- Board look: the actions as links at the end of the line. -->
+				<a
+					v-for="action in noteActions"
+					:key="action.key"
+					class="cn-banner-widget__link"
+					:href="action.href || null"
+					data-testid="cn-banner-widget-link"
+					@click="onActionClick($event, action)">{{ action.label }}</a>
+			</span>
 		</NcNoteCard>
 	</div>
 </template>
@@ -64,6 +76,7 @@
 <script>
 import { translate as t } from '@nextcloud/l10n'
 import { NcNoteCard } from '@nextcloud/vue'
+import CnIcon from '../CnIcon/CnIcon.vue'
 import { normalizeLook } from '../../composables/useLook.js'
 import { fillTemplate } from '../../utils/fillTemplate.js'
 import { followLinkClick, resolveHref } from '../../utils/linkNavigation.js'
@@ -149,7 +162,7 @@ const MAX_ACTIONS_BOARD = 4
 export default {
 	name: 'CnBannerWidget',
 
-	components: { NcNoteCard },
+	components: { CnIcon, NcNoteCard },
 
 	inject: {
 		/**
@@ -179,6 +192,27 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * A bold lead in front of the text ("2 aanmeldingen wachten op
+		 * goedkeuring." before the rest of the sentence). `{value}` is replaced
+		 * like in `text`, and it goes through the app's translate. Empty falls
+		 * back to the `content` blob.
+		 */
+		lead: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * A named icon (`AccountPlus`, `AlertOutline`, ...) drawn before the
+		 * text instead of the variant's own glyph. Empty falls back to the
+		 * `content` blob, then to the variant glyph.
+		 */
+		icon: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Optional visibility condition. Shape:
 		 * `{ endpoint?, source?, field?, op?, value }` — exactly one of
@@ -360,9 +394,38 @@ export default {
 			return VARIANTS.includes(v) ? v : 'info'
 		},
 
-		/** The effective banner text (prop → content → ''). */
+		/** The effective banner text (prop → content → ''), through the app's translate. */
 		resolvedText() {
-			return this.text || (this.content && this.content.text) || ''
+			const text = this.text || (this.content && this.content.text) || ''
+			return text ? this.tl(text) : ''
+		},
+
+		/** The effective bold lead (prop → content → ''), through the app's translate. */
+		resolvedLead() {
+			const lead = this.lead || (this.content && this.content.lead) || ''
+			return lead ? this.tl(lead) : ''
+		},
+
+		/** The lead with `{value}` filled in. */
+		displayLead() {
+			return this.fillValue(this.resolvedLead)
+		},
+
+		/** The effective icon name (prop → content → ''). */
+		resolvedIcon() {
+			return this.icon || (this.content && this.content.icon) || ''
+		},
+
+		/**
+		 * The note card's actions as links, under the board look only: the
+		 * first resolved action of `actions`, as the board draws "Beleid
+		 * wijzigen" at the end of the line. Without the look the note card
+		 * ignores `actions`, as it always did.
+		 *
+		 * @return {Array<object>} The resolved actions (at most one).
+		 */
+		noteActions() {
+			return normalizeLook(this.cnLook) === 'board' ? this.resolvedActions.slice(0, 1) : []
 		},
 
 		/** The effective visibleWhen condition (prop → content → null). */
@@ -513,7 +576,7 @@ export default {
 		 */
 		visible() {
 			const title = this.title || (this.content && this.content.title) || ''
-			if (this.resolvedText === '' && !(this.isAttention && title !== '')) {
+			if (this.resolvedText === '' && this.resolvedLead === '' && !(this.isAttention && title !== '')) {
 				return false
 			}
 			if (!this.resolvedVisibleWhen) {
@@ -772,6 +835,23 @@ export default {
 	margin: 0;
 }
 
+.cn-banner-widget__line {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	gap: 4px 20px;
+}
+
+.cn-banner-widget__lead {
+	font-weight: 700;
+}
+
+.cn-banner-widget__link {
+	margin-inline-start: auto;
+	font-size: 14px;
+	font-weight: 600;
+}
+
 .cn-banner-widget__text--clickable {
 	cursor: pointer;
 	text-decoration: underline;

package/src/components/CnCellRenderer/CnCellRenderer.md

@@ -86,6 +86,8 @@ fall back to the normal rendering. See `docs/migrating-to-manifest.md` →
 > `cnFormatters: { automationTrigger: v => ({ 'lead.created': 'Lead created' }[v] ?? v) }`);
 > standalone (no provider) it falls back to rendering the raw value.
 
+The `secondary` prop is the column's secondary line: the `avatar` widget draws it under the name, beside the picture (`CnDataTable` passes it for an avatar column); other cells ignore it.
+
 Column widget — `widget="badge"`, `widget="fkResolve"` (uuid → related object label via the shared object store with per-schema caching; config `widgetProps { register, schema, labelField }`), and `widget="link"` are built-in; any other id resolves against the app's `cellWidgets` registry (`CnAppRoot`'s `cellWidgets` prop → `cnCellWidgets`), and that component receives `{ value, row, property, formatted, ...widgetProps }`. `widget` takes precedence over `formatter`; when both are set the widget gets the formatter-shaped value as `formatted`. See `docs/migrating-to-manifest.md` → "Column widgets" + "Built-in cell formatters / widgets".
 
 - `widget="badge"` — `CnStatusBadge` pill; `widgetProps.variant` picks the colour.

package/src/components/CnCellRenderer/CnCellRenderer.vue

@@ -113,7 +113,14 @@
 					class="cn-cell-renderer__avatar-initials"
 					:style="{ width: avatarSize + 'px', height: avatarSize + 'px' }"
 					aria-hidden="true">{{ avatarInitials }}</span>
-				<span class="cn-cell-renderer__avatar-name" :title="avatarName || avatarUserId">{{ avatarName || avatarUserId }}</span>
+				<span class="cn-cell-renderer__avatar-text">
+					<span class="cn-cell-renderer__avatar-name" :title="avatarName || avatarUserId">{{ avatarName || avatarUserId }}</span>
+					<!-- The column's secondary line (e-mail), under the name and beside the picture. -->
+					<span
+						v-if="secondary"
+						class="cn-cell-renderer__avatar-secondary"
+						data-testid="cn-cell-secondary">{{ secondary }}</span>
+				</span>
 			</span>
 			<span v-else class="cn-cell-renderer__dash">—</span>
 		</template>
@@ -406,6 +413,16 @@ export default {
 			default: () => ({}),
 		},
 
+		/**
+		 * The column's secondary line (a muted second line under the value).
+		 * The `avatar` widget draws it under the name, beside the picture;
+		 * other cells ignore it, because the table draws it under the cell.
+		 */
+		secondary: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Optional declarative cell-format spec — a no-code alternative to a
 		 * registry `formatter`. Recognised `style` values:
@@ -560,14 +577,15 @@ export default {
 		},
 
 		/**
-		 * `avatar` widget: the picture size in pixels (`widgetProps.size`, default 24).
+		 * `avatar` widget: the picture size in pixels (`widgetProps.size`, default 24,
+		 * 32 under the board look).
 		 *
 		 * @return {number}
 		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-avatar-and-date-cells
 		 */
 		avatarSize() {
 			const size = Number(this.widgetProps && this.widgetProps.size)
-			return Number.isFinite(size) && size > 0 ? size : 24
+			return Number.isFinite(size) && size > 0 ? size : (this.isBoardLook ? 32 : 24)
 		},
 
 		/**
@@ -1319,11 +1337,33 @@ export default {
 	line-height: 1;
 }
 
+.cn-cell-renderer__avatar-text {
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+}
+
 .cn-cell-renderer__avatar-name {
 	min-width: 0;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
+	/* The name is the cell's text: it keeps the weight, size and colour the
+	   cell sets, as a plain value does. */
+	font: inherit;
+	color: inherit;
+}
+
+.cn-cell-renderer__avatar-secondary {
+	min-width: 0;
+	overflow: hidden;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+	font-weight: 400;
+	line-height: 1.35;
+	text-overflow: ellipsis;
+	text-decoration: none;
+	white-space: nowrap;
 }
 
 /* A date that matched a rule is also set in a heavier weight, so the signal