@conduction/nextcloud-vue 2.56.0-beta.11 → 2.56.0-beta.13

package/dist/esm/components/CnDetailPage/CnDetailPage.vue2.js

@@ -13,25 +13,28 @@ import InformationOutline from 'vue-material-design-icons/InformationOutline.vue
 import Pencil from 'vue-material-design-icons/Pencil.vue';
 import Plus from 'vue-material-design-icons/Plus.vue';
 import Refresh from 'vue-material-design-icons/Refresh.vue';
-import __sfc_main$g from '../../dialogs/CnRelationLinkModal.vue.js';
-import __sfc_main$f from '../../dialogs/CnWidgetStyleEditorModal.vue.js';
+import ViewDashboardOutline from 'vue-material-design-icons/ViewDashboardOutline.vue';
+import __sfc_main$i from '../../dialogs/CnRelationLinkModal.vue.js';
+import __sfc_main$h from '../../dialogs/CnWidgetStyleEditorModal.vue.js';
 import __sfc_main$1 from '../CnActionsMenu/CnActionsMenu.vue.js';
-import __sfc_main$d from '../CnBodySections/CnBodySections.vue.js';
+import __sfc_main$f from '../CnBodySections/CnBodySections.vue.js';
 import __sfc_main$2 from '../CnBuildiqEditButton/CnBuildiqEditButton.vue.js';
 import __sfc_main$7 from '../CnDashboardGrid/CnDashboardGrid.vue.js';
 import __sfc_main$5 from '../CnDetailWidgetHost/CnDetailWidgetHost.vue.js';
 import __sfc_main$6 from '../CnFormDialog/CnFormDialog.vue.js';
-import __sfc_main$8 from '../CnLifecycleActions/CnLifecycleActions.vue.js';
+import __sfc_main$9 from '../CnLifecycleActions/CnLifecycleActions.vue.js';
 import __sfc_main$3 from '../CnLockedBanner/CnLockedBanner.vue.js';
 import __sfc_main$4 from '../CnNextStepCard/CnNextStepCard.vue.js';
-import __sfc_main$c from '../CnRelatedCollections/CnRelatedCollections.vue.js';
-import __sfc_main$b from '../CnSummaryAggregates/CnSummaryAggregates.vue.js';
-import __sfc_main$e from '../CnTranslatedBadge/CnTranslatedBadge.vue.js';
+import __sfc_main$e from '../CnRelatedCollections/CnRelatedCollections.vue.js';
+import __sfc_main$8 from '../CnSegmentedControl/CnSegmentedControl.vue.js';
+import __sfc_main$d from '../CnSummaryAggregates/CnSummaryAggregates.vue.js';
+import __sfc_main$g from '../CnTranslatedBadge/CnTranslatedBadge.vue.js';
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js';
 import { useObjectLock } from '../../composables/useObjectLock.js';
 import { useObjectPresence } from '../../composables/useObjectPresence.js';
 import { useObjectSubscription } from '../../composables/useObjectSubscription.js';
 import { gridLayout } from '../../mixins/gridLayout.js';
+import { pageViews } from '../../mixins/pageViews.js';
 import { isAppInstalled } from '../../utils/appInstalled.js';
 import { compactLayoutRows } from '../../utils/dashboardPlacement.js';
 import { defaultDetailGrid } from '../../utils/defaultDetailGrid.js';
