@conduction/nextcloud-vue 2.141.0 → 2.143.0

package/l10n/en.json

@@ -2382,7 +2382,16 @@
     "Open profile": "Open profile",
     "Link a contact from your address book.": "Link a contact from your address book.",
     "The value could not be shown.": "The value could not be shown.",
-    "No value": "No value"
+    "No value": "No value",
+    "Link an existing card": "Link an existing card",
+    "New card": "New card",
+    "Could not link card.": "Could not link card.",
+    "Could not create card.": "Could not create card.",
+    "This card is already linked.": "This card is already linked.",
+    "From {date}": "From {date}",
+    "Until {date}": "Until {date}",
+    "More actions for {name}": "More actions for {name}",
+    "Unlink contact": "Unlink contact"
   },
   "plurals": {
     "{count} member": [

package/l10n/nl.json

@@ -1910,7 +1910,7 @@
     "Now": "Nu",
     "Tell me above a number": "Melden vanaf een aantal",
     "Threshold": "Grens",
-    "A message to you when there are {threshold} or more": "Bericht aan u als er {threshold} of meer zijn",
+    "A message to you when there are {threshold} or more": "Bericht aan u als er {threshold} of meer open zijn",
     "Save this search or open a saved one to set an alert on it.": "Sla deze zoekopdracht op of open een opgeslagen zoekopdracht om er een melding op te zetten.",
     "The alert could not be saved.": "De melding kon niet worden opgeslagen.",
     "Your exports could not be loaded.": "Uw exports konden niet worden geladen.",
@@ -1989,7 +1989,7 @@
     "Save current view": "Huidige weergave opslaan",
     "Share view: {name}": "Weergave delen: {name}",
     "The view \"{name}\" leaves your list and the menu on the left.": "De weergave \"{name}\" verdwijnt uit uw lijst en uit het menu links.",
-    "Whoever gets the view sees it under Shared with me. It is yours and stays yours.": "Wie de weergave krijgt, ziet die onder Gedeeld met mij. Die is van u en blijft dat.",
+    "Whoever gets the view sees it under Shared with me. It is yours and stays yours.": "Wie de weergave krijgt, ziet hem onder Gedeeld met mij. Hij is van u en blijft dat.",
     "Whoever you share the view with sees the change at once.": "Iedereen met wie u de weergave deelt, ziet de wijziging meteen.",
     "Reason": "Reden",
     "Could not be read": "Kon niet worden gelezen",
@@ -2635,7 +2635,16 @@
     "Save as draft": "Opslaan als concept",
     "Draft saved at {time}": "Concept opgeslagen om {time}",
     "The draft could not be saved": "Het concept kon niet worden opgeslagen",
-    "No value": "Geen waarde"
+    "No value": "Geen waarde",
+    "Link an existing card": "Bestaande kaart koppelen",
+    "New card": "Nieuwe kaart",
+    "Could not link card.": "De kaart kon niet worden gekoppeld.",
+    "Could not create card.": "De kaart kon niet worden gemaakt.",
+    "This card is already linked.": "Deze kaart is al gekoppeld.",
+    "From {date}": "Vanaf {date}",
+    "Until {date}": "Tot {date}",
+    "More actions for {name}": "Meer acties voor {name}",
+    "Unlink contact": "Contact ontkoppelen"
   },
   "plurals": {
     "{count} member": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.141.0",
+  "version": "2.143.0",
   "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/CnAdminSettingsShell/CnAdminSettingsShell.vue

@@ -2,7 +2,7 @@
 	<div
 		class="cn-admin-settings-shell"
 		:class="[ownLookClass, sectionColumns ? `cn-admin-settings-shell--columns-${sectionColumns}` : '']"
-		:style="versionTitleSize ? { '--cn-board-version-title-size': `${versionTitleSize}px` } : null">
+		:style="shellStyle">
 		<!-- Names a development, test or acceptance environment; cannot be dismissed. Production shows nothing. -->
 		<CnEnvironmentBanner v-if="environmentName" :environment="environmentName" />
 
@@ -780,6 +780,16 @@ export default {
 			type: Number,
 			default: 0,
 		},
+
+		/**
+		 * The board look's gap in px between a card's title and its
+		 * description, when the app's board draws it other than 4px; the
+		 * content follows 10px further (DqBeheerinstellingen 6, so 16).
+		 */
+		descGap: {
+			type: Number,
+			default: 0,
+		},
 	},
 
 	emits: ['update', 'reimported', 'reimport-error', 'tab-change'],
@@ -818,6 +828,23 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * The board look sizes an app's board sets on the shell
+		 * (`versionTitleSize`, `descGap`), as CSS custom properties.
+		 *
+		 * @return {object|null} The style, or null when none is set.
+		 */
+		shellStyle() {
+			const style = {}
+			if (this.versionTitleSize) {
+				style['--cn-board-version-title-size'] = `${this.versionTitleSize}px`
+			}
+			if (this.descGap) {
+				style['--cn-board-settings-desc-gap'] = `${this.descGap}px`
+			}
+			return Object.keys(style).length > 0 ? style : null
+		},
+
 		/**
 		 * The tabs that have an id and a label.
 		 *

package/src/components/CnAiCompanion/CnAiChatPanel.vue

@@ -310,6 +310,7 @@
 						:disabled="streamState.isStreaming"
 						:placeholder="inputPlaceholder"
 						:sendLabel="sendLabel"
+						:stacked="titled"
 						:chatAppId="chatAppId"
 						:speechInputEngine="speechPolicy.inputEngine"
 						:dictationSilenceTimeout="speechPolicy.silenceTimeout"
@@ -1599,10 +1600,21 @@ export default {
 }
 
 .cn-ai-chat-window--titled .cn-ai-chat-window__input {
+	padding: 0;
+	border-top: 0;
 	border-radius: 0;
 	background: transparent;
 }
 
+/* In a card the panel's body takes the card's 16px 18px inset. */
+.cn-ai-chat-window--titled .cn-ai-chat-window__messages {
+	padding: 16px 18px;
+}
+
+.cn-ai-chat-window--titled .cn-ai-chat-window__note {
+	margin: 0 18px 16px;
+}
+
 .cn-ai-chat-window__input {
 	flex: 0 0 auto;
 	padding: 8px;

package/src/components/CnAiCompanion/CnAiInput.vue

@@ -23,7 +23,7 @@
     for the parent's async request to resolve before clearing either).
 -->
 <template>
-	<div class="cn-ai-input" data-testid="cn-ai-input">
+	<div class="cn-ai-input" :class="{ 'cn-ai-input--stacked': stacked }" data-testid="cn-ai-input">
 		<NcNoteCard
 			v-if="uploadError"
 			type="error"
@@ -298,6 +298,15 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * The narrow layout of a card: the text box and the send button on the
+		 * first line, dictation and attach on a line under it.
+		 */
+		stacked: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Backend app id the attach control uploads files to
 		 * (`POST /index.php/apps/{chatAppId}/api/chat/attachments`). See
@@ -1184,6 +1193,28 @@ export default {
 	align-items: flex-end;
 }
 
+/* `stacked`: in a card the box keeps the line, dictation and attach wrap
+   under it (DqZaakAssistent "Vraag iets over deze zaak" + "Vragen"). */
+.cn-ai-input--stacked {
+	padding: 12px 18px;
+}
+
+.cn-ai-input--stacked .cn-ai-input__row {
+	flex-wrap: wrap;
+	align-items: center;
+}
+
+.cn-ai-input--stacked .cn-ai-input__textarea {
+	order: -2;
+	flex: 1 1 calc(100% - 104px);
+	min-width: 0;
+	min-height: 40px;
+}
+
+.cn-ai-input--stacked .cn-ai-input__send-button {
+	order: -1;
+}
+
 .cn-ai-input__file-input {
 	display: none;
 }

package/src/components/CnAuditTrailCard/CnAuditTrailCard.vue

@@ -30,13 +30,15 @@
 			<li
 				v-for="entry in displayedEntries"
 				:key="entry.id"
-				class="cn-audit-card__row">
+				class="cn-audit-card__row"
+				:class="{ 'cn-audit-card__row--stacked': layout === 'stacked' }">
 				<div class="cn-audit-card__row-head">
 					<strong class="cn-audit-card__action">{{ formatAction(entry) }}</strong>
-					<span class="cn-audit-card__when">{{ formatWhen(entry) }}</span>
+					<span v-if="layout !== 'stacked'" class="cn-audit-card__when">{{ formatWhen(entry) }}</span>
 				</div>
 				<div class="cn-audit-card__row-body">
-					<span class="cn-audit-card__actor">{{ formatActor(entry) }}</span>
+					<span v-if="layout === 'stacked'" class="cn-audit-card__when" data-testid="cn-audit-card-when-below">{{ stackedLine(entry) }}</span>
+					<span v-else class="cn-audit-card__actor">{{ formatActor(entry) }}</span>
 					<span
 						v-if="entry.authorized === false"
 						class="cn-audit-card__refused"
@@ -64,8 +66,10 @@ import { NcLoadingIcon } from '@nextcloud/vue'
 import { markRaw } from 'vue'
 import History from 'vue-material-design-icons/History.vue'
 import CnDetailCard from '../CnDetailCard/CnDetailCard.vue'
+import { formatBoardDate, formatTimeOfDay } from '../../utils/boardDate.js'
 import { buildHeaders, prefixUrl } from '../../utils/index.js'
 import { leafSourceUrl } from '../../utils/leafSourceUrl.js'
+import { userDisplayName } from '../../utils/userDisplayName.js'
 import { userLocale } from '../../utils/userLocale.js'
 
 /**
@@ -154,6 +158,12 @@ export default {
 
 		/** Maximum rows to render. */
 		maxDisplay: { type: Number, default: 5 },
+		/**
+		 * `stacked` (DqTaak "Historie"): the action, then one muted line under
+		 * it with the moment ("6 okt 09:05") and who, when the action does not
+		 * already name them. Default: the moment beside the action, who under it.
+		 */
+		layout: { type: String, default: '' },
 		/**
 		 * Actions the card leaves out (case-insensitive), such as `['read']`
 		 * for a history of what changed. It then reads more entries than it
@@ -440,7 +450,27 @@ export default {
 		 * @return {string} Who did it, by name where the entry carries one.
 		 */
 		actorName(entry) {
-			return entry.actorDisplayName || entry.actor || entry.userId || entry.user || ''
+			if (entry.actorDisplayName) {
+				return entry.actorDisplayName
+			}
+			const id = entry.actor || entry.userId || entry.user || ''
+			// A person's user id reads as their display name once it is known.
+			return (id && (!entry.performerType || entry.performerType === 'user') && userDisplayName(String(id))) || id
+		},
+
+		/**
+		 * The muted line of a stacked row: the moment in the board's short
+		 * form ("6 okt 09:05") and who, unless the action names them already.
+		 *
+		 * @param {object} entry The entry.
+		 * @return {string} The line.
+		 * @spec openspec/changes/audit-card-stacked-rows/specs/audit-trail/spec.md#requirement-an-audit-row-can-put-its-moment-under-the-action
+		 */
+		stackedLine(entry) {
+			const raw = entry.creationDateTime || entry.created || entry.timestamp
+			const date = raw ? new Date(raw) : null
+			const when = date && !Number.isNaN(date.getTime()) ? `${formatBoardDate(date)} ${formatTimeOfDay(date)}` : ''
+			return [when, this.formatActor(entry)].filter((part) => part !== '').join(' · ')
 		},
 
 		/**

package/src/components/CnAuditTrailWidget/CnAuditTrailWidget.vue

@@ -16,6 +16,7 @@
 			:scope="resolvedScope"
 			:title="resolvedTitle"
 			:maxDisplay="resolvedMaxDisplay"
+			:layout="content && typeof content.layout === 'string' ? content.layout : ''"
 			:excludeActions="resolvedExcludeActions"
 			:actionLabels="actionLabels"
 			:valueLabels="valueLabels"

package/src/components/CnCellRenderer/CnCellRenderer.vue

@@ -175,7 +175,7 @@
 		</template>
 		<template v-else-if="widget === 'avatar'">
 			<span v-if="avatarName || avatarUserId" class="cn-cell-renderer__avatar">
-				<span v-if="avatarUserId" class="cn-cell-renderer__avatar-picture" aria-hidden="true">
+				<span v-if="avatarUserId && !isBoardLook" class="cn-cell-renderer__avatar-picture" aria-hidden="true">
 					<NcAvatar
 						:user="avatarUserId"
 						:displayName="avatarName || avatarUserId"
@@ -186,6 +186,7 @@
 				<span
 					v-else
 					class="cn-cell-renderer__avatar-initials"
+					:class="avatarToneClass"
 					:style="{ width: avatarSize + 'px', height: avatarSize + 'px' }"
 					aria-hidden="true">{{ avatarInitials }}</span>
 				<span class="cn-cell-renderer__avatar-text">
@@ -942,6 +943,19 @@ export default {
 		 * @return {number}
 		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-avatar-and-date-cells
 		 */
+		/**
+		 * `avatar` widget: the chip's tone class in the board look,
+		 * `widgetProps.tone` `neutral` (DqContacten's grey chip) or the
+		 * default light primary.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/board-avatar-chip/specs/data-table/spec.md#requirement-a-board-avatar-cell-draws-the-initials-chip
+		 */
+		avatarToneClass() {
+			const tone = this.widgetProps && this.widgetProps.tone
+			return tone === 'neutral' ? 'cn-cell-renderer__avatar-initials--neutral' : ''
+		},
+
 		avatarSize() {
 			const size = Number(this.widgetProps && this.widgetProps.size)
 			return Number.isFinite(size) && size > 0 ? size : (this.isBoardLook ? 32 : 24)

package/src/components/CnChecklistRunWidget/CnChecklistRunWidget.vue

@@ -1195,18 +1195,25 @@ export default {
 }
 
 .cn-checklist-run__legend {
+	font-size: 15px;
 	font-weight: 600;
+	line-height: 1.2;
 	padding: 0 4px;
 }
 
 .cn-checklist-run__help {
 	color: var(--color-text-maxcontrast);
+	font-size: 14px;
 	margin: 0;
 }
 
+/* An option reads as text, not as a field label (a theme makes every label
+   bold); 15px as the board draws it (DqInspectie). */
 .cn-checklist-run__choice {
 	align-items: center;
 	display: flex;
+	font-size: 15px;
+	font-weight: 400;
 	gap: 10px;
 	min-height: 34px;
 }
@@ -1225,6 +1232,7 @@ export default {
 }
 
 .cn-checklist-run__group {
+	font-size: 14px;
 	font-weight: 600;
 	margin: 0;
 }

package/src/components/CnChoiceCards/CnChoiceCards.vue

@@ -622,6 +622,7 @@ export default {
 .cn-choice-cards__row-title {
 	font-size: 15px;
 	font-weight: 600;
+	line-height: 1.2;
 }
 
 /* Regular weight on the span itself: a theme that sets every label bold

package/src/components/CnDataTable/CnDataTable.md

@@ -194,6 +194,7 @@ export default {
 | `scrollable` | Boolean | `false` | Constrain height and make the table vertically scrollable |
 | `loadingText` | String | `'Loading…'` | Text shown below the spinner during loading |
 | `rowIcon` | String \| Function | `null` | Optional leading icon for every row: a static MDI name applied to all rows, or `(row) => iconName` to vary it per row (resolved via the CnIcon registry). Unset = no icon column. |
+| `rowIconTone` | String | `'primary'` | The tone of the leading icon's tile in the board look: `primary`, `teal` or `neutral` (DqOrganisaties draws a teal tile). |
 | `rowIndicators` | Array | `[]` | State indicators the page declares for its rows: `{ id, field, equals?, in?, icon, text, tooltip? }`. The condition is `equals`, `in`, or plain truthiness when neither is given. `text` is required, so an indicator is never colour and shape alone. The page declares which indicators exist; a record cannot add one it has not declared. |
 | `rowIndicatorCap` | Number | `3` | How many declared indicators render on the row before the rest move into the row menu, reachable as `indicatorsFor(row).overflow`. |
 | `selectAllLabel` | String | `'Select all rows'` | Accessible name (`aria-label`) for the header select-all checkbox, so screen readers announce a named control (WCAG 4.1.2) |

package/src/components/CnDataTable/CnDataTable.vue

@@ -276,7 +276,7 @@
 							<td
 								v-if="rowIcon"
 								class="cn-table-col--icon"
-								:class="pinClass(selectable ? 1 : 0)"
+								:class="[pinClass(selectable ? 1 : 0), 'cn-table-col--icon-' + iconTone]"
 								:style="pinStyle(selectable ? 1 : 0)">
 								<CnIcon :name="getRowIcon(row)" :size="20" />
 							</td>
@@ -650,6 +650,17 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * The tone of the leading icon's tile in the board look: `primary`
+		 * (default), `teal` or `neutral` (DqOrganisaties draws a teal tile).
+		 *
+		 * @type {string}
+		 */
+		rowIconTone: {
+			type: String,
+			default: 'primary',
+		},
+
 		/**
 		 * State indicators a page declares for its rows. Each entry is
 		 * `{ id, field, equals?, in?, icon, text, tooltip? }`: `field` is a
@@ -1176,6 +1187,16 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * The leading icon tile's tone, one the board look draws.
+		 *
+		 * @return {string} `primary`, `teal` or `neutral`.
+		 * @spec openspec/changes/board-row-icon-tile/specs/data-table/spec.md#requirement-a-board-tables-leading-icon-sits-on-a-tile
+		 */
+		iconTone() {
+			return ['primary', 'teal', 'neutral'].includes(this.rowIconTone) ? this.rowIconTone : 'primary'
+		},
+
 		/**
 		 * Whether the table is drawn as the board look's white card.
 		 *

package/src/components/CnDetailWidgetHost/CnDetailWidgetHost.vue

@@ -86,6 +86,7 @@
 		<CnObjectDataWidget
 			v-else-if="isData && schemaObject"
 			:title="resolvedTitle"
+			:subtitle="widgetSubtitle"
 			:chromeless="isBare"
 			:showActions="!isBare && actionsShown"
 			:icon="widget.icon || null"

package/src/components/CnFactsWidget/CnFactsWidget.vue

@@ -249,7 +249,7 @@ import { formatBoardDate } from '../../utils/boardDate.js'
 import { conditionalLine } from '../../utils/conditionalLine.js'
 import { parseDateValue } from '../../utils/dateVariant.js'
 import { fetchListTotal } from '../../utils/fetchFilterCounts.js'
-import { fillTemplate } from '../../utils/fillTemplate.js'
+import { fillTemplate, formatLongDate } from '../../utils/fillTemplate.js'
 import { formatMoney, metricLocale, unwrapAppConfig } from '../../utils/formatMetric.js'
 import { readPath } from '../../utils/readPath.js'
 import { hasUnresolvedDeepTokens, resolveDeepTokens } from '../../utils/resolveFilterTokens.js'
@@ -416,6 +416,8 @@ export default {
 		cnDispatchAction: { default: null },
 		/** The page's object sidebar channel; a `link.sidebarTab` opens one of its tabs. */
 		objectSidebarState: { default: null },
+		/** The records the detail page reads beside the record (`@context.<name>`), for a `labelPath`. */
+		cnDetailVisibilityRows: { default: null },
 	},
 
 	props: {
@@ -432,13 +434,14 @@ export default {
 		 *   `route` (`{ name, params?, query? }`, `@source.<path>` in a param) on a `title` or a `row` links its value to that route; a param that does not fill leaves it plain.
 		 *   `format: 'user'` shows a Nextcloud user id as the user's display name, read once per id; the entry stays empty until the name is known.
 		 *   `template` ("{available} {unit}") fills its `{path}` placeholders from the record instead of reading `path`; it is empty when every placeholder is. `suffix` (" kg") is added to a value that is not empty.
+		 *   `labelPath` ("@context.caseType.handlerLabel") names a value on the record or the page's `@context` records that labels the row when it holds text; `label` is the fallback.
 		 *   `emptyValue` ("No") is shown, translated, when the entry has no value, so the entry stays drawn whatever `hideEmpty` says (an override that was never set reads "No").
 		 * - `action` — an action drawn as a button under the facts; `headerAction` — one drawn in the card header (reported through the `header` event).
 		 * - `actions` — action buttons under the facts in the `headerActions` shape (`api-call`, `open-form`, `navigate`, `open-modal`, ...; `confirm`, `variant`). `@source.<field>` names a field of the record shown, and an action whose token names an empty field is not drawn. `visibleWhen` reads the record shown; `adminOnly: true` draws the action for an instance admin only (visibility, never authorisation). An api-call or a saved form refreshes the page, and the facts read their source again.
 		 * - `rowsPath` — a path to a list of `{ label, value }` the record holds, drawn as rows after `fields` (a preview the server builds).
 		 * - `headerPill` — a status pill in the card header (reported through the `header` event): `{ path?, text?, map?, variant?, variantMap?, colorMap? }`, read from the record like a `pill` entry (DqBezwaar "Advies ontvangen"); nothing shows while the value is empty.
 		 * - `notice` — `{ text, variant? }`, a note band inside the card under the facts (`info` by default; `success`, `warning` or `error`); the text is translated.
-		 *   `format` is `text` (default), `date` (board short date), `date-long` (always with the year), `list` (an array joined by ", ", each item read at `itemPath`), `bytes` (a size, "1.5 MB"), `number` (in the reader's language, `decimals` fraction digits when set) or `currency` (a money amount in the reader's language, "€ 1.234,50": the code in `currency`, else the record's `currencyField`, else the app's reporting currency, else EUR; `decimals` defaults to 2).
+		 *   `format` is `text` (default), `date` (board short date), `date-long` (always with the year), `longdate` (the month written out, the year only outside this year: "3 oktober"), `list` (an array joined by ", ", each item read at `itemPath`), `bytes` (a size, "1.5 MB"), `number` (in the reader's language, `decimals` fraction digits when set) or `currency` (a money amount in the reader's language, "€ 1.234,50": the code in `currency`, else the record's `currencyField`, else the app's reporting currency, else EUR; `decimals` defaults to 2).
 		 *   `map` turns a raw value into a label (translated). `parts` (on a `line`) lists paths, or `{ path, label?, format? }`, joined by `separator` (default " · "); empty parts are dropped.
 		 * - `source` — `{ register, schema, id }` or `{ url }`; omitted = the current object. `{ register, schema, filter, sort? }` without `id` reads the first object that matches `filter` in `sort` order (`{ field, dir }`): the latest count of a shift. An entry with `from: "object"` reads the current object even then (a client card that also shows the ticket's channel).
 		 * - `endpointSource` — `{ url, method?, params?, responsePath? }`, the block a stat or chart takes: the facts read an app endpoint, shared and cached like those.
@@ -722,7 +725,7 @@ export default {
 				}
 				if (kind === 'row') {
 					const last = out[out.length - 1]
-					const row = { key, label: this.tr(field.label || ''), value, ...this.rowExtras(record, field, value) }
+					const row = { key, label: this.labelOf(record, field), value, ...this.rowExtras(record, field, value) }
 					if (field.route && !row.href) {
 						row.to = this.resolveRoute(field.route, record)
 					}
@@ -1406,6 +1409,30 @@ export default {
 			}
 		},
 
+		/**
+		 * A row's label: the value at `labelPath` (the record, or the page's
+		 * `@context.<name>` records) when it holds text, else `label`, both
+		 * through the host translate. A case type can name its handler
+		 * ("Regisseur") while another keeps "Behandelaar".
+		 *
+		 * @param {object} record The record shown.
+		 * @param {object} field The entry.
+		 * @return {string}
+		 * @spec openspec/changes/facts-label-from-path/specs/facts-widget/spec.md#requirement-a-facts-row-can-take-its-label-from-the-record-or-its-context
+		 */
+		labelOf(record, field) {
+			if (typeof field.labelPath === 'string' && field.labelPath !== '') {
+				const rows = this.cnDetailVisibilityRows && typeof this.cnDetailVisibilityRows === 'object' && 'value' in this.cnDetailVisibilityRows
+					? this.cnDetailVisibilityRows.value
+					: this.cnDetailVisibilityRows
+				const named = readPath({ ...(record || {}), '@context': rows || {} }, field.labelPath)
+				if (typeof named === 'string' && named.trim() !== '') {
+					return this.tr(named.trim())
+				}
+			}
+			return this.tr(field.label || '')
+		},
+
 		/**
 		 * Copy a row's value to the clipboard.
 		 *
@@ -1775,6 +1802,10 @@ export default {
 					.filter((item) => item !== '')
 				return items.join(', ')
 			}
+			// The month written out, the year only outside this year: "3 oktober".
+			if (format === 'longdate') {
+				return formatLongDate(raw)
+			}
 			if (format === 'date' || format === 'date-long') {
 				const date = parseDateValue(raw)
 				if (date === null) {

package/src/components/CnFilesBrowser/CnFilesBrowser.vue

@@ -5,7 +5,7 @@
 <template>
 	<div
 		class="cn-files-browser"
-		:class="{ 'cn-files-browser--dragging': dragging, 'cn-files-browser--drop-panel': dropOverlay && dropDetail !== '' }"
+		:class="{ 'cn-files-browser--dragging': dragging, 'cn-files-browser--drop-panel': dropOverlay && dropDetailTemplate !== '' }"
 		data-testid="cn-files-browser"
 		@dragenter.prevent="onDragEnter"
 		@dragover.prevent="onDragOver"
@@ -38,7 +38,7 @@
 		     Files app and its plugins registered for this folder (a new folder,
 		     a template, a file request) beside a plain upload. -->
 		<div class="cn-files-browser__bar">
-			<NcBreadcrumbs class="cn-files-browser__crumbs">
+			<NcBreadcrumbs class="cn-files-browser__crumbs" :class="{ 'cn-files-browser__crumbs--at-root': atRoot }">
 				<!-- The whole trail from the user's files root, as the Files app
 				     draws it. A crumb above the browser's root links into the Files
 				     app (the browser never leaves its root); the root and everything
@@ -1094,10 +1094,22 @@ export default {
 		 * @spec openspec/changes/files-drop-panel/specs/files-browser/spec.md#requirement-the-drop-state-fills-the-panel-and-says-where-the-files-go
 		 */
 		dropDetail: {
-			type: String,
+			type: [String, Array],
 			default: '',
 		},
 
+		/**
+		 * Named values filled into `dropDetail` as `{name}`, such as the case
+		 * number (`{ "case": "@object.identifier" }` in a detail page's props).
+		 * While a value is unknown the line is left out.
+		 *
+		 * @spec openspec/changes/files-drop-detail-values/specs/files-drop-detail-values/spec.md#requirement-the-drop-detail-line-can-name-the-record
+		 */
+		dropDetailValues: {
+			type: Object,
+			default: null,
+		},
+
 		/** Show a line under the list saying files can be dropped on it. */
 		dropHint: {
 			type: Boolean,
@@ -1390,6 +1402,22 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * The `dropDetail` text: the string, or the text of the first variant
+		 * `{ when, text }` whose `when` is `true` or that has none.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/files-drop-detail-values/specs/files-drop-detail-values/spec.md#requirement-the-drop-detail-line-can-name-the-record
+		 */
+		dropDetailTemplate() {
+			if (typeof this.dropDetail === 'string') {
+				return this.dropDetail
+			}
+			const variants = Array.isArray(this.dropDetail) ? this.dropDetail : []
+			const chosen = variants.find((item) => item && typeof item.text === 'string' && (!('when' in item) || item.when === true))
+			return chosen ? chosen.text : ''
+		},
+
 		/**
 		 * `dropDetail` through the host translate with `{count}` filled, '' when
 		 * there is none or the count it needs is unknown.
@@ -1398,10 +1426,22 @@ export default {
 		 * @return {string}
 		 */
 		dropDetailText() {
-			if (!this.dropDetail) {
+			const template = this.dropDetailTemplate
+			if (!template) {
 				return ''
 			}
-			const text = this.cnTranslate(this.dropDetail)
+			let text = this.cnTranslate(template)
+			// `dropDetailValues`: named values such as the case number; a value
+			// still unknown (an unresolved `@` token, or empty) leaves the line out.
+			// @spec openspec/changes/files-drop-detail-values/specs/files-drop-detail-values/spec.md#requirement-the-drop-detail-line-can-name-the-record
+			const values = this.dropDetailValues && typeof this.dropDetailValues === 'object' ? this.dropDetailValues : {}
+			for (const [name, value] of Object.entries(values)) {
+				const shown = value === null || value === undefined ? '' : String(value)
+				if (shown === '' || shown.startsWith('@')) {
+					return ''
+				}
+				text = text.split(`{${name}}`).join(shown)
+			}
 			if (!text.includes('{count}')) {
 				return text
 			}
@@ -1431,6 +1471,19 @@ export default {
 			return crumbsFor(this.rootPath, this.currentPath, this.rootLabel)
 		},
 
+		/**
+		 * Whether the open folder is the browser's root: the trail then ends on
+		 * the root itself (the board look draws no trail there).
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/board-files-root-crumb/specs/board-files-root-crumb/spec.md#requirement-the-board-files-bar-draws-no-trail-at-the-root
+		 */
+		atRoot() {
+			const root = String(this.rootPath || '/').replace(/\/+$/, '') || '/'
+			const last = this.crumbs[this.crumbs.length - 1]
+			return Boolean(last) && last.path === root
+		},
+
 		/**
 		 * The children in the chosen order, folders first the way the Files app
 		 * lists them.
@@ -2728,7 +2781,8 @@ export default {
 							}
 						})
 						.filter((field) => field.value !== null && field.value !== undefined && field.value !== ''),
-					actions: (Array.isArray(card.actions) ? card.actions : []).filter((action) => action && action.id),
+					actions: (Array.isArray(card.actions) ? card.actions : [])
+						.filter((action) => action && action.id && hostActionApplies(action, node, this.rowValueOf(node))),
 				}))
 		},
 
@@ -3024,7 +3078,18 @@ export default {
 		 * @spec openspec/changes/files-browser-hosts-a-documents-list/specs/files-browser/spec.md
 		 */
 		hostActionsFor(node) {
-			return this.rowActions.filter((action) => hostActionApplies(action, node))
+			return this.rowActions.filter((action) => hostActionApplies(action, node, this.rowValueOf(node)))
+		},
+
+		/**
+		 * A reader of the host's row fields for one file, for `visibleIf.row`.
+		 *
+		 * @param {object} node The file.
+		 * @return {(key: string) => unknown} `(key) => value` over the row the host gave for the file.
+		 * @spec openspec/changes/files-browser-action-visible-if-row/specs/files-browser/spec.md#requirement-a-host-action-can-be-offered-by-a-field-of-the-files-row
+		 */
+		rowValueOf(node) {
+			return (key) => fileColumnValue({ key, source: 'row' }, node, this.resolvedRowData)
 		},
 
 		/**