@conduction/nextcloud-vue 2.102.0 → 2.104.0

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -191,8 +191,9 @@
 			:listIcon="listIcon"
 			:showSortSelect="showSortSelect"
 			:sortOptions="sortSelectOptions"
-			:sortValue="sortSelectValue"
-			:showSearch="inlineSearch || isBoardLook"
+			:sortValue="effectiveSortSelectValue"
+			:showSearch="search !== false && (inlineSearch || isBoardLook)"
+			:searchPlacement="searchPlacement"
 			:searchValue="effectiveSearchValue"
 			:searchPlaceholder="presented('searchPlaceholder') ? cnTranslate(presented('searchPlaceholder')) : presented('searchPlaceholder')"
 			:showCountWithSearch="showCountWithSearch"
@@ -209,7 +210,7 @@
 			:bulkActions="mergedBulkActions"
 			:documentationUrl="documentationUrl"
 			:documentationLabel="documentationLabel || undefined"
-			@sortChange="$emit('sort-change', $event)"
+			@sortChange="onSortSelectChange"
 			@add="onAddClick"
 			@clearSelection="onSelect([])"
 			@removeFilter="onRemoveActiveFilter"
@@ -660,11 +661,12 @@
 		</slot>
 
 		<!-- Body -->
-		<div class="cn-index-page__body" :class="{ 'cn-index-page__body--with-folders': folderSidebar }">
+		<div class="cn-index-page__body" :class="{ 'cn-index-page__body--with-folders': showsFolderPane }">
 			<!-- Optional folder navigation pane (opt-in via the `folderSidebar`
 			     config). Selecting a folder filters the list by the config's
-			     `filterField`; "All" clears it. -->
-			<div v-if="folderSidebar" class="cn-index-page__folder-pane">
+			     `filterField`; "All" clears it. `pane: false` keeps the scope
+			     from the deep link and draws no pane. -->
+			<div v-if="showsFolderPane" class="cn-index-page__folder-pane">
 				<CnFolderSidebar
 					:source="folderSidebarSource"
 					:folders="folderSidebarFolders"
@@ -674,8 +676,8 @@
 					:partial="folderSidebarPartial"
 					:filesPath="folderSidebar.filesPath || '/'"
 					:selectedId="selectedFolderId"
-					:allLabel="folderSidebar.allLabel || undefined"
-					:title="folderSidebar.title || ''"
+					:allLabel="folderSidebar.allLabel ? cnTranslate(folderSidebar.allLabel) : undefined"
+					:title="folderSidebar.title ? cnTranslate(folderSidebar.title) : ''"
 					:idField="folderPassthroughIdField"
 					:nameField="folderPassthroughNameField"
 					:allowCreate="Boolean(folderSidebar.allowCreate)"
@@ -700,6 +702,15 @@
 				<!-- @slot before-collection Content rendered above the collection in EVERY view mode (table, cards, list, map) — e.g. a folder/group strip that must stay visually separate from the objects instead of masquerading as rows or cards. -->
 				<slot name="before-collection" />
 
+				<!-- The selected folder as a heading above the list (a group on
+				     DqAfdelingen: its name, then its parent and member count). -->
+				<div v-if="scopeHeading" class="cn-index-page__scope-heading" data-testid="cn-index-page-scope-heading">
+					<h2 class="cn-index-page__scope-title">
+						{{ scopeHeading.name }}
+					</h2>
+					<span v-if="scopeHeading.subtitle" class="cn-index-page__scope-subtitle" data-testid="cn-index-page-scope-subtitle">{{ scopeHeading.subtitle }}</span>
+				</div>
+
 				<!-- Loading state — initial fetch only; a background refresh keeps the table visible -->
 				<div v-if="showInitialLoader" class="cn-index-page__loading">
 					<!-- name gives NcLoadingIcon a non-empty aria-label (WCAG role-img-alt); empty name ships an unlabeled role="img" -->
@@ -1299,6 +1310,7 @@ import { DEFAULT_ROW_INDICATOR_CAP } from '../../utils/rowIndicators.js'
 import { buildRouteQueryFromViewState, buildViewCreatePayload, extractViewState, extractViewStateFromRouteQuery, normalizeSharedWith, savedViewScope, viewMatchesScope } from '../../utils/savedViewHelpers.js'
 import { columnsFromSchema, fieldsFromSchema } from '../../utils/schema.js'
 import { resolveScopeLayout, resolveScopePresentation } from '../../utils/scopeListLayout.js'
