@conduction/nextcloud-vue 2.69.0 → 2.71.0

package/src/components/CnDetailPage/CnDetailPage.md

@@ -444,3 +444,5 @@ When the schema-driven fetch answers 404 the page shows a not-found state whose
 ### Header card and header widget
 
 `headerCard` (default `false`) draws the header as a bordered card. `headerWidget` (default `''`) names a widget in `widgets` to render inside the header under the title, without a card of its own and out of the body grid: the stages bars of the board's case card.
+
+`showWidgetActions` (Boolean, default `true`): `false` (manifest `config.showWidgetActions: false`) drops the overflow Actions menu from the cards of the body grid and the side column, unless a widget definition sets `showActions: true`.

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -48,6 +48,7 @@
 			class="cn-detail-page__breadcrumbs"
 			:crumbs="breadcrumbCrumbs"
 			:rootText="breadcrumbCrumbs[0].icon === undefined"
+			:separator="breadcrumbSeparator"
 			data-testid="cn-detail-page-breadcrumbs" />
 		<!-- Header -->
 		<div
@@ -749,6 +750,7 @@
 								:widget="findWidget(item)"
 								chrome="card"
 								:showCardTitle="showCardTitle(item)"
+								:showActions="showWidgetActions"
 								:objectId="objectId"
 								:object="currentObject"
 								:objectType="resolvedObjectType"
@@ -959,6 +961,7 @@
 						:widget="widget"
 						chrome="card"
 						:showCardTitle="true"
+						:showActions="showWidgetActions"
 						:objectId="objectId"
 						:object="currentObject"
 						:objectType="resolvedObjectType"
@@ -2235,18 +2238,38 @@ export default {
 		 * belongs to; the record's display name follows as the current
 		 * crumb. `label` goes through the host translate function and shows
 		 * as text; `icon` (an MDI name, e.g. `Home`) draws that icon instead,
-		 * with the label as its accessible name. Null (the default) draws no
+		 * with the label as its accessible name. `currentField` names a field
+		 * of the record (a dotted path, e.g. `identifier`) whose value is the
+		 * current crumb instead of the display name; an empty value falls back
+		 * to the display name. `separator` draws that text (e.g. `/`) between
+		 * the crumbs instead of the chevron. 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
 		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-declared-breadcrumb-label-shows-as-text
-		 * @type {{label: string, route?: string, params?: object, href?: string, icon?: string}|null}
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-breadcrumb-can-name-the-record-by-a-field-and-use-a-text-separator
+		 * @type {{label: string, route?: string, params?: object, href?: string, icon?: string, currentField?: string, separator?: string}|null}
 		 */
 		breadcrumb: {
 			type: Object,
 			default: null,
 		},
 
+		/**
+		 * Whether the record's widget cards (the body grid and the side
+		 * column) keep their overflow Actions menu when their definition does
+		 * not say (`showActions`). `false` (manifest
+		 * `config.showWidgetActions: false`) drops it, as on a dashboard; a
+		 * widget with `showActions: true` keeps its menu. A card that offers
+		 * an Add action keeps the menu that holds it. True by default.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-detail-page-can-drop-the-widget-actions-menu
+		 */
+		showWidgetActions: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * A column of cards beside the body (manifest `config.sideColumn`),
 		 * for the record's facts: deadline, requester, handler, links. Each
@@ -3438,7 +3461,38 @@ export default {
 			} else if (crumb.href) {
 				first.href = crumb.href
 			}
-			return [first, { label: this.displayTitle }]
+			return [first, { label: this.breadcrumbCurrentLabel }]
+		},
+
+		/**
+		 * The current crumb: the record's `breadcrumb.currentField` value
+		 * (the case number on a case page) when declared and filled, else the
+		 * display name.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-breadcrumb-can-name-the-record-by-a-field-and-use-a-text-separator
+		 * @return {string}
+		 */
+		breadcrumbCurrentLabel() {
+			const field = this.breadcrumb && this.breadcrumb.currentField
+			if (typeof field === 'string' && field !== '') {
+				const value = stageOf(this.resolvedObject, field)
+				if (value !== '') {
+					return value
+				}
+			}
+			return this.displayTitle
+		},
+
+		/**
+		 * The text drawn between the crumbs (`breadcrumb.separator`), or ''
+		 * for the chevron.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-breadcrumb-can-name-the-record-by-a-field-and-use-a-text-separator
+		 * @return {string}
+		 */
+		breadcrumbSeparator() {
+			const separator = this.breadcrumb && this.breadcrumb.separator
+			return typeof separator === 'string' ? separator : ''
 		},
 
 		/**

package/src/components/CnDetailWidgetHost/CnDetailWidgetHost.vue

@@ -85,7 +85,7 @@
 			v-else-if="isData && schemaObject"
 			:title="resolvedTitle"
 			:chromeless="isBare"
-			:showActions="!isBare"
+			:showActions="!isBare && actionsShown"
 			:icon="widget.icon || null"
 			:schema="schemaObject"
 			:objectData="object"
@@ -165,6 +165,7 @@
 			v-else-if="renderer && isContentOnly && !isBare"
 			:title="widget.title || ''"
 			titleIconPosition="left"
+			:showActions="actionsShown || catalogAddEnabled"
 			:showRefresh="false"
 			:showRequestFeature="false"
 			class="cn-detail-page__catalog-card">
@@ -473,6 +474,21 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Whether a widget on a card keeps its overflow Actions menu when its
+		 * definition does not say (`showActions`). `false` (CnDetailPage
+		 * `showWidgetActions: false`) drops it from the record's data cards; a
+		 * definition with `showActions: true` keeps it, one with
+		 * `showActions: false` drops it whatever this says. True by default,
+		 * which is the menu every card had.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-detail-page-can-drop-the-widget-actions-menu
+		 */
+		showActions: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * The consumer's component registry, consulted before the built-in
 		 * catalog so a custom widget type overrides a built-in (REQ-MVR-005).
