@conduction/nextcloud-vue 2.82.0 → 2.84.0

package/src/components/CnSettingsFormWidget/CnSettingsFormWidget.vue

@@ -52,18 +52,33 @@
 							{{ field.clearLabel }}
 						</NcButton>
 					</div>
-					<select
-						v-else-if="field.type === 'reference'"
-						:id="inputId(field)"
-						v-model="form[field.key]"
-						class="cn-settings-form__control"
-						:disabled="field.readOnly"
-						:aria-busy="referenceState[field.key] === 'loading' ? 'true' : null"
-						:data-testid="`cn-settings-form-reference-${field.key}`">
-						<option v-for="option in referenceChoices(field)" :key="option.value" :value="option.value">
-							{{ option.label }}
-						</option>
-					</select>
+					<div v-else-if="field.type === 'reference'" class="cn-settings-form__reference">
+						<select
+							:id="inputId(field)"
+							v-model="form[field.key]"
+							class="cn-settings-form__control"
+							:disabled="field.readOnly"
+							:aria-busy="referenceState[field.key] === 'loading' ? 'true' : null"
+							:data-testid="`cn-settings-form-reference-${field.key}`">
+							<option v-for="option in referenceChoices(field)" :key="option.value" :value="option.value">
+								{{ option.label }}
+							</option>
+						</select>
+						<!-- `free`: a typed value (a URL) besides picking an object. -->
+						<template v-if="field.free && !field.readOnly">
+							<label class="cn-settings-form__sublabel" :for="`${inputId(field)}-free`">{{ field.freeLabel }}</label>
+							<input
+								:id="`${inputId(field)}-free`"
+								class="cn-settings-form__control"
+								type="text"
+								inputmode="url"
+								:value="freeValue(field)"
+								:placeholder="field.freePlaceholder"
+								:aria-invalid="errors[field.key] ? 'true' : null"
+								:data-testid="`cn-settings-form-reference-free-${field.key}`"
+								@input="form[field.key] = $event.target.value.trim()">
+						</template>
+					</div>
 					<select
 						v-else-if="field.type === 'select'"
 						:id="inputId(field)"
@@ -97,7 +112,8 @@
 				<p v-if="errors[field.key]" class="cn-settings-form__error" role="alert">
 					{{ errors[field.key] }}
 				</p>
-				<p v-else-if="field.hint" class="cn-settings-form__hint">
+				<!-- A chips field prints its own hint (it gets it in chipsContent). -->
+				<p v-else-if="field.hint && field.type !== 'chips'" class="cn-settings-form__hint">
 					{{ field.hint }}
 				</p>
 			</div>
@@ -129,7 +145,9 @@ import { fillTemplate } from '../../utils/fillTemplate.js'
 import { prefixUrl } from '../../utils/headers.js'
 import { changedFields, objectUrlOf, writeFields } from '../../utils/objectWrite.js'
 import { readPath } from '../../utils/readPath.js'