@@ -39,9 +42,10 @@ import { stageOf, normalisePinnedAction, stageEntry, MAX_QUICK_ACTIONS, groupMen
 import { cnGridCellStyle, hasGridRow } from '../../utils/grid.js';
 import { slotRenders } from '../../utils/slotContent.js';
 import { isDataWidgetDef, isRelatedWidgetDef, isGeoWidgetDef, isContentOnlyWidgetDef, isCardWidgetDef, widgetContentOf, resolveRegistryRenderer, widgetTitleOf } from '../../utils/widgetDispatch.js';
-import __sfc_main$9 from '../CnActionButtons/CnActionButtons.vue.js';
+import __sfc_main$a from '../CnActionButtons/CnActionButtons.vue.js';
+import __sfc_main$b from '../CnBreadcrumbs/CnBreadcrumbs.vue.js';
 import __sfc_main from '../CnIcon/CnIcon.vue.js';
-import __sfc_main$a from '../CnStatusBadge/CnStatusBadge.vue.js';
+import __sfc_main$c from '../CnStatusBadge/CnStatusBadge.vue.js';
 import { getWidgetTypeEntry } from '../CnWidgetGrid/dashboardWidgetRegistry.js';
 import '../CnWidgetGrid/registerDashboardWidgets.js';
 import { useObjectStore } from '../../store/useObjectStore.js';
@@ -185,21 +189,24 @@ var script = {
 		CnDetailWidgetHost: __sfc_main$5,
 		CnFormDialog: __sfc_main$6,
 		CnDashboardGrid: __sfc_main$7,
-		CnLifecycleActions: __sfc_main$8,
-		CnActionButtons: __sfc_main$9,
-		CnStatusBadge: __sfc_main$a,
-		CnSummaryAggregates: __sfc_main$b,
-		CnRelatedCollections: __sfc_main$c,
-		CnBodySections: __sfc_main$d,
-		CnTranslatedBadge: __sfc_main$e,
-		CnWidgetStyleEditorModal: __sfc_main$f,
-		CnRelationLinkModal: __sfc_main$g,
+		CnSegmentedControl: __sfc_main$8,
+		ViewDashboardOutline,
+		CnLifecycleActions: __sfc_main$9,
+		CnActionButtons: __sfc_main$a,
+		CnBreadcrumbs: __sfc_main$b,
+		CnStatusBadge: __sfc_main$c,
+		CnSummaryAggregates: __sfc_main$d,
+		CnRelatedCollections: __sfc_main$e,
+		CnBodySections: __sfc_main$f,
+		CnTranslatedBadge: __sfc_main$g,
+		CnWidgetStyleEditorModal: __sfc_main$h,
+		CnRelationLinkModal: __sfc_main$i,
 		Cog,
 		Plus,
 		Pencil,
 	},
 
-	mixins: [gridLayout],
+	mixins: [gridLayout, pageViews],
 
 	inject: {
 		/**
@@ -1093,6 +1100,37 @@ var script = {
 			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 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
+		 * 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}
+		 */
+		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
@@ -1108,6 +1146,33 @@ var script = {
 			default: () => [],
 		},
 
+		/**
+		 * Draw the header as a card (manifest `config.headerCard: true`): the
+		 * pills, the title and the actions on the page's surface colour inside
+		 * a bordered, rounded box, as the board's case header. Off by default,
+		 * which keeps the header on the page ground.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-detail-header-can-be-a-card-that-holds-a-widget
+		 */
+		headerCard: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * The id of a widget declared in `widgets` to render inside the header,
+		 * on its own row under the title and the actions (manifest
+		 * `config.headerWidget`), e.g. the stages bars. It renders without a
+		 * card of its own and leaves the body grid. Empty (the default), or an
+		 * id that names no widget, renders nothing extra.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-detail-header-can-be-a-card-that-holds-a-widget
+		 */
+		headerWidget: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Whether the current user administers this instance. Shows the
 		 * `adminOnly` header actions. `null` (the default) reads it from
@@ -1647,6 +1712,21 @@ var script = {
 				.filter(Boolean)
 		},
 
+		/**
+		 * The widget the header holds (`headerWidget`): the definition in
+		 * `widgets` with that id, or null without the key or a match.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-detail-header-can-be-a-card-that-holds-a-widget
+		 * @return {object|null} The widget definition, or null.
+		 */
+		headerWidgetDef() {
+			if (!this.headerWidget) {
+				return null
+			}
+			const declared = Array.isArray(this.widgets) ? this.widgets : [];
+			return declared.find((widget) => widget && widget.id === this.headerWidget) || null
+		},
+
 		/**
 		 * The side column's widget definitions. A string names a widget
 		 * declared in `widgets`; an object is a definition of its own.
@@ -2216,6 +2296,33 @@ var script = {
 			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. The first
+		 * crumb carries `icon` only when the manifest declares one.
+		 *
+		 * @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
+		 * @return {Array<{label: string, to?: object, href?: string, icon?: string}>}
+		 */
+		breadcrumbCrumbs() {
+			const crumb = this.breadcrumb;
+			if (!crumb || typeof crumb.label !== 'string' || crumb.label === '') {
+				return []
+			}
+			const first = { label: this.effectiveTranslate(crumb.label) };
+			if (typeof crumb.icon === 'string' && crumb.icon !== '') {
+				first.icon = crumb.icon;
+			}
+			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.
@@ -2319,6 +2426,7 @@ var script = {
 				&& this.currentObject
 				&& !this.hasDefaultSlotContent
 				&& !this.hasGridLayout
+				&& !this.hasViews
 		},
 
 		/**
@@ -2398,6 +2506,55 @@ var script = {
 			return this.bodyGridLayout.length > 0
 		},
 
+		/**
+		 * The chosen view's layout as the grid draws it: items that draw
+		 * nothing leave and their rows close, as for the body grid.
+		 *
+		 * @return {Array<object>}
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-view-with-nothing-to-draw-says-so
+		 */
+		viewDisplayLayout() {
+			// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- reading the flag IS the effect, as in bodyGridLayout
+			this.editingBody;
+			return this.activeView ? this.closeDroppedRows(this.activeView.layout) : []
+		},
+
+		/**
+		 * Whether the chosen view has nothing to draw.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-view-with-nothing-to-draw-says-so
+		 */
+		viewIsEmpty() {
+			return this.hasViews && this.viewDisplayLayout.length === 0
+		},
+
+		/**
+		 * The grids the body draws: the body grid when it has items, then the
+		 * chosen view's grid in the region the view switch controls (left out
+		 * when the view is empty; the empty state takes the region then).
+		 *
+		 * @return {Array<{key: string, view: boolean, layout: Array<object>, attrs: object}>}
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-page-declares-views-that-each-hold-a-widget-grid
+		 */
+		bodyGridSections() {
+			const sections = this.hasBodyGrid ? [{ key: 'body', view: false, layout: this.bodyGridLayout, attrs: {} }] : [];
+			if (this.hasViews && !this.viewIsEmpty) {
+				sections.push({
+					key: `view-${this.activeViewId}`,
+					view: true,
+					layout: this.viewDisplayLayout,
+					attrs: {
+						id: this.viewRegionId,
+						role: 'region',
+						'aria-label': this.activeView.label,
+						'data-testid': 'cn-detail-page-view-region',
+					},
+				});
+			}
+			return sections
+		},
+
 		/**
 		 * Whether the sidebar is rendered externally (via objectSidebarState inject)
 		 * rather than inline. When external, CnDetailPage only manages state —
@@ -3619,6 +3776,8 @@ var script = {
 		 */
 		findWidget(item) {
 			return this.bodyGridWidgets.find((w) => w.id === item.widgetId)
+				|| this.findViewWidget(item.widgetId)
+				|| undefined
 		},
 
 		/**
@@ -3667,6 +3826,10 @@ var script = {
 		 * it — CnPageRenderer's split pane forwards no slots, which is exactly
 		 * that fault and wants fixing, not concealing.
 		 *
+		 * The widget the header holds (`headerWidget`) draws nothing here
+		 * either: it is already drawn in the header.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-detail-header-can-be-a-card-that-holds-a-widget
 		 * @param {object} item A layout item.
 		 * @return {boolean} False only when the item provably draws nothing.
 		 */
@@ -3677,6 +3840,11 @@ var script = {
 			if (this.editingBody) {
 				return true
 			}
+			// The widget the header holds (`headerWidget`) is drawn there, so
+			// its grid cell would be the same widget twice.
+			if (this.headerWidgetDef !== null && item.widgetId === this.headerWidgetDef.id) {
+				return false
+			}
 			const widget = this.findWidget(item);
 			if (!widget) {
 				return true