@conduction/nextcloud-vue 2.77.0 → 2.79.0

package/src/components/CnCellRenderer/CnCellRenderer.vue

@@ -24,12 +24,15 @@
 			</span>
 		</template>
 
-		<!-- Built-in "badge" widget — renders the (possibly formatter-shaped) value as a status pill -->
+		<!-- Built-in "badge" widget: renders the value as a status pill. An enum
+		     value shows its label (x-enum-labels, translated) unless a formatter
+		     shapes it; the colour stays keyed on the raw value. -->
 		<template v-else-if="widget === 'badge'">
 			<CnStatusBadge v-if="hasValue"
-				:label="String(formattedValue)"
+				:label="labelledValue"
 				:variant="badgeVariant"
-				:colorMap="badgeColorMap" />
+				:colorMap="badgeColorMap"
+				:colorKey="badgeColorKey" />
 			<span v-else class="cn-cell-renderer__dash">—</span>
 		</template>
 
@@ -78,7 +81,7 @@
 				v-if="linkRoute"
 				:to="linkRoute"
 				class="cn-cell-renderer__link">
-				{{ formattedValue }}
+				{{ labelledValue }}
 			</router-link>
 			<a
 				v-else-if="linkHref"
@@ -86,9 +89,9 @@
 				target="_blank"
 				rel="noopener"
 				class="cn-cell-renderer__link">
-				{{ formattedValue }}
+				{{ labelledValue }}
 			</a>
-			<span v-else :title="rawTitle">{{ formattedValue }}</span>
+			<span v-else :title="rawTitle">{{ labelledValue }}</span>
 		</template>
 
 		<!-- Built-in "avatar" widget: a person as an avatar with the name beside
@@ -115,6 +118,19 @@
 			<span v-else class="cn-cell-renderer__dash">—</span>
 		</template>
 
+		<!-- Built-in "age" widget: how long something has waited ("4 uur",
+		     "3 dagen"), coloured by widgetProps.variantWhen rules on the days
+		     the cell shows. The full date is the tooltip. -->
+		<template v-else-if="widget === 'age'">
+			<time
+				v-if="dateTimestamp"
+				class="cn-cell-renderer__age"
+				:class="ageVariant ? 'cn-cell-renderer__age--' + ageVariant : null"
+				:datetime="dateTimestamp.toISOString()"
+				:title="absoluteDateLabel">{{ ageLabel }}</time>
+			<span v-else class="cn-cell-renderer__dash">—</span>
+		</template>
+
 		<!-- Built-in "date" widget: a date whose colour follows
 		     widgetProps.variantWhen, rules on the number of days until it
 		     (0 = today, negative = overdue). -->
@@ -141,7 +157,7 @@
 					class="cn-cell-renderer__swatch-dot"
 					:style="{ backgroundColor: swatchColor }"
 					aria-hidden="true" />
-				<span v-if="hasValue" :title="rawTitle">{{ formattedValue }}</span>
+				<span v-if="hasValue" :title="rawTitle">{{ labelledValue }}</span>
 				<span v-else class="cn-cell-renderer__dash">—</span>
 			</span>
 		</template>
@@ -153,7 +169,12 @@
 
 		<!-- Date / date-time: dynamic NcDateTime (relative time, absolute on hover) -->
 		<template v-else-if="isDate">
-			<NcDateTime v-if="dateTimestamp" :timestamp="dateTimestamp" />
+			<time
+				v-if="dateTimestamp && isBoardLook"
+				class="cn-cell-renderer__date"
+				:datetime="dateTimestamp.toISOString()"
+				:title="absoluteDateLabel">{{ boardDateLabel }}</time>
+			<NcDateTime v-else-if="dateTimestamp" :timestamp="dateTimestamp" />
 			<span v-else class="cn-cell-renderer__dash">—</span>
 		</template>
 
@@ -207,6 +228,8 @@ import { NcAvatar, NcDateTime } from '@nextcloud/vue'
 import CheckBold from 'vue-material-design-icons/CheckBold.vue'
 import CnFkResolveCell from '../CnFkResolveCell/CnFkResolveCell.vue'
 import CnGroupNameCell from './CnGroupNameCell.vue'
+import { normalizeLook } from '../../composables/useLook.js'
+import { formatAge, formatBoardDate, resolveAgeVariant } from '../../utils/boardDate.js'
 import { parseDateValue, resolveDateVariant } from '../../utils/dateVariant.js'
 import { safeCurrencyCode } from '../../utils/formatMetric.js'
 import { objectFieldValue } from '../../utils/objectName.js'
