@conduction/nextcloud-vue 2.80.0 → 2.81.0

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/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

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -30,6 +30,10 @@
 					class="cn-record-list__row"
 					:class="{ 'cn-record-list__row--link': item.tag !== 'div' }"
 					v-bind="item.attrs">
+					<span v-if="item.initials"
+						class="cn-record-list__avatar"
+						aria-hidden="true"
+						data-testid="cn-record-list-avatar">{{ item.initials }}</span>
 					<span class="cn-record-list__main">
 						<span v-if="item.title" class="cn-record-list__title">{{ item.title }}</span>
 						<span v-if="item.meta" class="cn-record-list__meta">{{ item.meta }}</span>
@@ -81,6 +85,8 @@ import CnIcon from '../CnIcon/CnIcon.vue'
 import CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'
 import { isBadgeVariant } from '../../utils/badgeVariants.js'
 import { fillTemplate, firstFilled } from '../../utils/fillTemplate.js'
+import { initialsOf } from '../../utils/initials.js'
+import { pageFilter, pageSort } from '../../utils/pageControls.js'
 import { readPath } from '../../utils/readPath.js'
 import { dropOptionalUnresolved, hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 
@@ -108,7 +114,8 @@ function unwrap(value) {
  * objects filtered on a reference to this record. The source keys are those of
  * `object-list` (`register`, `schema`, `filter` with the `@objectId` /
  * `@object.<field>` / `@workspace.<key>` tokens, `sort`, `limit`, `extend`,
- * `rowRoute`); what differs is the drawing: `presentation` is `rows`, `feed`
+ * `rowRoute`, `pageControls`); `avatar` puts a circle with the initials of a name
+ * template before the title; what differs is the drawing: `presentation` is `rows`, `feed`
  * or `inline`, and each line is a template (`"{identifier} · {caseTypeName}"`,
  * `"Termijn {deadline|date}"`).
  *
@@ -188,8 +195,8 @@ export default {
 
 		/** @return {object} The filter with its tokens resolved. */
 		resolvedFilter() {
-			const filter = this.content?.filter
-			return dropOptionalUnresolved(resolveFilterTokens(filter && typeof filter === 'object' ? filter : {}, this.tokenCtx))
+			const filter = pageFilter(this.content?.pageControls, this.tokenCtx.workspace, this.content?.filter)
+			return dropOptionalUnresolved(resolveFilterTokens(filter, this.tokenCtx))
 		},
 
 		/** @return {boolean} A required token (the record id, say) has no value yet. */
@@ -197,6 +204,11 @@ export default {
 			return hasUnresolvedTokens(this.resolvedFilter)
 		},
 
+		/** @return {object|null} The sort: the page's sort control when the widget listens to one, else its own. */
+		effectiveSort() {
+			return pageSort(this.content?.pageControls, this.tokenCtx.workspace, this.content?.sort)
+		},
+
 		/** @return {number} The fetch cap. */
 		limit() {
 			const value = Number(this.content?.limit)
@@ -206,7 +218,7 @@ export default {
 		/** @return {string} What a fetch depends on; a change fetches again. */
 		requestKey() {
 			const c = this.content || {}
-			return JSON.stringify([c.register, c.schema, this.resolvedFilter, c.sort, this.limit, c.extend, this.waiting])
+			return JSON.stringify([c.register, c.schema, this.resolvedFilter, this.effectiveSort, this.limit, c.extend, this.waiting])
 		},
 
 		/** @return {Array<object>} The rows ready to draw. */
@@ -218,6 +230,7 @@ export default {
 					key: (row && (row.id || row['@self']?.id)) || `row-${index}`,
 					tag: link ? 'router-link' : 'div',
 					attrs: link ? { to: link } : {},
+					initials: this.initialsFor(row),
 					title: this.fill(c.title, row),
 					meta: this.fill(c.meta, row),
 					text: this.fill(c.text, row),
@@ -299,6 +312,20 @@ export default {
 			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
 		},
 
+		/**
+		 * The initials of the row's avatar (`avatar`: a name template such as
+		 * `"{client.name}"`, or `{ text }`), or '' without one.
+		 *
+		 * @param {object} row The row.
+		 * @return {string} One or two letters.
+		 * @spec openspec/changes/screens-record-list-avatar/specs/record-list-avatar/spec.md#requirement-a-record-list-row-can-carry-an-avatar
+		 */
+		initialsFor(row) {
+			const avatar = this.content?.avatar
+			const template = typeof avatar === 'string' ? avatar : (avatar && typeof avatar === 'object' ? avatar.text : '')
+			return initialsOf(this.fill(template, row))
+		},
+
 		/**
 		 * Fill a template from a row, after translating it.
 		 *
@@ -422,8 +449,9 @@ export default {
 				])
 				const url = generateUrl('/apps/openregister/api/objects/{register}/{schema}', { register: c.register, schema: c.schema })
 				const params = { _limit: this.limit }
-				if (c.sort && typeof c.sort === 'object' && c.sort.field) {
-					params[`_order[${c.sort.field}]`] = c.sort.dir === 'desc' ? 'desc' : 'asc'
+				const sort = this.effectiveSort
+				if (sort && typeof sort === 'object' && sort.field) {
+					params[`_order[${sort.field}]`] = sort.dir === 'desc' ? 'desc' : 'asc'
 				}
 				if (Array.isArray(c.extend)) {
 					const extend = c.extend.filter((e) => typeof e === 'string' && e !== '')
@@ -497,6 +525,20 @@ export default {
 	text-decoration: underline;
 }
 
+.cn-record-list__avatar {
+	align-items: center;
+	background: var(--color-background-hover);
+	border-radius: 50%;
+	color: var(--color-main-text);
+	display: flex;
+	flex: none;
+	font-size: 12px;
+	font-weight: 700;
+	height: 36px;
+	justify-content: center;
+	width: 36px;
+}
+
 .cn-record-list__main {
 	display: flex;
 	flex: 1 1 auto;
@@ -600,4 +642,11 @@ a.cn-record-list__inline-title {
 .cn-detail-page__side .cn-record-list__chevron {
 	display: none;
 }
+
+/* A row is a touch target of at least 44px on a phone. */
+@media (max-width: 640px) {
+	.cn-record-list__row {
+		min-height: 44px;
+	}
+}
 </style>