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

package/l10n/en.json

@@ -1517,7 +1517,12 @@
     "Your account": "Your account",
     "Only for you. Colleagues keep their own settings.": "Only for you. Colleagues keep their own settings.",
     "Sections of the settings": "Sections of the settings",
-    "Changes are saved straight away": "Changes are saved straight away"
+    "Changes are saved straight away": "Changes are saved straight away",
+    "Change the schema for {type}": "Change the schema for {type}",
+    "Show all types": "Show all types",
+    "All types set up": "All types set up",
+    "Set up": "Set up",
+    "{configured} of {total} set up": "{configured} of {total} set up"
   },
   "plurals": {
     "{count} selected": [
@@ -1599,6 +1604,18 @@
     "{count} more filter": [
       "{count} more filter",
       "{count} more filters"
+    ],
+    "%n type": [
+      "%n type",
+      "%n types"
+    ],
+    "And %n more type in this group, set up.": [
+      "And %n more type in this group, set up.",
+      "And %n more types in this group, all set up."
+    ],
+    "And %n more type in this group.": [
+      "And %n more type in this group.",
+      "And %n more types in this group."
     ]
   }
 }

package/l10n/nl.json

@@ -1703,7 +1703,12 @@
     "Your account": "Uw account",
     "Only for you. Colleagues keep their own settings.": "Alleen voor jou. Collega's houden hun eigen instellingen.",
     "Sections of the settings": "Onderdelen van de instellingen",
