@conduction/nextcloud-vue 2.83.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
 		},
 
 		/**
@@ -1460,7 +1517,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)
 		},
 
 		/**
@@ -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/CnStatsBlockWidget/CnStatsBlockWidget.vue

@@ -17,7 +17,7 @@
 <template>
 	<div
 		class="cn-stats-block-widget"
-		:class="[iconClass, { 'cn-stats-block-widget--multi': hasEntries && !isRows && !isGrid, 'cn-stats-block-widget--rows': isRows, 'cn-stats-block-widget--grid': isGrid }]">
+		: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"
@@ -288,6 +288,21 @@ export default {
 			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
@@ -566,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)
 		},
 
 		/**
@@ -598,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,
@@ -961,7 +976,10 @@ 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;
 }
 
@@ -977,6 +995,19 @@ export default {
 	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;

package/src/components/CnTabsWidget/CnTabsWidget.vue

@@ -311,6 +311,12 @@ export default {
 		cnLook: { default: 'nextcloud' },
 		/** The tab list's name under the board look, provided by CnDetailPage (`config.tabsLabel`). */
 		cnDetailTabsLabel: { default: null },
+		/**
+		 * The records the detail page's `visibilityContext` names, keyed
+		 * by name (a case's case type), provided by CnDetailPage. A tab's
+		 * `visibleWhen` reads them as `@context.<name>`. Null on any other page.
+		 */
+		cnDetailVisibilityRows: { default: null },
 		/**
 		 * The host's translate (CnAppRoot provides `cnTranslate`), so a tab
 		 * label written in the manifest reads in the user's language.
@@ -475,6 +481,29 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * What a tab's `visibleWhen` reads: the record, with the records the
+		 * detail page's `visibilityContext` names under `@context.<name>`. Null while
+		 * the record, or one of those records, is not there yet.
+		 *
+		 * @return {object|null}
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-page-can-load-records-a-condition-names
+		 */
+		conditionData() {
+			if (!this.objectData) {
+				return null
+			}
+			const holder = this.cnDetailVisibilityRows
+			if (!holder) {
+				return this.objectData
+			}
+			const rows = holder.value
+			if (!rows) {
+				return null
+			}
+			return { ...this.objectData, '@context': rows }
+		},
+
 		/**
 		 * The open panel's own menu items, or an empty list.
 		 *
@@ -859,10 +888,11 @@ export default {
 				return 'visible'
 			}
 			if (isLocallyDecidableVisibleWhen(cond)) {
-				if (!this.objectData) {
+				const data = this.conditionData
+				if (!data) {
 					return 'pending'
 				}
-				return evaluateVisibleWhenLocal(cond, this.objectData) ? 'visible' : 'hidden'
+				return evaluateVisibleWhenLocal(cond, data) ? 'visible' : 'hidden'
 			}
 			const answer = this.sourceVisibility[index]
 			if (answer === undefined) {
@@ -883,7 +913,7 @@ export default {
 		async refreshSourceVisibility() {
 			const tabs = Array.isArray(this.content?.tabs) ? this.content.tabs : []
 			const seq = ++this.visibilitySeq
-			const ctx = { objectId: this.objectId, object: this.objectData || undefined }
+			const ctx = { objectId: this.objectId, object: this.conditionData || this.objectData || undefined }
 			await Promise.all(tabs.map(async (tab, index) => {
 				const cond = tab && typeof tab === 'object' ? tab.visibleWhen : null
 				if (!cond || isLocallyDecidableVisibleWhen(cond)) {
@@ -911,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) {