@conduction/nextcloud-vue 2.84.0 → 2.85.0

package/src/components/CnStatWidget/CnStatWidget.vue

@@ -82,7 +82,7 @@
 				</span>
 			</div>
 
-			<div class="cn-kpi-card__value-row cn-stat-widget__value-row">
+			<div ref="valueRow" class="cn-kpi-card__value-row cn-stat-widget__value-row">
 				<NcLoadingIcon v-if="displayLoading" :size="22" />
 				<span v-else-if="displayError" class="cn-stat-widget__error" :title="displayError">—</span>
 				<template v-else>
@@ -96,6 +96,7 @@
 						:variant="badgeVariant" />
 					<span
 						v-else
+						ref="value"
 						class="cn-kpi-card__value cn-stat-widget__value"
 						:data-testid="isCountdown ? 'cn-stat-widget-countdown' : null"
 						:class="{ 'cn-kpi-card__value--text': isTextValue || shownValueIsText }"
@@ -165,7 +166,7 @@ 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 { formatMetricValue, metricLocale, unwrapAppConfig } from '../../utils/formatMetric.js'
 import { dropOptionalUnresolved, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 import { STATUS_TEXT_COLORS } from '../../utils/statusColors.js'
 import { evaluateVisibleWhenLocal, readVisibleWhenPath } from '../../utils/visibleWhen.js'
@@ -223,6 +224,9 @@ const DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})$/
 /** Milliseconds in a day, used only between two UTC-normalised midnights. */
 const DAY_MS = 86400000
 