+import { orderToSortKeys, sameSortKeys } from '../../utils/sortOrder.js'
 import { dispatchObjectCreated } from '../../utils/walkthroughSignals.js'
 import { CnActionButtons } from '../CnActionButtons/index.js'
 import { CnActionsBar } from '../CnActionsBar/index.js'
@@ -1968,7 +1980,10 @@ export default {
 		 * case" (manifest `config.headerButtons`). Each is `{ label?, action,
 		 * variant?, icon?, format?, id? }`: `action` is `add` (the Add flow;
 		 * its label defaults to the Add label), `export` (the export leaf in
-		 * `format`, `csv` by default, else the export dialog), `import`,
+		 * `format`, `csv` by default, else the export dialog; with `run` the
+		 * `headerActions` entry of that id; on an `entitySource` page without
+		 * `run` and without a `@mass-export` listener it is not drawn),
+		 * `import`,
 		 * `refresh`, `save-view` (the save-current-view dialog: the board's
 		 * "Zoekopdracht opslaan", label "Save view" by default), or the id of a
 		 * `headerActions` entry; `variant` is
@@ -2148,6 +2163,20 @@ export default {
 			validator: (v) => ['', 'toolbar'].includes(v),
 		},
 
+		/**
+		 * Where the board look's search field sits (manifest
+		 * `config.searchPlacement`): `''` (the default) opens row 2 with it,
+		 * `'toolbar'` puts it on row 1 before the Filter button and the view
+		 * switch (DqTeamwachtrij).
+		 *
+		 * @type {''|'toolbar'}
+		 */
+		searchPlacement: {
+			type: String,
+			default: '',
+			validator: (v) => ['', 'toolbar'].includes(v),
+		},
+
 		/**
 		 * How the quick filters render: `'chips'` (pill strip, default) or
 		 * `'dropdown'` (a single `NcSelect`). Sourced from the manifest as
@@ -3094,6 +3123,16 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * `false` draws no inline search in the actions bar, also in the board
+		 * look, which otherwise draws one on every index page. Fed from the
+		 * manifest as `pages[].config.search`.
+		 */
+		search: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * Keep the "Showing X of Y" counter visible beside the inline search field,
 		 * after any `#after-search` controls (only relevant with `inlineSearch`,
@@ -3161,12 +3200,28 @@ export default {
 			default: () => [],
 		},
 
-		/** Selected value of the standalone sort dropdown (controlled). */
+		/**
+		 * Selected value of the standalone sort dropdown. Empty lets a
+		 * self-fetch page show the option matching its current order.
+		 */
 		sortSelectValue: {
 			type: String,
 			default: '',
 		},
 
