@conduction/nextcloud-vue 2.58.0 → 2.60.0

package/src/components/CnFlowRunsWidget/CnFlowRunsWidget.vue

@@ -31,15 +31,15 @@
 			</p>
 			<ul v-else class="cn-flow-runs-widget__list">
 				<li
-					v-for="run in rows"
-					:key="run.uuid"
+					v-for="(run, index) in rows"
+					:key="run.uuid || `row-${index}`"
 					class="cn-flow-runs-widget__row"
 					:class="{ 'cn-flow-runs-widget__row--linked': isLinked }"
 					:data-status="run.status">
 					<component
-						:is="runHrefs[run.uuid] ? 'a' : 'div'"
+						:is="runHref(run) ? 'a' : 'div'"
 						class="cn-flow-runs-widget__row-content"
-						:href="runHrefs[run.uuid] || undefined"
+						:href="runHref(run) || undefined"
 						@click="onRowClick($event, run)">
 						<span
 							class="cn-flow-runs-widget__dot"
@@ -70,15 +70,15 @@
 				</p>
 				<ul v-else class="cn-flow-runs-widget__list">
 					<li
-						v-for="run in completedRows"
-						:key="run.uuid"
+						v-for="(run, index) in completedRows"
+						:key="run.uuid || `completed-${index}`"
 						class="cn-flow-runs-widget__row cn-flow-runs-widget__row--terminal"
 						:class="{ 'cn-flow-runs-widget__row--linked': isLinked }"
 						:data-status="run.status">
 						<component
-							:is="runHrefs[run.uuid] ? 'a' : 'div'"
+							:is="runHref(run) ? 'a' : 'div'"
 							class="cn-flow-runs-widget__row-content"
-							:href="runHrefs[run.uuid] || undefined"
+							:href="runHref(run) || undefined"
 							@click="onRowClick($event, run)">
 							<span
 								class="cn-flow-runs-widget__dot cn-flow-runs-widget__dot--terminal"
