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

package/src/components/CnWorkspaceFilterWidget/CnWorkspaceFilterWidget.vue

@@ -90,7 +90,9 @@
 			:modelValue="selectedOption"
 			:options="displayOptions"
 			:clearable="false"
-			:inputLabel="label || writeKey"
+			:inputLabel="content.inline ? '' : (label || writeKey)"
+			:labelOutside="content.inline === true"
+			:ariaLabelCombobox="label || writeKey"
 			label="label"
 			data-testid="cn-workspace-filter-select"
 			@update:modelValue="onSelect" />
@@ -928,4 +930,29 @@ export default {
 	color: var(--color-text-maxcontrast);
 	font-size: 0.85em;
 }
+
+/* On a phone the bar's controls take a row each (the chips already wrap), and
+   a switch and a select are 44px touch targets. */
+@media (max-width: 640px) {
+	.cn-workspace-filter-widget--bar > .cn-workspace-filter-widget--inline {
+		flex: 1 1 100%;
+	}
+
+	.cn-workspace-filter-widget--bar > .cn-workspace-filter-widget--end {
+		margin-inline-start: 0;
+	}
+
+	.cn-workspace-filter-widget--inline .cn-workspace-filter-widget__toggle {
+		min-height: 44px;
+	}
+
+	.cn-workspace-filter-widget--inline :deep(.v-select) {
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+
+	.cn-workspace-filter-widget--inline :deep(.vs__dropdown-toggle) {
+		min-height: 44px;
+	}
+}
 </style>

package/src/components/index.js

@@ -219,6 +219,12 @@ export { CnTasksWidgetForm } from './CnTasksWidgetForm/index.js'
 export { CnSectionsWidget } from './CnSectionsWidget/index.js'
 export { CnFactsWidget } from './CnFactsWidget/index.js'
 export { CnFieldListWidget } from './CnFieldListWidget/index.js'
+export { CnSettingsFormWidget } from './CnSettingsFormWidget/index.js'
+export { CnSwitchRowsWidget } from './CnSwitchRowsWidget/index.js'
+export { CnRadioCardsWidget } from './CnRadioCardsWidget/index.js'
+export { CnChipsFieldWidget } from './CnChipsFieldWidget/index.js'
+export { CnToggleTableWidget } from './CnToggleTableWidget/index.js'
+export { CnChoicePickerWidget } from './CnChoicePickerWidget/index.js'
 export { CnRecordListWidget } from './CnRecordListWidget/index.js'
 export { CnBannerWidget } from './CnBannerWidget/index.js'
 export { default as CnConversationWidget } from './CnConversationThread/CnConversationWidget.vue'
@@ -236,6 +242,7 @@ export { CnMarkdownWidget } from './CnMarkdownWidget/index.js'
 export { CnMarkdownWidgetForm } from './CnMarkdownWidgetForm/index.js'
 export { CnObjectListWidget } from './CnObjectListWidget/index.js'
 export { CnObjectListWidgetForm } from './CnObjectListWidgetForm/index.js'
+export { CnSavedViewsWidget } from './CnSavedViewsWidget/index.js'
 export { CnSavedViewWidget } from './CnSavedViewWidget/index.js'
 export { CnSavedViewWidgetForm } from './CnSavedViewWidgetForm/index.js'
 export { CnChartWidgetForm } from './CnChartWidgetForm/index.js'

package/src/css/look-board-detail.css

@@ -202,6 +202,15 @@
 	gap: 4px;
 }
 
+/* No inner scroller: tabs that do not fit the width wrap onto a second row
+   instead of scrolling sideways (the library's default strip), so the strip
+   has no scrollbar, no clipped tab and no fade or chevron to find the rest. */
+.cn-look-board .cn-tabs--board .cn-tabs__nav {
+	flex-wrap: wrap;
+	overflow: visible;
+	row-gap: 4px;
+}
+
 .cn-look-board .cn-tabs--board .cn-tabs__nav-item {
 	background-color: var(--color-background-dark);
 	border: 1px solid var(--color-border-dark);
@@ -347,12 +356,28 @@
 	padding: 0 0 10px;
 }
 
