@conduction/nextcloud-vue 2.100.0 → 2.102.0

package/src/components/CnMenuWidget/CnMenuWidget.vue

@@ -239,6 +239,11 @@ export default {
 		CnMenuItemIcon,
 	},
 
+	inject: {
+		/** Host translate function provided by CnAppRoot, for the item labels. */
+		cnTranslate: { default: () => (key) => key },
+	},
+
 	props: {
 		/**
 		 * Persisted widget content `{items, style, orientation, showIcons,
@@ -288,7 +293,26 @@ export default {
 		 */
 		items() {
 			const arr = this.content?.items
-			return Array.isArray(arr) ? arr : []
+			if (!Array.isArray(arr)) {
+				return []
+			}
+			// Labels are manifest strings: they go through the app's translate,
+			// children included, so "Case types" reads "Zaaktypen" (DqCatalogus).
+			const translate = typeof this.cnTranslate === 'function' ? this.cnTranslate : (key) => key
+			const translated = (list) => list.map((item) => {
+				if (!item || typeof item !== 'object') {
+					return item
+				}
+				const out = { ...item }
+				if (typeof item.label === 'string' && item.label !== '') {
+					out.label = translate(item.label)
+				}
+				if (Array.isArray(item.children)) {
+					out.children = translated(item.children)
+				}
+				return out
+			})
+			return translated(arr)
 		},
 
 		/**

package/src/components/CnObjectListWidget/CnObjectListWidget.vue

@@ -233,6 +233,15 @@
 				{{ moreLabel }}
 			</p>
 		</template>
+		<!-- `content.footnote`: a line under the table ("Awb 4:17 en 4:18"),
+		     through the host translate. Not while the list waits for its
+		     context or failed to load. -->
+		<p
+			v-if="resolvedFootnote && !waitingForContext && !error"
+			class="cn-object-list-widget__footnote"
+			data-testid="cn-object-list-widget-footnote">
+			{{ resolvedFootnote }}
+		</p>
 		<!-- Create affordance (ADR-062): every collection carries its Add at
 		     the bottom of the widget; the host card's Actions menu calls the
 		     same openCreate() through the public method. Suppressed while the
@@ -430,8 +439,10 @@ export default {
 		 * `hideHeader: true` drops the table's column header row (CnDataTable's
 		 * `hideHeader`), for a short list that reads as rows, not as a table.
 		 *
+		 * `footnote` is a line under the table, through the host translate.
+		 *
 		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-small-opt-ins-from-the-decidiq-and-learniq-lanes
-		 * @type {{register?: string, schema?: string, filter?: object, sort?: {field?: string, dir?: string}, limit?: number, extend?: Array<string>, columns?: Array, rowActions?: Array<object>, dropZone?: object, upload?: boolean, groupBy?: string, groupLabel?: string, groupLabelResolve?: {register: string, schema: string, labelField?: string}, selectable?: boolean, bulkActions?: Array<object>, sortable?: boolean, facet?: {field: string, label?: string}, rowRoute?: string, prompt?: string, emptyText?: string, viewAllRoute?: string, viewAllQuery?: object, hideHeader?: boolean}}
+		 * @type {{register?: string, schema?: string, filter?: object, sort?: {field?: string, dir?: string}, limit?: number, extend?: Array<string>, columns?: Array, rowActions?: Array<object>, dropZone?: object, upload?: boolean, groupBy?: string, groupLabel?: string, groupLabelResolve?: {register: string, schema: string, labelField?: string}, selectable?: boolean, bulkActions?: Array<object>, sortable?: boolean, facet?: {field: string, label?: string}, rowRoute?: string, prompt?: string, emptyText?: string, footnote?: string, viewAllRoute?: string, viewAllQuery?: object, hideHeader?: boolean}}
 		 */
 		content: {
 			type: Object,
@@ -918,6 +929,17 @@ export default {
 			return this.emptyText ? fn(this.emptyText) : this.emptyText
 		},
 
+		/**
+		 * `content.footnote` run through the host translate function, or ''.
+		 *
+		 * @return {string}
+		 */
+		resolvedFootnote() {
+			const note = typeof this.content.footnote === 'string' ? this.content.footnote : ''
+			const fn = typeof this.cnTranslate === 'function' ? this.cnTranslate : (k) => k
+			return note ? fn(note) : ''
+		},
+
 		/**
 		 * The rows actually rendered: capped to what fits the host grid cell
 		 * (ADR-062 — content adapts to the cell, never a nested scrollbar).
@@ -2027,6 +2049,12 @@ export default {
 	padding: 4px;
 }
 
+.cn-object-list-widget__footnote {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+	margin: 8px 0 0;
+}
+
 /* Footer Add — same pattern as the integration leaves' footer action
    ("Open in Calendar"): full-width, centered, divider-topped, pinned to
    the card bottom. */

package/src/components/CnObjectSidebar/CnFilesTab.vue

@@ -15,6 +15,11 @@
 			:dropHint="dropHint"
 			:rowActions="rowActions"
 			:newActions="newActions"
+			:headerActions="headerActions"
+			:rowButton="rowButton"
+			:reviewSummary="reviewSummary"
+			:footnote="footnote"
+			:nameSecondary="nameSecondary"
 			:linkedItems="linkedItems"
 			:columns="columns"
 			:rowData="rowDataSource"
@@ -420,6 +425,16 @@ export default {
 		 * @type {string[]}
 		 */
 		facets: { type: Array, default: () => [] },
+		/** Forwarded to CnFilesBrowser: the host's own buttons in the bar. */
+		headerActions: { type: Array, default: () => [] },
+		/** Forwarded to CnFilesBrowser: one visible button on every file row. */
+		rowButton: { type: Object, default: null },
+		/** Forwarded to CnFilesBrowser: the review summary above the list. */
+		reviewSummary: { type: Object, default: null },
+		/** Forwarded to CnFilesBrowser: the host's own line under the list. */
+		footnote: { type: String, default: '' },
+		/** Forwarded to CnFilesBrowser: the second line under each file's name. */
+		nameSecondary: { type: String, default: '' },
 		/** A dotted path to the list of records in the `rowDataUrl` answer; empty reads the answer itself. */
 		rowDataPath: { type: String, default: '' },
 		/** The record field that holds the Nextcloud file id. */

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/CnQuickFilterBar/CnQuickFilterBar.md

@@ -59,6 +59,7 @@ In `manifest.json` (the usual entry-point — CnIndexPage mounts the bar for you
 - `selectLabel` (String, default `'Filter'`) — accessible label / placeholder for the dropdown control.
 - `placeholder` (String) — placeholder text for the dropdown (falls back to `selectLabel`).
 - `maxVisible` (Number, default `0`) — chips mode only: how many pills render inline before the rest move behind one more chip, a `⋯` pill that opens a small panel of the hidden lenses (also as chips). `0` renders every tab. The visible set is the first `maxVisible` entries of `tabs`, so their declared order decides what stays in the strip; an active hidden tab moves its label and fill onto that chip. Manifest: `config.quickFilterMaxVisible`.
+- `fit` (Boolean, default `false`) — chips mode only: show as many chips as the bar's own width holds and move the rest behind the overflow chip, measured again when the width, the tabs or the counts change. The bar takes the room its parent gives it; CnIndexPage's `quickFilterPlacement: "toolbar"` gives it what the Filter button and the view switch leave on their row. With `maxVisible` too, the smaller of the two wins.
 - `counts` (Object or Array, default `null`): how many records each tab matches, keyed by tab index. A tab with a number shows it after its label. CnIndexPage fills this for tabs that set `showCount`.
 
 ### Events

package/src/components/CnQuickFilterBar/CnQuickFilterBar.vue

@@ -24,8 +24,28 @@
 	</div>
 	<!-- Chips mode (default): the clickable tab strip. -->
 	<div v-else
+		ref="chipsRoot"
 		class="cn-quick-filter-bar"
-		:class="{ 'cn-quick-filter-bar--inline': inline }">
+		:class="{ 'cn-quick-filter-bar--inline': inline, 'cn-quick-filter-bar--fit': fit }">
+		<!-- With `fit`: an invisible copy of every chip and the overflow chip,
+		     measured to work out how many chips the bar's width holds. -->
+		<div v-if="fit"
+			ref="measure"
+			class="cn-quick-filter-bar__measure"
+			aria-hidden="true">
+			<span v-for="entry in entries"
+				:key="'m:' + entry.tab.label + ':' + entry.index"
+				class="cn-quick-filter-bar__tab"
+				:class="{ 'cn-quick-filter-bar__tab--active': isChipActive(entry.index) }"
+				data-measure="chip">
+				<span class="cn-quick-filter-bar__label">{{ tl(entry.tab.label) }}</span>
+				<span v-if="countOf(entry) !== null" class="cn-quick-filter-bar__count">{{ ' ' + countOf(entry) }}</span>
+			</span>
+			<span class="cn-quick-filter-bar__tab cn-quick-filter-bar__more" data-measure="more">
+				<span v-if="overflowLabel" class="cn-quick-filter-bar__label">{{ overflowLabel }}</span>
+				<DotsHorizontal :size="16" class="cn-quick-filter-bar__icon" />
+			</span>
+		</div>
 		<!-- The tablist holds ONLY tabs: the overflow chip is a sibling, not a
 		     child, because a role="tablist" may not contain a menu button. -->
 		<!-- Board look: the tabs are chips, pressed buttons in a group, not a
@@ -266,6 +286,19 @@ export default {
 			type: [Object, Array],
 			default: null,
 		},
+
+		/**
+		 * Chips mode only: show as many chips as the bar's own width holds and
+		 * move the rest into the overflow chip, measured again whenever the
+		 * width, the tabs or the counts change. The bar takes the room it is
+		 * given (CnIndexPage's `quickFilterPlacement: "toolbar"` gives it what
+		 * the Filter button and the view switch leave on their row). With
+		 * `maxVisible` too, the smaller of the two wins.
+		 */
+		fit: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	emits: ['update:active-index', 'update:selected-indices'],
@@ -274,6 +307,8 @@ export default {
 		return {
 			/** Whether the overflow chip's panel is open. */
 			moreOpen: false,
+			/** With `fit`: how many chips the width holds; null before the first measure. */
+			fitCount: null,
 		}
 	},
 
@@ -303,10 +338,24 @@ export default {
 		 * @return {Array<{tab: object, index: number}>}
 		 */
 		visibleEntries() {
-			if (!this.maxVisible || this.tabs.length <= this.maxVisible) {
+			const limit = this.effectiveMax
+			if (!limit || this.tabs.length <= limit) {
 				return this.entries
 			}
-			return this.entries.slice(0, this.maxVisible)
+			return this.entries.slice(0, limit)
+		},
+
+		/**
+		 * How many chips render: `maxVisible`, and with `fit` no more than the
+		 * width holds; 0 for no limit.
+		 *
+		 * @return {number}
+		 */
+		effectiveMax() {
+			if (!this.fit || this.fitCount === null) {
+				return this.maxVisible
+			}
+			return this.maxVisible ? Math.min(this.maxVisible, this.fitCount) : this.fitCount
 		},
 
 		/**
@@ -316,10 +365,11 @@ export default {
 		 * @return {Array<{tab: object, index: number}>}
 		 */
 		overflowEntries() {
-			if (!this.maxVisible || this.tabs.length <= this.maxVisible) {
+			const limit = this.effectiveMax
+			if (!limit || this.tabs.length <= limit) {
 				return []
 			}
-			return this.entries.slice(this.maxVisible)
+			return this.entries.slice(limit)
 		},
 
 		/**
@@ -399,7 +449,79 @@ export default {
 		},
 	},
 
+	watch: {
+		tabs() {
+			this.scheduleFit()
+		},
+
+		counts: {
+			deep: true,
+			handler() {
+				this.scheduleFit()
+			},
+		},
+	},
+
+	mounted() {
+		if (this.fit && typeof ResizeObserver === 'function' && this.$refs.chipsRoot) {
+			this.fitObserver = new ResizeObserver(() => this.measureFit())
+			this.fitObserver.observe(this.$refs.chipsRoot)
+		}
+		this.scheduleFit()
+	},
+
+	beforeUnmount() {
+		if (this.fitObserver) {
+			this.fitObserver.disconnect()
+			this.fitObserver = null
+		}
+	},
+
 	methods: {
+		/** Measure the fit after the next render. */
+		scheduleFit() {
+			if (this.fit) {
+				this.$nextTick(() => this.measureFit())
+			}
+		},
+
+		/**
+		 * Work out how many chips the bar's width holds, from the invisible
+		 * copy: every chip that fits, and when not all do, room left for the
+		 * overflow chip. At least one chip always shows.
+		 */
+		measureFit() {
+			const box = this.$refs.measure
+			const root = this.$refs.chipsRoot
+			if (!this.fit || !box || !root) {
+				return
+			}
+			const available = root.clientWidth
+			const chips = [...box.querySelectorAll('[data-measure="chip"]')].map((el) => el.offsetWidth)
+			const more = box.querySelector('[data-measure="more"]')
+			const moreWidth = more ? more.offsetWidth : 0
+			const gap = parseFloat(getComputedStyle(box).columnGap) || 8
+			if (available <= 0 || chips.length === 0) {
+				this.fitCount = null
+				return
+			}
+			const total = chips.reduce((sum, width) => sum + width, 0) + gap * (chips.length - 1)
+			if (total <= available) {
+				this.fitCount = null
+				return
+			}
+			let used = moreWidth
+			let count = 0
+			for (const width of chips) {
+				if (used + gap + width > available) {
+					break
+				}
+				used += gap + width
+				count++
+			}
+			this.fitCount = Math.max(1, count)
+		},
+
 		/**
 		 * A manifest string through the host's label lookup (`cnTranslate`), so a key
 		 * such as "Mine" reads in the user's language.
@@ -531,6 +653,38 @@ export default {
 /* Inline variant — bare strip for embedding inside another bar (e.g. the
    CnActionsBar #filters slot), so it reads as a control beside the view toggle
    rather than a separate bordered row. */
+/* With `fit`: one line, as wide as it is given; the chips it cannot hold
+   are in the overflow chip. The measuring copy takes no room and is never
+   seen or read. */
+.cn-quick-filter-bar--fit {
+	position: relative;
+	flex-wrap: nowrap;
+	min-width: 0;
+}
+
+.cn-quick-filter-bar--fit .cn-quick-filter-bar__tabs {
+	flex-wrap: nowrap;
+	min-width: 0;
+}
+
+.cn-quick-filter-bar__measure {
+	position: absolute;
+	inset-block-start: 0;
+	inset-inline-start: 0;
+	display: flex;
+	gap: 8px;
+	width: 0;
+	height: 0;
+	overflow: hidden;
+	visibility: hidden;
+	pointer-events: none;
+	white-space: nowrap;
+}
+
+.cn-quick-filter-bar__measure > * {
+	flex: none;
+}
+
 .cn-quick-filter-bar--inline {
 	padding: 0;
 	border-bottom: none;