@conduction/nextcloud-vue 2.56.0-beta.48 → 2.56.0-beta.49

package/src/components/CnFactsWidget/CnFactsWidget.vue

@@ -18,7 +18,8 @@
 			<template v-for="block in blocks" :key="block.key">
 				<dl
 					v-if="block.kind === 'rows'"
-					class="cn-facts-widget__rows">
+					class="cn-facts-widget__rows"
+					:class="{ 'cn-facts-widget__rows--columns': twoColumns }">
 					<div
 						v-for="row in block.rows"
 						:key="row.key"
@@ -268,6 +269,7 @@ export default {
 		 * - `source` — `{ register, schema, id }` or `{ url }`; omitted = the current object. An entry with `from: "object"` reads the current object even then (a client card that also shows the ticket's channel).
 		 * - `link` — `{ label, route? | href? }` at the foot.
 		 * - `hideEmpty` — drop an entry whose value is empty (default true).
+		 * - `columns` — `2` lays the rows out in two columns with the label above the value (board DqContact); a row with `parts` joins them like a line (an address on one row).
 		 * - `emptyText` — shown when no entry has a value.
 		 *
 		 * @type {{fields?: Array<object>, source?: object, link?: object, hideEmpty?: boolean, emptyText?: string}}
@@ -310,6 +312,16 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * Whether the rows sit in two columns, label above value.
+		 *
+		 * @spec openspec/changes/facts-columns/specs/facts-widget/spec.md#requirement-facts-rows-can-sit-in-two-columns
+		 * @return {boolean}
+		 */
+		twoColumns() {
+			return Number(this.content?.columns) === 2
+		},
+
 		/**
 		 * The token context: the detail object (prop, else the injected context)
 		 * and the page workspace.
@@ -546,7 +558,7 @@ export default {
 			if (kind === 'lead') {
 				return this.partsValue(record, field.title)
 			}
-			if ((kind === 'line' || kind === 'text') && Array.isArray(field.parts)) {
+			if ((kind === 'line' || kind === 'text' || kind === 'row') && Array.isArray(field.parts)) {
 				return this.lineValue(record, field)
 			}
 			if ((kind === 'line' || kind === 'text') && !field.path && typeof field.text === 'string') {
@@ -924,6 +936,11 @@ export default {
 					if (!spec.path && typeof spec.text === 'string') {
 						return this.tr(spec.text)
 					}
+					// A group of parts with its own separator ("Parkstraat 24" inside
+					// "Parkstraat 24, 3421 AB Zuiddrecht").
+					if (!spec.path && Array.isArray(spec.parts)) {
+						return this.lineValue(record, spec)
+					}
 					const value = this.format(readPath(record, spec.path), spec, record)
 					if (value === '') {
 						return ''
@@ -1240,4 +1257,31 @@ export default {
 	color: var(--color-primary-element);
 	text-decoration: underline;
 }
+
+/* `columns: 2` (board DqContact): two columns, the label above the value, a
+   hairline under each fact; one column on a phone. */
+.cn-facts-widget__rows--columns {
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 14px 24px;
+	font-size: 15px;
+}
+
+.cn-facts-widget__rows--columns .cn-facts-widget__row {
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+	min-width: 0;
+	padding-bottom: 10px;
+	border-bottom: 1px solid var(--color-border);
+}
+
+.cn-facts-widget__rows--columns .cn-facts-widget__label.cn-facts-widget__label {
+	font-size: 13px;
+}
+
+@media (max-width: 640px) {
+	.cn-facts-widget__rows--columns {
+		grid-template-columns: minmax(0, 1fr);
+	}
+}
 </style>

package/src/components/CnHeaderSearchLabel/CnHeaderSearchLabel.vue

@@ -0,0 +1,107 @@
+<!--
+  CnHeaderSearchLabel — the app's own words on the search field in Nextcloud's
+  header (screens-board-top-bar-search). Renders nothing of its own.
+
+  Under the board look the screens give the top bar's search field a line that
+  names what the app holds ("Zoek zaken, documenten of contacten"), where
+  Nextcloud shows its global "Search apps, files, tags, messages …". Nextcloud
+  offers no way for an app to set that line, so this component replaces the
+  TEXT of the field's label and nothing else:
+    - it changes only the text of `.unified-search-input__label` (which is also
+      the search button's accessible name); it never adds, moves or removes a node;
+    - it writes the text again when Nextcloud re-renders the field, and only
+      when the text differs, so its own write never loops;
+    - on unmount it puts Nextcloud's text back;
+    - with no header or no such label it does nothing.
+
+  The search Nextcloud opens is unchanged: this is the resting field's line.
+-->
+<script>
+const LABEL_SELECTOR = '.unified-search-input__label'
+
+/**
+ * Put the app's own line on the search field in Nextcloud's header.
+ *
+ * @spec openspec/changes/screens-board-top-bar-search/specs/layout-components/spec.md#requirement-the-board-look-names-what-the-header-search-finds
+ */
+export default {
+	name: 'CnHeaderSearchLabel',
+
+	props: {
+		/**
+		 * The line to show, already translated.
+		 *
+		 * @type {string}
+		 */
+		label: {
+			type: String,
+			required: true,
+		},
+	},
+
+	data() {
+		return { observer: null, original: null, labelNode: null }
+	},
+
+	watch: {
+		label() {
+			this.apply()
+		},
+	},
+
+	mounted() {
+		const header = document.getElementById('header')
+		if (!header) {
+			return
+		}
+		this.apply()
+		if (typeof MutationObserver === 'function') {
+			this.observer = new MutationObserver(() => this.apply())
+			this.observer.observe(header, { childList: true, subtree: true, characterData: true })
+		}
+	},
+
+	beforeUnmount() {
+		this.observer?.disconnect()
+		this.observer = null
+		if (this.labelNode && this.original !== null && this.labelNode.isConnected) {
+			this.labelNode.textContent = this.original
+		}
+		this.labelNode = null
+		this.original = null
+	},
+
+	methods: {
+		/**
+		 * Write the line into the label when it shows something else.
+		 * Remembers the first text Nextcloud drew in each label node, to put back.
+		 *
+		 * @return {void}
+		 */
+		apply() {
+			const node = document.querySelector('#header ' + LABEL_SELECTOR)
+			if (!node || !this.label) {
+				return
+			}
+			if (node !== this.labelNode) {
+				this.labelNode = node
+				this.original = node.textContent
+			}
+			if (node.textContent.trim() === this.label) {
+				return
+			}
+			// Keep Nextcloud's own text node where there is one, so its renderer still holds the live node.
+			const text = node.childNodes.length === 1 && node.firstChild.nodeType === 3 ? node.firstChild : null
+			if (text) {
+				text.data = this.label
+			} else {
+				node.textContent = this.label
+			}
+		},
+	},
+
+	render() {
+		return null
+	},
+}
+</script>

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -169,6 +169,20 @@
 						{{ item.title }}
 					</component>
 				</div>
+				<!-- `bar`: a thin track under the row, filled to the row's value
+				     against its own maximum or against the largest row. -->
+				<span
+					v-if="presentation === 'rows' && item.bar"
+					class="cn-record-list__bar"
+					:class="{ 'cn-record-list__bar--over': item.bar.over }"
+					role="meter"
+					:aria-label="item.title || null"
+					:aria-valuenow="item.bar.value"
+					aria-valuemin="0"
+					:aria-valuemax="item.bar.max"
+					data-testid="cn-record-list-bar">
+					<span class="cn-record-list__bar-fill" :style="{ width: `${item.bar.share}%` }" />
+				</span>
 			</li>
 		</ul>
 	</div>
@@ -254,7 +268,11 @@ 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?, endpointSource? }`. `endpointSource` (`{ url, method?,
+		 * valueLabels?, endpointSource?, bar? }`. `bar` (`{ valueField, maxField?,
+		 * overVariant? }`) draws a thin track under each row: filled to
+		 * `valueField` against `maxField` (drawn in the error colour past it
+		 * with `overVariant: "error"`), or without `maxField` against the
+		 * largest row. `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.
@@ -402,6 +420,7 @@ export default {
 		/** @return {Array<object>} The rows ready to draw. */
 		items() {
 			const c = this.content || {}
+			const barScale = this.barScale
 			return this.rows.slice(0, this.limit).map((row, index) => {
 				const link = this.rowLink(row)
 				return {
@@ -420,10 +439,26 @@ export default {
 					badges: this.badgesOf(row),
 					due: this.dueOf(row),
 					icon: this.iconOf(row),
+					bar: this.barOf(row, barScale),
 				}
 			})
 		},
 
+		/**
+		 * The largest `bar.valueField` over the rows shown, the scale of a
+		 * `bar` without `maxField`. 0 without a `bar`.
+		 *
+		 * @return {number} The largest value.
+		 * @spec openspec/changes/record-list-row-bar/specs/record-list-row-bar/spec.md#requirement-a-record-list-row-can-carry-a-bar
+		 */
+		barScale() {
+			const field = this.content?.bar?.valueField
+			if (!field) {
+				return 0
+			}
+			return Math.max(0, ...this.rows.slice(0, this.limit).map((row) => Number(readPath(row, field)) || 0))
+		},
+
 		/** @return {object|null} The header link with `{total}` filled and tokens resolved. */
 		headerLink() {
 			const link = this.content?.headerLink
@@ -518,6 +553,32 @@ export default {
 			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
 		},
 
+		/**
+		 * A row's `bar`: its value, the maximum it is measured against (the
+		 * row's `maxField`, else the largest row), the filled share and
+		 * whether it is over that maximum. Null without `bar` or a value.
+		 *
+		 * @param {object} row The row.
+		 * @param {number} scale The largest value over the rows shown.
+		 * @return {{value: number, max: number, share: number, over: boolean}|null} The bar.
+		 * @spec openspec/changes/record-list-row-bar/specs/record-list-row-bar/spec.md#requirement-a-record-list-row-can-carry-a-bar
+		 */
+		barOf(row, scale) {
+			const bar = this.content?.bar
+			if (!bar || typeof bar !== 'object' || !bar.valueField) {
+				return null
+			}
+			const value = Number(readPath(row, bar.valueField))
+			if (!Number.isFinite(value)) {
+				return null
+			}
+			const ownMax = bar.maxField ? Number(readPath(row, bar.maxField)) : NaN
+			const max = bar.maxField ? (Number.isFinite(ownMax) && ownMax > 0 ? ownMax : 0) : scale
+			const share = max > 0 ? Math.min(100, Math.max(0, (value / max) * 100)) : 0
+			const over = Boolean(bar.maxField) && bar.overVariant === 'error' && max > 0 && value > max
+			return { value, max, share, over }
+		},
+
 		/**
 		 * The initials of the row's avatar (`avatar`: a name template such as
 		 * `"{client.name}"`, or `{ text }`), or '' without one.
@@ -1075,6 +1136,25 @@ export default {
 	border-top: 1px solid var(--color-border);
 }
 
+.cn-record-list__bar {
+	background: var(--color-border);
+	border-radius: 3px;
+	display: block;
+	height: 6px;
+	margin: -6px 0 12px;
+	overflow: hidden;
+}
+
+.cn-record-list__bar-fill {
+	background: var(--color-primary-element);
+	display: block;
+	height: 100%;
+}
+
+.cn-record-list__bar--over .cn-record-list__bar-fill {
+	background: var(--color-error);
+}
+
 .cn-record-list__row {
 	align-items: center;
 	color: var(--color-main-text);

package/src/components/CnRegisterMapping/CnRegisterMapping.md

@@ -115,6 +115,14 @@ export default {
 
 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.
 
+## Board look
+
+In the board look (`look="board"`, or the `cnLook` that `CnAppRoot` or `CnAdminSettingsShell` provides) one group is open: its name, a status chip, the register select and a type/schema table with a check icon on each configured type. It lists `boardRowLimit` types and counts the rest in a line with a button that lists them all. The other groups are rows with their type count and a status chip; activating a row opens that group. The save button closes the section instead of sitting in its header.
+
+## Loading
+
+The register select lists every register without its schemas. Only the registers the configuration maps have their schemas fetched (`registers/{id}/schemas`), and a register chosen in the select is fetched when chosen.
+
 ## Additional props
 
 | Prop | Type | Default | Description |
@@ -127,5 +135,7 @@ With more than one group each group starts closed: its heading is a button that
 | `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 |
+| `look` | String | `''` | `board` or `nextcloud`; empty follows the provided `cnLook` |
+| `boardRowLimit` | Number | `4` | Board look: how many types the open group lists before the "show all" line; `0` lists every type |
 | `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) |