-.cn-look-board .cn-object-data-widget__label {
-	color: var(--color-text-maxcontrast);
+/* Outranks the component's own `.cn-object-data-widget__label[data-v-...]`
+   (weight 500, 0.85em, which has the same specificity as the look's rule and
+   wins on source order wherever a bundle, such as a companion app's, loads
+   after this stylesheet), through the grid the labels sit in. Measured live:
+   the labels read bold and dark where the boards (DqContact, PqKlant, ShKlant)
+   draw them 13px, regular weight and light grey.
+
+   The colour carries `!important`: a theme (nldesign's element overrides) sets
+   the ink of every `div` outside the header with a selector that has an id in
+   its `:not()`, which no class rule outranks. */
+.cn-look-board .cn-object-data-widget__grid .cn-object-data-widget__label {
+	color: var(--color-text-maxcontrast) !important;
 	font-size: 13px;
 	font-weight: 400;
 }
 
+/* The facts card's labels: the same light grey, regular weight. */
+.cn-look-board .cn-facts-widget .cn-facts-widget__label {
+	color: var(--color-text-maxcontrast);
+	font-weight: 400;
+}
+
 .cn-look-board .cn-object-data-widget__value {
 	font-weight: 500;
 }
@@ -610,3 +635,12 @@
 	font-size: 13px;
 	margin: 2px 0 0;
 }
+
+/* The sidebar's own open toggle (NcAppSidebar's `.app-sidebar__toggle`, drawn
+   when the sidebar is closed) is positioned over the content's top-right
+   corner, which in this look is the header's last button: a stray square icon
+   on "More". The board draws none, so it is hidden on a detail page and the
+   header menu offers "Open sidebar" instead. */
+.cn-look-board:has(.cn-detail-page) > .app-sidebar__toggle {
+	display: none;
+}

package/src/css/look-board-index.css

@@ -557,6 +557,29 @@
 	font-size: 13px;
 }
 
