@conduction/nextcloud-vue 2.100.0 → 2.101.0

package/src/components/CnOrderedListField/CnOrderedListField.vue

@@ -17,7 +17,30 @@
 				v-for="(row, index) in rows"
 				:key="row.value"
 				class="cn-ordered-list-field__row"
-				:data-testid="`cn-ordered-list-row-${row.value}`">
+				:class="{
+					'cn-ordered-list-field__row--dragging': dragIndex === index,
+					'cn-ordered-list-field__row--over': dropIndex === index && dragIndex !== index,
+				}"
+				:data-testid="`cn-ordered-list-row-${row.value}`"
+				@dragover.prevent="onDragOver(index)"
+				@drop.prevent="onDrop(index)">
+				<!-- A drag handle (DqPersoonlijkeInstellingen). It is a button: a
+				     keyboard user moves the row with the arrow keys on it, and the
+				     up and down buttons stay for anyone who neither drags nor uses
+				     arrow keys. -->
+				<button
+					v-if="!disabled"
+					type="button"
+					class="cn-ordered-list-field__handle"
+					draggable="true"
+					:aria-label="t('nextcloud-vue', 'Reorder {item}: drag, or press the up and down arrow keys', { item: row.label })"
+					:data-testid="`cn-ordered-list-handle-${row.value}`"
+					@dragstart="onDragStart($event, index)"
+					@dragend="onDragEnd"
+					@keydown.up.prevent="move(index, index - 1, 'handle')"
+					@keydown.down.prevent="move(index, index + 1, 'handle')">
+					<DragVertical :size="20" />
+				</button>
 				<span class="cn-ordered-list-field__position" aria-hidden="true">{{ index + 1 }}</span>
 				<span v-if="row.icon" class="cn-ordered-list-field__tile" aria-hidden="true">
 					<CnIcon :name="row.icon" :size="18" />
@@ -104,6 +127,7 @@ import { NcSelect } from '@nextcloud/vue'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import Close from 'vue-material-design-icons/Close.vue'
+import DragVertical from 'vue-material-design-icons/DragVertical.vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
 
 let orderedListUid = 0
