@conduction/nextcloud-vue 2.76.0 → 2.78.0

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -883,7 +883,7 @@ import CnBodySections from '../CnBodySections/CnBodySections.vue'
 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 CnDateRangePicker, { DEFAULT_DATE_RANGE_PRESETS, resolvePresetWindow, translatePresetLabel } from '../CnDateRangePicker/CnDateRangePicker.vue'
 import CnEmptyContent from '../CnEmptyContent/CnEmptyContent.vue'
 import CnKpiGrid from '../CnKpiGrid/CnKpiGrid.vue'
 import CnSegmentedControl from '../CnSegmentedControl/CnSegmentedControl.vue'
@@ -2009,9 +2009,12 @@ export default {
 		 * doesn't supply one.
 		 */
 		effectivePresets() {
-			return Array.isArray(this.dateRange?.presets) && this.dateRange.presets.length > 0
+			const presets = Array.isArray(this.dateRange?.presets) && this.dateRange.presets.length > 0
 				? this.dateRange.presets
-				: DEFAULT_DATE_RANGE_PRESETS.map((p) => ({ ...p }))
+				: DEFAULT_DATE_RANGE_PRESETS
+			// Labels in the user's language (screens-dashboard-i18n): the app's
+			// catalogue first, then the library's own for the default labels.
+			return presets.map((p) => ({ ...p, label: translatePresetLabel(p.label, this.effectiveTranslate) }))
 		},
 
 		/**
@@ -3354,7 +3357,7 @@ export default {
 		 * @return {object}
 		 */
 		registryWidgetBindings(item) {
-			const content = this.getWidgetContent(item)
+			const content = this.collectionContent(this.getWidgetContent(item))
 			const def = this.getWidgetDef(item.widgetId)
 			if (!this.isBannerDef(def)) {
 				return content
@@ -3363,6 +3366,28 @@ export default {
 			return outcome ? { ...content, conditionOutcome: outcome } : content
 		},
 
+		/**
+		 * A widget's content with the board's quiet collection footer: in the
+		 * board look a dashboard that drops the widget Actions menu
+		 * (`showWidgetActions: false`) also drops the Add footer of its list
+		 * widgets, whose Add is the menu's create entry at the bottom of the
+		 * card. A widget that says `content.allowCreate` keeps its own value.
+		 * Otherwise the content is returned as is.
+		 *
+		 * @spec openspec/changes/screens-dashboard-legacy-widgets/specs/dashboard-page/spec.md#requirement-a-board-dashboard-without-widget-actions-drops-the-add-footer
+		 * @param {object} content The widget's stored content.
+		 * @return {object}
+		 */
+		collectionContent(content) {
+			if (!this.isBoardLook || this.showWidgetActions !== false) {
+				return content
+			}
+			if (content && Object.hasOwn(content, 'allowCreate')) {
+				return content
+			}
+			return { ...content, allowCreate: false }
+		},
+
 		/**
 		 * Re-compact a filtered layout upward, display-only. GridStack runs
 		 * `float: true`, so removing an item does not close its row — this

package/src/components/CnDataTable/CnDataTable.md

@@ -205,6 +205,7 @@ export default {
 | `filterable` | Boolean | `false` | Show a filter button in every header whose column can filter: enum, boolean, text, number, date and reference columns backed by a schema property. A column opts out with `filterable: false`. Applying a filter emits `column-filter`; the host owns the state and passes it back as `activeFilters`. `CnIndexPage` turns it on by default. |
 | `activeFilters` | Object | `{}` | The active filter map, `{ paramKey: values[] }`: the same map the facet sidebar writes, so a header filter and a sidebar filter on one field show the same state. |
 | `filterRegister` | String | `''` | Register slug a reference column's filter searches in when the column names none. |
+| `lensReasonTexts` | Object \| null | `null` | App wording for an unavailable personal lens in self-fetch mode, keyed `<lens>.<reason>` or `<reason>`. Without it the library's text is used (see below). |
 
 ## Slots
 
@@ -233,6 +234,14 @@ features are folded in here as opt-in props (bare-table usage is unchanged):
 - `fetchParams` — extra query params for the self-fetch (a resolved filter map,
   `_order[field]` ordering, `_limit`); changing it re-triggers the fetch. Used by
   `CnWidgetObjectTable`'s declarative `source`.
+- When the self-fetch asked for a personal lens (a "Recently opened" tile with
+  `source.filter._recent: true`) and the response reports it unavailable
+  (`@self.lenses.recent.available: false`, openregister#4514), the empty row
+  says why instead of `emptyText`: "This server does not keep track of what you
+  open." (`audit-trail-disabled`), "Log in to see what you opened recently."
+  (`anonymous`) or "Your recent items are not available right now."
+  (`read-history-unavailable`). `lensReasonTexts` replaces the wording; no
+  report, an available lens or an unknown reason keeps `emptyText`.
 - `rowClickRoute` — a function mapping a row to a vue-router route. Each such row renders a real `<a href>` in its first cell, stretched over the row, so hovering shows the URL, a plain or alt click routes in place, a ctrl/cmd/shift or middle click opens a new tab, and the row is reachable with Tab. The link is named by the first cell's text ("Open row" when that is empty or not plain text). There is no link on a `selectable` table without `rowClickToView`, where a row click selects. `CnWidgetObjectTable` rows inherit it. Trade-offs: cell text cannot be selected by dragging on a linked row, and a right-click on it shows the browser's link menu only when no host listens to `row-context-menu`.
 - `hideHeader` — drop the column-label row for a compact list widget.
 - `#footer` slot — supply a custom footer link (e.g. "+ New" or an always-shown

package/src/components/CnDataTable/CnDataTable.vue

@@ -130,25 +130,42 @@
 								pinClass(leadingCount + colIndex),
 							]"
 							:style="{ ...(col.width ? { width: col.width } : {}), ...pinStyle(leadingCount + colIndex) }"
-							:tabindex="col.sortable ? 0 : null"
 							:aria-sort="ariaSortFor(col)"
 							:data-filtered="isColumnFiltered(col) ? 'true' : null"
 							:title="translateLabel(col.description) || null"
 							@click="col.sortable ? onHeaderClick(col.key, $event) : null"
 							@keydown.enter="col.sortable ? onHeaderKeydown(col.key, $event) : null">
-							<span :class="col.description ? 'cn-table-header--described' : ''">
+							<!-- The sort control is a real button named by the column
+							     label; the header's `aria-sort` carries the state. Its
+							     click and Enter bubble to the header's own handlers, so
+							     a click anywhere in the header still sorts. -->
+							<button
+								v-if="col.sortable"
+								type="button"
+								class="cn-table-header__sort"
+								data-testid="cn-table-header-sort">
+								<span :class="col.description ? 'cn-table-header--described' : ''">{{ translateLabel(col.label) }}</span>
+								<span
+									v-if="sortKeyIndex(col.key) !== -1"
+									class="cn-table-header__chevron cn-table-sort-indicator"
+									:data-sort-direction="effectiveSortKeys[sortKeyIndex(col.key)].order === 'asc' ? 'asc' : 'desc'">
+									<ChevronUp v-if="effectiveSortKeys[sortKeyIndex(col.key)].order === 'asc'" :size="14" />
+									<ChevronDown v-else :size="14" />
+								</span>
+								<span
+									v-else
+									class="cn-table-header__chevron cn-table-header__chevron--idle">
+									<ChevronDown :size="14" />
+								</span>
+								<span
+									v-if="sortBadgeFor(col.key) !== null"
+									class="cn-table-sort-badge">
+									{{ sortBadgeFor(col.key) }}
+								</span>
+							</button>
+							<span v-else :class="col.description ? 'cn-table-header--described' : ''">
 								{{ translateLabel(col.label) }}
 							</span>
-							<span
-								v-if="col.sortable && sortKeyIndex(col.key) !== -1"
-								class="cn-table-sort-indicator">
-								{{ effectiveSortKeys[sortKeyIndex(col.key)].order === 'asc' ? '▲' : '▼' }}
-							</span>
-							<span
-								v-if="col.sortable && sortBadgeFor(col.key) !== null"
-								class="cn-table-sort-badge">
-								{{ sortBadgeFor(col.key) }}
-							</span>
 							<!-- Header filter: a real button, so it is reachable with Tab
 							     and its click and Enter never also sort the column. -->
 							<button
@@ -163,8 +180,11 @@
 								data-testid="cn-table-header-filter"
 								@click.stop="toggleColumnFilter(col, $event)"
 								@keydown.enter.stop>
-								<FilterIcon v-if="isColumnFiltered(col)" :size="16" />
-								<FilterOutline v-else :size="16" />
+								<FilterOutline :size="14" />
+								<span
+									v-if="isColumnFiltered(col)"
+									class="cn-table-header__filter-dot"
+									data-testid="cn-table-header-filter-dot" />
 							</button>
 						</th>
 
@@ -182,9 +202,12 @@
 					<!-- Empty state -->
 					<tr v-if="effectiveRows.length === 0" class="cn-table-empty" data-testid="cn-object-list-empty">
 						<td :colspan="totalColumns">
-							<!-- @slot Empty-state content shown when there are no rows (defaults to `emptyText`). -->
+							<!-- @slot Empty-state content shown when there are no rows (defaults to `emptyText`, or why an unavailable personal lens is empty). -->
 							<slot name="empty">
-								{{ translateLabel(emptyText) }}
+								<span v-if="lensReasonText" class="cn-table-empty__lens-reason" data-testid="cn-data-table-lens-reason">{{ lensReasonText }}</span>
+								<template v-else>
+									{{ translateLabel(emptyText) }}
+								</template>
 							</slot>
 						</td>
 					</tr>
@@ -370,12 +393,14 @@ import axios from '@nextcloud/axios'
 import { translatePlural as n, translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { NcCheckboxRadioSwitch, NcLoadingIcon } from '@nextcloud/vue'
-import FilterIcon from 'vue-material-design-icons/Filter.vue'
+import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
+import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import FilterOutline from 'vue-material-design-icons/FilterOutline.vue'
 import CnColumnFilterPopover from './CnColumnFilterPopover.vue'
 import { useClickDragGuard } from '../../composables/useClickDragGuard.js'
 import { normalizeLook } from '../../composables/useLook.js'
 import { clearedColumnFilterParams, columnFilterDef, columnFilterParams, columnFilterState, isColumnFilterActive, isColumnSortable } from '../../utils/columnFilters.js'
+import { lensUnavailableText, readLensReports } from '../../utils/lensAvailability.js'
 import { followLinkClick, openRowTarget, resolveHref } from '../../utils/linkNavigation.js'
 import { nextSortState } from '../../utils/multiColumnSort.js'
 import { isNewTabClick, isNewTabHandled, isRowMiddleClick, markNewTabHandled, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'
@@ -485,7 +510,8 @@ export default {
 		CnIcon,
 		CnLockIndicator,
 		CnUnreadMarker,
-		FilterIcon,
+		ChevronDown,
+		ChevronUp,
 		FilterOutline,
 	},
 
@@ -666,6 +692,20 @@ export default {
 			default: () => t('nextcloud-vue', 'No items found'),
 		},
 
+		/**
+		 * App wording for an unavailable personal lens in self-fetch mode,
+		 * keyed `<lens>.<reason>` (`recent.audit-trail-disabled`) or
+		 * `<reason>`. Without it the library's object-neutral text is shown
+		 * when the response reports `@self.lenses.<lens>.available: false`.
+		 *
+		 * @type {{[key: string]: string}|null}
+		 * @spec openspec/changes/lens-says-why-it-is-empty/specs/personal-lens-availability/spec.md#requirement-an-unavailable-lens-explains-its-empty-page
+		 */
+		lensReasonTexts: {
+			type: Object,
+			default: null,
+		},
+
 		/** Function returning CSS class(es) for a row: (row) => string|object */
 		rowClass: {
 			type: Function,
@@ -942,6 +982,8 @@ export default {
 			aggregateRequestId: 0,
 			/** Rows fetched in self-fetch mode (register + schemaId). */
 			fetchedRows: [],
+			/** Personal-lens reports (`@self.lenses`) of the latest self-fetch response. */
+			fetchedLenses: {},
 			/** True while a self-fetch request is in flight. */
 			selfFetchLoading: false,
 		}
@@ -966,6 +1008,22 @@ export default {
 			return t('nextcloud-vue', 'Actions')
 		},
 
+		/**
+		 * Why the self-fetched list is empty when a personal lens could not
+		 * answer (openregister#4514), or `''` to keep `emptyText`. Only the
+		 * table's own fetch reports: external `rows` carry no report.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/lens-says-why-it-is-empty/specs/personal-lens-availability/spec.md#requirement-an-unavailable-lens-explains-its-empty-page
+		 */
+		lensReasonText() {
+			if (this.rows && this.rows.length > 0) {
+				return ''
+			}
+			const text = lensUnavailableText(this.fetchedLenses, this.lensReasonTexts)
+			return text ? this.translateLabel(text) : ''
+		},
+
 		/** @return {number} Leading cells before the data columns (selection, icon). */
 		leadingCount() {
 			return (this.selectable ? 1 : 0) + (this.rowIcon ? 1 : 0)
@@ -1495,8 +1553,10 @@ export default {
 					...(this.fetchParams ? { params: this.fetchParams } : {}),
 				})
 				this.fetchedRows = (data && data.results) || (Array.isArray(data) ? data : [])
+				this.fetchedLenses = readLensReports(data)
 			} catch {
 				this.fetchedRows = []
+				this.fetchedLenses = {}
 			} finally {
 				this.selfFetchLoading = false
 			}
@@ -1586,19 +1646,24 @@ export default {
 		 * handed a `:schema` for at all) still get type-aware rendering.
 		 * `enumLabels` rides with `enum` rather than getting its own `if`
 		 * branch: a column can't usefully declare labels without also
-		 * declaring the codes they label.
+		 * declaring the codes they label. A column `colorMap` (raw value to
+		 * badge variant) colours the enum pill from the manifest and wins over
+		 * the schema property's own `colorMap` / `x-color-map`.
 		 *
 		 * @param {object} col Column definition.
 		 * @return {object} Property definition for CnCellRenderer.
+		 * @spec openspec/changes/screens-cell-pill-parity/specs/cell-pill-tones/spec.md#requirement-a-manifest-column-colours-its-enum-pills
 		 */
 		columnProperty(col) {
 			const base = this.getSchemaProperty(col.key)
-			if (col && (col.format || col.type || col.enum)) {
+			const colorMap = col && col.colorMap && typeof col.colorMap === 'object' && !Array.isArray(col.colorMap) ? col.colorMap : null
+			if (col && (col.format || col.type || col.enum || colorMap)) {
 				return {
 					...base,
 					...(col.type ? { type: col.type } : {}),
 					...(col.format ? { format: col.format } : {}),
 					...(col.enum ? { enum: col.enum, enumLabels: col.enumLabels || base.enumLabels } : {}),
+					...(colorMap ? { colorMap } : {}),
 				}
 			}
 			return base
@@ -1975,8 +2040,8 @@ export default {
 		filterButtonLabel(col) {
 			const column = this.translateLabel(col.label)
 			return this.isColumnFiltered(col)
-				? t('nextcloud-vue', 'Filter {column}, active', { column })
-				: t('nextcloud-vue', 'Filter {column}', { column })
+				? t('nextcloud-vue', 'Filter by {column}, active', { column })
+				: t('nextcloud-vue', 'Filter by {column}', { column })
 		},
 
 		/**

package/src/components/CnDateRangePicker/CnDateRangePicker.vue

@@ -69,6 +69,44 @@ export const DEFAULT_DATE_RANGE_PRESETS = Object.freeze([
 	{ id: 'custom', label: 'Custom range', days: null },
 ])
 
+/**
+ * The library's own translations of the default preset labels. Literal
+ * `t()` calls, so the strings are extracted into the `nextcloud-vue`
+ * catalogue.
+ *
+ * @type {{[label: string]: function(): string}}
+ */
+const LIBRARY_PRESET_LABELS = Object.freeze({
+	'Last 8 hours': () => t('nextcloud-vue', 'Last 8 hours'),
+	'Last 24 hours': () => t('nextcloud-vue', 'Last 24 hours'),
+	Today: () => t('nextcloud-vue', 'Today'),
+	'Last 7 days': () => t('nextcloud-vue', 'Last 7 days'),
+	'Last 30 days': () => t('nextcloud-vue', 'Last 30 days'),
+	'Last 90 days': () => t('nextcloud-vue', 'Last 90 days'),
+	'Custom range': () => t('nextcloud-vue', 'Custom range'),
+})
+
+/**
+ * A preset label in the user's language: the host translation when the app's
+ * catalogue has the key, else the library's own translation of a default
+ * label ("Last 30 days"), else the label as written.
+ *
+ * @spec openspec/changes/screens-dashboard-i18n/specs/dashboard-page/spec.md#requirement-date-range-preset-labels-are-translated
+ * @param {string} label The preset label (an i18n key).
+ * @param {function(string): string} [translate] The host translate function.
+ * @return {string} The translated label.
+ */
+export function translatePresetLabel(label, translate) {
+	if (typeof label !== 'string' || label === '') {
+		return ''
+	}
+	const own = typeof translate === 'function' ? translate(label) : label
+	if (typeof own === 'string' && own !== '' && own !== label) {
+		return own
+	}
+	return Object.hasOwn(LIBRARY_PRESET_LABELS, label) ? LIBRARY_PRESET_LABELS[label]() : label
+}
+
 /**
  * Resolve a `period` preset into its calendar-aligned `{ from, to }`
  * window — the CURRENT week / month / quarter / year to date, not a
@@ -196,6 +234,11 @@ export default {
 		NcSelect,
 	},
 
+	inject: {
+		/** Host translate function provided by CnAppRoot, for app-authored preset labels. */
+		cnTranslate: { default: () => (key) => key },
+	},
+
 	props: {
 		/**
 		 * Current range value. `from` / `to` are ISO-8601 UTC strings;
@@ -327,7 +370,7 @@ export default {
 		},
 
 		presetOptions() {
-			return this.presets.map((p) => ({ id: p.id, label: p.label, days: p.days }))
+			return this.presets.map((p) => ({ id: p.id, label: translatePresetLabel(p.label, this.cnTranslate), days: p.days }))
 		},
 
 		selectedPresetOption() {

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -116,7 +116,7 @@
 							data-testid="cn-detail-page-type-eyebrow">
 							{{ typeEyebrow }}
 						</p>
-						<div v-if="displayTitle || showFavouriteToggle || showFollowToggle" class="cn-detail-page__title-row">
+						<div v-if="displayTitle || showFollowToggle" class="cn-detail-page__title-row">
 							<component
 								:is="isBoard ? 'h1' : 'h2'"
 								v-if="displayTitle"
@@ -124,24 +124,19 @@
 								:title="displayTitle">
 								{{ displayTitle }}
 							</component>
-							<!-- Star and Follow beside the title (manifest `config.favourite` /
-							     `config.follow`): shown when the object carries the markers. -->
+							<!-- The one Follow control beside the title (manifest `config.follow`):
+							     shown when the object carries `@self.watching`. There is no star:
+							     a favourite is a follow with notifications off. -->
 							<span
-								v-if="showFavouriteToggle || showFollowToggle"
+								v-if="showFollowToggle"
 								class="cn-detail-page__interactions"
 								data-testid="cn-detail-page-interactions">
-								<CnFavouriteToggle
-									v-if="showFavouriteToggle"
-									:register="register"
-									:schema="schema"
-									:objectId="String(objectId)"
-									:favourite="resolvedSelf.favourite === true" />
 								<CnFollowToggle
-									v-if="showFollowToggle"
 									:register="register"
 									:schema="schema"
 									:objectId="String(objectId)"
 									:watching="resolvedSelf.watching === true"
+									:notify="typeof resolvedSelf.watchNotify === 'boolean' ? resolvedSelf.watchNotify : null"
 									:watcherCount="typeof resolvedSelf.watcherCount === 'number' ? resolvedSelf.watcherCount : null"
 									:canManage="!!(resolvedSelf.can && resolvedSelf.can.manage === true)"
 									:notifies="followNotifies" />
@@ -1211,7 +1206,6 @@ import CnBodySections from '../CnBodySections/CnBodySections.vue'
 import CnBuildiqEditButton from '../CnBuildiqEditButton/CnBuildiqEditButton.vue'
 import CnDashboardGrid from '../CnDashboardGrid/CnDashboardGrid.vue'
 import CnDetailWidgetHost from '../CnDetailWidgetHost/CnDetailWidgetHost.vue'
-import CnFavouriteToggle from '../CnFavouriteToggle/CnFavouriteToggle.vue'
 import CnFollowToggle from '../CnFollowToggle/CnFollowToggle.vue'
 import CnFormDialog from '../CnFormDialog/CnFormDialog.vue'
 import CnLifecycleActions from '../CnLifecycleActions/CnLifecycleActions.vue'
@@ -1413,7 +1407,6 @@ export default {
 		CnStatusBadge,
 		CnSummaryAggregates,
 		CnDetailHeaderChips,
-		CnFavouriteToggle,
 		CnFollowToggle,
 		EyeOffOutline,
 		CnRelatedCollections,
@@ -1884,9 +1877,11 @@ export default {
 		},
 
 		/**
-		 * Star beside the title (manifest `config.favourite`). Automatic (null):
-		 * shown when the object carries `@self.favourite`. `false` removes it.
+		 * Deprecated and ignored: the star is gone, a favourite is a follow with
+		 * notifications off (OpenRegister `merge-follow-and-favourites`). Kept so a
+		 * manifest that still sets `config.favourite` stays valid; use `follow`.
 		 *
+		 * @deprecated Use `follow`.
 		 * @type {boolean|null}
 		 */
 		favourite: {
@@ -3867,18 +3862,6 @@ export default {
 				&& this.register !== '' && this.schema !== '' && this.objectId !== ''
 		},
 
-		/**
-		 * Whether the star renders: the object carries `@self.favourite` and the page did not turn it off.
-		 *
-		 * @return {boolean}
-		 * @spec openspec/changes/record-favourite-and-follow/tasks.md#task-3
-		 */
-		showFavouriteToggle() {
-			return this.favourite !== false
-				&& typeof this.resolvedSelf.favourite === 'boolean'
-				&& this.register !== '' && this.schema !== '' && this.objectId !== ''
-		},
-
 		/**
 		 * Whether the Follow toggle renders: the object carries `@self.watching` and the page did not turn it off.
 		 *

package/src/components/CnFavouriteToggle/CnFavouriteToggle.vue

@@ -31,12 +31,17 @@ import { setFavourite } from '../../utils/recordInteractions.js'
 /**
  * CnFavouriteToggle — a star bound to a record's `@self.favourite` marker.
  *
+ * @deprecated Following and favourites are one feature since OpenRegister's
+ * `merge-follow-and-favourites`: a favourite is a follow with notifications
+ * off. Use `CnFollowToggle`. Neither `CnDetailPage` nor `CnIndexPage` renders
+ * this star any more; it stays exported for one minor line so an app that
+ * placed it itself keeps working (the server answers it as a quiet follow).
+ *
  * A click flips the star at once and sends `PUT` (star) or `DELETE` (unstar)
  * `/apps/openregister/api/objects/{register}/{schema}/{id}/favourite`; on
  * failure it flips back and shows the server's message. The server's answer is
  * written into the stored object's `@self`, so a list showing the same record
- * agrees. `CnDetailPage` renders it beside the title; `CnIndexPage` renders it
- * per row for `showFavouriteColumn`.
+ * agrees.
  *
  * Example:
  * ```vue