@conduction/nextcloud-vue 2.111.0 → 2.113.0

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -104,7 +104,11 @@
 								:colorKey="pill.colorKey"
 								:colorMap="pill.colorMap"
 								:variant="pill.variant"
-								:data-testid="`cn-detail-page-pill-${pill.key}`" />
+								:data-testid="`cn-detail-page-pill-${pill.key}`">
+								<template v-if="pill.icon" #icon>
+									<CnIcon :name="pill.icon" :size="14" class="cn-detail-page__pill-icon" />
+								</template>
+							</CnStatusBadge>
 						</div>
 						<!-- Type name as a small eyebrow above the record name, so
 						     the header reads "the record" not "the kind of record"
@@ -485,7 +489,11 @@
 						:colorKey="pill.colorKey"
 						:colorMap="pill.colorMap"
 						:variant="pill.variant"
-						:data-testid="`cn-detail-page-pill-${pill.key}`" />
+						:data-testid="`cn-detail-page-pill-${pill.key}`">
+						<template v-if="pill.icon" #icon>
+							<CnIcon :name="pill.icon" :size="14" class="cn-detail-page__pill-icon" />
+						</template>
+					</CnStatusBadge>
 				</div>
 				<CnBreadcrumbs
 					v-if="breadcrumbCrumbs.length > 0"
@@ -1249,6 +1257,7 @@ import { createRefLabelResolver } from '../../composables/useRefLabels.js'
 import { gridLayout } from '../../mixins/gridLayout.js'
 import { pageViews } from '../../mixins/pageViews.js'
 import { useObjectStore } from '../../store/index.js'
+import { headerActionAsLink } from '../../utils/actionLink.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
 import { compactLayoutRows } from '../../utils/dashboardPlacement.js'
 import { defaultDetailGrid } from '../../utils/defaultDetailGrid.js'