@@ -269,6 +292,12 @@ export default {
 		 * Defaults to identity so standalone use is unaffected.
 		 */
 		cnTranslate: { default: () => (key) => key },
+		/**
+		 * The look the app is drawn in, provided by CnAppRoot (or a page with
+		 * `config.look`). Under `board` a date cell reads the board's short
+		 * form ("5 okt"). Defaults to `nextcloud`, which renders as before.
+		 */
+		cnLook: { default: 'nextcloud' },
 	},
 
 	props: {
@@ -323,6 +352,10 @@ export default {
 		 * a date whose colour follows `widgetProps.variantWhen`, rules on the
 		 * number of days until the date (`[{ op: "lt", value: 0, variant:
 		 * "error" }, { op: "lte", value: 5, variant: "warning" }]`).
+		 * The built-in id `"age"` renders how long the row has waited since
+		 * the date ("4 hours", "3 days"), coloured by `widgetProps.variantWhen`
+		 * rules on the days it shows (`[{ op: "gte", value: 3, variant:
+		 * "error" }]`).
 		 * The built-in id `"group"` shows a Nextcloud group id (or a list of
 		 * them) as the group's display name; a column whose property is
 		 * marked `referenceType: "nextcloud-group"` gets it without asking.
@@ -525,6 +558,69 @@ export default {
 			return variant === 'default' ? '' : variant
 		},
 
+		/**
+		 * Whether the app takes the board look (`cnLook` is `board`).
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md#requirement-a-board-date-cell-reads-day-and-short-month-in-the-user-language
+		 */
+		isBoardLook() {
+			return normalizeLook(this.cnLook) === 'board'
+		},
+
+		/**
+		 * The board's short date ("5 okt", "14 feb 2024" outside this year).
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md#requirement-a-board-date-cell-reads-day-and-short-month-in-the-user-language
+		 */
+		boardDateLabel() {
+			return formatBoardDate(this.value)
+		},
+
+		/**
+		 * The full date for a tooltip: day, month and year in the user's
+		 * locale, with the time for a date-time value.
+		 *
+		 * @return {string|undefined}
+		 * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md#requirement-an-age-cell-says-how-long-something-has-waited
+		 */
+		absoluteDateLabel() {
+			const date = parseDateValue(this.value)
+			if (date === null) {
+				return undefined
+			}
+			const withTime = this.property?.format === 'date-time' || this.widget === 'age'
+			const options = { day: 'numeric', month: 'long', year: 'numeric', ...(withTime ? { hour: '2-digit', minute: '2-digit' } : {}) }
+			try {
+				return new Intl.DateTimeFormat(getCanonicalLocale() || undefined, options).format(date)
+			} catch {
+				return new Intl.DateTimeFormat(undefined, options).format(date)
+			}
+		},
+
+		/**
+		 * `age` widget: how long the row has waited ("4 uur", "3 dagen").
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md#requirement-an-age-cell-says-how-long-something-has-waited
+		 */
+		ageLabel() {
+			return formatAge(this.value)
+		},
+
+		/**
+		 * `age` widget: the variant of the first `widgetProps.variantWhen`
+		 * rule the shown days match, or '' for none.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md#requirement-an-age-cell-turns-red-past-its-threshold
+		 */
+		ageVariant() {
+			const variant = resolveAgeVariant(this.value, this.widgetProps && this.widgetProps.variantWhen)
+			return variant === 'default' ? '' : variant
+		},
+
 		/**
 		 * `date` widget: the date written out in the user's locale.
 		 *
@@ -541,6 +637,11 @@ export default {
 			// 08:30"); `widgetProps.timeOnly: true` shows just the time
 			// ("08:30"), for a timetable row. Default: the date alone.
 			const props = this.widgetProps || {}
+			// The board look writes a plain date in its short form ("5 okt");
+			// a time of day keeps the full form below.
+			if (this.isBoardLook && props.timeOnly !== true && props.showTime !== true) {
+				return formatBoardDate(date)
+			}
 			const options = props.timeOnly === true
 				? { hour: '2-digit', minute: '2-digit' }
 				: { day: 'numeric', month: 'short', year: 'numeric', ...(props.showTime === true ? { hour: '2-digit', minute: '2-digit' } : {}) }
@@ -632,6 +733,43 @@ export default {
 				.map((gid) => String(gid))
 		},
 
+		/**
+		 * The text a built-in widget (`badge`, `link`) or a swatch shows. An
+		 * enum value reads its label the way the plain enum cell does
+		 * (`enumLabel`: `x-enum-labels`, translated), so a list says "Active"
+		 * where the detail page does, not the stored "active". A column
+		 * formatter still wins: an app that shapes the value itself gets
+		 * exactly what its formatter returns.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/cell-labels-and-draft-indicator/specs/cell-labels-and-draft-indicator/spec.md#requirement-a-built-in-cell-widget-shows-an-enum-value-by-its-label
+		 */
+		labelledValue() {
+			if (!this.hasFormatter && this.isEnum && this.hasValue && typeof this.value !== 'object') {
+				return this.enumLabel
+			}
+			return String(this.formattedValue)
+		},
+
+		/**
+		 * The key the built-in `badge` looks its colour up by: the raw value
+		 * when `widgetProps.colorMap` has an entry for it (case-insensitive),
+		 * so a translated label keeps the colour the manifest keyed on the
+		 * stored code. Otherwise '' and the badge looks up its label, as before,
+		 * which keeps a map keyed on a formatter's output working.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/cell-labels-and-draft-indicator/specs/cell-labels-and-draft-indicator/spec.md#requirement-a-built-in-cell-widget-shows-an-enum-value-by-its-label
+		 */
+		badgeColorKey() {
+			const map = this.badgeColorMap
+			if (!map || !this.hasValue || typeof this.value === 'object') {
+				return ''
+			}
+			const raw = String(this.value).toLowerCase()
+			return Object.keys(map).some((key) => key.toLowerCase() === raw) ? String(this.value) : ''
+		},
+
 		/** Variant for the built-in `badge` widget — `widgetProps.variant` or `'default'`. */
 		badgeVariant() {
 			return (this.widgetProps && this.widgetProps.variant) || 'default'
@@ -1087,10 +1225,29 @@ export default {
    does not rest on colour alone. */
 .cn-cell-renderer__date--success,
 .cn-cell-renderer__date--warning,
-.cn-cell-renderer__date--error {
+.cn-cell-renderer__date--error,
+.cn-cell-renderer__age--success,
+.cn-cell-renderer__age--warning,
+.cn-cell-renderer__age--error {
 	font-weight: 600;
 }
 
+.cn-cell-renderer__age {
+	white-space: nowrap;
+}
+
+.cn-cell-renderer__age--success {
+	color: var(--color-text-success, var(--color-success-text));
+}
+
+.cn-cell-renderer__age--warning {
+	color: var(--color-text-warning, var(--color-warning-text));
+}
+
+.cn-cell-renderer__age--error {
+	color: var(--color-text-error, var(--color-error-text));
+}
+
 .cn-cell-renderer__date--success {
 	color: var(--color-text-success, var(--color-success-text));
 }
@@ -1103,8 +1260,10 @@ export default {
 	color: var(--color-text-error, var(--color-error-text));
 }
 
+/* The text variant, not the fill: from Nextcloud 32 `--color-success` is a
+   background colour and too pale for a 16px glyph on a light theme. */
 .cn-cell-renderer__icon--success {
-	color: var(--color-success);
+	color: var(--color-text-success, var(--color-success-text, var(--color-success)));
 }
 
 .cn-cell-renderer__swatch-wrap {

package/src/components/CnChartWidget/CnChartWidget.vue

@@ -29,7 +29,7 @@
 				:aria-pressed="String(Boolean(activeView && activeView.key === view.key))"
 				:data-testid="`cn-chart-widget-view-${view.key}`"
 				@click="activeViewKey = view.key">
-				{{ view.label || view.key }}
+				{{ view.label ? hostTranslate(view.label) : view.key }}
 			</button>
 		</div>
 		<div v-if="showEmptyState" class="cn-chart-widget__empty" data-testid="cn-chart-widget-empty">
@@ -53,7 +53,7 @@
 				:height="computedHeight"
 				:width="computedWidth"
 				:options="mergedOptions"
-				:series="displayedSeries" />
+				:series="plottedSeries" />
 		</div>
 		<div v-else class="cn-chart-widget__fallback">
 			<!-- @slot Rendered when the ApexCharts peer dependency is not available (defaults to the unavailableLabel text). -->
@@ -213,6 +213,11 @@ export default {
 		 * always a ref to inject, even outside a dashboard.
 		 */
 		cnDashboardDateRange: { default: () => ref(null) },
+		/**
+		 * Host translate function provided by CnAppRoot: manifest-authored
+		 * view labels and series names are i18n keys (screens-dashboard-i18n).
+		 */
+		cnTranslate: { default: () => (key) => key },
 	},
 
 	props: {
@@ -918,6 +923,25 @@ export default {
 		 *
 		 * @return {Array} The displayed series.
 		 */
+		/**
+		 * The displayed series with each series name through the host
+		 * translate function, so a manifest series named "Revenue" reads in
+		 * the user's language in the legend and the tooltip. Views still
+		 * filter on the name as written (`displayedSeries`).
+		 *
+		 * @spec openspec/changes/screens-dashboard-i18n/specs/dashboard-page/spec.md#requirement-chart-view-labels-and-series-names-are-translated
+		 * @return {Array} The series handed to ApexCharts.
+		 */
+		plottedSeries() {
+			const series = this.displayedSeries
+			if (!Array.isArray(series)) {
+				return series
+			}
+			return series.map((entry) => (entry && typeof entry === 'object' && typeof entry.name === 'string' && entry.name !== '')
+				? { ...entry, name: this.hostTranslate(entry.name) }
+				: entry)
+		},
+
 		displayedSeries() {
 			const series = this.resolvedSeries
 			const view = this.activeView
@@ -1417,6 +1441,19 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * A manifest-authored label through the host translate function.
+		 *
+		 * @spec openspec/changes/screens-dashboard-i18n/specs/dashboard-page/spec.md#requirement-chart-view-labels-and-series-names-are-translated
+		 * @param {string} key The label.
+		 * @return {string} The translated label.
+		 */
+		hostTranslate(key) {
+			const translate = typeof this.cnTranslate === 'function' ? this.cnTranslate : null
+			const out = translate ? translate(key) : key
+			return (typeof out === 'string' && out !== '') ? out : key
+		},
+
 		/**
 		 * Re-query the chart's dataSource / endpointSource. Exposed as a
 		 * ref-callable method (B3 canonical refresh mode) AND invoked by the