@@ -134,7 +158,7 @@ let orderedListUid = 0
 export default {
 	name: 'CnOrderedListField',
 
-	components: { ChevronDown, ChevronUp, Close, CnIcon, NcSelect },
+	components: { ChevronDown, ChevronUp, Close, CnIcon, DragVertical, NcSelect },
 
 	props: {
 		/** The values in their order. */
@@ -205,6 +229,12 @@ export default {
 		return {
 			labelId: `cn-ordered-list-label-${orderedListUid}`,
 			announcement: '',
+			/** The value whose handle takes focus after the next render, or null. */
+			pendingHandleFocus: null,
+			/** The index of the row being dragged, or -1. */
+			dragIndex: -1,
+			/** The index of the row the drag is over, or -1. */
+			dropIndex: -1,
 		}
 	},
 
@@ -244,6 +274,20 @@ export default {
 		},
 	},
 
+	watch: {
+		// The parent's new order arrives as new rows; the moved row's handle
+		// lost focus when its row moved in the DOM, so it takes it back.
+		rows: {
+			flush: 'post',
+			handler() {
+				if (this.pendingHandleFocus !== null) {
+					this.focusPendingHandle()
+					this.pendingHandleFocus = null
+				}
+			},
+		},
+	},
+
 	methods: {
 		t,
 
@@ -270,13 +314,15 @@ export default {
 		},
 
 		/**
-		 * Move a row to another place and keep focus on the pressed button
-		 * where it still makes sense.
+		 * Move a row to another place and keep focus on the pressed control
+		 * where it still makes sense: the row's handle after an arrow key on
+		 * it, else the up or down button.
 		 *
 		 * @param {number} from Its index.
 		 * @param {number} to The index it moves to.
+		 * @param {string} [via] `handle` when the move came from the handle.
 		 */
-		move(from, to) {
+		move(from, to, via = '') {
 			if (to < 0 || to >= this.rows.length) {
 				return
 			}
@@ -286,7 +332,16 @@ export default {
 			const row = this.rows[from]
 			this.emitValue(values)
 			this.announcement = t('nextcloud-vue', '{item} moved to position {position} of {total}', { item: row.label, position: to + 1, total: values.length })
+			if (via === 'handle') {
+				// Re-focused once the parent hands the new order back: moving the
+				// row in the DOM takes focus off its handle.
+				this.pendingHandleFocus = row.value
+			}
 			this.$nextTick(() => {
+				if (via === 'handle') {
+					this.focusPendingHandle()
+					return
+				}
 				const direction = to < from ? 'up' : 'down'
 				const atEdge = (direction === 'up' && to === 0) || (direction === 'down' && to === values.length - 1)
 				const target = this.$el.querySelector(`[data-testid="cn-ordered-list-${atEdge ? (direction === 'up' ? 'down' : 'up') : direction}-${row.value}"]`)
@@ -296,6 +351,61 @@ export default {
 			})
 		},
 
+		/** Put focus back on the handle of the row just moved by its handle. */
+		focusPendingHandle() {
+			if (this.pendingHandleFocus === null) {
+				return
+			}
+			const handle = this.$el.querySelector(`[data-testid="cn-ordered-list-handle-${this.pendingHandleFocus}"]`)
+			if (handle) {
+				handle.focus()
+			}
+		},
+
+		/**
+		 * Start dragging a row by its handle.
+		 *
+		 * @param {DragEvent} event The drag event.
+		 * @param {number} index The row's index.
+		 */
+		onDragStart(event, index) {
+			this.dragIndex = index
+			if (event && event.dataTransfer) {
+				event.dataTransfer.effectAllowed = 'move'
+				event.dataTransfer.setData('text/plain', String(this.rows[index].value))
+			}
+		},
+
+		/**
+		 * Mark the row a drag is over as where the row will land.
+		 *
+		 * @param {number} index The row's index.
+		 */
+		onDragOver(index) {
+			if (this.dragIndex !== -1) {
+				this.dropIndex = index
+			}
+		},
+
+		/**
+		 * Drop the dragged row in the place of the row it is over.
+		 *
+		 * @param {number} index The row's index.
+		 */
+		onDrop(index) {
+			const from = this.dragIndex
+			this.onDragEnd()
+			if (from !== -1 && from !== index) {
+				this.move(from, index, 'handle')
+			}
+		},
+
+		/** End a drag, dropped or not. */
+		onDragEnd() {
+			this.dragIndex = -1
+			this.dropIndex = -1
+		},
+
 		/**
 		 * Remove a row.
 		 *
@@ -371,6 +481,42 @@ export default {
 	border-top: 1px solid var(--color-border);
 }
 
+.cn-ordered-list-field__row--dragging {
+	opacity: 0.5;
+}
+
+/* Where a dragged row will land: a primary line on the row's top edge. */
+.cn-ordered-list-field__row--over {
+	box-shadow: inset 0 2px 0 var(--color-primary-element);
+}
+
+.cn-ordered-list-field__handle {
+	display: inline-flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	min-width: 28px;
+	height: 34px;
+	min-height: 34px;
+	margin: 0 -6px 0 -8px;
+	padding: 0;
+	border: 0;
+	border-radius: var(--border-radius-element, 8px);
+	background: transparent;
+	color: var(--color-text-maxcontrast);
+	cursor: grab;
+}
+
+.cn-ordered-list-field__handle:active {
+	cursor: grabbing;
+}
+
+.cn-ordered-list-field__handle:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 1px;
+}
+
 .cn-ordered-list-field__position {
 	flex: none;
 	min-width: 18px;

package/src/components/CnSavedViewAlertWidget/CnSavedViewAlertWidget.vue

@@ -0,0 +1,272 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V.
+  - SPDX-License-Identifier: EUPL-1.2
+-->
+<template>
+	<div class="cn-saved-view-alert" data-testid="cn-saved-view-alert">
+		<p v-if="!view" class="cn-saved-view-alert__empty" data-testid="cn-saved-view-alert-empty">
+			{{ emptyText }}
+		</p>
+		<template v-else>
+			<dl class="cn-saved-view-alert__facts">
+				<dt>{{ t('nextcloud-vue', 'Name') }}</dt>
+				<dd data-testid="cn-saved-view-alert-name">
+					{{ view.name }}
+				</dd>
+				<template v-if="countText">
+					<dt>{{ t('nextcloud-vue', 'Now') }}</dt>
+					<dd data-testid="cn-saved-view-alert-count">
+						{{ countText }}
+					</dd>
+				</template>
+			</dl>
+			<NcCheckboxRadioSwitch
+				type="switch"
+				:modelValue="enabled"
+				:disabled="saving || !canEdit"
+				data-testid="cn-saved-view-alert-switch"
+				@update:modelValue="onToggle">
+				<span class="cn-saved-view-alert__switch-text">
+					<span>{{ t('nextcloud-vue', 'Tell me above a number') }}</span>
+					<span class="cn-saved-view-alert__hint">{{ hintText }}</span>
+				</span>
+			</NcCheckboxRadioSwitch>
+			<NcTextField v-if="enabled"
+				:modelValue="String(threshold)"
+				type="number"
+				min="0"
+				:label="t('nextcloud-vue', 'Threshold')"
+				:disabled="saving || !canEdit"
+				data-testid="cn-saved-view-alert-threshold"
+				@update:modelValue="onThreshold" />
+			<p v-if="error"
+				class="cn-saved-view-alert__error"
+				role="alert"
+				data-testid="cn-saved-view-alert-error">
+				{{ error }}
+			</p>
+		</template>
+	</div>
+</template>
+
+<script>
+import { getCurrentUser } from '@nextcloud/auth'
+import { translatePlural as n, translate as t } from '@nextcloud/l10n'
+import { NcCheckboxRadioSwitch, NcTextField } from '@nextcloud/vue'
+import { useSavedViewsApi } from '../../composables/useSavedViewsApi.js'
+
+/**
+ * CnSavedViewAlertWidget — the saved view an index page has applied, with its
+ * count alert (DqZoekresultaten "Opgeslagen zoekopdracht"): its name, how many
+ * rows it holds now, and a switch that asks OpenRegister to tell the reader
+ * when the count reaches a threshold.
+ *
+ * The alert is the view's own `alert` (`{ operator: 'gte', threshold,
+ * recipients }`), saved with a PATCH on the view; OpenRegister evaluates it on
+ * its sweep and fires on the crossing, not on the state. Switching it off
+ * clears it. The widget reads the page through the `cnIndexList` CnIndexPage
+ * provides, so it belongs in an index page's `sidePanel`
+ * (`type: "saved-view-alert"`).
+ *
+ * Example (manifest):
+ * ```json
+ * { "id": "alert", "type": "saved-view-alert", "title": "Saved search", "content": { "noun": { "one": "case", "other": "cases" } } }
+ * ```
+ */
+export default {
+	name: 'CnSavedViewAlertWidget',
+
+	components: { NcCheckboxRadioSwitch, NcTextField },
+
+	inject: {
+		/** The index page's list: its applied saved view and its total. */
+		cnIndexList: { default: null },
+		/** Host translate function provided by CnAppRoot. */
+		cnTranslate: { default: () => (key) => key },
+	},
+
+	props: {
+		/**
+		 * The widget content: `{ noun?: { one, other }, emptyText? }`. `noun`
+		 * names what is counted ("9 zaken"); `emptyText` shows while no saved
+		 * view is applied. Both are translated with the app's catalogue.
+		 */
+		content: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+
+	data() {
+		return { saving: false, error: '', draft: null }
+	},
+
+	computed: {
+		/** @return {object|null} The applied saved view, or null. */
+		view() {
+			return (this.cnIndexList && this.cnIndexList.appliedView) || null
+		},
+
+		/** @return {boolean} Whether the view carries an alert. */
+		enabled() {
+			const alert = this.view && this.view.alert
+			return Boolean(alert && typeof alert === 'object' && Number.isFinite(Number(alert.threshold)))
+		},
+
+		/** @return {number} The threshold being edited, else the view's, else 10. */
+		threshold() {
+			if (this.draft !== null) {
+				return this.draft
+			}
+			const value = this.enabled ? Number(this.view.alert.threshold) : 10
+			return Number.isFinite(value) ? value : 10
+		},
+
+		/** @return {boolean} Whether the reader may change the view: its owner, or when the view says nothing. */
+		canEdit() {
+			const owner = this.view && this.view.owner
+			if (!owner) {
+				return true
+			}
+			const user = getCurrentUser()
+			return Boolean(user && user.uid === owner)
+		},
+
+		/** @return {string} "9 zaken", or '' while the total is unknown. */
+		countText() {
+			const total = this.cnIndexList ? this.cnIndexList.total : undefined
+			if (typeof total !== 'number') {
+				return ''
+			}
+			const noun = this.content && this.content.noun
+			if (noun && typeof noun === 'object' && noun.one && noun.other) {
+				return `${total} ${this.cnTranslate(total === 1 ? noun.one : noun.other)}`
+			}
+			return n('nextcloud-vue', '%n result', '%n results', total)
+		},
+
+		/** @return {string} The line under the switch. */
+		hintText() {
+			return t('nextcloud-vue', 'A message to you when there are {threshold} or more', { threshold: this.threshold })
+		},
+
+		/** @return {string} What shows while no saved view is applied. */
+		emptyText() {
+			const own = this.content && this.content.emptyText
+			return own ? this.cnTranslate(own) : t('nextcloud-vue', 'Save this search or open a saved one to set an alert on it.')
+		},
+	},
+
+	methods: {
+		t,
+
+		/**
+		 * Switch the alert on (at the shown threshold) or off.
+		 *
+		 * @param {boolean} on The new state.
+		 * @return {Promise<void>}
+		 */
+		async onToggle(on) {
+			await this.save(on ? this.alertFor(this.threshold) : null)
+		},
+
+		/**
+		 * Save a new threshold, when the alert is on.
+		 *
+		 * @param {string} value The typed value.
+		 * @return {Promise<void>}
+		 */
+		async onThreshold(value) {
+			const number = Math.max(0, Math.floor(Number(value)))
+			if (!Number.isFinite(number)) {
+				return
+			}
+			this.draft = number
+			await this.save(this.alertFor(number))
+			this.draft = null
+		},
+
+		/**
+		 * The alert the view stores: reaching the threshold tells the reader.
+		 *
+		 * @param {number} threshold The threshold.
+		 * @return {{operator: string, threshold: number, recipients: Array<string>}}
+		 */
+		alertFor(threshold) {
+			const user = getCurrentUser()
+			return { operator: 'gte', threshold, recipients: user && user.uid ? [user.uid] : [] }
+		},
+
+		/**
+		 * PATCH the view's alert and hand the saved view back to the page.
+		 *
+		 * @param {object|null} alert The alert, or null to clear it.
+		 * @return {Promise<void>}
+		 */
+		async save(alert) {
+			if (!this.view) {
+				return
+			}
+			this.saving = true
+			this.error = ''
+			try {
+				const saved = await useSavedViewsApi().patchView(this.view.uuid || this.view.id, { alert })
+				if (saved && this.cnIndexList && typeof this.cnIndexList.replaceSavedView === 'function') {
+					this.cnIndexList.replaceSavedView(saved)
+				}
+			} catch (error) {
+				this.error = (error && error.response && error.response.data && error.response.data.error) || t('nextcloud-vue', 'The alert could not be saved.')
+			} finally {
+				this.saving = false
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-saved-view-alert {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	font-size: 14px;
+}
+
+.cn-saved-view-alert__facts {
+	display: grid;
+	grid-template-columns: max-content 1fr;
+	gap: 6px 16px;
+	margin: 0;
+}
+
+.cn-saved-view-alert__facts dt {
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-saved-view-alert__facts dd {
+	margin: 0;
+	font-weight: 500;
+}
+
+.cn-saved-view-alert__switch-text {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.cn-saved-view-alert__hint,
+.cn-saved-view-alert__empty {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
+.cn-saved-view-alert__empty,
+.cn-saved-view-alert__error {
+	margin: 0;
+}
+
+.cn-saved-view-alert__error {
+	color: var(--color-error-text, var(--color-error));
+	font-size: 13px;
+}
+</style>

package/src/components/CnSavedViewAlertWidget/index.js

@@ -0,0 +1,7 @@
+// SPDX-FileCopyrightText: 2026 Conduction B.V.
+// SPDX-License-Identifier: EUPL-1.2
+
+import CnSavedViewAlertWidget from './CnSavedViewAlertWidget.vue'
+
+export default CnSavedViewAlertWidget
+export { CnSavedViewAlertWidget }

package/src/components/CnSetupWizard/CnSetupWizard.vue

@@ -438,7 +438,7 @@ export default {
 	 */
 	setup(props) {
 		const { isBoard } = useLook()
-		const wantsSource = (props.steps || []).some((s) => s && s.optionsSource)
+		const wantsSource = (props.steps || []).some((s) => s && (s.optionsSource || s.visibleWhen))
 		if (!wantsSource) {
 			return { isBoard }
 		}
@@ -506,7 +506,7 @@ export default {
 
 		setupSteps() {
 			const skipped = new Set(this.skippedSteps.map((entry) => entry.step.id))
-			return this.declaredSteps.filter((s) => !skipped.has(s.id))
+			return this.declaredSteps.filter((s) => !skipped.has(s.id) && this.stepConditionHolds(s))
 		},
 
 		/**
@@ -869,6 +869,39 @@ export default {
 			})
 		},
 
+		/**
+		 * Whether a step's `visibleWhen` holds: the value at that path in the
+		 * setup status (`"flags.hasPayouts"`, dots walk into objects) is truthy,
+		 * or equals `equals` when the step gives `{ path, equals }`. A step
+		 * without `visibleWhen` always shows; one with it stays hidden until the
+		 * status says so, also while the status loads (DqInstellen: the dwangsom
+		 * step only when the app pays penalties).
+		 *
+		 * @param {object} step The step declaration.
+		 * @return {boolean}
+		 */
+		stepConditionHolds(step) {
+			const when = step && step.visibleWhen
+			if (when === undefined || when === null || when === '') {
+				return true
+			}
+			const path = typeof when === 'string' ? when : when.path
+			if (typeof path !== 'string' || path === '') {
+				return true
+			}
+			let node = this.setupStatus
+			for (const key of path.split('.')) {
+				if (node === null || node === undefined || typeof node !== 'object') {
+					return false
+				}
+				node = node[key]
+			}
+			if (typeof when === 'object' && Object.hasOwn(when, 'equals')) {
+				return node === when.equals
+			}
+			return Boolean(node)
+		},
+
 		/**
 		 * The option list a `choice` step declares `optionsSource` for, read
 		 * from the setup status document the app already serves.

package/src/components/CnWidgetGrid/builtInWidgets.js

@@ -17,6 +17,7 @@
 import CnAuditTrailWidget from '../CnAuditTrailWidget/CnAuditTrailWidget.vue'
 import CnBannerWidget from '../CnBannerWidget/CnBannerWidget.vue'
 import CnDividerWidget from '../CnDividerWidget/CnDividerWidget.vue'
+import CnExportsWidget from '../CnExportsWidget/CnExportsWidget.vue'
 import CnHeaderWidget from '../CnHeaderWidget/CnHeaderWidget.vue'
 import CnIntegrationWidget from '../CnIntegrationWidget/CnIntegrationWidget.vue'
 import CnNavCardGrid from '../CnNavCardGrid/CnNavCardGrid.vue'
@@ -24,6 +25,7 @@ import CnObjectDataWidget from '../CnObjectDataWidget/CnObjectDataWidget.vue'
 import CnObjectGeoWidget from '../CnObjectGeoWidget/CnObjectGeoWidget.vue'
 import CnObjectMetadataWidget from '../CnObjectMetadataWidget/CnObjectMetadataWidget.vue'
 import CnRelatedObjectsWidget from '../CnRelatedObjectsWidget/CnRelatedObjectsWidget.vue'
+import CnSavedViewAlertWidget from '../CnSavedViewAlertWidget/CnSavedViewAlertWidget.vue'
 import CnTextWidget from '../CnTextWidget/CnTextWidget.vue'
 import CnTimelineWidget from '../CnTimelineWidget/CnTimelineWidget.vue'
 import CnWidgetCardGrid from '../CnWidgetCardGrid/CnWidgetCardGrid.vue'
@@ -89,4 +91,6 @@ export const BUILT_IN_WIDGETS = {
 	header: CnHeaderWidget,
 	text: CnTextWidget,
 	divider: CnDividerWidget,
+	'saved-view-alert': CnSavedViewAlertWidget,
+	exports: CnExportsWidget,
 }

package/src/components/CnWidgetGrid/registerDashboardWidgets.js

@@ -75,6 +75,7 @@ import '../CnTasksWidget/index.js'
 import '../CnSectionsWidget/index.js'
 import '../CnFactsWidget/index.js'
 import '../CnDeviceFramesWidget/index.js'
+import '../CnGroupedCardsWidget/index.js'
 import '../CnChecklistRunWidget/index.js'
 import '../CnWorkingCalendarWidget/index.js'
 import '../CnPartyActionsWidget/index.js'

package/src/components/index.js

@@ -30,6 +30,8 @@ export { CnDateAxisView } from './CnDateAxisView/index.js'
 export { CnObjectRow } from './CnObjectRow/index.js'
 export { CnObjectList } from './CnObjectList/index.js'
 export { CnOrderedListField } from './CnOrderedListField/index.js'
+export { CnExportsWidget } from './CnExportsWidget/index.js'
+export { CnSavedViewAlertWidget } from './CnSavedViewAlertWidget/index.js'
 export { CnObjectKanban } from './CnObjectKanban/index.js'
 export { CnObjectCalendar } from './CnObjectCalendar/index.js'
 export { CnFolderTree } from './CnFolderTree/index.js'
@@ -224,6 +226,7 @@ export { CnTasksWidgetForm } from './CnTasksWidgetForm/index.js'
 export { CnSectionsWidget } from './CnSectionsWidget/index.js'
 export { CnFactsWidget } from './CnFactsWidget/index.js'
 export { CnDeviceFramesWidget } from './CnDeviceFramesWidget/index.js'
+export { CnGroupedCardsWidget } from './CnGroupedCardsWidget/index.js'
 export { CnChecklistRunWidget } from './CnChecklistRunWidget/index.js'
 export { CnWorkingCalendarWidget } from './CnWorkingCalendarWidget/index.js'
 export { CnPartyActionsWidget } from './CnPartyActionsWidget/index.js'