+/* An avatar in the title column (PtAccounts): a 32px chip circle, 10px before
+   the name, the e-mail under the name beside it. The name keeps the title's
+   weight and size, and its underline: an inline-flex box is atomic, so the
+   cell's own underline does not reach it. */
+.cn-look-board .cn-table-container--board .cn-data-table .cn-cell-renderer__avatar {
+	gap: 10px;
+}
+
+.cn-look-board .cn-table-container--board .cn-data-table .cn-cell-renderer__avatar-initials {
+	background: var(--color-background-dark);
+	color: var(--color-main-text);
+	font-size: 12px;
+}
+
+.cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title .cn-cell-renderer__avatar-name {
+	text-decoration: underline;
+	text-underline-offset: 2px;
+}
+
+.cn-look-board .cn-table-container--board.cn-table-container--title-plain .cn-data-table td.cn-table-col--title .cn-cell-renderer__avatar-name {
+	text-decoration: none;
+}
+
 /* A status pill: 3px 10px, radius 12, 13px weight 600. The colours stay the
    status colour map's. */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-status-badge {

package/src/css/look-board.css

@@ -555,3 +555,75 @@
 .cn-look-board .cn-cell-renderer__age:not(.cn-look-nextcloud *) {
 	font-weight: 600;
 }
+
+/* ---- Record list on a dashboard card (PtDashboard) ---------------------- */
+/* The dashboard's card body is flush, so the rows carry their own inset: the
+   board's card pads 24px at the sides and each row 14px, a soft hairline
+   between rows, the title 15px weight 600 and the meta 13px muted. A row is a
+   link, but only the hover says so: no underline on any text run, however the
+   host styles its links (`!important`, because a host rule such as
+   `#content a` outranks any class). The pill and the date sit at the right. */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list {
+	padding: 0 24px 10px;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list--rows .cn-record-list__item + .cn-record-list__item {
+	border-top: 1px solid var(--color-border-dark, var(--color-border));
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row {
+	padding: 14px 0;
+	flex-wrap: wrap;
+	gap: 8px 16px;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row:hover,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row:focus-visible,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row * {
+	color: inherit;
+	text-decoration: none !important;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__title {
+	color: var(--color-main-text);
+	font-size: 15px;
+	font-weight: 600;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__meta {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__trailing {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+	font-weight: 600;
+}
+
+/* Hover: the whole row takes the hover ground, 8px beyond the text so the
+   text does not move. */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row--link {
+	margin-inline: -8px;
+	padding-inline: 8px;
+	border-radius: 8px;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row--link:hover,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row--link:focus-visible {
+	background: var(--color-background-hover);
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row--link:hover .cn-record-list__title {
+	text-decoration: none !important;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__aside {
+	margin-inline-start: auto;
+}
+
+/* The board draws no chevron after the pill and date. */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__chevron {
+	display: none;
+}

package/src/index.js

@@ -60,7 +60,9 @@ export {
 	CnChartWidgetForm,
 	CnChatPage,
 	CnChildRecordsField,
+	CnChipsFieldWidget,
 	CnChoiceCards,
+	CnChoicePickerWidget,
 	CnColorPicker,
 	CnCommandPalette,
 	CnConfigurationCard,
@@ -245,6 +247,7 @@ export {
 	CnQuickFilterBar,
 	CnQuicklinksWidget,
 	CnQuicklinksWidgetForm,
+	CnRadioCardsWidget,
 	CnRecordListWidget,
 	CnReferencePreview,
 	CnRegisterMapping,
@@ -263,6 +266,7 @@ export {
 	CnSavedViewsControl,
 	CnSavedViewShareDialog,
 	CnSavedViewShareFields,
+	CnSavedViewsWidget,
 	CnSavedViewWidget,
 	CnSavedViewWidgetForm,
 	CnSaveViewDialog,
@@ -270,6 +274,7 @@ export {
 	CnSearchPage,
 	CnSectionsWidget,
 	CnSettingsCard,
+	CnSettingsFormWidget,
 	CnSettingsPage,
 	CnSettingsSection,
 	CnSetupWizard,
@@ -289,6 +294,7 @@ export {
 	CnSubObjectsField,
 	CnSummaryAggregates,
 	CnSupportDialog,
+	CnSwitchRowsWidget,
 	CnTab,
 	CnTabbedFormDialog,
 	CnTableWidget,
@@ -309,6 +315,7 @@ export {
 	CnTimelineStages,
 	CnTimelineView,
 	CnTimelineWidget,
+	CnToggleTableWidget,
 	CnTranslatedBadge,
 	CnTreeView,
 	CnUnreadMarker,

package/src/utils/contentHeaderLink.js

@@ -0,0 +1,48 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * contentHeaderLink — the text link a widget's content asks its card header
+ * to carry: `content.headerLink`, or the shorter `viewAllRoute` (with an
+ * optional `viewAllLabel`) that an inbox-style widget uses for its "View all".
+ *
+ * @module utils/contentHeaderLink
+ */
+
+/**
+ * The header link a widget's `content` declares, in the shape
+ * CnWidgetWrapper's `headerLink` takes, or null when it declares none.
+ * The label is left as written: the wrapper translates it.
+ *
+ * `viewAllRoute` is a route name, or a location `{ name, params?, query? }`.
+ *
+ * @param {object|null|undefined} content The widget's content.
+ * @return {{label: string, route?: string, params?: object, query?: object, href?: string}|null}
+ */
+export function contentHeaderLink(content) {
+	if (!content || typeof content !== 'object') {
+		return null
+	}
+	const declared = content.headerLink
+	if (declared && typeof declared === 'object' && typeof declared.label === 'string' && declared.label !== '') {
+		return declared
+	}
+	const view = content.viewAllRoute
+	const name = typeof view === 'string' ? view : (view && typeof view === 'object' ? view.name : '')
+	if (typeof name !== 'string' || name === '') {
+		return null
+	}
+	const link = {
+		label: typeof content.viewAllLabel === 'string' && content.viewAllLabel !== '' ? content.viewAllLabel : 'View all',
+		route: name,
+	}
+	if (view && typeof view === 'object') {
+		if (view.params && typeof view.params === 'object') {
+			link.params = view.params
+		}
+		if (view.query && typeof view.query === 'object') {
+			link.query = view.query
+		}
+	}
+	return link
+}

package/src/utils/fetchFilterCounts.js

@@ -9,8 +9,9 @@
  * `status: closed`, ...). Those are answered by one `/grouped` request on that
  * field. A filter that narrows on something else (two fields, an operator, a
  * list of values) cannot be read off a grouped result, so each of those costs
- * one `/value` count. A filter that holds a LIST of values is counted through
- * the list endpoint, because the aggregation endpoints cannot express it.
+ * one `/value` count. A filter that holds a LIST of values, or tests a field
+ * for no value (`isnull`), is counted through the list endpoint, because the
+ * aggregation endpoints cannot express it.
  * Nothing is requested for an entry that did not ask.
  *
  * @module utils/fetchFilterCounts
@@ -38,6 +39,37 @@ export function hasListValue(filter) {
 	return Object.values(filter).some((value) => Array.isArray(value))
 }
 
+/**
+ * Whether a filter tests a field for "no value" (`{ assignee: null }` or
+ * `{ supersededBy: { isnull: true } }`).
+ *
+ * OpenRegister's aggregation endpoints have no null operator: `isnull` is
+ * refused there and an empty value is dropped or matches nothing, so such a
+ * filter counted 0 while the list showed rows. The list endpoint does read
+ * `field[isnull]=true`, so a filter like this is counted through it.
+ *
+ * @param {object} filter A filter map.
+ * @return {boolean} True when any value is null or carries an `isnull` operator.
+ */
+export function hasNullTest(filter) {
+	if (!filter || typeof filter !== 'object') {
+		return false
+	}
+	return Object.values(filter).some((value) => value === null
+		|| (value && typeof value === 'object' && !Array.isArray(value) && Object.keys(value).some((op) => op.toLowerCase() === 'isnull')))
+}
+
+/**
+ * Whether the aggregation endpoints cannot express a filter, so it is counted
+ * through the list endpoint: a list of values, or a test for no value.
+ *
+ * @param {object} filter A filter map.
+ * @return {boolean} True when the filter needs the list endpoint.
+ */
+export function needsListEndpoint(filter) {
+	return hasListValue(filter) || hasNullTest(filter)
+}
+
 /**
  * Count the records a filter matches by asking the LIST endpoint for one
  * record and reading its `total`. The filter is sent the way the list request
@@ -59,6 +91,9 @@ export async function fetchListTotal(register, schema, filter, ctx) {
 			for (const [op, operand] of Object.entries(value)) {
 				params[`${key}[${op}]`] = operand
 			}
+		} else if (value === null) {
+			// "No value": the list endpoint reads it as the isnull operator.
+			params[`${key}[isnull]`] = 'true'
 		} else {
 			params[key] = value
 		}
@@ -125,12 +160,12 @@ export async function fetchFilterCounts({ register, schema, entries, baseFilter,
 	// and `/value` returns exactly its number.
 	// A list of values anywhere in a request rules the aggregation endpoints
 	// out for it. A base filter with one rules them out for every entry.
-	const baseHasList = hasListValue(base)
+	const baseHasList = needsListEndpoint(base)
 	const byField = {}
 	const single = []
 	const viaList = []
 	for (const entry of entries) {
-		if (baseHasList || hasListValue(entry.filter)) {
+		if (baseHasList || needsListEndpoint(entry.filter)) {
 			viaList.push(entry)
 			continue
 		}

package/src/utils/initials.js

@@ -0,0 +1,29 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * initials: the letters an avatar shows for a free name.
+ *
+ * @module utils/initials
+ */
+
+/**
+ * The initials of a name: the first letters of its first and its last word,
+ * upper-cased ("Sanne de Vries" reads "SV", "Jan" reads "J").
+ *
+ * @param {unknown} name The name.
+ * @return {string} One or two letters, or '' when there is no name.
+ * @spec openspec/changes/screens-record-list-avatar/specs/record-list-avatar/spec.md#requirement-a-record-list-row-can-carry-an-avatar
+ */
+export function initialsOf(name) {
+	if (typeof name !== 'string') {
+		return ''
+	}
+	const words = name.trim().split(/\s+/).filter((word) => word !== '')
+	if (words.length === 0) {
+		return ''
+	}
+	const first = Array.from(words[0])[0] || ''
+	const last = words.length > 1 ? (Array.from(words[words.length - 1])[0] || '') : ''
+	return (first + last).toLocaleUpperCase()
+}

package/src/utils/libraryWidgetKeys.js

@@ -93,6 +93,8 @@ export const DASHBOARD_CATALOG_WIDGET_KEYS = Object.freeze([
 	'banner',
 	'calendar',
 	'chart',
+	'chips-field',
+	'choice-picker',
 	'container',
 	'conversation',
 	'countdown',
@@ -125,21 +127,26 @@ export const DASHBOARD_CATALOG_WIDGET_KEYS = Object.freeze([
 	'object-table',
 	'people',
 	'quicklinks',
+	'radio-cards',
 	'record-list',
 	'related',
 	'saved-view',
+	'saved-views',
 	'sections',
+	'settings-form',
 	'spend-analytics',
 	'stacked-bar',
 	'stages',
 	'stat',
 	'stats-block',
+	'switch-rows',
 	'table',
 	'tabs',
 	'tasks',
 	'text',
 	'tile',
 	'timeline',
+	'toggle-table',
 	'video',
 	'week-strip',
 	'workspace-filter',

package/src/utils/objectWrite.js

@@ -0,0 +1,55 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * objectWrite: the one-object PATCH the settings widgets share.
+ *
+ * @module utils/objectWrite
+ */
+
+import { prefixUrl } from './headers.js'
+
+/**
+ * The OpenRegister URL of one object, or '' when register, schema or id is missing.
+ *
+ * @param {string|object} register Register slug.
+ * @param {string|object} schema Schema slug.
+ * @param {string|number} id Object id.
+ * @return {string} The object URL.
+ */
+export function objectUrlOf(register, schema, id) {
+	if (typeof register !== 'string' || typeof schema !== 'string' || !register || !schema || id === undefined || id === null || id === '') {
+		return ''
+	}
+	return `/apps/openregister/api/objects/${encodeURIComponent(register)}/${encodeURIComponent(schema)}/${encodeURIComponent(String(id))}`
+}
+
+/**
+ * PATCH only the given fields of one object.
+ *
+ * @param {string} url The object URL (see objectUrlOf).
+ * @param {object} patch The fields to write.
+ * @return {Promise<object>} The object the server answered with.
+ */
+export async function patchObject(url, patch) {
+	const { default: axios } = await import('@nextcloud/axios')
+	const { data } = await axios.patch(prefixUrl(url), patch)
+	return data && typeof data === 'object' ? data : {}
+}
+
+/**
+ * The fields of `next` that differ from `base`, compared by value.
+ *
+ * @param {object} base What the server last held.
+ * @param {object} next What the form holds.
+ * @return {object} The changed fields only.
+ */
+export function changedFields(base, next) {
+	const patch = {}
+	for (const [key, value] of Object.entries(next)) {
+		if (JSON.stringify(value === undefined ? null : value) !== JSON.stringify(base[key] === undefined ? null : base[key])) {
+			patch[key] = value
+		}
+	}
+	return patch
+}

package/src/utils/widgetDispatch.js

@@ -48,7 +48,7 @@ import { canonicalWidgetType } from './widgetTypeAliases.js'
  *
  * @type {string[]}
  */
-export const CONTENT_ONLY_TYPES = Object.freeze(['object-list', 'table', 'files', 'flow-runs', 'tasks', 'facts', 'field-list', 'record-list'])
+export const CONTENT_ONLY_TYPES = Object.freeze(['object-list', 'table', 'files', 'flow-runs', 'tasks', 'facts', 'field-list', 'record-list', 'settings-form', 'switch-rows', 'radio-cards', 'chips-field', 'toggle-table', 'choice-picker'])
 
 /**
  * The stored content/config blob for a widget definition.