@conduction/nextcloud-vue 2.58.0 → 2.59.0

package/src/components/CnLogsPage/CnLogsPage.vue

@@ -89,7 +89,8 @@
 					:sortKeys="effectiveSortKeys"
 					:emptyText="emptyText"
 					@sort="onSort"
-					@rowClick="onRowClick">
+					@rowClick="onRowClick"
+					@rowAuxClick="onRowAuxClick">
 					<template
 						v-for="col in slotColumns"
 						#[`column-${col}`]="{ row, value }">
@@ -484,14 +485,21 @@ export default {
 		 */
 		'action',
 		/**
-		 * @event row-click Emitted when a log row's body is clicked or
-		 * middle-clicked, whether or not `rowDetail` opened the detail dialog —
-		 * so a host can navigate instead of (or as well as) showing the dialog.
-		 * Payload: `(row, event)`, the second being the native click/auxclick
-		 * event.
+		 * @event row-click Emitted when a log row's body is clicked, whether or
+		 * not `rowDetail` opened the detail dialog — so a host can navigate
+		 * instead of (or as well as) showing the dialog. Payload: `(row, event)`,
+		 * the second being the native click event. A middle click emits
+		 * `row-aux-click` instead.
 		 * @type {object}
 		 */
 		'row-click',
+		/**
+		 * @event row-aux-click Emitted when a log row's body is middle-clicked,
+		 * for opening it in a new tab. Payload: `(row, event)`, the second being
+		 * the native auxclick event.
+		 * @type {object}
+		 */
+		'row-aux-click',
 	],
 
 	setup(props) {
@@ -994,26 +1002,43 @@ export default {
 		/**
 		 * Handle a row-body click: navigate to `rowRoute` when one is declared,
 		 * else open the detail dialog when `rowDetail` is set. Always re-emits
-		 * so a host can do its own thing regardless. A ctrl/cmd/shift or middle
-		 * click opens `rowRoute` in a new tab; a middle click never opens the
-		 * dialog.
+		 * so a host can do its own thing regardless. A ctrl/cmd/shift click
+		 * opens `rowRoute` in a new tab.
 		 *
 		 * @param {object} row The clicked log entry.
-		 * @param {MouseEvent} [event] The originating click/auxclick event.
+		 * @param {MouseEvent} [event] The originating click event.
 		 */
 		onRowClick(row, event) {
 			if (this.rowRoute) {
 				markNewTabHandled(event, openRowTarget(event, { name: this.rowRoute, params: { id: row?.[this.rowKey] } }, this.$router))
-			} else if (this.rowDetail && !(event && event.button === 1)) {
+			} else if (this.rowDetail) {
 				this.detailRow = row
 			}
 			/**
-			 * @event row-click Emitted when a log row's body is clicked or middle-clicked. Payload: `(row, event)` — the log entry and the native click/auxclick event.
+			 * @event row-click Emitted when a log row's body is clicked. Payload: `(row, event)` — the log entry and the native click event.
 			 * @type {object}
 			 */
 			this.$emit('row-click', row, event)
 		},
 
+		/**
+		 * Handle a row-body middle click: open `rowRoute` in a new tab, never
+		 * the detail dialog, and emit `row-aux-click` rather than `row-click`.
+		 *
+		 * @param {object} row The clicked log entry.
+		 * @param {MouseEvent} event The originating auxclick event.
+		 */
+		onRowAuxClick(row, event) {
+			if (this.rowRoute) {
+				markNewTabHandled(event, openRowTarget(event, { name: this.rowRoute, params: { id: row?.[this.rowKey] } }, this.$router))
+			}
+			/**
+			 * @event row-aux-click Emitted when a log row's body is middle-clicked. Payload: `(row, event)` — the log entry and the native auxclick event.
+			 * @type {object}
+			 */
+			this.$emit('row-aux-click', row, event)
+		},
+
 		/** Close the row-detail dialog. */
 		closeDetail() {
 			this.detailRow = null

package/src/components/CnObjectCard/CnObjectCard.vue

@@ -2,7 +2,7 @@
 	<div
 		class="cn-object-card"
 		:class="{ 'cn-object-card--selected': selected }"
-		@mousedown="onPointerDown"
+		@mousedown="onCardMouseDown"
 		@click="onCardClick($event)"
 		@auxclick="onCardAuxClick($event)">
 		<!-- Selection checkbox -->
@@ -76,7 +76,7 @@
 import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { useClickDragGuard } from '../../composables/useClickDragGuard.js'
 import { resolveImageUrl } from '../../utils/resolveImageUrl.js'
-import { isRowMiddleClick } from '../../utils/rowAuxClick.js'
+import { isRowMiddleClick, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'
 import { formatValue } from '../../utils/schema.js'
 import { CnCellRenderer } from '../CnCellRenderer/index.js'
 import { CnLockIndicator } from '../CnLockIndicator/index.js'
@@ -161,7 +161,7 @@ export default {
 		},
 	},
 
-	emits: ['click', 'select'],
+	emits: ['click', 'select', 'aux-click'],
 
 	setup() {
 		// Tell a deliberate card click apart from a text-selection drag.
@@ -287,14 +287,28 @@ export default {
 				return
 			}
 			/**
-			 * @event click Emitted when a non-selectable (or `clickToView`) card is clicked or middle-clicked. Payload: `(object, event)` — the card's object and the native click/auxclick event, for opening it in a new tab on a ctrl/cmd/shift or middle click. Selectable cards emit `select`; they also emit `click` (deprecated) when a `click` listener is present, so migrate selectable consumers to `@select`.
+			 * @event click Emitted when a non-selectable (or `clickToView`) card is clicked. Payload: `(object, event)` — the card's object and the native click event, for opening it in a new tab on a ctrl/cmd/shift click. A middle click emits `aux-click` instead. Selectable cards emit `select`; they also emit `click` (deprecated) when a `click` listener is present, so migrate selectable consumers to `@select`.
 			 * @type {object} The card's object.
 			 */
 			this.$emit('click', this.object, event)
 		},
 
 		/**
-		 * Card-body middle click: emits `click` like a navigating click.
+		 * Card mousedown: record the press for the drag guard, and on a card a
+		 * middle click opens, keep the browser from starting autoscroll.
+		 *
+		 * @param {MouseEvent} event The mousedown event.
+		 */
+		onCardMouseDown(event) {
+			this.onPointerDown(event)
+			if (!this.selectable || this.clickToView) {
+				preventMiddleClickAutoscroll(event)
+			}
+		},
+
+		/**
+		 * Card-body middle click: emits `aux-click`, not `click`, so an existing
+		 * `click` listener that navigates never moves the current tab away.
 		 * Ignored on a select-on-click card, on nested controls and on drags.
 		 *
 		 * @param {MouseEvent} event The auxclick event.
@@ -306,7 +320,11 @@ export default {
 			if (this.selectable && !this.clickToView) {
 				return
 			}
-			this.$emit('click', this.object, event)
+			/**
+			 * @event aux-click Emitted when a non-selectable (or `clickToView`) card is middle-clicked, for opening it in a new tab (see `openRowTarget`). Payload: `(object, event)` — the card's object and the native auxclick event.
+			 * @type {object} The card's object.
+			 */
+			this.$emit('aux-click', this.object, event)
 		},
 	},
 }

