@conduction/nextcloud-vue 2.68.0 → 2.70.0

package/src/components/CnStatWidget/CnStatWidget.vue

@@ -111,6 +111,15 @@
 				data-testid="cn-stat-widget-caption">
 				{{ resolvedCaption }}
 			</span>
+			<!-- A second caption line (`content.note`), as LpStart's "3
+			     deadlines this week" under the count. Static text for now. -->
+			<span
+				v-if="!displayLoading && !displayError && resolvedNote"
+				class="cn-kpi-card__label cn-stat-widget__note cn-kpi-card__caption-line"
+				:class="noteVariantClass"
+				data-testid="cn-stat-widget-note">
+				{{ resolvedNote }}
+			</span>
 		</div>
 	</component>
 </template>
@@ -663,6 +672,33 @@ export default {
 			return rules.find((r) => r && this.matchesRule(current, r)) || null
 		},
 
+		/**
+		 * The second caption line: `content.note` through the host translate
+		 * function, or '' without it.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-stat-tile-can-carry-a-second-caption-line
+		 * @return {string}
+		 */
+		resolvedNote() {
+			const note = this.content && this.content.note
+			return typeof note === 'string' && note !== '' ? this.effectiveTranslate(note) : ''
+		},
+
+		/**
+		 * The colour class of the second caption line (`content.noteVariant`,
+		 * the same names as `captionVariant`), or '' for the muted default.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-stat-tile-can-carry-a-second-caption-line
+		 * @return {string}
+		 */
+		noteVariantClass() {
+			const variant = this.content && this.content.noteVariant
+			if (!variant || variant === 'default' || !Object.hasOwn(VARIANT_COLORS, variant)) {
+				return ''
+			}
+			return `cn-kpi-card__label--${variant === 'danger' ? 'error' : variant}`
+		},
+
 		/**
 		 * The caption's colour class: the matching override's
 		 * `captionVariant`, else `content.captionVariant`, as
@@ -1312,7 +1348,7 @@ export default {
 		 * @return {string}
 		 */
 		formattedValue() {
-			return formatMetricValue(this.displayValue, this.content.format, this.configCtx)
+			return formatMetricValue(this.displayValue, this.content.format, this.configCtx, this.objectCtx?.object || null)
 		},
 
 		/**
@@ -1346,7 +1382,7 @@ export default {
 				return ''
 			}
 			const { prefix, suffix, ...rest } = (this.content.format || {})
-			return formatMetricValue(this.limitValue, rest, this.configCtx)
+			return formatMetricValue(this.limitValue, rest, this.configCtx, this.objectCtx?.object || null)
 		},
 
 		/**

package/src/components/CnStatsBlock/CnStatsBlock.md

@@ -151,3 +151,5 @@ export default {
 | Slot | Scope | Description |
 |---|---|---|
 | `value` | `{ count, formatted }` | Override the prominently-displayed value — render a pre-formatted string (currency, percent, a "—" placeholder, …). `count` is the raw `count` prop; `formatted` is the locale-formatted string the default slot renders. Useful for currency / unit prefixes (e.g. `€{{ formatted }}`). |
+
+`layout` (String, default empty): `stacked` is the board's tile, as CnStatWidget `content.layout: "stacked"`: no icon circle, a 14px muted title, the number at 34px/700 and the unit on a muted line under it.

package/src/components/CnStatsBlock/CnStatsBlock.vue

@@ -19,7 +19,7 @@
 		v-bind="componentAttrs"
 		@click="onClick">
 		<!-- Icon -->
-		<div v-if="hasIcon" class="cn-kpi-card__icon cn-stats-block__icon" :class="iconClasses">
+		<div v-if="hasIcon && !isStacked" class="cn-kpi-card__icon cn-stats-block__icon" :class="iconClasses">
 			<slot name="icon">
 				<component :is="icon" v-if="icon" :size="iconSize" />
 			</slot>
@@ -249,6 +249,18 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * `stacked` is the board's tile, as CnStatWidget `content.layout:
+		 * "stacked"`: no icon circle, a 14px muted title, the number at
+		 * 34px/700 in the text colour. Empty (the default) keeps the KPI card.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-stats-block-can-take-the-stacked-board-look
+		 */
+		layout: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Lay the icon left of the content. No longer needed — this is the
 		 * canonical card's own layout — and kept so existing callers that pass