+		/**
+		 * The order a self-fetch page opens on when neither the address nor
+		 * `sortKeys`/`sortKey` gives one (manifest `config.defaultOrder`):
+		 * `"-createdAt"`, `"priority:desc,title"`, an `_order` map or a
+		 * `[{ key, order }]` list.
+		 *
+		 * @type {string|object|Array}
+		 */
+		defaultOrder: {
+			type: [String, Object, Array],
+			default: '',
+		},
+
 		/** MDI icon name for the list view-toggle option (manifest `config.listIcon`) */
 		listIcon: {
 			type: String,
@@ -3200,6 +3255,9 @@ export default {
 		 *   defaults to `field`).
 		 * - `folders` — explicit folder list for `source:'custom'`.
 		 * - `allLabel` / `title` / `allowCreate` — passed to CnFolderSidebar.
+		 * - `pane` — `false` draws no pane: the scope still comes from the
+		 *   deep-link filter (`?caseType=<id>`) and still applies its look, as
+		 *   a list narrowed to one case type does without a folder column.
 		 *
 		 * A folder entry is also a SCOPE: it may carry `columns`, `defaultSort`
 		 * and `searchFields`, and while it is selected the list is shown that
@@ -4833,6 +4891,17 @@ export default {
 			return { shown, total: Math.max(shown, Number(this.effectivePagination?.total || 0)) }
 		},
 
+		/**
+		 * Whether the folder pane is drawn: a `folderSidebar` without
+		 * `pane: false`.
+		 *
+		 * @spec openspec/changes/folder-sidebar-pane-off/specs/index-page/spec.md#requirement-a-folder-scope-without-a-pane
+		 * @return {boolean}
+		 */
+		showsFolderPane() {
+			return Boolean(this.folderSidebar) && this.folderSidebar.pane !== false
+		},
+
 		/**
 		 * The CnFolderSidebar source. A `register` source is fetched by this
 		 * component and handed to CnFolderSidebar as a `custom` folder list.
@@ -4881,6 +4950,60 @@ export default {
 			return match || null
 		},
 
+		/**
+		 * The heading above the list for the selected folder: on a `groups`
+		 * pane (or with `folderSidebar.heading: true`), its name and, under
+		 * it, its parent folder and its count. The count reads
+		 * `folderSidebar.countText` (`{count}`, through the app's translate),
+		 * else "{count} members" on a groups pane.
+		 *
+		 * @return {{name: string, subtitle: string}|null} The heading, or null on All.
+		 */
+		scopeHeading() {
+			const cfg = this.folderSidebar
+			const scope = this.activeScope
+			if (!cfg || !scope || !(cfg.source === 'groups' || cfg.heading === true)) {
+				return null
+			}
+			const idField = this.folderPassthroughIdField
+			const name = String(this.getByPath(scope, this.folderPassthroughNameField) ?? this.selectedFolderId)
+			const parentId = scope.parentId ?? scope.parent ?? null
+			const parent = parentId === null || parentId === undefined
+				? null
+				: this.folderSidebarFolders.find((f) => f && String(this.getByPath(f, idField)) === String(parentId))
+			const parts = []
+			if (parent) {
+				parts.push(String(this.getByPath(parent, this.folderPassthroughNameField) ?? parentId))
+			}
+			if (typeof scope.count === 'number') {
+				if (cfg.countText) {
+					parts.push(this.cnTranslate(cfg.countText).replace('{count}', String(scope.count)))
+				} else if (cfg.source === 'groups') {
+					parts.push(n('nextcloud-vue', '{count} member', '{count} members', scope.count, { count: scope.count }))
+				}
+			}
+			return { name, subtitle: parts.join(' · ') }
+		},
+
+		/**
+		 * The sort select's shown value: `sortSelectValue` when the host
+		 * controls it, else on a self-fetch page the option whose order is the
+		 * list's current order (a header click that matches one shows it).
+		 *
+		 * @return {string} The option value, or '' when none matches.
+		 */
+		effectiveSortSelectValue() {
+			if (this.sortSelectValue) {
+				return this.sortSelectValue
+			}
+			if (!this.isSelfFetchMode || !this.list || !this.list.sortKeys) {
+				return ''
+			}
+			const current = this.list.sortKeys.value || []
+			const match = (this.sortSelectOptions || []).find((o) => o && sameSortKeys(this.sortSelectKeys(o), current))
+			return match ? match.value : ''
+		},
+
 		/**
 		 * The `x-index` block the active scope's own schema row carries, for a
 		 * folder list derived from a register. Empty for every other source:
@@ -6654,6 +6777,7 @@ export default {
 						variant: button.variant === 'primary' ? 'primary' : 'secondary',
 						icon,
 						format: button.format === 'excel' ? 'excel' : 'csv',
+						run: typeof button.run === 'string' ? button.run : '',
 						items: Array.isArray(button.items)
 							? button.items.filter((item) => (typeof item === 'string' && item !== '')
 								|| (item && typeof item === 'object' && typeof item.heading === 'string' && item.heading !== ''))
@@ -6661,6 +6785,10 @@ export default {
 					}
 				})
 				.filter((button) => button.label !== '')
+				// An Export with nothing to export through is not drawn: a
+				// named or endpoint source with no `run` and no `@mass-export`
+				// listener.
+				.filter((button) => button.action !== 'export' || this.headerExportAvailable(button))
 				// The Actions menu lists the page's header actions (or the
 				// entries its `items` name), so a menu with nothing to list
 				// is not drawn.
@@ -8449,7 +8577,9 @@ export default {
 			if (button.action === 'add') {
 				this.onAddClick()
 			} else if (button.action === 'export') {
-				if (this.register && this.exportSchemaSlug) {
+				if (button.run) {
+					this.onHeaderAction({ action: button.run, id: button.run })
+				} else if (this.register && this.exportSchemaSlug) {
 					this.onExportClick(button.format)
 				} else {
 					this.showExportDialog = true
@@ -8465,6 +8595,25 @@ export default {
 			}
 		},
 
+		/**
+		 * Whether a header Export has something to export through. Any page
+		 * listing OpenRegister objects (self-fetch or the consumer's
+		 * `objects`) keeps it; a named or endpoint source (`entitySource`)
+		 * needs a `run` naming one of the page's header actions, or a
+		 * `@mass-export` listener.
+		 *
+		 * @spec openspec/changes/index-header-export-source/specs/index-page/spec.md#requirement-a-header-export-is-drawn-only-when-it-can-export
+		 * @param {{run?: string}} button The resolved header button.
+		 * @return {boolean}
+		 */
+		headerExportAvailable(button) {
+			if (!this.isNamedSource || (button && button.run)) {
+				return true
+			}
+			const props = this.$ && this.$.vnode && this.$.vnode.props
+			return Boolean(props && typeof props.onMassExport === 'function')
+		},
+
 		/**
 		 * Click dispatch from CnActionsBar's `@header-action`. Looks
 		 * up the resolved entry by id, invokes its handler if any,
@@ -8585,6 +8734,38 @@ export default {
 			this.$emit('quick-filter-change', this.selectedQuickFilterIndices)
 		},
 
+		/**
+		 * The sort keys a sort-select option stands for: its `order` (any
+		 * `orderToSortKeys` form), else its `value` read as an order.
+		 *
+		 * @param {object} option A `sortSelectOptions` entry.
+		 * @return {Array<{key: string, order: string}>} The sort keys.
+		 */
+		sortSelectKeys(option) {
+			if (!option) {
+				return []
+			}
+			return orderToSortKeys(option.order !== undefined ? option.order : option.value)
+		},
+
+		/**
+		 * A choice in the sort select. On a self-fetch page it orders the list
+		 * as a header click does (`_order`, kept in the address); every page
+		 * also emits `sort-change` with the value.
+		 *
+		 * @param {string} value The chosen option's value.
+		 * @return {void}
+		 */
+		onSortSelectChange(value) {
+			const option = (this.sortSelectOptions || []).find((o) => o && o.value === value)
+			const keys = this.sortSelectKeys(option)
+			if (option && keys.length > 0 && this.isSelfFetchMode && typeof this.list.onSort === 'function') {
+				this.list.onSort({ key: keys[0].key, order: keys[0].order, keys })
+				this.persistViewStateToRoute(this.currentViewState())
+			}
+			this.$emit('sort-change', value)
+		},
+
 		/**
 		 * @param {{key: string, order: string, keys?: Array<{key: string, order: string}>}} payload Sort change from CnDataTable.
 		 * @return {void}

package/src/components/CnIndexPage/useSelfFetchList.js

@@ -7,6 +7,7 @@ import { useObjectStore } from '../../store/index.js'
 // without pulling in this composable's index-only sidebar/subscription wiring.
 import { withPersonalLenses } from '../../utils/personalLenses.js'
 import { parseSortKeysFromQuery, resolveFilterMap, resolveQueryFilters } from '../../utils/routeFilters.js'
+import { orderToSortKeys } from '../../utils/sortOrder.js'
 
 function resolveInitialQuickFilterIndex(quickFilters) {
 	const tabs = Array.isArray(quickFilters) ? quickFilters : null
@@ -219,9 +220,12 @@ export function useSelfFetchList(props, instance, inject, extras = {}) {
 	// legacy single-key `sortKey`/`sortOrder` props.
 	const initialRoute = instance && instance.proxy && instance.proxy.$route
 	// The page's own order, which a lens without a `sort` goes back to.
+	// `defaultOrder` (manifest `config.defaultOrder`) is the order of last
+	// resort, after `sortKeys` and `sortKey`.
+	const defaultOrderKeys = orderToSortKeys(props.defaultOrder)
 	const pageSortKeys = (Array.isArray(props.sortKeys) && props.sortKeys.length > 0)
 		? props.sortKeys
-		: (props.sortKey ? [{ key: props.sortKey, order: props.sortOrder || 'asc' }] : [])
+		: (props.sortKey ? [{ key: props.sortKey, order: props.sortOrder || 'asc' }] : defaultOrderKeys)
 	// The lens that is active on mount may set its own order.
 	const initialTabs = withPersonalLenses(props.quickFilters, props.personalLenses)
 	const initialTabSort = (!isMultiQuickFilter && Array.isArray(initialTabs))
@@ -230,6 +234,7 @@ export function useSelfFetchList(props, instance, inject, extras = {}) {
 	const initialSortKeys = parseSortKeysFromQuery(initialRoute)
 		|| initialTabSort
 		|| (Array.isArray(props.sortKeys) && props.sortKeys.length > 0 ? props.sortKeys : undefined)
+		|| (!props.sortKey && defaultOrderKeys.length > 0 ? defaultOrderKeys : undefined)
 	// Same deep-link restore for facet filters and search, so opening a
 	// shared/bookmarked URL reproduces the same view (CnIndexPage persists
 	// both back to the route on change).

package/src/components/CnObjectListWidget/CnObjectListWidget.vue

@@ -1385,7 +1385,8 @@ export default {
 		 * is the budget). Measures the cell's remaining height below the table
 		 * top, reserves room for the "View all" footer, and derives the row
 		 * budget from the first rendered row's height. No-ops (fitRows null =
-		 * render all fetched rows) outside a fixed-height cell.
+		 * render all fetched rows) outside a fixed-height cell and inside a
+		 * tab panel, unless the content sets `fit: true`.
 		 *
 		 * @return {void}
 		 */
@@ -1407,6 +1408,14 @@ export default {
 				this.fitRows = null
 				return
 			}
+			// A list inside a tab panel does not own the cell, as on a
+			// dashboard: it renders every fetched row unless the content asks
+			// for the fit with `fit: true`.
+			const panel = this.$el.closest('[role="tabpanel"]')
+			if (panel && cell.contains(panel) && !(this.content && this.content.fit === true)) {
+				this.fitRows = null
+				return
+			}
 			const table = this.$el.querySelector('.cn-object-list-widget__table table')
 			if (!table) {
 				return

package/src/components/CnObjectRow/CnObjectRow.vue

@@ -15,6 +15,22 @@
 				@update:modelValue="$emit('select', object)" />
 		</div>
 
+		<!-- `config.leading`: one cell before the title, as a table cell renders
+		     it (`{ key, widget?, widgetProps?, formatter? }`), e.g. the age
+		     "6 dagen" in the team queue. -->
+		<span
+			v-if="leadingCell"
+			class="cn-object-row__lead"
+			:style="leadingCell.width ? { width: leadingCell.width } : null"
+			data-testid="cn-object-row-lead">
+			<CnCellRenderer
+				:value="cellValue(leadingCell)"
+				:formatter="leadingCell.formatter || null"
+				:widget="leadingCell.widget || null"
+				:widgetProps="leadingCell.widgetProps || undefined"
+				:row="object" />
+		</span>
+
 		<!-- Leading icon / image — omitted entirely when nothing is configured
 		     (no image, no icon name, no slot). -->
 		<span v-if="hasLeadingIcon" class="cn-object-row__icon">
@@ -52,6 +68,22 @@
 			</slot>
 		</span>
 
+		<!-- `config.trailing`: cells after the badges, each in its own column
+		     (the case type badge, the due text). -->
+		<span
+			v-for="(cell, index) in trailingCells"
+			:key="cell.key + '-' + index"
+			class="cn-object-row__trail"
+			:style="cell.width ? { width: cell.width } : null"
+			data-testid="cn-object-row-trail">
+			<CnCellRenderer
+				:value="cellValue(cell)"
+				:formatter="cell.formatter || null"
+				:widget="cell.widget || null"
+				:widgetProps="cell.widgetProps || undefined"
+				:row="object" />
+		</span>
+
 		<!-- Trailing actions -->
 		<span v-if="$slots.actions"
 			class="cn-object-row__actions"
@@ -67,8 +99,11 @@
 <script>
 import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { useClickDragGuard } from '../../composables/useClickDragGuard.js'
+import { joinTemplateParts } from '../../utils/fillTemplate.js'
+import { readPath } from '../../utils/readPath.js'
 import { resolveImageUrl } from '../../utils/resolveImageUrl.js'
 import { isRowMiddleClick, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'
+import { CnCellRenderer } from '../CnCellRenderer/index.js'
 import { CnIcon } from '../CnIcon/index.js'
 import { CnStatusBadge } from '../CnStatusBadge/index.js'
 
@@ -98,6 +133,7 @@ export default {
 
 	components: {
 		NcCheckboxRadioSwitch,
+		CnCellRenderer,
 		CnIcon,
 		CnStatusBadge,
 	},
@@ -119,7 +155,15 @@ export default {
 		 * Explicit field mapping. Every key is optional and overrides the
 		 * schema-configuration default.
 		 *
-		 * @type {{ titleField?: string, subtitleField?: string, imageField?: string, iconField?: string, iconName?: string, badgeField?: string, badgeVariantField?: string, badgeVariant?: string, badgeColorMap?: object }}
+		 * `subtitleTemplate` fills `{field}` tokens from the row (empty parts and
+		 * their separators drop). `leading` (one cell) and `trailing` (a cell or
+		 * a list) draw cells as a table column does, `{ key, widget?,
+		 * widgetProps?, formatter? }`: `{ key: "createdAt", widget: "age" }`
+		 * reads "6 dagen", `{ key: "deadline", widget: "date", widgetProps: {
+		 * due: {} } }` the due text. A cell's `width` (CSS) lines the column
+		 * up across rows.
+		 *
+		 * @type {{ titleField?: string, subtitleField?: string, subtitleTemplate?: string, imageField?: string, iconField?: string, iconName?: string, badgeField?: string, badgeVariantField?: string, badgeVariant?: string, badgeColorMap?: object, leading?: object, trailing?: (object|Array<object>) }}
 		 */
 		config: {
 			type: Object,
@@ -168,6 +212,13 @@ export default {
 		},
 
 		subtitle() {
+			if (typeof this.config.subtitleTemplate === 'string' && this.config.subtitleTemplate !== '') {
+				const text = joinTemplateParts(this.config.subtitleTemplate, (key) => {
+					const value = readPath(this.object, key)
+					return value === null || value === undefined ? '' : String(value)
+				})
+				return text.trim() || null
+			}
 			const field = this.config.subtitleField || this.schemaConfig.objectDescriptionField
 			if (field && this.object[field] !== null && this.object[field] !== undefined && this.object[field] !== '') {
 				return String(this.object[field])
@@ -215,9 +266,42 @@ export default {
 		badgeColorMap() {
 			return this.config.badgeColorMap || null
 		},
+
+		/**
+		 * The `config.leading` cell, or null.
+		 *
+		 * @spec openspec/changes/index-row-list-cells/specs/object-row/spec.md#requirement-a-list-row-can-carry-leading-and-trailing-cells
+		 * @return {object|null}
+		 */
+		leadingCell() {
+			const cell = this.config.leading
+			return cell && typeof cell === 'object' && typeof cell.key === 'string' && cell.key !== '' ? cell : null
+		},
+
+		/**
+		 * The `config.trailing` cells (one object or a list), those with a key.
+		 *
+		 * @spec openspec/changes/index-row-list-cells/specs/object-row/spec.md#requirement-a-list-row-can-carry-leading-and-trailing-cells
+		 * @return {Array<object>}
+		 */
+		trailingCells() {
+			const cells = this.config.trailing
+			const list = Array.isArray(cells) ? cells : (cells && typeof cells === 'object' ? [cells] : [])
+			return list.filter((cell) => cell && typeof cell === 'object' && typeof cell.key === 'string' && cell.key !== '')
+		},
 	},
 
 	methods: {
+		/**
+		 * A cell's value: the dot-path `key` read off the row.
+		 *
+		 * @param {{key: string}} cell The cell.
+		 * @return {unknown} The value.
+		 */
+		cellValue(cell) {
+			return readPath(this.object, cell.key)
+		},
+
 		/**
 		 * Row-body click: emits `select` when `selectable` (ignoring drags),
 		 * otherwise emits `click` for navigation.
@@ -297,6 +381,16 @@ export default {
 	background-color: var(--color-primary-element-light);
 }
 
+.cn-object-row__lead,
+.cn-object-row__trail {
+	flex: 0 0 auto;
+	min-width: 0;
+}
+
+.cn-object-row__lead {
+	font-weight: 600;
+}
+
 .cn-object-row__checkbox {
 	flex-shrink: 0;
 }