@conduction/nextcloud-vue 2.93.0 → 2.95.0

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -34,7 +34,29 @@
 					<!-- @slot title-meta Content on the title's row, right of the title (e.g. a page-wide picker). Fill it from a manifest with `page.slots: { "title-meta": "<RegistryName>" }`. -->
 					<slot name="title-meta" />
 				</div>
-				<p v-if="subtitleText" class="cn-dashboard-page__description" data-testid="cn-dashboard-page-subtitle">
+				<CnHeaderTrail
+					:breadcrumb="breadcrumb"
+					:current="title ? resolvedTitle : ''"
+					:meta="headerMeta ? effectiveTranslate(headerMeta) : ''" />
+				<!-- `dateRange.placement: "description"`: the segmented period
+				     group ends the description line ("Week 41 · alle teams ·
+				     [Deze week | Dit kwartaal | Dit jaar]"). -->
+				<div
+					v-if="datePeriodInDescription"
+					class="cn-dashboard-page__description cn-dashboard-page__description--with-period"
+					data-testid="cn-dashboard-page-subtitle">
+					<span v-if="subtitleText">{{ subtitleText }}</span>
+					<span v-if="subtitleText" aria-hidden="true">&middot;</span>
+					<CnSegmentedControl
+						size="compact"
+						mode="toggle"
+						:options="segmentedOptions"
+						:modelValue="segmentedValue"
+						:ariaLabel="datePeriodLabel"
+						data-testid="cn-dashboard-page-date-segmented"
+						@update:modelValue="onSegmentPick" />
+				</div>
+				<p v-else-if="subtitleText" class="cn-dashboard-page__description" data-testid="cn-dashboard-page-subtitle">
 					{{ subtitleText }}
 				</p>
 			</div>
@@ -185,7 +207,7 @@
 		     handling, persistence, and event emission lives in
 		     `onDateRangeChange`. -->
 		<div
-			v-if="showHeaderDateRange"
+			v-if="showHeaderDateRange && !datePeriodInDescription"
 			class="cn-dashboard-page__date-range"
 			:class="{
 				'cn-dashboard-page__date-range--pills': dateRangeControl === 'pills',
@@ -436,6 +458,7 @@
 					v-else
 					:title="getWidgetTitle(item)"
 					:eyebrow="getWidgetEyebrow(item)"
+					:subtitle="getWidgetSubtitle(item)"
 					:showTitle="false"
 					:showRefresh="false">
 					<div class="cn-dashboard-page__unknown">
@@ -498,6 +521,7 @@
 					v-if="missingRequiredApp(item)"
 					:title="getWidgetTitle(item)"
 					:eyebrow="getWidgetEyebrow(item)"
+					:subtitle="getWidgetSubtitle(item)"
 					:showTitle="widgetShowTitle(item)">
 					<!-- Compact on purpose: a two-row tile is about 150px, less
 					     a title row. NcEmptyContent's 64px icon, 20px name,
@@ -537,6 +561,7 @@
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
 						:eyebrow="getWidgetEyebrow(item)"
+						:subtitle="getWidgetSubtitle(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -619,6 +644,7 @@
 						:class="{ 'cn-dashboard-page__chart-fit': isChartFitted(item) }"
 						:title="getWidgetTitle(item)"
 						:eyebrow="getWidgetEyebrow(item)"
+						:subtitle="getWidgetSubtitle(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -698,6 +724,7 @@
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
 						:eyebrow="getWidgetEyebrow(item)"
+						:subtitle="getWidgetSubtitle(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -726,6 +753,7 @@
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
 						:eyebrow="getWidgetEyebrow(item)"
+						:subtitle="getWidgetSubtitle(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -766,6 +794,7 @@
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
 						:eyebrow="getWidgetEyebrow(item)"
+						:subtitle="getWidgetSubtitle(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -792,6 +821,7 @@
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
 						:eyebrow="getWidgetEyebrow(item)"
+						:subtitle="getWidgetSubtitle(item)"
 						:showTitle="widgetShowTitle(item)"
 						:showActions="widgetShowActions(item)"
 						:showRefresh="getWidgetShowRefresh(item)"
@@ -893,6 +923,7 @@
 					v-else
 					:title="getWidgetTitle(item)"
 					:eyebrow="getWidgetEyebrow(item)"
+					:subtitle="getWidgetSubtitle(item)"
 					:showTitle="widgetShowTitle(item)"
 					:showRefresh="false">
 					<div class="cn-dashboard-page__unknown">
@@ -972,6 +1003,7 @@ import CnDashboardGrid from '../CnDashboardGrid/CnDashboardGrid.vue'
 import CnDateRangePicker, { DEFAULT_DATE_RANGE_PRESETS, resolvePresetWindow, translatePresetLabel } from '../CnDateRangePicker/CnDateRangePicker.vue'
 import CnEmptyContent from '../CnEmptyContent/CnEmptyContent.vue'
 import CnKpiGrid from '../CnKpiGrid/CnKpiGrid.vue'
+import CnHeaderTrail from '../CnPageHeader/CnHeaderTrail.vue'
 import CnSegmentedControl from '../CnSegmentedControl/CnSegmentedControl.vue'
 import CnStatsBlockWidget from '../CnStatsBlockWidget/CnStatsBlockWidget.vue'
 import CnTileWidget from '../CnTileWidget/CnTileWidget.vue'
@@ -1115,6 +1147,7 @@ export default {
 	name: 'CnDashboardPage',
 
 	components: {
+		CnHeaderTrail,
 		NcActions,
 		NcActionButton,
 		NcActionInput,
@@ -1214,6 +1247,30 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * A breadcrumb under the title (manifest `config.breadcrumb`): one
+		 * crumb `{ label, route?, params?, href?, icon?, separator? }` or a
+		 * list; the title follows as the current crumb. Drawn as the detail
+		 * header's breadcrumb row. Null (the default) draws none.
+		 *
+		 * @type {object|Array<object>|null}
+		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-list-dashboard-or-settings-page-can-show-a-breadcrumb-and-a-meta-note
+		 */
+		breadcrumb: {
+			type: [Object, Array],
+			default: null,
+		},
+
+		/**
+		 * A note after the breadcrumb and a middle dot (manifest `config.headerMeta`).
+		 *
+		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-list-dashboard-or-settings-page-can-show-a-breadcrumb-and-a-meta-note
+		 */
+		headerMeta: {
+			type: String,
+			default: '',
+		},
+
 		/** Page description (shown below title) */
 		description: {
 			type: String,
@@ -2261,6 +2318,20 @@ export default {
 			return this.dateRangeEnabled && this.dateRange.showHeaderPicker !== false
 		},
 
+		/**
+		 * Whether the segmented period group sits at the end of the
+		 * description line (`dateRange.placement: "description"`) instead of
+		 * in a row of its own. Only for the segmented control without a
+		 * custom range, whose from/to popover keeps the row of its own.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-dashboard-can-show-its-period-on-the-description-line
+		 */
+		datePeriodInDescription() {
+			return this.showHeaderDateRange && this.dateRangeControl === 'segmented'
+				&& this.dateRange.placement === 'description' && !this.hasCustomPreset
+		},
+
 		/**
 		 * The preset list passed to the picker. Falls back to the
 		 * `DEFAULT_DATE_RANGE_PRESETS` constant when the consumer
@@ -2972,6 +3043,7 @@ export default {
 				widgetId: item.widgetId,
 				title: this.getWidgetTitle(item),
 				eyebrow: this.getWidgetEyebrow(item),
+				subtitle: this.getWidgetSubtitle(item),
 				showTitle: this.widgetShowTitle(item),
 				showActions: this.widgetShowActions(item),
 				showRefresh: this.getWidgetShowRefresh(item),
@@ -4090,6 +4162,20 @@ export default {
 			this.showWidgetConfig = false
 		},
 
+		/**
+		 * The line under a widget's title (`subtitle` on the widget
+		 * definition), translated; empty when it carries none.
+		 *
+		 * @param {object} item Layout item.
+		 * @return {string}
+		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-dashboard-widget-card-can-carry-a-line-under-its-title
+		 */
+		getWidgetSubtitle(item) {
+			const def = this.getWidgetDef(item.widgetId)
+			const subtitle = def && typeof def.subtitle === 'string' ? def.subtitle : ''
+			return subtitle ? this.effectiveTranslate(subtitle) : ''
+		},
+
 		/**
 		 * The line above a widget's title (`eyebrow` on the widget
 		 * definition: "Saldo per week" above "Prognose 13 weken"), through the
@@ -4903,6 +4989,14 @@ export default {
 	margin-bottom: 16px;
 }
 
+/* The period group at the end of the description line. */
+.cn-dashboard-page__description--with-period {
+	align-items: center;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
 .cn-dashboard-page__date-segmented {
 	display: flex;
 	align-items: center;

package/src/components/CnDataTable/CnDataTable.md

@@ -198,6 +198,7 @@ export default {
 | `rowIndicatorCap` | Number | `3` | How many declared indicators render on the row before the rest move into the row menu, reachable as `indicatorsFor(row).overflow`. |
 | `selectAllLabel` | String | `'Select all rows'` | Accessible name (`aria-label`) for the header select-all checkbox, so screen readers announce a named control (WCAG 4.1.2) |
 | `selectRowLabel` | String | `'Select row'` | Accessible name (`aria-label`) for each per-row select checkbox, so screen readers announce a named control (WCAG 4.1.2) |
+| `showUnread` | Boolean | `true` | Draw an unread record (`@self.unread`) in bold with the unread dot. Off, every row reads alike. CnIndexPage turns it off under the board look unless the page offers the Unread lens. |
 | `rowTitle` | String | `'link'` | Board look only: how the title column draws its title. `link` underlines the title (not its secondary line). `plain` draws it as 15px bold text without an underline over a 13px muted secondary line, as the PqTickets board does; the row stays clickable. The Nextcloud look ignores it. |
 | `hideHeader` | Boolean | `false` | Hide the column-header row (`<thead>`) — for compact dashboard list widgets that want a plain bordered-row list without column labels |
 | `pinnedCount` | Number | `0` | How many data columns are pinned to the start of the table. They, and the selection and icon columns, stay in view when the table scrolls sideways |

package/src/components/CnDataTable/CnDataTable.vue

@@ -130,7 +130,7 @@
 								col.class || '',
 								pinClass(leadingCount + colIndex),
 								isGrowColumn(col) ? 'cn-table-col--grow' : '',
-								colIndex === 0 ? 'cn-table-head--title' : '',
+								colIndex === titleColumnIndex ? 'cn-table-head--title' : '',
 							]"
 							:style="{ ...(col.width ? { width: col.width } : {}), ...pinStyle(leadingCount + colIndex) }"
 							:aria-sort="ariaSortFor(col)"
@@ -259,7 +259,7 @@
 						<td
 							v-for="(col, colIndex) in effectiveColumns"
 							:key="col.key"
-							:class="[col.class || '', col.cellClass || '', cellClass ? cellClass(row, col) : '', pinClass(leadingCount + colIndex), colIndex === 0 ? 'cn-table-col--title' : '', isGrowColumn(col) ? 'cn-table-col--grow' : '']"
+							:class="[col.class || '', col.cellClass || '', cellClass ? cellClass(row, col) : '', pinClass(leadingCount + colIndex), colIndex === titleColumnIndex ? 'cn-table-col--title' : '', isGrowColumn(col) ? 'cn-table-col--grow' : '']"
 							:style="{ ...(col.width ? { maxWidth: col.width } : {}), ...pinStyle(leadingCount + colIndex) }"
 							@mouseenter="titleWhenClipped">
 							<!-- A row with a `rowClickRoute` is a real link: this anchor
@@ -267,7 +267,7 @@
 							     the URL, a middle or ctrl click opens a new tab natively,
 							     and the row is reachable with Tab. The row's own click
 							     handlers treat it as a nested control and leave it be. -->
-							<a v-if="colIndex === 0 && rowLinks[String(row[rowKey])]"
+							<a v-if="colIndex === titleColumnIndex && rowLinks[String(row[rowKey])]"
 								class="cn-table-row__link"
 								:href="rowLinks[String(row[rowKey])].href"
 								:aria-label="rowLinkLabel(row, col)"
@@ -281,9 +281,9 @@
 							     the record is locked. It renders nothing when unlocked,
 							     so an unlocked table is byte-for-byte what it was. -->
 							<CnUnreadMarker
-								v-if="colIndex === 0 && isUnreadRow(row)" />
+								v-if="colIndex === titleColumnIndex && isUnreadRow(row)" />
 							<CnLockIndicator
-								v-if="colIndex === 0"
+								v-if="colIndex === titleColumnIndex"
 								:object="row"
 								:size="16" />
 							<!-- Declared state indicators ride the first data cell
@@ -293,7 +293,7 @@
 							     however the record is shaped. Past the cap the rest move
 							     into the row menu, because a row of nine icons is not a
 							     row anyone can triage at a glance. -->
-							<span v-if="colIndex === 0 && indicatorsFor(row).shown.length > 0"
+							<span v-if="colIndex === titleColumnIndex && indicatorsFor(row).shown.length > 0"
 								class="cn-table-row-indicators"
 								data-testid="cn-row-indicators">
 								<span v-for="indicator in indicatorsFor(row).shown"
@@ -338,7 +338,7 @@
 							     file names it (OpenRegister `@self.matchedFile`): plain text,
 							     file name only, under the first cell. -->
 							<span
-								v-if="colIndex === 0 && matchedFileOf(row)"
+								v-if="colIndex === titleColumnIndex && matchedFileOf(row)"
 								class="cn-table-cell__secondary cn-table-cell__matched-file"
 								data-testid="cn-row-matched-file">{{ matchedFileLabel(row) }}</span>
 						</td>
@@ -532,7 +532,10 @@ export default {
 		 * formats through `fillTemplate`), or a function of the row. Empty fields leave their placeholder blank; a line that
 		 * resolves to nothing is not drawn.
 		 *
-		 * @type {Array<{key: string, label: string, description: string, sortable: boolean, width: string, class: string, cellClass: string, secondary: (string|((row: object) => string))}|string>}
+		 * `link: true` makes that column the one that names the row: it carries
+		 * the row link and the title look. Without it the first column does.
+		 *
+		 * @type {Array<{key: string, label: string, description: string, sortable: boolean, width: string, class: string, cellClass: string, link: boolean, secondary: (string|((row: object) => string))}|string>}
 		 */
 		columns: {
 			type: Array,
@@ -742,6 +745,17 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Draw an unread record (`@self.unread`) in bold with the unread dot.
+		 * Off, every row reads alike whatever its read state.
+		 *
+		 * @spec openspec/changes/screens-index-board-gaps/specs/index-list-board-look/spec.md#requirement-unread-rows-are-marked-only-where-the-reader-asked-for-them
+		 */
+		showUnread: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * How the board look draws the title column: `link` (the default) is
 		 * the 15px weight 600 underlined title of the DqZaken board; `plain` is
@@ -1045,6 +1059,20 @@ export default {
 		 * @return {string|null} The column key, or null when not fitting.
 		 * @spec openspec/changes/narrow-object-table-widgets/specs/narrow-object-table-widgets/spec.md#requirement-a-narrow-object-table-keeps-its-trailing-columns-in-view
 		 */
+		/**
+		 * The column that names the row: it carries the row link, the title
+		 * look and the unread, lock and indicator marks. The first column with
+		 * `link: true`, else the first column (DqTeamwachtrij puts the waiting
+		 * time first and links the case title in the second).
+		 *
+		 * @return {number} The index in `effectiveColumns`.
+		 * @spec openspec/changes/screens-index-board-gaps/specs/index-list-board-look/spec.md#requirement-a-column-can-carry-the-row-link
+		 */
+		titleColumnIndex() {
+			const index = this.effectiveColumns.findIndex((c) => c && c.link === true)
+			return index === -1 ? 0 : index
+		},
+
 		growColumnKey() {
 			if (!this.fitWidth || this.effectiveColumns.length === 0) {
 				return null
@@ -1365,13 +1393,14 @@ export default {
 
 		/**
 		 * Whether a row's record changed since the user last looked
-		 * (`@self.unread`). A row without the marker renders as it always did.
+		 * (`@self.unread`), when `showUnread` is on. A row without the marker
+		 * renders as it always did.
 		 *
 		 * @param {object} row The row.
 		 * @return {boolean} True when the row is unread.
 		 */
 		isUnreadRow(row) {
-			return !!(row && row['@self'] && row['@self'].unread === true)
+			return this.showUnread && !!(row && row['@self'] && row['@self'].unread === true)
 		},
 
 		/**

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -2101,7 +2101,7 @@ export default {
 			default: false,
 		},
 
-		/** Label for the header Edit button. Defaults to a translated "Edit". */
+		/** Label for the header Edit button, run through the host translate. Defaults to a translated "Edit". */
 		editLabel: {
 			type: String,
 			default: '',
@@ -3416,14 +3416,40 @@ export default {
 
 		/**
 		 * The side column's widget definitions. A string names a widget
-		 * declared in `widgets`; an object is a definition of its own.
+		 * declared in `widgets`; an object is a definition of its own. A
+		 * definition whose `visibleWhen` does not hold for the record (or the
+		 * records `visibilityContext` names) is left out, exactly as in the
+		 * body grid; edit mode shows them all.
 		 *
 		 * @return {Array<object>} The definitions that resolve, each with an `id`.
 		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-side-column
+		 * @spec openspec/changes/detail-side-visible-when/specs/detail-page/spec.md#requirement-a-side-column-widget-shows-only-while-its-visiblewhen-holds
 		 */
 		sideColumnWidgets() {
+			const resolved = this.declaredSideWidgets.filter((widget) => this.sideWidgetVisible(widget))
+			if (!this.isBoard) {
+				return resolved
+			}
+			// The board look: the notice first, the History card last.
+			const rank = (widget) => (widget.type === 'banner' ? 0 : isActivityWidget(widget) ? 2 : 1)
+			return resolved
+				.map((widget, index) => ({ widget, index }))
+				.sort((a, b) => (rank(a.widget) - rank(b.widget)) || (a.index - b.index))
+				.map(({ widget }) => widget)
+		},
+
+		/**
+		 * The side column's entries resolved to definitions, before any
+		 * `visibleWhen` is read: a string names a widget declared in
+		 * `widgets`, an object is a definition of its own (given an id when it
+		 * has none).
+		 *
+		 * @return {Array<object>}
+		 * @spec openspec/changes/detail-side-visible-when/specs/detail-page/spec.md#requirement-a-side-column-widget-shows-only-while-its-visiblewhen-holds
+		 */
+		declaredSideWidgets() {
 			const declared = Array.isArray(this.widgets) ? this.widgets : []
-			const resolved = (Array.isArray(this.sideColumn) ? this.sideColumn : [])
+			return (Array.isArray(this.sideColumn) ? this.sideColumn : [])
 				.map((entry, index) => {
 					if (typeof entry === 'string') {
 						return declared.find((widget) => widget && widget.id === entry) || null
@@ -3434,15 +3460,6 @@ export default {
 					return entry.id ? entry : { ...entry, id: `cn-side-${index}` }
 				})
 				.filter(Boolean)
-			if (!this.isBoard) {
-				return resolved
-			}
-			// The board look: the notice first, the History card last.
-			const rank = (widget) => (widget.type === 'banner' ? 0 : isActivityWidget(widget) ? 2 : 1)
-			return resolved
-				.map((widget, index) => ({ widget, index }))
-				.sort((a, b) => (rank(a.widget) - rank(b.widget)) || (a.index - b.index))
-				.map(({ widget }) => widget)
 		},
 
 		/**
@@ -3763,12 +3780,14 @@ export default {
 		},
 
 		/**
-		 * Label for the header Edit button.
+		 * Label for the header Edit button: the manifest's `editLabel` through
+		 * the host translate, else the library's translated "Edit".
 		 *
 		 * @return {string}
+		 * @spec openspec/changes/detail-edit-label-translate/specs/detail-page/spec.md#requirement-the-edit-button-label-follows-the-reader-s-language
 		 */
 		editActionLabel() {
-			return this.editLabel || t('nextcloud-vue', 'Edit')
+			return this.editLabel ? this.effectiveTranslate(this.editLabel) : t('nextcloud-vue', 'Edit')
 		},
 
 		/**
@@ -4022,7 +4041,7 @@ export default {
 			if (!this.widgetVisibilityData || this.visibilityRowsPending) {
 				return ''
 			}
-			const defs = [...(this.bodyGridWidgets || []), ...((this.activeView && this.activeView.widgets) || [])]
+			const defs = [...(this.bodyGridWidgets || []), ...((this.activeView && this.activeView.widgets) || []), ...this.declaredSideWidgets]
 			const remote = defs.filter((def) => def && def.visibleWhen && typeof def.visibleWhen === 'object'
 				&& !isLocallyDecidableVisibleWhen(def.visibleWhen))
 			if (remote.length === 0) {
@@ -5897,6 +5916,27 @@ export default {
 			return compactLayoutRows(drawable)
 		},
 
+		/**
+		 * Whether a side column widget shows: always in edit mode or without a
+		 * `visibleWhen`, else while it holds for the record and the records
+		 * `visibilityContext` names, read by the same `detailWidgetVisible` the
+		 * body grid uses (local field conditions, `@context.<name>.*`, and the
+		 * answers of endpoint and source conditions).
+		 *
+		 * @param {object} widget A side column widget definition.
+		 * @return {boolean}
+		 * @spec openspec/changes/detail-side-visible-when/specs/detail-page/spec.md#requirement-a-side-column-widget-shows-only-while-its-visiblewhen-holds
+		 */
+		sideWidgetVisible(widget) {
+			if (this.editingBody || widget.visibleWhen === undefined || widget.visibleWhen === null) {
+				return true
+			}
+			return detailWidgetVisible(widget, this.widgetVisibilityData, {
+				pending: this.visibilityRowsPending,
+				answers: this.widgetConditionAnswers,
+			})
+		},
+
 		/**
 		 * Whether a layout item has anything to draw, so a grid cell is worth
 		 * spending on it.