+import { hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 import { serverErrorMessage } from '../../utils/serverErrorMessage.js'
+import { switchIsOn, switchStoredValue } from '../../utils/switchValues.js'
 
 // The native file-picker modal ships its chrome styles here; without this the
 // spawned picker renders unstyled. Rules are scoped to the picker/dialog classes.
@@ -163,7 +181,7 @@ export default {
 		/**
 		 * The widget configuration.
 		 *
-		 * - `fields` (required) — `[{ key, label, type?: 'text'|'textarea'|'select'|'switch'|'number'|'file'|'chips'|'reference', register?, schema?, labelField?, valueTemplate?, filter?, limit?, emptyLabel?, default?, minItems?, required?, minItemsMessage?, lowercase?, addLabel?, confirmLabel?, removeLabel?, picker?: { title?, mimeTypes?, startAt?, valueTemplate? }, chooseLabel?, clearLabel?, hint?, placeholder?, options?: [{ value, label }], required?, pattern?, patternMessage?, min?, max?, rows?, wide?, readOnly? }]`; `key` is a field of the object, a top-level name or a dot-path.
+		 * - `fields` (required) — `[{ key, label, type?: 'text'|'textarea'|'select'|'switch'|'number'|'file'|'chips'|'reference', register?, schema?, labelField?, valueTemplate?, filter?, limit?, emptyLabel?, free?, freeLabel?, freePlaceholder?, freePattern?, freePatternMessage?, default?, minItems?, required?, minItemsMessage?, values?: { on, off }, lowercase?, addLabel?, confirmLabel?, removeLabel?, picker?: { title?, mimeTypes?, startAt?, valueTemplate? }, chooseLabel?, clearLabel?, hint?, placeholder?, options?: [{ value, label }], required?, pattern?, patternMessage?, min?, max?, rows?, wide?, readOnly? }]`; `key` is a field of the object, a top-level name or a dot-path. A `reference` field's `filter` values may be `@objectId` and `@object.<field>` (the record being edited). A `switch` field's `values: { on, off }` reads and writes those values instead of true/false.
 		 * - `save` — `{ url, method?, payload? }`, write through an app endpoint (tokens `{value}`, `{field}`, `{changes}`, `{object.<path>}`).
 		 * - `columns` — 1 or 2 (default 2).
 		 * - `saveLabel`, `savedText`, `readOnly`.
@@ -212,6 +230,9 @@ export default {
 			// `reference` fields: the objects to choose from and the read's state (`loading`, `ready`, `error`), by field key.
 			referenceOptions: {},
 			referenceState: {},
+			// The query each `reference` field was last read with, by field key, so a
+			// new object re-reads only the fields whose filter changes with it.
+			referenceQuery: {},
 			errors: {},
 			saving: false,
 			notice: '',
@@ -236,6 +257,9 @@ export default {
 					hint: this.tr(field.hint || ''),
 					placeholder: this.tr(field.placeholder || ''),
 					chooseLabel: this.tr(field.chooseLabel || 'Choose a file'),
+					free: field.type === 'reference' && field.free === true,
+					freeLabel: this.tr(field.freeLabel || 'Or type a value'),
+					freePlaceholder: this.tr(field.freePlaceholder || ''),
 					clearLabel: this.tr(field.clearLabel || 'Remove'),
 					rows: field.rows || 3,
 					wide: field.wide === true || field.type === 'textarea',
@@ -269,6 +293,7 @@ export default {
 	watch: {
 		objectData() {
 			this.adopt()
+			this.loadReferences()
 		},
 	},
 
@@ -284,7 +309,14 @@ export default {
 		 * parameters, at most `limit`, 100 by default). A failed read leaves the
 		 * field with its stored value only, and says so in the hint's place.
 		 *
+		 * `filter` values may be `@objectId` and `@object.<field>`: the record
+		 * the form edits, so a list can be narrowed to it (the logos of this
+		 * portal). Until the record has that value the field is not read; it is
+		 * read again when the record changes the resolved query, never twice
+		 * for the same query.
+		 *
 		 * @spec openspec/changes/screens-settings-form-reference/specs/settings-form/spec.md#requirement-a-settings-form-field-can-pick-an-object
+		 * @spec openspec/changes/screens-settings-form-reference-object-filter/specs/settings-form/spec.md#requirement-a-reference-fields-filter-can-name-the-record-being-edited
 		 * @return {Promise<void>}
 		 */
 		async loadReferences() {
@@ -292,13 +324,35 @@ export default {
 			if (fields.length === 0) {
 				return
 			}
+			const ctx = { objectId: this.objectId || (this.objectData && this.objectData.id) || undefined, object: this.objectData || undefined }
+			const pending = []
+			for (const field of fields) {
+				const filter = resolveFilterTokens(field.filter && typeof field.filter === 'object' ? field.filter : {}, ctx)
+				if (hasUnresolvedTokens(filter)) {
+					// The record has no value for the token yet: nothing to read.
+					continue
+				}
+				const params = { ...filter, _limit: Number(field.limit) > 0 ? Number(field.limit) : 100 }
+				const query = JSON.stringify(params)
+				if (this.referenceQuery[field.key] === query) {
+					continue
+				}
+				this.referenceQuery = { ...this.referenceQuery, [field.key]: query }
+				pending.push({ field, params, query })
+			}
+			if (pending.length === 0) {
+				return
+			}
 			const { default: axios } = await import('@nextcloud/axios')
-			await Promise.all(fields.map(async (field) => {
+			await Promise.all(pending.map(async ({ field, params, query }) => {
 				this.referenceState = { ...this.referenceState, [field.key]: 'loading' }
 				try {
 					const url = `/apps/openregister/api/objects/${encodeURIComponent(field.register)}/${encodeURIComponent(field.schema)}`
-					const params = { ...(field.filter && typeof field.filter === 'object' ? field.filter : {}), _limit: Number(field.limit) > 0 ? Number(field.limit) : 100 }
 					const { data } = await axios.get(prefixUrl(url), { params })
+					if (this.referenceQuery[field.key] !== query) {
+						// A newer record asked for another list meanwhile.
+						return
+					}
 					const rows = Array.isArray(data) ? data : (Array.isArray(data?.results) ? data.results : [])
 					const options = []
 					for (const row of rows) {
@@ -340,6 +394,24 @@ export default {
 			return [...choices, ...options]
 		},
 
+		/**
+		 * The typed value of a `reference` field with `free`: the value the form
+		 * holds when it is not one of the objects to pick, else empty (picking
+		 * an object clears the typed value).
+		 *
+		 * @spec openspec/changes/screens-settings-form-reference-free-value/specs/settings-form/spec.md#requirement-a-reference-field-can-also-take-a-typed-value
+		 * @param {object} field The field.
+		 * @return {string}
+		 */
+		freeValue(field) {
+			const current = this.form[field.key]
+			if (typeof current !== 'string' || current === '') {
+				return ''
+			}
+			const options = this.referenceOptions[field.key] || []
+			return options.some((option) => option.value === current) ? '' : current
+		},
+
 		tr(text) {
 			if (typeof text !== 'string' || text === '') {
 				return ''
@@ -410,7 +482,7 @@ export default {
 		stored(field) {
 			const value = readPath(this.objectData || {}, field.key)
 			if (field.type === 'switch') {
-				return value === true
+				return switchIsOn(value, field.values)
 			}
 			if (field.type === 'chips') {
 				return Array.isArray(value) ? value.map((item) => String(item)) : []
@@ -534,6 +606,9 @@ export default {
 					if (Number.isNaN(value) || (field.min !== undefined && value < field.min) || (field.max !== undefined && value > field.max)) {
 						errors[field.key] = this.tr('This number is not valid.')
 					}
+				} else if (field.free && field.freePattern && this.freeValue(field) !== '' && !new RegExp(field.freePattern).test(String(value))) {
+					// A typed value (not one of the objects) answers to `freePattern`.
+					errors[field.key] = this.tr(field.freePatternMessage || 'This value is not valid.')
 				} else if (field.pattern && !new RegExp(field.pattern).test(String(value))) {
 					errors[field.key] = this.tr(field.patternMessage || 'This value is not valid.')
 				}
@@ -567,6 +642,12 @@ export default {
 				}
 			}
 			const patch = changedFields(compare, next)
+			// A switch with a value map (`values: { on, off }`) writes those values.
+			for (const field of this.fields) {
+				if (field.type === 'switch' && Object.hasOwn(patch, field.key)) {
+					patch[field.key] = switchStoredValue(patch[field.key], field.values)
+				}
+			}
 			this.saving = true
 			try {
 				if (Object.keys(patch).length > 0) {
@@ -578,7 +659,7 @@ export default {
 						const field = this.fields.find((candidate) => candidate.key === key)
 						const answered = readPath(data, key)
 						const written = answered !== undefined ? answered : patch[key]
-						baseline[key] = field.type === 'switch' ? written === true : (written === null ? (field.type === 'chips' ? [] : '') : written)
+						baseline[key] = field.type === 'switch' ? switchIsOn(written, field.values) : (written === null ? (field.type === 'chips' ? [] : '') : written)
 						form[key] = baseline[key]
 						loaded[key] = baseline[key]
 					}
@@ -639,6 +720,17 @@ export default {
 	color: var(--color-main-text);
 }
 
+.cn-settings-form__reference {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.cn-settings-form__sublabel {
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+}
+
 .cn-settings-form__control {
 	width: 100%;
 	box-sizing: border-box;

package/src/components/CnStagesWidget/CnStagesWidget.vue

@@ -59,8 +59,15 @@
 						class="cn-stages-widget__bar-label"
 						:title="stage.hint || stage.label"
 						:aria-disabled="stage.disabled && stage.clickable ? 'true' : null"
+						:aria-busy="movingTo === stage.id ? 'true' : null"
 						:data-testid="`cn-stages-widget-stage-${stage.id}`"
 						@click="onBarClick(stage)">
+						<NcLoadingIcon
+							v-if="movingTo === stage.id"
+							class="cn-stages-widget__moving"
+							:size="16"
+							:name="movingMessage"
+							data-testid="cn-stages-widget-moving" />
 						{{ stage.label }}<span v-if="stage.state === 'current'" class="cn-stages-widget__sr-only"> ({{ tr('current step') }})</span>
 					</component>
 					<span v-if="stage.date" class="cn-stages-widget__bar-date">{{ stage.date }}</span>
@@ -83,7 +90,19 @@
 				@stageClick="onStageClick"
 				@stageBlocked="onStageBlocked">
 				<template #label="{ stage }">
-					<span class="cn-timeline-stages__label" :data-testid="`cn-stages-widget-stage-${stage.id}`">
+					<span
+						class="cn-timeline-stages__label"
+						:aria-busy="movingTo === stage.id ? 'true' : null"
+						:data-testid="`cn-stages-widget-stage-${stage.id}`">
+						<!-- The move in flight. A transition can take seconds, and
+						     a strip that shows nothing until it returns reads as
+						     one that never moved. -->
+						<NcLoadingIcon
+							v-if="movingTo === stage.id"
+							class="cn-stages-widget__moving"
+							:size="16"
+							:name="movingMessage"
+							data-testid="cn-stages-widget-moving" />
 						{{ stage.label }}
 					</span>
 					<span v-if="stage.subtitle" class="cn-timeline-stages__subtitle">
@@ -156,8 +175,11 @@
 			v-if="pendingAction"
 			:transition="pendingAction"
 			:schema="schema"
+			:error="inputError"
+			:fieldErrors="inputFieldErrors"
+			:busy="busy"
 			@confirm="onInputConfirm"
-			@close="pendingAction = null" />
+			@close="closeInputDialog" />
 	</div>
 </template>
 
@@ -177,6 +199,7 @@ import {
 	performTransition,
 	readAvailableActions,
 	transitionError,
+	transitionFieldErrors,
 } from '../../composables/useLifecycleTransitions.js'
 import { normalizeLook } from '../../composables/useLook.js'
 import { useObjectStore } from '../../store/useObjectStore.js'
@@ -534,6 +557,17 @@ export default {
 			pendingAction: null,
 			/** @type {boolean} Whether a move is running. */
 			busy: false,
+			/**
+			 * @type {string} The stage a running move leads to, or ''. Drives
+			 * the loading indicator on that one stage.
+			 */
+			movingTo: '',
+			/** @type {string} A refusal shown inside the open input dialog. */
+			inputError: '',
+			/** @type {string[]} The input keys that refusal named. */
+			inputFieldErrors: [],
+			/** @type {string[]} The input keys the last refused move named. */
+			lastFieldErrors: [],
 			/** @type {string} Why the last move failed, or ''. */
 			moveError: '',
 			/**
@@ -766,6 +800,20 @@ export default {
 			return this.interactive && !this.busy
 		},
 
+		/**
+		 * What the stage a move is running to says while it runs: the
+		 * loading indicator's name and the live region's sentence.
+		 *
+		 * @return {string} The sentence, or '' when nothing is moving.
+		 */
+		movingMessage() {
+			if (!this.movingTo) {
+				return ''
+			}
+			const stage = this.stages.find((s) => s.id === this.movingTo)
+			return this.tr('Moving to {stage}', { stage: stage ? stage.label : this.movingTo })
+		},
+
 		/**
 		 * The allowed moves by the stage they lead to, or null while they are
 		 * unknown.
@@ -1225,13 +1273,44 @@ export default {
 		 * @param {object} data The collected input values.
 		 * @return {void}
 		 */
-		onInputConfirm(data) {
+		async onInputConfirm(data) {
 			const pending = this.pendingAction
-			this.pendingAction = null
 			if (!pending || !pending.__request) {
+				this.closeInputDialog()
+				return
+			}
+			this.inputError = ''
+			this.inputFieldErrors = []
+			// THE DIALOG STAYS OPEN WHILE THE MOVE RUNS, with its confirm
+			// button busy. Closing it first left the person looking at an
+			// unchanged strip for as long as the transition took, which on a
+			// live case was long enough to reload the page thinking it had
+			// not been sent.
+			const moved = await this.performMove(pending.__request, data)
+			if (this.pendingAction !== pending) {
+				// Closed while the move ran; nothing left to update.
 				return
 			}
-			this.performMove(pending.__request, data)
+			if (moved) {
+				this.closeInputDialog()
+				return
+			}
+			// Refused. The sentence goes into the dialog the person is looking
+			// at, with what they typed still in it.
+			this.inputError = this.moveError
+			this.inputFieldErrors = this.lastFieldErrors
+			this.moveError = ''
+		},
+
+		/**
+		 * Close the input dialog and forget the refusal it was showing.
+		 *
+		 * @return {void}
+		 */
+		closeInputDialog() {
+			this.pendingAction = null
+			this.inputError = ''
+			this.inputFieldErrors = []
 		},
 
 		/**
@@ -1239,11 +1318,17 @@ export default {
 		 *
 		 * @param {{stage: {id: string, label: string}, action: string}} request The move.
 		 * @param {object} [data] The collected transition inputs, when any.
-		 * @return {Promise<void>}
+		 * @return {Promise<boolean>} Whether the move was made.
 		 */
 		async performMove(request, data) {
 			this.busy = true
+			this.movingTo = request.stage.id
 			this.moveError = ''
+			this.lastFieldErrors = []
+			// Said as the move starts, not only when it lands: a screen reader
+			// user otherwise hears nothing for as long as the server takes.
+			this.statusMessage = this.movingMessage
+			let moved = false
 			try {
 				if (this.lifecycleMode) {
 					await performTransition(this.recordId, request.action, data)
@@ -1270,11 +1355,16 @@ export default {
 				if (this.lifecycleMode) {
 					await this.loadActions()
 				}
+				moved = true
 			} catch (error) {
 				this.moveError = transitionError(error, this.tr('The move could not be made'))
+				this.lastFieldErrors = transitionFieldErrors(error)
+				this.statusMessage = this.moveError
 			} finally {
 				this.busy = false
+				this.movingTo = ''
 			}
+			return moved
 		},
 
 		/**
@@ -1501,6 +1591,13 @@ export default {
 	padding: 8px 0;
 }
 
+/* The stage a running move leads to: a small spinner before its label. */
+.cn-stages-widget__moving {
+	display: inline-flex;
+	vertical-align: middle;
+	margin-inline-end: 4px;
+}
+
 .cn-stages-widget__notice {
 	margin: 0;
 	color: var(--color-text-maxcontrast);

package/src/components/CnStatWidget/CnStatWidget.vue

@@ -163,6 +163,7 @@ import widgetLink from '../../mixins/widgetLink.js'
 import { useObjectStore } from '../../store/useObjectStore.js'
 import { resolveObjectOpType } from '../../utils/actionsDispatcher.js'
 import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js'
+import { aggFilterParam } from '../../utils/fetchAggregate.js'
 import { fetchListTotal, needsListEndpoint } from '../../utils/fetchFilterCounts.js'
 import { formatMetricValue, unwrapAppConfig } from '../../utils/formatMetric.js'
 import { dropOptionalUnresolved, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
@@ -1459,7 +1460,7 @@ export default {
 		 * @return {string}
 		 */
 		formattedValue() {
-			return formatMetricValue(this.displayValue, this.content.format, this.configCtx, this.objectCtx?.object || null)
+			return formatMetricValue(this.displayValue, this.content.format, this.configCtx, this.objectCtx?.object || null, this.effectiveTranslate)
 		},
 
 		/**
@@ -1783,7 +1784,8 @@ export default {
 						target[`filter[${k}][${op}]`] = ov
 					}
 				} else if (v !== '' && v !== null && v !== undefined) {
-					target[`filter[${k}]`] = v
+					// `field[gte]` goes out as `filter[field][gte]`, not `filter[field[gte]]`.
+					target[aggFilterParam(k)] = v
 				}
 			}
 		},

package/src/components/CnStatsBlockWidget/CnStatsBlockWidget.vue

@@ -17,10 +17,29 @@
 <template>
 	<div
 		class="cn-stats-block-widget"
-		:class="[iconClass, { 'cn-stats-block-widget--multi': hasEntries && !isRows, 'cn-stats-block-widget--rows': isRows }]">
+		:class="[iconClass, { 'cn-stats-block-widget--multi': hasEntries && !isRows && !isGrid, 'cn-stats-block-widget--rows': isRows, 'cn-stats-block-widget--grid': isGrid, 'cn-stats-block-widget--tiles-box': isGrid && tiles === 'box' }]">
+		<!-- Grid layout: the `stats` (each a stat tile's content, so every
+		     source kind a stat takes: ratio, elapsed, computed...) in `columns`
+		     columns, inside this one card (the board's "Je week tot nu toe"
+		     card). The card's title is the widget wrapper's, as on every other
+		     card (`showTitle: true` on the widget): a heading drawn here took
+		     the page's h2 size under a theme. -->
+		<template v-if="isGrid">
+			<div
+				class="cn-stats-block-widget__grid"
+				:style="{ '--cn-stats-block-columns': gridColumns }"
+				data-testid="cn-stats-block-grid">
+				<CnStatWidget
+					v-for="(stat, index) in stats"
+					:key="stat.id || index"
+					class="cn-stats-block-widget__grid-stat"
+					:content="stat"
+					data-testid="cn-stats-block-grid-stat" />
+			</div>
+		</template>
 		<!-- Rows layout: a title and one label-left, number-right row per entry
 		     (the board's "Mijn Zuiddrecht nu" card). -->
-		<template v-if="isRows">
+		<template v-else-if="isRows">
 			<h2 v-if="title" class="cn-stats-block-widget__rows-title" data-testid="cn-stats-block-rows-title">
 				{{ tl(title) }}
 			</h2>
@@ -101,7 +120,9 @@
 <script>
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import CnStatsBlock from '../CnStatsBlock/CnStatsBlock.vue'
+import CnStatWidget from '../CnStatWidget/CnStatWidget.vue'
 import { useDataSource } from '../../composables/useDataSource.js'
+import { aggFilterParam } from '../../utils/fetchAggregate.js'
 import { formatMetricValue, normalizeMetricFormat, unwrapAppConfig } from '../../utils/formatMetric.js'
 import { followLinkClick, resolveHref } from '../../utils/linkNavigation.js'
 import { dropOptionalUnresolved, hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
@@ -180,7 +201,7 @@ const PAGE_REFRESH_BUS_CHANNEL = 'cn:page:refresh'
 export default {
 	name: 'CnStatsBlockWidget',
 
-	components: { CnStatsBlock },
+	components: { CnStatsBlock, CnStatWidget },
 
 	inject: {
 		/**
@@ -241,6 +262,47 @@ export default {
 			default: () => [],
 		},
 
+		/**
+		 * The tiles of the grid layout (`layout: "grid"`): each is a stat
+		 * tile's `content` (`label`, `caption`, `format`, `source` with any
+		 * kind a `type: "stat"` widget takes: aggregate, `ratio`, `elapsed`,
+		 * `computed`, `weighted`, `endpoint`). They share this one card; its
+		 * title is the widget wrapper's (`showTitle: true` on the widget).
+		 * Used instead of `dataSource` / `entries`.
+		 *
+		 * @type {Array<object>}
+		 * @spec openspec/changes/screens-stats-block-grid/specs/stats-block-grid/spec.md#requirement-a-stats-block-can-hold-stat-tiles-in-a-grid
+		 */
+		stats: {
+			type: Array,
+			default: () => [],
+		},
+
+		/**
+		 * Columns of the grid layout (1 to 4, default 2).
+		 *
+		 * @spec openspec/changes/screens-stats-block-grid/specs/stats-block-grid/spec.md#requirement-a-stats-block-can-hold-stat-tiles-in-a-grid
+		 */
+		columns: {
+			type: Number,
+			default: 2,
+		},
+
+		/**
+		 * How the grid layout draws its tiles: `'box'` gives each tile a
+		 * surface of its own (a grey ground, 10px radius, 14px 16px padding),
+		 * as board DcRapportages draws its efficiency figures. Empty (the
+		 * default) keeps the tiles as parts of the one card, without a box
+		 * (board PqMijnWerk "Je week tot nu toe").
+		 *
+		 * @type {'box'|null}
+		 * @spec openspec/changes/screens-stats-block-tile-box/specs/stats-block-grid/spec.md#requirement-a-stats-block-grid-can-box-its-tiles
+		 */
+		tiles: {
+			type: String,
+			default: null,
+		},
+
 		/**
 		 * How the single-source value is shown: a style name (`'currency'`,
 		 * `'number'`, `'percent'`, `'decimal'`, `'duration-hours'`) or
@@ -400,6 +462,28 @@ export default {
 			return this.layout === 'rows'
 		},
 
+		/**
+		 * Whether the widget draws its `stats` as tiles in a grid
+		 * (`layout: "grid"` with at least one stat).
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/screens-stats-block-grid/specs/stats-block-grid/spec.md#requirement-a-stats-block-can-hold-stat-tiles-in-a-grid
+		 */
+		isGrid() {
+			return this.layout === 'grid' && Array.isArray(this.stats) && this.stats.length > 0
+		},
+
+		/**
+		 * The grid's column count, clamped to 1-4.
+		 *
+		 * @return {number}
+		 * @spec openspec/changes/screens-stats-block-grid/specs/stats-block-grid/spec.md#requirement-a-stats-block-can-hold-stat-tiles-in-a-grid
+		 */
+		gridColumns() {
+			const n = Math.floor(Number(this.columns))
+			return Number.isFinite(n) ? Math.min(4, Math.max(1, n)) : 2
+		},
+
 		/**
 		 * The rows of the rows layout: one per entry, or a single row from the
 		 * `dataSource` (labelled by `countLabel`). A row is `{ key, label,
@@ -497,7 +581,7 @@ export default {
 			if (!fmt || this.loading) {
 				return null
 			}
-			return formatMetricValue(this.resolvedCount, fmt, this.configCtx, this.pageObject)
+			return formatMetricValue(this.resolvedCount, fmt, this.configCtx, this.pageObject, this.tl)
 		},
 
 		/**
@@ -529,7 +613,7 @@ export default {
 					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,
+						formatted: fmt && resolved ? formatMetricValue(raw, fmt, this.configCtx, this.pageObject, this.tl) : null,
 						entry: entry || {},
 						key: `${(entry && entry.register) || ''}/${(entry && entry.schema) || ''}/${i}`,
 						count: resolved ? raw : 0,
@@ -617,7 +701,8 @@ export default {
 		// the cross-prop rule lives here (and, for manifests, in
 		// validateManifestV2's post-schema check).
 		const hasDataSource = !!this.dataSource
-		if (hasDataSource === this.hasEntries) {
+		// A grid of stat tiles carries its sources in `stats`.
+		if (!this.isGrid && hasDataSource === this.hasEntries) {
 			// eslint-disable-next-line no-console
 			console.error('[CnStatsBlockWidget] Exactly one of `dataSource` / `entries` must be provided.')
 		}
@@ -764,7 +849,8 @@ export default {
 							params[`filter[${k}][${op}]`] = ov
 						}
 					} else if (v !== '' && v !== null && v !== undefined) {
-						params[`filter[${k}]`] = v
+						// `field[gte]` goes out as `filter[field][gte]`, not `filter[field[gte]]`.
+						params[aggFilterParam(k)] = v
 					}
 				}
 				const res = await axios.get(url, { params })
@@ -890,6 +976,38 @@ export default {
 	color: var(--color-text-maxcontrast);
 }
 
+/* `width: 100%` plus this padding overflowed the card by 48px: the last
+   column ran past the card's right edge (visible once the tiles have a box). */
+.cn-stats-block-widget--grid {
+	box-sizing: border-box;
+	padding: 4px 24px 20px;
+}
+
+.cn-stats-block-widget__grid {
+	display: grid;
+	grid-template-columns: repeat(var(--cn-stats-block-columns, 2), minmax(0, 1fr));
+	gap: 16px 20px;
+}
+
+/* A tile in the grid is a part of the card, not a card: no box, no inset. */
+.cn-stats-block-widget__grid-stat {
+	padding: 0;
+	min-width: 0;
+}
+
+/* `tiles: "box"`: each tile on a grey ground of its own (board DcRapportages,
+   "Vergaderingen en efficiëntie"), 12px apart. */
+.cn-stats-block-widget--tiles-box .cn-stats-block-widget__grid {
+	gap: 12px;
+}
+
+.cn-stats-block-widget--tiles-box .cn-stats-block-widget__grid-stat {
+	box-sizing: border-box;
+	padding: 14px 16px;
+	border-radius: 10px;
+	background: var(--color-background-hover);
+}
+
 .cn-stats-block-widget__rows {
 	display: flex;
 	flex-direction: column;