@conduction/nextcloud-vue 2.63.0 → 2.64.0

package/src/components/CnAuditTrailCard/CnAuditTrailCard.vue

@@ -69,12 +69,27 @@ export default {
 	components: { CnDetailCard, NcLoadingIcon },
 
 	props: {
-		/** OpenRegister register id (slug or uuid). */
-		register: { type: String, required: true },
-		/** OpenRegister schema id (slug or uuid). */
-		schema: { type: String, required: true },
-		/** Parent object id. */
-		objectId: { type: String, required: true },
+		/** OpenRegister register id (slug or uuid). Optional for `scope: "app"`. */
+		register: { type: String, default: '' },
+		/** OpenRegister schema id (slug or uuid). Optional for `scope: "app"`. */
+		schema: { type: String, default: '' },
+		/** Parent object id. Required for `scope: "object"` (the default); unused for `scope: "app"`. */
+		objectId: { type: String, default: '' },
+		/**
+		 * What the card lists. `object` (the default) is one object's trail
+		 * and needs `register`, `schema` and `objectId`. `app` is the
+		 * app-wide feed: the entries of every object the caller may read
+		 * (OpenRegister's `/audit-trails/readable`), narrowed to `register`
+		 * and `schema` when those are set.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-the-audit-trail-widget-reads-the-app-wide-feed
+		 */
+		scope: {
+			type: String,
+			default: 'object',
+			validator: (value) => ['object', 'app'].includes(value),
+		},
+
 		/** Rendering surface — passed for AD-19 surface fallback consumers. */
 		surface: {
 			type: String,
@@ -116,13 +131,38 @@ export default {
 		displayedEntries() {
 			return this.entries.slice(0, this.maxDisplay)
 		},
+
+		/**
+		 * The path the card reads (prefixed at fetch time), or '' when it has nothing to read: the
+		 * object's own trail, or the app-wide readable feed narrowed to the
+		 * register and schema when set.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-the-audit-trail-widget-reads-the-app-wide-feed
+		 * @return {string}
+		 */
+		fetchUrl() {
+			const params = new URLSearchParams({ limit: String(this.maxDisplay) })
+			if (this.scope === 'app') {
+				if (this.register) {
+					params.set('register', this.register)
+				}
+				if (this.schema) {
+					params.set('schema', this.schema)
+				}
+				return `${this.apiBase}/audit-trails/readable?${params.toString()}`
+			}
+			if (!this.register || !this.schema || !this.objectId) {
+				return ''
+			}
+			return `${this.apiBase}/objects/${this.register}/${this.schema}/${this.objectId}/audit-trail?${params.toString()}`
+		},
 	},
 
 	watch: {
-		objectId: {
+		fetchUrl: {
 			immediate: true,
-			handler(id) {
-				if (id) {
+			handler(url) {
+				if (url) {
 					this.fetchEntries()
 				}
 			},
@@ -130,20 +170,25 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Read the entries from `fetchUrl`. The readable feed answers
+		 * `{ rows, nextCursor }`, the object trail `{ results }`.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-the-audit-trail-widget-reads-the-app-wide-feed
+		 * @return {Promise<void>}
+		 */
 		async fetchEntries() {
-			if (!this.register || !this.schema || !this.objectId) {
+			const url = this.fetchUrl
+			if (!url) {
 				return
 			}
 			this.loading = true
 			try {
-				const params = new URLSearchParams({ limit: String(this.maxDisplay) })
-				const response = await fetch(
-					prefixUrl(`${this.apiBase}/objects/${this.register}/${this.schema}/${this.objectId}/audit-trail?${params.toString()}`),
-					{ headers: buildHeaders() },
-				)
+				const response = await fetch(prefixUrl(url), { headers: buildHeaders() })
 				if (response.ok) {
 					const data = await response.json()
-					this.entries = data.results || data || []
+					const list = data.results || data.rows || data
+					this.entries = Array.isArray(list) ? list : []
 				} else {
 					this.entries = []
 				}

package/src/components/CnAuditTrailWidget/CnAuditTrailWidget.vue

@@ -5,10 +5,11 @@
 
 <template>
 	<CnAuditTrailCard
-		v-if="resolvedRegister && resolvedSchema && resolvedObjectId"
+		v-if="resolvedScope === 'app' || (resolvedRegister && resolvedSchema && resolvedObjectId)"
 		:register="resolvedRegister"
 		:schema="resolvedSchema"
 		:objectId="resolvedObjectId"
+		:scope="resolvedScope"
 		:title="resolvedTitle"
 		:maxDisplay="resolvedMaxDisplay" />
 </template>
@@ -70,6 +71,15 @@ export default {
 		title: { type: String, default: '' },
 		/** Maximum audit rows to render (0 falls back to the card default). */
 		maxDisplay: { type: Number, default: 0 },
+		/**
+		 * `app` lists the app-wide feed (every object the caller may read,
+		 * narrowed to `register` / `schema` when set) and needs no object;
+		 * `object` (the default) is one object's trail. Also read from
+		 * `content.scope`.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-the-audit-trail-widget-reads-the-app-wide-feed
+		 */
+		scope: { type: String, default: '' },
 		/** Stored widget content blob (CnDashboardPage registry branch): `{ title, maxDisplay, register?, schema?, objectId? }`. */
 		content: { type: Object, default: () => ({}) },
 	},
@@ -115,6 +125,17 @@ export default {
 			return typeof s === 'string' ? s : (s && (s.slug || s.name || s.id)) || ''
 		},
 
+		/**
+		 * The feed scope: explicit prop → content → `object`.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-the-audit-trail-widget-reads-the-app-wide-feed
+		 * @return {('object'|'app')}
+		 */
+		resolvedScope() {
+			const s = this.scope || this.content.scope
+			return s === 'app' ? 'app' : 'object'
+		},
+
 		/**
 		 * The card title: explicit prop → content → '' (card default).
 		 *

package/src/components/CnCellRenderer/CnCellRenderer.vue

@@ -177,6 +177,9 @@ import { safeHref } from '../../utils/safeHref.js'
 import { formatValue } from '../../utils/schema.js'
 import { CnStatusBadge } from '../CnStatusBadge/index.js'
 
+/** A uuid in any version, the shape OpenRegister ids take. */
+const UUID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
+
 /**
  * Module-level set of column keys already warned about for a
  * `widget:"link"` declaration with no resolvable target — guarantees
@@ -483,13 +486,20 @@ export default {
 		 *
 		 * @return {string}
 		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-avatar-and-date-cells
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-small-opt-ins-from-the-decidiq-and-learniq-lanes
 		 */
 		dateLabel() {
 			const date = parseDateValue(this.value)
 			if (date === null) {
 				return ''
 			}
-			const options = { day: 'numeric', month: 'short', year: 'numeric' }
+			// `widgetProps.showTime: true` adds the time of day ("5 Oct 2026,
+			// 08:30"); `widgetProps.timeOnly: true` shows just the time
+			// ("08:30"), for a timetable row. Default: the date alone.
+			const props = this.widgetProps || {}
+			const options = props.timeOnly === true
+				? { hour: '2-digit', minute: '2-digit' }
+				: { day: 'numeric', month: 'short', year: 'numeric', ...(props.showTime === true ? { hour: '2-digit', minute: '2-digit' } : {}) }
 			let locale
 			try {
 				locale = getCanonicalLocale()
@@ -738,6 +748,27 @@ export default {
 			return undefined
 		},
 
+		/**
+		 * Whether the cell draws a uuid, and so takes the monospace uuid
+		 * style. The property's `format: "uuid"` alone used to decide this,
+		 * so a reference that a formatter or a widget had resolved to its
+		 * name was still drawn as code. Now the value has to be a uuid AND
+		 * nothing resolves it: a resolving widget or formatter, or a value
+		 * that is not a uuid, renders in the normal text style.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-resolved-reference-is-not-drawn-as-a-uuid
+		 * @return {boolean}
+		 */
+		showsUuid() {
+			if (this.property?.format !== 'uuid') {
+				return false
+			}
+			if (this.widgetComponent || this.widget || this.hasFormatter) {
+				return false
+			}
+			return typeof this.value === 'string' && UUID_PATTERN.test(this.value)
+		},
+
 		cellClass() {
 			const classes = []
 			if (this.propertyType === 'boolean') {
@@ -749,7 +780,7 @@ export default {
 			if (this.property?.format === 'date-time' || this.property?.format === 'date') {
 				classes.push('cn-cell-renderer--date')
 			}
-			if (this.property?.format === 'uuid') {
+			if (this.showsUuid) {
 				classes.push('cn-cell-renderer--uuid')
 			}
 			if (this.propertyType === 'integer' || this.propertyType === 'number') {

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -11,8 +11,14 @@
 -->
 <template>
 	<div class="cn-dashboard-page" data-testid="cn-dashboard-page">
-		<!-- Header -->
-		<div class="cn-dashboard-page__header" data-testid="cn-dashboard-page-header">
+		<!-- Header. `showHeader: false` drops the whole row (title, description,
+		     header actions, edit toggle) for a page that opens with its own
+		     heading, such as a greeting; the title then stays as a visually
+		     hidden heading so the main landmark keeps its name. -->
+		<h2 v-if="!showHeader && title" class="hidden-visually" data-testid="cn-dashboard-page-hidden-title">
+			{{ resolvedTitle }}
+		</h2>
+		<div v-if="showHeader" class="cn-dashboard-page__header" data-testid="cn-dashboard-page-header">
 			<div class="cn-dashboard-page__header-left">
 				<div v-if="title || $slots['title-meta']" class="cn-dashboard-page__title-row">
 					<h2 v-if="title" class="cn-dashboard-page__title">
@@ -320,6 +326,7 @@
 						:borderless="widgetBorderless(item)"
 						:flush="item.flush !== false"
 						:buttons="getWidgetButtons(item)"
+						:headerLink="getWidgetHeaderLink(item)"
 						:styleConfig="item.styleConfig || {}"
 						:titleIconPosition="getWidgetTitleIconPosition(item)"
 						:titleIconColor="getWidgetTitleIconColor(item)"
@@ -400,6 +407,7 @@
 						:borderless="widgetBorderless(item)"
 						:flush="item.flush !== false"
 						:buttons="getWidgetButtons(item)"
+						:headerLink="getWidgetHeaderLink(item)"
 						:styleConfig="item.styleConfig || {}"
 						:titleIconPosition="getWidgetTitleIconPosition(item)"
 						:titleIconColor="getWidgetTitleIconColor(item)"
@@ -478,6 +486,7 @@
 						:flush="item.flush !== false"
 						:class="{ 'cn-dashboard-page__card-fit': isCardWidget(item) }"
 						:buttons="getWidgetButtons(item)"
+						:headerLink="getWidgetHeaderLink(item)"
 						:styleConfig="item.styleConfig || {}"
 						:documentationUrl="getWidgetDocumentationUrl(item)"
 						:docsAnchor="getWidgetDocsAnchor(item)"
@@ -502,6 +511,7 @@
 						:borderless="widgetBorderless(item)"
 						:flush="item.flush !== false"
 						:buttons="getWidgetButtons(item)"
+						:headerLink="getWidgetHeaderLink(item)"
 						:styleConfig="item.styleConfig || {}"
 						:titleIconPosition="getWidgetTitleIconPosition(item)"
 						:titleIconColor="getWidgetTitleIconColor(item)"
@@ -537,6 +547,7 @@
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
 						:buttons="getWidgetButtons(item)"
+						:headerLink="getWidgetHeaderLink(item)"
 						:styleConfig="item.styleConfig || {}"
 						:showRefresh="getWidgetShowRefresh(item)"
 						:documentationUrl="getWidgetDocumentationUrl(item)"
@@ -566,6 +577,7 @@
 						:titleIconVariant="getWidgetTitleIconVariant(item)"
 						:class="{ 'cn-dashboard-page__card-fit': isCardWidget(item) }"
 						:buttons="getWidgetButtons(item)"
+						:headerLink="getWidgetHeaderLink(item)"
 						:styleConfig="item.styleConfig || {}"
 						:documentationUrl="getWidgetDocumentationUrl(item)"
 						:docsAnchor="getWidgetDocsAnchor(item)"
@@ -921,6 +933,19 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Whether the header row renders: title, description, header actions
+		 * and the edit toggle. `false` (manifest `config.showHeader: false`)
+		 * drops it for a page whose first widget is its heading; the title
+		 * then renders visually hidden so the page keeps an accessible name.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-dashboard-page-can-hide-its-header
+		 */
+		showHeader: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * Widget definitions array. Each widget defines metadata for rendering.
 		 *
@@ -3410,6 +3435,22 @@ export default {
 			return def?.buttons || []
 		},
 
+		/**
+		 * The widget's header text link (`headerLink` on the layout entry,
+		 * else on the widget definition), forwarded to CnWidgetWrapper.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-widget-header-carries-a-text-link
+		 * @param {object} item Layout placement entry.
+		 * @return {object|null}
+		 */
+		getWidgetHeaderLink(item) {
+			if (item?.headerLink && typeof item.headerLink === 'object') {
+				return item.headerLink
+			}
+			const def = this.getWidgetDef(item.widgetId)
+			return (def?.headerLink && typeof def.headerLink === 'object') ? def.headerLink : null
+		},
+
 		/**
 		 * Whether a widget's overflow Actions menu shows the Refresh item.
 		 * An explicit per-widget flag wins — on the widget definition or

package/src/components/CnDataTable/CnDataTable.vue

@@ -278,6 +278,14 @@
 									:row="row"
 									:rowKey="rowKey" />
 							</slot>
+							<!-- A second, muted line under the value, from `col.secondary`:
+							     a field key, a "{field} · {other}" template, or a function
+							     of the row. Lets one column read "title" over "number ·
+							     requester" without a custom cell. -->
+							<span
+								v-if="secondaryValue(row, col)"
+								class="cn-table-cell__secondary"
+								data-testid="cn-cell-secondary">{{ secondaryValue(row, col) }}</span>
 						</td>
 
 						<!-- Row actions -->
@@ -444,7 +452,13 @@ export default {
 		 * reader is looking. `columnsFromSchema` fills it from the JSON Schema property
 		 * description automatically, so schema-driven tables get it for free.
 		 *
-		 * @type {Array<{key: string, label: string, description: string, sortable: boolean, width: string, class: string, cellClass: string}|string>}
+		 * `secondary` draws a second, muted line under the cell's value: a field
+		 * key (`"number"`), a template with `{field}` placeholders
+		 * (`"{number} · {requester}"`, dotted paths allowed), or a function of
+		 * the row. Empty fields leave their placeholder blank; a line that
+		 * resolves to nothing is not drawn.
+		 *
+		 * @type {Array<{key: string, label: string, description: string, sortable: boolean, width: string, class: string, cellClass: string, secondary: (string|((row: object) => string))}|string>}
 		 */
 		columns: {
 			type: Array,
@@ -1415,6 +1429,36 @@ export default {
 		 * @param {object} col The column definition.
 		 * @return {unknown} The value handed to the slot / CnCellRenderer.
 		 */
+		/**
+		 * The secondary line of a cell, from `col.secondary`: a function is
+		 * called with the row; a string with `{field}` placeholders is a
+		 * template filled from the row (dotted paths allowed); any other
+		 * string is a field key. Returns '' when there is nothing to draw.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-table-column-carries-a-secondary-line
+		 * @param {object} row The row.
+		 * @param {object} col The column definition.
+		 * @return {string} The secondary text, or ''.
+		 */
+		secondaryValue(row, col) {
+			const spec = col?.secondary
+			if (typeof spec === 'function') {
+				const out = spec(row)
+				return out === null || out === undefined ? '' : String(out)
+			}
+			if (typeof spec !== 'string' || spec === '') {
+				return ''
+			}
+			const asText = (v) => (v === null || v === undefined ? '' : String(v))
+			if (spec.includes('{')) {
+				const filled = spec.replace(/\{([^}]+)\}/g, (_, key) => asText(this.getCellValue(row, key.trim())))
+				// A template whose every field is empty leaves only separators:
+				// nothing worth a line.
+				return /[\p{L}\p{N}]/u.test(filled) ? filled.trim() : ''
+			}
+			return asText(this.getCellValue(row, spec))
+		},
+
 		cellValue(row, col) {
 			if (col && col.aggregate) {
 				const cached = this.aggregateValues[String(row[this.rowKey])]

package/src/components/CnDetailPage/CnDetailPage.md

@@ -430,3 +430,7 @@ Four levels of action and the case surfaces around them. All opt in. See [the re
 ## Not found
 
 When the schema-driven fetch answers 404 the page shows a not-found state whose back button is a router link to `notFoundRoute` (default `null`, which means the app root `/`). `notFoundRouteLabel` names that page in the button's "Back to …" label.
+
+### Type eyebrow and breadcrumb
+
+`showTypeEyebrow` (default `true`) can drop the type label above the record name. `breadcrumb` (`{ label, route?, params?, href? }`) draws a breadcrumb line above the header: that crumb, then the record's name as the current crumb.

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -41,6 +41,13 @@
 			{{ skipLinkLabel }}
 		</a>
 
+		<!-- Breadcrumb line (manifest `config.breadcrumb`): the list the record
+		     belongs to, then the record itself as the current crumb. -->
+		<CnBreadcrumbs
+			v-if="breadcrumbCrumbs.length > 0 && !objectNotFound"
+			class="cn-detail-page__breadcrumbs"
+			:crumbs="breadcrumbCrumbs"
+			data-testid="cn-detail-page-breadcrumbs" />
 		<!-- Header -->
 		<div v-if="!objectNotFound" class="cn-detail-page__header" data-testid="cn-detail-page-header">
 			<!-- Header (left block) — overridable via #header slot. Default
@@ -98,7 +105,7 @@
 						     (ADR-062). Only shown once the object resolves to a
 						     display name that differs from the type label. -->
 						<p
-							v-if="typeEyebrow"
+							v-if="typeEyebrow && showTypeEyebrow"
 							class="cn-detail-page__type-eyebrow"
 							data-testid="cn-detail-page-type-eyebrow">
 							{{ typeEyebrow }}
@@ -1025,6 +1032,7 @@ import {
 	widgetTitleOf,
 } from '../../utils/widgetDispatch.js'
 import { CnActionButtons } from '../CnActionButtons/index.js'
+import { CnBreadcrumbs } from '../CnBreadcrumbs/index.js'
 import { CnIcon } from '../CnIcon/index.js'
 import { CnStatusBadge } from '../CnStatusBadge/index.js'
 import { getWidgetTypeEntry } from '../CnWidgetGrid/dashboardWidgetRegistry.js'
@@ -1172,6 +1180,7 @@ export default {
 		CnDashboardGrid,
 		CnLifecycleActions,
 		CnActionButtons,
+		CnBreadcrumbs,
 		CnStatusBadge,
 		CnSummaryAggregates,
 		CnRelatedCollections,
@@ -2078,6 +2087,34 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Whether the type eyebrow (the type label above the record name)
+		 * renders once the record resolves. `false` (manifest
+		 * `config.showTypeEyebrow: false`) drops it for a header that says
+		 * the type in a pill instead.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-detail-page-drops-its-eyebrow-and-shows-a-breadcrumb
+		 */
+		showTypeEyebrow: {
+			type: Boolean,
+			default: true,
+		},
+
+		/**
+		 * A breadcrumb line above the header (manifest `config.breadcrumb`):
+		 * `{ label, route?, params?, href? }` names the list the record
+		 * belongs to; the record's display name follows as the current
+		 * crumb. `label` goes through the host translate function. Null (the
+		 * default) draws no trail.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-detail-page-drops-its-eyebrow-and-shows-a-breadcrumb
+		 * @type {{label: string, route?: string, params?: object, href?: string}|null}
+		 */
+		breadcrumb: {
+			type: Object,
+			default: null,
+		},
+
 		/**
 		 * A column of cards beside the body (manifest `config.sideColumn`),
 		 * for the record's facts: deadline, requester, handler, links. Each
@@ -3201,6 +3238,28 @@ export default {
 			return this.objectDisplayName || this.resolvedTitle
 		},
 
+		/**
+		 * The breadcrumb trail: the declared crumb (a router target from
+		 * `route` + `params`, or an `href`), then the record's display name
+		 * as the current crumb. Empty without a `breadcrumb` label.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-detail-page-drops-its-eyebrow-and-shows-a-breadcrumb
+		 * @return {Array<{label: string, to?: object, href?: string}>}
+		 */
+		breadcrumbCrumbs() {
+			const crumb = this.breadcrumb
+			if (!crumb || typeof crumb.label !== 'string' || crumb.label === '') {
+				return []
+			}
+			const first = { label: this.effectiveTranslate(crumb.label) }
+			if (crumb.route) {
+				first.to = { name: crumb.route, ...(crumb.params ? { params: crumb.params } : {}) }
+			} else if (crumb.href) {
+				first.href = crumb.href
+			}
+			return [first, { label: this.displayTitle }]
+		},
+
 		/**
 		 * Effective translate function: the injected `cnTranslate` (the host
 		 * app's bound `t()`), identity by default.