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

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -32,6 +32,18 @@
 				</p>
 			</div>
 			<div class="cn-dashboard-page__header-actions">
+				<!-- The page's view switch (`views`), unless a greeting header
+				     widget on the page draws it. Its options control the view
+				     region below the grid. -->
+				<CnSegmentedControl
+					v-if="showsPageViewSwitch"
+					class="cn-page-view-switch"
+					:options="viewSwitchOptions"
+					:modelValue="activeViewId"
+					:ariaLabel="viewSwitchLabel"
+					:controls="viewRegionId"
+					data-testid="cn-dashboard-page-view-switch"
+					@update:modelValue="selectView" />
 				<!-- Declarative header actions (#91 Wave 3): a manifest
 				     `headerActions[]` renders as buttons (open-form / api-call /
 				     toggle / navigate / refresh) with visibleWhen gating,
@@ -218,7 +230,7 @@
 		     sections (before-grid / after-grid / end): a page can legitimately
 		     have no grid widgets yet still show bodyWidget content, so
 		     "No widgets configured" would be a false negative. -->
-		<div v-else-if="!hasWidgets && !hasBodyWidgets" class="cn-dashboard-page__empty">
+		<div v-else-if="!hasWidgets && !hasBodyWidgets && !hasViews" class="cn-dashboard-page__empty">
 			<!-- @slot empty Replaces the default empty state shown when the dashboard has no widgets. Defaults to an `NcEmptyContent` block. -->
 			<slot name="empty">
 				<NcEmptyContent :description="emptyLabel">
@@ -253,15 +265,34 @@
 		     to the layout/widgets arrays — in-place pushes (Add widget) keep
 		     the same array identity and can't re-render it. One remount per
 		     edit flip re-subscribes against the now-reactive graph. -->
+		<!-- The view switch for a page without a header row, when no greeting
+		     header widget draws it. -->
+		<div
+			v-if="gridSectionsShown && !showHeader && showsPageViewSwitch"
+			class="cn-dashboard-page__view-switch">
+			<CnSegmentedControl
+				class="cn-page-view-switch"
+				:options="viewSwitchOptions"
+				:modelValue="activeViewId"
+				:ariaLabel="viewSwitchLabel"
+				:controls="viewRegionId"
+				data-testid="cn-dashboard-page-view-switch"
+				@update:modelValue="selectView" />
+		</div>
+		<!-- One grid per section: the page's own layout, then the chosen
+		     view (`views`) in a region the view switch controls. Both are the
+		     same grid with the same widget rendering below. A view grid is
+		     keyed on its view, so switching mounts the other view's grid. -->
 		<CnDashboardGrid
-			v-else
-			:key="`cn-dashboard-grid-${gridEditable ? 'editing' : 'live'}`"
-			:layout="displayLayout"
-			:editable="gridEditable"
+			v-for="section in gridSections"
+			:key="`cn-dashboard-grid-${section.key}-${gridEditable ? 'editing' : 'live'}`"
+			v-bind="section.attrs"
+			:layout="section.layout"
+			:editable="section.editable"
 			:columns="columns"
 			:cellHeight="cellHeight"
 			:margin="gridMargin"
-			@layoutChange="onLayoutChange">
+			@layoutChange="section.view ? onViewLayoutChange($event) : onLayoutChange($event)">
 			<template #widget="{ item }">
 				<!-- In-app edit overlay (ADR-041): a single launchpad-style
 				     configure cog opens the per-widget style/config editor,
@@ -404,6 +435,7 @@
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
+						:showActions="widgetShowActions(item)"
 						:borderless="widgetBorderless(item)"
 						:flush="item.flush !== false"
 						:buttons="getWidgetButtons(item)"
@@ -508,6 +540,7 @@
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
+						:showActions="widgetShowActions(item)"
 						:borderless="widgetBorderless(item)"
 						:flush="item.flush !== false"
 						:buttons="getWidgetButtons(item)"
@@ -546,6 +579,7 @@
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
+						:showActions="widgetShowActions(item)"
 						:buttons="getWidgetButtons(item)"
 						:headerLink="getWidgetHeaderLink(item)"
 						:styleConfig="item.styleConfig || {}"
@@ -652,6 +686,22 @@
 			</template>
 		</CnDashboardGrid>
 
+		<!-- The chosen view has nothing to draw: say so in the region, never
+		     leave a blank area under the switch. -->
+		<div
+			v-if="gridSectionsShown && viewIsEmpty"
+			:id="viewRegionId"
+			role="region"
+			:aria-label="activeView ? activeView.label : null"
+			class="cn-page-view-region cn-page-view-region--empty"
+			data-testid="cn-dashboard-page-view-empty">
+			<NcEmptyContent :description="viewEmptyText">
+				<template #icon>
+					<ViewDashboardOutline :size="48" />
+				</template>
+			</NcEmptyContent>
+		</div>
+
 		<!-- Declarative in-body sections, `placement: "after-grid"` — host-app
 		     section components rendered BELOW the widget grid. -->
 		<CnBodySections
@@ -711,6 +761,7 @@ import CnBuildiqEditButton from '../CnBuildiqEditButton/CnBuildiqEditButton.vue'
 import CnChartWidget from '../CnChartWidget/CnChartWidget.vue'
 import CnDashboardGrid from '../CnDashboardGrid/CnDashboardGrid.vue'
 import CnDateRangePicker, { DEFAULT_DATE_RANGE_PRESETS, resolvePresetWindow } from '../CnDateRangePicker/CnDateRangePicker.vue'
+import CnSegmentedControl from '../CnSegmentedControl/CnSegmentedControl.vue'
 import CnStatsBlockWidget from '../CnStatsBlockWidget/CnStatsBlockWidget.vue'
 import CnTileWidget from '../CnTileWidget/CnTileWidget.vue'
 import CnWidgetRefItem from '../CnWidgetRefItem/CnWidgetRefItem.vue'
@@ -718,6 +769,7 @@ import CnWidgetRenderer from '../CnWidgetRenderer/CnWidgetRenderer.vue'
 import CnWidgetWrapper from '../CnWidgetWrapper/CnWidgetWrapper.vue'
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
 import { readUserPreference, writeUserPreference } from '../../composables/useUserPreferences.js'
+import { pageViews } from '../../mixins/pageViews.js'
 import { dashboardLayoutKey, mergeUserLayout } from '../../store/plugins/dashboardLayouts.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
 import { compareVisibleWhen, readVisibleWhenValue } from '../../utils/visibleWhen.js'
@@ -872,8 +924,11 @@ export default {
 		CnBuildiqEditButton,
 		CnWidgetStyleEditorModal,
 		CnLeafMountHost,
+		CnSegmentedControl,
 	},
 
+	mixins: [pageViews],
+
 	inject: {
 		/**
 		 * Buildiq in-app edit state (ADR-041), provided by CnAppRoot as a ref.
@@ -946,6 +1001,21 @@ export default {
 			default: true,
 		},
 
+		/**
+		 * Whether a widget draws its overflow Actions menu when neither its
+		 * placement nor its definition says (`showActions`). `false` (manifest
+		 * `config.showWidgetActions: false`) drops the menu from every such
+		 * widget, for a dashboard whose widgets carry a header link and
+		 * nothing else. A widget that sets `showActions: true` keeps its menu.
+		 * Card widgets have no menu either way.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-dashboard-can-drop-the-widget-actions-menu
+		 */
+		showWidgetActions: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * Widget definitions array. Each widget defines metadata for rendering.
 		 *
@@ -1861,6 +1931,89 @@ export default {
 			return this.layout.length > 0 || this.widgetRefItems.length > 0
 		},
 
+		/**
+		 * Whether the grid sections render at all: not while loading, not
+		 * while the widget predicates settle, not on the empty page and not
+		 * on a widget-ref content page.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-page-declares-views-that-each-hold-a-widget-grid
+		 */
+		gridSectionsShown() {
+			if (this.loading || (!this.widgetConditionsSettled && !this.gridEditable)) {
+				return false
+			}
+			if (!this.hasWidgets && !this.hasBodyWidgets && !this.hasViews) {
+				return false
+			}
+			return this.widgetRefItems.length === 0
+		},
+
+		/**
+		 * The chosen view's layout as the grid draws it: in live mode the
+		 * widgets that would draw nothing leave and the rest close up, as
+		 * for the page's own layout.
+		 *
+		 * @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() {
+			const items = this.activeView ? this.activeView.layout : []
+			if (this.gridEditable) {
+				return items
+			}
+			const visible = items.filter((item) => !this.isCollapsedWidget(item))
+			return visible.length === items.length ? items : this.compactDisplayLayout(visible)
+		},
+
+		/**
+		 * 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 this page draws. Without views: the page's own layout,
+		 * as it always was. With views: the page's own layout when it has
+		 * items, then the chosen view's layout in the region the 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>, editable: boolean, 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
+		 */
+		gridSections() {
+			if (!this.gridSectionsShown) {
+				return []
+			}
+			const page = { key: 'page', view: false, layout: this.displayLayout, editable: this.gridEditable, attrs: {} }
+			if (!this.hasViews) {
+				return [page]
+			}
+			const sections = this.displayLayout.length > 0 ? [page] : []
+			if (!this.viewIsEmpty) {
+				sections.push({
+					key: `view-${this.activeViewId}`,
+					view: true,
+					layout: this.viewDisplayLayout,
+					// A user arrangement covers the page's own layout only.
+					editable: this.gridEditable && !this.userLayout,
+					attrs: {
+						id: this.viewRegionId,
+						role: 'region',
+						'aria-label': this.activeView.label,
+						class: 'cn-page-view-region',
+						'data-testid': 'cn-dashboard-page-view-region',
+					},
+				})
+			}
+			return sections
+		},
+
 		/**
 		 * The widget settings object handed to CnWidgetStyleEditorModal,
 		 * built from the widget definition currently being configured
@@ -1991,6 +2144,14 @@ export default {
 				this.evaluateWidgetConditions()
 			},
 		},
+
+		/** A view's widgets carry predicates too. */
+		views: {
+			deep: true,
+			handler() {
+				this.evaluateWidgetConditions()
+			},
+		},
 	},
 
 	created() {
@@ -2855,7 +3016,8 @@ export default {
 		 * @spec openspec/changes/live-check-follow-ups/specs/live-check-follow-ups/spec.md#requirement-an-attention-card-says-when-it-could-not-check
 		 */
 		async evaluateWidgetConditions() {
-			const conditional = (this.widgets || []).filter((def) => def && def.id && def.type
+			const defs = [...(this.widgets || []), ...this.normalizedViews.flatMap((view) => view.widgets)]
+			const conditional = defs.filter((def) => def && def.id && def.type
 				&& this.widgetDisplayConfig(def).visibleWhen)
 			// Skip when the CONDITIONAL SET is unchanged: the deep `widgets`
 			// watch fires on any def edit, but only an added/removed/edited
@@ -2989,7 +3151,7 @@ export default {
 		 */
 		getWidgetDef(widgetId) {
 			const list = Array.isArray(this.widgets) ? this.widgets : []
-			return list.find((w) => w && w.id === widgetId) || null
+			return list.find((w) => w && w.id === widgetId) || this.findViewWidget(widgetId)
 		},
 
 		/**
@@ -3380,11 +3542,20 @@ export default {
 		 * exactly that reason; there is now one rule for every family, so a
 		 * custom slot and a registered widget cannot disagree about it.
 		 *
+		 * A greeting header that declares `content.ground: true` sits on the
+		 * page ground, so it asks for no card either: one key on the widget
+		 * instead of a second one on its placement.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-greeting-can-sit-on-the-page-ground
 		 * @param {object} item the layout placement.
 		 * @return {boolean}
 		 */
 		widgetBorderless(item) {
-			return item.borderless === true
+			if (item.borderless === true) {
+				return true
+			}
+			const def = this.getWidgetDef(item.widgetId)
+			return Boolean(def && def.type === 'header' && this.getWidgetContent(item).ground === true)
 		},
 
 		/**
@@ -3401,7 +3572,7 @@ export default {
 			const def = this.getWidgetDef(item.widgetId)
 			const value = item.showActions !== undefined ? item.showActions : def?.showActions
 			if (value === undefined || value === null) {
-				return !this.isCardWidget(item)
+				return this.showWidgetActions && !this.isCardWidget(item)
 			}
 			return value !== false
 		},
@@ -3994,6 +4165,19 @@ export default {
 	padding: 60px 20px;
 }
 
+/* The page's view switch on a page without a header row: at the end of its
+   own row, above the grids, where the header would have put it. */
+.cn-dashboard-page__view-switch {
+	display: flex;
+	justify-content: flex-end;
+	margin-bottom: 12px;
+}
+
+/* A view the switch shows with nothing to draw. */
+.cn-page-view-region--empty {
+	padding: 40px 20px;
+}
+
 .cn-dashboard-page__page-filters {
 	display: flex;
 	flex-wrap: wrap;

package/src/components/CnDataTable/CnColumnFilterPopover.vue

@@ -91,9 +91,9 @@
 				</label>
 			</div>
 
-			<!-- string: equals -->
+			<!-- string: contains (OpenRegister `[like]`, case-insensitive) -->
 			<label v-else class="cn-column-filter__field">
-				<span class="cn-column-filter__label">{{ equalsLabel }}</span>
+				<span class="cn-column-filter__label">{{ containsLabel }}</span>
 				<input
 					v-model="draft.value"
 					class="cn-column-filter__input"
@@ -131,7 +131,7 @@ let popoverSeq = 0
  *
  * Renders the control that fits the column: a checkbox list for an enum, yes,
  * no or any for a boolean, from and to for a number or a date, a searchable
- * list of referenced objects for a reference, and an equals box for text.
+ * list of referenced objects for a reference, and a contains box for text.
  * Real inputs throughout, so every control works from the keyboard. Escape
  * closes it and the host returns focus to the filter button.
  *
@@ -265,8 +265,14 @@ export default {
 			return t('nextcloud-vue', 'To')
 		},
 
-		equalsLabel() {
-			return t('nextcloud-vue', 'Equals')
+		/**
+		 * Label of the text box: the text filter matches on contains.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/header-filter-contains/specs/cn-data-table/spec.md#requirement-a-text-header-filter-matches-on-contains
+		 */
+		containsLabel() {
+			return t('nextcloud-vue', 'Contains')
 		},
 
 		clearLabel() {

package/src/components/CnDetailPage/CnDetailPage.md

@@ -433,4 +433,8 @@ When the schema-driven fetch answers 404 the page shows a not-found state whose
 
 ### 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.
+`showTypeEyebrow` (default `true`) can drop the type label above the record name. `breadcrumb` (`{ label, route?, params?, href?, icon? }`) draws a breadcrumb line above the header: that crumb, then the record's name as the current crumb. The label shows as text; `icon` draws an icon instead.
+
+### 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.