@conduction/nextcloud-vue 2.101.0 → 2.102.0

package/src/components/CnQuickFilterBar/CnQuickFilterBar.vue

@@ -24,8 +24,28 @@
 	</div>
 	<!-- Chips mode (default): the clickable tab strip. -->
 	<div v-else
+		ref="chipsRoot"
 		class="cn-quick-filter-bar"
-		:class="{ 'cn-quick-filter-bar--inline': inline }">
+		:class="{ 'cn-quick-filter-bar--inline': inline, 'cn-quick-filter-bar--fit': fit }">
+		<!-- With `fit`: an invisible copy of every chip and the overflow chip,
+		     measured to work out how many chips the bar's width holds. -->
+		<div v-if="fit"
+			ref="measure"
+			class="cn-quick-filter-bar__measure"
+			aria-hidden="true">
+			<span v-for="entry in entries"
+				:key="'m:' + entry.tab.label + ':' + entry.index"
+				class="cn-quick-filter-bar__tab"
+				:class="{ 'cn-quick-filter-bar__tab--active': isChipActive(entry.index) }"
+				data-measure="chip">
+				<span class="cn-quick-filter-bar__label">{{ tl(entry.tab.label) }}</span>
+				<span v-if="countOf(entry) !== null" class="cn-quick-filter-bar__count">{{ ' ' + countOf(entry) }}</span>
+			</span>
+			<span class="cn-quick-filter-bar__tab cn-quick-filter-bar__more" data-measure="more">
+				<span v-if="overflowLabel" class="cn-quick-filter-bar__label">{{ overflowLabel }}</span>
+				<DotsHorizontal :size="16" class="cn-quick-filter-bar__icon" />
+			</span>
+		</div>
 		<!-- The tablist holds ONLY tabs: the overflow chip is a sibling, not a
 		     child, because a role="tablist" may not contain a menu button. -->
 		<!-- Board look: the tabs are chips, pressed buttons in a group, not a
@@ -266,6 +286,19 @@ export default {
 			type: [Object, Array],
 			default: null,
 		},
+
+		/**
+		 * Chips mode only: show as many chips as the bar's own width holds and
+		 * move the rest into the overflow chip, measured again whenever the
+		 * width, the tabs or the counts change. The bar takes the room it is
+		 * given (CnIndexPage's `quickFilterPlacement: "toolbar"` gives it what
+		 * the Filter button and the view switch leave on their row). With
+		 * `maxVisible` too, the smaller of the two wins.
+		 */
+		fit: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	emits: ['update:active-index', 'update:selected-indices'],
@@ -274,6 +307,8 @@ export default {
 		return {
 			/** Whether the overflow chip's panel is open. */
 			moreOpen: false,
+			/** With `fit`: how many chips the width holds; null before the first measure. */
+			fitCount: null,
 		}
 	},
 
