@conduction/nextcloud-vue 2.56.0-beta.4 → 2.56.0-beta.5

package/dist/nextcloud-vue.cjs.js.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/dist/nextcloud-vue.cjs.js.map
-size: 33677319 bytes
-sha256: 01032564aced4b648d5ee120b13ec9044a3664bce422f2588379b83ccab9bc63
+size: 33724477 bytes
+sha256: c593f3967574b3cc9859bbff81c44bf2dcc4e304406f11ca2a1267065ef51df2

package/dist/nextcloud-vue.css

@@ -364,6 +364,32 @@
 	background-color: var(--color-primary-light);
 }
 
+/* A row with a route is a real link (see CnDataTable's row link): the anchor
+   in its first cell is stretched over the whole row. The row's own controls
+   sit above it so they stay usable; keep the list in step with NESTED_CONTROL
+   in utils/rowAuxClick.js. */
+.cn-table-row--linked {
+	position: relative;
+}
+
+.cn-table-row__link {
+	position: absolute;
+	inset: 0;
+	cursor: pointer;
+}
+
+.cn-table-row__link:focus-visible {
+	outline: 2px solid var(--color-main-text);
+	outline-offset: -2px;
+}
+
+.cn-table-row--linked .cn-table-col--checkbox,
+.cn-table-row--linked .cn-table-col--actions,
+.cn-table-row--linked td :is(a, button, input, select, textarea, label, summary, [role='button'], [role='checkbox'], [role='link'], [contenteditable='true']):not(.cn-table-row__link) {
+	position: relative;
+	z-index: 1;
+}
+
 /* Column Types */
 .cn-table-col--checkbox {
 	width: 50px;
@@ -5995,6 +6021,32 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	background-color: var(--color-primary-light);
 }
 