@@ -362,19 +362,6 @@ export default {
 	},
 
 	computed: {
-		/**
-		 * Each run's link href by uuid, resolved once per render.
-		 *
-		 * @return {{[uuid: string]: string}}
-		 */
-		runHrefs() {
-			const out = {}
-			for (const run of [...this.rows, ...this.completedRows]) {
-				out[run.uuid] = this.runHref(run)
-			}
-			return out
-		},
-
 		/**
 		 * Effective translate function: the explicit prop, then the injected
 		 * host one, then `@nextcloud/l10n` under the library's own app id.

package/src/components/CnFlowsPage/CnFlowsPage.vue

@@ -13,7 +13,8 @@
 		:showEditAction="false"
 		:actions="rowActions"
 		rowClickToView
-		@rowClick="openFlow">
+		@rowClick="openFlow"
+		@rowAuxClick="openFlow">
 		<template #header-actions>
 			<NcButton variant="primary" :to="newFlowRoute">
 				<template #icon>

package/src/components/CnHeaderWidget/CnHeaderWidget.vue

@@ -4,15 +4,22 @@
 -->
 
 <template>
-	<div class="cn-header-widget" :style="wrapperStyle">
+	<div class="cn-header-widget" :class="{ 'cn-header-widget--plain': isPlain }" :style="wrapperStyle">
 		<div
 			v-if="hasOverlay"
 			class="cn-header-widget__overlay"
 			:style="overlayStyle"
 			aria-hidden="true" />
 		<div class="cn-header-widget__content" :style="contentStyle">
+			<p
+				v-if="dateLine"
+				class="cn-header-widget__date"
+				:style="dateStyle"
+				data-testid="cn-header-widget-date">
+				{{ dateLine }}
+			</p>
 			<h2 v-if="hasTitle" class="cn-header-widget__title" :style="textStyle">
-				{{ title }}
+				{{ headingText }}
 			</h2>
 			<p v-if="hasSubtitle" class="cn-header-widget__subtitle" :style="textStyle">
 				{{ subtitle }}
@@ -38,7 +45,8 @@
 </template>
 
 <script>
-import { translate as t } from '@nextcloud/l10n'
+import { getCurrentUser } from '@nextcloud/auth'
+import { getCanonicalLocale, translate as t } from '@nextcloud/l10n'
 import { resolveImageUrl } from '../../utils/resolveImageUrl.js'
 
 const ALLOWED_OVERLAY_MODES = ['none', 'tint', 'gradient-bottom']
@@ -75,6 +83,16 @@ const VERTICAL_ALIGN_FLEX = Object.freeze({
  * External CTA URLs (http/https) open in a new tab with
  * `rel="noopener noreferrer"`; relative / anchor URLs stay in the current tab.
  *
+ * Optional greeting: `greeting: true` makes the heading greet the signed-in
+ * user by time of day and first name ("Good afternoon, Pieter"; `"full"` uses
+ * the whole display name), and `showDate: true` adds a line with today's
+ * date above it. `plain: true` drops the coloured background and aligns the
+ * text to the start, which is how a greeting usually sits on a dashboard.
+ *
+ * ```json
+ * { "widgetKey": "header", "props": { "content": { "greeting": true, "showDate": true, "plain": true } } }
+ * ```
+ *
  * Registered as the `header` dashboard widget type via the renderer's
  * `index.js`.
  */
@@ -96,9 +114,10 @@ export default {
 		/**
 		 * Persisted widget content: `{title, subtitle, backgroundImageUrl,
 		 * backgroundImageFileId, backgroundColor, overlayMode, overlayColor,
-		 * overlayOpacity, textColor, textAlign, verticalAlign, height, cta}`.
-		 * All fields are optional except `title`; unknown enum values collapse
-		 * to documented defaults and the renderer never throws.
+		 * overlayOpacity, textColor, textAlign, verticalAlign, height, cta,
+		 * greeting, showDate, plain}`. All fields are optional except `title`
+		 * (or `greeting`); unknown enum values collapse to documented defaults
+		 * and the renderer never throws.
 		 *
 		 * @type {object}
 		 */
@@ -118,6 +137,17 @@ export default {
 			default: null,
 		},
 		/* eslint-enable vue/no-unused-properties */
+
+		/**
+		 * The moment the greeting and the date line are computed for. Leave
+		 * empty for the current time.
+		 *
+		 * @type {Date|null}
+		 */
+		now: {
+			type: Date,
+			default: null,
+		},
 	},
 
 	data() {
@@ -153,9 +183,121 @@ export default {
 			return typeof value === 'string' && value !== '' ? this.effectiveTranslate(value) : ''
 		},
 
-		/** Whether a non-empty title is set. */
+		/** Whether a heading renders: a non-empty title or a greeting. */
 		hasTitle() {
-			return this.title !== ''
+			return this.headingText !== ''
+		},
+
+		/**
+		 * The moment the greeting and date line are computed for.
+		 *
+		 * @return {Date}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 */
+		reference() {
+			return this.now instanceof Date ? this.now : new Date()
+		},
+
+		/**
+		 * Whether the plain presentation is on (no coloured background).
+		 *
+		 * @return {boolean}
+		 */
+		isPlain() {
+			return Boolean(this.content && this.content.plain === true)
+		},
+
+		/**
+		 * The name the greeting uses: the first word of the display name, or
+		 * the whole display name for `greeting: "full"`. '' when unknown.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 */
+		greetingName() {
+			let user
+			try {
+				user = getCurrentUser()
+			} catch {
+				user = null
+			}
+			const displayName = (user && typeof user.displayName === 'string') ? user.displayName.trim() : ''
+			if (displayName === '') {
+				return ''
+			}
+			return this.content.greeting === 'full' ? displayName : displayName.split(/\s+/)[0]
+		},
+
+		/**
+		 * The greeting for the time of day, with the user's name when known,
+		 * or '' when the greeting is off.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 */
+		greetingText() {
+			const greeting = this.content && this.content.greeting
+			if (greeting !== true && greeting !== 'full' && greeting !== 'first') {
+				return ''
+			}
+			const hour = this.reference.getHours()
+			const name = this.greetingName
+			if (hour < 12) {
+				return name ? t('nextcloud-vue', 'Good morning, {name}', { name }) : t('nextcloud-vue', 'Good morning')
+			}
+			if (hour < 18) {
+				return name ? t('nextcloud-vue', 'Good afternoon, {name}', { name }) : t('nextcloud-vue', 'Good afternoon')
+			}
+			return name ? t('nextcloud-vue', 'Good evening, {name}', { name }) : t('nextcloud-vue', 'Good evening')
+		},
+
+		/**
+		 * The heading: the greeting when it is on, else the title.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 */
+		headingText() {
+			return this.greetingText || this.title
+		},
+
+		/**
+		 * Today's date written out ("Monday 5 October 2026"), or '' when
+		 * `showDate` is off.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 */
+		dateLine() {
+			if (!this.content || this.content.showDate !== true) {
+				return ''
+			}
+			const options = { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }
+			let locale
+			try {
+				locale = getCanonicalLocale()
+			} catch {
+				locale = undefined
+			}
+			try {
+				return new Intl.DateTimeFormat(locale || undefined, options).format(this.reference)
+			} catch {
+				return new Intl.DateTimeFormat(undefined, options).format(this.reference)
+			}
+		},
+
+		/**
+		 * Inline style of the date line: the heading's colour, or the muted
+		 * text colour on a plain header.
+		 *
+		 * @return {object}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 */
+		dateStyle() {
+			return {
+				color: this.isPlain && !(this.content && this.content.textColor) ? 'var(--color-text-maxcontrast)' : this.textColor,
+				margin: 0,
+			}
 		},
 
 		/** Whether a non-empty subtitle is set. */
@@ -187,12 +329,19 @@ export default {
 			return this.backgroundImageUrl !== '' && this.imageFailed === false
 		},
 
-		/** Resolved background colour (default theme primary). */
+		/**
+		 * Resolved background colour (default theme primary).
+		 *
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 */
 		backgroundColor() {
 			const value = this.content && this.content.backgroundColor
 			if (typeof value === 'string' && value !== '') {
 				return value
 			}
+			if (this.isPlain) {
+				return 'transparent'
+			}
 			return 'var(--color-primary, #0070c0)'
 		},
 
@@ -250,13 +399,17 @@ export default {
 			return HEIGHT_PIXELS[this.height]
 		},
 
-		/** Resolved text alignment (default `center`). */
+		/**
+		 * Resolved text alignment (default `center`).
+		 *
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 */
 		textAlign() {
 			const declared = this.content && this.content.textAlign
 			if (typeof declared === 'string' && ALLOWED_TEXT_ALIGN.includes(declared)) {
 				return declared
 			}
-			return 'center'
+			return this.isPlain ? 'left' : 'center'
 		},
 
 		/** Resolved vertical alignment (default `middle`). */
@@ -268,7 +421,11 @@ export default {
 			return 'middle'
 		},
 
-		/** Resolved text colour with an auto-contrast fallback. */
+		/**
+		 * Resolved text colour with an auto-contrast fallback.
+		 *
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 */
 		textColor() {
 			const value = this.content && this.content.textColor
 			if (typeof value === 'string' && value !== '') {
@@ -277,6 +434,9 @@ export default {
 			if (this.hasBackgroundImage) {
 				return '#ffffff'
 			}
+			if (this.isPlain && !(this.content && this.content.backgroundColor)) {
+				return 'var(--color-main-text)'
+			}
 			return this.isLightColor(this.backgroundColor) ? '#000000' : '#ffffff'
 		},
 
@@ -321,7 +481,11 @@ export default {
 			}
 		},
 
-		/** Inline style for the content flex container. */
+		/**
+		 * Inline style for the content flex container.
+		 *
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 */
 		contentStyle() {
 			return {
 				position: 'relative',
@@ -332,7 +496,7 @@ export default {
 				'flex-direction': 'column',
 				'align-items': this.flexAlignFromTextAlign,
 				'justify-content': VERTICAL_ALIGN_FLEX[this.verticalAlign],
-				padding: '16px 24px',
+				padding: this.isPlain ? '0' : '16px 24px',
 				'box-sizing': 'border-box',
 				gap: '8px',
 				'text-align': this.textAlign,
@@ -484,6 +648,17 @@ export default {
 	overflow: hidden;
 }
 
+.cn-header-widget--plain {
+	min-height: 0;
+	border-radius: 0;
+}
+
+.cn-header-widget__date {
+	font-size: 14px;
+	line-height: 1.4;
+	margin: 0;
+}
+
 .cn-header-widget__overlay {
 	position: absolute;
 	inset: 0;

package/src/components/CnHeaderWidgetForm/CnHeaderWidgetForm.vue

@@ -18,6 +18,22 @@
 			:placeholder="t('nextcloud-vue', 'Optional subtitle')"
 			@update:modelValue="updateField('subtitle', $event)" />
 
+		<NcCheckboxRadioSwitch
+			:modelValue="greeting"
+			@update:modelValue="updateField('greeting', $event)">
+			{{ t('nextcloud-vue', 'Greet the user by name instead of showing the title') }}
+		</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch
+			:modelValue="showDate"
+			@update:modelValue="updateField('showDate', $event)">
+			{{ t('nextcloud-vue', 'Show the date of today above the heading') }}
+		</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch
+			:modelValue="plain"
+			@update:modelValue="updateField('plain', $event)">
+			{{ t('nextcloud-vue', 'Plain header without a coloured background') }}
+		</NcCheckboxRadioSwitch>
+
 		<!-- Pick a background image. Selection does NOT upload — the file is held
 		     and only uploaded when the host modal calls commit() on submit, so
 		     re-picking or cancelling writes nothing. Uploads are the reliable
@@ -162,7 +178,7 @@
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
-import { NcButton, NcSelect, NcTextField } from '@nextcloud/vue'
+import { NcButton, NcCheckboxRadioSwitch, NcSelect, NcTextField } from '@nextcloud/vue'
 import CnColorPicker from '../CnColorPicker/CnColorPicker.vue'
 import { embedAsDataUrl, extractTransportUrl, readFileAsDataUrl, warnUploadFnDeprecated } from '../../utils/widgetUpload.js'
 
@@ -206,6 +222,7 @@ export default {
 		NcTextField,
 		NcSelect,
 		NcButton,
+		NcCheckboxRadioSwitch,
 		CnColorPicker,
 	},
 
@@ -282,6 +299,11 @@ export default {
 		return {
 			title: typeof initial.title === 'string' ? initial.title : DEFAULT_CONTENT.title,
 			subtitle: typeof initial.subtitle === 'string' ? initial.subtitle : DEFAULT_CONTENT.subtitle,
+			greeting: initial.greeting === true || initial.greeting === 'full' || initial.greeting === 'first',
+			// `"full"` (whole display name) is a manifest choice; kept as written.
+			greetingMode: initial.greeting === 'full' ? 'full' : true,
+			showDate: initial.showDate === true,
+			plain: initial.plain === true,
 			backgroundImageUrl: typeof initial.backgroundImageUrl === 'string'
 				? initial.backgroundImageUrl
 				: DEFAULT_CONTENT.backgroundImageUrl,
@@ -394,9 +416,35 @@ export default {
 			}
 		},
 
-		/** The full content blob assembled from the current field values. */
+		/**
+		 * The greeting keys, written only when they are on, so a header that
+		 * never used them keeps the content blob it always had.
+		 *
+		 * @return {object}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 */
+		greetingContent() {
+			const content = {}
+			if (this.greeting) {
+				content.greeting = this.greetingMode
+			}
+			if (this.showDate) {
+				content.showDate = true
+			}
+			if (this.plain) {
+				content.plain = true
+			}
+			return content
+		},
+
+		/**
+		 * The full content blob assembled from the current field values.
+		 *
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 */
 		assembledContent() {
 			return {
+				...this.greetingContent,
 				title: this.title,
 				subtitle: this.subtitle,
 				backgroundImageUrl: this.backgroundImageUrl,
@@ -538,10 +586,12 @@ export default {
 		 * when either CTA field is filled.
 		 *
 		 * @return {string[]} the validation errors.
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
 		 */
 		validate() {
 			const errors = []
-			if (typeof this.title !== 'string' || this.title.trim() === '') {
+			// A greeting is the heading, so a greeting header needs no title.
+			if (!this.greeting && (typeof this.title !== 'string' || this.title.trim() === '')) {
 				errors.push(t('nextcloud-vue', 'Title is required'))
 			}
 			if (typeof this.backgroundImageUrl === 'string'