@conduction/nextcloud-vue 2.132.0 → 2.133.0

package/l10n/en.json

@@ -2363,7 +2363,23 @@
     "Viewed": "Viewed",
     "w{week}": "w{week}",
     "Icon": "Icon",
-    "Shown when you point at the view in the menu.": "Shown when you point at the view in the menu."
+    "Shown when you point at the view in the menu.": "Shown when you point at the view in the menu.",
+    "No main contact yet": "No main contact yet",
+    "is": "is",
+    "is not": "is not",
+    "greater than": "greater than",
+    "at least": "at least",
+    "less than": "less than",
+    "at most": "at most",
+    "is filled in": "is filled in",
+    "{field} is {value}": "{field} is {value}",
+    "{field} is not {value}": "{field} is not {value}",
+    "{field} is greater than {value}": "{field} is greater than {value}",
+    "{field} is at least {value}": "{field} is at least {value}",
+    "{field} is less than {value}": "{field} is less than {value}",
+    "{field} is at most {value}": "{field} is at most {value}",
+    "{field} is filled in": "{field} is filled in",
+    "No conditions: the rule always applies.": "No conditions: the rule always applies."
   },
   "plurals": {
     "{count} member": [

package/l10n/nl.json

@@ -2613,7 +2613,23 @@
     "Viewed": "Ingezien",
     "w{week}": "w{week}",
     "Icon": "Pictogram",
-    "Shown when you point at the view in the menu.": "Te zien als u in het menu op de weergave wijst."
+    "Shown when you point at the view in the menu.": "Te zien als u in het menu op de weergave wijst.",
+    "No main contact yet": "Nog geen hoofdcontact",
+    "is": "is",
+    "is not": "is niet",
+    "greater than": "groter dan",
+    "at least": "minstens",
+    "less than": "kleiner dan",
+    "at most": "hoogstens",
+    "is filled in": "is ingevuld",
+    "{field} is {value}": "{field} {value} is",
+    "{field} is not {value}": "{field} niet {value} is",
+    "{field} is greater than {value}": "{field} groter is dan {value}",
+    "{field} is at least {value}": "{field} minstens {value} is",
+    "{field} is less than {value}": "{field} kleiner is dan {value}",
+    "{field} is at most {value}": "{field} hoogstens {value} is",
+    "{field} is filled in": "{field} is ingevuld",
+    "No conditions: the rule always applies.": "Geen voorwaarden: de regel geldt altijd."
   },
   "plurals": {
     "{count} member": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.132.0",
+  "version": "2.133.0",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnActionButtons/CnActionButtons.vue

@@ -160,6 +160,7 @@
 			:dialogTitle="tr(confirmEntry.confirmTitle || confirmEntry.label)"
 			:message="tr(confirmEntry.confirmMessage) || defaultConfirmMessage"
 			:variant="confirmEntry.variant === 'error' ? 'error' : 'primary'"
+			v-bind="confirmButtonProps"
 			@confirm="onConfirmProceed"
 			@close="confirmEntry = null" />
 
@@ -471,6 +472,20 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * The confirm button's words and icon from the action
+		 * (`confirmLabel`, `confirmIcon`); none set leaves the dialog's own.
+		 *
+		 * @return {object}
+		 */
+		confirmButtonProps() {
+			const entry = this.confirmEntry || {}
+			return {
+				...(typeof entry.confirmLabel === 'string' && entry.confirmLabel !== '' ? { confirmLabel: this.tr(entry.confirmLabel) } : {}),
+				...(typeof entry.confirmIcon === 'string' && entry.confirmIcon !== '' ? { confirmIcon: entry.confirmIcon } : {}),
+			}
+		},
+
 		/**
 		 * Effective translate function: the injected `cnTranslate` (the host
 		 * app's bound `t()`), identity by default.

package/src/components/CnConditionListEditor/CnConditionListEditor.vue

@@ -0,0 +1,346 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V.
+  - SPDX-License-Identifier: EUPL-1.2
+-->
+
+<template>
+	<fieldset class="cn-condition-list">
+		<legend v-if="label" class="cn-condition-list__label">
+			{{ label }}
+		</legend>
+		<p v-if="rows.length === 0" class="cn-condition-list__empty">
+			{{ emptyText || t('nextcloud-vue', 'No conditions: the rule always applies.') }}
+		</p>
+		<div
+			v-for="(row, i) in rows"
+			:key="i"
+			class="cn-condition-list__row">
+			<NcSelect
+				class="cn-condition-list__field"
+				:modelValue="fieldOption(row.field)"
+				:options="fieldOptions"
+				label="label"
+				:inputLabel="t('nextcloud-vue', 'Field')"
+				:clearable="false"
+				@update:modelValue="setField(i, $event)" />
+			<NcSelect
+				class="cn-condition-list__operator"
+				:modelValue="operatorOption(row.operator)"
+				:options="operatorOptions(row.field)"
+				label="label"
+				:inputLabel="t('nextcloud-vue', 'Operator')"
+				:clearable="false"
+				:disabled="!row.field"
+				@update:modelValue="setOperator(i, $event)" />
+			<template v-if="takesValue(row.operator)">
+				<NcSelect
+					v-if="valueOptions(row.field)"
+					class="cn-condition-list__value"
+					:modelValue="valueOption(row)"
+					:options="valueOptions(row.field)"
+					label="label"
+					:inputLabel="t('nextcloud-vue', 'Value')"
+					:clearable="false"
+					@update:modelValue="setValue(i, $event ? $event.id : '')" />
+				<NcTextField
+					v-else
+					class="cn-condition-list__value"
+					:type="inputType(row.field)"
+					:modelValue="row.value === undefined || row.value === null ? '' : String(row.value)"
+					:label="t('nextcloud-vue', 'Value')"
+					@update:modelValue="setValue(i, typedValue(row.field, $event))" />
+			</template>
+			<NcButton
+				variant="tertiary"
+				:aria-label="t('nextcloud-vue', 'Remove condition')"
+				@click="remove(i)">
+				<template #icon>
+					<Close :size="18" />
+				</template>
+			</NcButton>
+		</div>
+		<NcButton variant="tertiary" :disabled="fields.length === 0" @click="add">
+			<template #icon>
+				<Plus :size="18" />
+			</template>
+			{{ t('nextcloud-vue', 'Add condition') }}
+		</NcButton>
+	</fieldset>
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+import { NcButton, NcSelect, NcTextField } from '@nextcloud/vue'
+import Close from 'vue-material-design-icons/Close.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import { operatorLabel, operatorsForType, operatorTakesValue } from './conditionOperators.js'
+
+/**
+ * CnConditionListEditor - the conditions of a rule as rows over an object's
+ * own fields: field, operator, value. All rows hold together. The operators
+ * follow the field's type (see `operatorsForType`), "is filled in" needs no
+ * value, and the value is a choice for a choice or yes/no field.
+ *
+ * v-model on `{ field, operator, value }[]`, in both dialects (`value`/`input`
+ * and `modelValue`/`update:modelValue`). Read a condition back as words with
+ * `conditionSentence` from `./conditionOperators.js`.
+ */
+export default {
+	name: 'CnConditionListEditor',
+
+	components: { NcButton, NcSelect, NcTextField, Close, Plus },
+
+	props: {
+		/**
+		 * The conditions.
+		 *
+		 * @type {Array<{field: string, operator: string, value?: unknown}>}
+		 */
+		value: { type: Array, default: () => [] },
+		/**
+		 * The same value under Vue 3's v-model name; wins over `value` when passed.
+		 *
+		 * @type {Array}
+		 */
+		modelValue: { type: Array, default: undefined },
+		/**
+		 * The fields a condition may name: `{ id, label, type, options?, format? }`.
+		 * `type` is number, integer, date, boolean, presence or anything else (text);
+		 * `options` (`[{ id, label }]`) make the value a choice.
+		 *
+		 * @type {Array<{id: string, label: string, type?: string, options?: Array}>}
+		 */
+		fields: { type: Array, default: () => [] },
+		/**
+		 * The legend above the rows, already translated.
+		 *
+		 * @type {string}
+		 */
+		label: { type: String, default: '' },
+		/**
+		 * What an empty list says, already translated.
+		 *
+		 * @type {string}
+		 */
+		emptyText: { type: String, default: '' },
+	},
+
+	emits: ['input', 'update:modelValue'],
+
+	data() {
+		return {
+			rows: this.copy(this.modelValue !== undefined ? this.modelValue : this.value),
+		}
+	},
+
+	computed: {
+		/**
+		 * The field choices.
+		 *
+		 * @return {Array<{id: string, label: string}>}
+		 */
+		fieldOptions() {
+			return this.fields.map((f) => ({ id: f.id, label: f.label || f.id }))
+		},
+	},
+
+	watch: {
+		value(next) {
+			if (this.modelValue === undefined) {
+				this.rows = this.copy(next)
+			}
+		},
+
+		modelValue(next) {
+			if (next !== undefined) {
+				this.rows = this.copy(next)
+			}
+		},
+	},
+
+	methods: {
+		t,
+
+		/**
+		 * A detached copy of the bound conditions.
+		 *
+		 * @param {Array} list The conditions.
+		 * @return {Array} The copy.
+		 */
+		copy(list) {
+			return (Array.isArray(list) ? list : []).map((row) => ({ ...row }))
+		},
+
+		/**
+		 * The field with this id.
+		 *
+		 * @param {string} id The field id.
+		 * @return {object|undefined}
+		 */
+		fieldOf(id) {
+			return this.fields.find((f) => f.id === id)
+		},
+
+		fieldOption(id) {
+			return this.fieldOptions.find((o) => o.id === id) || null
+		},
+
+		operatorOptions(fieldId) {
+			return operatorsForType(this.fieldOf(fieldId)?.type).map((id) => ({ id, label: operatorLabel(id) }))
+		},
+
+		operatorOption(operator) {
+			return operator ? { id: operator, label: operatorLabel(operator) } : null
+		},
+
+		takesValue(operator) {
+			return operatorTakesValue(operator)
+		},
+
+		/**
+		 * The value choices of a field, or null when its value is typed.
+		 *
+		 * @param {string} fieldId The field id.
+		 * @return {Array<{id: string, label: string}>|null}
+		 */
+		valueOptions(fieldId) {
+			const field = this.fieldOf(fieldId)
+			if (field?.type === 'boolean') {
+				return [
+					{ id: true, label: t('nextcloud-vue', 'Yes') },
+					{ id: false, label: t('nextcloud-vue', 'No') },
+				]
+			}
+			if (Array.isArray(field?.options) && field.options.length > 0) {
+				return field.options.map((o) => (typeof o === 'object'
+					? { id: o.id ?? o.value, label: o.label ?? String(o.id ?? o.value) }
+					: { id: o, label: String(o) }))
+			}
+			return null
+		},
+
+		valueOption(row) {
+			return (this.valueOptions(row.field) || []).find((o) => String(o.id) === String(row.value)) || null
+		},
+
+		inputType(fieldId) {
+			const type = this.fieldOf(fieldId)?.type
+			if (type === 'number' || type === 'integer') {
+				return 'number'
+			}
+			return type === 'date' ? 'date' : 'text'
+		},
+
+		/**
+		 * A typed value as stored: a number for a number field.
+		 *
+		 * @param {string} fieldId The field id.
+		 * @param {string} raw What was typed.
+		 * @return {string|number}
+		 */
+		typedValue(fieldId, raw) {
+			const type = this.fieldOf(fieldId)?.type
+			if ((type === 'number' || type === 'integer') && raw !== '' && !Number.isNaN(Number(raw))) {
+				return Number(raw)
+			}
+			return raw
+		},
+
+		setField(i, option) {
+			const field = this.fieldOf(option?.id)
+			const operators = operatorsForType(field?.type)
+			this.rows[i] = { field: option?.id || '', operator: operators[0], value: field?.type === 'boolean' ? true : '' }
+			this.emitRows()
+		},
+
+		setOperator(i, option) {
+			const row = { ...this.rows[i], operator: option?.id || 'eq' }
+			if (!operatorTakesValue(row.operator)) {
+				delete row.value
+			} else if (row.value === undefined) {
+				row.value = ''
+			}
+			this.rows[i] = row
+			this.emitRows()
+		},
+
+		setValue(i, value) {
+			this.rows[i] = { ...this.rows[i], value }
+			this.emitRows()
+		},
+
+		add() {
+			this.rows.push({ field: '', operator: 'eq', value: '' })
+			this.emitRows()
+		},
+
+		remove(i) {
+			this.rows.splice(i, 1)
+			this.emitRows()
+		},
+
+		/**
+		 * Tell the consumer, in both v-model dialects.
+		 *
+		 * @return {void}
+		 */
+		emitRows() {
+			const next = this.copy(this.rows)
+			/**
+			 * The conditions changed.
+			 *
+			 * @event input
+			 * @type {Array}
+			 */
+			this.$emit('input', next)
+			/**
+			 * The conditions changed (Vue 3 v-model).
+			 *
+			 * @event update:modelValue
+			 * @type {Array}
+			 */
+			this.$emit('update:modelValue', next)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-condition-list {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	border: 0;
+	margin: 0;
+	padding: 0;
+	min-width: 0;
+}
+
+.cn-condition-list__label {
+	font-weight: 600;
+	padding: 0;
+	margin-bottom: 4px;
+}
+
+.cn-condition-list__empty {
+	color: var(--color-text-maxcontrast);
+	margin: 0;
+}
+
+.cn-condition-list__row {
+	display: grid;
+	grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.6fr) auto;
+	gap: 8px;
+	align-items: end;
+}
+
+.cn-condition-list__row > :nth-child(3):last-child {
+	grid-column: 4;
+}
+
+@media (max-width: 640px) {
+	.cn-condition-list__row {
+		grid-template-columns: minmax(0, 1fr) auto;
+	}
+}
+</style>

package/src/components/CnConditionListEditor/conditionOperators.js

@@ -0,0 +1,126 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * The operators a condition can use on a field of a given type, and a
+ * condition written as the words of a rule ("Bouwkosten groter is dan
+ * € 100.000"). Shared by CnConditionListEditor and the apps that list rules.
+ *
+ * @module components/CnConditionListEditor/conditionOperators
+ */
+
+import { getCanonicalLocale, translate as t } from '@nextcloud/l10n'
+
+/**
+ * Every operator, in the order the editor offers them.
+ *
+ * `present` needs no value: the field is filled in.
+ *
+ * @type {ReadonlyArray<string>}
+ */
+export const CONDITION_OPERATORS = Object.freeze(['eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'present'])
+
+const OPERATORS_BY_TYPE = Object.freeze({
+	number: ['eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'present'],
+	integer: ['eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'present'],
+	date: ['eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'present'],
+	boolean: ['eq'],
+	presence: ['present'],
+})
+
+const DEFAULT_OPERATORS = Object.freeze(['eq', 'neq', 'present'])
+
+/**
+ * The operators that fit a field type.
+ *
+ * Numbers and dates compare; yes/no is only "is"; a `presence` field (a
+ * document, a relation) can only be filled in; text and choices say is, is not
+ * or is filled in.
+ *
+ * @param {string} type The field type.
+ * @return {string[]} The operator ids.
+ */
+export function operatorsForType(type) {
+	return [...(OPERATORS_BY_TYPE[type] || DEFAULT_OPERATORS)]
+}
+
+/**
+ * The label of an operator in the editor's operator choice.
+ *
+ * @param {string} operator The operator id.
+ * @return {string} The translated label.
+ */
+export function operatorLabel(operator) {
+	switch (operator) {
+		case 'eq': return t('nextcloud-vue', 'is')
+		case 'neq': return t('nextcloud-vue', 'is not')
+		case 'gt': return t('nextcloud-vue', 'greater than')
+		case 'gte': return t('nextcloud-vue', 'at least')
+		case 'lt': return t('nextcloud-vue', 'less than')
+		case 'lte': return t('nextcloud-vue', 'at most')
+		case 'present': return t('nextcloud-vue', 'is filled in')
+		default: return String(operator || '')
+	}
+}
+
+/**
+ * Whether an operator needs a value.
+ *
+ * @param {string} operator The operator id.
+ * @return {boolean} False for `present`.
+ */
+export function operatorTakesValue(operator) {
+	return operator !== 'present'
+}
+
+/**
+ * A condition's value as a reader sees it, formatted by its field.
+ *
+ * @param {unknown} value The stored value.
+ * @param {object|undefined} field The field (`type`, `format`, `options`).
+ * @return {string} The formatted value.
+ */
+export function formatConditionValue(value, field) {
+	const type = field?.type
+	if (type === 'boolean') {
+		const yes = value === true || value === 'true' || value === 1 || value === '1'
+		return yes ? t('nextcloud-vue', 'yes') : t('nextcloud-vue', 'no')
+	}
+	if (Array.isArray(field?.options)) {
+		const option = field.options.find((o) => String(o?.id ?? o?.value ?? o) === String(value))
+		if (option && typeof option === 'object') {
+			return String(option.label ?? option.id ?? value)
+		}
+	}
+	if ((type === 'number' || type === 'integer') && value !== '' && value !== null && !Number.isNaN(Number(value))) {
+		const options = field?.format === 'currency'
+			? { style: 'currency', currency: field.currency || 'EUR', maximumFractionDigits: 0 }
+			: {}
+		return new Intl.NumberFormat(getCanonicalLocale() || undefined, options).format(Number(value))
+	}
+	return String(value ?? '')
+}
+
+/**
+ * A condition as the clause of a rule, after "Als" / "If".
+ *
+ * @param {{field: string, operator: string, value?: unknown}} condition The condition.
+ * @param {Array<{id: string, label?: string, type?: string}>} fields The fields the condition may name.
+ * @return {string} The translated clause, for example "Bouwkosten groter is dan € 100.000".
+ */
+export function conditionSentence(condition, fields = []) {
+	const field = (fields || []).find((f) => f?.id === condition?.field)
+	const vars = {
+		field: field?.label || condition?.field || '',
+		value: formatConditionValue(condition?.value, field),
+	}
+	switch (condition?.operator) {
+		case 'neq': return t('nextcloud-vue', '{field} is not {value}', vars)
+		case 'gt': return t('nextcloud-vue', '{field} is greater than {value}', vars)
+		case 'gte': return t('nextcloud-vue', '{field} is at least {value}', vars)
+		case 'lt': return t('nextcloud-vue', '{field} is less than {value}', vars)
+		case 'lte': return t('nextcloud-vue', '{field} is at most {value}', vars)
+		case 'present': return t('nextcloud-vue', '{field} is filled in', vars)
+		default: return t('nextcloud-vue', '{field} is {value}', vars)
+	}
+}

package/src/components/CnConditionListEditor/index.js

@@ -0,0 +1,17 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+
+import CnConditionListEditor from './CnConditionListEditor.vue'
+
+export { CnConditionListEditor }
+export {
+	CONDITION_OPERATORS,
+	conditionSentence,
+	formatConditionValue,
+	operatorLabel,
+	operatorsForType,
+	operatorTakesValue,
+} from './conditionOperators.js'
+export default CnConditionListEditor

package/src/components/CnDetailPage/CnDetailPage.md

@@ -184,6 +184,7 @@ export default {
 | `loadingLabel` | String | `'Loading...'` | Message shown below the spinner during loading |
 | `band` | Array | `[]` | A row of widgets across the whole page, above the body and the side column (manifest `config.band`). Each entry is a widget id from `widgets`, a widget definition, or `{ widgetId, span, chrome }`: `span` is the entry's share of the row in twelfths (default 12), and `chrome` is `card` or `bare` (a banner defaults to bare). Each entry follows its `visibleWhen`. |
 | `recordLastChange` | Boolean | `false` | Read who changed the record last (as `headerMetaLastChange` does) for the widgets on the page: a facts card reads it as `_lastChange.userName` / `_lastChange.created` (DqContact "Historie"). |
+| `cardButtons` (`card-buttons`) | String | `'compact'` | How tall the labelled buttons in the page's card title rows stand in the board look: `compact` (34px, setting and case-type pages) or `regular` (the 40px control height, the case page's tab cards: DqZaakContact "Live gesprek"). Manifest `config.cardButtons`. |
 | `pageFilters` | Array | `[]` | Page-level filters (manifest `config.pageFilters`), as on a dashboard: each writes its choice into the page's workspace context, which the widgets read through `@page.<key>` / `@workspace.<key>`. Drawn in the band, above its widgets (PtPortal "Periode"). |
 | `sidebarOpen` | Boolean | `true` | Whether the sidebar starts expanded |
 | `objectType` | String | `''` | Registered object type slug for the sidebar |

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -23,7 +23,7 @@
 <template>
 	<div
 		class="cn-detail-page"
-		:class="[{ 'cn-detail-page--with-side': showsSideColumn }, boardClass]"
+		:class="[{ 'cn-detail-page--with-side': showsSideColumn, 'cn-detail-page--card-buttons-regular': cardButtons === 'regular' }, boardClass]"
 		data-testid="cn-detail-page"
 		:style="{ maxWidth: maxWidth }">
 		<!-- Skip link to the page's primary action. Off screen until it takes
@@ -1841,6 +1841,18 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * How tall the labelled buttons in the page's card title rows stand in
+		 * the board look: `compact` (34px, setting and case-type pages) or
+		 * `regular` (the 40px control height, the case page's tab cards:
+		 * DqZaakContact "Live gesprek"). Manifest `config.cardButtons`.
+		 */
+		cardButtons: {
+			type: String,
+			default: 'compact',
+			validator: (value) => ['compact', 'regular'].includes(value),
+		},
+
 		/**
 		 * NcDialog size for this page's create and edit form dialogs.
 		 *

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -8931,7 +8931,14 @@ export default {
 			deep: true,
 		},
 
-		'$route.query._view': function() {
+		'$route.query._view': function(now, before) {
+			// Leaving the mode's address (a plain link to the page) leaves the
+			// mode it opened, unless the person picked another one since.
+			if ((typeof now !== 'string' || now === '') && typeof before === 'string' && before !== '' && before === this.currentViewMode) {
+				this.routeViewPending = false
+				this.currentViewMode = this.viewMode
+				return
+			}
 			this.applyViewModeFromRoute()
 		},