+/* A row with a route is a real link (see CnDataTable's row link): the anchor
+   in its first cell is stretched over the whole row. The row's own controls
+   sit above it so they stay usable; keep the list in step with NESTED_CONTROL
+   in utils/rowAuxClick.js. */
+.cn-table-row--linked {
+	position: relative;
+}
+
+.cn-table-row__link {
+	position: absolute;
+	inset: 0;
+	cursor: pointer;
+}
+
+.cn-table-row__link:focus-visible {
+	outline: 2px solid var(--color-main-text);
+	outline-offset: -2px;
+}
+
+.cn-table-row--linked .cn-table-col--checkbox,
+.cn-table-row--linked .cn-table-col--actions,
+.cn-table-row--linked td :is(a, button, input, select, textarea, label, summary, [role='button'], [role='checkbox'], [role='link'], [contenteditable='true']):not(.cn-table-row__link) {
+	position: relative;
+	z-index: 1;
+}
+
 /* Column Types */
 .cn-table-col--checkbox {
 	width: 50px;
@@ -9701,14 +9753,18 @@ a.cn-deck-tab__card-title[data-v-3501a864]:hover {
 	background: none;
 	border: none;
 	padding: 6px 0;
-	cursor: pointer;
 	text-align: left;
 	color: inherit;
 	font: inherit;
 	text-decoration: none;
 	box-sizing: border-box;
 }
-.cn-email-card__open:hover .cn-email-card__subject[data-v-fda51a6a] {
+
+/* Only a row with Mail ids is a link; the rest must not look clickable. */
+a.cn-email-card__open[data-v-fda51a6a] {
+	cursor: pointer;
+}
+a.cn-email-card__open:hover .cn-email-card__subject[data-v-fda51a6a] {
 	color: var(--color-primary-element);
 }
 .cn-email-card__avatar[data-v-fda51a6a] {
@@ -9949,10 +10005,14 @@ a.cn-deck-tab__card-title[data-v-3501a864]:hover {
 	border-radius: var(--border-radius-large, 8px);
 	color: inherit;
 	text-decoration: none;
-	cursor: pointer;
 	position: relative;
 }
-.cn-email-tab__row[data-v-0bcebbac]:hover {
+
+/* Only a row with Mail ids is a link; the rest must not look clickable. */
+a.cn-email-tab__row[data-v-0bcebbac] {
+	cursor: pointer;
+}
+a.cn-email-tab__row[data-v-0bcebbac]:hover {
 	background-color: var(--color-background-hover);
 }
 .cn-email-tab__unread-dot[data-v-0bcebbac] {
@@ -17677,7 +17737,11 @@ to { background-position: -200% 0;
 }
 
 /* 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[data-v-5c1a056f]::before,
 .cn-tabs__strip[data-v-5c1a056f]::after {
 	content: '';
@@ -17686,7 +17750,7 @@ to { background-position: -200% 0;
 	pointer-events: none;
 	position: absolute;
 	width: 56px;
-	z-index: 1;
+	z-index: 2;
 }
 .cn-tabs__strip[data-v-5c1a056f]::before {
 	background: linear-gradient(to right, var(--color-main-background) 30%, transparent);
@@ -17720,7 +17784,7 @@ to { background-position: -200% 0;
 	padding: 0;
 	position: absolute;
 	width: 28px;
-	z-index: 2;
+	z-index: 3;
 }
 
 /* Nextcloud's `button:hover` rule would otherwise fill the chevron. */

package/l10n/en.json

@@ -374,6 +374,7 @@
     "One of": "One of",
     "Open": "Open",
     "Open access:": "Open access:",
+    "Open row": "Open row",
     "Operator": "Operator",
     "Order": "Order",
     "Owner:": "Owner:",

package/l10n/nl.json

@@ -372,6 +372,7 @@
     "One of": "Één van",
     "Open": "Openen",
     "Open access:": "Openbare toegang:",
+    "Open row": "Rij openen",
     "Operator": "Operator",
     "Order": "Volgorde",
     "Owner:": "Eigenaar:",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.56.0-beta.4",
+  "version": "2.56.0-beta.5",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnActionsBar/CnActionsBar.vue

@@ -109,7 +109,7 @@
 				@event add
 				@description User clicked the primary Add button. No payload.
 			-->
-			<!-- With `addHref` / `addTo` the button is a real link (middle-click, new tab), and still emits `add`. -->
+			<!-- With `addHref` / `addTo` the button is a real link (middle-click, new tab), and still emits `add`, except on a modified click, which opens a new tab. -->
 			<NcButton v-if="showAdd"
 				variant="primary"
 				:disabled="addDisabled"
@@ -153,8 +153,7 @@
 
 				<NcActionLink v-if="documentationUrl"
 					:href="documentationUrl"
-					target="_blank"
-					rel="noopener noreferrer">
+					target="_blank">
 					<template #icon>
 						<BookOpenVariantOutline :size="20" />
 					</template>
@@ -372,6 +371,7 @@ import ViewGridOutline from 'vue-material-design-icons/ViewGridOutline.vue'
 import ViewListOutline from 'vue-material-design-icons/ViewListOutline.vue'
 import CnBuildiqEditButton from '../CnBuildiqEditButton/CnBuildiqEditButton.vue'
 import { followItemActionLink, resolveItemActionLink } from '../../utils/actionLink.js'
+import { isModifiedClick } from '../../utils/linkNavigation.js'
 import { CnIcon } from '../CnIcon/index.js'
 
 /**
@@ -923,12 +923,17 @@ export default {
 
 		/**
 		 * Add button click: a plain click on an in-app link routes in place,
-		 * anything else on a link is the browser's. Emits `add` either way.
+		 * anything else on a link is the browser's. Emits `add`, except for a
+		 * modified click on a link, which opens in a new tab: a host `@add`
+		 * would otherwise run in the tab the user is leaving.
 		 *
 		 * @param {MouseEvent} event The click event.
 		 */
 		onAddClick(event) {
 			if (this.addLink) {
+				if (isModifiedClick(event)) {
+					return
+				}
 				followItemActionLink(event, this.addLink, this.$router)
 			}
 			this.$emit('add')
@@ -936,13 +941,17 @@ export default {
 
 		/**
 		 * A header link entry was clicked: route a plain in-app click and emit
-		 * `header-action` as the button would.
+		 * `header-action` as the button would. A modified click is the
+		 * browser's alone (a new tab), so nothing is emitted for it.
 		 *
 		 * @param {object} entry The header action.
 		 * @param {object} link The resolved link.
 		 * @param {MouseEvent} event The click event.
 		 */
 		onHeaderLinkClick(entry, link, event) {
+			if (isModifiedClick(event)) {
+				return
+			}
 			followItemActionLink(event, link, this.$router)
 			this.$emit('header-action', { action: entry.id, id: entry.id })
 		},

package/src/components/CnActionsMenu/CnActionsMenu.vue

@@ -69,7 +69,6 @@
 				v-if="showRequestFeature && resolvedRequestFeatureUrl"
 				:href="resolvedRequestFeatureUrl"
 				target="_blank"
-				rel="noopener noreferrer"
 				:data-testid="`${testidBase}-action-request-feature`"
 				:closeAfterClick="true"
 				@click="onRequestFeatureClick">
@@ -92,7 +91,6 @@
 				v-if="showReportBug && resolvedReportBugUrl"
 				:href="resolvedReportBugUrl"
 				target="_blank"
-				rel="noopener noreferrer"
 				:data-testid="`${testidBase}-action-report-bug`"
 				:closeAfterClick="true">
 				<template #icon>
@@ -104,7 +102,6 @@
 				v-if="showDocumentation && resolvedDocumentationUrl"
 				:href="resolvedDocumentationUrl"
 				target="_blank"
-				rel="noopener noreferrer"
 				:data-testid="`${testidBase}-action-documentation`"
 				:closeAfterClick="true">
 				<template #icon>

package/src/components/CnAdminSettingsShell/CnAdminSettingsShell.vue

@@ -47,8 +47,7 @@
 				<NcButton
 					v-if="showHelp && helpUrl"
 					:href="helpUrl"
-					target="_blank"
-					rel="noopener noreferrer">
+					target="_blank">
 					<template #icon>
 						<HelpCircleOutline :size="20" />
 					</template>

package/src/components/CnBoardView/CnBoardView.vue

@@ -108,6 +108,7 @@
 								:data-card-id="cardKey(card)"
 								:aria-label="cardLabel(card, column)"
 								@click="openCard(card, $event)"
+								@mousedown="preventMiddleClickAutoscroll"
 								@auxclick="onCardAuxClick(card, $event)">
 								{{ openLabel }}
 							</button>
@@ -161,7 +162,7 @@ import { translate as t } from '@nextcloud/l10n'
 import { buildBoardColumns } from '../../utils/boardColumns.js'
 import { buildSwimlanes } from '../../utils/boardSwimlanes.js'
 import { DROP_OUTCOMES, runBoardDrop } from '../../utils/boardTransition.js'
-import { isRowMiddleClick } from '../../utils/rowAuxClick.js'
+import { isRowMiddleClick, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'
 
 /**
  * CnBoardView — the index page's rows as a board, one column per stage.
@@ -253,7 +254,7 @@ export default {
 		},
 	},
 
-	emits: ['card-click', 'moved', 'refused', 'stale'],
+	emits: ['card-click', 'card-aux-click', 'moved', 'refused', 'stale'],
 
 	data() {
 		return {
@@ -333,6 +334,8 @@ export default {
 	methods: {
 		t,
 
+		preventMiddleClickAutoscroll,
+
 		/**
 		 * Open one card. The pointer and the keyboard both come through here,
 		 * so a reader on Enter reaches the same record as a reader on click.
@@ -343,13 +346,15 @@ export default {
 		 */
 		openCard(card, event) {
 			/**
-			 * @event card-click Emitted when a reader opens a card, by click, Enter or middle click. Payload: `(card, event)` — the card row and the native event, so the host can open it in a new tab on a ctrl/cmd/shift or middle click.
+			 * @event card-click Emitted when a reader opens a card, by click or Enter. Payload: `(card, event)` — the card row and the native event, so the host can open it in a new tab on a ctrl/cmd/shift click. A middle click emits `card-aux-click` instead.
 			 */
 			this.$emit('card-click', card, event)
 		},
 
 		/**
-		 * Middle click on a card's open button: open it like a click would.
+		 * Middle click on a card's open button: emits `card-aux-click`, not
+		 * `card-click`, so an existing listener that navigates never moves the
+		 * current tab away.
 		 *
 		 * @param {object} card The card the reader picked.
 		 * @param {MouseEvent} event The auxclick event.
@@ -357,7 +362,10 @@ export default {
 		 */
 		onCardAuxClick(card, event) {
 			if (isRowMiddleClick(event)) {
-				this.openCard(card, event)
+				/**
+				 * @event card-aux-click Emitted when a reader middle-clicks a card, for opening it in a new tab (see `openRowTarget`). Payload: `(card, event)` — the card row and the native auxclick event.
+				 */
+				this.$emit('card-aux-click', card, event)
 			}
 		},
 

package/src/components/CnCardGrid/CnCardGrid.vue

@@ -149,7 +149,7 @@ export default {
 		},
 	},
 
-	emits: ['click', 'select'],
+	emits: ['click', 'select', 'aux-click'],
 
 	computed: {
 		/**
@@ -184,6 +184,14 @@ export default {
 			const listeners = { select: () => this.toggleSelect(object) }
 			if (!this.selectable || this.clickToView) {
 				listeners.click = (_card, event) => this.$emit('click', object, event)
+				// A middle click, kept off `click` so a navigating listener stays put.
+				listeners['aux-click'] = (_card, event) => {
+					/**
+					 * @event aux-click Emitted when a navigating 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', object, event)
+				}
 			}
 			return listeners
 		},

package/src/components/CnContextMenu/CnContextMenu.vue

@@ -94,6 +94,7 @@
 import { NcActionButton, NcActionLink, NcActions } from '@nextcloud/vue'
 import { CTX_MENU_DATA_ATTR, CTX_MENU_POPPER_ATTR } from '../../composables/useContextMenu.js'
 import { followItemActionLink, resolveItemActionLink } from '../../utils/actionLink.js'
+import { isModifiedClick } from '../../utils/linkNavigation.js'
 import { CnIcon } from '../CnIcon/index.js'
 
 /**
@@ -493,13 +494,17 @@ 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 descriptor.
 		 * @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)
 			this.$emit('action', { action: action.label, row: this.targetItem })
 		},

package/src/components/CnDataTable/CnDataTable.md

@@ -229,7 +229,7 @@ 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`.
-- `rowClickRoute` — a function mapping a clicked row to a vue-router route to push.
+- `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
   "View all") with its own handler; works outside a vue-router context.

package/src/components/CnDataTable/CnDataTable.vue

@@ -139,12 +139,13 @@
 						:data-testid-row-id="row[rowKey]"
 						:class="[
 							isSelected(row) ? 'cn-table-row--selected' : '',
+							rowLinks[String(row[rowKey])] ? 'cn-table-row--linked' : '',
 							rowClass ? rowClass(row) : '',
 						]"
-						@mousedown="onPointerDown"
+						@mousedown="onRowMouseDown"
 						@click="onRowClick(row, $event)"
 						@auxclick="onRowAuxClick(row, $event)"
-						@contextmenu.prevent="onRowContextMenu(row, $event)">
+						@contextmenu="onRowContextMenu(row, $event)">
 						<!-- Checkbox -->
 						<td v-if="selectable"
 							class="cn-table-col--checkbox"
@@ -168,6 +169,18 @@
 							:class="[col.class || '', col.cellClass || '', cellClass ? cellClass(row, col) : '']"
 							:style="col.width ? { maxWidth: col.width } : {}"
 							@mouseenter="titleWhenClipped">
+							<!-- A row with a `rowClickRoute` is a real link: this anchor
+							     is stretched over the whole row by CSS, so hovering shows
+							     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])]"
+								class="cn-table-row__link"
+								:href="rowLinks[String(row[rowKey])].href"
+								:aria-label="rowLinkLabel(row, col)"
+								draggable="false"
+								data-testid="cn-row-link"
+								@click="onRowLinkClick(row, $event)" />
 							<!-- The padlock rides the FIRST data cell, beside whatever
 							     names the row. Deliberately OUTSIDE the #column-<key>
 							     slot: a consumer overriding that column's rendering is
@@ -274,9 +287,9 @@ import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { NcCheckboxRadioSwitch, NcLoadingIcon } from '@nextcloud/vue'
 import { useClickDragGuard } from '../../composables/useClickDragGuard.js'
-import { openRowTarget } from '../../utils/linkNavigation.js'
+import { followLinkClick, openRowTarget, resolveHref } from '../../utils/linkNavigation.js'
 import { nextSortState } from '../../utils/multiColumnSort.js'
-import { isNewTabHandled, isRowMiddleClick, markNewTabHandled } from '../../utils/rowAuxClick.js'
+import { isNewTabClick, isNewTabHandled, isRowMiddleClick, markNewTabHandled, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'
 import { DEFAULT_ROW_INDICATOR_CAP, resolveRowIndicators } from '../../utils/rowIndicators.js'
 import { columnsFromSchema } from '../../utils/schema.js'
 import { CnCellRenderer } from '../CnCellRenderer/index.js'
@@ -692,9 +705,11 @@ export default {
 
 		/**
 		 * Convenience navigation (folded from CnTableWidget): a function that
-		 * receives the clicked row and returns a vue-router route to push. When
-		 * set, a row click navigates there (the `row-click` event still fires);
-		 * a ctrl/cmd/shift or middle click opens it in a new tab.
+		 * receives a row and returns the vue-router route it opens. When set,
+		 * each row renders as a real link to that route, stretched over the
+		 * row: a click navigates there (the `row-click` event still fires), and
+		 * a ctrl/cmd/shift or middle click opens it in a new tab. A table whose
+		 * row click selects (`selectable` without `rowClickToView`) gets no link.
 		 *
 		 * @type {((row: object) => object)|null}
 		 */
@@ -717,7 +732,7 @@ export default {
 		},
 	},
 
-	emits: ['row-click', 'row-context-menu', 'select', 'select-all', 'sort', 'view-all'],
+	emits: ['row-click', 'row-aux-click', 'row-context-menu', 'select', 'select-all', 'sort', 'view-all'],
 
 	setup() {
 		// Tell a deliberate row click apart from a text-selection drag.
@@ -867,6 +882,32 @@ export default {
 		 *
 		 * @return {Array<{key: string, order: 'asc'|'desc'}>}
 		 */
+		/**
+		 * The link each row opens, keyed by row key: the `rowClickRoute`
+		 * location and its href. Empty when rows have no route, or when a row
+		 * click selects instead of navigating.
+		 *
+		 * @return {{[key: string]: {target: object, href: string}}}
+		 */
+		rowLinks() {
+			const links = {}
+			if (!this.rowClickRoute || !this.$router || (this.selectable && !this.rowClickToView)) {
+				return links
+			}
+			for (const row of this.effectiveRows) {
+				const route = this.rowClickRoute(row)
+				if (!route) {
+					continue
+				}
+				const target = typeof route === 'string' ? { path: route } : route
+				const href = resolveHref(target, this.$router)
+				if (href) {
+					links[String(row[this.rowKey])] = { target, href }
+				}
+			}
+			return links
+		},
+
 		effectiveSortKeys() {
 			if (this.sortKeys && this.sortKeys.length > 0) {
 				return this.sortKeys
@@ -1343,9 +1384,23 @@ export default {
 		},
 
 		/**
-		 * Row-body middle click: emits `row-click` like a click, so the host
-		 * (or `rowClickRoute`) can open the row in a new tab. Ignored for other
-		 * buttons, nested controls, drags and select-on-click tables.
+		 * Row mousedown: record the press for the drag guard, and on a row a
+		 * middle click opens, keep the browser from starting autoscroll.
+		 *
+		 * @param {MouseEvent} event The mousedown event.
+		 */
+		onRowMouseDown(event) {
+			this.onPointerDown(event)
+			if (!this.selectable || this.rowClickToView) {
+				preventMiddleClickAutoscroll(event)
+			}
+		},
+
+		/**
+		 * Row-body middle click: emits `row-aux-click`, not `row-click`, so an
+		 * existing `row-click` listener that navigates never moves the current
+		 * tab away; `rowClickRoute` still opens the row in a new tab. Ignored
+		 * for other buttons, nested controls, drags and select-on-click tables.
 		 *
 		 * @param {object} row The clicked row object
 		 * @param {MouseEvent} event The originating auxclick event.
@@ -1357,23 +1412,39 @@ export default {
 			if (this.selectable && !this.rowClickToView) {
 				return
 			}
-			this.emitRowClick(row, event)
+			/**
+			 * @event row-aux-click Emitted on a row-body middle click, under the same conditions as `row-click`, so a host can open the row in a new tab (see `openRowTarget`). Payload: `(row, event)` — the clicked row object and the native auxclick event.
+			 * @type {object} The clicked row object.
+			 */
+			this.$emit('row-aux-click', row, event)
+			this.followRowClickRoute(row, event)
 		},
 
 		/**
 		 * Emit `row-click` and follow `rowClickRoute` when set.
 		 *
 		 * @param {object} row The clicked row object
-		 * @param {MouseEvent} [event] The originating click or auxclick event.
+		 * @param {MouseEvent} [event] The originating click event.
 		 */
 		emitRowClick(row, event) {
 			/**
-			 * @event row-click Emitted on a row-body click for navigation, and on a middle click (auxclick). Fires when `selectable` is false, OR when `rowClickToView` is set (selection then happens via the checkbox column). Payload: `(row, event)` — the clicked row object and the native click/auxclick event, so a host can open the row in a new tab on a ctrl/cmd/shift or middle click (see `openRowTarget`).
+			 * @event row-click Emitted on a row-body click for navigation. Fires when `selectable` is false, OR when `rowClickToView` is set (selection then happens via the checkbox column). Payload: `(row, event)` — the clicked row object and the native click event, so a host can open the row in a new tab on a ctrl/cmd/shift click (see `openRowTarget`). A middle click emits `row-aux-click` instead.
 			 * @type {object} The clicked row object.
 			 */
 			this.$emit('row-click', row, event)
-			// A ctrl/cmd/shift or middle click opens the route in a new tab,
-			// unless a row-click listener already did.
+			this.followRowClickRoute(row, event)
+		},
+
+		/**
+		 * Follow `rowClickRoute` for a row click: in place, or in a new tab on
+		 * a ctrl/cmd/shift or middle click.
+		 *
+		 * @param {object} row The clicked row object
+		 * @param {MouseEvent} [event] The originating click or auxclick event.
+		 */
+		followRowClickRoute(row, event) {
+			// A new-tab click opens the route in a new tab, unless a listener
+			// already did.
 			if (this.rowClickRoute && this.$router && !isNewTabHandled(event)) {
 				const route = this.rowClickRoute(row)
 				if (route) {
@@ -1382,14 +1453,57 @@ export default {
 			}
 		},
 
+		/**
+		 * A plain or alt click on a row link routes in place; a new-tab click
+		 * is left to the browser, which opens the href itself.
+		 *
+		 * @param {object} row The row the link belongs to.
+		 * @param {MouseEvent} event The click event.
+		 */
+		onRowLinkClick(row, event) {
+			const link = this.rowLinks[String(row[this.rowKey])]
+			if (!link) {
+				return
+			}
+			// Alt-click on a link downloads it; a row opens like a plain click.
+			if (event.altKey && !isNewTabClick(event) && !event.defaultPrevented) {
+				event.preventDefault()
+				this.$router.push(link.target).catch(() => {})
+				return
+			}
+			followLinkClick(event, link.target, this.$router)
+		},
+
+		/**
+		 * The row link's accessible name: the row's first cell when it holds
+		 * plain text, else a generic name.
+		 *
+		 * @param {object} row The row.
+		 * @param {object} col The first data column.
+		 * @return {string}
+		 */
+		rowLinkLabel(row, col) {
+			const value = this.cellValue(row, col)
+			if (['string', 'number'].includes(typeof value) && String(value).trim() !== '') {
+				return String(value)
+			}
+			return t('nextcloud-vue', 'Open row')
+		},
+
 		/**
 		 * Row right-click: forward the row + originating event so a host can
-		 * open a context menu (the browser default is prevented).
+		 * open a context menu. The browser menu is prevented, except on a row
+		 * link when no host listens, so its link actions stay available.
 		 *
 		 * @param {object} row The right-clicked row object.
 		 * @param {MouseEvent} event The originating contextmenu event.
 		 */
 		onRowContextMenu(row, event) {
+			const fromRowLink = event.target?.closest?.('.cn-table-row__link')
+			// `$.vnode.props`, not `$attrs`: a declared emit is stripped from `$attrs`.
+			if (!fromRowLink || this.$.vnode.props?.onRowContextMenu) {
+				event.preventDefault()
+			}
 			/**
 			 * @event row-context-menu Emitted on a row right-click (contextmenu) for hosts that render a context menu.
 			 * @type {{ row: object, event: MouseEvent }}