@conduction/nextcloud-vue 2.79.0 → 2.81.0

package/src/components/CnSwitchRowsWidget/CnSwitchRowsWidget.vue

@@ -0,0 +1,226 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V.
+  - SPDX-License-Identifier: EUPL-1.2
+-->
+
+<template>
+	<div class="cn-switch-rows" data-testid="cn-switch-rows">
+		<ul class="cn-switch-rows__list">
+			<li
+				v-for="row in rows"
+				:key="row.key"
+				class="cn-switch-rows__row"
+				:data-testid="`cn-switch-rows-row-${row.key}`">
+				<NcCheckboxRadioSwitch
+					:modelValue="values[row.key] === true"
+					type="switch"
+					:disabled="readOnly || busy === row.key"
+					@update:modelValue="toggle(row, $event)">
+					<span class="cn-switch-rows__label">{{ row.label }}</span>
+					<span v-if="row.hint" class="cn-switch-rows__hint">{{ row.hint }}</span>
+				</NcCheckboxRadioSwitch>
+			</li>
+		</ul>
+		<NcNoteCard v-if="notice" type="error" data-testid="cn-switch-rows-notice">
+			{{ notice }}
+		</NcNoteCard>
+	</div>
+</template>
+
+<script>
+import { NcCheckboxRadioSwitch, NcNoteCard } from '@nextcloud/vue'
+import { objectUrlOf, patchObject } from '../../utils/objectWrite.js'
+import { readPath } from '../../utils/readPath.js'
+import { serverErrorMessage } from '../../utils/serverErrorMessage.js'
+
+/**
+ * CnSwitchRowsWidget — the `switch-rows` widget: a card of switches, each with
+ * a label and a hint, bound to boolean fields of the CURRENT object. 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-switch-rows/specs/switch-rows/spec.md
+ */
+export default {
+	name: 'CnSwitchRowsWidget',
+
+	components: { NcCheckboxRadioSwitch, NcNoteCard },
+
+	inject: {
+		cnTranslate: { default: () => (key) => key },
+	},
+
+	props: {
+		/**
+		 * The widget configuration.
+		 *
+		 * - `rows` (required) — `[{ key, label, hint?, invert? }]`; `key` is a top-level boolean field. `invert` shows the switch on when the field is false (a stored `disabled` read as "enabled").
+		 * - `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 {
+			/** The switch states as last saved (by key, as the switch shows them). */
+			saved: {},
+			values: {},
+			busy: '',
+			notice: '',
+		}
+	},
+
+	computed: {
+		rows() {
+			const list = Array.isArray(this.content.rows) ? this.content.rows : []
+			return list
+				.filter((row) => row && row.key)
+				.map((row) => ({ ...row, label: this.tr(row.label || row.key), hint: this.tr(row.hint || '') }))
+		},
+
+		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 every switch off the object. */
+		adopt() {
+			const values = {}
+			for (const row of this.rows) {
+				const stored = readPath(this.objectData || {}, row.key) === true
+				values[row.key] = row.invert ? !stored : stored
+			}
+			this.saved = values
+			this.values = { ...values }
+		},
+
+		/**
+		 * 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-switch-rows/specs/switch-rows/spec.md#requirement-a-toggle-saves-that-one-field
+		 */
+		async toggle(row, on) {
+			if (!this.objectUrl) {
+				this.notice = this.tr('This switch cannot be saved here.')
+				return
+			}
+			this.notice = ''
+			this.busy = row.key
+			this.values = { ...this.values, [row.key]: on }
+			const stored = row.invert ? !on : on
+			try {
+				const data = await patchObject(this.objectUrl, { [row.key]: stored })
+				const written = data[row.key] !== undefined ? data[row.key] === true : stored
+				const shown = row.invert ? !written : written
+				this.saved = { ...this.saved, [row.key]: shown }
+				this.values = { ...this.values, [row.key]: shown }
+				/**
+				 * @event saved A switch was written.
+				 * @type {{field: string, value: boolean}}
+				 */
+				this.$emit('saved', { field: row.key, value: written })
+			} catch (e) {
+				this.values = { ...this.values, [row.key]: this.saved[row.key] }
+				this.notice = serverErrorMessage(e)
+			} finally {
+				this.busy = ''
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-switch-rows {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	min-width: 0;
+}
+
+.cn-switch-rows__list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.cn-switch-rows__row {
+	padding: 10px 0;
+	border-top: 1px solid var(--cn-board-hairline, var(--color-border));
+}
+
+.cn-switch-rows__row:first-child {
+	border-top: none;
+	padding-top: 0;
+}
+
+.cn-switch-rows__label {
+	display: block;
+	font-weight: 600;
+}
+
+.cn-switch-rows__hint {
+	display: block;
+	font-size: 12px;
+	font-weight: 400;
+	color: var(--color-text-maxcontrast);
+}
+</style>

package/src/components/CnSwitchRowsWidget/index.js

@@ -0,0 +1,25 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * CnSwitchRowsWidget — self-registers the `switch-rows` widget type (a card of
+ * switches, each with a label and a hint, bound to boolean fields of the
+ * current object and saved on toggle) into the shared dashboardWidgetRegistry.
+ */
+
+import CnSwitchRowsWidget from './CnSwitchRowsWidget.vue'
+import { registerDashboardWidget } from '../CnWidgetGrid/dashboardWidgetRegistry.js'
+
+registerDashboardWidget('switch-rows', {
+	renderer: CnSwitchRowsWidget,
+	form: null,
+	defaultContent: {
+		rows: [],
+	},
+	displayName: 'Switch rows',
+	icon: 'ToggleSwitch',
+	surfaces: ['detail-page'],
+})
+
+export { CnSwitchRowsWidget }
+export default CnSwitchRowsWidget

package/src/components/CnTabsWidget/CnTabsWidget.vue

@@ -80,10 +80,66 @@
 					</span>
 				</template>
 
+				<!-- A stack (`widgetIds`): every widget is a titled card; the
+				     first joins the open tab, the next ones stand below it. -->
+				<div
+					v-if="entry.widget && entry.stack.length"
+					class="cn-tabs-widget__stack"
+					:class="{ 'cn-tabs-widget__stack--grid': !!entry.grid }"
+					data-testid="cn-tabs-widget-stack">
+					<div class="cn-tabs-widget__stack-first" :style="spanStyle(entry.grid, 0)">
+						<CnDetailWidgetHost
+							:widget="entry.widget"
+							chrome="card"
+							:showCardTitle="true"
+							:showActions="false"
+							:availableWidgets="availableWidgets"
+							:objectId="objectId"
+							:object="objectData"
+							:objectType="objectType"
+							:schemaObject="schemaObject"
+							:register="register"
+							:schema="schema"
+							:store="store"
+							:surface="surface"
+							:integrationContext="integrationContext"
+							:cnRegistry="cnRegistry"
+							@geoSaved="onGeoSaved"
+							@openIntegration="onOpenIntegration"
+							@selectObject="onSelectObject" />
+					</div>
+					<div
+						v-for="(child, childIndex) in entry.stack"
+						:key="`${entry.key}-${child.id}`"
+						class="cn-tabs-widget__stack-item"
+						:style="spanStyle(entry.grid, childIndex + 1)"
+						:data-testid="`cn-tabs-widget-stack-${child.id}`">
+						<CnDetailWidgetHost
+							:widget="child"
+							chrome="card"
+							:showCardTitle="true"
+							:showActions="false"
+							:availableWidgets="availableWidgets"
+							:objectId="objectId"
+							:object="objectData"
+							:objectType="objectType"
+							:schemaObject="schemaObject"
+							:register="register"
+							:schema="schema"
+							:store="store"
+							:surface="surface"
+							:integrationContext="integrationContext"
+							:cnRegistry="cnRegistry"
+							@geoSaved="onGeoSaved"
+							@openIntegration="onOpenIntegration"
+							@selectObject="onSelectObject" />
+					</div>
+				</div>
 				<CnDetailWidgetHost
-					v-if="entry.widget"
+					v-else-if="entry.widget"
 					:widget="entry.widget"
 					chrome="bare"
+					:availableWidgets="availableWidgets"
 					:objectId="objectId"
 					:object="objectData"
 					:objectType="objectType"
@@ -114,6 +170,7 @@ import CnTab from '../CnTabs/CnTab.vue'
 import CnTabs from '../CnTabs/CnTabs.vue'
 import { normalizeLook } from '../../composables/useLook.js'
 import { resolveTabCount } from '../../utils/detailActionModel.js'
+import { fetchListTotal } from '../../utils/fetchFilterCounts.js'
 import { isActivityWidget } from '../../utils/headerMeta.js'
 import { PANEL_ACTION_SINK } from '../../utils/panelActions.js'
 import { evaluateVisibleWhen, evaluateVisibleWhenLocal, isLocallyDecidableVisibleWhen } from '../../utils/visibleWhen.js'
@@ -268,15 +325,24 @@ export default {
 		 * `tabs[]` entries are `{ widgetId, label?, icon?, count?, countField?, overflow? }`.
 		 * `label` and `icon` fall back to the referenced widget's own title and
 		 * icon. `count` is a number shown after the label; `countField` reads
-		 * it off the record instead (a list counts its items). `overflow: true`
+		 * it off the record instead (a list counts its items). `countFrom`
+		 * counts a list on the server: `"widget"` counts the child widget's
+		 * own list (`content.register`, `schema`, `filter`, tokens such as
+		 * `@objectId` resolved), an object `{ register, schema, filter? }`
+		 * names the list; `count` and `countField` win over it. `overflow: true`
 		 * lists the tab under "More".
 		 *
+		 * A tab with `widgetIds` can lay them out in a grid instead of one under
+		 * the other: `columns: 4` gives each a quarter of the row, and
+		 * `layout: [{ widgetId, gridWidth }]` sets a width (of 12) per widget, as
+		 * the page grid does. Widgets wrap onto the next row.
+		 *
 		 * `maxVisibleTabs` caps the strip: later tabs go under "More".
 		 * `hideEmpty: true` moves a tab whose count is 0 there too.
 		 * `moreLabel` names that menu. `variant: "segmented"` draws the strip
 		 * as a pill switch (CnTabs' segmented variant); `line` is the default.
 		 *
-		 * @type {{ tabs?: Array<{widgetId: string, label?: string, icon?: string, count?: number, countField?: string, overflow?: boolean}>, ariaLabel?: string, maxVisibleTabs?: number, hideEmpty?: boolean, moreLabel?: string, variant?: ('line'|'segmented') }}
+		 * @type {{ tabs?: Array<{widgetId?: string, widgetIds?: string[], label?: string, icon?: string, count?: number, countField?: string, countFrom?: ('widget'|{register: string, schema: string, filter?: object}), overflow?: boolean, columns?: number, layout?: Array<{widgetId: string, gridWidth: number}>}>, ariaLabel?: string, maxVisibleTabs?: number, hideEmpty?: boolean, moreLabel?: string, variant?: ('line'|'segmented') }}
 		 */
 		content: {
 			type: Object,
@@ -396,6 +462,9 @@ export default {
 			sourceVisibility: {},
 			// Bumped per evaluation round, so a slow answer from an earlier round is dropped.
 			visibilitySeq: 0,
+			// Totals counted for tabs with `countFrom`, by position in `content.tabs`.
+			widgetCounts: {},
+			countSeq: 0,
 			// Tab id named by the route hash that has not appeared yet (still pending).
 			hashTargetId: '',
 			// Items published by the panels, keyed by widget id. Keyed rather
@@ -438,7 +507,7 @@ export default {
 			// whatever its place in the manifest. `index` stays the position in
 			// `content.tabs`, which the source-mode conditions are keyed on.
 			const isActivityTab = (tab) => {
-				const id = typeof tab === 'string' ? tab : tab?.widgetId
+				const id = this.tabWidgetIds(tab)[0]
 				return isActivityWidget(this.availableWidgets.find((w) => w && w.id === id))
 			}
 			const ordered = authored.map((tab, index) => ({ tab, index }))
@@ -460,9 +529,19 @@ export default {
 				if (visibility === 'hidden') {
 					return
 				}
-				const widgetId = typeof tab === 'string' ? tab : tab?.widgetId
-				const widget = this.availableWidgets.find((w) => w && w.id === widgetId) || null
-				const count = resolveTabCount(typeof tab === 'object' ? tab : null, this.objectData)
+				// A stack (`widgetIds`) resolves every id; one that names no
+				// widget is skipped. The first that resolves is the panel's.
+				const ids = this.tabWidgetIds(tab)
+				const widgets = ids.length > 1
+					? ids.map((id) => this.availableWidgets.find((w) => w && w.id === id) || null).filter(Boolean)
+					: []
+				const widget = ids.length > 1
+					? (widgets[0] || null)
+					: (this.availableWidgets.find((w) => w && w.id === ids[0]) || null)
+				const widgetId = widget ? widget.id : ids[0]
+				const declared = resolveTabCount(typeof tab === 'object' ? tab : null, this.objectData)
+				const counted = this.widgetCounts[index]
+				const count = declared === null && typeof counted === 'number' ? counted : declared
 				// The board strip has no "More": every tab is in the strip.
 				let overflow = !this.isBoard && ((tab && tab.overflow === true) || (hideEmpty && count === 0))
 				if (!overflow && !this.isBoard) {
@@ -479,6 +558,8 @@ export default {
 					label: this.tabLabel(tab, widget, widgetId),
 					icon: (tab && tab.icon) || widget?.icon || '',
 					widget,
+					stack: widgets.slice(1),
+					grid: this.stackGrid(tab, widgets),
 					count,
 					overflow,
 					pending: visibility === 'pending',
@@ -497,6 +578,17 @@ export default {
 			return t('nextcloud-vue', 'Loading …')
 		},
 
+		/**
+		 * The lists the tabs count (`countFrom`), serialised, to count again
+		 * when they change.
+		 *
+		 * @return {string} The key.
+		 */
+		countSourcesKey() {
+			const tabs = Array.isArray(this.content?.tabs) ? this.content.tabs : []
+			return JSON.stringify(tabs.map((tab) => this.countSourceOf(tab)))
+		},
+
 		/** @return {string} The source-mode conditions, serialised, to re-evaluate when they change. */
 		sourceConditionsKey() {
 			const tabs = Array.isArray(this.content?.tabs) ? this.content.tabs : []
@@ -609,6 +701,12 @@ export default {
 		objectId() {
 			this.sourceVisibility = {}
 			this.refreshSourceVisibility()
+			this.widgetCounts = {}
+			this.refreshWidgetCounts()
+		},
+
+		countSourcesKey() {
+			this.refreshWidgetCounts()
 		},
 
 		sourceConditionsKey() {
@@ -643,10 +741,14 @@ export default {
 		}
 		this.activeKey = this.resolvedTabs[this.activeIndex]?.key || ''
 		this.refreshSourceVisibility()
+		this.refreshWidgetCounts()
 	},
 
 	mounted() {
-		this._onRefresh = () => this.refreshSourceVisibility()
+		this._onRefresh = () => {
+			this.refreshSourceVisibility()
+			this.refreshWidgetCounts()
+		}
 		subscribe('cn:page:refresh', this._onRefresh)
 		subscribe('cn:widget:refresh', this._onRefresh)
 	},
@@ -657,6 +759,67 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * The grid a stack lays its widgets out in, as one column span (of 12)
+		 * per widget in order, or null for the plain vertical stack. A tab says
+		 * `columns: 4` (every widget spans a quarter of the row) and/or
+		 * `layout: [{ widgetId, gridWidth }]`, the page grid's width key per
+		 * widget (of 12; a widget it does not name takes the `columns` share, or
+		 * the whole row). Widgets wrap onto the next row. Heights follow the
+		 * content.
+		 *
+		 * @param {object|string} tab The `content.tabs[]` entry.
+		 * @param {Array<object>} widgets The widgets of the stack, in order.
+		 * @return {number[]|null} The column span of each widget, or null.
+		 */
+		stackGrid(tab, widgets) {
+			if (!tab || typeof tab !== 'object' || widgets.length < 2) {
+				return null
+			}
+			const clamp = (value) => Math.min(12, Math.max(1, Math.floor(Number(value))))
+			const columns = Number(tab.columns)
+			const share = Number.isFinite(columns) && columns >= 1 ? clamp(12 / Math.min(12, Math.floor(columns))) : 12
+			const placed = new Map((Array.isArray(tab.layout) ? tab.layout : [])
+				.filter((entry) => entry && typeof entry.widgetId === 'string' && Number.isFinite(Number(entry.gridWidth)))
+				.map((entry) => [entry.widgetId, clamp(entry.gridWidth)]))
+			if (placed.size === 0 && share === 12) {
+				return null
+			}
+			return widgets.map((widget) => placed.get(widget.id) ?? share)
+		},
+
+		/**
+		 * The inline column span of one widget of a gridded stack.
+		 *
+		 * @param {number[]|null} grid The spans of the stack, or null.
+		 * @param {number} index The widget's position in the stack.
+		 * @return {object|undefined} The style, or undefined without a grid.
+		 */
+		spanStyle(grid, index) {
+			return grid ? { gridColumn: `span ${grid[index] || 12}` } : undefined
+		},
+
+		/**
+		 * The widget ids a tab names: `widgetIds` (a stack) when it holds at
+		 * least one id, else `widgetId`, or the bare string.
+		 *
+		 * @param {object|string} tab The `content.tabs[]` entry.
+		 * @return {string[]} The ids, at least one entry (possibly undefined).
+		 * @spec openspec/changes/screens-relation-pages/specs/relation-pages/spec.md#requirement-a-tab-can-hold-a-stack-of-widgets
+		 */
+		tabWidgetIds(tab) {
+			if (typeof tab === 'string') {
+				return [tab]
+			}
+			if (tab && Array.isArray(tab.widgetIds)) {
+				const ids = tab.widgetIds.filter((id) => typeof id === 'string' && id !== '')
+				if (ids.length) {
+					return ids
+				}
+			}
+			return [tab?.widgetId]
+		},
+
 		/**
 		 * The label a tab shows: the authored `label`, else (board look) History
 		 * for the activity widget, else the child widget's title, else its id.
@@ -733,6 +896,60 @@ export default {
 			}))
 		},
 
+		/**
+		 * The list a tab counts (`countFrom`): `"widget"` counts the child
+		 * widget's own list (its `content.register`, `content.schema` and
+		 * `content.filter`); an object `{ register, schema, filter? }` names
+		 * the list itself. Null for a tab that does not ask, or a child with
+		 * no list.
+		 *
+		 * @param {object|string} tab The `content.tabs[]` entry.
+		 * @return {{register: string, schema: string, filter: object}|null} The list.
+		 * @spec openspec/changes/screens-tab-counts-parity/specs/tab-counts/spec.md#requirement-a-tab-can-count-its-list
+		 */
+		countSourceOf(tab) {
+			const from = tab && typeof tab === 'object' ? tab.countFrom : null
+			let source = null
+			if (from === 'widget') {
+				// A stack counts its first widget that has a list.
+				const lists = this.tabWidgetIds(tab)
+					.map((id) => this.availableWidgets.find((w) => w && w.id === id))
+					.filter((w) => w && w.content && typeof w.content === 'object' && w.content.register && w.content.schema)
+				source = lists.length ? lists[0].content : null
+			} else if (from && typeof from === 'object') {
+				source = from
+			}
+			if (!source || typeof source.register !== 'string' || source.register === '' || typeof source.schema !== 'string' || source.schema === '') {
+				return null
+			}
+			const filter = source.filter && typeof source.filter === 'object' && !Array.isArray(source.filter) ? source.filter : {}
+			return { register: source.register, schema: source.schema, filter }
+		},
+
+		/**
+		 * Count the list behind every tab with `countFrom`: once on mount,
+		 * when the record changes and after a refresh. A tab keeps its last
+		 * total while the new one is on its way; a failed count shows none.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/screens-tab-counts-parity/specs/tab-counts/spec.md#requirement-a-tab-can-count-its-list
+		 */
+		async refreshWidgetCounts() {
+			const tabs = Array.isArray(this.content?.tabs) ? this.content.tabs : []
+			const seq = ++this.countSeq
+			const ctx = { objectId: this.objectId, object: this.objectData || undefined }
+			await Promise.all(tabs.map(async (tab, index) => {
+				const source = this.countSourceOf(tab)
+				if (!source) {
+					return
+				}
+				const total = await fetchListTotal(source.register, source.schema, source.filter, ctx).catch(() => null)
+				if (seq === this.countSeq) {
+					this.widgetCounts = { ...this.widgetCounts, [index]: total }
+				}
+			}))
+		},
+
 		/** @return {string} The route hash without its `#`, or ''. */
 		currentHash() {
 			const fromRoute = this.$route && typeof this.$route.hash === 'string' ? this.$route.hash : ''
@@ -823,6 +1040,36 @@ export default {
 </script>
 
 <style scoped>
+/* A stack (`widgetIds`): the panel's widget, then cards 20px apart. */
+.cn-tabs-widget__stack {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+}
+
+/* A gridded stack (`columns` / `layout` on the tab): 12 columns, widgets wrap
+   onto the next row, a row's cards as tall as the tallest. Narrow, it is the
+   plain stack again. */
+.cn-tabs-widget__stack--grid {
+	display: grid;
+	grid-template-columns: repeat(12, minmax(0, 1fr));
+	align-items: stretch;
+}
+
+.cn-tabs-widget__stack--grid > * {
+	min-width: 0;
+}
+
+@media (max-width: 700px) {
+	.cn-tabs-widget__stack--grid {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	.cn-tabs-widget__stack--grid > * {
+		grid-column: auto !important;
+	}
+}
+
 /* The panel is the card; the strip is not inside it. There is no title bar
    above the tabs either: the open tab names the panel, so a title row would
    say the same thing twice and cost a row of height on a card that is mostly
@@ -943,6 +1190,14 @@ export default {
 	height: 100%;
 }
 
+/* A list widget's footer Add bleeds through its card's 16px content padding
+   (margin 0 -16px -16px). The panel of a tab pads 12px, so on a tab that
+   holds the list directly the footer stuck out 4px on the right and at the
+   bottom and made the panel scroll. It bleeds exactly the panel's padding. */
+.cn-tabs-widget__tabs :deep(.cn-tabs__content > .cn-tab > .cn-detail-widget-host--bare .cn-object-list-widget__add) {
+	margin: auto -12px -12px;
+}
+
 .cn-tabs-widget__title {
 	align-items: center;
 	display: inline-flex;