@conduction/nextcloud-vue 2.56.0-beta.36 → 2.56.0-beta.37

package/src/components/CnIndexPage/useSelfFetchList.js

@@ -26,6 +26,15 @@ function resolveInitialQuickFilterIndex(quickFilters) {
  * @param {Array<object>} filterMaps Already route-resolved filter maps.
  * @return {object} The merged filter (scalar when a key has one value, array when many).
  */
+/**
+ * Rows one board fetch asks for. A board shows every matching row at once,
+ * so it loads far more than a table page (OpenRegister serves up to 1000);
+ * past this the board offers "Load more".
+ *
+ * @type {number}
+ */
+export const BOARD_PAGE_SIZE = 500
+
 /**
  * The sort a quick filter sets while it is active (`sort: { key, order }`, or a
  * list of those for a multi-column order), as sort keys, or null when it sets
@@ -236,7 +245,7 @@ export function useSelfFetchList(props, instance, inject, extras = {}) {
 		defaultSortKeys: initialSortKeys,
 		defaultActiveFilters: initialActiveFilters,
 		defaultSearchTerm: initialSearchTerm,
-		defaultPageSize: (props.pagination && props.pagination.limit) || undefined,
+		defaultPageSize: props.viewMode === 'board' ? BOARD_PAGE_SIZE : ((props.pagination && props.pagination.limit) || undefined),
 		defaultVisibleColumns: configuredColumnKeys.length ? configuredColumnKeys : null,
 		// `pages[].config.extend` → OpenRegister's repeated `_extend[]`. A
 		// getter so a reactive change re-scopes the next fetch, matching how

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -141,9 +141,11 @@
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
 import { NcLoadingIcon } from '@nextcloud/vue'
+import { inject, ref } from 'vue'
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
 import CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'
+import { useEndpointSource } from '../../composables/useEndpointSource.js'
 import { actionLink, dispatchAction, interpolateActionTarget } from '../../utils/actionsDispatcher.js'
 import { isBadgeVariant } from '../../utils/badgeVariants.js'
 import { ageInDays } from '../../utils/boardDate.js'
@@ -180,7 +182,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`); `avatar` puts a circle with the initials of a name
+ * `rowRoute`, `pageControls`), or `endpointSource` (an app endpoint whose
+ * payload, after `responsePath`, is the array of rows, as on the object table); `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}"`).
@@ -213,7 +216,9 @@ export default {
 		 * The list config: `{ register, schema, filter?, sort?, limit?, extend?,
 		 * presentation?, title?, meta?, text?, label?, pill?, trailing?, icon?,
 		 * rowRoute?, rowIdField?, headerLink?, headerNote?, emptyText?, errorText?,
-		 * valueLabels? }`. `valueLabels` maps a field's stored values to the labels
+		 * valueLabels?, endpointSource? }`. `endpointSource` (`{ url, method?,
+		 * params?, responsePath? }`) reads the rows from an app endpoint instead
+		 * of `register` / `schema`. `valueLabels` maps a field's stored values to the labels
 		 * the templates show.
 		 *
 		 * @type {object}
@@ -238,6 +243,28 @@ export default {
 
 	emits: ['header'],
 
+	setup(props) {
+		const objectCtxRaw = inject('cnObjectContext', null)
+		const workspaceRaw = inject('cnWorkspaceContext', null)
+		const appConfigRaw = inject('cnAppConfig', ref({}))
+		const { data, loading, error } = useEndpointSource(
+			() => props.content?.endpointSource || null,
+			{
+				ctx: () => {
+					const injected = unwrap(objectCtxRaw) || {}
+					return {
+						...injected,
+						objectId: props.objectId ?? injected.objectId ?? props.objectData?.id ?? null,
+						object: props.objectData || injected.object || null,
+						workspace: unwrap(workspaceRaw) || {},
+						config: unwrapAppConfig(appConfigRaw) || {},
+					}
+				},
+			},
+		)
+		return { epData: data, epLoading: loading, epError: error }
+	},
+
 	data() {
 		return {
 			rows: [],
@@ -294,6 +321,22 @@ export default {
 			return { config: unwrapAppConfig(this.cnAppConfig) }
 		},
 
+		/**
+		 * Whether the rows come from `endpointSource` rather than OpenRegister.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/endpoint-source-card-grid-record-list/specs/dashboard-page/spec.md#requirement-a-record-list-and-a-card-grid-can-read-an-endpoint
+		 */
+		endpointActive() {
+			const source = this.content?.endpointSource
+			return Boolean(source && typeof source === 'object' && source.url)
+		},
+
+		/** @return {string} The endpoint read's state, to copy into the list when it changes. */
+		endpointKey() {
+			return this.endpointActive ? JSON.stringify([this.epData, this.epLoading, this.epError]) : ''
+		},
+
 		/** @return {number} The fetch cap. */
 		limit() {
 			const value = Number(this.content?.limit)
@@ -398,6 +441,10 @@ export default {
 		requestKey() {
 			this.fetchRows()
 		},
+
+		endpointKey() {
+			this.fetchRows()
+		},
 	},
 
 	mounted() {
@@ -854,6 +901,23 @@ export default {
 			return { rows, total: typeof head.total === 'number' ? head.total : rows.length }
 		},
 
+		/**
+		 * Copy the endpoint read into the list: its payload must be an array of
+		 * rows (anything else is an empty list), and a failed read is an error.
+		 *
+		 * @spec openspec/changes/endpoint-source-card-grid-record-list/specs/dashboard-page/spec.md#requirement-a-record-list-and-a-card-grid-can-read-an-endpoint
+		 */
+		takeEndpointRows() {
+			this.rows = Array.isArray(this.epData) ? this.epData : []
+			this.total = this.rows.length
+			this.loading = this.epLoading === true
+			this.error = Boolean(this.epError)
+			this.lenses = {}
+			if (!this.loading) {
+				this.emitHeader()
+			}
+		},
+
 		/**
 		 * Fetch the list. Sends nothing while a required token is unresolved
 		 * or the source is incomplete.
@@ -862,6 +926,10 @@ export default {
 		 */
 		async fetchRows() {
 			const c = this.content || {}
+			if (this.endpointActive) {
+				this.takeEndpointRows()
+				return
+			}
 			if (!c.register || !c.schema || this.waiting) {
 				this.rows = []
 				this.total = 0

package/src/components/CnRegisterMapping/CnRegisterMapping.md

@@ -111,6 +111,10 @@ export default {
 </script>
 ```
 
+## Several groups
+
+With more than one group each group starts closed: its heading is a button that shows the group name and how many of its types are configured ("2/8 configured"), and opens the register select and type list on a click or Enter. A page with several registers is a short card until the administrator opens the group they need.
+
 ## Additional props
 
 | Prop | Type | Default | Description |
@@ -122,5 +126,6 @@ export default {
 | `reimporting` | Boolean | `false` | Disables the reimport button and shows a spinner while reimport is in progress |
 | `saveButtonText` | String | `'Save configuration'` | Label for the save button |
 | `reimportButtonText` | String | `'Re-import configuration'` | Label for the reimport button |
+| `collapseGroups` | Boolean | `null` | Draw each group as a heading button that opens and closes it, with its configured count shown while closed; the groups start closed. `null` does this when there is more than one group, `true` or `false` forces it |
 | `autoMatch` | Boolean | `true` | Automatically match schema titles to type slugs when a register is selected |
 | `labels` | Object | *(see below)* | UI label overrides for all user-visible strings (register, schema, notConfigured, noSchemas, selectRegister, selectSchema, allConfigured, partiallyConfigured) |

package/src/components/CnRegisterMapping/CnRegisterMapping.vue

@@ -4,7 +4,7 @@
 		:description="description"
 		:docUrl="docUrl"
 		:loading="registersLoading"
-		loadingMessage="Loading registers..."
+		:loadingMessage="t('nextcloud-vue', 'Loading registers…')"
 		:error="!!registersError"
 		:errorMessage="registersError || ''"
 		:onRetry="loadRegisters">
@@ -19,7 +19,7 @@
 					<NcLoadingIcon v-if="saving" :size="20" />
 					<ContentSave v-else :size="20" />
 				</template>
-				{{ saving ? 'Saving...' : saveButtonText }}
+				{{ saving ? t('nextcloud-vue', 'Saving…') : saveButtonText }}
 			</NcButton>
 			<NcButton
 				v-if="showReimportButton"
@@ -30,7 +30,7 @@
 					<NcLoadingIcon v-if="reimporting" :size="20" />
 					<Refresh v-else :size="20" />
 				</template>
-				{{ reimporting ? 'Importing...' : reimportButtonText }}
+				{{ reimporting ? t('nextcloud-vue', 'Importing…') : reimportButtonText }}
 			</NcButton>
 			<slot name="actions" />
 		</template>
@@ -40,9 +40,39 @@
 			<div
 				v-for="(group, groupIdx) in groups"
 				:key="groupIdx"
-				class="cn-register-mapping__group">
-				<!-- Group header -->
-				<slot name="group-header"
+				class="cn-register-mapping__group"
+				:class="{ 'cn-register-mapping__group--collapsed': !isGroupOpen(groupIdx) }"
+				data-testid="cn-register-mapping-group">
+				<!-- Group header. With collapsible groups a heading holds the button
+				     that opens and closes the group (the WAI-ARIA accordion); the
+				     count stays visible while it is closed. -->
+				<h4 v-if="groupsCollapsible" class="cn-register-mapping__group-heading">
+					<button
+						type="button"
+						class="cn-register-mapping__group-toggle"
+						:aria-expanded="String(isGroupOpen(groupIdx))"
+						:aria-controls="groupBodyId(groupIdx)"
+						data-testid="cn-register-mapping-group-toggle"
+						@click="toggleGroup(groupIdx)">
+						<span class="cn-register-mapping__group-chevron" aria-hidden="true">
+							<ChevronUp v-if="isGroupOpen(groupIdx)" :size="20" />
+							<ChevronDown v-else :size="20" />
+						</span>
+						<slot name="group-header"
+							:group="group"
+							:configuredCount="configuredCount(groupIdx)"
+							:totalCount="group.types.length">
+							<span class="cn-register-mapping__group-header">
+								<span class="cn-register-mapping__group-title">{{ group.name }}</span>
+								<span class="cn-register-mapping__group-status" data-testid="cn-register-mapping-group-count">
+									{{ configuredCount(groupIdx) }}/{{ group.types.length }} {{ labels.partiallyConfigured }}
+								</span>
+							</span>
+						</slot>
+					</button>
+				</h4>
+				<slot v-else
+					name="group-header"
 					:group="group"
 					:configuredCount="configuredCount(groupIdx)"
 					:totalCount="group.types.length">
@@ -56,90 +86,95 @@
 					</div>
 				</slot>
 
-				<!-- Group description -->
-				<p v-if="group.description" class="cn-register-mapping__group-description">
-					{{ group.description }}
-				</p>
-
-				<!-- Register selector -->
-				<div class="cn-register-mapping__register-select">
-					<label class="cn-register-mapping__label">{{ labels.register }}</label>
-					<NcSelect
-						:modelValue="selectedRegister(groupIdx)"
-						:options="registerSelectOptions"
-						:placeholder="labels.selectRegister"
-						:inputLabel="labels.register"
-						:loading="registersLoading"
-						label="label"
-						trackBy="value"
-						@update:modelValue="handleRegisterChange(groupIdx, $event)" />
-				</div>
-
-				<!-- Type list -->
-				<div v-if="selectedRegister(groupIdx)" class="cn-register-mapping__type-list">
-					<!-- Header row -->
-					<div class="cn-register-mapping__type-list-header">
-						<span>Name</span>
-						<span>Schema</span>
-						<span />
-						<span />
+				<div
+					v-show="isGroupOpen(groupIdx)"
+					:id="groupBodyId(groupIdx)"
+					class="cn-register-mapping__group-body"
+					data-testid="cn-register-mapping-group-body">
+					<!-- Group description -->
+					<p v-if="group.description" class="cn-register-mapping__group-description">
+						{{ group.description }}
+					</p>
+
+					<!-- Register selector -->
+					<div class="cn-register-mapping__register-select">
+						<NcSelect
+							:modelValue="selectedRegister(groupIdx)"
+							:options="registerSelectOptions"
+							:placeholder="labels.selectRegister"
+							:inputLabel="labels.register"
+							:loading="registersLoading"
+							label="label"
+							trackBy="value"
+							@update:modelValue="handleRegisterChange(groupIdx, $event)" />
 					</div>
 
-					<!-- Type rows -->
-					<template v-for="type in group.types" :key="type.slug + '-row'">
-						<div
-							class="cn-register-mapping__type-row"
-							:class="{ 'cn-register-mapping__type-row--expanded': isExpanded(groupIdx, type.slug) }"
-							@click="toggleExpand(groupIdx, type.slug)">
-							<span class="cn-register-mapping__type-name">{{ type.label }}</span>
-							<span class="cn-register-mapping__type-schema">
-								{{ schemaLabel(groupIdx, type) || labels.notConfigured }}
-							</span>
-							<span class="cn-register-mapping__type-status">
-								<span
-									class="cn-register-mapping__status-dot"
-									:class="schemaValue(groupIdx, type)
-										? 'cn-register-mapping__status-dot--configured'
-										: 'cn-register-mapping__status-dot--unconfigured'" />
-							</span>
-							<span class="cn-register-mapping__type-chevron">
-								<ChevronUp v-if="isExpanded(groupIdx, type.slug)" :size="20" />
-								<ChevronDown v-else :size="20" />
-							</span>
+					<!-- Type list -->
+					<div v-if="selectedRegister(groupIdx)" class="cn-register-mapping__type-list">
+						<!-- Header row -->
+						<div class="cn-register-mapping__type-list-header">
+							<span>{{ t('nextcloud-vue', 'Object type') }}</span>
+							<span>{{ labels.schema }}</span>
+							<span />
+							<span />
 						</div>
 
-						<!-- Expanded detail -->
-						<transition name="slide">
+						<!-- Type rows -->
+						<template v-for="type in group.types" :key="type.slug + '-row'">
 							<div
-								v-if="isExpanded(groupIdx, type.slug)"
-								class="cn-register-mapping__type-detail">
-								<p v-if="type.description" class="cn-register-mapping__type-description">
-									{{ type.description }}
-								</p>
-								<NcSelect
-									:modelValue="selectedSchema(groupIdx, type)"
-									:options="schemaSelectOptions(groupIdx)"
-									:placeholder="labels.selectSchema"
-									:inputLabel="labels.schema"
-									label="label"
-									trackBy="value"
-									@update:modelValue="handleSchemaChange(groupIdx, type, $event)" />
+								class="cn-register-mapping__type-row"
+								:class="{ 'cn-register-mapping__type-row--expanded': isExpanded(groupIdx, type.slug) }"
+								@click="toggleExpand(groupIdx, type.slug)">
+								<span class="cn-register-mapping__type-name">{{ type.label }}</span>
+								<span class="cn-register-mapping__type-schema">
+									{{ schemaLabel(groupIdx, type) || labels.notConfigured }}
+								</span>
+								<span class="cn-register-mapping__type-status">
+									<span
+										class="cn-register-mapping__status-dot"
+										:class="schemaValue(groupIdx, type)
+											? 'cn-register-mapping__status-dot--configured'
+											: 'cn-register-mapping__status-dot--unconfigured'" />
+								</span>
+								<span class="cn-register-mapping__type-chevron">
+									<ChevronUp v-if="isExpanded(groupIdx, type.slug)" :size="20" />
+									<ChevronDown v-else :size="20" />
+								</span>
 							</div>
-						</transition>
-					</template>
-				</div>
 
-				<!-- No register selected -->
-				<NcNoteCard v-else-if="!registersLoading" type="info">
-					{{ labels.selectRegister }}
-				</NcNoteCard>
-
-				<!-- No schemas available -->
-				<NcNoteCard
-					v-if="selectedRegister(groupIdx) && schemaSelectOptions(groupIdx).length === 0 && !registersLoading"
-					variant="warning">
-					{{ labels.noSchemas }}
-				</NcNoteCard>
+							<!-- Expanded detail -->
+							<transition name="slide">
+								<div
+									v-if="isExpanded(groupIdx, type.slug)"
+									class="cn-register-mapping__type-detail">
+									<p v-if="type.description" class="cn-register-mapping__type-description">
+										{{ type.description }}
+									</p>
+									<NcSelect
+										:modelValue="selectedSchema(groupIdx, type)"
+										:options="schemaSelectOptions(groupIdx)"
+										:placeholder="labels.selectSchema"
+										:inputLabel="labels.schema"
+										label="label"
+										trackBy="value"
+										@update:modelValue="handleSchemaChange(groupIdx, type, $event)" />
+								</div>
+							</transition>
+						</template>
+					</div>
+
+					<!-- No register selected -->
+					<NcNoteCard v-else-if="!registersLoading" type="info">
+						{{ labels.selectRegister }}
+					</NcNoteCard>
+
+					<!-- No schemas available -->
+					<NcNoteCard
+						v-if="selectedRegister(groupIdx) && schemaSelectOptions(groupIdx).length === 0 && !registersLoading"
+						variant="warning">
+						{{ labels.noSchemas }}
+					</NcNoteCard>
+				</div>
 			</div>
 		</div>
 
@@ -160,6 +195,8 @@ import Refresh from 'vue-material-design-icons/Refresh.vue'
 import { buildHeaders, prefixUrl } from '../../utils/headers.js'
 import { CnSettingsSection } from '../CnSettingsSection/index.js'
 
+let mappingCount = 0
+
 /**
  * CnRegisterMapping - OpenRegister register/schema configuration component.
  *
@@ -284,6 +321,20 @@ export default {
 			default: () => t('nextcloud-vue', 'Re-import configuration'),
 		},
 
+		/**
+		 * Draw each group as a header that opens and closes it, showing its
+		 * configured count while closed. The groups start closed. `null` (the
+		 * default) collapses them when there is more than one group, so a page
+		 * with several registers is not one long card.
+		 *
+		 * @type {boolean|null}
+		 * @spec openspec/changes/register-mapping-collapsed-groups/specs/register-mapping/spec.md#requirement-register-groups-start-closed-with-their-count
+		 */
+		collapseGroups: {
+			type: Boolean,
+			default: null,
+		},
+
 		/** Auto-match schema titles to type slugs on register change */
 		autoMatch: {
 			type: Boolean,
@@ -319,6 +370,9 @@ export default {
 			// Local state
 			localConfig: {},
 			expandedRows: {},
+			// The groups opened by the reader, by index.
+			openGroups: {},
+			uid: ++mappingCount,
 		}
 	},
 
@@ -326,11 +380,21 @@ export default {
 		/** Register options for NcSelect */
 		registerSelectOptions() {
 			return this.registers.map((r) => ({
-				label: r.title || r.slug || `Register ${r.id}`,
+				label: r.title || r.slug || t('nextcloud-vue', 'Register {id}', { id: r.id }),
 				value: String(r.id),
 			}))
 		},
 
+		/**
+		 * Whether the groups open and close.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/register-mapping-collapsed-groups/specs/register-mapping/spec.md#requirement-register-groups-start-closed-with-their-count
+		 */
+		groupsCollapsible() {
+			return this.collapseGroups === null ? this.groups.length > 1 : this.collapseGroups
+		},
+
 		/** Whether local config differs from prop */
 		hasChanges() {
 			return JSON.stringify(this.localConfig) !== JSON.stringify(this.configuration)
@@ -353,6 +417,39 @@ export default {
 	},
 
 	methods: {
+		t,
+
+		/**
+		 * Whether a group's body shows.
+		 *
+		 * @param {number} groupIdx Group index
+		 * @return {boolean}
+		 */
+		isGroupOpen(groupIdx) {
+			return !this.groupsCollapsible || this.openGroups[groupIdx] === true
+		},
+
+		/**
+		 * Open a closed group, or close an open one.
+		 *
+		 * @param {number} groupIdx Group index
+		 * @return {void}
+		 * @spec openspec/changes/register-mapping-collapsed-groups/specs/register-mapping/spec.md#requirement-register-groups-start-closed-with-their-count
+		 */
+		toggleGroup(groupIdx) {
+			this.openGroups = { ...this.openGroups, [groupIdx]: !this.isGroupOpen(groupIdx) }
+		},
+
+		/**
+		 * The id of a group's body, for the header's `aria-controls`.
+		 *
+		 * @param {number} groupIdx Group index
+		 * @return {string}
+		 */
+		groupBodyId(groupIdx) {
+			return `cn-register-mapping-${this.uid}-group-${groupIdx}`
+		},
+
 		/**
 		 * Get the config key for a group's register.
 		 *
@@ -437,7 +534,7 @@ export default {
 				return selected.label
 			}
 			const value = this.schemaValue(groupIdx, type)
-			return value ? `Schema ${value}` : ''
+			return value ? t('nextcloud-vue', 'Schema {id}', { id: value }) : ''
 		},
 
 		/**
@@ -453,7 +550,7 @@ export default {
 			}
 			const schemas = this.schemasByRegister[reg.value] || []
 			return schemas.map((s) => ({
-				label: s.title || s.slug || `Schema ${s.id}`,
+				label: s.title || s.slug || t('nextcloud-vue', 'Schema {id}', { id: s.id }),
 				value: String(s.id),
 			}))
 		},
@@ -591,7 +688,7 @@ export default {
 				})
 
 				if (!response.ok) {
-					this.registersError = `Failed to fetch registers: ${response.statusText}`
+					this.registersError = t('nextcloud-vue', 'The registers could not be loaded: {reason}', { reason: response.statusText || response.status })
 					return
 				}
 
@@ -612,7 +709,7 @@ export default {
 					}
 				}
 			} catch (error) {
-				this.registersError = error.message || 'Network error fetching registers'
+				this.registersError = error.message || t('nextcloud-vue', 'The registers could not be loaded: {reason}', { reason: t('nextcloud-vue', 'no connection') })
 			} finally {
 				this.registersLoading = false
 			}
@@ -671,6 +768,52 @@ export default {
 	margin-bottom: 12px;
 }
 
+.cn-register-mapping__group-heading {
+	margin: 0 0 12px;
+	font: inherit;
+}
+
+.cn-register-mapping__group--collapsed .cn-register-mapping__group-heading {
+	margin-bottom: 0;
+}
+
+.cn-register-mapping__group-toggle {
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	width: 100%;
+	min-height: 44px;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: inherit;
+	font: inherit;
+	text-align: start;
+	cursor: pointer;
+}
+
+.cn-register-mapping__group-toggle:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+	border-radius: var(--border-radius);
+}
+
+.cn-register-mapping__group-chevron {
+	display: inline-flex;
+	flex: none;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-register-mapping__group-toggle .cn-register-mapping__group-header {
+	flex: 1 1 auto;
+	flex-wrap: wrap;
+	gap: 4px 12px;
+	min-width: 0;
+	margin-bottom: 0;
+}
+
 .cn-register-mapping__group-title {
 	font-size: 16px;
 	font-weight: 600;
@@ -689,14 +832,6 @@ export default {
 	margin: 0 0 12px 0;
 }
 
-.cn-register-mapping__label {
-	display: block;
-	font-weight: 500;
-	font-size: 13px;
-	color: var(--color-text-maxcontrast);
-	margin-bottom: 4px;
-}
-
 .cn-register-mapping__register-select {
 	margin-bottom: 16px;
 	max-width: 400px;

package/src/components/CnSettingsPage/CnSettingsPage.vue

@@ -303,6 +303,7 @@ import {
 import ContentSave from 'vue-material-design-icons/ContentSave.vue'
 import CnBuildiqEditButton from '../CnBuildiqEditButton/CnBuildiqEditButton.vue'
 import CnRegisterMapping from '../CnRegisterMapping/CnRegisterMapping.vue'
+import CnToggleTableWidget from '../CnToggleTableWidget/CnToggleTableWidget.vue'
 import CnVersionInfoCard from '../CnVersionInfoCard/CnVersionInfoCard.vue'
 import { useLook } from '../../composables/useLook.js'
 import { prefixUrl } from '../../utils/headers.js'
@@ -340,6 +341,8 @@ const COMPONENT_DISCRIMINATOR = Symbol('cn-settings-component-widget')
 const BUILTIN_SETTINGS_WIDGETS = Object.freeze({
 	'version-info': CnVersionInfoCard,
 	'register-mapping': CnRegisterMapping,
+	// Rows with a switch: objects (`bind.mode: 'each'`) or a config map (`'map'`).
+	'toggle-table': CnToggleTableWidget,
 	component: COMPONENT_DISCRIMINATOR,
 })
 
@@ -367,7 +370,8 @@ const BUILTIN_SETTINGS_WIDGETS = Object.freeze({
  *  - `widgets[]`   — ordered list of widgets. Each entry has a `type`
  *    string and optional `props`. Built-in widget types resolve
  *    first (`version-info` → `CnVersionInfoCard`, `register-mapping`
- *    → `CnRegisterMapping`); unknown types fall back to the
+ *    → `CnRegisterMapping`, `toggle-table` → `CnToggleTableWidget`);
+ *    unknown types fall back to the
  *    `customComponents` registry.
  *
  * Widget events (e.g. CnRegisterMapping's `@save`, CnVersionInfoCard's