@@ -839,6 +855,19 @@ export default {
 			return this.content.allowCreate !== false
 		},
 
+		/**
+		 * Whether the widget's overflow Actions menu renders: the definition's
+		 * own `showActions` when it is a boolean, else the surface's
+		 * `showActions`.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-detail-page-can-drop-the-widget-actions-menu
+		 * @return {boolean} true when the menu renders.
+		 */
+		actionsShown() {
+			const own = this.widget && this.widget.showActions
+			return typeof own === 'boolean' ? own : this.showActions
+		},
+
 		/**
 		 * The card header rule, with the surface's layout-driven answer winning
 		 * when it supplied one.

package/src/components/CnFeaturesAndRoadmapPage/CnFeaturesAndRoadmapPage.vue

@@ -40,6 +40,7 @@
 // unconditionally.
 import { loadState } from '@nextcloud/initial-state'
 import CnFeaturesAndRoadmapView from '../CnFeaturesAndRoadmapView/CnFeaturesAndRoadmapView.vue'
+import { warnCapabilityComparisonDeprecated } from '../../utils/capabilityComparison.js'
 import { DEFAULT_FORGE } from '../../utils/forge.js'
 
 /**
@@ -175,6 +176,11 @@ export default {
 		 * Manifest config > initialState (`features_roadmap_capabilities`) >
 		 * null. When null the view renders its two stops as it always has.
 		 *
+		 * Deprecated: publish the comparison on the app's docs site and link to it (as dossiq #3312 and pipelinq #2195 did). Still rendered; removal waits for a major version. The same goes for the `features_roadmap_capabilities` initial
+		 * state key. A development build warns once when either is set.
+		 *
+		 * @deprecated since 2.66.0, publish the comparison on the app's docs site and link to it.
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-the-in-app-capability-comparison-is-deprecated
 		 * @type {object|null}
 		 */
 		capabilityComparison: {
@@ -298,5 +304,11 @@ export default {
 			return readInitialState(this.effectiveAppId, 'features_roadmap_capabilities', null)
 		},
 	},
+
+	mounted() {
+		if (this.resolvedCapabilityComparison) {
+			warnCapabilityComparisonDeprecated('CnFeaturesAndRoadmapPage `capabilityComparison` / the `features_roadmap_capabilities` initial state')
+		}
+	},
 }
 </script>

package/src/components/CnFeaturesAndRoadmapView/CnFeaturesAndRoadmapView.vue

@@ -114,6 +114,7 @@ import CnFeaturesAndRoadmapSidebar from '../CnFeaturesAndRoadmapSidebar/CnFeatur
 import CnFeaturesTab from '../CnFeaturesTab/CnFeaturesTab.vue'
 import CnRoadmapTab from '../CnRoadmapTab/CnRoadmapTab.vue'
 import CnSupportDialog from '../CnSupportDialog/CnSupportDialog.vue'
+import { warnCapabilityComparisonDeprecated } from '../../utils/capabilityComparison.js'
 import { buildFeatureRequestUrl, DEFAULT_FORGE } from '../../utils/forge.js'
 
 const DEFAULT_OPENBUILT_PATH = '/apps/openbuilt'
