@conduction/nextcloud-vue 2.80.0 → 2.81.0

package/src/components/CnBannerWidget/CnBannerWidget.vue

@@ -7,7 +7,7 @@
 	<section
 		v-if="visible && isAttention"
 		class="cn-banner-widget cn-banner-widget--attention"
-		:class="'cn-banner-widget--' + resolvedVariant"
+		:class="['cn-banner-widget--' + resolvedVariant, { 'cn-banner-widget--stacked': isStacked }]"
 		:aria-labelledby="headingId"
 		data-testid="cn-banner-widget-attention">
 		<div class="cn-banner-widget__body">
@@ -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,8 +76,11 @@
 <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'
+import { readPath } from '../../utils/readPath.js'
 import { safeHref } from '../../utils/safeHref.js'
 import { nextUid } from '../../utils/uid.js'
 import { compareVisibleWhen, readVisibleWhenValue } from '../../utils/visibleWhen.js'
@@ -147,7 +162,7 @@ const MAX_ACTIONS_BOARD = 4
 export default {
 	name: 'CnBannerWidget',
 
-	components: { NcNoteCard },
+	components: { CnIcon, NcNoteCard },
 
 	inject: {
 		/**
@@ -177,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
@@ -266,6 +302,18 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Attention card: stack the actions under the text instead of beside it,
+		 * the "Begin hier" card of PqMijnWerk (16px title, the action under the
+		 * reason). Falls back to the `content` blob.
+		 *
+		 * @spec openspec/changes/screens-start-here-banner/specs/start-here-banner/spec.md#requirement-a-card-can-stack-its-action-under-the-text
+		 */
+		stacked: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Stored content blob (CnDashboardPage registry branch) carrying the
 		 * same keys as the flat props: `{ variant, text, visibleWhen, route,
@@ -326,6 +374,12 @@ export default {
 			 * the text wherever it says `{value}`.
 			 */
 			conditionValue: null,
+			/**
+			 * The first row of the `visibleWhen` source query (its `order`
+			 * applied), the card's subject: `{subject.<field>}` in the texts
+			 * and `@subject.<field>` in an action route read it.
+			 */
+			conditionRow: null,
 			/** Whether the visibleWhen request itself failed (not: answered "no"). */
 			conditionFailed: false,
 			/** Why it failed, as the request reported it. */
@@ -340,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). */
@@ -383,6 +466,15 @@ export default {
 			return (this.layout || (this.content && this.content.layout) || 'banner') === 'attention'
 		},
 
+		/**
+		 * Whether the actions sit under the text.
+		 *
+		 * @return {boolean}
+		 */
+		isStacked() {
+			return this.stacked || Boolean(this.content && this.content.stacked)
+		},
+
 		/**
 		 * The attention card's kicker (prop, else content).
 		 *
@@ -391,7 +483,7 @@ export default {
 		 */
 		resolvedKicker() {
 			const kicker = this.kicker || (this.content && this.content.kicker) || ''
-			return kicker ? this.tl(kicker) : ''
+			return kicker ? this.fillValue(this.tl(kicker)) : ''
 		},
 
 		/**
@@ -459,7 +551,7 @@ export default {
 				let target = null
 				let href = ''
 				if (action.route) {
-					target = typeof action.route === 'string' ? { name: action.route } : action.route
+					target = typeof action.route === 'string' ? { name: action.route } : this.resolveSubject(action.route)
 					href = resolveHref(target, this.$router)
 				} else if (typeof action.href === 'string' && action.href !== '') {
 					const safe = safeHref(action.href)
@@ -484,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) {
@@ -518,7 +610,7 @@ export default {
 		 */
 		uncheckedText() {
 			const title = this.title || (this.content && this.content.title) || this.resolvedText
-			if (!title || title.includes('{value}')) {
+			if (!title || title.includes('{value}') || title.includes('{subject.')) {
 				return t('nextcloud-vue', 'Could not check')
 			}
 			// `escape: false`: the result is rendered through `{{ }}`, which escapes.
@@ -590,10 +682,55 @@ export default {
 		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-attention-card
 		 */
 		fillValue(text) {
-			if (this.conditionValue === null || !text.includes('{value}')) {
+			let out = text
+			if (this.conditionValue !== null && out.includes('{value}')) {
+				out = out.replaceAll('{value}', String(this.conditionValue))
+			}
+			return this.fillSubject(out)
+		},
+
+		/**
+		 * Fill `{subject.<field>}` (and `{subject.<field>|date}`, `|days`) from
+		 * the card's subject row. A token with no value empties the whole text,
+		 * as in a record list. Text without a subject token is untouched.
+		 *
+		 * @param {string} text The text.
+		 * @return {string} The filled text.
+		 * @spec openspec/changes/screens-start-here-banner/specs/start-here-banner/spec.md#requirement-a-banner-can-name-the-first-row-of-a-query
+		 */
+		fillSubject(text) {
+			if (typeof text !== 'string' || !text.includes('{subject.')) {
 				return text
 			}
-			return text.replaceAll('{value}', String(this.conditionValue))
+			// `{value}` is not a subject token: keep it out of the template fill.
+			const guard = '\u0000value\u0000'
+			const filled = fillTemplate(text.replaceAll('{value}', guard), { subject: this.conditionRow || {} })
+			return filled.replaceAll(guard, '{value}')
+		},
+
+		/**
+		 * Replace `@subject.<field>` strings anywhere in an action route
+		 * (params, query) by the subject's value.
+		 *
+		 * @param {unknown} node A route name, location or any nested part of one.
+		 * @return {unknown} The same shape with the tokens resolved.
+		 * @spec openspec/changes/screens-start-here-banner/specs/start-here-banner/spec.md#requirement-a-banner-can-name-the-first-row-of-a-query
+		 */
+		resolveSubject(node) {
+			if (typeof node === 'string') {
+				if (!node.startsWith('@subject.')) {
+					return node
+				}
+				const value = this.conditionRow ? readPath(this.conditionRow, node.slice('@subject.'.length)) : undefined
+				return value === undefined || value === null ? '' : String(value)
+			}
+			if (Array.isArray(node)) {
+				return node.map((item) => this.resolveSubject(item))
+			}
+			if (node && typeof node === 'object') {
+				return Object.fromEntries(Object.entries(node).map(([key, value]) => [key, this.resolveSubject(value)]))
+			}
+			return node
 		},
 
 		/**
@@ -636,6 +773,7 @@ export default {
 			if (outcome) {
 				this.conditionMet = outcome.met === true
 				this.conditionValue = outcome.value !== undefined ? outcome.value : null
+				this.conditionRow = outcome.row && typeof outcome.row === 'object' ? outcome.row : null
 				this.conditionFailed = outcome.failed === true
 				this.conditionFailureReason = outcome.failed === true && typeof outcome.reason === 'string' ? outcome.reason : ''
 				return
@@ -644,12 +782,15 @@ export default {
 			if (!cond) {
 				this.conditionMet = null
 				this.conditionValue = null
+				this.conditionRow = null
 				this.conditionFailed = false
 				this.conditionFailureReason = ''
 				return
 			}
 			try {
-				const value = await readVisibleWhenValue(cond)
+				const sink = {}
+				const value = await readVisibleWhenValue(cond, undefined, sink)
+				this.conditionRow = sink.row || null
 				this.conditionValue = value
 				this.conditionMet = compareVisibleWhen(value, cond.op || 'eq', cond.value)
 				this.conditionFailed = false
@@ -662,6 +803,7 @@ export default {
 				console.warn('[CnBannerWidget] visibleWhen could not be evaluated, banner hidden:', error?.message || error)
 				this.conditionMet = false
 				this.conditionValue = null
+				this.conditionRow = null
 				this.conditionFailed = true
 				this.conditionFailureReason = typeof error?.message === 'string' ? error.message : String(error ?? '')
 			}
@@ -693,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;
@@ -784,6 +943,32 @@ export default {
 	color: var(--color-text-maxcontrast);
 }
 
+/* Stacked (PqMijnWerk "Begin hier"): the text, then the action under it. */
+.cn-banner-widget--stacked {
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 10px;
+}
+
+.cn-banner-widget--stacked .cn-banner-widget__body {
+	flex: 0 0 auto;
+	gap: 10px;
+}
+
+.cn-banner-widget--stacked .cn-banner-widget__title {
+	font-size: 16px;
+	line-height: 1.4;
+}
+
+.cn-banner-widget--stacked .cn-banner-widget__reason {
+	font-size: 14px;
+}
+
+.cn-banner-widget--stacked .cn-banner-widget__action {
+	min-height: var(--cn-board-control-height, 40px);
+	font-size: 14px;
+}
+
 .cn-banner-widget__actions {
 	display: flex;
 	flex-wrap: wrap;

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)
 		},
 
 		/**
@@ -882,11 +900,14 @@ export default {
 		 * a `{ value: variant }` map (e.g. `{ placed: 'primary', delivered: 'success' }`)
 		 * that CnStatusBadge resolves per label. Null when unset (falls back to
 		 * `badgeVariant`). Lets a manifest colour a status column without code.
+		 * A column-level `colorMap` (it reaches the cell as the property's
+		 * `colorMap`) works too, so `{ widget: 'badge', colorMap }` and
+		 * `{ widget: 'badge', widgetProps: { colorMap } }` read the same.
 		 *
 		 * @return {object|null}
 		 */
 		badgeColorMap() {
-			return (this.widgetProps && this.widgetProps.colorMap) || null
+			return (this.widgetProps && this.widgetProps.colorMap) || this.enumColorMap || null
 		},
 
 		/**
@@ -1316,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