@conduction/nextcloud-vue 2.102.0 → 2.104.0

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -201,13 +201,38 @@
 				</span>
 			</li>
 		</ul>
+		<!-- `footerAction`: one action under the list, also under the empty
+		     text ("Beroep registreren"). With `disabledWhen` it greys out and
+		     says why (`disabledReason`: "Kan zodra de beslissing is
+		     verzonden"). -->
+		<div
+			v-if="footerAction && !error"
+			class="cn-record-list__footer"
+			data-testid="cn-record-list-footer">
+			<NcButton
+				variant="secondary"
+				:disabled="footerDisabled"
+				:aria-describedby="footerDisabled && footerAction.reason ? footerReasonId : null"
+				data-testid="cn-record-list-footer-action"
+				@click="runFooterAction">
+				<template v-if="footerAction.icon" #icon>
+					<CnIcon :name="footerAction.icon" :size="16" />
+				</template>
+				{{ footerAction.label }}
+			</NcButton>
+			<span
+				v-if="footerDisabled && footerAction.reason"
+				:id="footerReasonId"
+				class="cn-record-list__footer-reason"
+				data-testid="cn-record-list-footer-reason">{{ footerAction.reason }}</span>
+		</div>
 	</div>
 </template>
 
 <script>
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
-import { NcLoadingIcon } from '@nextcloud/vue'
+import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import { inject, ref } from 'vue'
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
@@ -224,8 +249,12 @@ import { lensUnavailableText, readLensReports } from '../../utils/lensAvailabili
 import { pageFilter, pageSort } from '../../utils/pageControls.js'
 import { readPath } from '../../utils/readPath.js'
 import { dropOptionalUnresolved, hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
+import { evaluateVisibleWhen } from '../../utils/visibleWhen.js'
 
 const PAGE_REFRESH_CHANNEL = 'cn:page:refresh'
+
+/** Gives each list's footer reason its own element id. */
+let footerSeq = 0
 const PRESENTATIONS = ['rows', 'feed', 'inline', 'cards', 'notice']
 
 /** The tones a `notice` list takes. */
@@ -279,7 +308,7 @@ function unwrap(value) {
 export default {
 	name: 'CnRecordListWidget',
 
-	components: { ChevronRight, CnIcon, CnStatusBadge, NcLoadingIcon },
+	components: { ChevronRight, CnIcon, CnStatusBadge, NcButton, NcLoadingIcon },
 
 	inject: {
 		/** Detail-page object context (`{ objectId, object, register, schema }`). */
@@ -314,6 +343,10 @@ export default {
 		 * `presentation: "notice"` draws the rows as sentences in one box toned by
 		 * `variant` (`info`, `warning` or `error`), after an optional `lead`
 		 * (`{total}` filled in).
+		 * `footerAction` (`{ label, icon?, type, ..., disabledWhen?,
+		 * disabledReason? }`) ends the card with one action, also under the
+		 * empty text; while the visibleWhen condition `disabledWhen` holds the
+		 * button is disabled and `disabledReason` shows under it.
 		 *
 		 * @type {object}
 		 */
@@ -367,10 +400,48 @@ export default {
 			error: false,
 			/** Personal-lens reports (`@self.lenses`) of the latest response. */
 			lenses: {},
+			/** Whether `footerAction.disabledWhen` holds. */
+			footerDisabled: false,
+			footerReasonId: `cn-record-list-footer-reason-${++footerSeq}`,
 		}
 	},
 
 	computed: {
+		/**
+		 * The action under the list (`footerAction`: `{ label, icon?, type,
+		 * ..., disabledWhen?, disabledReason? }`), labels through the host
+		 * translate, or null without a label.
+		 *
+		 * @spec openspec/changes/record-list-footer-action/specs/record-list/spec.md#requirement-a-record-list-can-end-with-an-action-that-says-why-it-is-disabled
+		 * @return {{label: string, icon: string, reason: string, action: object}|null}
+		 */
+		footerAction() {
+			const action = this.content?.footerAction
+			if (!action || typeof action !== 'object' || typeof action.label !== 'string' || action.label === '') {
+				return null
+			}
+			return {
+				label: this.translate(action.label),
+				icon: typeof action.icon === 'string' ? action.icon : '',
+				reason: typeof action.disabledReason === 'string' && action.disabledReason !== '' ? this.translate(action.disabledReason) : '',
+				action,
+			}
+		},
+
+		/**
+		 * What `footerAction.disabledWhen` depends on, so it is evaluated again
+		 * when the condition, the record or the workspace changes.
+		 *
+		 * @return {string}
+		 */
+		footerDisabledKey() {
+			const cond = this.content?.footerAction?.disabledWhen
+			if (!cond) {
+				return ''
+			}
+			return JSON.stringify({ cond, object: this.tokenCtx.object, workspace: this.tokenCtx.workspace, total: this.total })
+		},
+
 		/** @return {string} `rows`, `feed`, `inline` or `cards`. */
 		/**
 		 * The tone of a `notice` list (`content.variant`): info, warning or error.
@@ -595,6 +666,13 @@ export default {
 			this.fetchRows()
 		},
 
+		footerDisabledKey: {
+			immediate: true,
+			handler() {
+				this.evaluateFooterDisabled()
+			},
+		},
+
 		endpointKey() {
 			this.fetchRows()
 		},
@@ -621,6 +699,47 @@ export default {
 			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
 		},
 
+		/**
+		 * Settle whether the footer action is disabled: `disabledWhen` is a
+		 * visibleWhen condition read against the page's record (`field`), the
+		 * workspace, an endpoint or a source; `total` is the list's total.
+		 *
+		 * @spec openspec/changes/record-list-footer-action/specs/record-list/spec.md#requirement-a-record-list-can-end-with-an-action-that-says-why-it-is-disabled
+		 * @return {Promise<void>}
+		 */
+		async evaluateFooterDisabled() {
+			const cond = this.content?.footerAction?.disabledWhen
+			if (!cond) {
+				this.footerDisabled = false
+				return
+			}
+			const ctx = { ...this.tokenCtx, object: { ...(this.tokenCtx.object || {}), total: this.total } }
+			const key = this.footerDisabledKey
+			const disabled = await evaluateVisibleWhen(cond, ctx)
+			if (key === this.footerDisabledKey) {
+				this.footerDisabled = disabled
+			}
+		},
+
+		/**
+		 * Run the footer action through the page's dispatcher, with the page's
+		 * record as the token context.
+		 *
+		 * @spec openspec/changes/record-list-footer-action/specs/record-list/spec.md#requirement-a-record-list-can-end-with-an-action-that-says-why-it-is-disabled
+		 * @return {unknown} What the dispatcher returns.
+		 */
+		runFooterAction() {
+			const declared = this.footerAction?.action
+			if (!declared || this.footerDisabled) {
+				return undefined
+			}
+			const { disabledWhen, disabledReason, ...action } = declared
+			if (typeof this.cnDispatchAction === 'function') {
+				return this.cnDispatchAction(action)
+			}
+			return dispatchAction(action, { router: this.$router || null, tokenCtx: this.tokenCtx, source: { register: this.content?.register, schema: this.content?.schema } })
+		},
+
 		/**
 		 * A row's `bar`: its value, the maximum it is measured against (the
 		 * row's `maxField`, else the largest row), the filled share and
@@ -1196,6 +1315,19 @@ export default {
 	padding: 0;
 }
 
+.cn-record-list__footer {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 6px;
+	margin-top: 10px;
+}
+
+.cn-record-list__footer-reason {
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+
 .cn-record-list__empty,
 .cn-record-list__error {
 	color: var(--color-text-maxcontrast);

package/src/components/CnSearchSelect/CnSearchSelect.vue

@@ -0,0 +1,283 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V.
+  - SPDX-License-Identifier: EUPL-1.2
+-->
+<template>
+	<div class="cn-search-select" :class="{ 'cn-search-select--label-outside': labelOutside }" data-testid="cn-search-select">
+		<NcSelect
+			:inputId="inputId"
+			:inputLabel="inputLabel"
+			:labelOutside="labelOutside"
+			:modelValue="selectedOption"
+			:options="options"
+			:loading="loading"
+			:clearable="clearable"
+			:disabled="disabled"
+			:placeholder="resolvedPlaceholder"
+			:filterable="filterable"
+			label="label"
+			@search="onSearch"
+			@update:modelValue="onInput">
+			<template #option="option">
+				<span class="cn-search-select__row" data-testid="cn-search-select-row">
+					<span
+						v-if="option.avatar || option.icon"
+						class="cn-search-select__lead"
+						:class="{ 'cn-search-select__lead--avatar': option.avatar && !option.icon }"
+						aria-hidden="true">
+						<CnIcon v-if="option.icon" :name="option.icon" :size="18" />
+						<template v-else>{{ initialsOf(option) }}</template>
+					</span>
+					<span class="cn-search-select__text">
+						<span class="cn-search-select__name">{{ option.label }}</span>
+						<span v-if="option.secondary" class="cn-search-select__secondary">{{ option.secondary }}</span>
+					</span>
+					<Check
+						v-if="isSelected(option)"
+						class="cn-search-select__check"
+						:size="18"
+						data-testid="cn-search-select-check" />
+				</span>
+			</template>
+		</NcSelect>
+		<Magnify class="cn-search-select__magnifier" :size="18" aria-hidden="true" />
+	</div>
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+import { NcSelect } from '@nextcloud/vue'
+import Check from 'vue-material-design-icons/Check.vue'
+import Magnify from 'vue-material-design-icons/Magnify.vue'
+import CnIcon from '../CnIcon/CnIcon.vue'
+import { initialsOf } from '../../utils/initials.js'
+
+/**
+ * CnSearchSelect — a single picker drawn as a search field: a magnifier
+ * instead of the chevron, and results as rows with an icon or initials, a
+ * name, a secondary line and a check on the chosen one (boards DqOverdragen
+ * "Nieuw team", DqNieuweZaak "Aanvrager").
+ *
+ * Each option is `{ id, label, secondary?, icon?, avatar? }`: `icon` names a
+ * CnIcon, `avatar: true` draws the label's initials in a circle. The value is
+ * the option's `id` (or `value`); `update:modelValue` emits that id, or null
+ * when cleared. Searching is the host's: listen to `search` and pass new
+ * `options`, with `filterable: false` when the host already filtered them.
+ *
+ * ```vue
+ * <CnSearchSelect
+ *   v-model="team"
+ *   inputLabel="Nieuw team"
+ *   :options="[{ id: 'legal', label: 'Juridische zaken', secondary: '6 leden · bezwaar, beroep en Woo-advies', avatar: true }]" />
+ * ```
+ */
+export default {
+	name: 'CnSearchSelect',
+
+	components: { Check, CnIcon, Magnify, NcSelect },
+
+	props: {
+		/** The chosen option's id, or the option itself. */
+		modelValue: {
+			type: [String, Number, Object],
+			default: null,
+		},
+
+		/**
+		 * The options: `{ id, label, secondary?, icon?, avatar? }`.
+		 *
+		 * @type {Array<{id: (string|number), label: string, secondary?: string, icon?: string, avatar?: boolean}>}
+		 */
+		options: {
+			type: Array,
+			default: () => [],
+		},
+
+		/** The field's label. */
+		inputLabel: {
+			type: String,
+			default: '',
+		},
+
+		/** Draw the label above the field instead of inside it. */
+		labelOutside: {
+			type: Boolean,
+			default: false,
+		},
+
+		/** The input's id. */
+		inputId: {
+			type: String,
+			default: undefined,
+		},
+
+		/** Placeholder text; defaults to "Search…". */
+		placeholder: {
+			type: String,
+			default: '',
+		},
+
+		/** Show the loading spinner. */
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+
+		/** Offer a clear button. */
+		clearable: {
+			type: Boolean,
+			default: true,
+		},
+
+		/** Disable the field. */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+
+		/** Filter the options on the typed text; false when the host searches. */
+		filterable: {
+			type: Boolean,
+			default: true,
+		},
+	},
+
+	emits: ['update:modelValue', 'search'],
+
+	computed: {
+		/**
+		 * The option matching `modelValue`, or a bare one carrying it.
+		 *
+		 * @return {object|null}
+		 */
+		selectedOption() {
+			const value = this.modelValue
+			if (value === null || value === undefined || value === '') {
+				return null
+			}
+			if (typeof value === 'object') {
+				return value
+			}
+			return this.options.find((o) => this.idOf(o) === String(value)) || { id: value, label: String(value) }
+		},
+
+		/** @return {string} The placeholder. */
+		resolvedPlaceholder() {
+			return this.placeholder || t('nextcloud-vue', 'Search…')
+		},
+	},
+
+	methods: {
+		initialsOf(option) {
+			return initialsOf(option.label || '')
+		},
+
+		/**
+		 * @param {object} option An option.
+		 * @return {string} Its id as a string, '' without one.
+		 */
+		idOf(option) {
+			const id = option && (option.id ?? option.value)
+			return id === null || id === undefined ? '' : String(id)
+		},
+
+		/**
+		 * @param {object} option An option.
+		 * @return {boolean} Whether it is the chosen one.
+		 */
+		isSelected(option) {
+			return this.selectedOption !== null && this.idOf(option) !== '' && this.idOf(option) === this.idOf(this.selectedOption)
+		},
+
+		/**
+		 * @param {object|null} option The picked option.
+		 */
+		onInput(option) {
+			const id = option ? (option.id ?? option.value ?? null) : null
+			/** @event update:modelValue The picked option's id, or null when cleared. */
+			this.$emit('update:modelValue', id)
+		},
+
+		/**
+		 * @param {string} query The typed text.
+		 */
+		onSearch(query) {
+			/** @event search The typed text, for a host that searches itself. */
+			this.$emit('search', query)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-search-select {
+	position: relative;
+}
+
+/* The magnifier sits where the chevron was: in the field, at its end. */
+.cn-search-select__magnifier {
+	position: absolute;
+	inset-inline-end: 12px;
+	bottom: 0;
+	height: var(--default-clickable-area, 34px);
+	display: flex;
+	align-items: center;
+	color: var(--color-text-maxcontrast);
+	pointer-events: none;
+}
+
+.cn-search-select :deep(.vs__open-indicator),
+.cn-search-select :deep(.vs__open-indicator-button) {
+	display: none;
+}
+
+.cn-search-select :deep(.vs__actions) {
+	padding-inline-end: 36px;
+}
+
+.cn-search-select__row {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	width: 100%;
+	min-width: 0;
+	padding: 4px 0;
+}
+
+.cn-search-select__lead {
+	flex: 0 0 32px;
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+	font-size: 13px;
+	font-weight: 600;
+}
+
+.cn-search-select__text {
+	display: flex;
+	flex-direction: column;
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+.cn-search-select__name {
+	font-weight: 600;
+	overflow-wrap: anywhere;
+}
+
+.cn-search-select__secondary {
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+	overflow-wrap: anywhere;
+}
+
+.cn-search-select__check {
+	flex: 0 0 auto;
+	color: var(--color-primary-element);
+}
+</style>

package/src/components/CnSearchSelect/index.js

@@ -0,0 +1,12 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * CnSearchSelect — a single picker drawn as a search field with rows that
+ * carry an icon, a name, a secondary line and a check on the chosen one.
+ */
+
+import CnSearchSelect from './CnSearchSelect.vue'
+
+export { CnSearchSelect }
+export default CnSearchSelect

package/src/components/CnSetupWizard/CnSetupWizard.vue

@@ -5,6 +5,7 @@
 		ref="wizard"
 		:steps="wizardSteps"
 		:dialogTitle="resolvedDialogTitle"
+		stepHeading
 		:submitLabel="submitLabel"
 		:cancelLabel="cancelLabel"
 		:nextLabel="nextLabel"
@@ -79,6 +80,7 @@
 					</NcNoteCard>
 					<CnChoiceCards
 						v-if="isCardChoice(step)"
+						:layout="step.display === 'rows' ? 'rows' : 'cards'"
 						:label="stepTitle(step)"
 						:options="optionsFor(step)"
 						:multiple="step.multiple === true"
@@ -464,14 +466,16 @@ export default {
 	computed: {
 		/**
 		 * The title actually rendered by CnWizardDialog: "Set up {appName}"
-		 * when a display name was passed, otherwise whatever `dialogTitle`
-		 * resolves to (a caller override, or its own generic default).
+		 * when a display name was passed (the name through the host's
+		 * translate), otherwise whatever `dialogTitle` resolves to (a caller
+		 * override, or its own generic default). In the board look it is the
+		 * eyebrow's context and the current step's title is the heading.
 		 *
 		 * @return {string}
 		 */
 		resolvedDialogTitle() {
 			return this.appName
-				? t('nextcloud-vue', 'Set up {app}', { app: this.appName })
+				? t('nextcloud-vue', 'Set up {app}', { app: this.cnTranslate(this.appName) })
 				: this.dialogTitle
 		},
 
@@ -727,6 +731,12 @@ export default {
 		},
 	},
 
+	created() {
+		for (const step of this.setupSteps) {
+			this.applyDefault(step)
+		}
+	},
+
 	mounted() {
 		// Covers a RESUMED wizard opening straight onto its run-action step
 		// (`initialStepId`) — `onStepChange` only fires on later navigation,
@@ -944,13 +954,14 @@ export default {
 		},
 
 		/**
-		 * Whether a choice step renders as a card grid rather than a dropdown.
+		 * Whether a choice step renders as CnChoiceCards (a card grid, or radio
+		 * rows with `display: "rows"`) rather than a dropdown.
 		 *
 		 * @param {object} step The choice step.
-		 * @return {boolean} True for `display: "cards"`.
+		 * @return {boolean} True for `display: "cards"` and `display: "rows"`.
 		 */
 		isCardChoice(step) {
-			return step.display === 'cards'
+			return step.display === 'cards' || step.display === 'rows'
 		},
 
 		/**
@@ -1054,6 +1065,36 @@ export default {
 			}
 		},
 
+		/**
+		 * Preselect a `choice` step's `default` option. Skipped once the user
+		 * picked here, when a value is already chosen, and for a step the
+		 * server already completed (its stored value must not be overwritten
+		 * by a Next). A card step holds the plain value; a dropdown holds the
+		 * option object, or the value while the options are still loading.
+		 *
+		 * @param {object} step The choice step.
+		 * @return {void}
+		 */
+		applyDefault(step) {
+			if (!step || step.type !== 'choice' || step.default === undefined || step.default === null) {
+				return
+			}
+			if (this.userTouched[step.id] === true || this.hasChoice(step) || this.isServerDone(step.id)) {
+				return
+			}
+			const wanted = step.multiple === true ? [].concat(step.default) : step.default
+			if (this.isCardChoice(step)) {
+				this.choiceModel[step.id] = wanted
+			} else {
+				const options = this.optionsFor(step)
+				const pick = (value) => options.find((o) => o.value === value) || value
+				this.choiceModel[step.id] = Array.isArray(wanted) ? wanted.map(pick) : pick(wanted)
+			}
+			if (step.configKey) {
+				this.choiceValues[step.configKey] = this.scalarChoice(step)
+			}
+		},
+
 		/**
 		 * Auto-fill a `choice` step's suggested default from an earlier choice
 		 * (its `suggestFrom` configKey → `suggestMap[parentValue]`). No-op once
@@ -1360,6 +1401,15 @@ export default {
 			if (step && step.suggestFrom) {
 				this.applySuggestion(step)
 			}
+			// A default seeded before a dropdown's options arrived is a bare
+			// value; swap in its option object now the step opens.
+			if (step && step.default !== undefined && this.userTouched[step.id] !== true && !this.isCardChoice(step)) {
+				const held = this.choiceModel[step.id]
+				const option = this.optionsFor(step).find((o) => o.value === held)
+				if (option && held !== null && typeof held !== 'object') {
+					this.choiceModel[step.id] = option
+				}
+			}
 			this.maybeAutoRunStep(payload.stepId)
 			/**
 			 * @event step-change Emitted when the active step changes.

package/src/components/CnTabsWidget/CnTabsWidget.vue

@@ -624,6 +624,7 @@ export default {
 			// is already going under "More" does not use one up.
 			let placed = pinActivity ? 1 : 0
 			const resolved = []
+			const usedKeys = new Set()
 			tabs.forEach((tab, position) => {
 				const index = originalIndex[position]
 				// A tab whose condition is false is absent, not empty.
@@ -654,8 +655,14 @@ export default {
 						placed += 1
 					}
 				}
+				// Keyed on the tab's own id, else its place in `content.tabs`:
+				// never on the widget the panel starts with, which changes when
+				// a stack's first card turns visible and would remount the panel.
+				const ownId = tab && typeof tab === 'object' && typeof tab.id === 'string' ? tab.id : ''
+				const key = ownId !== '' && !usedKeys.has(ownId) ? ownId : `tab-${index}`
+				usedKeys.add(key)
 				resolved.push({
-					key: `${widgetId || 'tab'}-${index}`,
+					key,
 					id: (tab && typeof tab === 'object' && tab.id) || widgetId || '',
 					widgetId,
 					label: this.tabLabel(tab, widget, widgetId),

package/src/components/CnUserSettingsDialog/CnUserSettingsDialog.vue

@@ -339,7 +339,11 @@ export default {
 	list-style: none;
 }
 
-.cn-user-settings-dialog__nav-link {
+/* A navigation entry, not a link in running text: no underline, also not
+   on hover. `!important` because a theme's `a { text-decoration }` carries
+   it (thematiq), and a bare `a` with `!important` beats any class. */
+.cn-user-settings-dialog__nav-link,
+.cn-user-settings-dialog__nav-link:visited {
 	display: flex;
 	align-items: center;
 	gap: 10px;
@@ -348,11 +352,12 @@ export default {
 	border-radius: var(--border-radius-element, 8px);
 	font-size: 15px;
 	color: var(--color-main-text);
-	text-decoration: none;
+	text-decoration: none !important;
 }
 
 .cn-user-settings-dialog__nav-link:hover {
 	background: var(--color-background-hover);
+	text-decoration: none !important;
 }
 
 .cn-user-settings-dialog__nav-link:focus-visible {