@conduction/nextcloud-vue 2.101.0 → 2.103.0

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/CnWidgetObjectTable/CnWidgetObjectTable.vue

@@ -88,8 +88,8 @@ import { dispatchAction, resolveObjectOpType } from '../../utils/actionsDispatch
 import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js'
 import { pageFilter, pageSort } from '../../utils/pageControls.js'
 import { dropOptionalUnresolved, hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
+import { compileRowClass } from '../../utils/rowClassRules.js'
 import { fieldsFromSchema } from '../../utils/schema.js'
-import { compareVisibleWhen, readVisibleWhenPath } from '../../utils/visibleWhen.js'
 import { CnIcon } from '../CnIcon/index.js'
 import { CnRowActions } from '../CnRowActions/index.js'
 import { CnWidgetWrapper } from '../CnWidgetWrapper/index.js'
@@ -762,28 +762,7 @@ export default {
 		 * @return {?(row: object) => string} The row-class function, or null.
 		 */
 		compiledRowClass() {
-			const rc = this.rowClass
-			if (typeof rc === 'function') {
-				return rc
-			}
-			if (!Array.isArray(rc) || rc.length === 0) {
-				return null
-			}
-			const rules = rc
-			return (row) => {
-				const classes = []
-				for (const rule of rules) {
-					if (!rule || !rule.class) {
-						continue
-					}
-					const when = rule.when || {}
-					const actual = readVisibleWhenPath(row, when.field)
-					if (compareVisibleWhen(actual, when.op || 'eq', when.value)) {
-						classes.push(rule.class)
-					}
-				}
-				return classes.join(' ')
-			}
+			return compileRowClass(this.rowClass)
 		},
 
 		/**

package/src/components/CnWizardDialog/CnWizardDialog.vue

@@ -5,7 +5,7 @@
 		defaultWidth="wizard"
 		:eyebrow="boardEyebrow"
 		:subtitle="subtitle"
-		:name="dialogTitle"
+		:name="shownTitle"
 		size="large"
 		:open="dialogOpen"
 		:noClose="loading || !cancellable"
@@ -265,6 +265,12 @@ export default {
 		 * Empty uses the dialog title.
 		 */
 		eyebrowContext: { type: String, default: '' },
+		/**
+		 * Board look: head the dialog with the current step's label, the
+		 * dialog title moving to the eyebrow's context. The result phase and
+		 * the Nextcloud look keep `dialogTitle`.
+		 */
+		stepHeading: { type: Boolean, default: false },
 		/**
 		 * The eyebrow sentence, with `{context}`, `{step}` and `{total}`
 		 * placeholders, so it can be translated.
@@ -356,6 +362,19 @@ export default {
 				.replace('{total}', String(this.steps.length))
 		},
 
+		/**
+		 * The dialog's heading: the current step's label with `stepHeading`
+		 * in the board look, otherwise `dialogTitle`.
+		 *
+		 * @return {string} The heading.
+		 */
+		shownTitle() {
+			if (this.stepHeading && this.isBoardLook && this.result === null && this.currentStep && this.currentStep.label) {
+				return this.currentStep.label
+			}
+			return this.dialogTitle
+		},
+
 		/** @return {object} The check icon, the default finishing icon. */
 		Check() {
 			return Check

package/src/components/index.js

@@ -130,6 +130,7 @@ export { default as CnContactsTab } from '../integrations/builtin/contacts/CnCon
 export { CnContactPicker } from './CnContactPicker/index.js'
 export { CnContactCreate } from './CnContactCreate/index.js'
 export { CnResourceSelect } from './CnResourceSelect/index.js'
+export { CnSearchSelect } from './CnSearchSelect/index.js'
 export { CnPropertySourceField } from './CnPropertySourceField/index.js'
 export { CnDurationField } from './CnDurationField/index.js'
 export { CnFavouriteToggle } from './CnFavouriteToggle/index.js'

package/src/composables/indexSources.js

@@ -530,6 +530,15 @@ function tasksSource() {
 		 */
 		loading: () => !!store.loading,
 
+		// The inbox pages: the page sends `limit` and `offset` and draws the
+		// pager from the datastore total.
+		pages: true,
+
+		/**
+		 * @return {number} The datastore total, independent of the page size.
+		 */
+		total: () => Number(store.total) || 0,
+
 		/**
 		 * Count the inbox for a config without touching the rows on screen,
 		 * for a quick-filter tab with `showCount`.

package/src/css/dialog.css

@@ -9,14 +9,16 @@
  * Theme hooks (all optional, defaults below):
  *   --cn-dialog-danger               fill of a destructive primary
  *   --cn-dialog-eyebrow-color        eyebrow colour
- *   --cn-dialog-eyebrow-transform    uppercase (default) or none
+ *   --cn-dialog-eyebrow-transform    none (default, sentence case) or uppercase
+ *   --cn-dialog-eyebrow-tracking     letter spacing; 0 by default, 0.06em suits capitals
  */
 
 .cn-dialog-board {
 	--cn-dialog-width: 640px;
 	--cn-dialog-danger: var(--color-error);
 	--cn-dialog-eyebrow-color: var(--color-primary-element-text, var(--color-main-text));
-	--cn-dialog-eyebrow-transform: uppercase;
+	--cn-dialog-eyebrow-transform: none;
+	--cn-dialog-eyebrow-tracking: 0;
 }
 
 /* Dimmed page behind the dialog: text colour at 45%. */
@@ -73,7 +75,7 @@
 	margin-bottom: 4px;
 	font-size: 13px;
 	font-weight: 700;
-	letter-spacing: 0.06em;
+	letter-spacing: var(--cn-dialog-eyebrow-tracking, 0.06em);
 	text-transform: var(--cn-dialog-eyebrow-transform, uppercase);
 	color: var(--cn-dialog-eyebrow-color, var(--color-main-text));
 }

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

@@ -128,6 +128,16 @@
 	gap: 8px;
 }
 
+/* `quickFilterPlacement: "toolbar"` (DqTeamwachtrij): the chips take the room
+   the Filter button and the view switch leave on row 1, so the three stay on
+   one row in the column beside a side panel; the chips that do not fit move
+   into the overflow chip (CnQuickFilterBar `fit`) instead of pushing the
+   buttons onto a row of their own. */
+.cn-look-board.cn-index-page--quick-filters-toolbar .cn-actions-bar--board > .cn-actions-bar__row--views > .cn-quick-filter-bar {
+	flex: 1 1 0;
+	min-width: 0;
+}
+
 /* Row 2: the search field and the active filters on a line of their own. */
 .cn-look-board .cn-actions-bar--board > .cn-actions-bar__row--search {
 	display: flex;

package/src/index.js

@@ -279,6 +279,7 @@ export {
 	CnSaveViewDialog,
 	CnSchemaFormDialog,
 	CnSearchPage,
+	CnSearchSelect,
 	CnSectionsWidget,
 	CnSettingsCard,
 	CnSettingsField,

package/src/mixins/pageViews.js

@@ -270,12 +270,14 @@ export const pageViews = {
 
 		/**
 		 * Whether a user arranges the views for themselves (`userLayout`).
+		 * Not while Buildiq edits the page (`editingBody`): Buildiq is the
+		 * layout editor, and it shows and changes the manifest layout.
 		 *
 		 * @return {boolean}
 		 * @spec openspec/changes/page-view-user-layouts/specs/view-switch-containers/spec.md#requirement-a-user-arranges-each-view-for-themselves
 		 */
 		viewUserLayoutOn() {
-			return this.userLayout === true && this.hasViews
+			return this.userLayout === true && this.hasViews && this.editingBody !== true
 		},
 
 		/**
@@ -640,6 +642,11 @@ export const pageViews = {
 				this.viewUserLayouts = { ...this.viewUserLayouts, [view.id]: arranged }
 				this.viewUserLayoutsDirty = { ...this.viewUserLayoutsDirty, [view.id]: true }
 				this.$emit('view-layout-change', { view: view.id, layout: arranged })
+				// Outside an in-page edit session (the dashboard's edit mode, the
+				// detail page's Arrange) no Done will come to save it.
+				if (this.isEditing !== true && this.arrangingView !== true) {
+					this.saveViewUserLayouts()
+				}
 				return
 			}
 			for (const u of updated) {