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

package/src/components/CnTasksWidget/CnTasksWidget.vue

@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: EUPL-1.2
 -->
 <template>
-	<div class="cn-tasks-widget">
+	<div class="cn-tasks-widget" :class="{ 'cn-tasks-widget--list': isList }">
 		<!-- One quiet line on failure, never a leaked axios status string
 		     (ADR-062). The real error goes to the console. -->
 		<p v-if="error" class="cn-tasks-widget__error">
@@ -21,7 +21,7 @@
 			<!-- The count states the server TOTAL, never the rendered length
 			     (ADR-062): the number a person acts on is how much work
 			     exists, not how much fits the cell. -->
-			<p class="cn-tasks-widget__count">
+			<p v-if="!isList" class="cn-tasks-widget__count">
 				{{ countLabel }}
 			</p>
 			<ul class="cn-tasks-widget__list">
@@ -33,23 +33,53 @@
 					@click="onRowClick(task, $event)"
 					@mousedown="preventMiddleClickAutoscroll"
 					@auxclick="onRowAuxClick(task, $event)">
-					<span class="cn-tasks-widget__body">
-						<span class="cn-tasks-widget__name">{{ titleOf(task) }}</span>
-						<span class="cn-tasks-widget__meta">{{ metaLine(task) }}</span>
-					</span>
-					<!-- Overdue is carried by the WORDING (taskDueLabel) and by
-					     weight; the colour only reinforces it. -->
-					<span
-						class="cn-tasks-widget__due"
-						:class="{ 'cn-tasks-widget__due--overdue': task.overdue === true }">
-						{{ dueLabel(task) }}
-					</span>
+					<!-- List variant: a checkbox completes the viewer's own task
+					     (the task with a declared outcome list keeps the menu, as
+					     a checkbox cannot choose an outcome). Other rows get a
+					     spacer so the titles stay aligned. -->
+					<template v-if="isList">
+						<input
+							v-if="canCheck(task)"
+							type="checkbox"
+							class="cn-tasks-widget__check"
+							:checked="completing.includes(String(task.uuid))"
+							:disabled="completing.includes(String(task.uuid))"
+							:aria-label="tr('Mark {title} as done').replace('{title}', titleOf(task))"
+							data-testid="cn-tasks-widget-check"
+							@click.stop
+							@change="check(task)">
+						<span v-else class="cn-tasks-widget__check-spacer" aria-hidden="true" />
+						<span class="cn-tasks-widget__body">
+							<span class="cn-tasks-widget__name">{{ titleOf(task) }}</span>
+							<span class="cn-tasks-widget__meta cn-tasks-widget__meta--split">
+								<span class="cn-tasks-widget__subject">{{ subjectOf(task) }}</span>
+								<span
+									class="cn-tasks-widget__due"
+									:class="{ 'cn-tasks-widget__due--overdue': task.overdue === true }">
+									{{ dueLabel(task) }}
+								</span>
+							</span>
+						</span>
+					</template>
+					<template v-else>
+						<span class="cn-tasks-widget__body">
+							<span class="cn-tasks-widget__name">{{ titleOf(task) }}</span>
+							<span class="cn-tasks-widget__meta">{{ metaLine(task) }}</span>
+						</span>
+						<!-- Overdue is carried by the WORDING (taskDueLabel) and by
+						     weight; the colour only reinforces it. -->
+						<span
+							class="cn-tasks-widget__due"
+							:class="{ 'cn-tasks-widget__due--overdue': task.overdue === true }">
+							{{ dueLabel(task) }}
+						</span>
+					</template>
 					<!-- Only verbs the contract can accept are offered; the
 					     server still authorizes, and a refusal is toasted in
 					     its own words. Stopped clicks: the menu must not also
 					     open the row. -->
 					<NcActions
-						v-if="canClaim(task) || canComplete(task)"
+						v-if="(canClaim(task) || canComplete(task)) && !(isList && canCheck(task))"
 						class="cn-tasks-widget__actions"
 						:forceMenu="true"
 						:aria-label="tr('Task actions')"
