@conduction/nextcloud-vue 2.56.0-beta.31 → 2.56.0-beta.32

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,7 @@ 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'
@@ -109,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`, `pageControls`); 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}"`).
  *
@@ -224,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),
@@ -305,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.
 		 *
@@ -504,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;
@@ -607,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>