@conduction/nextcloud-vue 2.78.0 → 2.80.0

package/src/components/CnDetailWidgetHost/CnDetailWidgetHost.vue

@@ -169,10 +169,28 @@
 			:showActions="actionsShown || catalogAddEnabled"
 			:showRefresh="false"
 			:showRequestFeature="false"
+			:headerLink="rendererHeader.link"
 			class="cn-detail-page__catalog-card">
 			<template v-if="widget.icon" #title-icon>
 				<CnIcon :name="widget.icon" :size="20" />
 			</template>
+			<!-- A renderer that reports its own header (`header` event:
+			     `{ link, note }`, e.g. record-list's "3 in totaal"). -->
+			<template v-if="rendererHeader.note || rendererHeader.action" #actions>
+				<span
+					v-if="rendererHeader.note"
+					class="cn-detail-page__catalog-note"
+					data-testid="cn-detail-widget-header-note">{{ rendererHeader.note }}</span>
+				<button
+					v-if="rendererHeader.action"
+					type="button"
+					class="cn-detail-page__catalog-action"
+					data-testid="cn-detail-widget-header-action"
+					@click="rendererHeader.action.run()">
+					<CnIcon v-if="rendererHeader.action.icon" :name="rendererHeader.action.icon" :size="16" />
+					{{ rendererHeader.action.label }}
+				</button>
+			</template>
 			<template v-if="catalogAddEnabled" #action-items>
 				<NcActionButton @click="invokeCatalogAdd">
 					<template #icon>
@@ -185,6 +203,7 @@
 				:is="renderer"
 				ref="renderer"
 				v-bind="rendererProps"
+				@header="onRendererHeader"
 				@selectObject="onSelectObject" />
 		</CnWidgetWrapper>
 
@@ -244,7 +263,9 @@ import CnObjectFilesWidget from '../CnObjectFilesWidget/CnObjectFilesWidget.vue'
 import CnObjectGeoWidget from '../CnObjectGeoWidget/CnObjectGeoWidget.vue'
 import CnRelatedObjectsWidget from '../CnRelatedObjectsWidget/CnRelatedObjectsWidget.vue'
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
+import { normalizeLook } from '../../composables/useLook.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
+import { isActivityWidget } from '../../utils/headerMeta.js'
 import { PANEL_ACTION_SINK } from '../../utils/panelActions.js'
 import {
 	isCardWidgetDef,
@@ -332,6 +353,11 @@ export default {
 			from: PANEL_ACTION_SINK,
 			default: null,
 		},
+
+		/** The app's look, provided by CnAppRoot or CnPageRenderer (`nextcloud` or `board`). */
+		cnLook: { default: 'nextcloud' },
+		/** The host's translate (CnAppRoot provides `cnTranslate`). */
+		cnTranslate: { default: () => (key) => key },
 	},
 
 	/**
@@ -527,6 +553,17 @@ export default {
 		}
 	},
 
+	data() {
+		return {
+			/**
+			 * The card header a content-only renderer reports through its
+			 * `header` event (screens-relation-pages): a link and a note,
+			 * with the list's total already filled in.
+			 */
+			rendererHeader: { link: null, note: '', action: null },
+		}
+	},
+
 	computed: {
 		/**
 		 * Whether the caller owns the title and card.
@@ -780,7 +817,9 @@ export default {
 		integrationProps() {
 			return {
 				surface: this.surface,
-				title: this.widget?.title || '',
+				// Through the host's translate: an integration card (CnDetailCard)
+				// prints its title as given.
+				title: this.translateLabel(this.widget?.title || ''),
 				// A provider opting into `bareWidget` is being rendered where the
 				// tab strip already supplies the card and the title, so tell it to
 				// drop its own. Without this the panel gets a titled card inside
@@ -836,9 +875,46 @@ export default {
 					surface: this.surface,
 				})
 			}
+			// The board look: a self-titled card (an audit trail, a calendar)
+			// takes the manifest title, so the side column's History card says
+			// what the board says instead of the widget's own default.
+			const title = this.cardTitle
+			if (title) {
+				base.title = title
+			}
 			return { ...base, ...this.content }
 		},
 
+		/**
+		 * The title a self-titled renderer gets under the board look: the
+		 * manifest title through the host's translate, else History for the
+		 * activity widget. Empty outside the board look, in a tab panel, and
+		 * when `content.title` already names the card.
+		 *
+		 * @return {string} The title, or ''.
+		 * @spec openspec/changes/screens-detail-labels-parity/specs/detail-labels-board-look/spec.md#requirement-a-side-card-takes-its-manifest-title
+		 */
+		cardTitle() {
+			if (normalizeLook(this.cnLook) !== 'board' || this.isBare || !this.widget || this.isContentOnly || this.isCard) {
+				return ''
+			}
+			// Only a renderer that takes a `title` prop: on any other the value
+			// would land on its root element as a tooltip.
+			const declared = this.renderer && this.renderer.props
+			const takesTitle = Array.isArray(declared) ? declared.includes('title') : Boolean(declared && Object.hasOwn(declared, 'title'))
+			if (!takesTitle) {
+				return ''
+			}
+			if (typeof this.content.title === 'string' && this.content.title !== '') {
+				return ''
+			}
+			const title = widgetTitleOf(this.widget)
+			if (title) {
+				return this.translateLabel(title)
+			}
+			return isActivityWidget(this.widget) ? t('nextcloud-vue', 'History') : ''
+		},
+
 		/**
 		 * Whether the type declares itself a container (registry `container`).
 		 *
@@ -946,6 +1022,33 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Take the header a content-only renderer reports.
+		 *
+		 * @param {{link?: object|null, note?: string, action?: {label: string, icon?: string, run: () => unknown}|null}} header The header parts.
+		 * @spec openspec/changes/screens-relation-pages/specs/relation-pages/spec.md#requirement-a-record-list-shows-the-objects-that-point-at-this-record
+		 */
+		onRendererHeader(header) {
+			const link = header && header.link && typeof header.link === 'object' ? header.link : null
+			const note = header && typeof header.note === 'string' ? header.note : ''
+			const action = header && header.action && typeof header.action.run === 'function' && header.action.label ? header.action : null
+			this.rendererHeader = { link, note, action }
+		},
+
+		/**
+		 * A manifest label through the host's translate; '' stays ''.
+		 *
+		 * @param {string} text The label as written in the manifest.
+		 * @return {string} The label in the user's language.
+		 * @spec openspec/changes/screens-detail-labels-parity/specs/detail-labels-board-look/spec.md#requirement-detail-labels-read-in-the-users-language
+		 */
+		translateLabel(text) {
+			if (typeof text !== 'string' || text === '') {
+				return ''
+			}
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
+		},
+
 		/**
 		 * Re-key a call on the channel this host provides onto the one it holds.
 		 * A widget publishes `set(items)`; a host nested in this one speaks the
@@ -1050,6 +1153,29 @@ export default {
 </script>
 
 <style scoped>
+.cn-detail-page__catalog-action {
+	align-items: center;
+	background: var(--color-primary-element-light);
+	border: 0;
+	border-radius: 16px;
+	color: var(--color-primary-element-light-text, var(--color-primary-element));
+	cursor: pointer;
+	display: inline-flex;
+	font: inherit;
+	font-size: 13px;
+	font-weight: 700;
+	gap: 6px;
+	min-height: 32px;
+	padding: 0 14px;
+	white-space: nowrap;
+}
+
+.cn-detail-page__catalog-note {
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+	white-space: nowrap;
+}
+
 .cn-detail-widget-host,
 .cn-detail-widget-host > * {
 	height: 100%;