@conduction/nextcloud-vue 2.76.0 → 2.77.0

package/src/components/CnCellRenderer/CnCellRenderer.vue

@@ -10,6 +10,20 @@
 			:formatted="formattedValue"
 			v-bind="widgetProps" />
 
+		<!-- Built-in "group" widget: a Nextcloud group id (or a list of them)
+		     shown as the group's display name, cached per id. Used on its own
+		     for a property marked `referenceType: nextcloud-group` /
+		     `format: nc-group` unless the column has a formatter. -->
+		<template v-else-if="isGroupCell">
+			<span v-if="!groupIds.length" class="cn-cell-renderer__dash">—</span>
+			<span v-else class="cn-cell-renderer__groups">
+				<template v-for="(gid, i) in groupIds" :key="gid">
+					<span v-if="i > 0">, </span>
+					<CnGroupNameCell :gid="gid" />
+				</template>
+			</span>
+		</template>
+
 		<!-- Built-in "badge" widget — renders the (possibly formatter-shaped) value as a status pill -->
 		<template v-else-if="widget === 'badge'">
 			<CnStatusBadge v-if="hasValue"
@@ -192,11 +206,12 @@ import { getCanonicalLocale } from '@nextcloud/l10n'
 import { NcAvatar, NcDateTime } from '@nextcloud/vue'
 import CheckBold from 'vue-material-design-icons/CheckBold.vue'
 import CnFkResolveCell from '../CnFkResolveCell/CnFkResolveCell.vue'
+import CnGroupNameCell from './CnGroupNameCell.vue'
 import { parseDateValue, resolveDateVariant } from '../../utils/dateVariant.js'
 import { safeCurrencyCode } from '../../utils/formatMetric.js'
 import { objectFieldValue } from '../../utils/objectName.js'
 import { safeHref } from '../../utils/safeHref.js'
-import { formatValue } from '../../utils/schema.js'
+import { formatValue, isGroupProp } from '../../utils/schema.js'
 import { CnStatusBadge } from '../CnStatusBadge/index.js'
 
 /** A uuid in any version, the shape OpenRegister ids take. */
@@ -226,6 +241,7 @@ export default {
 	components: {
 		CnStatusBadge,
 		CnFkResolveCell,
+		CnGroupNameCell,
 		CheckBold,
 		NcAvatar,
 		NcDateTime,
@@ -307,6 +323,9 @@ export default {
 		 * a date whose colour follows `widgetProps.variantWhen`, rules on the
 		 * number of days until the date (`[{ op: "lt", value: 0, variant:
 		 * "error" }, { op: "lte", value: 5, variant: "warning" }]`).
+		 * The built-in id `"group"` shows a Nextcloud group id (or a list of
+		 * them) as the group's display name; a column whose property is
+		 * marked `referenceType: "nextcloud-group"` gets it without asking.
 		 * Takes precedence over `formatter`/the type-aware rendering, but the
 		 * value handed to the widget is the formatter-shaped `formatted` when
 		 * `formatter` is also set.
@@ -577,6 +596,42 @@ export default {
 			return c || null
 		},
 
+		/**
+		 * Whether this cell shows Nextcloud group names: the column asks for
+		 * `widget: "group"`, or it names no widget and no formatter and its
+		 * property is a group (or a list of groups).
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-a-group-cell-shows-the-groups-display-name
+		 * @return {boolean}
+		 */
+		isGroupCell() {
+			if (this.widget === 'group') {
+				return true
+			}
+			if (this.widget || this.hasFormatter) {
+				return false
+			}
+			const p = this.property
+			if (!p || typeof p !== 'object') {
+				return false
+			}
+			return isGroupProp(p) || (p.type === 'array' && isGroupProp(p.items))
+		},
+
+		/**
+		 * The group ids in this cell, empty ones dropped.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-a-group-cell-shows-the-groups-display-name
+		 * @return {string[]}
+		 */
+		groupIds() {
+			const raw = this.value
+			const list = Array.isArray(raw) ? raw : [raw]
+			return list
+				.filter((gid) => (typeof gid === 'string' && gid !== '') || typeof gid === 'number')
+				.map((gid) => String(gid))
+		},
+
 		/** Variant for the built-in `badge` widget — `widgetProps.variant` or `'default'`. */
 		badgeVariant() {
 			return (this.widgetProps && this.widgetProps.variant) || 'default'

package/src/components/CnCellRenderer/CnGroupNameCell.vue

@@ -0,0 +1,61 @@
+<!--
+  SPDX-FileCopyrightText: 2026 Conduction B.V.
+  SPDX-License-Identifier: EUPL-1.2
+
+  CnGroupNameCell: one Nextcloud group id shown as the group's display name.
+  The name is looked up once per page (utils/groupAutocomplete.js); until it
+  arrives, and when it cannot be found, the cell shows the id.
+-->
+<template>
+	<span class="cn-group-name-cell" :title="gid">{{ label }}</span>
+</template>
+
+<script>
+import { groupDisplayName, loadGroupDisplayName } from '../../utils/groupAutocomplete.js'
+
+/**
+ * CnGroupNameCell renders a Nextcloud group id as its display name.
+ *
+ * ```vue
+ * <CnGroupNameCell gid="toezicht" />
+ * ```
+ *
+ * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-a-group-cell-shows-the-groups-display-name
+ */
+export default {
+	name: 'CnGroupNameCell',
+
+	props: {
+		/** The group id to show. */
+		gid: {
+			type: String,
+			required: true,
+		},
+	},
+
+	computed: {
+		/**
+		 * The cached display name, or the id while it loads or when unknown.
+		 *
+		 * @return {string}
+		 */
+		label() {
+			return groupDisplayName(this.gid) || this.gid
+		},
+	},
+
+	watch: {
+		gid: {
+			immediate: true,
+			/**
+			 * Ask for the name of a new id (cached, so once per id per page).
+			 *
+			 * @param {string} gid The group id.
+			 */
+			handler(gid) {
+				loadGroupDisplayName(gid)
+			},
+		},
+	},
+}
+</script>

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
 			}
@@ -1975,8 +2035,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/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