@@ -90,6 +120,7 @@ import { NcActionButton, NcActions, NcLoadingIcon } from '@nextcloud/vue'
 import { inject, ref } from 'vue'
 import { taskDeepLink, taskDueLabel } from '../../composables/indexSources.js'
 import { useEndpointSource } from '../../composables/useEndpointSource.js'
+import { contentHeaderLink } from '../../utils/contentHeaderLink.js'
 import { openRowTarget } from '../../utils/linkNavigation.js'
 import { isRowMiddleClick, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'
 
@@ -185,8 +216,14 @@ export default {
 		 *   receiving the task uuid as `:id`. Omitted = the click opens the
 		 *   task's openregister deep link instead.
 		 * - `emptyText` — override for the empty-inbox line.
+		 * - `variant` — `list` draws a checkbox list: a checkbox that completes
+		 *   the viewer's own task, the title, the subject on a second muted
+		 *   line and the due date at its right. Default: the compact rows.
+		 * - `viewAllRoute` / `viewAllLabel` — a "View all" text link in the
+		 *   card header: a route name or location `{ name, params?, query? }`,
+		 *   and its label (default "View all"). `headerLink` works too.
 		 *
-		 * @type {{scope?: string, limit?: number, pollSeconds?: number, rowRoute?: string, emptyText?: string}}
+		 * @type {{scope?: string, limit?: number, pollSeconds?: number, rowRoute?: string, emptyText?: string, variant?: string, viewAllRoute?: (string|object), viewAllLabel?: string}}
 		 */
 		content: {
 			type: Object,
@@ -214,6 +251,8 @@ export default {
 		},
 	},
 
+	emits: ['header'],
+
 	setup(props) {
 		// The shared endpoint engine owns request dedup, the short-TTL cache
 		// and the cn:page:refresh / cn:widget:refresh subscriptions — the
@@ -253,10 +292,30 @@ export default {
 	data() {
 		return {
 			pollTimer: null,
+			/** Uuids of the tasks a checkbox is completing, until the next read. */
+			completing: [],
 		}
 	},
 
 	computed: {
+		/**
+		 * Whether the rows draw as the checkbox list (`content.variant: 'list'`).
+		 *
+		 * @return {boolean}
+		 */
+		isList() {
+			return this.content.variant === 'list'
+		},
+
+		/**
+		 * The header "View all" link the content declares, or null.
+		 *
+		 * @return {object|null}
+		 */
+		headerLink() {
+			return contentHeaderLink(this.content)
+		},
+
 		/**
 		 * Effective translate function: the explicit prop, then the injected
 		 * host one, then `@nextcloud/l10n` under the library's own app id.
@@ -357,6 +416,19 @@ export default {
 		},
 	},
 
+	watch: {
+		headerLink: {
+			immediate: true,
+			handler(link) {
+				/**
+				 * @event header Emitted with the card header's parts: the "View all" link, if any.
+				 * @type {{link: (object|null), note: string}}
+				 */
+				this.$emit('header', { link, note: '' })
+			},
+		},
+	},
+
 	mounted() {
 		this.startPolling()
 		document.addEventListener('visibilitychange', this.onVisibilityChange)
@@ -423,6 +495,43 @@ export default {
 			return task.displayTitle || task.title || String(task.uuid || '')
 		},
 
+		/**
+		 * The subject (the case a task sits on), for the list variant's second line.
+		 *
+		 * @param {object} task The task row.
+		 * @return {string} The subject's title, or ''.
+		 */
+		subjectOf(task) {
+			return task.subject && task.subject.title ? String(task.subject.title) : ''
+		},
+
+		/**
+		 * Whether the list variant draws a checkbox on the row: the viewer's own
+		 * open task, with no outcome list to choose from.
+		 *
+		 * @param {object} task The task row.
+		 * @return {boolean}
+		 */
+		canCheck(task) {
+			return this.canComplete(task) && !(Array.isArray(task.outcomes) && task.outcomes.length > 0)
+		},
+
+		/**
+		 * Complete a task from its checkbox, with the server's default outcome.
+		 *
+		 * @param {object} task The task row.
+		 * @return {Promise<void>}
+		 */
+		async check(task) {
+			const uuid = String(task.uuid || '')
+			if (uuid === '' || this.completing.includes(uuid)) {
+				return
+			}
+			this.completing = [...this.completing, uuid]
+			await this.postVerb(task, 'complete', { outcome: 'done' })
+			this.completing = this.completing.filter((id) => id !== uuid)
+		},
+
 		/**
 		 * The secondary line: subject, state and priority — whichever of
 		 * those the row actually carries, in words.
@@ -721,6 +830,57 @@ function normaliseScope(raw) {
 	font-variant-numeric: tabular-nums;
 }
 
+/* List variant, after the dashboard board's My tasks card: a checkbox, the
+   title, the subject on a muted second line and the due date at its right. */
+.cn-tasks-widget--list .cn-tasks-widget__row {
+	align-items: flex-start;
+	gap: 12px;
+	padding: 12px 0;
+}
+
+.cn-tasks-widget--list .cn-tasks-widget__name {
+	font-weight: 400;
+	font-size: 15px;
+	line-height: 1.35;
+	color: var(--color-main-text);
+}
+
+.cn-tasks-widget__check,
+.cn-tasks-widget__check-spacer {
+	flex: none;
+	width: 20px;
+	height: 20px;
+	margin: 1px 0 0;
+}
+
+.cn-tasks-widget__check {
+	accent-color: var(--color-primary-element);
+	cursor: pointer;
+}
+
+.cn-tasks-widget__meta--split {
+	display: flex;
+	justify-content: space-between;
+	gap: 8px;
+	font-size: 13px;
+	overflow: visible;
+}
+
+.cn-tasks-widget__subject {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.cn-tasks-widget--list .cn-tasks-widget__due {
+	font-size: 13px;
+	font-weight: 500;
+}
+
+.cn-tasks-widget--list .cn-tasks-widget__due--overdue {
+	font-weight: 600;
+}
+
 /* Overdue: weight AND colour on top of the wording, which already says
    "Overdue by N days" — the signal survives monochrome. */
 .cn-tasks-widget__due--overdue {

package/src/components/CnToggleTableWidget/CnToggleTableWidget.vue

@@ -0,0 +1,386 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V.
+  - SPDX-License-Identifier: EUPL-1.2
+-->
+
+<template>
+	<div class="cn-toggle-table" data-testid="cn-toggle-table">
+		<p v-if="rows.length === 0" class="cn-toggle-table__empty" data-testid="cn-toggle-table-empty">
+			{{ emptyLabel }}
+		</p>
+		<table v-else class="cn-toggle-table__table">
+			<thead v-if="showHeader">
+				<tr>
+					<th scope="col" class="cn-toggle-table__head">
+						{{ titleHeader }}
+					</th>
+					<th
+						v-for="column in columns"
+						:key="column.path"
+						scope="col"
+						class="cn-toggle-table__head">
+						{{ column.header }}
+					</th>
+					<th scope="col" class="cn-toggle-table__head cn-toggle-table__head--toggle">
+						{{ toggleHeader }}
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr
+					v-for="row in rows"
+					:key="row.key"
+					class="cn-toggle-table__row"
+					:data-testid="`cn-toggle-table-row-${row.key}`">
+					<td class="cn-toggle-table__cell cn-toggle-table__cell--main">
+						<span class="cn-toggle-table__title">{{ row.title }}</span>
+						<span v-if="row.hint" class="cn-toggle-table__hint">{{ row.hint }}</span>
+					</td>
+					<td
+						v-for="column in columns"
+						:key="column.path"
+						class="cn-toggle-table__cell">
+						{{ cell(row, column) }}
+					</td>
+					<td class="cn-toggle-table__cell cn-toggle-table__cell--toggle">
+						<NcCheckboxRadioSwitch
+							:key="`${row.key}-${undone[row.key] || 0}`"
+							:modelValue="isOn(row)"
+							type="switch"
+							:disabled="readOnly || busy === row.key"
+							:aria-label="row.title"
+							@update:modelValue="toggle(row, $event)" />
+					</td>
+				</tr>
+			</tbody>
+		</table>
+		<NcNoteCard v-if="notice" type="error" data-testid="cn-toggle-table-notice">
+			{{ notice }}
+		</NcNoteCard>
+	</div>
+</template>
+
+<script>
+import { NcCheckboxRadioSwitch, NcNoteCard } from '@nextcloud/vue'
+import { prefixUrl } from '../../utils/headers.js'
+import { objectUrlOf, patchObject } from '../../utils/objectWrite.js'
+import { readPath } from '../../utils/readPath.js'
+import { serverErrorMessage } from '../../utils/serverErrorMessage.js'
+
+/**
+ * CnToggleTableWidget — the `toggle-table` widget: rows from a configured list
+ * (`rows`) or read from a source (`source`), each with a switch bound to the
+ * CURRENT object, and optional extra columns read off the row. A switch is
+ * stored in one of two ways:
+ *
+ * - `bind.mode: 'flag'` — each row names its own boolean field of the object
+ *   (`row.field`); the switch is that field.
+ * - `bind.mode: 'list'` — ONE array field of the object (`bind.field`) holds
+ *   the keys of the rows that are in it; the switch is on when the row's key is
+ *   in the list, or NOT in it with `bind.invert` (a list of hidden items shown
+ *   as "visible" switches).
+ *
+ * A toggle saves at once with ONE PATCH of that field; a refused PATCH puts the
+ * switch back and shows the server's words.
+ *
+ * @spec openspec/changes/abstract-toggle-table/specs/toggle-table/spec.md
+ */
+export default {
+	name: 'CnToggleTableWidget',
+
+	components: { NcCheckboxRadioSwitch, NcNoteCard },
+
+	inject: {
+		cnTranslate: { default: () => (key) => key },
+	},
+
+	props: {
+		/**
+		 * The widget configuration.
+		 *
+		 * - `bind` — `{ mode: 'flag' }` (default) or `{ mode: 'list', field, invert? }`.
+		 * - `rows` — static rows `[{ key, label, hint?, field?, ...extra }]`.
+		 * - `source` — `{ url, path?, key, label, hint? }`: rows read from an endpoint (tokens `@objectId`, `@object.<field>`), in addition to `rows`.
+		 * - `columns` — extra columns `[{ header, path, map? }]` read off each row.
+		 * - `titleHeader`, `toggleHeader`, `emptyText`, `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() {
+		return {
+			/** Rows read from `source`. */
+			sourced: [],
+			/** What the object holds, by field: the flags and the list, as last saved. */
+			saved: {},
+			busy: '',
+			notice: '',
+			/** Per row, how often a refused toggle forced the switch to be drawn again from the stored value. */
+			undone: {},
+		}
+	},
+
+	computed: {
+		bind() {
+			const bind = this.content.bind || {}
+			return bind.mode === 'list' ? { mode: 'list', field: bind.field, invert: bind.invert === true } : { mode: 'flag' }
+		},
+
+		/** The drawn rows: configured first, then sourced, each with a key, title and hint. */
+		rows() {
+			const configured = (Array.isArray(this.content.rows) ? this.content.rows : [])
+				.filter((row) => row && row.key !== undefined)
+				.map((row) => ({ ...row, key: String(row.key), title: this.tr(row.label || String(row.key)), hint: this.tr(row.hint || '') }))
+			return [...configured, ...this.sourced]
+		},
+
+		columns() {
+			return (Array.isArray(this.content.columns) ? this.content.columns : [])
+				.filter((column) => column && column.path)
+				.map((column) => ({ ...column, header: this.tr(column.header || '') }))
+		},
+
+		showHeader() {
+			return this.columns.length > 0 || Boolean(this.content.titleHeader || this.content.toggleHeader)
+		},
+
+		titleHeader() {
+			return this.tr(this.content.titleHeader || '')
+		},
+
+		toggleHeader() {
+			return this.tr(this.content.toggleHeader || '')
+		},
+
+		emptyLabel() {
+			return this.tr(this.content.emptyText || 'Nothing listed yet')
+		},
+
+		readOnly() {
+			return this.content.readOnly === true
+		},
+
+		objectUrl() {
+			return objectUrlOf(this.register, this.schema, this.objectId || (this.objectData && this.objectData.id))
+		},
+	},
+
+	watch: {
+		objectData() {
+			this.saved = {}
+			this.loadSource()
+		},
+	},
+
+	created() {
+		this.loadSource()
+	},
+
+	methods: {
+		tr(text) {
+			if (typeof text !== 'string' || text === '') {
+				return ''
+			}
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
+		},
+
+		/**
+		 * The stored value of a field: what this widget last saved, else the object's.
+		 *
+		 * @param {string} field The field.
+		 * @return {unknown}
+		 */
+		stored(field) {
+			return Object.hasOwn(this.saved, field) ? this.saved[field] : readPath(this.objectData || {}, field)
+		},
+
+		/**
+		 * Whether a row's switch is on.
+		 *
+		 * @param {object} row The row.
+		 * @return {boolean}
+		 */
+		isOn(row) {
+			if (this.bind.mode === 'list') {
+				const list = this.stored(this.bind.field)
+				const inList = Array.isArray(list) && list.map(String).includes(row.key)
+				return this.bind.invert ? !inList : inList
+			}
+			return row.field ? this.stored(row.field) === true : false
+		},
+
+		/**
+		 * The text of an extra column for a row.
+		 *
+		 * @param {object} row The row.
+		 * @param {object} column The column.
+		 * @return {string}
+		 */
+		cell(row, column) {
+			const raw = readPath(row, column.path)
+			if (raw === undefined || raw === null || raw === '') {
+				return ''
+			}
+			if (column.map && Object.hasOwn(column.map, String(raw))) {
+				return this.tr(column.map[String(raw)])
+			}
+			return typeof raw === 'object' ? '' : String(raw)
+		},
+
+		/** Read the rows of `source`, resolving tokens in its url. */
+		async loadSource() {
+			const source = this.content.source
+			if (!source || !source.url || !source.key) {
+				return
+			}
+			const object = this.objectData || {}
+			const url = String(source.url)
+				.replace(/@objectId/g, () => encodeURIComponent(String(this.objectId || object.id || '')))
+				.replace(/@object\.([\w.@]+)/g, (m, path) => encodeURIComponent(String(readPath(object, path) ?? '')))
+			try {
+				const { default: axios } = await import('@nextcloud/axios')
+				const { data } = await axios.get(prefixUrl(url))
+				const list = source.path ? readPath(data, source.path) : data
+				this.sourced = (Array.isArray(list) ? list : [])
+					.filter((item) => item && readPath(item, source.key) !== undefined)
+					.map((item) => ({
+						...item,
+						key: String(readPath(item, source.key)),
+						title: String(readPath(item, source.label || source.key) ?? readPath(item, source.key)),
+						hint: source.hint ? String(readPath(item, source.hint) ?? '') : '',
+					}))
+			} catch (e) {
+				this.notice = serverErrorMessage(e)
+			}
+		},
+
+		/**
+		 * Flip one switch and save that one field.
+		 *
+		 * @param {object} row The row.
+		 * @param {boolean} on The new switch state.
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/abstract-toggle-table/specs/toggle-table/spec.md#requirement-a-toggle-saves-one-field
+		 */
+		async toggle(row, on) {
+			const field = this.bind.mode === 'list' ? this.bind.field : row.field
+			if (!this.objectUrl || !field) {
+				this.notice = this.tr('This switch cannot be saved here.')
+				return
+			}
+			let next
+			if (this.bind.mode === 'list') {
+				const list = (Array.isArray(this.stored(field)) ? this.stored(field) : []).map(String)
+				const wantInList = this.bind.invert ? !on : on
+				next = wantInList ? (list.includes(row.key) ? list : [...list, row.key]) : list.filter((key) => key !== row.key)
+			} else {
+				next = on
+			}
+			this.notice = ''
+			this.busy = row.key
+			try {
+				const data = await patchObject(this.objectUrl, { [field]: next })
+				const written = data[field] !== undefined ? data[field] : next
+				this.saved = { ...this.saved, [field]: written }
+				/**
+				 * @event saved A switch was written.
+				 * @type {{field: string, value: unknown}}
+				 */
+				this.$emit('saved', { field, value: written })
+			} catch (e) {
+				this.notice = serverErrorMessage(e)
+				this.undone = { ...this.undone, [row.key]: (this.undone[row.key] || 0) + 1 }
+			} finally {
+				this.busy = ''
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-toggle-table {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	min-width: 0;
+}
+
+.cn-toggle-table__table {
+	width: 100%;
+	border-collapse: collapse;
+}
+
+.cn-toggle-table__head {
+	padding: 8px 12px;
+	text-align: start;
+	font-size: 13px;
+	font-weight: 600;
+	color: var(--color-text-maxcontrast);
+	background: var(--color-background-hover);
+}
+
+.cn-toggle-table__head--toggle,
+.cn-toggle-table__cell--toggle {
+	width: 1%;
+	white-space: nowrap;
+	text-align: end;
+}
+
+.cn-toggle-table__row {
+	border-top: 1px solid var(--cn-board-hairline, var(--color-border));
+}
+
+.cn-toggle-table__cell {
+	padding: 10px 12px;
+	vertical-align: middle;
+	overflow-wrap: anywhere;
+}
+
+.cn-toggle-table__title {
+	display: block;
+	font-weight: 600;
+}
+
+.cn-toggle-table__hint {
+	display: block;
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-toggle-table__empty {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+}
+</style>

package/src/components/CnToggleTableWidget/index.js

@@ -0,0 +1,26 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * CnToggleTableWidget — self-registers the `toggle-table` widget type (rows
+ * from a configured list or a source, each with a switch bound to the current
+ * object, and optional extra columns) into the shared dashboardWidgetRegistry.
+ */
+
+import CnToggleTableWidget from './CnToggleTableWidget.vue'
+import { registerDashboardWidget } from '../CnWidgetGrid/dashboardWidgetRegistry.js'
+
+registerDashboardWidget('toggle-table', {
+	renderer: CnToggleTableWidget,
+	form: null,
+	defaultContent: {
+		bind: { mode: 'flag' },
+		rows: [],
+	},
+	displayName: 'Toggle table',
+	icon: 'TableCheck',
+	surfaces: ['detail-page'],
+})
+
+export { CnToggleTableWidget }
+export default CnToggleTableWidget

package/src/components/CnWidgetGrid/registerDashboardWidgets.js

@@ -75,7 +75,14 @@ import '../CnTasksWidget/index.js'
 import '../CnSectionsWidget/index.js'
 import '../CnFactsWidget/index.js'
 import '../CnFieldListWidget/index.js'
+import '../CnSettingsFormWidget/index.js'
+import '../CnSwitchRowsWidget/index.js'
+import '../CnRadioCardsWidget/index.js'
+import '../CnChipsFieldWidget/index.js'
+import '../CnToggleTableWidget/index.js'
+import '../CnChoicePickerWidget/index.js'
 import '../CnRecordListWidget/index.js'
+import '../CnSavedViewsWidget/index.js'
 import '../CnNotepadWidget/index.js'
 import '../CnObjectDataWidget/dashboardRegistration.js'
 import '../CnObjectGeoWidget/dashboardRegistration.js'