@conduction/nextcloud-vue 2.71.0 → 2.73.0

package/src/components/CnGraphCanvas/CnFlowNode.vue

@@ -224,6 +224,19 @@ export default {
 		 *   edges, its undo stack, its persistence — so nothing is removed here.
 		 */
 		'remove',
+
+		/**
+		 * @event activate Enter or Space on the focused node: open this step.
+		 *   Carries the node id. The pointer equivalent is a double-click.
+		 */
+		'activate',
+
+		/**
+		 * @event menu Shift+F10 or the menu key on the focused node: show this
+		 *   step's actions. Carries `{ id, clientX, clientY }`, a point at the
+		 *   node, so a host positions the menu as it would for a click.
+		 */
+		'menu',
 	],
 
 	setup() {
@@ -478,7 +491,8 @@ export default {
 		 * The keyboard contract.
 		 *
 		 * Arrow keys move; `c` arms an exit and, on a second node, completes the
-		 * connection; `Escape` cancels. Repeated `c` on the SAME node steps
+		 * connection; `Escape` cancels. Enter or Space opens the step, Shift+F10
+		 * or the menu key opens its actions. Repeated `c` on the SAME node steps
 		 * through its exits rather than re-arming the first — the behaviour a
 		 * mouse gets for free by pointing.
 		 *
@@ -527,6 +541,27 @@ export default {
 				return
 			}
 
+			// Opening the step, and its menu, from the keyboard. Only for a key
+			// pressed ON the node: a port inside it is a control of its own.
+			if (event.target === event.currentTarget) {
+				if (event.key === 'Enter' || event.key === ' ') {
+					event.preventDefault()
+					this.$emit('activate', this.id)
+					return
+				}
+
+				if ((event.key === 'F10' && event.shiftKey === true) || event.key === 'ContextMenu') {
+					event.preventDefault()
+					const rect = event.currentTarget.getBoundingClientRect()
+					this.$emit('menu', {
+						id: this.id,
+						clientX: rect.left + rect.width / 2,
+						clientY: rect.bottom,
+					})
+					return
+				}
+			}
+
 			// Delete and Backspace both, because which one removes a thing is a
 			// platform habit rather than a preference: Backspace is the delete
 			// key on a Mac keyboard, and a user who learned one does not think

package/src/components/CnGraphCanvas/CnGraphCanvas.vue

@@ -37,7 +37,9 @@
 					v-bind="nodeProps"
 					:deletable="!readOnly"
 					@connect="onConnect"
-					@remove="onNodeRemove">
+					@remove="onNodeRemove"
+					@activate="onNodeActivate"
+					@menu="onNodeMenu">
 					<template #default="slotProps">
 						<!-- @slot node The body of a step, rendered inside the
 						     focusable node wrapper. Receives `{ node }` with the
@@ -266,6 +268,8 @@ export default {
 		'canvas-drop',
 
 		'node-remove',
+		'node-activate',
+		'node-menu',
 
 		/**
 		 * The canvas zoom changed, by any route — a control here, the host's own
@@ -415,6 +419,41 @@ export default {
 			return port === 'in' ? null : port
 		},
 
+		/**
+		 * Forward Enter or Space on a node: the keyboard double-click.
+		 *
+		 * @param {string} id The node id.
+		 * @return {void}
+		 */
+		onNodeActivate(id) {
+			if (this.readOnly === true) {
+				return
+			}
+
+			/**
+			 * @event node-activate Enter or Space on a node. Payload is the id.
+			 */
+			this.$emit('node-activate', id)
+		},
+
+		/**
+		 * Forward Shift+F10 or the menu key on a node: the keyboard click menu.
+		 *
+		 * @param {object} request `{ id, clientX, clientY }`, a point at the node.
+		 * @return {void}
+		 */
+		onNodeMenu(request) {
+			if (this.readOnly === true) {
+				return
+			}
+
+			/**
+			 * @event node-menu Shift+F10 or the menu key on a node. Payload is
+			 *   `{ id, clientX, clientY }`.
+			 */
+			this.$emit('node-menu', request)
+		},
+
 		/**
 		 * Forward a node click.
 		 *

package/src/components/index.js

@@ -191,6 +191,7 @@ export { CnDeltaWidgetForm } from './CnDeltaWidgetForm/index.js'
 export { CnGaugeWidget } from './CnGaugeWidget/index.js'
 export { CnGaugeWidgetForm } from './CnGaugeWidgetForm/index.js'
 export { CnFlowRunsWidget } from './CnFlowRunsWidget/index.js'
+export { CnFlowStepOutcomes } from './CnFlowStepOutcomes/index.js'
 export { CnFlowRunsWidgetForm } from './CnFlowRunsWidgetForm/index.js'
 export { CnTasksWidget } from './CnTasksWidget/index.js'
 export { CnTasksWidgetForm } from './CnTasksWidgetForm/index.js'

package/src/dialogs/CnFlowNodeEditModal.vue

@@ -40,16 +40,27 @@
 					:placeholder="t('nextcloud-vue', 'GET')"
 					@update:modelValue="setKey(key, $event)" />
 
-				<!-- A `select` field with `optionsFrom` renders as a picker fed
-				     by the URL the OWNING APP declared — never a bare uuid
-				     text box. -->
-				<NcSelect v-else-if="widgetFor(key) === 'select'"
-					:modelValue="selectedOption(key)"
-					:options="selectOptions[key] || []"
-					:inputLabel="labelFor(key)"
-					:loading="selectLoading[key] === true"
-					:placeholder="t('nextcloud-vue', 'Pick one…')"
-					@update:modelValue="setKey(key, $event ? $event.id : '')" />
+				<!-- A `select` field renders as a picker, never a bare text box.
+				     Its choices come from the URL the OWNING APP declared
+				     (`optionsFrom`) or from the form itself (`options`), for a
+				     short fixed vocabulary with no endpoint of its own. -->
+				<template v-else-if="widgetFor(key) === 'select'">
+					<NcSelect :modelValue="selectedOption(key)"
+						class="cn-flow-node-edit__select"
+						:options="selectOptions[key] || []"
+						:inputLabel="labelFor(key)"
+						:loading="selectLoading[key] === true"
+						:placeholder="t('nextcloud-vue', 'Pick one…')"
+						@update:modelValue="setKey(key, $event ? $event.id : '')" />
+					<!-- NcSelect has no helper text of its own, so the help
+					     follows the control, the next thing a screen reader
+					     reads after it. -->
+					<p v-if="hintFor(key)"
+						class="cn-flow-node-edit__field-help"
+						:data-testid="`flow-node-help-${key}`">
+						{{ hintFor(key) }}
+					</p>
+				</template>
 
 				<NcTextArea v-else-if="widgetFor(key) === 'textarea'"
 					:modelValue="String(draft.config[key] ?? '')"
@@ -170,6 +181,7 @@ import {
 } from '@nextcloud/vue'
 import CnCronField from '../components/CnCronField/CnCronField.vue'
 import { useFlowStore } from '../composables/useFlowStore.js'
+import { hasStaticOptions, normaliseSelectOptions } from '../utils/selectOptions.js'
 
 /** The verbs an HTTP-shaped `method` option can take. */
 /**
@@ -287,7 +299,7 @@ export default {
 
 		/**
 		 * The node's per-field declarations from the catalogue's `configForm`
-		 * ({key, label, type, help, required, optionsFrom}), keyed by config
+		 * ({key, label, type, help, required, optionsFrom, options}), keyed by config
 		 * key. `configKeys` is the degraded form. Either way the node's OWNER
 		 * declares the vocabulary — this dialog never invents fields.
 		 *
@@ -398,7 +410,9 @@ export default {
 	created() {
 		// Select fields need their options; everything else is local.
 		for (const [key, spec] of Object.entries(this.fieldSpecs)) {
-			if (spec?.type === 'select' && spec?.optionsFrom) {
+			if (hasStaticOptions(spec)) {
+				this.selectOptions = { ...this.selectOptions, [key]: normaliseSelectOptions(spec.options) }
+			} else if (spec?.type === 'select' && spec?.optionsFrom) {
 				this.loadSelectOptions(key, spec)
 			}
 		}
@@ -634,7 +648,7 @@ export default {
 		 */
 		widgetFor(key) {
 			const spec = this.fieldSpecs[key]
-			if (spec?.type === 'select' && spec?.optionsFrom) {
+			if (spec?.type === 'select' && (spec?.optionsFrom || hasStaticOptions(spec))) {
 				return 'select'
 			}
 			if (spec?.type === 'boolean') {
@@ -730,13 +744,7 @@ export default {
 					? generateUrl(url)
 					: url)
 				const rows = Array.isArray(response.data) ? response.data : (response.data?.results || [])
-				const options = rows.map((row) => {
-					const id = row.id ?? row.value ?? row['@self']?.uuid ?? row.uuid
-					return {
-						id,
-						label: row.label || row.name || row.title || String(id),
-					}
-				}).filter((o) => o.id !== undefined && o.id !== null && o.id !== '')
+				const options = normaliseSelectOptions(rows)
 				this.selectOptions = { ...this.selectOptions, [key]: options }
 			} catch (error) {
 				// A picker that could not load degrades to showing the stored
@@ -930,6 +938,19 @@ export default {
 	color: var(--color-text-maxcontrast);
 }
 
+/* Full width, like the text fields around it: at its natural width the
+   picker cut every option label in half. */
+.cn-flow-node-edit__select {
+	width: 100%;
+}
+
+.cn-flow-node-edit__field-help {
+	margin: 4px 0 0;
+	padding-inline-start: 8px;
+	font-size: 0.85em;
+	color: var(--color-text-maxcontrast);
+}
+
 .cn-flow-node-edit__advanced summary {
 	cursor: pointer;
 	color: var(--color-text-maxcontrast);

package/src/dialogs/CnRunNodeDialog.vue

@@ -88,6 +88,7 @@
 import { translate as t } from '@nextcloud/l10n'
 import { NcButton, NcCheckboxRadioSwitch, NcDialog, NcLoadingIcon, NcNoteCard, NcSelect, NcTextArea, NcTextField } from '@nextcloud/vue'
 import { prefixUrl } from '../utils/headers.js'
+import { hasStaticOptions, normaliseSelectOptions } from '../utils/selectOptions.js'
 
 /**
  * The dialog `run-node` opens to collect a directly-invoked flow node's own
@@ -128,7 +129,9 @@ export default {
 		title: { type: String, default: '' },
 		/**
 		 * The node's declared config form — `IFlowNodeConfigForm::configForm()`'s
-		 * shape, unchanged: `[{key, label, type, help?, required?, optionsFrom?}]`.
+		 * shape, unchanged: `[{key, label, type, help?, required?, optionsFrom?, options?}]`.
+		 * A `select` takes its choices from `optionsFrom` (a url) or `options`
+		 * (strings, or `{value, label}` pairs declared in the form itself).
 		 *
 		 * @type {Array<object>}
 		 */
@@ -177,7 +180,9 @@ export default {
 				}
 				this.values = seed
 				for (const field of (fields || [])) {
-					if (field.type === 'select' && field.optionsFrom) {
+					if (hasStaticOptions(field)) {
+						this.options = { ...this.options, [field.key]: normaliseSelectOptions(field.options, (s) => this.tr(s)) }
+					} else if (field.type === 'select' && field.optionsFrom) {
 						this.loadOptions(field)
 					}
 				}
@@ -274,10 +279,7 @@ export default {
 				const url = prefixUrl(raw)
 				const response = await axios.get(url)
 				const rows = Array.isArray(response.data) ? response.data : (response.data?.results || [])
-				const opts = rows.map((row) => {
-					const id = row.id ?? row.value ?? row['@self']?.uuid ?? row.uuid
-					return { id, label: row.label || row.name || row.title || String(id) }
-				}).filter((o) => o.id !== undefined && o.id !== null && o.id !== '')
+				const opts = normaliseSelectOptions(rows)
 				this.options = { ...this.options, [field.key]: opts }
 			} catch (error) {
 				// A picker that fails to load degrades to an empty list rather

package/src/index.js

@@ -129,6 +129,7 @@ export {
 	CnFlowRunsWidgetForm,
 	CnFlowSidebar,
 	CnFlowsPage,
+	CnFlowStepOutcomes,
 	CnFolderSidebar,
 	CnFolderTree,
 	CnFormBuilder,

package/src/utils/selectOptions.js

@@ -0,0 +1,54 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V. <info@conduction.nl>
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * The choices a node's `select` field offers, in the `{id, label}` shape
+ * NcSelect takes.
+ *
+ * A field gets its choices one of two ways. `optionsFrom` names a url the
+ * owning app answers. `options` lists them in the form itself, for a short
+ * fixed vocabulary that has no endpoint of its own. Both dialogs that render a
+ * node's configForm read the same shapes through this module, so the two
+ * cannot come to accept different ones.
+ */
+
+/**
+ * Normalise rows into `{id, label}` options.
+ *
+ * Accepts plain strings and numbers, `{id, label}`, `{value, label}`, and
+ * OpenRegister objects (uuid from `@self`, label from name or title). A row
+ * without an id is dropped rather than shown as a blank option.
+ *
+ * @param {Array<unknown>} rows The raw rows.
+ * @param {(label: string) => string} [translate] Applied to each declared label.
+ * @return {Array<{id: string|number, label: string}>} The options.
+ */
+export function normaliseSelectOptions(rows, translate = (s) => s) {
+	if (!Array.isArray(rows)) {
+		return []
+	}
+
+	return rows.map((row) => {
+		if (typeof row === 'string' || typeof row === 'number') {
+			return { id: row, label: String(row) }
+		}
+		if (!row || typeof row !== 'object') {
+			return { id: undefined, label: '' }
+		}
+
+		const id = row.id ?? row.value ?? row['@self']?.uuid ?? row.uuid
+		const declared = row.label || row.name || row.title
+
+		return { id, label: declared ? String(translate(declared)) : String(id) }
+	}).filter((option) => option.id !== undefined && option.id !== null && option.id !== '')
+}
+
+/**
+ * Whether a field declares its choices in the form itself.
+ *
+ * @param {object} field The field declaration.
+ * @return {boolean} True for a `select` with an `options` list.
+ */
+export function hasStaticOptions(field) {
+	return field?.type === 'select' && Array.isArray(field?.options)
+}