@conduction/nextcloud-vue 2.79.0 → 2.81.0

package/src/components/CnObjectListWidget/CnObjectListWidget.vue

@@ -151,6 +151,8 @@
 						:sortKey="localSort.field || null"
 						:sortOrder="localSort.dir || 'asc'"
 						borderless
+						:fitWidth="fitWidthActive"
+						:fixedLayout="fixedLayoutActive"
 						:hideHeader="content.hideHeader === true"
 						@rowClick="onRowClick"
 						@rowAuxClick="onRowAuxClick"
@@ -173,6 +175,8 @@
 					:sortKey="localSort.field || null"
 					:sortOrder="localSort.dir || 'asc'"
 					borderless
+					:fitWidth="fitWidthActive"
+					:fixedLayout="fixedLayoutActive"
 					:hideHeader="content.hideHeader === true"
 					@rowClick="onRowClick"
 					@rowAuxClick="onRowAuxClick"
@@ -448,6 +452,15 @@ export default {
 			page: 1,
 			/** Rows that fit the host cell; null = unconstrained (dashboards). */
 			fitRows: null,
+			/**
+			 * How far the table has been squeezed to the widget's width, so the
+			 * card never scrolls sideways: 0 = its own auto layout, 1 = one column
+			 * takes what is left and is cut with an ellipsis while the rest keep
+			 * their content on one line, 2 = a fixed layout, every column an equal
+			 * share with its text wrapped. Each step is taken only while the table
+			 * still scrolls sideways. `content.fitWidth` forces stage 1 on or off.
+			 */
+			fitStage: 0,
 			/** Whether the create dialog is open. */
 			showCreate: false,
 			/**
@@ -480,6 +493,27 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * Whether the table fits the widget's width (stage 1): `content.fitWidth`
+		 * when it says, else once the columns were measured not to fit.
+		 *
+		 * @return {boolean}
+		 */
+		fitWidthActive() {
+			const forced = this.content?.fitWidth
+			return typeof forced === 'boolean' ? forced : this.fitStage === 1
+		},
+
+		/**
+		 * Whether the table takes a fixed layout, the last resort when even the
+		 * fitted table is wider than the widget (not with `content.fitWidth` set).
+		 *
+		 * @return {boolean}
+		 */
+		fixedLayoutActive() {
+			return typeof this.content?.fitWidth !== 'boolean' && this.fitStage >= 2
+		},
+
 		/**
 		 * The unwrapped detail-page object context for token resolution, or null
 		 * on surfaces (dashboards) that don't provide one.
@@ -619,7 +653,7 @@ export default {
 				// `secondary` (a second, muted line under the cell) rides
 				// along too: the table draws it, and dropping it here took the
 				// list rows' second line away (zuiddrecht-pixel-gaps-3).
-				for (const k of ['format', 'widget', 'widgetProps', 'formatter', 'align', 'width', 'type', 'enum', 'enumLabels', 'sortable', 'secondary']) {
+				for (const k of ['format', 'widget', 'widgetProps', 'formatter', 'align', 'width', 'type', 'enum', 'enumLabels', 'sortable', 'secondary', 'colorMap', 'grow']) {
 					if (c[k] !== undefined) {
 						out[k] = c[k]
 					}
@@ -1165,6 +1199,12 @@ export default {
 	mounted() {
 		this.fetchRows()
 		this.loadHeadingsIfNeeded()
+		// A table wider than the widget fits its columns to the width instead of
+		// scrolling sideways (no inner scrollbars).
+		if (typeof ResizeObserver !== 'undefined') {
+			this._widthObserver = new ResizeObserver(() => this.measureWidthFit())
+			this._widthObserver.observe(this.$el)
+		}
 		// Re-read on a page-level refresh. This list fetches its own rows from
 		// OpenRegister and subscribed to nothing, so after a write elsewhere on
 		// the page it went on rendering the result set it fetched on mount —
@@ -1203,6 +1243,9 @@ export default {
 		if (this._fitObserver) {
 			this._fitObserver.disconnect()
 		}
+		if (this._widthObserver) {
+			this._widthObserver.disconnect()
+		}
 	},
 
 	methods: {
@@ -1277,7 +1320,10 @@ export default {
 				const res = await axios.get(url, { params })
 				this.rows = (res && res.data && res.data.results) || []
 				this.total = (res && res.data && typeof res.data.total === 'number') ? res.data.total : this.rows.length
-				this.$nextTick(() => this.measureFit())
+				this.$nextTick(() => {
+					this.measureFit()
+					this.measureWidthFit()
+				})
 			} catch (e) {
 				// Keep the raw message OUT of the template — log it for
 				// debugging, surface only the quiet `loadErrorLabel` line.
@@ -1291,6 +1337,27 @@ export default {
 			}
 		},
 
+		/**
+		 * Squeeze the table to the widget's width while it scrolls sideways: its
+		 * `.cn-data-table__scroll` wrapper is wider than it is visible. First the
+		 * fit (stage 1), then, if that is still too wide, a fixed layout
+		 * (stage 2). It never goes back (a squeezed table does not overflow, so
+		 * there is nothing to measure to relax it). No-op when `content.fitWidth`
+		 * is set.
+		 *
+		 * @return {void}
+		 */
+		measureWidthFit() {
+			if (this.fitStage >= 2 || typeof this.content?.fitWidth === 'boolean') {
+				return
+			}
+			const scroller = this.$el && this.$el.querySelector ? this.$el.querySelector('.cn-data-table__scroll') : null
+			if (scroller && scroller.scrollWidth > scroller.clientWidth + 1) {
+				this.fitStage += 1
+				this.$nextTick(() => this.measureWidthFit())
+			}
+		},
+
 		/**
 		 * Fit the visible row count to the host grid cell (ADR-062 — the cell
 		 * is the budget). Measures the cell's remaining height below the table

package/src/components/CnObjectSidebar/CnFilesTab.vue

@@ -16,6 +16,13 @@
 			:rowActions="rowActions"
 			:newActions="newActions"
 			:linkedItems="linkedItems"
+			:columns="columns"
+			:rowData="rowDataSource"
+			:preferenceApp="preferenceApp"
+			:preferenceKey="preferenceKey"
+			:bulkActions="bulkActions"
+			:groupBy="groupBy"
+			:facets="facets"
 			@changed="onBrowserChanged" />
 		<template v-else>
 			<!-- Upload error -->
@@ -240,7 +247,7 @@ import CnFilePreview from '../CnFilePreview/CnFilePreview.vue'
 import CnFilesBrowser from '../CnFilesBrowser/CnFilesBrowser.vue'
 import { useFileOpener } from '../../composables/useFileOpener.js'
 import { buildHeaders, prefixUrl } from '../../utils/index.js'
-import { objectDisplayName, resolveObjectFolderInfo } from '../CnFilesBrowser/filesBrowser.js'
+import { indexRowData, objectDisplayName, resolveObjectFolderInfo } from '../CnFilesBrowser/filesBrowser.js'
 import { createOpenRegisterSource } from '../CnFilesBrowser/openRegisterSource.js'
 
 /**
@@ -359,6 +366,47 @@ export default {
 		 * Null fetches nothing.
 		 */
 		linkedItemsUrl: { type: String, default: null },
+		/**
+		 * Forwarded to CnFilesBrowser: the columns the browser shows, built-in
+		 * names or declared columns (`{ key, label, source, formatter }`).
+		 * A `source: 'row'` column reads the host's record for the file from
+		 * `rowDataUrl`. None keeps name, size and modified.
+		 *
+		 * @type {Array<string|object>}
+		 */
+		columns: { type: Array, default: () => [] },
+		/** Forwarded to CnFilesBrowser: the app id the user's column choice is stored under; unset offers no Columns chooser. */
+		preferenceApp: { type: String, default: '' },
+		/** Forwarded to CnFilesBrowser: the key the column choice is stored under. */
+		preferenceKey: { type: String, default: 'files-browser-columns' },
+		/**
+		 * An app endpoint that answers the host's own record per file, for the
+		 * browser's `source: 'row'` columns. App-relative; `{objectId}` is
+		 * replaced. Read once per listing. The answer is a list of records
+		 * (or the list at `rowDataPath`, or under `items` or `results`), each
+		 * naming its file in `rowDataKey`. Null reads nothing.
+		 */
+		rowDataUrl: { type: String, default: null },
+		/**
+		 * Forwarded to CnFilesBrowser: the host's actions on a selection of
+		 * files. With at least one, files get checkboxes and a bulk bar.
+		 *
+		 * @type {Array<{id: string, label: string, icon?: string, type?: string, target?: string, props?: object}>}
+		 */
+		bulkActions: { type: Array, default: () => [] },
+		/** Forwarded to CnFilesBrowser: the key of a declared column to group the files on. */
+		groupBy: { type: String, default: '' },
+		/**
+		 * Forwarded to CnFilesBrowser: keys of declared columns to filter on,
+		 * a chip per value in use.
+		 *
+		 * @type {string[]}
+		 */
+		facets: { type: Array, 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. */
+		rowDataKey: { type: String, default: 'fileId' },
 		/** Label of the Download action. */
 		downloadLabel: { type: String, default: () => t('nextcloud-vue', 'Download') },
 		/** Label of the action that opens the Files sidebar on the file. */
@@ -424,6 +472,27 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * The browser's `rowData`: a function that reads the host's records
+		 * from `rowDataUrl` and keys them by file id, or null without a url.
+		 * The browser calls it once per listing.
+		 *
+		 * @return {(function(): Promise<object>)|null} The row data source.
+		 * @spec openspec/changes/files-browser-hosts-a-documents-list/specs/files-browser/spec.md
+		 */
+		rowDataSource() {
+			if (!this.rowDataUrl || !this.objectId) {
+				return null
+			}
+			const url = generateUrl(this.rowDataUrl.replace('{objectId}', encodeURIComponent(this.objectId)))
+			const path = this.rowDataPath
+			const key = this.rowDataKey
+			return async () => {
+				const { data } = await axios.get(url)
+				return indexRowData(data, { path, key })
+			}
+		},
+
 		/**
 		 * The root crumb: the host's label, else the object's name (its folder
 		 * on disk is called after its uuid), else the folder's own name.

package/src/components/CnObjectSidebar/CnNotesTab.vue

@@ -18,6 +18,8 @@
 					{{ cancelLabel }}
 				</NcButton>
 			</p>
+			<!-- @slot composer-before An app's own control above the composer, e.g. a template picker. Scope: `{ setText, text }`; `setText(text)` fills the composer, `text` is what it holds now. -->
+			<slot name="composer-before" :setText="setComposerText" :text="newNoteText" />
 			<CnNoteComposer
 				class="cn-sidebar-tab__composer"
 				:modelValue="newNoteText"
@@ -481,6 +483,20 @@ export default {
 			}
 		},
 
+		/**
+		 * Fill the composer from outside, for the `composer-before` slot.
+		 *
+		 * The app decides what goes in (a template body, a quoted line); the
+		 * composer stays the one place the text lives, so sending, editing and
+		 * the mention picker all see it exactly as if it had been typed.
+		 *
+		 * @param {string} text The text the composer should hold.
+		 * @return {void}
+		 */
+		setComposerText(text) {
+			this.newNoteText = (text === null || text === undefined) ? '' : String(text)
+		},
+
 		startEdit(note) {
 			this.replyTo = null
 			this.editingNoteId = note.id

package/src/components/CnPageRenderer/CnPageRenderer.vue

@@ -305,6 +305,7 @@ import { pageHasSplitView, pageIdForRoute, splitIdForRoute, splitRouteName } fro
 import { reportDiagnostic, reportDiagnosticOnce } from '../../utils/diagnostics.js'
 import { openRowTarget } from '../../utils/linkNavigation.js'
 import { listContextFromRoute, listContextToQuery } from '../../utils/listNavigation.js'
+import { applyQueryPreset, matchQueryPreset } from '../../utils/queryPresets.js'
 import { resolveRouteSentinels } from '../../utils/resolveRouteSentinels.js'
 import { parseSortKeys } from '../../utils/routeFilters.js'
 import { buildRouteParams, routePathFor } from '../../utils/routeParams.js'
@@ -1050,7 +1051,25 @@ export default {
 				return 'none'
 			}
 			const cfg = (page.config && typeof page.config === 'object' && !Array.isArray(page.config)) ? page.config : {}
-			return [page.id, cfg.register || '', cfg.schema || ''].join(':')
+			// A query preset swaps the lenses and columns, so it remounts the
+			// page: the active lens index belongs to the lenses it indexes.
+			const preset = this.activeQueryPresetIndex >= 0 ? `:preset-${this.activeQueryPresetIndex}` : ''
+			return [page.id, cfg.register || '', cfg.schema || ''].join(':') + preset
+		},
+
+		/**
+		 * The index of the current index page's query preset that the route
+		 * query matches, or -1.
+		 *
+		 * @return {number}
+		 * @spec openspec/changes/screens-index-query-presets/specs/index-query-presets/spec.md#requirement-a-query-preset-overlays-lenses-columns-and-copy
+		 */
+		activeQueryPresetIndex() {
+			const page = this.currentPage
+			if (!page || page.type !== 'index' || !page.config || !Array.isArray(page.config.queryPresets)) {
+				return -1
+			}
+			return matchQueryPreset(page.config.queryPresets, this.$route?.query || {})
 		},
 
 		/**
@@ -1297,6 +1316,15 @@ export default {
 			// container before forwarding — CnIndexPage has no
 			// `actionToggles` prop.
 			const isIndex = page?.type === 'index'
+			// A query preset (`config.queryPresets`): the menu entry's query
+			// brings its own lenses, columns and copy to the same page.
+			if (isIndex && Array.isArray(config.queryPresets)) {
+				const preset = config.queryPresets[this.activeQueryPresetIndex] || null
+				config = applyQueryPreset(config, preset)
+				if (preset && typeof preset.title === 'string' && preset.title !== '') {
+					topLevel.title = preset.title
+				}
+			}
 			// When an index page has somewhere to open a row, make a row click
 			// go there: set `rowClickToView` so the row body emits `row-click`
 			// (→ onRowOpen navigates) even though the page is selectable.

package/src/components/CnRadioCardsWidget/CnRadioCardsWidget.vue

@@ -0,0 +1,313 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V.
+  - SPDX-License-Identifier: EUPL-1.2
+-->
+
+<template>
+	<fieldset class="cn-radio-cards" data-testid="cn-radio-cards" :aria-busy="busy ? 'true' : 'false'">
+		<legend v-if="label" class="cn-radio-cards__legend">
+			{{ label }}
+		</legend>
+		<div class="cn-radio-cards__grid" :class="`cn-radio-cards__grid--${columns}`">
+			<label
+				v-for="option in options"
+				:key="String(option.value)"
+				class="cn-radio-cards__card"
+				:class="{ 'cn-radio-cards__card--selected': isSelected(option) }"
+				:data-testid="`cn-radio-cards-option-${option.value}`">
+				<input
+					class="cn-radio-cards__input"
+					type="radio"
+					:name="groupName"
+					:value="String(option.value)"
+					:checked="isSelected(option)"
+					:disabled="readOnly || busy"
+					@change="choose(option)">
+				<span class="cn-radio-cards__dot" aria-hidden="true" />
+				<span class="cn-radio-cards__text">
+					<span class="cn-radio-cards__title">{{ option.label }}</span>
+					<span v-if="option.description" class="cn-radio-cards__description">{{ option.description }}</span>
+				</span>
+			</label>
+		</div>
+		<NcNoteCard v-if="notice" type="error" data-testid="cn-radio-cards-notice">
+			{{ notice }}
+		</NcNoteCard>
+	</fieldset>
+</template>
+
+<script>
+import { NcNoteCard } from '@nextcloud/vue'
+import { objectUrlOf, patchObject } from '../../utils/objectWrite.js'
+import { readPath } from '../../utils/readPath.js'
+import { serverErrorMessage } from '../../utils/serverErrorMessage.js'
+
+let uid = 0
+
+/**
+ * CnRadioCardsWidget — the `radio-cards` widget: one choice out of a few cards,
+ * each with a title and a description, bound to an enum field of the CURRENT
+ * object. Choosing a card saves at once with ONE PATCH of that field; a refused
+ * PATCH puts the choice back and shows the server's words. Real radio inputs
+ * underneath, so the choice is perceivable without colour and works from the
+ * keyboard.
+ *
+ * @spec openspec/changes/abstract-radio-cards/specs/radio-cards/spec.md
+ */
+export default {
+	name: 'CnRadioCardsWidget',
+
+	components: { NcNoteCard },
+
+	inject: {
+		cnTranslate: { default: () => (key) => key },
+	},
+
+	props: {
+		/**
+		 * The widget configuration.
+		 *
+		 * - `field` (required) — the top-level enum field.
+		 * - `options` (required) — `[{ value, label, description? }]`.
+		 * - `label` — a legend over the cards (visually shown).
+		 * - `columns` — 1, 2 or 3 (default 2).
+		 * - `readOnly`.
+		 *
+		 * @type {object}
+		 */
+		content: {
+			type: Object,
+			default: () => ({}),
+		},
+
+		/** The current detail-page object. */
+		objectData: {
+			type: Object,
+			default: null,
+		},
+
+		/** The current object id. */
+		objectId: {
+			type: [String, Number],
+			default: '',
+		},
+
+		/** OpenRegister register slug of the surface. */
+		register: {
+			type: [String, Object],
+			default: '',
+		},
+
+		/** OpenRegister schema slug of the surface. */
+		schema: {
+			type: [String, Object],
+			default: '',
+		},
+	},
+
+	emits: ['saved'],
+
+	data() {
+		uid += 1
+		return {
+			groupName: `cn-radio-cards-${uid}`,
+			saved: '',
+			value: '',
+			busy: false,
+			notice: '',
+		}
+	},
+
+	computed: {
+		options() {
+			const list = Array.isArray(this.content.options) ? this.content.options : []
+			return list
+				.filter((option) => option !== null && option !== undefined)
+				.map((option) => (typeof option === 'object'
+					? { value: option.value, label: this.tr(String(option.label ?? option.value)), description: this.tr(option.description || '') }
+					: { value: option, label: this.tr(String(option)), description: '' }))
+		},
+
+		label() {
+			return this.tr(this.content.label || '')
+		},
+
+		columns() {
+			return [1, 3].includes(this.content.columns) ? this.content.columns : 2
+		},
+
+		readOnly() {
+			return this.content.readOnly === true
+		},
+
+		objectUrl() {
+			return objectUrlOf(this.register, this.schema, this.objectId || (this.objectData && this.objectData.id))
+		},
+	},
+
+	watch: {
+		objectData() {
+			this.adopt()
+		},
+	},
+
+	created() {
+		this.adopt()
+	},
+
+	methods: {
+		tr(text) {
+			if (typeof text !== 'string' || text === '') {
+				return ''
+			}
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
+		},
+
+		/** Read the choice off the object. */
+		adopt() {
+			const stored = readPath(this.objectData || {}, this.content.field)
+			this.saved = stored === undefined || stored === null ? '' : String(stored)
+			this.value = this.saved
+		},
+
+		isSelected(option) {
+			return this.value === String(option.value)
+		},
+
+		/**
+		 * Choose a card and save that one field.
+		 *
+		 * @param {object} option The chosen option.
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/abstract-radio-cards/specs/radio-cards/spec.md#requirement-choosing-a-card-saves-that-one-field
+		 */
+		async choose(option) {
+			if (!this.objectUrl || !this.content.field) {
+				this.notice = this.tr('This choice cannot be saved here.')
+				return
+			}
+			this.notice = ''
+			this.busy = true
+			this.value = String(option.value)
+			try {
+				const data = await patchObject(this.objectUrl, { [this.content.field]: option.value })
+				const written = readPath(data, this.content.field)
+				this.saved = String(written !== undefined && written !== null ? written : option.value)
+				this.value = this.saved
+				/**
+				 * @event saved The choice was written.
+				 * @type {{field: string, value: unknown}}
+				 */
+				this.$emit('saved', { field: this.content.field, value: option.value })
+			} catch (e) {
+				this.value = this.saved
+				this.notice = serverErrorMessage(e)
+			} finally {
+				this.busy = false
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-radio-cards {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	min-width: 0;
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+
+.cn-radio-cards__legend {
+	padding: 0;
+	margin-bottom: 6px;
+	font-weight: 600;
+}
+
+.cn-radio-cards__grid {
+	display: grid;
+	gap: 10px;
+	grid-template-columns: minmax(0, 1fr);
+}
+
+.cn-radio-cards__grid--2 {
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.cn-radio-cards__grid--3 {
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.cn-radio-cards__card {
+	position: relative;
+	display: flex;
+	align-items: flex-start;
+	gap: 10px;
+	padding: 12px 14px;
+	border: 1px solid var(--color-border-maxcontrast);
+	border-radius: var(--cn-board-control-radius, 8px);
+	background: var(--color-main-background);
+	cursor: pointer;
+}
+
+.cn-radio-cards__card--selected {
+	border-color: var(--color-primary-element);
+	background: var(--color-primary-element-light);
+	box-shadow: 0 0 0 1px var(--color-primary-element);
+}
+
+.cn-radio-cards__card:focus-within {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+}
+
+/* The real input stays in the DOM and in the accessibility tree; the dot is its picture. */
+.cn-radio-cards__input {
+	position: absolute;
+	opacity: 0;
+	inset: 0;
+	margin: 0;
+	cursor: pointer;
+}
+
+.cn-radio-cards__dot {
+	flex: 0 0 auto;
+	width: 14px;
+	height: 14px;
+	margin-top: 3px;
+	box-sizing: border-box;
+	border: 1px solid var(--color-border-maxcontrast);
+	border-radius: 50%;
+	background: var(--color-main-background);
+}
+
+.cn-radio-cards__card--selected .cn-radio-cards__dot {
+	border: 4px solid var(--color-primary-element);
+}
+
+.cn-radio-cards__text {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+
+.cn-radio-cards__title {
+	font-weight: 600;
+}
+
+.cn-radio-cards__description {
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+}
+
+@media (max-width: 640px) {
+	.cn-radio-cards__grid--2,
+	.cn-radio-cards__grid--3 {
+		grid-template-columns: minmax(0, 1fr);
+	}
+}
+</style>

package/src/components/CnRadioCardsWidget/index.js

@@ -0,0 +1,27 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * CnRadioCardsWidget — self-registers the `radio-cards` widget type (one
+ * choice out of a few cards with a title and a description, bound to an enum
+ * field of the current object and saved on selection) into the shared
+ * dashboardWidgetRegistry at module load.
+ */
+
+import CnRadioCardsWidget from './CnRadioCardsWidget.vue'
+import { registerDashboardWidget } from '../CnWidgetGrid/dashboardWidgetRegistry.js'
+
+registerDashboardWidget('radio-cards', {
+	renderer: CnRadioCardsWidget,
+	form: null,
+	defaultContent: {
+		field: '',
+		options: [],
+	},
+	displayName: 'Radio cards',
+	icon: 'RadioboxMarked',
+	surfaces: ['detail-page'],
+})
+
+export { CnRadioCardsWidget }
+export default CnRadioCardsWidget