+/** The smallest size `fitValue` steps a number down to, in px; below it the number wraps. */
+const MIN_FIT_FONT_SIZE = 14
+
 /**
  * The local calendar day a value names, as a UTC midnight timestamp.
  *
@@ -517,7 +521,7 @@ export default {
 		 * counted between LOCAL CALENDAR DAYS, not as elapsed milliseconds, so
 		 * the time of day on a deadline never moves the answer.
 		 *
-		 * @type {{label?: string, icon?: string, iconColor?: string, valueColor?: string, caption?: string, route?: (object|string), clickRoute?: (object|string), link?: string, format?: {style?: string, currency?: string, decimals?: number, prefix?: string, suffix?: string}, source?: {kind?: string, register?: string, schema?: string, metric?: string, field?: string, filter?: object, url?: string, path?: string, params?: object}, endpointSource?: {url: string, method?: string, params?: object, responsePath?: string}, valueField?: string, limitField?: string, limit?: number, dateRange?: {presets?: Array<{id: string, label?: string, from?: string, to?: string}>, default?: string}, previousField?: string, deltaField?: string, goodDirection?: ('up'|'down'), variant?: ('default'|'primary'|'success'|'warning'|'error'|'danger'), variantWhen?: Array<{op: string, value: unknown, variant: string, icon?: string}>, objectField?: (string|{field: string, resolve?: {register: string, schema: string, labelField?: string, variantField?: string, variantMap?: {[key: string]: string}}}), display?: ('text'|'badge'|'countdown'), countdown?: {unit?: 'days', warnAt?: number, dangerAt?: number, futureLabel?: string, todayLabel?: string, pastLabel?: string, emptyText?: string}, emptyText?: string, captionVariant?: ('default'|'primary'|'success'|'warning'|'error'|'danger'), captionVariantWhen?: Array<{op: string, value: unknown, variant: string}>, captionSource?: {register?: string, schema?: string, metric?: string, field?: string, filter?: object, via?: string, zeroText?: string}, overrides?: Array<{when: {field: string, op?: string, value?: unknown}, label?: string, variant?: string, icon?: string, caption?: string, captionVariant?: string}>}}
+		 * @type {{label?: string, icon?: string, iconColor?: string, valueColor?: string, caption?: string, route?: (object|string), clickRoute?: (object|string), link?: string, format?: {style?: string, currency?: string, decimals?: number, prefix?: string, suffix?: string}, source?: {kind?: string, register?: string, schema?: string, metric?: string, field?: string, filter?: object, url?: string, path?: string, params?: object}, endpointSource?: {url: string, method?: string, params?: object, responsePath?: string}, valueField?: string, limitField?: string, limit?: number, dateRange?: {presets?: Array<{id: string, label?: string, from?: string, to?: string}>, default?: string}, previousField?: string, deltaField?: string, goodDirection?: ('up'|'down'), variant?: ('default'|'primary'|'success'|'warning'|'error'|'danger'), variantWhen?: Array<{op: string, value: unknown, variant: string, icon?: string}>, objectField?: (string|{field: string, resolve?: {register: string, schema: string, labelField?: string, variantField?: string, variantMap?: {[key: string]: string}}}), display?: ('text'|'badge'|'countdown'), countdown?: {unit?: 'days', warnAt?: number, dangerAt?: number, futureLabel?: string, todayLabel?: string, pastLabel?: string, emptyText?: string}, emptyText?: string, captionVariant?: ('default'|'primary'|'success'|'warning'|'error'|'danger'), captionVariantWhen?: Array<{op: string, value: unknown, variant: string}>, captionSource?: {kind?: 'ratio', register?: string, schema?: string, metric?: string, field?: string, filter?: object, via?: string, zeroText?: string, numerator?: {metric?: string, field?: string, filter?: object, via?: string}, denominator?: {metric?: string, field?: string, filter?: object, via?: string}, decimals?: number}, overrides?: Array<{when: {field: string, op?: string, value?: unknown}, label?: string, variant?: string, icon?: string, caption?: string, captionVariant?: string}>}}
 		 */
 		content: {
 			type: Object,
@@ -592,6 +596,9 @@ export default {
 
 	data() {
 		return {
+			// The value's font size while the number would not fit its row at
+			// its own size; null when it fits.
+			fitFontSize: null,
 			// Resolved display label for an `objectField` that holds a reference
 			// uuid. Null until resolved, and null forever when it cannot be.
 			referenceLabel: null,
@@ -609,6 +616,9 @@ export default {
 			value: null,
 			// The caption's own count (`content.captionSource`), null until read.
 			captionValue: null,
+			// The parts of a ratio caption (`captionSource.kind: "ratio"`): the
+			// numerator read (null: the tile's own value) and the denominator.
+			captionRatioParts: null,
 			loading: false,
 			error: '',
 		}
@@ -684,8 +694,9 @@ export default {
 			// nothing to say while it is not read, and at zero the `zeroText`
 			// (or nothing) instead of "0 waiting".
 			const counted = this.hasCaptionSource
-			if (counted && !(Number(this.captionValue) > 0)) {
-				const zero = this.captionValue !== null && this.content.captionSource.zeroText
+			const count = this.captionCount
+			if (counted && !(Number(count) > 0)) {
+				const zero = count !== null && this.content.captionSource.zeroText
 				return typeof zero === 'string' && zero !== '' ? this.effectiveTranslate(zero) : ''
 			}
 			const translated = this.effectiveTranslate(caption)
@@ -694,9 +705,10 @@ export default {
 			}
 			const payload = this.endpointMode ? this.epData : null
 			return translated.replace(/\{([A-Za-z0-9_.]+)\}/g, (whole, path) => {
-				// `{count}` is the caption's own count.
-				if (path === 'count' && counted) {
-					return String(this.captionValue)
+				// `{count}` is the caption's own count; `{ratio}` the same
+				// for a ratio caption, as a percentage.
+				if ((path === 'count' || (path === 'ratio' && this.isCaptionRatio)) && counted) {
+					return this.isCaptionRatio ? this.formatCaptionRatio(count) : String(count)
 				}
 				// `{value}` is the tile's own number, so a caption can read
 				// "{value} due today" on a register-counted tile that has no
@@ -709,6 +721,42 @@ export default {
 			}).replace(/\s{2,}/g, ' ').trim()
 		},
 
+		/**
+		 * Whether the caption is a share (`captionSource.kind: "ratio"`).
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/stat-caption-ratio/specs/stat-widget/spec.md#requirement-a-stat-tiles-caption-can-show-a-share
+		 */
+		isCaptionRatio() {
+			const own = this.content.captionSource
+			return !!own && typeof own === 'object' && own.kind === 'ratio'
+		},
+
+		/**
+		 * The caption's own number: its count, or for a ratio caption the
+		 * numerator (the tile's own value when it names none) over the
+		 * denominator, times 100. Null while unread, and for a zero or failed
+		 * denominator.
+		 *
+		 * @return {number|null}
+		 * @spec openspec/changes/stat-caption-ratio/specs/stat-widget/spec.md#requirement-a-stat-tiles-caption-can-show-a-share
+		 */
+		captionCount() {
+			if (!this.isCaptionRatio) {
+				return this.captionValue
+			}
+			const parts = this.captionRatioParts
+			if (!parts) {
+				return null
+			}
+			const num = parts.num === null ? this.displayValue : parts.num
+			const den = Number(parts.den)
+			if (num === null || num === undefined || num === '' || !Number.isFinite(Number(num)) || !Number.isFinite(den) || den === 0) {
+				return null
+			}
+			return (Number(num) / den) * 100
+		},
+
 		/**
 		 * Whether the caption has a count of its own (`content.captionSource`
 		 * with a register and schema, its own or the tile's).
@@ -737,7 +785,7 @@ export default {
 				return null
 			}
 			// A caption with its own count is coloured by that count.
-			const current = this.hasCaptionSource ? this.captionValue : this.displayValue
+			const current = this.hasCaptionSource ? this.captionCount : this.displayValue
 			if (current === null || current === undefined) {
 				return null
 			}
@@ -1447,7 +1495,16 @@ export default {
 		/** Inline style for the value text (variant rule wins over valueColor). */
 		valueStyle() {
 			const color = this.variantColor || this.content.valueColor
-			return color ? { color } : {}
+			const style = color ? { color } : {}
+			if (this.fitFontSize !== null) {
+				style.fontSize = `${this.fitFontSize}px`
+				// At the smallest size a number that still does not fit wraps rather than clips.
+				if (this.fitFontSize <= MIN_FIT_FONT_SIZE) {
+					style.whiteSpace = 'normal'
+					style.overflowWrap = 'anywhere'
+				}
+			}
+			return style
 		},
 
 		/**
@@ -1556,6 +1613,10 @@ export default {
 			this.fetchValue()
 		},
 
+		shownValue() {
+			this.$nextTick(() => this.fitValue())
+		},
+
 		objectFieldRaw: {
 			immediate: true,
 			handler() {
@@ -1576,13 +1637,50 @@ export default {
 			payload?.waitUntil?.(done)
 		}
 		subscribe(PAGE_REFRESH_CHANNEL, this._onPageRefresh)
+		if (typeof ResizeObserver === 'function' && this.$refs.valueRow) {
+			this._fitObserver = new ResizeObserver(() => this.fitValue())
+			this._fitObserver.observe(this.$refs.valueRow)
+		}
+		this.$nextTick(() => this.fitValue())
 	},
 
 	beforeUnmount() {
 		unsubscribe(PAGE_REFRESH_CHANNEL, this._onPageRefresh)
+		this._fitObserver?.disconnect()
 	},
 
 	methods: {
+		/**
+		 * Step the number's font down until it fits its row, instead of the
+		 * card clipping it ("€ 1.012.4" in a narrow tile). A value that fits
+		 * keeps its own size; text values wrap and clamp on their own.
+		 *
+		 * @return {void}
+		 * @spec openspec/changes/stat-value-fits/specs/stat-tile-board-look/spec.md#requirement-a-stat-value-shrinks-instead-of-clipping
+		 */
+		fitValue() {
+			const row = this.$refs.valueRow
+			const el = this.$refs.value
+			if (!row || !el || el.classList.contains('cn-kpi-card__value--text') || typeof getComputedStyle !== 'function') {
+				this.fitFontSize = null
+				return
+			}
+			const applied = el.style.fontSize
+			const whiteSpace = el.style.whiteSpace
+			el.style.fontSize = ''
+			el.style.whiteSpace = ''
+			const natural = parseFloat(getComputedStyle(el).fontSize)
+			const overflow = row.scrollWidth - row.clientWidth
+			const width = el.offsetWidth
+			el.style.fontSize = applied
+			el.style.whiteSpace = whiteSpace
+			if (!(overflow > 0.5) || !(width > 0) || !(natural > 0)) {
+				this.fitFontSize = null
+				return
+			}
+			this.fitFontSize = Math.max(MIN_FIT_FONT_SIZE, Math.floor(natural * ((width - overflow) / width) * 10) / 10)
+		},
+
 		/**
 		 * Resolve an `objectField` that holds a reference uuid to the referenced
 		 * object's label, through the shared object store (per-schema caching and
@@ -1843,7 +1941,9 @@ export default {
 		/**
 		 * Read the caption's own count (`content.captionSource`:
 		 * `{ register?, schema?, metric?, field?, filter?, via?, zeroText? }`,
-		 * register and schema default to the tile's source). A failed read
+		 * register and schema default to the tile's source). With `kind:
+		 * "ratio"` it reads the `denominator` part, and the `numerator` part
+		 * when one is named, as the tile's `ratio` source does. A failed read
 		 * leaves the caption out; it never shows a zero it did not count.
 		 *
 		 * @spec openspec/changes/screens-stat-caption-source/specs/stat-widget/spec.md#requirement-a-stat-tiles-caption-can-carry-its-own-count
@@ -1852,6 +1952,7 @@ export default {
 		async fetchCaptionValue() {
 			if (!this.hasCaptionSource) {
 				this.captionValue = null
+				this.captionRatioParts = null
 				return
 			}
 			const own = this.content.captionSource
@@ -1862,13 +1963,37 @@ export default {
 					import('@nextcloud/axios'),
 					import('@nextcloud/router'),
 				])
+				if (own.kind === 'ratio') {
+					// The parts of the tile's own `ratio` source: each names its
+					// metric, field, filter and `via`.
+					const part = (p) => this.fetchAggregate(axios, generateUrl, source, (p && p.metric) || own.metric, (p && p.field) || own.field, (p && p.filter) || {}, (p && p.via) || own.via)
+					const num = own.numerator ? await part(own.numerator) : null
+					const den = await part(own.denominator)
+					this.captionRatioParts = { num: num === undefined ? null : num, den }
+					return
+				}
 				const found = await this.fetchAggregate(axios, generateUrl, source, own.metric, own.field, own.filter || {}, own.via)
 				this.captionValue = found === null || found === undefined || Number.isNaN(Number(found)) ? null : Number(found)
 			} catch {
 				this.captionValue = null
+				this.captionRatioParts = null
 			}
 		},
 
+		/**
+		 * A ratio caption's share as the reader's number, with
+		 * `captionSource.decimals` fraction digits (0 by default).
+		 *
+		 * @param {number} share The percentage.
+		 * @return {string}
+		 * @spec openspec/changes/stat-caption-ratio/specs/stat-widget/spec.md#requirement-a-stat-tiles-caption-can-show-a-share
+		 */
+		formatCaptionRatio(share) {
+			const raw = Number(this.content.captionSource && this.content.captionSource.decimals)
+			const digits = Number.isInteger(raw) && raw >= 0 && raw <= 4 ? raw : 0
+			return new Intl.NumberFormat(metricLocale(), { minimumFractionDigits: digits, maximumFractionDigits: digits }).format(share)
+		},
+
 		/**
 		 * Resolve the widget's value from its `source`. Supports three source
 		 * kinds (ADR-041): a plain `aggregate` (count/sum/avg/min/max with

package/src/components/CnTabsWidget/CnTabsWidget.vue

@@ -941,11 +941,14 @@ export default {
 			const from = tab && typeof tab === 'object' ? tab.countFrom : null
 			let source = null
 			if (from === 'widget') {
-				// A stack counts its first widget that has a list.
+				// A stack counts its first widget that has a list: flat
+				// (`content.register`) or a dashboard table's `content.source`.
 				const lists = this.tabWidgetIds(tab)
 					.map((id) => this.availableWidgets.find((w) => w && w.id === id))
-					.filter((w) => w && w.content && typeof w.content === 'object' && w.content.register && w.content.schema)
-				source = lists.length ? lists[0].content : null
+					.map((w) => (w && w.content && typeof w.content === 'object' ? w.content : null))
+					.map((content) => (content && content.source && typeof content.source === 'object' && content.source.register ? content.source : content))
+					.filter((content) => content && content.register && content.schema)
+				source = lists.length ? lists[0] : null
 			} else if (from && typeof from === 'object') {
 				source = from
 			}

package/src/components/CnToggleTableWidget/CnToggleTableWidget.vue

@@ -79,6 +79,13 @@ import { serverErrorMessage } from '../../utils/serverErrorMessage.js'
  *   the keys of the rows that are in it; the switch is on when the row's key is
  *   in the list, or NOT in it with `bind.invert` (a list of hidden items shown
  *   as "visible" switches).
+ * - `bind.mode: 'each'` — every row IS an object (read by `source`, its key the
+ *   object id); the switch is that object's own boolean field (`bind.field`)
+ *   and a toggle PATCHes that object (`bind.register` / `bind.schema`, else the
+ *   surface's). No current object is needed, so it serves a settings page.
+ * - `bind.mode: 'map'` — a config map holds a boolean per row key: read from
+ *   `bind.url` (at `bind.path`) and written through `save`, or one object field
+ *   of the current object (`bind.field`) written by its dot-path.
  *
  * A toggle saves at once with ONE PATCH of that field; a refused PATCH puts the
  * switch back and shows the server's words.
@@ -98,7 +105,7 @@ export default {
 		/**
 		 * The widget configuration.
 		 *
-		 * - `bind` — `{ mode: 'flag' }` (default) or `{ mode: 'list', field, invert? }`.
+		 * - `bind` — `{ mode: 'flag' }` (default), `{ mode: 'list', field, invert? }`, `{ mode: 'each', field, register?, schema?, invert? }` or `{ mode: 'map', url?, path?, field?, invert? }`.
 		 * - `rows` — static rows `[{ key, label, hint?, field?, ...extra }]`.
 		 * - `source` — `{ url, path?, key, label, hint? }`: rows read from an endpoint (tokens `@objectId`, `@object.<field>`), in addition to `rows`.
 		 * - `columns` — extra columns `[{ header, path, map? }]` read off each row.
@@ -149,13 +156,33 @@ export default {
 			notice: '',
 			/** Per row, how often a refused toggle forced the switch to be drawn again from the stored value. */
 			undone: {},
+			/** `each` and `map`: the value written per row key. */
+			rowSaved: {},
+			/** `map` with `bind.url`: the map as read. */
+			map: null,
 		}
 	},
 
 	computed: {
+		/**
+		 * How a switch is stored.
+		 *
+		 * @return {object} The normalised `bind`.
+		 * @spec openspec/changes/toggle-table-objects-and-map/specs/toggle-table/spec.md#requirement-a-toggle-table-can-switch-objects-or-a-config-map
+		 */
 		bind() {
 			const bind = this.content.bind || {}
-			return bind.mode === 'list' ? { mode: 'list', field: bind.field, invert: bind.invert === true } : { mode: 'flag' }
+			const invert = bind.invert === true
+			if (bind.mode === 'list') {
+				return { mode: 'list', field: bind.field, invert }
+			}
+			if (bind.mode === 'each') {
+				return { mode: 'each', field: bind.field || '', invert, register: bind.register || this.register, schema: bind.schema || this.schema }
+			}
+			if (bind.mode === 'map') {
+				return { mode: 'map', field: bind.field || '', url: bind.url || '', path: bind.path || '', invert }
+			}
+			return { mode: 'flag' }
 		},
 
 		/** The drawn rows: configured first, then sourced, each with a key, title and hint. */
@@ -200,12 +227,15 @@ export default {
 	watch: {
 		objectData() {
 			this.saved = {}
+			this.rowSaved = {}
 			this.loadSource()
+			this.loadMap()
 		},
 	},
 
 	created() {
 		this.loadSource()
+		this.loadMap()
 	},
 
 	methods: {
@@ -233,6 +263,10 @@ export default {
 		 * @return {boolean}
 		 */
 		isOn(row) {
+			if (this.bind.mode === 'each' || this.bind.mode === 'map') {
+				const on = this.rowValue(row) === true
+				return this.bind.invert ? !on : on
+			}
 			if (this.bind.mode === 'list') {
 				const list = this.stored(this.bind.field)
 				const inList = Array.isArray(list) && list.map(String).includes(row.key)
@@ -241,6 +275,92 @@ export default {
 			return row.field ? this.stored(row.field) === true : false
 		},
 
+		/**
+		 * `each` and `map`: the stored value of a row's switch, as last written,
+		 * else read off the row's object or the map.
+		 *
+		 * @param {object} row The row.
+		 * @return {unknown}
+		 * @spec openspec/changes/toggle-table-objects-and-map/specs/toggle-table/spec.md#requirement-a-toggle-table-can-switch-objects-or-a-config-map
+		 */
+		rowValue(row) {
+			if (Object.hasOwn(this.rowSaved, row.key)) {
+				return this.rowSaved[row.key]
+			}
+			if (this.bind.mode === 'each') {
+				return this.bind.field ? readPath(row.item || row, this.bind.field) : undefined
+			}
+			const map = this.bind.url ? this.map : (this.bind.field ? this.stored(this.bind.field) : null)
+			return map && typeof map === 'object' ? map[row.key] : undefined
+		},
+
+		/**
+		 * Resolve `@objectId` and `@object.<path>` in a url.
+		 *
+		 * @param {string} url The url.
+		 * @return {string}
+		 */
+		fillUrl(url) {
+			const object = this.objectData || {}
+			return String(url)
+				.replace(/@objectId/g, () => encodeURIComponent(String(this.objectId || object.id || '')))
+				.replace(/@object\.([\w.@]+)/g, (m, path) => encodeURIComponent(String(readPath(object, path) ?? '')))
+		},
+
+		/**
+		 * `map` with `bind.url`: read the map.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/toggle-table-objects-and-map/specs/toggle-table/spec.md#requirement-a-toggle-table-can-switch-objects-or-a-config-map
+		 */
+		async loadMap() {
+			if (this.bind.mode !== 'map' || !this.bind.url) {
+				return
+			}
+			try {
+				const { default: axios } = await import('@nextcloud/axios')
+				const { data } = await axios.get(prefixUrl(this.fillUrl(this.bind.url)))
+				const map = this.bind.path ? readPath(data, this.bind.path) : data
+				this.map = map && typeof map === 'object' ? map : {}
+			} catch (e) {
+				this.notice = serverErrorMessage(e)
+			}
+		},
+
+		/**
+		 * `each` and `map`: write one row's switch.
+		 *
+		 * @param {object} row The row.
+		 * @param {boolean} value The value to store.
+		 * @return {Promise<unknown>} The value the server holds now.
+		 * @spec openspec/changes/toggle-table-objects-and-map/specs/toggle-table/spec.md#requirement-a-toggle-table-can-switch-objects-or-a-config-map
+		 */
+		async writeRow(row, value) {
+			const save = this.content.save
+			const hasSave = Boolean(save && save.url)
+			if (this.bind.mode === 'each') {
+				const url = objectUrlOf(this.bind.register, this.bind.schema, row.key)
+				if ((!url && !hasSave) || !this.bind.field) {
+					throw new Error(this.tr('This switch cannot be saved here.'))
+				}
+				const data = await writeFields(url, { [this.bind.field]: value }, { save, object: row.item || row })
+				const answered = hasSave ? undefined : readPath(data, this.bind.field)
+				return answered !== undefined ? answered : value
+			}
+			if (this.bind.url) {
+				if (!hasSave) {
+					throw new Error(this.tr('This switch cannot be saved here.'))
+				}
+				await writeFields('', { [row.key]: value }, { save, object: this.objectData })
+				return value
+			}
+			if ((!this.objectUrl && !hasSave) || !this.bind.field) {
+				throw new Error(this.tr('This switch cannot be saved here.'))
+			}
+			await writeFields(this.objectUrl, { [`${this.bind.field}.${row.key}`]: value }, { save, object: this.objectData })
+			return value
+		},
+
 		/**
 		 * The text of an extra column for a row.
 		 *
@@ -265,10 +385,7 @@ export default {
 			if (!source || !source.url || !source.key) {
 				return
 			}
-			const object = this.objectData || {}
-			const url = String(source.url)
-				.replace(/@objectId/g, () => encodeURIComponent(String(this.objectId || object.id || '')))
-				.replace(/@object\.([\w.@]+)/g, (m, path) => encodeURIComponent(String(readPath(object, path) ?? '')))
+			const url = this.fillUrl(source.url)
 			try {
 				const { default: axios } = await import('@nextcloud/axios')
 				const { data } = await axios.get(prefixUrl(url))
@@ -277,6 +394,7 @@ export default {
 					.filter((item) => item && readPath(item, source.key) !== undefined)
 					.map((item) => ({
 						...item,
+						item,
 						key: String(readPath(item, source.key)),
 						title: String(readPath(item, source.label || source.key) ?? readPath(item, source.key)),
 						hint: source.hint ? String(readPath(item, source.hint) ?? '') : '',
@@ -295,6 +413,21 @@ export default {
 		 * @spec openspec/changes/abstract-toggle-table/specs/toggle-table/spec.md#requirement-a-toggle-saves-one-field
 		 */
 		async toggle(row, on) {
+			if (this.bind.mode === 'each' || this.bind.mode === 'map') {
+				this.notice = ''
+				this.busy = row.key
+				try {
+					const written = await this.writeRow(row, this.bind.invert ? !on : on)
+					this.rowSaved = { ...this.rowSaved, [row.key]: written }
+					this.$emit('saved', { field: this.bind.mode === 'each' ? this.bind.field : row.key, key: row.key, value: written })
+				} catch (e) {
+					this.notice = serverErrorMessage(e)
+					this.undone = { ...this.undone, [row.key]: (this.undone[row.key] || 0) + 1 }
+				} finally {
+					this.busy = ''
+				}
+				return
+			}
 			const field = this.bind.mode === 'list' ? this.bind.field : row.field
 			if ((!this.objectUrl && !(this.content.save && this.content.save.url)) || !field) {
 				this.notice = this.tr('This switch cannot be saved here.')
@@ -317,7 +450,7 @@ export default {
 				this.saved = { ...this.saved, [field]: written }
 				/**
 				 * @event saved A switch was written.
-				 * @type {{field: string, value: unknown}}
+				 * @type {{field: string, key?: string, value: unknown}} `key` is the row, in the `each` and `map` modes.
 				 */
 				this.$emit('saved', { field, value: written })
 			} catch (e) {

package/src/components/CnVersionInfoCard/CnVersionInfoCard.md

@@ -87,9 +87,10 @@ With `title`, `description`, `docUrl`, `cardTitle`, `loading`, and `labels`:
 | `title` | String | `'Version information'` | Section heading (passed to the wrapping CnSettingsSection) |
 | `description` | String | `'Information about the current application installation'` | Section sub-heading |
 | `docUrl` | String | `''` | Documentation URL — shows an info icon link next to the section title |
+| `wide` | Boolean | `true` | Under the board look the card spans the whole settings grid, as the boards draw it. `false` keeps it one card in the grid. No effect without the board look. |
 | `cardTitle` | String | `'Application information'` | Heading inside the gray version card |
 | `loading` | Boolean | `false` | Show a loading spinner and hide the card content while data is fetching |
-| `labels` | Object | `{ appName, version, configuredVersion }` | Custom labels for the standard row headings (for i18n) |
+| `labels` | Object | `{}` | Custom labels for the standard row headings (`appName`, `version`, `configuredVersion`); a label left out keeps the translated default |
 
 
 `look` is documented in the prop table of the component reference (board look, screens-chrome-parity).

package/src/components/CnVersionInfoCard/CnVersionInfoCard.vue

@@ -4,7 +4,8 @@
 		:description="description"
 		:docUrl="docUrl"
 		:loading="loading"
-		loadingMessage="Loading version information...">
+		:wide="isBoard && wide"
+		:loadingMessage="t('nextcloud-vue', 'Loading version information…')">
 		<!-- Actions slot (top right). Under the board look the same buttons sit
 		     in the footer row of the card instead. -->
 		<template v-if="!isBoard" #actions>
@@ -34,19 +35,19 @@
 				<div class="cn-version-info__details">
 					<!-- Application Name -->
 					<div class="cn-version-info__item">
-						<span class="cn-version-info__label">{{ labels.appName }}:</span>
+						<span class="cn-version-info__label">{{ fieldLabels.appName }}:</span>
 						<span class="cn-version-info__value">{{ appName }}</span>
 					</div>
 
 					<!-- Version -->
 					<div class="cn-version-info__item">
-						<span class="cn-version-info__label">{{ labels.version }}:</span>
+						<span class="cn-version-info__label">{{ fieldLabels.version }}:</span>
 						<span class="cn-version-info__value">{{ appVersion }}</span>
 					</div>
 
 					<!-- Configured Version (if provided) -->
 					<div v-if="configuredVersion" class="cn-version-info__item">
-						<span class="cn-version-info__label">{{ labels.configuredVersion }}:</span>
+						<span class="cn-version-info__label">{{ fieldLabels.configuredVersion }}:</span>
 						<span class="cn-version-info__value">{{ configuredVersion }}</span>
 					</div>
 
@@ -157,6 +158,18 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Under the board look the card spans the whole settings grid, as the
+		 * boards draw the version card. Set to `false` to keep it one card in
+		 * the grid. Without the board look it has no effect.
+		 *
+		 * @spec openspec/changes/board-version-card-full-width/specs/settings-board-look/spec.md#requirement-the-board-version-card-spans-the-settings-grid
+		 */
+		wide: {
+			type: Boolean,
+			default: true,
+		},
+
 		/** Section title */
 		title: {
 			type: String,
@@ -232,14 +245,13 @@ export default {
 			default: false,
 		},
 
-		/** Custom labels for the standard fields */
+		/**
+		 * Custom labels for the standard fields, `{ appName?, version?, configuredVersion? }`.
+		 * A label left out keeps the translated default.
+		 */
 		labels: {
 			type: Object,
-			default: () => ({
-				appName: 'Application Name',
-				version: 'Version',
-				configuredVersion: 'Configured Version',
-			}),
+			default: () => ({}),
 		},
 	},
 
@@ -251,6 +263,21 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * The field labels: the app's, else the library's in the reader's language.
+		 *
+		 * @return {{appName: string, version: string, configuredVersion: string}}
+		 * @spec openspec/changes/version-card-dutch-and-header/specs/settings-board-look/spec.md#requirement-the-admin-chrome-reads-in-the-readers-language
+		 */
+		fieldLabels() {
+			return {
+				appName: t('nextcloud-vue', 'Application name'),
+				version: t('nextcloud-vue', 'Version'),
+				configuredVersion: t('nextcloud-vue', 'Configured version'),
+				...(this.labels || {}),
+			}
+		},
+
 		/** @return {string} Button type based on update status */
 		updateButtonType() {
 			if (this.isUpToDate) {
@@ -267,16 +294,18 @@ export default {
 		/** @return {string} Update button label text */
 		updateButtonText() {
 			if (this.updating) {
-				return 'Updating...'
+				return t('nextcloud-vue', 'Updating…')
 			}
 			if (this.isUpToDate) {
-				return 'Up to date'
+				return t('nextcloud-vue', 'Up to date')
 			}
-			return 'Update'
+			return t('nextcloud-vue', 'Update')
 		},
 	},
 
 	methods: {
+		t,
+
 		handleUpdateClick() {
 			if (!this.updateButtonDisabled) {
 				this.$emit('update')

package/src/components/CnWeekStripWidget/CnWeekStripWidget.vue

@@ -89,7 +89,8 @@ const DEFAULT_LIMIT = 100
  *
  * It renders the five working days by default (`days: 7` adds the weekend),
  * highlights today, marks items that are late, and says so when a day has
- * nothing. On a narrow screen the strip scrolls sideways.
+ * nothing. On a narrow screen the strip scrolls sideways; under the board
+ * look (`.cn-look-board`) the days wrap into rows instead.
  *
  * Items come from an OpenRegister source (one request for the whole week) or
  * from static `items`. Resolved by its registry type key `week-strip`.