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

package/src/components/CnDeviceFramesWidget/CnDeviceFramesWidget.vue

@@ -0,0 +1,360 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V.
+  - SPDX-License-Identifier: EUPL-1.2
+-->
+
+<template>
+	<div class="cn-device-frames-widget" data-testid="cn-device-frames-widget">
+		<section
+			v-for="frame in frames"
+			:key="frame.key"
+			class="cn-device-frames-widget__frame"
+			:style="frameStyle"
+			:aria-labelledby="headingId(frame.key)"
+			:data-testid="`cn-device-frame-${frame.key}`">
+			<header class="cn-device-frames-widget__head">
+				<span
+					v-if="frame.status"
+					class="cn-device-frames-widget__status"
+					:class="`cn-device-frames-widget__status--${frame.status.tone}`"
+					data-testid="cn-device-frame-status">
+					<component :is="frame.status.icon" :size="16" aria-hidden="true" />
+					{{ frame.status.text }}
+				</span>
+				<h3 :id="headingId(frame.key)" class="cn-device-frames-widget__title">
+					{{ frame.title }}
+				</h3>
+			</header>
+			<div class="cn-device-frames-widget__body">
+				<CnSectionsWidget
+					:content="{ sections: frame.sections, cards: false, hideEmpty: true }"
+					:availableWidgets="availableWidgets"
+					:objectId="objectId"
+					:objectData="objectData"
+					:objectType="objectType"
+					:schemaObject="schemaObject"
+					:register="register"
+					:schema="schema"
+					:store="store"
+					:surface="surface"
+					:integrationContext="integrationContext"
+					:cnRegistry="cnRegistry" />
+			</div>
+		</section>
+	</div>
+</template>
+
+<script>
+import { markRaw } from 'vue'
+import CloudCheckOutline from 'vue-material-design-icons/CloudCheckOutline.vue'
+import CloudOffOutline from 'vue-material-design-icons/CloudOffOutline.vue'
+import InformationOutline from 'vue-material-design-icons/InformationOutline.vue'
+import CnSectionsWidget from '../CnSectionsWidget/CnSectionsWidget.vue'
+
+/** Counter for unique heading ids across instances. */
+let instanceCounter = 0
+
+/**
+ * CnDeviceFramesWidget - the `device-frames` widget: several small pages side
+ * by side, each in a phone frame with its own header (board DqInspectie,
+ * "Inspectie in het veld": the day offline, a checklist question with a
+ * photo, and the sync queue).
+ *
+ * Each frame stacks widgets of the surface, as the `sections` widget does,
+ * under a header with the frame's title and an optional status line. The
+ * status can follow the connection ("Offline · synced at 07:42" while the
+ * device is offline). The frames wrap onto the next row when the page is
+ * narrower, and a frame takes the full width on a phone.
+ *
+ * ```json
+ * {
+ *   "type": "device-frames",
+ *   "content": {
+ *     "width": 350,
+ *     "status": { "followConnection": true, "offlineText": "Offline · synced at 07:42", "onlineText": "Online" },
+ *     "frames": [
+ *       { "key": "today", "title": "Today", "widgetIds": ["today-runs", "offline-note"] },
+ *       { "key": "question", "title": "Kerkplein 7", "widgetIds": ["checklist-run"] },
+ *       { "key": "sync", "title": "Synchronise", "widgetIds": ["sync-queue"] }
+ *     ]
+ *   }
+ * }
+ * ```
+ *
+ * @spec openspec/changes/device-frames-widget/specs/device-frames-widget/spec.md#requirement-a-page-can-show-several-small-pages-as-phone-frames
+ */
+export default {
+	name: 'CnDeviceFramesWidget',
+
+	components: { CnSectionsWidget },
+
+	inject: {
+		cnTranslate: { default: () => (key) => key },
+	},
+
+	props: {
+		/**
+		 * The widget configuration.
+		 *
+		 * - `frames` — `[{ key?, title, widgetIds? | sections?, status? }]`, in order. `widgetIds` names
+		 *   widgets of the surface, stacked; `sections` takes the `sections` widget's entries instead.
+		 * - `status` — the status line of every frame (a frame's own `status` wins): `{ text?, tone?,
+		 *   followConnection?, onlineText?, offlineText? }`. With `followConnection` the line reads
+		 *   `offlineText` while the device is offline and `onlineText` otherwise. `tone` is `warning`
+		 *   (default while offline), `success` or `info`.
+		 * - `width` — the frame width in pixels (default 350).
+		 *
+		 * @type {{frames?: Array<object>, status?: object, width?: number}}
+		 */
+		content: {
+			type: Object,
+			default: () => ({}),
+		},
+
+		/** Sibling widget definitions on the surface, for `widgetIds`. */
+		availableWidgets: {
+			type: Array,
+			default: () => [],
+		},
+
+		/** The bound record's id, forwarded to the children. */
+		objectId: {
+			type: [String, Number],
+			default: '',
+		},
+
+		/** The loaded record, forwarded to the children. */
+		objectData: {
+			type: Object,
+			default: null,
+		},
+
+		/** The resolved object-type slug. */
+		objectType: {
+			type: String,
+			default: '',
+		},
+
+		/** The resolved JSON Schema object. */
+		schemaObject: {
+			type: Object,
+			default: null,
+		},
+
+		/** OpenRegister register slug of the surface. */
+		register: {
+			type: [String, Object],
+			default: '',
+		},
+
+		/** OpenRegister schema slug of the surface. */
+		schema: {
+			type: [String, Object],
+			default: '',
+		},
+
+		/** The effective object store. */
+		store: {
+			type: Object,
+			default: null,
+		},
+
+		/** Rendering surface forwarded to the children. */
+		surface: {
+			type: String,
+			default: 'app-dashboard',
+		},
+
+		/** Object context forwarded to integration children. */
+		integrationContext: {
+			type: Object,
+			default: null,
+		},
+
+		/** The consumer's component registry, for custom child widget types. */
+		cnRegistry: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+
+	data() {
+		instanceCounter += 1
+		return {
+			uid: instanceCounter,
+			online: typeof navigator === 'undefined' || navigator.onLine !== false,
+		}
+	},
+
+	computed: {
+		/** @return {object} The frame width. */
+		frameStyle() {
+			const width = Number(this.content?.width)
+			return { '--cn-device-frame-width': `${Number.isFinite(width) && width >= 240 ? width : 350}px` }
+		},
+
+		/**
+		 * The frames to draw: a key, a translated title, the sections and the
+		 * status line.
+		 *
+		 * @return {Array<{key: string, title: string, sections: Array<object>, status: object|null}>}
+		 */
+		frames() {
+			const list = Array.isArray(this.content?.frames) ? this.content.frames : []
+			return list
+				.filter((frame) => frame && typeof frame === 'object')
+				.map((frame, index) => {
+					const sections = Array.isArray(frame.sections)
+						? frame.sections
+						: (Array.isArray(frame.widgetIds) ? frame.widgetIds : []).filter((id) => typeof id === 'string' && id !== '').map((widgetId) => ({ widgetId }))
+					return {
+						key: String(frame.key || `frame-${index}`).replace(/[^\w-]/g, '-'),
+						title: this.tr(frame.title || ''),
+						sections,
+						status: this.statusOf(frame.status || this.content?.status || null),
+					}
+				})
+		},
+	},
+
+	mounted() {
+		if (typeof window !== 'undefined') {
+			window.addEventListener('online', this.onConnection)
+			window.addEventListener('offline', this.onConnection)
+		}
+	},
+
+	beforeUnmount() {
+		if (typeof window !== 'undefined') {
+			window.removeEventListener('online', this.onConnection)
+			window.removeEventListener('offline', this.onConnection)
+		}
+	},
+
+	methods: {
+		/**
+		 * Translate through the app's translate.
+		 *
+		 * @param {string} key The source string.
+		 * @return {string}
+		 */
+		tr(key) {
+			return key && typeof this.cnTranslate === 'function' ? this.cnTranslate(key) : (key || '')
+		},
+
+		/**
+		 * The status line of a frame, or null.
+		 *
+		 * @param {object|null} status The configured status.
+		 * @return {{text: string, tone: string, icon: object}|null}
+		 */
+		statusOf(status) {
+			if (!status || typeof status !== 'object') {
+				return null
+			}
+			let text = status.text
+			let tone = status.tone
+			if (status.followConnection === true) {
+				text = this.online ? status.onlineText : status.offlineText
+				tone = tone || (this.online ? 'success' : 'warning')
+			}
+			if (typeof text !== 'string' || text === '') {
+				return null
+			}
+			const known = ['warning', 'success', 'info'].includes(tone) ? tone : 'info'
+			const icon = known === 'warning' ? CloudOffOutline : (known === 'success' ? CloudCheckOutline : InformationOutline)
+			return { text: this.tr(text), tone: known, icon: markRaw(icon) }
+		},
+
+		/** Follow the browser's connection state. */
+		onConnection() {
+			this.online = typeof navigator === 'undefined' || navigator.onLine !== false
+		},
+
+		/**
+		 * The id of a frame's heading.
+		 *
+		 * @param {string} key The frame key.
+		 * @return {string}
+		 */
+		headingId(key) {
+			return `cn-device-frame-${this.uid}-${key}`
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-device-frames-widget {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	gap: 20px;
+}
+
+.cn-device-frames-widget__frame {
+	display: flex;
+	flex: none;
+	flex-direction: column;
+	width: var(--cn-device-frame-width, 350px);
+	max-width: 100%;
+	min-height: 600px;
+	box-sizing: border-box;
+	overflow: hidden;
+	border: 10px solid var(--color-main-text);
+	border-radius: 36px;
+	background: var(--color-background-hover);
+}
+
+.cn-device-frames-widget__head {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	padding: 14px 18px 10px;
+	border-bottom: 1px solid var(--color-border);
+	background: var(--color-main-background);
+}
+
+.cn-device-frames-widget__status {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	font-size: 13px;
+	font-weight: 600;
+}
+
+.cn-device-frames-widget__status--warning {
+	color: var(--color-warning-text, var(--color-main-text));
+}
+
+.cn-device-frames-widget__status--success {
+	color: var(--color-success-text, var(--color-main-text));
+}
+
+.cn-device-frames-widget__status--info {
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-device-frames-widget__title {
+	margin: 0;
+	font-size: 20px;
+	font-weight: 700;
+}
+
+.cn-device-frames-widget__body {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	padding: 14px;
+}
+
+/* On a phone the frame is the screen: no bezel, the full width. */
+@media (max-width: 640px) {
+	.cn-device-frames-widget__frame {
+		width: 100%;
+		min-height: 0;
+		border-width: 0;
+		border-radius: var(--cn-board-card-radius, 12px);
+	}
+}
+</style>

package/src/components/CnDeviceFramesWidget/index.js

@@ -0,0 +1,29 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * CnDeviceFramesWidget — self-registers the `device-frames` widget type
+ * (several small pages side by side, each in a phone frame) into the shared
+ * dashboardWidgetRegistry at module load. A container: it renders other
+ * widgets of the surface, so the host hands it their definitions.
+ */
+
+import CnDeviceFramesWidget from './CnDeviceFramesWidget.vue'
+import { registerDashboardWidget } from '../CnWidgetGrid/dashboardWidgetRegistry.js'
+
+registerDashboardWidget('device-frames', {
+	renderer: CnDeviceFramesWidget,
+	form: null,
+	defaultContent: {
+		frames: [],
+		width: 350,
+	},
+	displayName: 'Device frames',
+	icon: 'CellphoneText',
+	container: true,
+	ownsTitle: true,
+	surfaces: ['app-dashboard', 'detail-page'],
+})
+
+export { CnDeviceFramesWidget }
+export default CnDeviceFramesWidget

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>