@@ -214,6 +215,11 @@ export default {
 		 * When null (default) the toggle keeps its two stops and the view
 		 * renders exactly as it does for every app that passes nothing.
 		 *
+		 * Deprecated: publish the comparison on the app's docs site and link to it (as dossiq #3312 and pipelinq #2195 did). Still rendered; removal waits for a major version.
+		 * A development build warns once when it is set.
+		 *
+		 * @deprecated since 2.66.0, publish the comparison on the app's docs site and link to it.
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-the-in-app-capability-comparison-is-deprecated
 		 * @type {object|null}
 		 */
 		capabilityComparison: {
@@ -527,6 +533,9 @@ export default {
 
 	mounted() {
 		this.publishHoistedSidebar()
+		if (this.capabilityComparison) {
+			warnCapabilityComparisonDeprecated('CnFeaturesAndRoadmapView `capabilityComparison`')
+		}
 	},
 
 	beforeUnmount() {

package/src/components/CnFormDialog/CnFormDialog.vue

@@ -250,6 +250,17 @@
 									<!-- @binding {object} option The option being rendered (`{ id, label }`). -->
 									<slot :name="'field-' + field.key + '-option'" v-bind="optionProps" />
 								</template>
+								<!-- NcSelect's own option splits a label in two spans
+								     (NcEllipsisedOption, keeping its last characters
+								     visible), and in a narrow dropdown the halves broke
+								     onto two lines mid-word: "Agricu lture". A plain
+								     label wraps at spaces only. NcSelectUsers keeps its
+								     avatar rendering. -->
+								<template
+									v-else-if="!isUserField(field)"
+									#option="optionProps">
+									<span class="cn-form-dialog__option">{{ optionText(optionProps) }}</span>
+								</template>
 								<template
 									v-if="$slots['field-' + field.key + '-selected-option']"
 									#selected-option="optionProps">
@@ -284,11 +295,17 @@
 									#option="optionProps">
 									<slot :name="'field-' + field.key + '-option'" v-bind="optionProps" />
 								</template>
+								<template v-else #option="optionProps">
+									<span class="cn-form-dialog__option">{{ optionText(optionProps) }}</span>
+								</template>
 								<template
 									v-if="$slots['field-' + field.key + '-selected-option']"
 									#selected-option="optionProps">
 									<slot :name="'field-' + field.key + '-selected-option'" v-bind="optionProps" />
 								</template>
+								<template v-else #selected-option="optionProps">
+									<span class="cn-form-dialog__option">{{ optionText(optionProps) }}</span>
+								</template>
 							</NcSelect>
 							<CnFieldHelper
 								:text="field.description"
@@ -318,11 +335,17 @@
 									#option="optionProps">
 									<slot :name="'field-' + field.key + '-option'" v-bind="optionProps" />
 								</template>
+								<template v-else #option="optionProps">
+									<span class="cn-form-dialog__option">{{ optionText(optionProps) }}</span>
+								</template>
 								<template
 									v-if="$slots['field-' + field.key + '-selected-option']"
 									#selected-option="optionProps">
 									<slot :name="'field-' + field.key + '-selected-option'" v-bind="optionProps" />
 								</template>
+								<template v-else #selected-option="optionProps">
+									<span class="cn-form-dialog__option">{{ optionText(optionProps) }}</span>
+								</template>
 							</NcSelect>
 							<CnFieldHelper
 								:text="field.description"
@@ -2452,6 +2475,26 @@ export default {
 		 * @param {object} field The field definition
 		 * @return {boolean}
 		 */
+		/**
+		 * The text a select option shows: its label, else a display name, a
+		 * name or the id. A plain string option (a tag) is its own text.
+		 *
+		 * @spec openspec/changes/audit-round-lib-fixes/specs/schema-utilities/spec.md
+		 * @param {object|string} option The option (slot props).
+		 * @return {string} The text.
+		 */
+		optionText(option) {
+			if (option === null || option === undefined) {
+				return ''
+			}
+			if (typeof option !== 'object') {
+				return String(option)
+			}
+			const text = [option.label, option.displayName, option.name, option.id]
+				.find((v) => v !== undefined && v !== null && v !== '')
+			return text === undefined ? '' : String(text)
+		},
+
 		isUserField(field) {
 			return !!(field && field.userPicker && !field.userPicker.multiple)
 		},
@@ -3519,8 +3562,15 @@ export default {
 			if (this.isIdPickerField(field)) {
 				// Reference / user fields store the chosen id (UUID / UID),
 				// not the full option. Cache its label so the selection displays.
+				// A user option can carry only `displayName` (NcSelectUsers' own
+				// shape), and without that fallback the chip showed the uid.
 				if (option && option.id) {
-					this.referenceLabels = { ...this.referenceLabels, [option.id]: option.label || String(option.id) }
+					const name = option.label || option.displayName || this.referenceLabels[option.id]
+					if (name) {
+						this.referenceLabels = { ...this.referenceLabels, [option.id]: name }
+					} else if (this.isUserField(field)) {
+						this.resolveUserLabel(option.id)
+					}
 				}
 				this.updateField(field.key, option ? option.id : null)
 				// Reference options are label-only ({id,label}) — pass the id so
@@ -3587,7 +3637,7 @@ export default {
 				const labels = {}
 				for (const o of list) {
 					if (o && o.id) {
-						labels[o.id] = o.label || String(o.id)
+						labels[o.id] = o.label || o.displayName || this.referenceLabels[o.id] || String(o.id)
 					}
 				}
 				if (Object.keys(labels).length > 0) {
@@ -3861,6 +3911,16 @@ export default {
 </script>
 
 <style scoped>
+/* A select option breaks between words only, never inside one. */
+.cn-form-dialog__option {
+	display: block;
+	min-width: 0;
+	white-space: normal;
+	overflow-wrap: normal;
+	word-break: normal;
+	hyphens: manual;
+}
+
 .cn-form-dialog__draft-actions {
 	display: flex;
 	gap: 8px;

package/src/components/CnHeaderWidget/CnHeaderWidget.vue

@@ -4,12 +4,25 @@
 -->
 
 <template>
-	<div class="cn-header-widget" :class="{ 'cn-header-widget--plain': isPlain, 'cn-header-widget--ground': isGround, 'cn-header-widget--with-views': viewOptions.length > 0 }" :style="wrapperStyle">
+	<div class="cn-header-widget" :class="{ 'cn-header-widget--plain': isPlain, 'cn-header-widget--ground': isGround, 'cn-header-widget--with-views': viewOptions.length > 0, 'cn-header-widget--with-emblem': emblem !== null }" :style="wrapperStyle">
 		<div
 			v-if="hasOverlay"
 			class="cn-header-widget__overlay"
 			:style="overlayStyle"
 			aria-hidden="true" />
+		<!-- The emblem beside the greeting (`content.emblem`): a URL, or
+		     `true` for the theme's emblem (--nldesign-emblem-url). Decoration. -->
+		<img
+			v-if="emblem && emblem !== true"
+			class="cn-header-widget__emblem"
+			:src="emblem"
+			alt=""
+			data-testid="cn-header-widget-emblem">
+		<span
+			v-else-if="emblem === true"
+			class="cn-header-widget__emblem cn-header-widget__emblem--theme"
+			aria-hidden="true"
+			data-testid="cn-header-widget-emblem" />
 		<div class="cn-header-widget__content" :style="contentStyle">
 			<p
 				v-if="dateLine"
@@ -140,7 +153,7 @@ export default {
 		 * Persisted widget content: `{title, subtitle, backgroundImageUrl,
 		 * backgroundImageFileId, backgroundColor, overlayMode, overlayColor,
 		 * overlayOpacity, textColor, textAlign, verticalAlign, height, cta,
-		 * greeting, showDate, plain, ground, views}`. All fields are optional except
+		 * greeting, showDate, kicker, emblem, plain, ground, views}`. All fields are optional except
 		 * `title` (or `greeting`); unknown enum values collapse to documented
 		 * defaults and the renderer never throws. `views` is
 		 * `{ ariaLabel?, options: [{ label, route, params? } | { label, view }] }`:
@@ -151,7 +164,12 @@ export default {
 		 * own. `ground: true`
 		 * draws the greeting on the page ground: the plain look with no
 		 * padding, a 32px heading and the date line 6px above it (a dashboard
-		 * also drops the widget's card for it).
+		 * also drops the widget's card for it). A ground greeting takes its
+		 * own height rather than its grid cell's, so a view switch sits on
+		 * the heading's line. `kicker` (an i18n key) prefixes the date line, as
+		 * "Customer contact · Tuesday 6 October". `emblem` (a URL, or `true`
+		 * for the theme's `--nldesign-emblem-url`) draws the emblem beside the
+		 * date line and heading, 52px high (`--cn-header-emblem-size`).
 		 *
 		 * @type {object}
 		 */
@@ -396,13 +414,30 @@ export default {
 		},
 
 		/**
-		 * Today's date written out ("Monday 5 October 2026"), or '' when
-		 * `showDate` is off.
+		 * The kicker line above the heading: `content.kicker` (through the
+		 * host translate function, e.g. "Customer contact") and today's date
+		 * written out ("Monday 5 October 2026") when `showDate` is on, joined
+		 * by " · ". '' when neither is set. Without `kicker` this is the date
+		 * line as before.
 		 *
 		 * @return {string}
 		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
 		 */
 		dateLine() {
+			const kicker = this.content && typeof this.content.kicker === 'string' && this.content.kicker !== ''
+				? this.effectiveTranslate(this.content.kicker)
+				: ''
+			const date = this.dateText
+			return [kicker, date].filter((part) => part !== '').join(' · ')
+		},
+
+		/**
+		 * Today's date written out, or '' when `showDate` is off.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-greeting-kicker-can-carry-a-prefix
+		 * @return {string}
+		 */
+		dateText() {
 			if (!this.content || this.content.showDate !== true) {
 				return ''
 			}
@@ -434,6 +469,21 @@ export default {
 			}
 		},
 
+		/**
+		 * The emblem beside the greeting: the URL `content.emblem` names,
+		 * `true` for the theme's emblem, or null without the key.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-greeting-can-carry-the-emblem
+		 * @return {string|true|null}
+		 */
+		emblem() {
+			const value = this.content && this.content.emblem
+			if (value === true) {
+				return true
+			}
+			return typeof value === 'string' && value !== '' ? resolveImageUrl(value) : null
+		},
+
 		/** Whether a non-empty subtitle is set. */
 		hasSubtitle() {
 			return this.subtitle !== ''
@@ -574,7 +624,12 @@ export default {
 			return this.isLightColor(this.backgroundColor) ? '#000000' : '#ffffff'
 		},
 
-		/** Inline style for the banner wrapper. */
+		/**
+		 * Inline style for the banner wrapper.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-ground-greeting-lines-its-switch-up-with-the-heading
+		 * @return {object}
+		 */
 		wrapperStyle() {
 			const style = {
 				position: 'relative',
@@ -583,7 +638,11 @@ export default {
 				// widget. A fixed pixel height ignored the cell, which made the
 				// banner un-resizable and made it overflow/scroll inside a
 				// smaller cell. The grid controls the size now.
-				height: '100%',
+				// On the page ground there is no banner to fill the cell with:
+				// the greeting takes its own height, so the view switch lines
+				// up with the heading instead of the bottom of a taller cell,
+				// and a size-to-content cell can shrink to it.
+				height: this.isGround ? 'auto' : '100%',
 				overflow: 'hidden',
 				'background-color': this.backgroundColor,
 			}
@@ -619,6 +678,7 @@ export default {
 		 * Inline style for the content flex container.
 		 *
 		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-ground-greeting-lines-its-switch-up-with-the-heading
 		 */
 		contentStyle() {
 			return {
@@ -627,7 +687,7 @@ export default {
 				// Beside a view switch the content shares the row instead of
 				// taking the whole width (see .cn-header-widget--with-views).
 				width: this.viewOptions.length > 0 ? 'auto' : '100%',
-				height: '100%',
+				height: this.isGround ? 'auto' : '100%',
 				display: 'flex',
 				'flex-direction': 'column',
 				'align-items': this.flexAlignFromTextAlign,
@@ -834,6 +894,33 @@ export default {
 	width: auto;
 }
 
+/* The emblem beside the greeting (`content.emblem`): on one row with the
+   date line and heading, centred on them, as LpStart draws it. */
+.cn-header-widget--with-emblem {
+	display: flex;
+	column-gap: var(--cn-header-emblem-gap, 16px);
+}
+
+.cn-header-widget--with-emblem .cn-header-widget__content {
+	flex: 1 1 auto;
+	width: auto;
+	min-width: 0;
+}
+
+.cn-header-widget__emblem {
+	position: relative;
+	z-index: 1;
+	flex: none;
+	align-self: center;
+	height: var(--cn-header-emblem-size, 52px);
+	width: auto;
+}
+
+.cn-header-widget__emblem--theme {
+	width: var(--cn-header-emblem-size, 52px);
+	background: var(--nldesign-emblem-url) center / contain no-repeat;
+}
+
 .cn-header-widget__views {
 	position: relative;
 	z-index: 1;