package/src/components/CnObjectList/CnObjectList.vue

@@ -163,7 +163,7 @@ export default {
 		},
 	},
 
-	emits: ['click', 'select'],
+	emits: ['click', 'select', 'aux-click'],
 
 	computed: {
 		/**
@@ -194,6 +194,7 @@ export default {
 			const listeners = { select: () => this.toggleSelect(object) }
 			if (!this.selectable) {
 				listeners.click = (_row, event) => this.emitClick(object, event)
+				listeners['aux-click'] = (_row, event) => this.emitAuxClick(object, event)
 			}
 			return listeners
 		},
@@ -202,16 +203,31 @@ export default {
 		 * Emit `click` for a non-selectable row (navigation).
 		 *
 		 * @param {object} object The clicked row's object.
-		 * @param {MouseEvent} [event] The native click/auxclick event.
+		 * @param {MouseEvent} [event] The native click event.
 		 */
 		emitClick(object, event) {
 			/**
-			 * @event click Emitted when a non-selectable row is clicked or middle-clicked (navigation). Payload: `(object, event)` — the row's object and the native click/auxclick event, for opening it in a new tab on a ctrl/cmd/shift or middle click.
+			 * @event click Emitted when a non-selectable row is clicked (navigation). Payload: `(object, event)` — the row's object and the native click event, for opening it in a new tab on a ctrl/cmd/shift click. A middle click emits `aux-click` instead.
 			 * @type {object} The clicked row's object.
 			 */
 			this.$emit('click', object, event)
 		},
 
+		/**
+		 * Emit `aux-click` for a middle click on a non-selectable row, kept off
+		 * `click` so a navigating listener never moves the current tab away.
+		 *
+		 * @param {object} object The clicked row's object.
+		 * @param {MouseEvent} event The native auxclick event.
+		 */
+		emitAuxClick(object, event) {
+			/**
+			 * @event aux-click Emitted when a non-selectable row is middle-clicked, for opening it in a new tab (see `openRowTarget`). Payload: `(object, event)` — the row's object and the native auxclick event.
+			 * @type {object} The clicked row's object.
+			 */
+			this.$emit('aux-click', object, event)
+		},
+
 		toggleSelect(object) {
 			const id = object[this.rowKey]
 			const newIds = this.isSelected(object)

package/src/components/CnObjectListWidget/CnObjectListWidget.vue

@@ -152,6 +152,7 @@
 						:sortOrder="localSort.dir || 'asc'"
 						borderless
 						@rowClick="onRowClick"
+						@rowAuxClick="onRowAuxClick"
 						@select="onSelect"
 						@sort="onSort">
 						<template v-if="mappedRowActions.length > 0" #row-actions="{ row }">
@@ -172,6 +173,7 @@
 					:sortOrder="localSort.dir || 'asc'"
 					borderless
 					@rowClick="onRowClick"
+					@rowAuxClick="onRowAuxClick"
 					@select="onSelect"
 					@sort="onSort">
 					<!-- Declarative per-row actions (`content.rowActions`).
@@ -286,7 +288,7 @@ import CnFkResolveCell from '../CnFkResolveCell/CnFkResolveCell.vue'
 import CnFormDialog from '../CnFormDialog/CnFormDialog.vue'
 import CnPagination from '../CnPagination/CnPagination.vue'
 import CnWidgetEmptyState from '../CnWidgetEmptyState/CnWidgetEmptyState.vue'
-import { actionLink, dispatchAction } from '../../utils/actionsDispatcher.js'
+import { actionLink, dispatchAction, hasActionTargetTokens } from '../../utils/actionsDispatcher.js'
 import { followLinkClick, openRowTarget, resolveHref } from '../../utils/linkNavigation.js'
 import { objectFieldValue } from '../../utils/objectName.js'
 import { dropOptionalUnresolved, hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
@@ -421,7 +423,7 @@ export default {
 		},
 	},
 
-	emits: ['created', 'row-click', 'view-all', 'files-dropped'],
+	emits: ['created', 'row-click', 'row-aux-click', 'view-all', 'files-dropped'],
 
 	data() {
 		return {
@@ -1414,29 +1416,60 @@ export default {
 
 		/**
 		 * Navigate to a configured detail route on row click (when `rowRoute`
-		 * is set and a router is available); a ctrl/cmd/shift or middle click
-		 * opens it in a new tab.
+		 * is set and a router is available); a ctrl/cmd/shift click opens it
+		 * in a new tab.
 		 *
 		 * @param {object} row The clicked object row.
-		 * @param {MouseEvent} [event] The originating click/auxclick event.
+		 * @param {MouseEvent} [event] The originating click event.
 		 * @return {void}
 		 */
 		onRowClick(row, event) {
-			const route = this.content.rowRoute
-			const id = row && (row.id || (row['@self'] && row['@self'].id))
-			if (route && id && this.$router) {
-				markNewTabHandled(event, openRowTarget(event, { name: route, params: { id } }, this.$router))
-			}
+			this.openRowRoute(row, event)
 			/**
 			 * @event row-click Emitted with the clicked object (for hosts that
-			 * want to handle navigation themselves), on a click or middle click.
-			 * Payload: `(row, event)`, the second being the native click/auxclick
-			 * event.
+			 * want to handle navigation themselves). Payload: `(row, event)`, the
+			 * second being the native click event. A middle click emits
+			 * `row-aux-click` instead.
 			 * @type {object}
 			 */
 			this.$emit('row-click', row, event)
 		},
 
+		/**
+		 * A row middle click: opens the configured detail route in a new tab
+		 * and emits `row-aux-click`, not `row-click`.
+		 *
+		 * @param {object} row The clicked object row.
+		 * @param {MouseEvent} event The originating auxclick event.
+		 * @return {void}
+		 */
+		onRowAuxClick(row, event) {
+			this.openRowRoute(row, event)
+			/**
+			 * @event row-aux-click Emitted with the middle-clicked object, for
+			 * opening it in a new tab. Payload: `(row, event)`, the second being
+			 * the native auxclick event.
+			 * @type {object}
+			 */
+			this.$emit('row-aux-click', row, event)
+		},
+
+		/**
+		 * Open `content.rowRoute` for a row: in place, or in a new tab on a
+		 * ctrl/cmd/shift or middle click.
+		 *
+		 * @param {object} row The clicked object row.
+		 * @param {MouseEvent} [event] The originating event.
+		 * @return {void}
+		 */
+		openRowRoute(row, event) {
+			const route = this.content.rowRoute
+			const id = row && (row.id || (row['@self'] && row['@self'].id))
+			if (route && id && this.$router) {
+				markNewTabHandled(event, openRowTarget(event, { name: route, params: { id } }, this.$router))
+			}
+		},
+
 		/**
 		 * Dispatch one declared row action. A `handler` action gets the row
 		 * appended as its last argument, the same convention CnWidgetObjectTable
@@ -1465,8 +1498,7 @@ export default {
 		 * @return {object} `{ href, linkTarget }`, `{ to }`, or `{}`.
 		 */
 		rowActionLink(action) {
-			const target = typeof action.target === 'string' ? action.target : ''
-			if (/[@{]/.test(target)) {
+			if (hasActionTargetTokens(action.target)) {
 				return {}
 			}
 			const link = actionLink(action, { router: this.$router || null })

package/src/components/CnObjectRow/CnObjectRow.vue

@@ -2,7 +2,7 @@
 	<div
 		class="cn-object-row"
 		:class="{ 'cn-object-row--selected': selected }"
-		@mousedown="onPointerDown"
+		@mousedown="onRowMouseDown"
 		@click="onRowClick($event)"
 		@auxclick="onRowAuxClick($event)">
 		<!-- Selection checkbox -->
@@ -68,7 +68,7 @@
 import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { useClickDragGuard } from '../../composables/useClickDragGuard.js'
 import { resolveImageUrl } from '../../utils/resolveImageUrl.js'
-import { isRowMiddleClick } from '../../utils/rowAuxClick.js'
+import { isRowMiddleClick, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'
 import { CnIcon } from '../CnIcon/index.js'
 import { CnStatusBadge } from '../CnStatusBadge/index.js'
 
@@ -146,7 +146,7 @@ export default {
 	// again from `$emit('click', object)` — twice per click, with different
 	// payloads. Declaring the names here removes them from `$attrs`, which is
 	// also what stops VTU v2 recording the native DOM event into `emitted()`.
-	emits: ['select', 'click'],
+	emits: ['select', 'click', 'aux-click'],
 
 	setup() {
 		// Tell a deliberate row click apart from a text-selection drag.
@@ -237,15 +237,29 @@ export default {
 				return
 			}
 			/**
-			 * @event click Emitted when a non-selectable row is clicked or middle-clicked (navigation). Payload: `(object, event)` — the row's object and the native click/auxclick event, for opening it in a new tab on a ctrl/cmd/shift or middle click.
+			 * @event click Emitted when a non-selectable row is clicked (navigation). Payload: `(object, event)` — the row's object and the native click event, for opening it in a new tab on a ctrl/cmd/shift click. A middle click emits `aux-click` instead.
 			 * @type {object} The row's object.
 			 */
 			this.$emit('click', this.object, event)
 		},
 
 		/**
-		 * Row-body middle click: emits `click` like a click on a
-		 * non-selectable row.
+		 * Row mousedown: record the press for the drag guard, and on a
+		 * non-selectable row keep a middle press from starting autoscroll.
+		 *
+		 * @param {MouseEvent} event The mousedown event.
+		 */
+		onRowMouseDown(event) {
+			this.onPointerDown(event)
+			if (!this.selectable) {
+				preventMiddleClickAutoscroll(event)
+			}
+		},
+
+		/**
+		 * Row-body middle click on a non-selectable row: emits `aux-click`, not
+		 * `click`, so an existing `click` listener that navigates never moves
+		 * the current tab away.
 		 *
 		 * @param {MouseEvent} event The auxclick event.
 		 */
@@ -253,7 +267,11 @@ export default {
 			if (this.selectable || !isRowMiddleClick(event)) {
 				return
 			}
-			this.$emit('click', this.object, event)
+			/**
+			 * @event aux-click Emitted when a non-selectable row is middle-clicked, for opening it in a new tab (see `openRowTarget`). Payload: `(object, event)` — the row's object and the native auxclick event.
+			 * @type {object} The row's object.
+			 */
+			this.$emit('aux-click', this.object, event)
 		},
 	},
 }

package/src/components/CnObjectSidebar/CnFilesTab.vue

@@ -153,7 +153,6 @@
 							v-if="file.id"
 							:href="showInFilesUrl(file)"
 							target="_blank"
-							rel="noopener noreferrer"
 							:closeAfterClick="true">
 							<template #icon>
 								<FolderOutline :size="20" />

package/src/components/CnPageRenderer/CnPageRenderer.vue

@@ -128,6 +128,7 @@
 				v-bind="{ ...$attrs, ...resolvedProps }"
 				@view="onRowOpen"
 				@rowClick="onRowOpen"
+				@rowAuxClick="onRowOpen"
 				@editOpen="onRowOpen"
 				@configure="showConfigModal = true">
 				<!-- This `<template v-for>` defines dynamic SLOTS, not a
@@ -203,6 +204,7 @@
 			v-bind="{ ...$attrs, ...resolvedProps }"
 			@view="onRowOpen"
 			@rowClick="onRowOpen"
+			@rowAuxClick="onRowOpen"
 			@editOpen="onRowOpen"
 			@configure="showConfigModal = true">
 			<!-- Dynamic slot definition, not a rendered list — see the note on

package/src/components/CnRelatedObjectsWidget/CnRelatedObjectsWidget.vue

@@ -322,6 +322,26 @@ const CORE_TABS = ['files', 'notes', 'tags', 'tasks', 'auditTrail', 'shares']
 /** One-time guard so the legacy-path deprecation warning logs only once. */
 let legacyWarned = false
 
+/**
+ * Schema titles by numeric schema id, shared by every widget on the page so a
+ * schema is asked for once. OpenRegister's `/uses` and `/used` answer
+ * `@self.schema` as that id ("120"), which is not a word anyone can read.
+ *
+ * @type {Map<string, Promise<string>>}
+ */
+const schemaTitleCache = new Map()
+
+/**
+ * Whether a value is a bare number, the way OpenRegister names a schema by id.
+ *
+ * @param {string|number|undefined|null} value The value.
+ * @return {boolean}
+ */
+function isNumericId(value) {
+	return (typeof value === 'number' && Number.isFinite(value))
+		|| (typeof value === 'string' && /^\d+$/.test(value.trim()))
+}
+
 /**
  * Leaf groups surfaced by the aggregated `/relations` endpoint, in tab order.
  * `responseKey` is the key in the `/relations` payload; `integrationId` is the
@@ -404,6 +424,14 @@ export default {
 		NcEmptyContent,
 	},
 
+	inject: {
+		/**
+		 * The host app's translator (CnAppRoot provides it), so a schema title
+		 * reads in the app's language. Without it a title reads as stored.
+		 */
+		cnTranslate: { default: () => (key) => key },
+	},
+
 	props: {
 		/** Widget title shown in the header. */
 		title: {
@@ -667,6 +695,8 @@ export default {
 			 * @type {HTMLInputElement|null}
 			 */
 			fileInputEl: null,
+			/** Schema titles by numeric schema id, for object rows. */
+			schemaTitles: {},
 			/** Whether any section/tab is currently fetching. */
 			loading: false,
 			/** True once the first fetch has completed (gates the empty state). */
@@ -1359,9 +1389,74 @@ export default {
 				self.name,
 				raw.summary,
 				raw.description,
-			].find((v) => typeof v === 'string' && v.trim() && !isUuid(v)) || self.schema || String(id)
-			const meta = self.schema || raw.schema || ''
-			return { id, label, meta: typeof meta === 'string' ? meta : '', raw }
+			].find((v) => typeof v === 'string' && v.trim() && !isUuid(v))
+			|| [raw.givenName, raw.familyName].filter((v) => typeof v === 'string' && v.trim()).join(' ')
+			// OpenRegister names the schema by numeric id: show its title, never the number.
+			const schema = this.schemaName(self.schema || raw.schema)
+			const finalLabel = label || schema || String(id)
+			return { id, label: finalLabel, meta: schema === finalLabel ? '' : schema, raw }
+		},
+
+		/**
+		 * How a row names its schema: the translated title for a numeric id
+		 * (empty until it is read, or when it cannot be), a slug as it is.
+		 *
+		 * @param {string|number|undefined|null} schema - `@self.schema` of the related object.
+		 * @return {string}
+		 */
+		schemaName(schema) {
+			if (isNumericId(schema)) {
+				const title = this.schemaTitles[String(schema).trim()]
+				return title ? this.cnTranslate(title) : ''
+			}
+			return typeof schema === 'string' ? schema : ''
+		},
+
+		/**
+		 * Read the titles of the numeric schema ids in these envelopes once,
+		 * before the rows are built, so no row shows a number first.
+		 *
+		 * @param {Array<object|null>} envelopes - The `{ results }` payloads.
+		 * @return {Promise<void>}
+		 */
+		async resolveSchemaTitles(envelopes) {
+			const ids = new Set()
+			for (const envelope of envelopes) {
+				for (const raw of ((envelope && envelope.results) || [])) {
+					const schema = (raw && (raw['@self'] || {}).schema) ?? (raw && raw.schema)
+					if (isNumericId(schema)) {
+						ids.add(String(schema).trim())
+					}
+				}
+			}
+			const titles = { ...this.schemaTitles }
+			await Promise.all([...ids].filter((id) => !(id in titles)).map(async (id) => {
+				if (!schemaTitleCache.has(id)) {
+					schemaTitleCache.set(id, this.fetchSchemaTitle(id))
+				}
+				titles[id] = await schemaTitleCache.get(id)
+			}))
+			this.schemaTitles = titles
+		},
+
+		/**
+		 * GET one schema's title; '' when it cannot be read.
+		 *
+		 * @param {string} id - The numeric schema id.
+		 * @return {Promise<string>}
+		 */
+		async fetchSchemaTitle(id) {
+			try {
+				const response = await fetch(generateUrl('/apps/openregister/api/schemas/{id}', { id }), { method: 'GET', headers: buildHeaders() })
+				if (!response.ok) {
+					return ''
+				}
+				const schema = await response.json()
+				const title = schema && (schema.title || schema.slug)
+				return typeof title === 'string' ? title : ''
+			} catch {
+				return ''
+			}
 		},
 
 		/**
@@ -1465,6 +1560,7 @@ export default {
 				const groups = []
 
 				if (this.showObjects) {
+					await this.resolveSchemaTitles([uses, used, contracts])
 					const objectItems = this.mergeObjectResults([uses, used, contracts])
 					groups.push({ key: 'objects', label: this.objectsLabel, icon: 'FileTreeOutline', integrationId: '', items: objectItems, total: objectItems.length })
 				}
@@ -1590,6 +1686,7 @@ export default {
 						calls.push(store.fetchContracts(type, id))
 					}
 					const groups = await Promise.all(calls)
+					await this.resolveSchemaTitles(groups.map((results) => ({ results: results || [] })))
 					const seen = new Set()
 					const merged = []
 					for (const group of groups) {

package/src/components/CnRowActions/CnRowActions.vue

@@ -41,6 +41,7 @@
 <script>
 import { NcActionButton, NcActionLink, NcActions } from '@nextcloud/vue'
 import { followItemActionLink, resolveItemActionLink } from '../../utils/actionLink.js'
+import { isModifiedClick } from '../../utils/linkNavigation.js'
 import { evaluateVisibleWhenLocal, isLocallyDecidableVisibleWhen } from '../../utils/visibleWhen.js'
 import { CnIcon } from '../CnIcon/index.js'
 
@@ -215,16 +216,20 @@ export default {
 		/**
 		 * A link entry was clicked: route a plain in-app click, leave the rest to
 		 * the browser, and emit `action` as a button would. The `handler` is not
-		 * called, since navigating is what the link already does.
+		 * called, since navigating is what the link already does. A modified
+		 * click opens a new tab, so nothing is emitted in this one.
 		 *
 		 * @param {object} action The action definition.
 		 * @param {object} link The resolved link.
 		 * @param {MouseEvent} event The click event.
 		 */
 		onLinkAction(action, link, event) {
+			if (isModifiedClick(event)) {
+				return
+			}
 			followItemActionLink(event, link, this.$router)
 			/**
-			 * @event action User picked an entry. Payload: the action's label and the row. A button entry has already run its `handler`; a link entry navigates instead.
+			 * @event action User picked an entry. Payload: the action's label and the row. A button entry has already run its `handler`; a link entry navigates instead, and a modified (new-tab) click on a link emits nothing.
 			 * @type {{ action: string, row: object|null }}
 			 */
 			this.$emit('action', { action: action.label, row: this.row })

package/src/components/CnSpendAnalyticsWidget/CnSpendAnalyticsWidget.vue

@@ -145,7 +145,8 @@ const DEBOUNCE_MS = 200
  * Data origin (decoupling seam): all data flows through a consumer-supplied
  * `dataSource` prop OR the `cnSpendAnalyticsSource` injection — an object
  * exposing `fetchSummary(args)`, `fetchVendorCommitments(args)`,
- * `fetchNarrative(args)`, and optionally `resolveDeepLink(app, kind, id)`. The
+ * `fetchNarrative(args)`, and optionally `resolveDeepLink(app, kind, id)`
+ * (pure and synchronous: it runs for every row on every render). The
  * renderer imports NO financeq / procest / launchpad service module and never
  * calls axios itself; the consuming app (typically over GraphQL) owns the
  * transport. The `requires.graphql` hint lives only in the registry entry, not
@@ -182,8 +183,9 @@ export default {
 		 * Consumer-supplied data source overriding the
 		 * `cnSpendAnalyticsSource` injection. Must expose `fetchSummary`,
 		 * `fetchVendorCommitments`, and `fetchNarrative`; may expose
-		 * `resolveDeepLink`. When `null` the injection (then the empty state)
-		 * is used.
+		 * `resolveDeepLink`, which must be pure and synchronous, since it is
+		 * called for every row on every render. When `null` the injection
+		 * (then the empty state) is used.
 		 *
 		 * @type {object|null}
 		 */

package/src/components/CnTabs/CnTabs.vue

@@ -467,7 +467,11 @@ export default defineComponent({
 }
 
 /* A fade over the clipped edge, only on the side that hides tabs. Stops a
-   pixel above the bar's rule so the rule keeps its full colour. */
+   pixel above the bar's rule so the rule keeps its full colour.
+
+   z-index 2 so the fades outrank a lifted tab: CnTabsWidget puts the open tab
+   at 1, and a tie goes to DOM order, which would draw that tab over the start
+   fade (it precedes the tabs) while the end fade still covered it. */
 .cn-tabs__strip::before,
 .cn-tabs__strip::after {
 	content: '';
@@ -476,7 +480,7 @@ export default defineComponent({
 	pointer-events: none;
 	position: absolute;
 	width: 56px;
-	z-index: 1;
+	z-index: 2;
 }
 
 .cn-tabs__strip::before {
@@ -513,7 +517,7 @@ export default defineComponent({
 	padding: 0;
 	position: absolute;
 	width: 28px;
-	z-index: 2;
+	z-index: 3;
 }
 
 /* Nextcloud's `button:hover` rule would otherwise fill the chevron. */