@conduction/nextcloud-vue 2.79.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,7 +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'
@@ -78,6 +94,12 @@ const LAYOUTS = ['banner', 'attention']
 /** An attention card offers a primary and a secondary action, no more. */
 const MAX_ACTIONS = 2
 
+/**
+ * Under the board look the card takes what the boards draw: DqMijnWerk's
+ * "Vandaag eerst" has three secondary actions and the primary one.
+ */
+const MAX_ACTIONS_BOARD = 4
+
 /**
  * CnBannerWidget — declarative notice banner for dashboards and v2 pages
  * (`banner` widget type, Wave 1 of nextcloud-vue#91).
@@ -140,7 +162,7 @@ const MAX_ACTIONS = 2
 export default {
 	name: 'CnBannerWidget',
 
-	components: { NcNoteCard },
+	components: { CnIcon, NcNoteCard },
 
 	inject: {
 		/**
@@ -148,6 +170,8 @@ export default {
 		 * label that is not a key renders as written.
 		 */
 		cnTranslate: { default: () => (key) => key },
+		/** The app's look, provided by CnAppRoot or CnPageRenderer (`nextcloud` or `board`). */
+		cnLook: { default: 'nextcloud' },
 	},
 
 	props: {
@@ -168,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
@@ -232,7 +277,8 @@ export default {
 		},
 
 		/**
-		 * Attention card: at most two actions. Each is `{ label, route?,
+		 * Attention card: its actions, two at most (four under the board look,
+		 * or `maxActions`). Each is `{ label, route?,
 		 * href?, primary?, id? }`: `route` is a route name or location,
 		 * `href` an URL. An action with neither renders a button that emits
 		 * `action`. The first action is the primary one unless one sets
@@ -245,6 +291,29 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Attention card: how many actions it shows at most. Null takes the
+		 * default: two, four under the board look.
+		 *
+		 * @spec openspec/changes/screens-banner-actions-parity/specs/banner-actions/spec.md#requirement-the-board-attention-card-shows-the-boards-actions
+		 */
+		maxActions: {
+			type: Number,
+			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,
@@ -305,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. */
@@ -319,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). */
@@ -362,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).
 		 *
@@ -370,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)) : ''
 		},
 
 		/**
@@ -403,12 +516,27 @@ export default {
 		},
 
 		/**
-		 * The attention card's actions: the first two that have a label, each
+		 * The attention card's actions: the first `actionCap` that have a label, each
 		 * with its href and whether it is the primary one.
 		 *
 		 * @return {Array<{key: string, id: (string|undefined), label: string, href: string, target: (object|null), primary: boolean, index: number}>}
 		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-attention-card
 		 */
+		/**
+		 * How many actions the attention card shows: `maxActions` (prop, then
+		 * content), else four under the board look and two without it.
+		 *
+		 * @return {number} The cap.
+		 * @spec openspec/changes/screens-banner-actions-parity/specs/banner-actions/spec.md#requirement-the-board-attention-card-shows-the-boards-actions
+		 */
+		actionCap() {
+			const explicit = this.maxActions ?? (this.content ? this.content.maxActions : undefined)
+			if (Number.isInteger(explicit) && explicit > 0) {
+				return explicit
+			}
+			return normalizeLook(this.cnLook) === 'board' ? MAX_ACTIONS_BOARD : MAX_ACTIONS
+		},
+
 		resolvedActions() {
 			const raw = this.actions || (this.content && this.content.actions) || []
 			if (!Array.isArray(raw)) {
@@ -416,14 +544,14 @@ export default {
 			}
 			const usable = raw
 				.filter((action) => action && typeof action === 'object' && typeof action.label === 'string' && action.label !== '')
-				.slice(0, MAX_ACTIONS)
+				.slice(0, this.actionCap)
 			const declaredPrimary = usable.findIndex((action) => action.primary === true)
 			const primaryIndex = declaredPrimary === -1 ? 0 : declaredPrimary
 			return usable.map((action, index) => {
 				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)
@@ -448,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) {
@@ -482,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.
@@ -554,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
 		},
 
 		/**
@@ -600,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
@@ -608,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
@@ -626,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 ?? '')
 			}
@@ -657,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;
@@ -748,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.