@@ -366,13 +378,24 @@ export default {
 			return {}
 		},
 
+		/**
+		 * Whether the block takes the stacked board look (`layout`).
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-stats-block-can-take-the-stacked-board-look
+		 * @return {boolean}
+		 */
+		isStacked() {
+			return this.layout === 'stacked'
+		},
+
 		rootClasses() {
 			return {
 				// Canonical + legacy, in pairs: the canonical class carries the
 				// look, the legacy one keeps existing app CSS matching.
 				// The canonical card is already horizontal, so the legacy pair
 				// is emitted for app CSS but carries no look of its own.
-				'cn-kpi-card--horizontal': this.horizontal || !this.vertical,
+				'cn-kpi-card--horizontal': !this.isStacked && (this.horizontal || !this.vertical),
+				'cn-kpi-card--stacked': this.isStacked,
 				'cn-stats-block--horizontal': this.horizontal || !this.vertical,
 				'cn-kpi-card--vertical': this.vertical,
 				'cn-stats-block--vertical': this.vertical,

package/src/components/CnStatsBlockWidget/CnStatsBlockWidget.vue

@@ -32,9 +32,16 @@
 				:showZeroCount="showZeroCount"
 				:horizontal="horizontal"
 				:vertical="vertical"
+				:layout="layout"
 				:filled="filled"
 				:clickable="!!view.route"
-				:route="view.route || null" />
+				:route="view.route || null">
+				<!-- An entry with a `format` (or `currency` / `currencyField`)
+				     shows its value formatted, money in its own currency. -->
+				<template v-if="view.formatted !== null" #value>
+					{{ view.formatted }}
+				</template>
+			</CnStatsBlock>
 		</template>
 
 		<!-- Single-source mode (pre-existing interface, unchanged). -->
@@ -48,9 +55,14 @@
 			:showZeroCount="showZeroCount"
 			:horizontal="horizontal"
 			:vertical="vertical"
+			:layout="layout"
 			:filled="filled"
 			:clickable="!!route"
-			:route="route" />
+			:route="route">
+			<template v-if="formattedSingle !== null" #value>
+				{{ formattedSingle }}
+			</template>
+		</CnStatsBlock>
 	</div>
 </template>
 
@@ -58,6 +70,7 @@
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import CnStatsBlock from '../CnStatsBlock/CnStatsBlock.vue'
 import { useDataSource } from '../../composables/useDataSource.js'
+import { formatMetricValue, normalizeMetricFormat, unwrapAppConfig } from '../../utils/formatMetric.js'
 import { dropOptionalUnresolved, hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 
 // The canonical KPI scale (`--cn-kpi-*`) lives in one stylesheet. Imported
@@ -85,6 +98,15 @@ const PAGE_REFRESH_BUS_CHANNEL = 'cn:page:refresh'
  * `field`, token-resolved `filter`) plus per-entry presentation
  * (`title`, `variant`, `countLabel`), an optional `route` deep link, and
  * `hideWhenZero` (the entry is omitted when its resolved count is 0).
+ *
+ * An entry formats its value with `format` (a style name such as
+ * `"currency"`, or `{ style, currency, currencyField, decimals, prefix,
+ * suffix }`), as a `type:"stat"` widget's `content.format` does. A money
+ * value takes the currency from `currencyField` (a field of the detail
+ * page's object, e.g. a contract's own `currency`), then `currency` (a code
+ * or `@config.currency`), then the app's reporting currency, then EUR, and
+ * is formatted in the user's locale. `currency` / `currencyField` may sit on
+ * the entry itself and imply `format: "currency"`.
  * Exactly one of `dataSource` / `entries` must be provided — when
  * `entries` is absent, the single-`dataSource` path renders exactly as
  * before.
@@ -140,6 +162,11 @@ export default {
 		 * `filter`. Null on pages that don't provide it.
 		 */
 		cnWorkspaceContext: { default: null },
+		/**
+		 * Page-level app config provided by the page — the reporting
+		 * currency (`currency`) and `@config.<key>` tokens in `format`.
+		 */
+		cnAppConfig: { default: () => ({}) },
 	},
 
 	props: {
@@ -179,6 +206,20 @@ export default {
 			default: () => [],
 		},
 
+		/**
+		 * How the single-source value is shown: a style name (`'currency'`,
+		 * `'number'`, `'percent'`, `'decimal'`, `'duration-hours'`) or
+		 * `{ style, currency, currencyField, decimals, prefix, suffix }`.
+		 * Empty (the default) shows the plain localized count. Entries carry
+		 * their own `format`.
+		 *
+		 * @type {string|object|null}
+		 */
+		format: {
+			type: [String, Object],
+			default: null,
+		},
+
 		/** Block title (manifest `widgetDef.title`). */
 		title: {
 			type: String,
@@ -221,6 +262,17 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * `stacked` gives every block the board look (see CnStatsBlock
+		 * `layout`). Empty (the default) keeps the KPI card.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-stats-block-can-take-the-stacked-board-look
+		 */
+		layout: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Draw each tile's own grey box. Off by default — the widget is
 		 * rendered inside a CnWidgetWrapper that already draws a card.
@@ -329,6 +381,41 @@ export default {
 			return (typeof c === 'object' && 'value' in c) ? c.value : c
 		},
 
+		/**
+		 * The page-level app config map (reporting currency, `@config` keys).
+		 *
+		 * @return {object}
+		 */
+		configCtx() {
+			return unwrapAppConfig(this.cnAppConfig)
+		},
+
+		/**
+		 * The detail page's object, or null on a dashboard. Its fields feed
+		 * an entry's `currencyField`.
+		 *
+		 * @return {object|null}
+		 */
+		pageObject() {
+			const object = this.objectCtx && this.objectCtx.object
+			return object && typeof object === 'object' ? object : null
+		},
+
+		/**
+		 * The single-source value formatted per `format`, or null to keep
+		 * the plain count.
+		 *
+		 * @return {string|null}
+		 * @spec openspec/changes/stat-currency-from-object/specs/dashboard-page/spec.md#requirement-a-stats-block-entry-formats-its-value
+		 */
+		formattedSingle() {
+			const fmt = normalizeMetricFormat({ format: this.format })
+			if (!fmt || this.loading) {
+				return null
+			}
+			return formatMetricValue(this.resolvedCount, fmt, this.configCtx, this.pageObject)
+		},
+
 		/**
 		 * Token-resolution context for entry filters, merged from the
 		 * detail-page object context and the page-level workspace bag.
@@ -346,14 +433,19 @@ export default {
 		 * its fetched count and loading flag, with `hideWhenZero` entries
 		 * whose resolved count is 0 omitted.
 		 *
-		 * @return {Array<{entry: object, key: string, count: number, loading: boolean}>}
+		 * @return {Array<{entry: object, key: string, count: number, loading: boolean, formatted: (string|null)}>}
+		 * @spec openspec/changes/stat-currency-from-object/specs/dashboard-page/spec.md#requirement-a-stats-block-entry-formats-its-value
 		 */
 		entryViews() {
 			return (this.entries || [])
 				.map((entry, i) => {
 					const raw = this.entryCounts[i]
 					const resolved = typeof raw === 'number'
+					const fmt = normalizeMetricFormat(entry)
 					return {
+						// The value as the entry's `format` says, money in the
+						// currency the entry names; null keeps the plain count.
+						formatted: fmt && resolved ? formatMetricValue(raw, fmt, this.configCtx, this.pageObject) : null,
 						entry: entry || {},
 						key: `${(entry && entry.register) || ''}/${(entry && entry.schema) || ''}/${i}`,
 						count: resolved ? raw : 0,

package/src/components/CnWeekStripWidget/CnWeekStripWidget.vue

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: EUPL-1.2
 -->
 <template>
-	<div class="cn-week-strip" data-testid="cn-week-strip">
+	<div class="cn-week-strip" :class="{ 'cn-week-strip--inset': inset }" data-testid="cn-week-strip">
 		<div v-if="loading" class="cn-week-strip__state" role="status">
 			<NcLoadingIcon :size="20" />
 			<span class="cn-week-strip__state-text">{{ loadingLabel }}</span>
@@ -118,9 +118,11 @@ export default {
 		 * today), `lateField` a boolean field that marks a record late.
 		 * `items` are static entries `{ title, meta?, date, route?, href?, late? }`.
 		 * `emptyText` is the text of a day without items. `weekOffset` moves
-		 * the strip whole weeks from the current one.
+		 * the strip whole weeks from the current one. `inset: true` draws the
+		 * strip inside the board's inset (16px above, 24px at the sides, 22px
+		 * below) instead of from card edge to card edge.
 		 *
-		 * @type {{days?: (5|7), source?: {register?: string, schema?: string, filter?: object, limit?: number}, dateField?: string, titleField?: string, metaFields?: Array<string>, itemRoute?: string, lateWhen?: {op?: string, value?: number}, lateField?: string, items?: Array<{title: string, meta?: string, date: string, route?: (string|object), href?: string, late?: boolean}>, emptyText?: string, weekOffset?: number}}
+		 * @type {{days?: (5|7), inset?: boolean, source?: {register?: string, schema?: string, filter?: object, limit?: number}, dateField?: string, titleField?: string, metaFields?: Array<string>, itemRoute?: string, lateWhen?: {op?: string, value?: number}, lateField?: string, items?: Array<{title: string, meta?: string, date: string, route?: (string|object), href?: string, late?: boolean}>, emptyText?: string, weekOffset?: number}}
 		 */
 		content: {
 			type: Object,
@@ -159,6 +161,17 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * Whether the widget draws the board's inset (`content.inset`). Off
+		 * by default, which keeps it edge to edge as before.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-strip-and-a-stacked-bar-can-take-the-board-inset
+		 * @return {boolean}
+		 */
+		inset() {
+			return Boolean(this.content && this.content.inset === true)
+		},
+
 		/**
 		 * The translate function in use.
 		 *
@@ -542,6 +555,14 @@ export default {
 	width: 100%;
 }
 
+/* `content.inset: true`: the board's inset inside the card (zuiddrecht-pixel-
+   gaps-3). A dashboard renders its widgets flush, so without it the strip ran
+   from card edge to card edge. Theme hook: --cn-widget-board-inset. */
+.cn-week-strip--inset {
+	box-sizing: border-box;
+	padding: var(--cn-widget-board-inset, 16px 24px 22px);
+}
+
 .cn-week-strip__state {
 	display: flex;
 	align-items: center;

package/src/css/detail-page.css

@@ -46,6 +46,16 @@
 	row-gap: var(--cn-detail-header-row-gap, 22px);
 }
 
+/* That wrap must not take the actions off the title row. With `flex-basis:
+   auto` a long title claimed its whole text width, so the actions wrapped
+   under it. From a zero basis the title takes what the actions leave and
+   wraps (two lines, then an ellipsis) inside it; only on a page too narrow
+   for 16rem of title beside the actions do the actions drop a row. */
+.cn-detail-page__header--with-widget > :first-child {
+	flex: 1 1 0;
+	min-width: min(100%, 16rem);
+}
+
 .cn-detail-page__header-widget {
 	flex: 1 0 100%;
 	min-width: 0;

package/src/css/index-page.css

@@ -10,6 +10,18 @@
 	padding: calc(5 * var(--default-grid-baseline));
 }
 
+/* The board's header buttons (`headerButtons`) at the end of the title row,
+   centred on the title and its count line. They wrap under the title on a
+   narrow page. */
+.cn-index-page__header-buttons {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	align-self: center;
+	gap: calc(2 * var(--default-grid-baseline));
+	margin-inline-start: auto;
+}
+
 .cn-index-page__below-header {
     margin-bottom: calc(4 * var(--default-grid-baseline));
 }

package/src/css/kpi-card.css

@@ -414,6 +414,21 @@ a.cn-kpi-card--stacked:focus-visible {
 	text-decoration: none !important;
 }
 
+/* A stacked stats block (CnStatsBlock `layout: "stacked"`): its unit
+   ("decisions") goes on a muted line of its own under the number, where the
+   stat tile puts its caption (zuiddrecht-pixel-gaps-3). */
+.cn-kpi-card--stacked .cn-stats-block__count {
+	flex-direction: column;
+	align-items: flex-start;
+	gap: var(--cn-kpi-stacked-gap, 6px);
+}
+
+.cn-kpi-card--stacked .cn-stats-block__count-label {
+	font-size: var(--cn-kpi-label-size, 13px);
+	font-weight: 500;
+	color: var(--color-text-maxcontrast);
+}
+
 /* Filled: the card draws its own grey box, for a KPI that is NOT already
    inside a wrapper that draws one. Opt-in via `content.flat: false`. */
 .cn-kpi-card--filled {