@@ -1257,6 +1266,7 @@ import {
 	MAX_QUICK_ACTIONS,
 	normalisePinnedAction,
 	pillCountSource,
+	pillLook,
 	resolveCountPill,
 	resolveNextStep,
 	resolvePill,
@@ -2210,6 +2220,11 @@ export default {
 		 * `@objectId` / `@object.<field>` token + local-predicate resolution.
 		 * Empty (the default) renders nothing.
 		 *
+		 * An entry with `href` is a link, never dispatched: an absolute
+		 * `http(s)`, `mailto:`, `tel:` or `//host/...` URL as written, or an instance path
+		 * (leading `/`) through `generateUrl()`, opening in place unless
+		 * `target` is `'_blank'`.
+		 *
 		 * The menu, not a row of buttons: that is what the manifest schema has
 		 * always said this key is, and what CnIndexPage already does with it.
 		 * The two surfaces had drifted, and on a dossiq case — twelve actions —
@@ -2497,9 +2512,12 @@ export default {
 		 * `field`: `text`, a constant ("Inwoner"), or `countFrom`
 		 * (`{ register, schema, filter? }`) with `countLabel` (`{ one, other }`
 		 * with `{count}`), a count of a related list ("1 lopende zaak") that
-		 * shows nothing at 0.
+		 * shows nothing at 0. With `resolve: { register, schema, labelField?,
+		 * colorField?, iconField? }` the pill shows the referenced record's
+		 * label, takes its tone from that record's colour (an NL Design System
+		 * hue such as `red`, or a badge role) and shows its icon.
 		 *
-		 * @type {{field?: string, text?: string, countFrom?: object, countLabel?: object, colorMap?: object, labels?: object, variant?: string}|null}
+		 * @type {{field?: string, text?: string, countFrom?: object, countLabel?: object, colorMap?: object, labels?: object, variant?: string, resolve?: object}|null}
 		 */
 		typePill: {
 			type: Object,
@@ -2940,6 +2958,8 @@ export default {
 			pillCountSeq: 0,
 			/** The labels of the records pills with `resolve` point at, by pill key. */
 			pillRefLabels: {},
+			/** The colour and icon names read off the records pills with `resolve` point at, by pill key. */
+			pillRefLooks: {},
 			/** Sequence of the last pill label lookup, so a late answer for another record is dropped. */
 			pillRefSeq: 0,
 			/** `register/schema/id` the read-state call was last made for, so it is sent once per load. */
@@ -3488,10 +3508,11 @@ export default {
 					// `resolve`: the referenced record's label replaces the id, and
 					// keys the colour too ("Woo-verzoek", not a uuid).
 					const resolved = this.pillRefLabels[key]
+					const look = pillLook(this.pillRefLooks[key])
 					if (typeof resolved === 'string' && resolved !== '') {
-						return { ...pill, key, label: this.effectiveTranslate(resolved), colorKey: resolved }
+						return { ...pill, ...look, key, label: this.effectiveTranslate(resolved), colorKey: resolved }
 					}
-					return { ...pill, key, label: this.effectiveTranslate(pill.label) }
+					return { ...pill, ...look, key, label: this.effectiveTranslate(pill.label) }
 				})
 				.filter(Boolean)
 		},
@@ -3526,7 +3547,8 @@ export default {
 				.filter(([, config]) => config && config.resolve && config.resolve.register && config.resolve.schema && typeof config.field === 'string')
 				.map(([key, config]) => {
 					const pill = resolvePill({ field: config.field }, this.resolvedObject)
-					return pill ? [key, config.resolve.register, config.resolve.schema, config.resolve.labelField || '', pill.colorKey] : null
+					const { register, schema, labelField, colorField, iconField } = config.resolve
+					return pill ? [key, register, schema, labelField || '', pill.colorKey, colorField || '', iconField || ''] : null
 				})
 				.filter(Boolean)
 		},
@@ -3925,6 +3947,7 @@ export default {
 		 * in. Edit goes LAST so it reads after the app's own actions in the
 		 * Actions menu — the page's affordance yields to the app's.
 		 *
+		 * @spec openspec/changes/header-action-href/specs/header-action-href/spec.md#requirement-a-header-action-with-href-is-a-link-that-runs-and-emits-nothing
 		 * @return {Array<object>} The action descriptors.
 		 */
 		effectiveHeaderActions() {
@@ -3933,12 +3956,16 @@ export default {
 			// written out in place) join the list CnActionButtons dispatches,
 			// so they get the same dialogs, toasts and `visibleWhen` gating as
 			// any header action. An id that is already declared is not added
-			// twice. With nothing pinned inline this is `headerActions` itself.
+			// twice. With nothing pinned inline and no `href` entry this is
+			// `headerActions` itself.
 			const known = new Set(authored.map((action) => action && action.id))
 			const inline = [this.stagePrimary, ...this.pinnedQuickActions]
 				.filter((pinned) => pinned && pinned.inline && !known.has(pinned.id))
 				.map((pinned) => pinned.inline)
-			const declared = inline.length > 0 ? [...authored, ...inline] : authored
+			const combined = inline.length > 0 ? [...authored, ...inline] : authored
+			// An entry (or child) with `href` becomes a link CnActionButtons renders as an anchor.
+			const linked = combined.map(headerActionAsLink)
+			const declared = linked.some((action, index) => action !== combined[index]) ? linked : combined
 			if (!(this.foldsEditIntoActions && this.canEditRecord)) {
 				return declared
 			}
@@ -5182,12 +5209,13 @@ export default {
 		 *
 		 * A stage's action is dispatched the way a header action is, through
 		 * the `run()` CnActionButtons bound for it, and announced to the host
-		 * with its declaration. A link action is left to the browser. Without
-		 * a stage action this is the page's `primaryAction`, announced as
-		 * before.
+		 * with its declaration. A link action is left to the browser and
+		 * announces nothing. Without a stage action this is the page's
+		 * `primaryAction`, announced as before.
 		 *
 		 * @return {void}
 		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-primary-action-follows-the-stage
+		 * @spec openspec/changes/header-action-href/specs/header-action-href/spec.md#requirement-a-header-action-with-href-is-a-link-that-runs-and-emits-nothing
 		 */
 		onPrimaryActionClick() {
 			const entry = this.stagePrimaryEntry
@@ -5195,6 +5223,9 @@ export default {
 				this.$emit('primary-action', this.primaryAction)
 				return
 			}
+			if (entry.href) {
+				return
+			}
 			this.$emit('primary-action', this.headerActionsById[entry.id] || { id: entry.id, label: entry.label })
 			this.onPinnedActionClick(entry)
 		},
@@ -5340,6 +5371,7 @@ export default {
 			const seq = ++this.pillRefSeq
 			if (targets.length === 0) {
 				this.pillRefLabels = {}
+				this.pillRefLooks = {}
 				return
 			}
 			if (!this._pillRefResolver) {
@@ -5352,14 +5384,30 @@ export default {
 				})
 			}
 			const labels = {}
-			await Promise.all(targets.map(async ([key, register, schema, labelField, id]) => {
-				const found = await this._pillRefResolver.resolve(register, schema, [id], labelField).catch(() => ({}))
+			const looks = {}
+			const field = async (register, schema, id, name) => {
+				if (!name) {
+					return null
+				}
+				const found = await this._pillRefResolver.resolve(register, schema, [id], name, { strict: true }).catch(() => ({}))
+				return found && typeof found[id] === 'string' ? found[id] : null
+			}
+			await Promise.all(targets.map(async ([key, register, schema, labelField, id, colorField, iconField]) => {
+				const [found, color, icon] = await Promise.all([
+					this._pillRefResolver.resolve(register, schema, [id], labelField).catch(() => ({})),
+					field(register, schema, id, colorField),
+					field(register, schema, id, iconField),
+				])
 				if (found && typeof found[id] === 'string') {
 					labels[key] = found[id]
 				}
+				if (color || icon) {
+					looks[key] = { color, icon }
+				}
 			}))
 			if (seq === this.pillRefSeq) {
 				this.pillRefLabels = labels
+				this.pillRefLooks = looks
 			}
 		},
 

package/src/components/CnDetailWidgetHost/CnDetailWidgetHost.vue

@@ -147,6 +147,39 @@
 			hidden
 			data-testid="cn-detail-widget-props-pending" />
 
+		<!-- A mount-mode leaf whose descriptor asks for the library card
+		     (`chrome: "card"`): the host draws the card, its title with the
+		     count the leaf reports, the leaf's actions in the title row and the
+		     library empty state. The leaf reports them through the `onHeader`
+		     mount prop and renders only its rows. -->
+		<CnWidgetWrapper
+			v-else-if="wrapsMountLeaf"
+			:title="leafCardTitle"
+			titleIconPosition="left"
+			:showActions="false"
+			:showRefresh="false"
+			:showRequestFeature="false"
+			:headerLink="cardHeaderLink"
+			class="cn-detail-page__leaf-card"
+			data-testid="cn-detail-widget-leaf-card">
+			<template v-if="leafCardIcon" #title-icon>
+				<CnIcon :name="leafCardIcon" :size="20" />
+			</template>
+			<template v-if="rendererHeader.count !== null" #title-meta>
+				<span class="cn-detail-page__catalog-count" data-testid="cn-detail-widget-header-count">{{ rendererHeader.count }}</span>
+			</template>
+			<template v-if="hasRendererHeaderItems" #actions>
+				<CnDetailWidgetHeaderItems :header="rendererHeader" />
+			</template>
+			<CnWidgetEmptyState
+				v-if="rendererHeader.empty"
+				:name="rendererHeader.empty.name"
+				:description="rendererHeader.empty.description" />
+			<CnLeafMountHost
+				:provider="integrationProvider"
+				:mountProps="integrationMountProps" />
+		</CnWidgetWrapper>
+
 		<CnLeafMountHost
 			v-else-if="isMountIntegration"
 			:provider="integrationProvider"
@@ -293,6 +326,7 @@ import CnObjectDataWidget from '../CnObjectDataWidget/CnObjectDataWidget.vue'
 import CnObjectFilesWidget from '../CnObjectFilesWidget/CnObjectFilesWidget.vue'
 import CnObjectGeoWidget from '../CnObjectGeoWidget/CnObjectGeoWidget.vue'
 import CnRelatedObjectsWidget from '../CnRelatedObjectsWidget/CnRelatedObjectsWidget.vue'
+import CnWidgetEmptyState from '../CnWidgetEmptyState/CnWidgetEmptyState.vue'
 import CnDetailWidgetHeaderItems from './CnDetailWidgetHeaderItems.vue'
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
 import { normalizeLook } from '../../composables/useLook.js'
@@ -373,6 +407,7 @@ export default {
 		CnObjectDataWidget,
 		CnObjectGeoWidget,
 		CnRelatedObjectsWidget,
+		CnWidgetEmptyState,
 		CnWidgetWrapper,
 		NcActionButton,
 		CnEmptyContent,
@@ -628,7 +663,7 @@ export default {
 			 * `header` event (screens-relation-pages): a link and a note,
 			 * with the list's total already filled in.
 			 */
-			rendererHeader: { link: null, note: '', actions: [], pill: null },
+			rendererHeader: { link: null, note: '', actions: [], pill: null, count: null, empty: null },
 		}
 	},
 
@@ -844,6 +879,34 @@ export default {
 				&& typeof provider.unmount === 'function'
 		},
 
+		/**
+		 * Whether a mount-mode leaf gets the library card: on a card surface,
+		 * grid cell included, when its descriptor asks for it (`chrome:
+		 * "card"`). Opt-in, because a leaf that draws its own card would
+		 * otherwise sit in two.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/integration-leaf-card/specs/integration-leaf-card/spec.md#requirement-a-mount-mode-leaf-can-take-the-library-card
+		 */
+		wrapsMountLeaf() {
+			return !this.isBare && this.isMountIntegration && this.integrationProvider.chrome === 'card'
+		},
+
+		/**
+		 * The leaf card's title: the manifest's, else the descriptor's label.
+		 *
+		 * @return {string} The title in the user's language.
+		 */
+		leafCardTitle() {
+			const title = widgetTitleOf(this.widget)
+			return title ? this.translateLabel(title) : (this.integrationProvider?.label || '')
+		},
+
+		/** @return {string} The leaf card's icon: the manifest's, else the descriptor's. */
+		leafCardIcon() {
+			return this.widget?.icon || this.integrationProvider?.icon || ''
+		},
+
 		/**
 		 * Whether this render is using a provider's widget as its bare surface.
 		 *
@@ -1017,6 +1080,8 @@ export default {
 				// one that reads `objectId`.
 				integrationContext: this.widgetIntegrationContext,
 				...this.resolvedWidgetProps,
+				// A carded leaf reports its title row and empty state here.
+				...(this.wrapsMountLeaf ? { onHeader: this.onRendererHeader } : {}),
 			}
 		},
 
@@ -1221,11 +1286,12 @@ export default {
 
 	methods: {
 		/**
-		 * Take the header a content-only renderer, or an app widget in the
-		 * titled card, reports.
+		 * Take the header a content-only renderer, an app widget in the
+		 * titled card, or a carded mount-mode leaf (`onHeader`) reports.
 		 *
-		 * @param {{link?: object|null, note?: string, action?: {label: string, icon?: string, run: () => unknown}|null, actions?: Array<{label: string, icon?: string, run: () => unknown}>}} header The header parts.
+		 * @param {{link?: object|null, note?: string, action?: {label: string, icon?: string, run: () => unknown}|null, actions?: Array<{label: string, icon?: string, run: () => unknown}>, count?: number, empty?: {name: string, description?: string}|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
+		 * @spec openspec/changes/integration-leaf-card/specs/integration-leaf-card/spec.md#requirement-a-carded-leaf-reports-its-count-actions-and-empty-state
 		 */
 		onRendererHeader(header) {
 			const link = header && header.link && typeof header.link === 'object' ? header.link : null
@@ -1234,7 +1300,11 @@ export default {
 			// `action` (one) and `actions` (several) both count, `action` first.
 			const actions = [header && header.action, ...((header && Array.isArray(header.actions)) ? header.actions : [])].filter(usable)
 			const pill = header && header.pill && typeof header.pill.label === 'string' && header.pill.label !== '' ? header.pill : null
-			this.rendererHeader = { link, note, actions, pill }
+			const count = header && Number.isFinite(header.count) ? header.count : null
+			const empty = header && header.empty && typeof header.empty.name === 'string' && header.empty.name !== ''
+				? { name: header.empty.name, description: typeof header.empty.description === 'string' ? header.empty.description : '' }
+				: null
+			this.rendererHeader = { link, note, actions, pill, count, empty }
 		},
 
 		/**
@@ -1372,6 +1442,31 @@ export default {
 	white-space: nowrap;
 }
 
+/* A leaf card in a narrow cell keeps its title and count: the title row
+   wraps and the actions move under it instead of squeezing the title out. */
+.cn-detail-page__leaf-card :deep(.cn-widget-wrapper__header) {
+	flex-wrap: wrap;
+}
+
+.cn-detail-page__leaf-card :deep(.cn-widget-wrapper__header-left) {
+	flex: 1 0 auto;
+}
+
+/* The count beside a card title: the grey 20px badge of the tab strip. */
+.cn-detail-page__catalog-count {
+	background-color: var(--color-border);
+	border-radius: 10px;
+	box-sizing: border-box;
+	color: var(--color-main-text);
+	display: inline-block;
+	font-size: 12px;
+	font-weight: 600;
+	line-height: 20px;
+	min-width: 20px;
+	padding: 0 6px;
+	text-align: center;
+}
+
 .cn-detail-page__catalog-note {
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;

package/src/components/CnFormDialog/CnFormDialog.vue

@@ -2,7 +2,7 @@
 	<CnDialog
 		:look="look"
 		:width="width"
-		defaultWidth="form"
+		:defaultWidth="columns === 2 ? 'wizard' : 'form'"
 		:eyebrow="eyebrow"
 		:subtitle="subtitle"
 		:name="resolvedTitle"