@conduction/nextcloud-vue 2.58.0 → 2.60.0

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 }}

package/src/components/CnDateAxisView/CnDateAxisView.vue

@@ -35,6 +35,7 @@
 						:style="barStyle(bar)"
 						:aria-label="barLabel(bar)"
 						@click="openRow(bar.row, $event)"
+						@mousedown="preventMiddleClickAutoscroll"
 						@auxclick="onAuxClick(bar.row, $event)">
 						{{ barText(bar) }}
 					</button>
@@ -61,6 +62,7 @@
 					:data-row-id="rowKeyOf(row)"
 					:aria-label="unplannedLabelFor(row)"
 					@click="openRow(row, $event)"
+					@mousedown="preventMiddleClickAutoscroll"
 					@auxclick="onAuxClick(row, $event)">
 					{{ nameOf(row) }}
 				</button>
@@ -72,7 +74,7 @@
 <script>
 import { translate as t } from '@nextcloud/l10n'
 import { buildDateAxisLanes } from '../../utils/dateAxisLanes.js'
-import { isRowMiddleClick } from '../../utils/rowAuxClick.js'
+import { isRowMiddleClick, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'
 
 /**
  * CnDateAxisView — the index page's rows on a time scale.
@@ -133,7 +135,7 @@ export default {
 		},
 	},
 
-	emits: ['row-click'],
+	emits: ['row-click', 'row-aux-click'],
 
 	computed: {
 		/** @return {object} The layout. */
@@ -176,23 +178,27 @@ export default {
 	methods: {
 		t,
 
+		preventMiddleClickAutoscroll,
+
 		/**
 		 * Open one record. Both the bar on the axis and the label of an
 		 * undated row come through here, so the two paths cannot drift.
 		 *
 		 * @param {object} row The record the reader picked.
-		 * @param {MouseEvent} [event] The click or middle-click event.
+		 * @param {MouseEvent} [event] The click event.
 		 * @return {void} Nothing.
 		 */
 		openRow(row, event) {
 			/**
-			 * @event row-click Emitted when a reader opens a record, from its bar on the axis or from the label of an undated row, on a click or a middle click. Payload: `(row, event)` — the row and the native click/auxclick event, so the host can open it in a new tab on a ctrl/cmd/shift or middle click.
+			 * @event row-click Emitted when a reader opens a record, from its bar on the axis or from the label of an undated row. Payload: `(row, event)` — the row and the native click event, so the host can open it in a new tab on a ctrl/cmd/shift click. A middle click emits `row-aux-click` instead.
 			 */
 			this.$emit('row-click', row, event)
 		},
 
 		/**
-		 * Middle click on a bar: open the record like a click would.
+		 * Middle click on a bar or an undated row's label: emits
+		 * `row-aux-click`, not `row-click`, so an existing listener that
+		 * navigates never moves the current tab away.
 		 *
 		 * @param {object} row The record the reader picked.
 		 * @param {MouseEvent} event The auxclick event.
@@ -200,7 +206,10 @@ export default {
 		 */
 		onAuxClick(row, event) {
 			if (isRowMiddleClick(event)) {
-				this.openRow(row, event)
+				/**
+				 * @event row-aux-click Emitted when a reader middle-clicks a record's bar or undated-row label, for opening it in a new tab (see `openRowTarget`). Payload: `(row, event)` — the row and the native auxclick event.
+				 */
+				this.$emit('row-aux-click', row, event)
 			}
 		},
 

package/src/components/CnDetailPage/CnDetailPage.md

@@ -394,7 +394,7 @@ CnDetailPage consumes the same `actions[].handler` contract as CnIndexPage. When
 | `relatedCollections` | Array | `[]` | Declarative related-object list sections below the body; each `{ title?, register, schema, filter?, columns?, sort?, limit?, rowRoute? }` renders a `CnObjectListWidget` scoped to this object via `@objectId`. Emits `@related-row-click`. See docs `cn-related-collections.md`. |
 | `summaryAggregates` | Array | `[]` | Declarative cross-schema count/sum/avg chips in the header; each `{ label, register, schema, metric?, field?, filter?, format? }` scoped to this object. See docs `cn-summary-aggregates.md`. |
 | `relationLinks` | Array | `[]` | Declarative relation-link actions; each `{ label?, register, schema, fkField, labelField?, allowCreate?, title?, selectLabel? }` opens a search-and-link modal that patches a FK on this object. Emits `@relation-linked`. See docs `cn-relation-link-modal.md`. |
-| `bodyWidgets` | Array | `[]` | Declarative IN-BODY sections; each `{ id?, component, title?, props?, placement?, colSpan? }` renders a registered host-app component as a titled body section (NOT the sidebar) with token-resolved props (`@objectId` / `@object.<field>` / `@workspace.<key>`) and the object context provided on `cnSectionContext`. `placement` = `before-body`/`after-data`/`after-related`/`end`. No sidebar tab required. See docs `cn-body-sections.md`. |
+| `bodyWidgets` | Array | `[]` | Declarative IN-BODY sections; each `{ id?, component, title?, props?, placement?, colSpan? }` renders a registered host-app component as a titled body section (NOT the sidebar) with token-resolved props (`@objectId` / `@object.<field>` / `@workspace.<key>`) and the object context provided on `cnSectionContext`, whose `setObject(object)` shows an object a section saved without a re-fetch. `placement` = `before-body`/`after-data`/`after-related`/`end`. No sidebar tab required. See docs `cn-body-sections.md`. |
 
 ## Header actions menu
 
@@ -405,6 +405,22 @@ The page header's overflow menu carries Refresh plus the mandatory trio Request
 | `showReportBug` | Boolean | `true` | Whether the Report-a-bug entry renders in the page-header menu. |
 | `showDocumentation` | Boolean | `true` | Whether the Documentation entry renders. Its target is resolved by the shared menu from the app-wide documentation base plus this page's id, so leaving it on costs the host nothing. |
 
+## The action model
+
+Four levels of action and the case surfaces around them. All opt in. See [the reference page](../../../docs/components/cn-detail-page.md#the-action-model) for manifest examples.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `primaryActionByStage` | Object \| null | `null` | Map from a stage value to the primary action: an action object or the id of a header action. Falls back to `primaryAction`. |
+| `stageField` | String | `'status'` | Dot-path to the record's stage. |
+| `quickActions` | Array | `[]` | At most three always visible header buttons. |
+| `actionsMenu` | Object \| null | `null` | `{ showRefresh?, showHelpLinks?, label? }` for the overflow menu. |
+| `nextStep` | Object \| null | `null` | The "what now" card per stage, rendered by `CnNextStepCard`. |
+| `typePill` | Object \| null | `null` | `{ field, colorMap?, labels?, variant? }`, a pill above the title. |
+| `statusPill` | Object \| null | `null` | A second pill, same shape. |
+| `sideColumn` | Array | `[]` | Widget definitions or widget ids, rendered as a column of cards beside the body. |
+| `isAdmin` | Boolean \| null | `null` | Shows `adminOnly` header actions. `null` reads it from Nextcloud. |
+
 ## The record as a place
 
 `listNavigation`, `primaryAction` and `tabInAddress` make a record somewhere a handler stays. All three are off by default. See [the reference page](../../../docs/components/cn-detail-page.md#the-record-as-a-place).