-    "Changes are saved straight away": "Wijzigingen worden meteen bewaard"
+    "Changes are saved straight away": "Wijzigingen worden meteen bewaard",
+    "Change the schema for {type}": "Schema wijzigen voor {type}",
+    "Show all types": "Alle soorten tonen",
+    "All types set up": "Alle soorten ingesteld",
+    "Set up": "Ingesteld",
+    "{configured} of {total} set up": "{configured} van {total} ingesteld"
   },
   "plurals": {
     "{count} selected": [
@@ -1785,6 +1790,18 @@
     "{count} more filter": [
       "Nog {count} filter",
       "Nog {count} filters"
+    ],
+    "%n type": [
+      "%n soort",
+      "%n soorten"
+    ],
+    "And %n more type in this group, set up.": [
+      "En nog %n soort in deze groep, ingesteld.",
+      "En nog %n soorten in deze groep, allemaal ingesteld."
+    ],
+    "And %n more type in this group.": [
+      "En nog %n soort in deze groep.",
+      "En nog %n soorten in deze groep."
     ]
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.56.0-beta.48",
+  "version": "2.56.0-beta.49",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnAppRoot/CnAppRoot.vue

@@ -193,6 +193,8 @@
 		<template v-else>
 			<!-- The brand block in Nextcloud's own header (board look); teleported, renders nothing here. -->
 			<CnBrandBar v-if="brandInHeader" :brand="resolvedBrandBlock" @unavailable="headerMissing = true" />
+			<!-- The app's own line on the header's search field (board look); renders nothing here. -->
+			<CnHeaderSearchLabel v-if="headerSearchLabel" :label="headerSearchLabel" />
 			<!--
 			  @slot menu
 			  @description Left-rail navigation surface. Default:
@@ -713,6 +715,7 @@ import CnCommandPalette from '../CnCommandPalette/CnCommandPalette.vue'
 import CnCredentials from '../CnCredentials/CnCredentials.vue'
 import CnDependencyMissing from '../CnDependencyMissing/CnDependencyMissing.vue'
 import CnEnvironmentBanner from '../CnEnvironmentBanner/CnEnvironmentBanner.vue'
+import CnHeaderSearchLabel from '../CnHeaderSearchLabel/CnHeaderSearchLabel.vue'
 import CnNotificationPreferences from '../CnNotificationPreferences/CnNotificationPreferences.vue'
 import CnObjectSidebar from '../CnObjectSidebar/CnObjectSidebar.vue'
 import CnSetupWizard from '../CnSetupWizard/CnSetupWizard.vue'
@@ -819,6 +822,7 @@ export default {
 
 	components: {
 		CnBrandBar,
+		CnHeaderSearchLabel,
 		NcAppContent,
 		NcAppSettingsDialog,
 		NcAppSettingsSection,
@@ -2195,6 +2199,22 @@ export default {
 				&& this.resolvedBrandBlock.placement !== 'nav'
 		},
 
+		/**
+		 * The line on the search field in Nextcloud's header: the manifest's
+		 * `nav.searchPlaceholder`, translated, under the board look on a page
+		 * with a header. Empty otherwise, and then the field keeps Nextcloud's line.
+		 *
+		 * @spec openspec/changes/screens-board-top-bar-search/specs/layout-components/spec.md#requirement-the-board-look-names-what-the-header-search-finds
+		 * @return {string}
+		 */
+		headerSearchLabel() {
+			const key = this.manifest?.nav?.searchPlaceholder
+			if (this.resolvedLook !== 'board' || !this.headerPresent || typeof key !== 'string' || key === '') {
+				return ''
+			}
+			return this.manifestTranslate(key)
+		},
+
 		/**
 		 * The label lookup provided as `cnTranslate`: the manifest's own
 		 * translations for the language first, then the host `translate`, then the

package/src/components/CnBrandBar/CnBrandBar.vue

@@ -1,8 +1,8 @@
 <!--
   CnBrandBar — the brand block in Nextcloud's own header (screens-brand-block-top-bar).
 
-  Draws the 237px brand block (emblem, organisation, app name, and a 1px
-  divider at its end) at the START of `#header`, before the app menu, under the
+  Draws the brand block (a 237px brand link with the emblem, organisation and
+  app name, then a 1px divider 12px on) at the START of `#header`, before the app menu, under the
   board look. CnAppRoot mounts it when a brand is declared and `#header` exists.
 
   `#header` is Nextcloud's and offers no extension point for apps, so this is
@@ -170,11 +170,12 @@ export default {
 	display: flex;
 	align-items: center;
 	gap: 12px;
-	width: var(--cn-board-brand-width, 237px);
 }
 
+/* The brand link is 237px; the divider follows it, 12px on. */
 .cn-brand-bar__brand {
-	flex: 1 1 0;
+	flex: none;
+	width: var(--cn-board-brand-width, 237px);
 	box-sizing: border-box;
 	display: flex;
 	align-items: center;

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -2101,7 +2101,7 @@ export default {
 			default: false,
 		},
 
-		/** Label for the header Edit button. Defaults to a translated "Edit". */
+		/** Label for the header Edit button, run through the host translate. Defaults to a translated "Edit". */
 		editLabel: {
 			type: String,
 			default: '',
@@ -3416,14 +3416,40 @@ export default {
 
 		/**
 		 * The side column's widget definitions. A string names a widget
-		 * declared in `widgets`; an object is a definition of its own.
+		 * declared in `widgets`; an object is a definition of its own. A
+		 * definition whose `visibleWhen` does not hold for the record (or the
+		 * records `visibilityContext` names) is left out, exactly as in the
+		 * body grid; edit mode shows them all.
 		 *
 		 * @return {Array<object>} The definitions that resolve, each with an `id`.
 		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-side-column
+		 * @spec openspec/changes/detail-side-visible-when/specs/detail-page/spec.md#requirement-a-side-column-widget-shows-only-while-its-visiblewhen-holds
 		 */
 		sideColumnWidgets() {
+			const resolved = this.declaredSideWidgets.filter((widget) => this.sideWidgetVisible(widget))
+			if (!this.isBoard) {
+				return resolved
+			}
+			// The board look: the notice first, the History card last.
+			const rank = (widget) => (widget.type === 'banner' ? 0 : isActivityWidget(widget) ? 2 : 1)
+			return resolved
+				.map((widget, index) => ({ widget, index }))
+				.sort((a, b) => (rank(a.widget) - rank(b.widget)) || (a.index - b.index))
+				.map(({ widget }) => widget)
+		},
+
+		/**
+		 * The side column's entries resolved to definitions, before any
+		 * `visibleWhen` is read: a string names a widget declared in
+		 * `widgets`, an object is a definition of its own (given an id when it
+		 * has none).
+		 *
+		 * @return {Array<object>}
+		 * @spec openspec/changes/detail-side-visible-when/specs/detail-page/spec.md#requirement-a-side-column-widget-shows-only-while-its-visiblewhen-holds
+		 */
+		declaredSideWidgets() {
 			const declared = Array.isArray(this.widgets) ? this.widgets : []
-			const resolved = (Array.isArray(this.sideColumn) ? this.sideColumn : [])
+			return (Array.isArray(this.sideColumn) ? this.sideColumn : [])
 				.map((entry, index) => {
 					if (typeof entry === 'string') {
 						return declared.find((widget) => widget && widget.id === entry) || null
@@ -3434,15 +3460,6 @@ export default {
 					return entry.id ? entry : { ...entry, id: `cn-side-${index}` }
 				})
 				.filter(Boolean)
-			if (!this.isBoard) {
-				return resolved
-			}
-			// The board look: the notice first, the History card last.
-			const rank = (widget) => (widget.type === 'banner' ? 0 : isActivityWidget(widget) ? 2 : 1)
-			return resolved
-				.map((widget, index) => ({ widget, index }))
-				.sort((a, b) => (rank(a.widget) - rank(b.widget)) || (a.index - b.index))
-				.map(({ widget }) => widget)
 		},
 
 		/**
@@ -3763,12 +3780,14 @@ export default {
 		},
 
 		/**
-		 * Label for the header Edit button.
+		 * Label for the header Edit button: the manifest's `editLabel` through
+		 * the host translate, else the library's translated "Edit".
 		 *
 		 * @return {string}
+		 * @spec openspec/changes/detail-edit-label-translate/specs/detail-page/spec.md#requirement-the-edit-button-label-follows-the-reader-s-language
 		 */
 		editActionLabel() {
-			return this.editLabel || t('nextcloud-vue', 'Edit')
+			return this.editLabel ? this.effectiveTranslate(this.editLabel) : t('nextcloud-vue', 'Edit')
 		},
 
 		/**
@@ -4022,7 +4041,7 @@ export default {
 			if (!this.widgetVisibilityData || this.visibilityRowsPending) {
 				return ''
 			}
-			const defs = [...(this.bodyGridWidgets || []), ...((this.activeView && this.activeView.widgets) || [])]
+			const defs = [...(this.bodyGridWidgets || []), ...((this.activeView && this.activeView.widgets) || []), ...this.declaredSideWidgets]
 			const remote = defs.filter((def) => def && def.visibleWhen && typeof def.visibleWhen === 'object'
 				&& !isLocallyDecidableVisibleWhen(def.visibleWhen))
 			if (remote.length === 0) {
@@ -5897,6 +5916,27 @@ export default {
 			return compactLayoutRows(drawable)
 		},
 
+		/**
+		 * Whether a side column widget shows: always in edit mode or without a
+		 * `visibleWhen`, else while it holds for the record and the records
+		 * `visibilityContext` names, read by the same `detailWidgetVisible` the
+		 * body grid uses (local field conditions, `@context.<name>.*`, and the
+		 * answers of endpoint and source conditions).
+		 *
+		 * @param {object} widget A side column widget definition.
+		 * @return {boolean}
+		 * @spec openspec/changes/detail-side-visible-when/specs/detail-page/spec.md#requirement-a-side-column-widget-shows-only-while-its-visiblewhen-holds
+		 */
+		sideWidgetVisible(widget) {
+			if (this.editingBody || widget.visibleWhen === undefined || widget.visibleWhen === null) {
+				return true
+			}
+			return detailWidgetVisible(widget, this.widgetVisibilityData, {
+				pending: this.visibilityRowsPending,
+				answers: this.widgetConditionAnswers,
+			})
+		},
+
 		/**
 		 * Whether a layout item has anything to draw, so a grid cell is worth
 		 * spending on it.

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