@conduction/nextcloud-vue 2.82.0 → 2.84.0

package/src/components/CnSwitchRowsWidget/CnSwitchRowsWidget.vue

@@ -32,6 +32,7 @@ import { NcCheckboxRadioSwitch, NcNoteCard } from '@nextcloud/vue'
 import { objectUrlOf, writeFields } from '../../utils/objectWrite.js'
 import { readPath } from '../../utils/readPath.js'
 import { serverErrorMessage } from '../../utils/serverErrorMessage.js'
+import { switchIsOn, switchStoredValue } from '../../utils/switchValues.js'
 
 /**
  * CnSwitchRowsWidget — the `switch-rows` widget: a card of switches, each with
@@ -54,7 +55,8 @@ export default {
 		/**
 		 * The widget configuration.
 		 *
-		 * - `rows` (required) — `[{ key, label, hint?, invert? }]`; `key` is a boolean field, a top-level name or a dot-path. `invert` shows the switch on when the field is false (a stored `disabled` read as "enabled").
+		 * - `rows` (required) — `[{ key, label, hint?, invert?, values? }]`; `key` is a boolean field, a top-level name or a dot-path. `invert` shows the switch on when the field is false (a stored `disabled` read as "enabled"). `values: { on, off }` reads and writes those values instead of true/false (an app config flag stored as `"1"`/`"0"`).
+		 * - `values` — `{ on, off }` for every row that declares none.
 		 * - `save` — `{ url, method?, payload? }`, write through an app endpoint (tokens `{value}`, `{field}`, `{changes}`, `{object.<path>}`).
 		 * - `readOnly`.
 		 *
@@ -137,11 +139,22 @@ export default {
 			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
 		},
 
+		/**
+		 * A row's value map: its own `values`, else the widget's.
+		 *
+		 * @spec openspec/changes/screens-switch-value-map/specs/switch-rows/spec.md#requirement-a-switch-can-read-and-write-a-value-map
+		 * @param {object} row The row.
+		 * @return {object|undefined} The declared `values`.
+		 */
+		valuesOf(row) {
+			return row.values !== undefined ? row.values : this.content.values
+		},
+
 		/** Read every switch off the object. */
 		adopt() {
 			const values = {}
 			for (const row of this.rows) {
-				const stored = readPath(this.objectData || {}, row.key) === true
+				const stored = switchIsOn(readPath(this.objectData || {}, row.key), this.valuesOf(row))
 				values[row.key] = row.invert ? !stored : stored
 			}
 			this.saved = values
@@ -165,10 +178,11 @@ export default {
 			this.busy = row.key
 			this.values = { ...this.values, [row.key]: on }
 			const stored = row.invert ? !on : on
+			const values = this.valuesOf(row)
 			try {
-				const data = await writeFields(this.objectUrl, { [row.key]: stored }, { save: this.content.save, object: this.objectData })
+				const data = await writeFields(this.objectUrl, { [row.key]: switchStoredValue(stored, values) }, { save: this.content.save, object: this.objectData })
 				const answered = readPath(data, row.key)
-				const written = answered !== undefined ? answered === true : stored
+				const written = answered !== undefined ? switchIsOn(answered, values) : stored
 				const shown = row.invert ? !written : written
 				this.saved = { ...this.saved, [row.key]: shown }
 				this.values = { ...this.values, [row.key]: shown }

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)) {

package/src/components/CnWalkthrough/CnWalkthrough.vue

@@ -683,11 +683,27 @@ export default {
 		 * deferred tour) go through here — so a centered step cannot be
 		 * swallowed by either.
 		 *
+		 * A tour that declares `startOn` opens only on one of those route
+		 * names, whatever its first step looks like.
+		 *
 		 * @param {object} tour The tour definition.
 		 * @param {string} [routeName] The current route name.
 		 * @return {boolean} True when the tour may open on this route.
+		 * @spec openspec/changes/a-tour-starts-on-the-pages-it-names/specs/walkthrough/spec.md
 		 */
 		routeMatchesTour(tour, routeName) {
+			// A tour that names where it starts (`startOn`) opens only there.
+			// It wins over the centered-step rule below: a welcome card floats
+			// in the middle of the screen, but a user who opens a case from a
+			// mail link lands on that case, and the card then blocks the page
+			// they came for. Measured 13 October on dossiq: a staff user's first
+			// visit was a deep link to a Woo request, and "Welcome to Dossiq"
+			// opened over it. The tour waits in `_pendingAutoTour` and opens when
+			// the user reaches a named route.
+			const startOn = Array.isArray(tour && tour.startOn) ? tour.startOn.map(String) : []
+			if (startOn.length > 0) {
+				return !!routeName && startOn.includes(String(routeName))
+			}
 			const page = this.firstStepPage(tour)
 			if (!page) {
 				return true

package/src/css/form-field.css

@@ -183,3 +183,17 @@
 .cn-look-board .cn-form-page__footer .cn-form-page__primary {
 	margin-inline-start: auto;
 }
+
+/* A Nextcloud text area or text field with its label inside the field hides
+   its placeholder until the field takes focus, so the label and the
+   placeholder are never drawn over each other. A theme that forces every
+   placeholder visible (thematiq's nldesign system sets
+   `::placeholder { opacity: 1 !important }`) drew both: the dossiq DqTaak
+   notes field read "Een notitie toevoegen" over "Wat heb je gevonden, wie heb
+   je gebeld?". Under the board look the placeholder stays hidden at rest, as
+   Nextcloud intends; a field with its label outside keeps its placeholder.
+   @spec openspec/changes/board-field-label-over-placeholder/specs/form-field-board-look/spec.md#requirement-a-field-label-and-its-placeholder-are-never-drawn-over-each-other */
+.cn-look-board .textarea__input:not(:focus, .textarea__input--label-outside)::placeholder,
+.cn-look-board .input-field:not(.input-field--label-outside) .input-field__input:not(:focus)::placeholder {
+	opacity: 0 !important;
+}

package/src/css/form-widget.css

@@ -37,6 +37,7 @@
 }
 
 .cn-form-widget__textarea {
+	box-sizing: border-box;
 	width: 100%;
 	min-height: 80px;
 	padding: 8px;
@@ -58,3 +59,13 @@
 	color: var(--color-error);
 	margin: 0;
 }
+
+/* A select takes its field's width, however narrow the card. NcSelect is at
+   least 260px wide on its own, so in pipelinq's 234px "Nieuw contactmoment"
+   card at 1100 wide the channel and client selects ran 40px past the card's
+   edge. The client picker (CnResourceSelect) is an NcSelect too.
+   @spec openspec/changes/interaction-form-fits-and-reads-dutch/specs/interaction-form-widget/spec.md#requirement-the-interaction-form-fits-its-card-and-reads-in-the-readers-language */
+.cn-form-widget .v-select.select {
+	min-width: 0;
+	width: 100%;
+}

package/src/css/index-page.css

@@ -10,6 +10,17 @@
 	padding: calc(5 * var(--default-grid-baseline));
 }
 
+/* A group heading in the header's Actions menu (`{ heading }` in items), as
+   the board's "Ga naar" and "Selectie": 12px bold capitals, muted. The menu
+   is a popover outside the page, so the class is not under the look class. */
+.cn-index-header-menu__heading {
+	font-size: 12px;
+	font-weight: 700;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+	color: var(--color-text-maxcontrast);
+}
+
 /* The board's header buttons (`headerButtons`) at the end of the title row,
    centred on the title and its count line. They wrap under the title on a
    narrow page. */

package/src/css/index.css

@@ -48,6 +48,7 @@
 @import './dashboard.css';
 @import './detail-page.css';
 @import './look-board-detail.css';
+@import './look-board-reports.css';
 @import './reference-preview.css';
 @import './CnSchemaFormDialog.css';
 @import './timeline-stages.css';

package/src/css/look-board-reports.css

@@ -0,0 +1,175 @@
+/*
+ * The reports page under the board look (screens-reports-page-board-look,
+ * board DcRapportages): a 28px title over a muted lead, one section per
+ * category headed at 18px, and two-up cards with an icon tile. Scoped under
+ * `.cn-look-board` with the page guard, so an app without the look renders as
+ * before.
+ */
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) {
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	gap: var(--cn-board-section-gap);
+	padding: var(--cn-board-content-padding);
+	max-width: var(--cn-board-content-max-width);
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__header {
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+	padding: 4px 0 8px;
+}
+
+/* The 56px inset clears the navigation toggle only while the navigation is
+   closed, as on the other board pages. */
+.cn-look-board:has(.app-navigation--closed) .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__header {
+	padding-inline-start: 56px;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__title {
+	margin: 0;
+	font-size: 28px;
+	font-weight: 700;
+	line-height: 1.2;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__description {
+	margin: 0;
+	font-size: 14px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__section {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	/* A host's own `section` rule (a width cap, a margin) does not reach it. */
+	max-width: none;
+	margin: 0;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__section-title {
+	margin: 0;
+	font-size: 18px;
+	font-weight: 700;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__grid {
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	gap: 14px;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card {
+	box-sizing: border-box;
+	flex-direction: row;
+	align-items: flex-start;
+	gap: 14px;
+	padding: 18px 20px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--cn-board-card-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card:hover,
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card:focus-visible {
+	background: var(--color-background-hover);
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card-icon {
+	flex: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 44px;
+	height: 44px;
+	border-radius: 10px;
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card-text {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card-title {
+	font-size: 17px;
+	font-weight: 700;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card-description {
+	font-size: 14px;
+	line-height: 1.5;
+	color: var(--color-text-maxcontrast);
+}
+
+/* The widgets under the cards sit in the page's own padding: the dashboard
+   inside draws no second frame. */
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__widgets {
+	margin-top: 0;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-dashboard-page {
+	padding: 0;
+}
+
+/* The widget area draws no panel of its own (board DcRapportages: the
+   highlighted report's card sits straight on the page ground). A theme's
+   catch-all for anything named like a widget (nldesign's element overrides:
+   `[class*="widget"]:not([class*="widget__"]):not(#header *)`, an id
+   specificity no class rule outranks) painted `__widgets` white, hence the
+   `!important`. */
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__widgets {
+	background: transparent !important;
+}
+
+/* The grid insets every card by its 12px margin (CnDashboardPage's default
+   `gridMargin`); the page padding already places the area, so the card's
+   edges line up with the report cards above it. */
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__widgets .cn-dashboard-grid {
+	width: calc(100% + 24px);
+	margin: -12px;
+}
+
+/* A report card is a link, but its title and description read as text, as on
+   the board: no underline, whatever a theme does to links. */
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card,
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card * {
+	text-decoration: none !important;
+}
+
+/* The header buttons beside the title (screens-reports-header-buttons, board
+   DcRapportages "Downloaden"): the board's 40px button with a grey border on
+   the main background, the primary one in the primary fill, as on the index
+   header. `!important` holds them under a theme that restyles every button
+   (nldesign). The buildiq square keeps its own rule. */
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__header-buttons > .button-vue--secondary {
+	height: var(--cn-board-control-height) !important;
+	min-height: var(--cn-board-control-height) !important;
+	padding: 0 14px !important;
+	border: 1px solid var(--color-border-dark) !important;
+	border-radius: var(--cn-board-control-radius) !important;
+	background: var(--color-main-background) !important;
+	color: var(--color-main-text) !important;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__header-buttons > .button-vue--secondary:hover {
+	background: var(--color-background-hover) !important;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__header-buttons > .button-vue--primary {
+	height: var(--cn-board-control-height) !important;
+	min-height: var(--cn-board-control-height) !important;
+	padding: 0 16px !important;
+	border: 0 !important;
+	border-radius: var(--cn-board-control-radius) !important;
+	background: var(--color-primary-element) !important;
+	color: var(--color-primary-element-text) !important;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__header-buttons > .button-vue--primary:hover {
+	background: var(--color-primary-element-hover) !important;
+}

package/src/css/look-board.css

@@ -436,9 +436,20 @@
 	align-items: start;
 }
 
-/* The card: a section of the shell, or a CnSettingsCard of the page. */
+/* An app component that wraps its sections in one element (decidiq's
+   Settings.vue) takes no box of its own: its sections are grid items and
+   cards, as if the shell held them directly. Only an element whose own
+   children are sections; anything else keeps spanning the grid. */
+.cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section),
+.cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) {
+	display: contents;
+}
+
+/* The card: a section of the shell (also one inside a wrapping element), or a CnSettingsCard of the page. */
 .cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > .settings-section,
 .cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > .settings-section,
+.cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section,
+.cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section,
 .cn-look-board .cn-settings-page__sections:not(.cn-look-nextcloud *) > .cn-settings-card {
 	box-sizing: border-box;
 	display: flex;
@@ -465,7 +476,12 @@
 	display: none;
 }
 
+/* NcSettingsSection draws its name `display: inline-flex; justify-content:
+   center`; in the card's flex column the name spans the card, so the title
+   sat centred. The board's card titles start at the left edge. */
 .cn-look-board .settings-section:not(.cn-look-nextcloud *) .settings-section__name {
+	justify-content: flex-start;
+	text-align: start;
 	margin: 0;
 	font-size: 19px;
 	font-weight: 700;
@@ -600,6 +616,18 @@
 	font-weight: 600;
 }
 
+/* ---- Dashboard card titles --------------------------------------------- */
+/* A card's title on a dashboard (and on the widgets under a reports page) is
+   the board's card h2: 17px weight 700 (boards PqMijnWerk, DcRapportages and
+   the app dashboards; `--cn-board-heading-size`, as on a detail page's cards).
+   The wrapper's own 14px weight 600 stays for the Nextcloud look, and the
+   native-dashboard chrome keeps its 20px. */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--nc-dashboard) .cn-widget-wrapper__title {
+	font-size: var(--cn-board-heading-size, 17px);
+	font-weight: 700;
+	line-height: 1.3;
+}
+
 /* ---- Record list on a dashboard card (PtDashboard) ---------------------- */
 /* The dashboard's card body is flush, so the rows carry their own inset: the
    board's card pads 24px at the sides and each row 14px, a soft hairline
@@ -667,6 +695,21 @@
 	margin-inline-start: auto;
 }
 
+/* The title and meta take the room the pill and the date leave, and a long
+   title wraps inside it: the pill and the date stay on the title line, as the
+   board draws them. They drop under the text only when the card is too narrow
+   to hold 240px of text beside them (PqMijnWerk). */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__main {
+	flex: 1 1 240px;
+}
+
+/* ---- Saved views on a dashboard card (PqMijnWerk) ------------------------ */
+/* The card body is flush, so the list and its empty line carry the card's
+   inset themselves, the same 24px at the sides as a record list. */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-saved-views-widget {
+	padding: 4px 24px 20px;
+}
+
 /* The board draws no chevron after the pill and date. */
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__chevron {
 	display: none;

package/src/dialogs/CnTransitionInputDialog.vue

@@ -14,6 +14,7 @@
 		@closing="$emit('close')">
 		<div
 			class="cn-transition-input"
+			:aria-busy="busy ? 'true' : null"
 			data-testid="cn-modal"
 			data-testid-modal="cn-transition-input-dialog">
 			<!-- A refusal keeps this dialog open with what was typed still in
@@ -29,8 +30,18 @@
 				class="cn-transition-input__field"
 				:class="{ 'cn-transition-input__field--refused': isRefused(field.key) }"
 				:data-testid="`cn-transition-input-${field.key}`">
+				<!-- An input that declares its choices is picked from them. -->
+				<NcSelect v-if="field.widget === 'select'"
+					:modelValue="selectedOption(field)"
+					:options="field.options"
+					label="label"
+					:inputLabel="requiredLabel(field)"
+					:clearable="!field.required"
+					:data-testid="`cn-transition-input-select-${field.key}`"
+					@update:modelValue="setValue(field.key, $event && $event.value !== undefined ? $event.value : '')" />
+
 				<!-- An input that points at another record is picked, never typed. -->
-				<div v-if="field.widget === 'reference'" class="cn-transition-input__reference">
+				<div v-else-if="field.widget === 'reference'" class="cn-transition-input__reference">
 					<label class="cn-transition-input__label">{{ requiredLabel(field) }}</label>
 					<CnResourceSelect
 						:register="field.referenceRegister"
@@ -128,11 +139,18 @@
 				@click="$emit('close')">
 				{{ t('nextcloud-vue', 'Cancel') }}
 			</NcButton>
+			<!-- Busy while the parent's POST runs: a transition can take
+			     seconds, and a confirm button that only greys out reads as one
+			     that did nothing. -->
 			<NcButton
 				variant="primary"
 				:disabled="!canConfirm"
+				:aria-busy="busy ? 'true' : null"
 				data-testid="cn-transition-input-confirm"
 				@click="onConfirm">
+				<template v-if="busy" #icon>
+					<NcLoadingIcon :size="20" data-testid="cn-transition-input-busy" />
+				</template>
 				{{ confirmLabel }}
 			</NcButton>
 		</template>
@@ -141,7 +159,7 @@
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
-import { NcButton, NcCheckboxRadioSwitch, NcTextArea, NcTextField } from '@nextcloud/vue'
+import { NcButton, NcCheckboxRadioSwitch, NcLoadingIcon, NcSelect, NcTextArea, NcTextField } from '@nextcloud/vue'
 import CnDialog from '../components/CnDialog/CnDialog.vue'
 import CnResourceSelect from '../components/CnResourceSelect/CnResourceSelect.vue'
 import { dialogBoardMixin } from '../mixins/dialogBoard.js'
@@ -164,7 +182,13 @@ import { fieldsFromSchema } from '../utils/schema.js'
  * from the property `title`, booleans render as a switch, numbers as a number
  * field, and long text (`maxLength > 255` or a `textarea`/`markdown` format)
  * as a textarea. Anything else — including a field the schema does not
- * declare — falls back to a plain labelled text input. Deliberately minimal:
+ * declare — falls back to a plain labelled text input.
+ *
+ * An input may also say how it is asked for, which matters when the choices
+ * depend on the record rather than on its schema: `label` names the field,
+ * and `options: [{ value, label }]` turns it into a picker that shows each
+ * `label` and sends the chosen `value`. An input that declares neither is
+ * rendered from the schema as before. Deliberately minimal:
  * text, textarea, number and checkbox cover transition inputs; this is not a
  * form engine (use `CnFormDialog` for full object forms).
  *
@@ -186,9 +210,11 @@ export default {
 		CnResourceSelect,
 		CnDialog,
 		NcButton,
+		NcLoadingIcon,
 		NcTextField,
 		NcTextArea,
 		NcCheckboxRadioSwitch,
+		NcSelect,
 	},
 
 	mixins: [dialogBoardMixin],
@@ -199,7 +225,11 @@ export default {
 		 * `x-openregister-lifecycle.transitions.<action>.inputs` (server-derived
 		 * or config-declared); `label` doubles as dialog title + confirm label.
 		 *
-		 * @type {{action?: string, label?: string, inputs?: Array<{field: string, required?: boolean}>}}
+		 * An input may carry a `label` for its field and `options` to pick
+		 * from, each `{ value, label }`; the picker shows the label and sends
+		 * the value.
+		 *
+		 * @type {{action?: string, label?: string, inputs?: Array<{field: string, required?: boolean, label?: string, options?: Array<{value: string, label?: string}>}>}}
 		 */
 		transition: {
 			type: Object,
@@ -296,6 +326,8 @@ export default {
 					required: input.required === true,
 					picker: input.picker && typeof input.picker === 'object' ? input.picker : null,
 					fields: Array.isArray(input.fields) ? input.fields.filter((f) => typeof f === 'string') : null,
+					label: typeof input.label === 'string' && input.label.trim() !== '' ? input.label.trim() : null,
+					options: this.declaredOptions(input.options),
 				}))
 		},
 
@@ -305,26 +337,40 @@ export default {
 		 * widget from the type/format); the widget is then clamped to the minimal
 		 * set this dialog renders (text / textarea / number / checkbox). Fields
 		 * the schema does not declare fall back to a plain text input.
+		 *
+		 * An input that declares `options` is a picker whatever the schema
+		 * says, because its choices are the ones this transition offers on
+		 * this record. A declared `label` names the field over the schema's.
 		 */
 		fields() {
 			const keys = this.inputs.map((input) => input.field)
 			const resolved = fieldsFromSchema(this.schema, { include: keys, includeReadOnly: true })
 			return this.inputs.map((input) => {
 				const field = resolved.find((f) => f.key === input.field)
+				if (input.options) {
+					return {
+						key: input.field,
+						label: input.label || (field && field.label) || input.field,
+						description: (field && field.description) || '',
+						widget: 'select',
+						options: input.options,
+						required: input.required,
+					}
+				}
 				const prop = (this.schema && this.schema.properties && this.schema.properties[input.field]) || null
 				if (prop && prop.type === 'object' && prop.properties && typeof prop.properties === 'object') {
 					return this.objectField(input, prop)
 				}
 				if (!field) {
-					return { key: input.field, label: input.field, description: '', widget: 'text', required: input.required }
+					return { key: input.field, label: input.label || input.field, description: '', widget: 'text', required: input.required }
 				}
 				if (field.reference && field.reference.multiple !== true) {
 					const register = field.reference.register || this.register
 					if (register !== '') {
-						return { ...field, widget: 'reference', referenceRegister: register, picker: input.picker, required: input.required }
+						return { ...field, label: input.label || field.label, widget: 'reference', referenceRegister: register, picker: input.picker, required: input.required }
 					}
 				}
-				return { ...field, widget: this.clampWidget(field.widget), required: input.required }
+				return { ...field, label: input.label || field.label, widget: this.clampWidget(field.widget), required: input.required }
 			})
 		},
 
@@ -438,6 +484,40 @@ export default {
 			}
 		},
 
+		/**
+		 * The choices an input declares, as `[{ value, label }]`, or null when
+		 * it declares none. An option without a value is dropped, because it
+		 * cannot be sent; one without a label shows its value.
+		 *
+		 * @param {unknown} options The input's declared `options`.
+		 * @return {Array<{value: string, label: string}>|null}
+		 */
+		declaredOptions(options) {
+			if (!Array.isArray(options)) {
+				return null
+			}
+			const usable = options
+				.filter((option) => option && typeof option === 'object'
+					&& (typeof option.value === 'string' || typeof option.value === 'number')
+					&& String(option.value).trim() !== '')
+				.map((option) => ({
+					value: String(option.value),
+					label: typeof option.label === 'string' && option.label.trim() !== '' ? option.label.trim() : String(option.value),
+				}))
+			return usable.length > 0 ? usable : null
+		},
+
+		/**
+		 * The option a picker field currently holds, or null.
+		 *
+		 * @param {object} field The select field descriptor.
+		 * @return {{value: string, label: string}|null}
+		 */
+		selectedOption(field) {
+			const value = this.values[field.key]
+			return field.options.find((option) => option.value === String(value ?? '')) || null
+		},
+
 		/**
 		 * Ids a reference picker must not offer: the current record, when the
 		 * input's `picker.excludeSelf` says so.