@@ -303,10 +338,24 @@ export default {
 		 * @return {Array<{tab: object, index: number}>}
 		 */
 		visibleEntries() {
-			if (!this.maxVisible || this.tabs.length <= this.maxVisible) {
+			const limit = this.effectiveMax
+			if (!limit || this.tabs.length <= limit) {
 				return this.entries
 			}
-			return this.entries.slice(0, this.maxVisible)
+			return this.entries.slice(0, limit)
+		},
+
+		/**
+		 * How many chips render: `maxVisible`, and with `fit` no more than the
+		 * width holds; 0 for no limit.
+		 *
+		 * @return {number}
+		 */
+		effectiveMax() {
+			if (!this.fit || this.fitCount === null) {
+				return this.maxVisible
+			}
+			return this.maxVisible ? Math.min(this.maxVisible, this.fitCount) : this.fitCount
 		},
 
 		/**
@@ -316,10 +365,11 @@ export default {
 		 * @return {Array<{tab: object, index: number}>}
 		 */
 		overflowEntries() {
-			if (!this.maxVisible || this.tabs.length <= this.maxVisible) {
+			const limit = this.effectiveMax
+			if (!limit || this.tabs.length <= limit) {
 				return []
 			}
-			return this.entries.slice(this.maxVisible)
+			return this.entries.slice(limit)
 		},
 
 		/**
@@ -399,7 +449,79 @@ export default {
 		},
 	},
 
+	watch: {
+		tabs() {
+			this.scheduleFit()
+		},
+
+		counts: {
+			deep: true,
+			handler() {
+				this.scheduleFit()
+			},
+		},
+	},
+
+	mounted() {
+		if (this.fit && typeof ResizeObserver === 'function' && this.$refs.chipsRoot) {
+			this.fitObserver = new ResizeObserver(() => this.measureFit())
+			this.fitObserver.observe(this.$refs.chipsRoot)
+		}
+		this.scheduleFit()
+	},
+
+	beforeUnmount() {
+		if (this.fitObserver) {
+			this.fitObserver.disconnect()
+			this.fitObserver = null
+		}
+	},
+
 	methods: {
+		/** Measure the fit after the next render. */
+		scheduleFit() {
+			if (this.fit) {
+				this.$nextTick(() => this.measureFit())
+			}
+		},
+
+		/**
+		 * Work out how many chips the bar's width holds, from the invisible
+		 * copy: every chip that fits, and when not all do, room left for the
+		 * overflow chip. At least one chip always shows.
+		 */
+		measureFit() {
+			const box = this.$refs.measure
+			const root = this.$refs.chipsRoot
+			if (!this.fit || !box || !root) {
+				return
+			}
+			const available = root.clientWidth
+			const chips = [...box.querySelectorAll('[data-measure="chip"]')].map((el) => el.offsetWidth)
+			const more = box.querySelector('[data-measure="more"]')
+			const moreWidth = more ? more.offsetWidth : 0
+			const gap = parseFloat(getComputedStyle(box).columnGap) || 8
+			if (available <= 0 || chips.length === 0) {
+				this.fitCount = null
+				return
+			}
+			const total = chips.reduce((sum, width) => sum + width, 0) + gap * (chips.length - 1)
+			if (total <= available) {
+				this.fitCount = null
+				return
+			}
+			let used = moreWidth
+			let count = 0
+			for (const width of chips) {
+				if (used + gap + width > available) {
+					break
+				}
+				used += gap + width
+				count++
+			}
+			this.fitCount = Math.max(1, count)
+		},
+
 		/**
 		 * A manifest string through the host's label lookup (`cnTranslate`), so a key
 		 * such as "Mine" reads in the user's language.
@@ -531,6 +653,38 @@ export default {
 /* Inline variant — bare strip for embedding inside another bar (e.g. the
    CnActionsBar #filters slot), so it reads as a control beside the view toggle
    rather than a separate bordered row. */
+/* With `fit`: one line, as wide as it is given; the chips it cannot hold
+   are in the overflow chip. The measuring copy takes no room and is never
+   seen or read. */
+.cn-quick-filter-bar--fit {
+	position: relative;
+	flex-wrap: nowrap;
+	min-width: 0;
+}
+
+.cn-quick-filter-bar--fit .cn-quick-filter-bar__tabs {
+	flex-wrap: nowrap;
+	min-width: 0;
+}
+
+.cn-quick-filter-bar__measure {
+	position: absolute;
+	inset-block-start: 0;
+	inset-inline-start: 0;
+	display: flex;
+	gap: 8px;
+	width: 0;
+	height: 0;
+	overflow: hidden;
+	visibility: hidden;
+	pointer-events: none;
+	white-space: nowrap;
+}
+
+.cn-quick-filter-bar__measure > * {
+	flex: none;
+}
+
 .cn-quick-filter-bar--inline {
 	padding: 0;
 	border-bottom: none;

package/src/components/CnWidgetObjectTable/CnWidgetObjectTable.vue

@@ -88,8 +88,8 @@ import { dispatchAction, resolveObjectOpType } from '../../utils/actionsDispatch
 import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js'
 import { pageFilter, pageSort } from '../../utils/pageControls.js'
 import { dropOptionalUnresolved, hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
+import { compileRowClass } from '../../utils/rowClassRules.js'
 import { fieldsFromSchema } from '../../utils/schema.js'
-import { compareVisibleWhen, readVisibleWhenPath } from '../../utils/visibleWhen.js'
 import { CnIcon } from '../CnIcon/index.js'
 import { CnRowActions } from '../CnRowActions/index.js'
 import { CnWidgetWrapper } from '../CnWidgetWrapper/index.js'
@@ -762,28 +762,7 @@ export default {
 		 * @return {?(row: object) => string} The row-class function, or null.
 		 */
 		compiledRowClass() {
-			const rc = this.rowClass
-			if (typeof rc === 'function') {
-				return rc
-			}
-			if (!Array.isArray(rc) || rc.length === 0) {
-				return null
-			}
-			const rules = rc
-			return (row) => {
-				const classes = []
-				for (const rule of rules) {
-					if (!rule || !rule.class) {
-						continue
-					}
-					const when = rule.when || {}
-					const actual = readVisibleWhenPath(row, when.field)
-					if (compareVisibleWhen(actual, when.op || 'eq', when.value)) {
-						classes.push(rule.class)
-					}
-				}
-				return classes.join(' ')
-			}
+			return compileRowClass(this.rowClass)
 		},
 
 		/**

package/src/composables/indexSources.js

@@ -530,6 +530,15 @@ function tasksSource() {
 		 */
 		loading: () => !!store.loading,
 
+		// The inbox pages: the page sends `limit` and `offset` and draws the
+		// pager from the datastore total.
+		pages: true,
+
+		/**
+		 * @return {number} The datastore total, independent of the page size.
+		 */
+		total: () => Number(store.total) || 0,
+
 		/**
 		 * Count the inbox for a config without touching the rows on screen,
 		 * for a quick-filter tab with `showCount`.

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

@@ -128,6 +128,16 @@
 	gap: 8px;
 }
 
+/* `quickFilterPlacement: "toolbar"` (DqTeamwachtrij): the chips take the room
+   the Filter button and the view switch leave on row 1, so the three stay on
+   one row in the column beside a side panel; the chips that do not fit move
+   into the overflow chip (CnQuickFilterBar `fit`) instead of pushing the
+   buttons onto a row of their own. */
+.cn-look-board.cn-index-page--quick-filters-toolbar .cn-actions-bar--board > .cn-actions-bar__row--views > .cn-quick-filter-bar {
+	flex: 1 1 0;
+	min-width: 0;
+}
+
 /* Row 2: the search field and the active filters on a line of their own. */
 .cn-look-board .cn-actions-bar--board > .cn-actions-bar__row--search {
 	display: flex;

package/src/schemas/app-manifest-v2.schema.json

@@ -3,7 +3,7 @@
 	"$id": "https://raw.githubusercontent.com/ConductionNL/nextcloud-vue/main/src/schemas/app-manifest-v2.schema.json",
 	"title": "Conduction App Manifest v2",
 	"description": "v2 schema for the JSON-driven page and navigation manifest consumed by @conduction/nextcloud-vue. Introduces a uniform widgets[] array on every page type with a per-slot grid coordinate system, a typed actions[] discriminator, and the required $schema field for version detection. v1 manifests continue to validate against app-manifest.schema.json (unchanged).",
-	"version": "2.124.0",
+	"version": "2.125.0",
 	"type": "object",
 	"required": ["$schema", "version"],
 	"allOf": [
@@ -2221,7 +2221,8 @@
 									},
 									"emptyLabel": { "type": "string", "description": "Empty-state message rendered instead of the chart when the resolved series contain no data points." },
 									"barMax": { "type": "number", "exclusiveMinimum": 0, "description": "chartKind 'bar-list': the value a full track stands for (100 for percentages). Omitted = the largest value." },
-									"footnote": { "type": "string", "description": "chartKind 'bar-list' or 'matrix': a line under the rows, through the host's translate." },
+									"footnote": { "type": "string", "description": "A line under the chart, through the host's translate: under the rows of a bar-list or matrix, and under the plot of a line, area or bar chart." },
+									"emptyCellLabel": { "type": "string", "description": "chartKind 'matrix': the text of a cell without a value (\"geen\"), through the host's translate. Empty leaves the cell blank. Passed through to CnChartWidget." },
 									"highlight": {
 										"type": "object",
 										"additionalProperties": false,
@@ -3738,7 +3739,58 @@
 							"enum": ["flows", "flowRuns", "tasks", "endpoint", "search", "users", "organisations"],
 							"description": "Name a registered NON-OBJECT entity collection for a type='index' page, instead of register+schema. Deliberately NOT called `source`: that key is already taken on page config and is polymorphic (a URL string in some manifests, an object with `params` in others), so reusing it would give one key two meanings and break six deployed shillinq pages. A flow definition is deliberately not an OpenRegister object, so an index had nothing to bind to and such lists became bespoke type='custom' pages. With a source the index loads the list itself. Takes precedence over register/schema; non-empty `objects` still wins over both. Registered sources live in src/composables/indexSources.js. `tasks` lists the viewer's task inbox from OpenRegister's flow-tasks read (cn-tasks-entity-source). `organisations` lists the OpenRegister organisations the viewer belongs to. On a type='detail' page a source that reads one record (today `organisations`) loads the record whose id is the route's objectId, instead of register+schema, and feeds the header, pills, widgets and @objectId / @object.* tokens like a fetched object (organisations-entity-source)."
 						},
-						"sourceConfig": { "type": "object", "additionalProperties": true, "description": "type='index' with `entitySource`: what the named source loads with. `endpoint`: `url` (an app path, required) and `rowsPath` (default `results`); its other keys go along as query parameters. `search`: `kinds` (`{ id, label, register, schema, titleField?, subtitleField?, statusField?, href?, limit? }` or `{ id, label, files: true }`), `term` and `termQuery` (default `q`). `users`: `defaultGroup`, `functionField`, `rolesField`. `flows` / `tasks`: `app`, `scope`. Maps to CnIndexPage `sourceConfig`.", "properties": { "url": { "type": "string", "minLength": 1 }, "rowsPath": { "type": "string", "minLength": 1 }, "kinds": { "type": "array", "items": { "type": "object", "required": ["id"], "additionalProperties": true, "properties": { "id": { "type": "string", "minLength": 1 }, "label": { "type": "string" }, "register": { "type": "string" }, "schema": { "type": "string" }, "files": { "type": "boolean" } } } }, "term": { "type": "string" }, "termQuery": { "type": "string", "minLength": 1 }, "defaultGroup": { "type": "string", "minLength": 1 } } },
+						"bulkBandAlways": { "type": "boolean", "default": false, "description": "type='index', board look: draw the bulk band (its actions and hint) before a selection too, its buttons disabled until rows are selected (DqZaken, DqWerkbord). Maps to CnIndexPage `bulkBandAlways`." },
+						"quickFilterPlacement": { "type": "string", "enum": ["", "toolbar"], "default": "", "description": "type='index': where the quick-filter chips sit. `toolbar` keeps them on one row with the Filter button and the view switch beside a side panel, the chips that do not fit behind the overflow chip (DqTeamwachtrij). Maps to CnIndexPage `quickFilterPlacement`." },
+						"rowClass": {
+							"type": "array",
+							"description": "type='index': per-row CSS class rules, compiled into the table's rowClass function as on the object-table widget. Each rule { when: { field, op?, value }, class } adds `class` to a row whose `field` (a dot-path) compares to `value` with `op` (default eq; the visibleWhen operators and tokens such as `@today`, with two dates compared as moments), e.g. an overdue task `{ when: { field: \"dueAt\", op: \"lt\", value: \"@today\" }, class: \"cn-row--overdue\" }`. Maps to CnIndexPage `rowClass`.",
+							"items": {
+								"type": "object",
+								"additionalProperties": false,
+								"required": [
+									"when",
+									"class"
+								],
+								"properties": {
+									"when": {
+										"type": "object",
+										"additionalProperties": false,
+										"required": [
+											"field",
+											"value"
+										],
+										"description": "The predicate evaluated against the row (shared visibleWhen grammar, LOCAL form).",
+										"properties": {
+											"field": {
+												"type": "string",
+												"description": "Dot-path into the row."
+											},
+											"op": {
+												"type": "string",
+												"enum": [
+													"eq",
+													"neq",
+													"gt",
+													"gte",
+													"lt",
+													"lte"
+												],
+												"default": "eq",
+												"description": "Comparison operator (default eq)."
+											},
+											"value": {
+												"description": "Literal right-hand side of the comparison."
+											}
+										}
+									},
+									"class": {
+										"type": "string",
+										"description": "CSS class added to the row when `when` holds."
+									}
+								}
+							}
+						},
+						"sourceConfig": { "type": "object", "additionalProperties": true, "description": "type='index' with `entitySource`: what the named source loads with. `endpoint`: `url` (an app path, required) and `rowsPath` (default `results`); its other keys go along as query parameters. `search`: `kinds` (`{ id, label, register, schema, titleField?, subtitleField?, statusField?, href?, limit? }` or `{ id, label, files: true }`), `term` and `termQuery` (default `q`). `users`: `defaultGroup`, `functionField`, `rolesField`. `flows` / `tasks`: `app`, `scope`. Maps to CnIndexPage `sourceConfig`.", "properties": { "url": { "type": "string", "minLength": 1 }, "rowsPath": { "type": "string", "minLength": 1 }, "kinds": { "type": "array", "items": { "type": "object", "required": ["id"], "additionalProperties": true, "properties": { "id": { "type": "string", "minLength": 1 }, "label": { "type": "string" }, "register": { "type": "string" }, "schema": { "type": "string" }, "files": { "type": "boolean" } } } }, "term": { "type": "string" }, "termQuery": { "type": "string", "minLength": 1 }, "defaultGroup": { "type": "string", "minLength": 1 }, "limit": { "type": "integer", "minimum": 1, "description": "A paging source: rows per page (20 by default); the pager moves through the pages." } } },
 						"app": {
 							"type": "string",
 							"description": "Scopes a named `entitySource` to one app (e.g. entitySource='flows' with app='dossiq' lists that app's flows)."

package/src/utils/builtInFormatters.js

@@ -379,25 +379,45 @@ const CONNECTION_STATUS_LABELS = {
 	error: 'Error',
 }
 
+/**
+ * The short labels `formatterOptions.short` draws (board DqInstellingen
+ * "Aan / Uit / Fout"): a connection that works in some form is on, one that
+ * does not run is off, and a failing one is an error.
+ */
+const CONNECTION_STATUS_SHORT_LABELS = {
+	configured: 'On',
+	limited: 'On',
+	simulated: 'On',
+	unconfigured: 'Off',
+	disabled: 'Off',
+	unavailable: 'Off',
+	error: 'Error',
+}
+
 /**
  * Connection status formatter (`connectionStatus` registry key) for the
  * fleet connection registry. Renders one of the seven stored status values
  * as its translated label through the library's own slug (`nextcloud-vue`).
+ * With `formatterOptions.short` it renders the board's three short labels
+ * instead: On (configured, limited, simulated), Off (not configured,
+ * switched off, not available) and Error.
  *
  * An unknown value passes through unchanged, so a status added later still
  * shows as its raw value instead of an empty cell. Null and undefined render
  * as `''`. Never throws.
  *
  * @param {unknown} value The stored status value.
+ * @param {object} [row] The row (unused).
+ * @param {object} [property] The column's property (unused).
+ * @param {{short?: boolean}} [options] The column's `formatterOptions`.
  * @return {string} The translated label, or the value itself when it is not one of the seven.
  */
-export function formatConnectionStatus(value) {
+export function formatConnectionStatus(value, row, property, options) {
 	if (value === null || value === undefined) {
 		return ''
 	}
-	const label = Object.hasOwn(CONNECTION_STATUS_LABELS, value)
-		? CONNECTION_STATUS_LABELS[value]
-		: null
+	const labels = options && options.short === true ? CONNECTION_STATUS_SHORT_LABELS : CONNECTION_STATUS_LABELS
+	const label = Object.hasOwn(labels, value) ? labels[value] : null
 	return label ? t('nextcloud-vue', label) : String(value)
 }
 

package/src/utils/rowClassRules.js

@@ -0,0 +1,39 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+import { compareVisibleWhen, readVisibleWhenPath } from './visibleWhen.js'
+
+/**
+ * Compile a row-class declaration into the `(row) => string` CnDataTable
+ * takes. A function passes straight through. An array of rules
+ * `[{ when: { field, op?, value }, class }]` adds each rule's `class` to a row
+ * whose `field` (a dot-path) compares to `value` with `op` (`eq` by default;
+ * the shared `visibleWhen` operators, `@today` and the other tokens included),
+ * every matching class space-joined: an overdue row can be marked from the
+ * manifest (`{ when: { field: "dueAt", op: "lt", value: "@today" }, class:
+ * "cn-row--overdue" }`). Anything else, or an empty list, is null.
+ *
+ * @param {Function|Array<{when: {field: string, op?: string, value: unknown}, class: string}>|null} rowClass The declaration.
+ * @return {?(row: object) => string} The row-class function, or null.
+ */
+export function compileRowClass(rowClass) {
+	if (typeof rowClass === 'function') {
+		return rowClass
+	}
+	if (!Array.isArray(rowClass) || rowClass.length === 0) {
+		return null
+	}
+	const rules = rowClass.filter((rule) => rule && typeof rule.class === 'string' && rule.class !== '')
+	return (row) => {
+		const classes = []
+		for (const rule of rules) {
+			const when = rule.when || {}
+			const actual = readVisibleWhenPath(row, when.field)
+			if (compareVisibleWhen(actual, when.op || 'eq', when.value)) {
+				classes.push(rule.class)
+			}
+		}
+		return classes.join(' ')
+	}
+}