@conduction/nextcloud-vue 2.83.0 → 2.85.0

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -1253,6 +1253,7 @@ import {
 	stageEntry,
 	stageOf,
 } from '../../utils/detailActionModel.js'
+import { detailWidgetVisible, fetchVisibilityRows, visibilityContextRefs, widgetConditionData } from '../../utils/detailWidgetVisibility.js'
 import { reportBindingProblems } from '../../utils/diagnostics.js'
 import { fetchListTotal } from '../../utils/fetchFilterCounts.js'
 import { cnGridCellStyle, hasGridRow } from '../../utils/grid.js'
@@ -1260,6 +1261,7 @@ import { isActivityWidget, resolveHeaderMeta } from '../../utils/headerMeta.js'
 import { patchStoredSelf } from '../../utils/patchStoredSelf.js'
 import { setReadState } from '../../utils/recordInteractions.js'
 import { slotRenders } from '../../utils/slotContent.js'
+import { evaluateVisibleWhen, isLocallyDecidableVisibleWhen } from '../../utils/visibleWhen.js'
 import {
 	isCardWidgetDef,
 	isContentOnlyWidgetDef,
@@ -1512,8 +1514,8 @@ export default {
 
 	/**
 	 * Offer the board look's tab list name to the tabs widget below this page
-	 * (`config.tabsLabel`, default "<type> parts"). A getter object, so the
-	 * widget reads it live.
+	 * (`config.tabsLabel`, default "<type> parts"), and the records
+	 * `visibilityContext` names. Getter objects, so the widget reads them live.
 	 *
 	 * @return {object} The provided values.
 	 * @spec openspec/changes/screens-detail-page-parity/specs/detail-page-board-look/spec.md#requirement-folder-tabs-take-the-board-strip
@@ -1521,6 +1523,7 @@ export default {
 	provide() {
 		const isBoard = computed(() => this.isBoard)
 		const tabsLabel = computed(() => this.resolvedTabsLabel)
+		const visibilityRows = computed(() => (this.visibilityRowsPending ? null : this.visibilityRows))
 		return {
 			// The page's own look reaches the tabs, the cards and the activity
 			// below it, also when it came from the `look` prop and not the app.
@@ -1530,6 +1533,15 @@ export default {
 					return tabsLabel.value
 				},
 			},
+
+			// The records `visibilityContext` names, keyed `@context.<name>`, so a tab's
+			// `visibleWhen` reads the case type as a grid widget's does. Null
+			// while they are on their way.
+			cnDetailVisibilityRows: {
+				get value() {
+					return visibilityRows.value
+				},
+			},
 		}
 	},
 
@@ -2572,6 +2584,25 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Records the page reads beside the loaded one, so a `visibleWhen`
+		 * can ask about them (manifest `config.visibilityContext`). Each entry
+		 * is `{ <name>: { field, register, schema } }`: `field` is the
+		 * property of the loaded record holding the other record's id, and a
+		 * condition reads that record as `@context.<name>.<path>`. A case page that
+		 * declares `{ caseType: { field: "caseType", register: "dossiq",
+		 * schema: "caseType" } }` can show a widget for some case types only
+		 * with `{ field: "@context.caseType.category", op: "in", value: [...] }`.
+		 * A record that cannot be read is absent, so its condition fails safe.
+		 * Empty (the default) reads nothing extra.
+		 *
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-page-can-load-records-a-condition-names
+		 */
+		visibilityContext: {
+			type: Object,
+			default: () => ({}),
+		},
+
 		/**
 		 * Whether the current user administers this instance. Shows the
 		 * `adminOnly` header actions. `null` (the default) reads it from
@@ -2633,6 +2664,19 @@ export default {
 			type: String,
 			default: '',
 		},
+
+		/**
+		 * The record field the header names the record by (manifest
+		 * `config.titleField`, a dotted path such as `number`), as an invoice
+		 * page names the invoice number. An empty value falls back to the
+		 * display name. Empty (the default) changes nothing.
+		 *
+		 * @spec openspec/changes/detail-title-field/specs/detail-page/spec.md#requirement-a-detail-page-can-name-the-record-by-a-field
+		 */
+		titleField: {
+			type: String,
+			default: '',
+		},
 	},
 
 	emits: [
@@ -2799,6 +2843,19 @@ export default {
 
 	data() {
 		return {
+			/**
+			 * The records `visibilityContext` names, keyed `@context.<name>`: the row,
+			 * `null` when it could not be read, absent while it is on its way.
+			 */
+			visibilityRows: {},
+			/** The `visibilityRefsKey` the rows in `visibilityRows` were read for. */
+			visibilityRowsFor: '',
+			/** Sequence of the last `visibilityContext` read, so a late answer for another record is dropped. */
+			visibilityRowsSeq: 0,
+			/** The answers of endpoint and source `visibleWhen` conditions on grid widgets, by widget id. */
+			widgetConditionAnswers: {},
+			/** Sequence of the last remote condition round. */
+			widgetConditionSeq: 0,
 			/** The counts of the header's count pills (`countFrom`), by pill key (`type`, `status`). */
 			pillCounts: {},
 			/** Sequence of the last pill count round, so a late answer does not overwrite a newer one. */
@@ -3058,11 +3115,17 @@ export default {
 		 * because a keyboard user who cannot see the page needs to know what
 		 * they are being offered before they take it.
 		 *
+		 * One library string with a placeholder, not "Skip to" from the host's
+		 * catalogue glued to the label: no app carried that fragment, so every
+		 * Dutch reader got "Skip to In behandeling nemen" (Zuiddrecht live
+		 * round 3), and a fragment cannot be put in Dutch word order anyway.
+		 *
 		 * @return {string} The link text.
 		 * @spec openspec/changes/case-page-and-list-as-a-place/specs/index-page/spec.md
+		 * @spec openspec/changes/detail-page-strings-dutch/specs/detail-page-strings-dutch/spec.md#requirement-the-detail-page-speaks-the-readers-language
 		 */
 		skipLinkLabel() {
-			return `${this.effectiveTranslate('Skip to')} ${this.effectivePrimaryLabel}`
+			return t('nextcloud-vue', 'Skip to {action}', { action: this.effectivePrimaryLabel })
 		},
 
 		// ── The action model (detail-action-model-and-case-surfaces) ────
@@ -3904,6 +3967,68 @@ export default {
 			return store.objects?.[this.objectType]?.[this.objectId] ?? null
 		},
 
+		/**
+		 * The records `visibilityContext` names for the loaded record.
+		 *
+		 * @return {Array<{key: string, register: string, schema: string, id: string}>}
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-page-can-load-records-a-condition-names
+		 */
+		visibilityRefs() {
+			return visibilityContextRefs(this.visibilityContext, this.resolvedObject)
+		},
+
+		/**
+		 * Whether a record `visibilityContext` names is still on its way.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-page-can-load-records-a-condition-names
+		 */
+		visibilityRowsPending() {
+			return this.visibilityRefs.length > 0 && this.visibilityRowsFor !== this.visibilityRefsKey
+		},
+
+		/**
+		 * The named references as one key, so another record (or another case
+		 * type on the same record) reads them again.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-page-can-load-records-a-condition-names
+		 */
+		visibilityRefsKey() {
+			return JSON.stringify(this.visibilityRefs)
+		},
+
+		/**
+		 * What a grid widget's `visibleWhen` reads: the record, with the
+		 * `visibilityContext` records under `@context.<name>`. Null until the record loads.
+		 *
+		 * @return {object|null}
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-grid-widget-shows-only-while-its-visiblewhen-holds-for-the-record
+		 */
+		widgetVisibilityData() {
+			return widgetConditionData(this.resolvedObject, this.visibilityRows)
+		},
+
+		/**
+		 * The grid widgets whose `visibleWhen` needs a request (endpoint or
+		 * source), with what they ask, as one key: a change re-asks them.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-grid-widget-shows-only-while-its-visiblewhen-holds-for-the-record
+		 */
+		remoteWidgetConditionsKey() {
+			if (!this.widgetVisibilityData || this.visibilityRowsPending) {
+				return ''
+			}
+			const defs = [...(this.bodyGridWidgets || []), ...((this.activeView && this.activeView.widgets) || [])]
+			const remote = defs.filter((def) => def && def.visibleWhen && typeof def.visibleWhen === 'object'
+				&& !isLocallyDecidableVisibleWhen(def.visibleWhen))
+			if (remote.length === 0) {
+				return ''
+			}
+			return JSON.stringify([String(this.objectId || ''), remote.map((def) => [def.id, def.visibleWhen])])
+		},
+
 		/**
 		 * The `@self` block of the resolved object (interaction markers live here).
 		 *
@@ -3990,10 +4115,10 @@ export default {
 		},
 
 		/**
-		 * The resolved record's human display name, drawn from the loaded
-		 * object via the same fallback chain the relation resolver uses:
-		 * `@self.name` → `name` / `title` / `displayName` → `firstName
-		 * lastName`. Empty string while the object is still loading or when no
+		 * The resolved record's human display name: the `titleField` value
+		 * when the page names one and it is filled, else the same fallback
+		 * chain the relation resolver uses: `@self.name` → `name` / `title` /
+		 * `displayName` → `firstName lastName`. Empty string while the object is still loading or when no
 		 * name-like field exists (a raw id is never used as a name — ADR-062).
 		 *
 		 * @return {string}
@@ -4003,6 +4128,12 @@ export default {
 			if (!obj || typeof obj !== 'object') {
 				return ''
 			}
+			if (this.titleField) {
+				const named = stageOf(obj, this.titleField)
+				if (named !== '') {
+					return named
+				}
+			}
 			const self = obj['@self'] || {}
 			const id = this.objectId !== null && this.objectId !== undefined ? String(this.objectId) : ''
 			const candidates = [self.name, self.title, obj.name, obj.title, obj.displayName]
@@ -4436,6 +4567,22 @@ export default {
 	},
 
 	watch: {
+		// The records a condition names are read again for another record.
+		visibilityRefsKey: {
+			immediate: true,
+			handler() {
+				this.refreshVisibilityRows()
+			},
+		},
+
+		// Endpoint and source conditions on grid widgets are asked once per record.
+		remoteWidgetConditionsKey: {
+			immediate: true,
+			handler() {
+				this.refreshWidgetConditions()
+			},
+		},
+
 		// The header's count pills count again for another record or other lists.
 		pillCountKey: {
 			immediate: true,
@@ -5674,6 +5821,62 @@ export default {
 				|| undefined
 		},
 
+		/**
+		 * Read the records `visibilityContext` names for the loaded record. A
+		 * late answer for a record the page has left is dropped.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-page-can-load-records-a-condition-names
+		 */
+		async refreshVisibilityRows() {
+			const key = this.visibilityRefsKey
+			const refs = this.visibilityRefs
+			const seq = ++this.visibilityRowsSeq
+			if (refs.length === 0) {
+				// Write only on a change, so a page without `visibilityContext`
+				// never touches the state its layout could read.
+				if (Object.keys(this.visibilityRows).length > 0) {
+					this.visibilityRows = {}
+				}
+				if (this.visibilityRowsFor !== key) {
+					this.visibilityRowsFor = key
+				}
+				return
+			}
+			if (!this._visibilityRowCache) {
+				this._visibilityRowCache = new Map()
+			}
+			const rows = await fetchVisibilityRows(refs, this._visibilityRowCache)
+			if (seq !== this.visibilityRowsSeq) {
+				return
+			}
+			this.visibilityRows = rows
+			this.visibilityRowsFor = key
+		},
+
+		/**
+		 * Ask the endpoint and source `visibleWhen` conditions of the grid
+		 * widgets, once per record. Each is fail-safe: an error hides the widget.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-grid-widget-shows-only-while-its-visiblewhen-holds-for-the-record
+		 */
+		async refreshWidgetConditions() {
+			const seq = ++this.widgetConditionSeq
+			if (this.remoteWidgetConditionsKey === '') {
+				return
+			}
+			const [, entries] = JSON.parse(this.remoteWidgetConditionsKey)
+			const ctx = { objectId: this.objectId, object: this.widgetVisibilityData || undefined }
+			const answers = {}
+			await Promise.all(entries.map(async ([id, cond]) => {
+				answers[id] = await evaluateVisibleWhen(cond, ctx)
+			}))
+			if (seq === this.widgetConditionSeq) {
+				this.widgetConditionAnswers = answers
+			}
+		},
+
 		/**
 		 * Drop the items that draw nothing, then close the rows they freed —
 		 * `float: true` leaves the item below pinned under a gap nobody owns.
@@ -5696,7 +5899,10 @@ export default {
 		 * Whether a layout item has anything to draw, so a grid cell is worth
 		 * spending on it.
 		 *
-		 * TWO widget types are judged, and no others.
+		 * A widget whose definition carries `visibleWhen` draws only while the
+		 * condition holds for the record (see `detailWidgetVisible`).
+		 *
+		 * Beyond that, TWO widget types are judged, and no others.
 		 *
 		 * `integration`, in the case where nothing can ever appear: a leaf from
 		 * another app that is not registered, with no `requiredApp` to fall back
@@ -5743,6 +5949,18 @@ export default {
 			if (!widget) {
 				return true
 			}
+			// The widget's own `visibleWhen`, read against the record and the
+			// records `visibilityContext` names (a case's case type). Without
+			// one the widget shows, as it always did, and the layout takes no
+			// dependency on the record: a page without conditions re-lays out
+			// exactly as often as before.
+			if (widget.visibleWhen !== undefined && widget.visibleWhen !== null
+				&& !detailWidgetVisible(widget, this.widgetVisibilityData, {
+					pending: this.visibilityRowsPending,
+					answers: this.widgetConditionAnswers,
+				})) {
+				return false
+			}
 			// The board look shows the activity as the History tab. When a tabs
 			// widget already holds it, it is not also a body section.
 			if (this.isBoard && isActivityWidget(widget) && this.tabbedWidgetIds.has(widget.id)) {

package/src/components/CnDetailWidgetHost/CnDetailWidgetHost.vue

@@ -725,7 +725,9 @@ export default {
 			if (this.widget && this.widget.type === 'files' && !(this.cnRegistry && this.cnRegistry.files) && this.register && this.schema) {
 				return CnObjectFilesWidget
 			}
-			return resolveRegistryRenderer(this.widget, this.cnRegistry)
+			// Inside a dashboard's tabs the dashboard's resolution holds.
+			const onDashboard = this.surface === 'app-dashboard' || this.surface === 'user-dashboard'
+			return resolveRegistryRenderer(this.widget, this.cnRegistry, { typeAsWritten: onDashboard })
 		},
 
 		/**

package/src/components/CnFactsWidget/CnFactsWidget.vue

@@ -145,6 +145,7 @@ import { dispatchAction } from '../../utils/actionsDispatcher.js'
 import { isBadgeVariant } from '../../utils/badgeVariants.js'
 import { formatBoardDate } from '../../utils/boardDate.js'
 import { parseDateValue } from '../../utils/dateVariant.js'
+import { formatMoney, unwrapAppConfig } from '../../utils/formatMetric.js'
 import { readPath } from '../../utils/readPath.js'
 import { hasUnresolvedDeepTokens, resolveDeepTokens } from '../../utils/resolveFilterTokens.js'
 
@@ -246,6 +247,8 @@ export default {
 		cnTranslate: { default: () => (key) => key },
 		cnObjectContext: { default: null },
 		cnWorkspaceContext: { default: null },
+		/** The page's app config; its `currency` is the reporting currency a money value falls back to. */
+		cnAppConfig: { default: null },
 		/** Pre-bound action dispatcher of CnPageRenderer, for `action` / `headerAction`. */
 		cnDispatchAction: { default: null },
 	},
@@ -260,7 +263,7 @@ export default {
 		 *   A part may be `{ text }`, a constant; a `line` or `text` entry without `path` or `parts` shows its `text`.
 		 *   `resolve: { register, schema, labelField? }` on an entry or a part turns a value that is a reference (an id, or a list of ids) into the label of the referenced object (`labelField`, else `title`, then `name`): the case type or status of a task shows its name, not its uuid. The ids are fetched once per register and schema through the object store and shared by every facts widget on the page; the entry stays empty until its label is known, and when no label can be read. A resolved value works as a pill too: `map` is applied to the resolved label, and `variantMap` / `colorMap` look the tone up by the value of `resolve.toneField` on the referenced object when that is set (a status named by its `name`, coloured by its `state`), then by the resolved label, then by the stored value.
 		 * - `action` — an action drawn as a button under the facts; `headerAction` — one drawn in the card header (reported through the `header` event).
-		 *   `format` is `text` (default), `date` (board short date), `date-long` (always with the year) or `list` (an array joined by ", ", each item read at `itemPath`).
+		 *   `format` is `text` (default), `date` (board short date), `date-long` (always with the year), `list` (an array joined by ", ", each item read at `itemPath`) or `currency` (a money amount in the reader's language, "€ 1.234,50": the code in `currency`, else the record's `currencyField`, else the app's reporting currency, else EUR; `decimals` defaults to 2).
 		 *   `map` turns a raw value into a label (translated). `parts` (on a `line`) lists paths, or `{ path, label?, format? }`, joined by `separator` (default " · "); empty parts are dropped.
 		 * - `source` — `{ register, schema, id }` or `{ url }`; omitted = the current object.
 		 * - `link` — `{ label, route? | href? }` at the foot.
@@ -900,7 +903,7 @@ export default {
 		 */
 		valueOf(record, field) {
 			const raw = readPath(record, field.path)
-			return this.format(raw, field)
+			return this.format(raw, field, record)
 		},
 
 		/**
@@ -919,7 +922,7 @@ export default {
 					if (!spec.path && typeof spec.text === 'string') {
 						return this.tr(spec.text)
 					}
-					const value = this.format(readPath(record, spec.path), spec)
+					const value = this.format(readPath(record, spec.path), spec, record)
 					if (value === '') {
 						return ''
 					}
@@ -933,10 +936,12 @@ export default {
 		 * Format a raw value.
 		 *
 		 * @param {unknown} raw The value.
-		 * @param {object} spec `{ format?, map?, itemPath? }`.
+		 * @param {object} spec `{ format?, map?, itemPath?, currency?, currencyField?, decimals? }`.
+		 * @param {object|null} [record] The object shown, which `currencyField` reads.
 		 * @return {string} The text, '' when empty.
+		 * @spec openspec/changes/facts-currency-format/specs/facts-widget/spec.md#requirement-a-facts-entry-can-show-a-money-amount
 		 */
-		format(raw, spec) {
+		format(raw, spec, record = null) {
 			if (raw === null || raw === undefined || raw === '') {
 				return ''
 			}
@@ -961,6 +966,14 @@ export default {
 					? formatBoardDate(date, new Date(date.getFullYear() + 1, 0, 1))
 					: formatBoardDate(date)
 			}
+			if (format === 'currency') {
+				const money = formatMoney(raw, { currency: spec.currency, currencyField: spec.currencyField, decimals: spec.decimals }, record, unwrapAppConfig(this.cnAppConfig))
+				if (money !== '') {
+					return money
+				}
+				// Not a number: shown as written, never as "[object Object]".
+				return typeof raw === 'object' ? '' : String(raw)
+			}
 			if (typeof raw === 'object') {
 				const label = raw.title || raw.name || raw.label || raw.displayName
 				return typeof label === 'string' ? label : ''

package/src/components/CnFieldListWidget/CnFieldListWidget.vue

@@ -111,6 +111,14 @@
 				role="note"
 				:data-testid="`cn-field-list-band-${row.key}`">
 				<span class="cn-field-list-widget__band-text">{{ row.detail }}</span>
+				<NcButton
+					v-for="copy in row.copies"
+					:key="`copy-${copy.path}`"
+					variant="tertiary"
+					:data-testid="`cn-field-list-copy-${copy.path}-${row.key}`"
+					@click="copyValue(copy)">
+					{{ copy.label }}
+				</NcButton>
 				<NcButton
 					v-for="action in row.bandActions"
 					:key="action.id"
@@ -162,6 +170,16 @@
 				<p v-if="row.detail" class="cn-field-list-widget__detail">
 					{{ row.detail }}
 				</p>
+				<div v-if="row.detail && row.copies.length > 0" class="cn-field-list-widget__copies">
+					<NcButton
+						v-for="copy in row.copies"
+						:key="`copy-${copy.path}`"
+						variant="tertiary"
+						:data-testid="`cn-field-list-copy-${copy.path}-${row.key}`"
+						@click="copyValue(copy)">
+						{{ copy.label }}
+					</NcButton>
+				</div>
 			</li>
 		</ul>
 
@@ -211,6 +229,7 @@
 			</NcButton>
 		</form>
 
+		<span class="cn-field-list-widget__sr" aria-live="polite" data-testid="cn-field-list-copied">{{ copied }}</span>
 		<NcNoteCard v-if="notice" :type="noticeType" data-testid="cn-field-list-notice">
 			{{ notice }}
 		</NcNoteCard>
@@ -260,7 +279,7 @@ export default {
 		 *
 		 * - `field` (required) — the object field holding the array.
 		 * - `key` — the item field that identifies an entry (default: the item itself for strings).
-		 * - `row` — `{ title, titleFallback?, avatar?, meta?: [paths|{ path, map?, format? }], pill?: { path, map?, variantMap? }, aside?: { path, format?, prefix?, fallback? }, detail?: { template, when? } }`.
+		 * - `row` — `{ title, titleFallback?, avatar?, meta?: [paths|{ path, map?, format? }], pill?: { path, map?, variantMap? }, aside?: { path, format?, prefix?, fallback? }, detail?: { template, when?, copy?: [{ path, label }] } }`. `detail.copy` puts a copy button beside the detail line for each named value of the row (an empty value gets none), such as a DNS record's name and value.
 		 * - `add` — `{ label?, fields: [{ key, label, type?: 'text'|'select', options?, required?, pattern?, patternMessage? }], unique?, defaults? }`.
 		 * - `remove` — `{ label? }`; omitted = no remove.
 		 * - `rowActions` — `[{ id, label, when?, placement?: 'band', request: { method?, url, payload? } }]`; tokens `@object.<field>`, `@objectId`, `@row.<field>`.
@@ -316,6 +335,8 @@ export default {
 			busy: '',
 			notice: '',
 			noticeType: 'error',
+			// What the last copy button put on the clipboard, said to a screen reader.
+			copied: '',
 		}
 	},
 
@@ -358,6 +379,7 @@ export default {
 					pill: this.pillOf(entry, spec.pill),
 					aside: spec.aside ? this.asideOf(entry, spec.aside) : '',
 					detail: spec.detail && this.matches(entry, spec.detail.when) ? this.fill(spec.detail.template, entry) : '',
+					copies: spec.detail && this.matches(entry, spec.detail.when) ? this.copiesOf(entry, spec.detail.copy) : [],
 					actions: this.actionsFor(entry),
 					cells: this.isTable ? this.cellsOf(entry) : [],
 				}
@@ -818,6 +840,40 @@ export default {
 		 * @return {Promise<void>}
 		 * @spec openspec/changes/abstract-field-list/specs/field-list/spec.md#requirement-a-field-list-row-can-run-a-configured-request
 		 */
+		/**
+		 * The copy buttons of a row's detail line: one per named value that is not empty.
+		 *
+		 * @param {object} entry The entry.
+		 * @param {Array<{path: string, label?: string}>|undefined} declared The `detail.copy` list.
+		 * @return {Array<{path: string, label: string, value: string}>}
+		 */
+		copiesOf(entry, declared) {
+			return (Array.isArray(declared) ? declared : [])
+				.filter((copy) => copy && typeof copy.path === 'string' && copy.path !== '')
+				.map((copy) => ({
+					path: copy.path,
+					label: this.tr(copy.label || 'Copy'),
+					value: String(readPath(entry, copy.path) ?? ''),
+				}))
+				.filter((copy) => copy.value !== '')
+		},
+
+		/**
+		 * Put one value on the clipboard and say so; a browser that refuses says that instead.
+		 *
+		 * @param {{label: string, value: string}} copy The copy button.
+		 * @return {Promise<void>}
+		 */
+		async copyValue(copy) {
+			this.copied = ''
+			try {
+				await navigator.clipboard.writeText(copy.value)
+				this.copied = `${this.tr('Copied')}: ${copy.label}`
+			} catch {
+				this.notify(this.tr('Copying did not work. Select the text and copy it yourself.'))
+			}
+		},
+
 		async runAction(action, row) {
 			this.busy = row.key
 			this.notice = ''
@@ -912,6 +968,12 @@ export default {
 
 .cn-field-list-widget__meta,
 .cn-field-list-widget__aside,
+.cn-field-list-widget__copies {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+}
+
 .cn-field-list-widget__detail {
 	font-size: 13px;
 }

package/src/components/CnGaugeWidget/CnGaugeWidget.vue

@@ -280,7 +280,7 @@ export default {
 		 * @return {string} The formatted string.
 		 */
 		formatNumber(value) {
-			return formatMetricValue(value, this.resolvedFormat, this.configCtx)
+			return formatMetricValue(value, this.resolvedFormat, this.configCtx, null, this.effectiveTranslate)
 		},
 
 		/**