@conduction/nextcloud-vue 2.111.0 → 2.112.0

package/src/components/CnFormDialog/CnFormDialog.vue

@@ -2,7 +2,7 @@
 	<CnDialog
 		:look="look"
 		:width="width"
-		defaultWidth="form"
+		:defaultWidth="columns === 2 ? 'wizard' : 'form'"
 		:eyebrow="eyebrow"
 		:subtitle="subtitle"
 		:name="resolvedTitle"

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -947,7 +947,11 @@
 										<CnStatusBadge v-for="(pill, index) in item.pills"
 											:key="index"
 											:label="pill.label"
-											:variant="pill.variant" />
+											:variant="pill.variant">
+											<template v-if="pill.icon" #icon>
+												<CnIcon :name="pill.icon" :size="14" />
+											</template>
+										</CnStatusBadge>
 										<span v-if="item.due" class="cn-index-page__map-due">{{ item.due }}</span>
 									</span>
 								</div>
@@ -995,6 +999,7 @@
 					:swimlaneField="board.swimlaneField || ''"
 					:dueRule="board.dueRule || null"
 					:cardRoles="board.card || null"
+					:pillLooks="refLooks"
 					:colorField="board.colorField || ''"
 					:sumField="board.sumField || ''"
 					:sumFormat="boardSumFormat"
@@ -1047,7 +1052,7 @@
 					v-else-if="currentViewMode === 'list'"
 					:objects="displayObjects"
 					:schema="effectiveSchema"
-					:config="listConfig"
+					:config="renderedListConfig"
 					:selectable="selectable"
 					:selectedIds="internalSelectedIds"
 					:rowKey="rowKey"
@@ -1107,6 +1112,7 @@
 					:clickToView="rowClickOpens"
 					:cardFields="resolvedCardFields"
 					:cardLayout="cardLayout"
+					:pillLooks="refLooks"
 					:cardFieldColumns="cardFieldColumns"
 					:accentOf="cardAccent"
 					:selectedIds="internalSelectedIds"
@@ -1763,6 +1769,8 @@ export default {
 
 	inject: {
 		cnCustomComponents: { default: () => ({}) },
+		/** The app's named formatters, provided by CnAppRoot, for the map list's pills and template tokens. */
+		cnFormatters: { default: () => ({}) },
 		/** The permissions the user holds, provided by CnAppRoot; for gated page tabs. */
 		cnPermissions: { default: () => [] },
 		/** The app config an ancestor provides, for `@config.<key>` in quick-filter labels. */
@@ -4121,6 +4129,8 @@ export default {
 			boardPrevPageSize: this.viewMode === 'board' ? ((this.pagination && this.pagination.limit) || 20) : null,
 			/** Resolved labels of reference columns: `{ [columnKey]: { [id]: label|null } }`. */
 			refLabels: {},
+			/** Colour and icon names of the records badge columns point at: `{ [columnKey]: { [id]: { color, icon } } }`. */
+			refLooks: {},
 			/** Count per tab-strip index, for the entries that asked for one; null = none. */
 			tabCounts: null,
 			// The counts of the `filterStrip` pills, by pill key ('all', 'v0', ...).
@@ -6035,6 +6045,12 @@ export default {
 		 */
 		renderedColumns() {
 			let cols = this.tableColumns
+			if (this.refLookSpecs.length > 0) {
+				const lookKeys = new Set(this.refLookSpecs.map((spec) => spec.key))
+				cols = cols.map((col) => (col && typeof col === 'object' && lookKeys.has(col.key)
+					? { ...col, widgetProps: { ...(col.widgetProps || {}), looks: this.refLooks[col.key] || {} } }
+					: col))
+			}
 			if (this.refLabelSpecs.length > 0) {
 				const byKey = new Map(this.refLabelSpecs.map((s) => [s.key, s]))
 				cols = cols.map((col) => {
@@ -6105,6 +6121,108 @@ export default {
 		 *
 		 * @return {Object<string, string[]>} Distinct ids per column key.
 		 */
+		/**
+		 * The pills that take their tone and icon from the record they point at
+		 * (`resolve: { colorField?, iconField?, register?, schema? }`): badge
+		 * columns and the list view's leading and trailing cells
+		 * (`widgetProps.resolve`), the board card's pill (`board.card.resolve`)
+		 * and the record card's pills (`cardLayout` headPill, footerPill, chips).
+		 * Register and schema default to the field's reference in the schema.
+		 *
+		 * @return {Array<{key: string, register: string, schema: string, colorField: string, iconField: string}>} The specs.
+		 * @spec openspec/changes/pill-color-field/specs/pill-color-field/spec.md#requirement-a-badge-cell-takes-its-tone-and-icon-from-the-referenced-record
+		 */
+		refLookSpecs() {
+			const list = this.listConfig || {}
+			const listCells = [list.leading, ...(Array.isArray(list.trailing) ? list.trailing : [list.trailing])]
+			const badgeSources = [...this.tableColumns, ...listCells]
+				.filter((c) => c && typeof c === 'object' && c.widget === 'badge' && c.widgetProps)
+				.map((c) => ({ key: c.key, resolve: c.widgetProps.resolve }))
+			// The board card's pill (`board.card.pill` with `board.card.resolve`)
+			// and the record card's pills (`cardLayout` headPill, footerPill,
+			// chips, each with its own `resolve`).
+			const card = this.board && this.board.card && typeof this.board.card === 'object' ? this.board.card : {}
+			const layout = this.cardLayout && typeof this.cardLayout === 'object' ? this.cardLayout : {}
+			const layoutPills = [layout.headPill, layout.footerPill, ...(Array.isArray(layout.chips) ? layout.chips : [])]
+				.filter((def) => def && typeof def === 'object')
+				.map((def) => ({ key: def.field, resolve: def.resolve }))
+			// The map list's pills (`mapConfig.list.pills`, each with its own `resolve`).
+			const mapListPills = (this.mapListEnabled && Array.isArray(this.mapConfig.list.pills) ? this.mapConfig.list.pills : [])
+				.filter((def) => def && typeof def === 'object')
+				.map((def) => ({ key: def.path, resolve: def.resolve }))
+			const seen = new Set()
+			const cols = [...badgeSources, { key: card.pill, resolve: card.resolve }, ...layoutPills, ...mapListPills].filter((c) => {
+				const wanted = typeof c.key === 'string' && c.key !== '' && c.resolve && typeof c.resolve === 'object'
+					&& (c.resolve.colorField || c.resolve.iconField) && !seen.has(c.key)
+				if (wanted) {
+					seen.add(c.key)
+				}
+				return wanted
+			})
+			if (cols.length === 0) {
+				return []
+			}
+			const fields = this.effectiveSchema ? fieldsFromSchema(this.effectiveSchema, { includeReadOnly: true }) : []
+			const specs = []
+			for (const col of cols) {
+				const resolve = col.resolve
+				const field = fields.find((f) => f.key === col.key)
+				const ref = (field && field.reference) || {}
+				const register = resolve.register || ref.register || (typeof this.register === 'string' ? this.register : '')
+				const schema = resolve.schema || (ref.schema !== undefined && ref.schema !== null ? String(ref.schema) : '')
+				if (!register || !schema) {
+					continue
+				}
+				specs.push({ key: col.key, register, schema, colorField: resolve.colorField || '', iconField: resolve.iconField || '' })
+			}
+			return specs
+		},
+
+		/**
+		 * `listConfig` with the referenced records' looks on its badge cells,
+		 * as `renderedColumns` does for the table.
+		 *
+		 * @return {object} The list view's config.
+		 * @spec openspec/changes/pill-color-field/specs/pill-color-field/spec.md#requirement-a-badge-cell-takes-its-tone-and-icon-from-the-referenced-record
+		 */
+		renderedListConfig() {
+			const list = this.listConfig
+			if (!list || this.refLookSpecs.length === 0) {
+				return list
+			}
+			const lookKeys = new Set(this.refLookSpecs.map((spec) => spec.key))
+			const withLooks = (cell) => (cell && typeof cell === 'object' && lookKeys.has(cell.key)
+				? { ...cell, widgetProps: { ...(cell.widgetProps || {}), looks: this.refLooks[cell.key] || {} } }
+				: cell)
+			return {
+				...list,
+				...(list.leading ? { leading: withLooks(list.leading) } : {}),
+				...(list.trailing ? { trailing: Array.isArray(list.trailing) ? list.trailing.map(withLooks) : withLooks(list.trailing) } : {}),
+			}
+		},
+
+		/**
+		 * The ids each `refLookSpecs` column shows on screen.
+		 *
+		 * @return {{[key: string]: Array<string>}} Sorted ids by column key.
+		 */
+		refLookIds() {
+			const out = {}
+			for (const spec of this.refLookSpecs) {
+				const ids = new Set()
+				for (const row of this.displayObjects) {
+					const v = row ? row[spec.key] : undefined
+					;(Array.isArray(v) ? v : [v]).forEach((id) => {
+						if (id !== null && id !== undefined && id !== '' && typeof id !== 'object') {
+							ids.add(String(id))
+						}
+					})
+				}
+				out[spec.key] = [...ids].sort()
+			}
+			return out
+		},
+
 		refLabelIds() {
 			const out = {}
 			const facets = this.storeFacets || this.resolvedSidebar.facets || {}
@@ -6372,13 +6490,15 @@ export default {
 			const translated = {
 				...list,
 				title: this.cnTranslate(list.title),
-				sub: list.sub ? this.cnTranslate(list.sub) : '',
+				sub: Array.isArray(list.sub) ? list.sub.map((s) => this.cnTranslate(s)) : (list.sub ? this.cnTranslate(list.sub) : ''),
 				due: list.due ? this.cnTranslate(list.due) : '',
 			}
 			return mapListItems(this.displayObjects, translated, {
 				rowKey: this.rowKey,
 				located: (row) => Boolean(this.resolveRowGeometry(row)),
 				translate: (text) => this.cnTranslate(text),
+				formatters: this.cnFormatters,
+				looks: this.refLooks,
 			})
 		},
 
@@ -8002,6 +8122,15 @@ export default {
 			},
 		},
 
+		// Read the colour and icon of the records badge columns point at.
+		refLookIds: {
+			immediate: true,
+			deep: true,
+			handler() {
+				this.loadRefLooks()
+			},
+		},
+
 		// The Active line names a referenced value, not its id.
 		activeFilterRefIds: {
 			deep: true,
@@ -8453,6 +8582,45 @@ export default {
 			}))
 		},
 
+		/**
+		 * Read the colour and icon names `refLookSpecs` columns need, for the
+		 * rows on screen, with the same resolver as the labels. A failure
+		 * leaves the badge as declared.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/pill-color-field/specs/pill-color-field/spec.md#requirement-a-badge-cell-takes-its-tone-and-icon-from-the-referenced-record
+		 */
+		async loadRefLooks() {
+			if (this.refLookSpecs.length === 0) {
+				return
+			}
+			if (!this._refLabelResolver) {
+				this._refLabelResolver = createRefLabelResolver(() => {
+					try {
+						return (this.list && this.list.objectStore) || useObjectStore()
+					} catch {
+						return null
+					}
+				})
+			}
+			const read = (spec, ids, name) => (name
+				? this._refLabelResolver.resolve(spec.register, spec.schema, ids, name, { strict: true }).catch(() => ({}))
+				: Promise.resolve({}))
+			await Promise.all(this.refLookSpecs.map(async (spec) => {
+				const known = this.refLooks[spec.key] || {}
+				const ids = (this.refLookIds[spec.key] || []).filter((id) => !Object.hasOwn(known, id))
+				if (ids.length === 0) {
+					return
+				}
+				const [colors, icons] = await Promise.all([read(spec, ids, spec.colorField), read(spec, ids, spec.iconField)])
+				const found = {}
+				ids.forEach((id) => {
+					found[id] = { color: (colors && colors[id]) || null, icon: (icons && icons[id]) || null }
+				})
+				this.refLooks = { ...this.refLooks, [spec.key]: { ...(this.refLooks[spec.key] || {}), ...found } }
+			}))
+		},
+
 		/**
 		 * Whether a saved view shows its record count (`viewCounts`).
 		 *
@@ -11614,7 +11782,7 @@ export default {
 				return
 			}
 			const badge = this.savedViewMenuBadge(view)
-			menu.toggle({ id: String(view.id || view.slug), page: this.savedViewPage, name: view.name, ...(badge ? { badge } : {}) })
+			menu.toggle({ id: String(view.id || view.slug), page: this.savedViewPage, name: view.name, ...(typeof view.icon === 'string' && view.icon !== '' ? { icon: view.icon } : {}), ...(badge ? { badge } : {}) })
 		},
 
 		/**
@@ -12149,7 +12317,9 @@ export default {
 			if (resultData && resultData.success && this._refLabelResolver) {
 				this._refLabelResolver.invalidate()
 				this.refLabels = {}
+				this.refLooks = {}
 				this.loadRefLabels()
+				this.loadRefLooks()
 			}
 		},
 

package/src/components/CnNcDashboardList/CnNcDashboardList.vue

@@ -32,6 +32,7 @@
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { fetchEndpointSource } from '../../composables/useEndpointSource.js'
+import { resolveDue } from '../../utils/dueText.js'
 import { fillTemplate } from '../../utils/fillTemplate.js'
 import { openRowTarget } from '../../utils/linkNavigation.js'
 import { readPath } from '../../utils/readPath.js'
@@ -70,6 +71,9 @@ function appUrl(url) {
  * - `itemsPath`: the rows' path in the response, when not `results`.
  * - `limit`: the most rows shown (default 7).
  * - `title`, `subtitle`: templates filled from a row (default `{title}`, none).
+ * - `due`: `{ field, ...dueText config }`: the trailing line says how a date
+ *   stands ("3 days overdue", "Due today", the date or the days left), in
+ *   place of `subtitle` (see `resolveDue`).
  * - `href`: a template for a row's page (`/apps/dossiq/cases/{id}`).
  * - `viewAll`: `{ href, label? }`.
  * - `emptyText`: text for an empty list.
@@ -125,7 +129,7 @@ export default {
 				return {
 					id: String(id),
 					mainText: this.fill(this.config.title || '{title}', item) || String(id),
-					subText: this.fill(this.config.subtitle, item),
+					subText: this.subtitleOf(item),
 					href: this.config.href ? appUrl(fillTemplate(this.config.href, { ...item, id })) : '',
 				}
 			})
@@ -155,6 +159,22 @@ export default {
 			return typeof value === 'string' && value !== '' ? this.cnTranslate(value) : ''
 		},
 
+		/**
+		 * A row's trailing line: how its due date stands, or the subtitle template.
+		 *
+		 * @spec openspec/changes/nc-dashboard-due/specs/nc-dashboard-widgets/spec.md#requirement-a-dashboard-row-says-how-its-date-stands
+		 * @param {object} item The row.
+		 * @return {string}
+		 */
+		subtitleOf(item) {
+			const due = this.config.due
+			if (due && typeof due === 'object' && due.field) {
+				const resolved = resolveDue(readPath(item, due.field), due, (text) => this.cnTranslate(text))
+				return resolved ? resolved.text : ''
+			}
+			return this.fill(this.config.subtitle, item)
+		},
+
 		/**
 		 * A template filled from a row, translated first.
 		 *

package/src/components/CnObjectCard/CnObjectCard.md

@@ -138,6 +138,7 @@ export default {
 |---|---|---|---|
 | `maxMetadata` | `Number` | `4` | Maximum number of schema properties to show in the metadata section. Properties are sorted by their `order` value before slicing |
 | `accent` | `Object` | `null` | Status accent `{ variant, icon?, label? }`: a colored start border and, with `icon`, a colored icon before the title. `variant` is `success`, `warning`, `error`, `info` or `primary`; `label` is the icon's tooltip and accessible name |
+| `pillLooks` | `Object` | `{}` | The referenced records' colour and icon names, by field and id (`{ [field]: { [id]: { color, icon } } }`, read by CnIndexPage). A record layout pill with `resolve: { colorField?, iconField? }` takes its record's tone and icon from here. |
 
 ## Slots
 

package/src/components/CnObjectCard/CnObjectCard.vue

@@ -24,7 +24,11 @@
 					class="cn-object-card__record-pill"
 					:label="recordHeadPill.label"
 					:variant="recordHeadPill.variant"
-					data-testid="cn-object-card-head-pill" />
+					data-testid="cn-object-card-head-pill">
+					<template v-if="recordHeadPill.icon" #icon>
+						<CnIcon :name="recordHeadPill.icon" :size="14" />
+					</template>
+				</CnStatusBadge>
 				<span v-if="recordNumber" class="cn-object-card__record-number" data-testid="cn-object-card-number">{{ recordNumber }}</span>
 				<div
 					v-if="$slots.actions"
@@ -63,7 +67,11 @@
 					:key="chip.field"
 					class="cn-object-card__record-pill"
 					:label="chip.label"
-					:variant="chip.variant" />
+					:variant="chip.variant">
+					<template v-if="chip.icon" #icon>
+						<CnIcon :name="chip.icon" :size="14" />
+					</template>
+				</CnStatusBadge>
 			</div>
 			<div v-if="$slots.badges" class="cn-object-card__badges">
 				<slot name="badges" :object="object" />
@@ -74,7 +82,11 @@
 					class="cn-object-card__record-pill"
 					:label="recordFootPill.label"
 					:variant="recordFootPill.variant"
-					data-testid="cn-object-card-foot-pill" />
+					data-testid="cn-object-card-foot-pill">
+					<template v-if="recordFootPill.icon" #icon>
+						<CnIcon :name="recordFootPill.icon" :size="14" />
+					</template>
+				</CnStatusBadge>
 				<span
 					v-if="recordDate"
 					class="cn-object-card__record-date"
@@ -207,6 +219,7 @@ import { normalizeLook } from '../../composables/useLook.js'
 import { isBadgeVariant } from '../../utils/badgeVariants.js'
 import { formatBoardDate } from '../../utils/boardDate.js'
 import { resolveDateVariant } from '../../utils/dateVariant.js'
+import { pillLook } from '../../utils/detailActionModel.js'
 import { resolveDue } from '../../utils/dueText.js'
 import { readPath } from '../../utils/readPath.js'
 import { resolveImageUrl } from '../../utils/resolveImageUrl.js'
@@ -375,6 +388,20 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * The referenced records' colour and icon names, by field and id
+		 * (`{ [field]: { [id]: { color, icon } } }`, CnIndexPage reads them).
+		 * A record layout pill with `resolve: { colorField?, iconField? }` takes
+		 * its record's tone and icon from here.
+		 *
+		 * @type {object}
+		 * @spec openspec/changes/pill-color-field/specs/pill-color-field/spec.md#requirement-a-card-pill-takes-its-tone-and-icon-from-the-referenced-record
+		 */
+		pillLooks: {
+			type: Object,
+			default: () => ({}),
+		},
+
 		/**
 		 * The property keys the facts list shows, in order (manifest key
 		 * `config.cardFields`). Without it the card shows the first
@@ -588,7 +615,7 @@ export default {
 					const labels = def.labels && typeof def.labels === 'object' ? def.labels : {}
 					const shown = typeof labels[String(raw)] === 'string' ? this.cnTranslate(labels[String(raw)]) : label
 					const variant = mapped || def.variant
-					return { field: def.field, label: shown, variant: isBadgeVariant(variant) ? variant : 'default' }
+					return this.withLook({ field: def.field, label: shown, variant: isBadgeVariant(variant) ? variant : 'default' }, def)
 				})
 				.filter(Boolean)
 		},
@@ -838,7 +865,26 @@ export default {
 			const colorMap = def.colorMap && typeof def.colorMap === 'object' ? def.colorMap : {}
 			const key = Object.keys(colorMap).find((k) => k.toLowerCase() === value.toLowerCase())
 			const variant = key !== undefined ? colorMap[key] : def.variant
-			return { label, variant: isBadgeVariant(variant) ? variant : 'default' }
+			return this.withLook({ label, variant: isBadgeVariant(variant) ? variant : 'default' }, def)
+		},
+
+		/**
+		 * Lay the referenced record's tone and icon over a layout pill that
+		 * declares `resolve` (see `pillLooks`).
+		 *
+		 * @param {{label: string, variant: string}} pill The pill as declared.
+		 * @param {object} def The pill's definition.
+		 * @return {{label: string, variant: string, icon?: string}} The pill.
+		 * @spec openspec/changes/pill-color-field/specs/pill-color-field/spec.md#requirement-a-card-pill-takes-its-tone-and-icon-from-the-referenced-record
+		 */
+		withLook(pill, def) {
+			if (!def || !def.resolve || !this.pillLooks || typeof this.pillLooks !== 'object') {
+				return pill
+			}
+			const looks = this.pillLooks[def.field]
+			const raw = readPath(this.object, def.field)
+			const look = pillLook(looks && raw !== null && raw !== undefined ? looks[String(raw)] : null)
+			return { ...pill, ...(look.variant ? { variant: look.variant } : {}), ...(look.icon ? { icon: look.icon } : {}) }
 		},
 
 		/**

package/src/components/CnPartyPicker/CnPartyPicker.vue

@@ -3,24 +3,39 @@
   - SPDX-License-Identifier: EUPL-1.2
 -->
 <template>
-	<CnSearchSelect
-		class="cn-party-picker"
-		:modelValue="selectedOption"
-		:options="options"
-		:inputLabel="inputLabel"
-		:labelOutside="labelOutside"
-		:placeholder="placeholder ? cnTranslate(placeholder) : ''"
-		:loading="searching"
-		:filterable="false"
-		:clearable="clearable"
-		:disabled="disabled"
-		data-testid="cn-party-picker"
-		@search="onSearch"
-		@update:modelValue="onPick" />
+	<div class="cn-party-picker">
+		<CnSearchSelect
+			:modelValue="selectedOption"
+			:options="options"
+			:inputLabel="inputLabel"
+			:labelOutside="labelOutside"
+			:placeholder="placeholder ? cnTranslate(placeholder) : ''"
+			:loading="searching"
+			:filterable="false"
+			:clearable="clearable"
+			:disabled="disabled"
+			data-testid="cn-party-picker"
+			@search="onSearch"
+			@update:modelValue="onPick" />
+		<p v-if="refusal"
+			class="cn-party-picker__refusal"
+			role="alert"
+			data-testid="cn-party-picker-refusal">
+			{{ t('nextcloud-vue', 'This search could not be read.') }} {{ refusal }}
+		</p>
+		<p v-for="name in unavailable"
+			:key="name"
+			class="cn-party-picker__unavailable"
+			role="status"
+			data-testid="cn-party-picker-unavailable">
+			{{ t('nextcloud-vue', '{source} could not be searched, so this list may be incomplete.', { source: name }) }}
+		</p>
+	</div>
 </template>
 
 <script>
 import axios from '@nextcloud/axios'
+import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { fillTemplate } from '../../utils/fillTemplate.js'
 import { CnSearchSelect } from '../CnSearchSelect/index.js'
@@ -142,6 +157,8 @@ export default {
 			known: null,
 			timer: null,
 			searchSeq: 0,
+			refusal: '',
+			unavailable: [],
 		}
 	},
 
@@ -185,6 +202,8 @@ export default {
 	},
 
 	methods: {
+		t,
+
 		/**
 		 * A source's row as a picker option.
 		 *
@@ -244,7 +263,9 @@ export default {
 		},
 
 		/**
-		 * Search every source at once; a source that fails adds nothing.
+		 * Search every source at once. A term a source refused (400) is said
+		 * under the field in its words; a source that could not be searched at
+		 * all is named, so an empty list never hides a missing source.
 		 *
 		 * @spec openspec/changes/party-picker/specs/party-picker/spec.md#requirement-one-search-field-over-several-kinds-of-party
 		 * @param {string} term The search term.
@@ -253,6 +274,8 @@ export default {
 		async search(term) {
 			const seq = ++this.searchSeq
 			this.searching = true
+			let refusal = ''
+			const unavailable = []
 			const sets = await Promise.all((this.sources || []).map(async (source) => {
 				try {
 					if (source.type === 'contacts') {
@@ -264,7 +287,16 @@ export default {
 					}
 					const { data } = await axios.get(generateUrl(`/apps/openregister/api/objects/${source.register}/${source.schema}`), { params: { _search: term, _limit: source.limit || 8 } })
 					return (data && Array.isArray(data.results) ? data.results : []).map((row) => this.optionOf(source, row))
-				} catch {
+				} catch (failure) {
+					// OpenRegister refuses a term it cannot parse with a 400 rather
+					// than answering nothing, so that refusal is said, not hidden.
+					const response = failure && failure.response
+					if (response && response.status === 400) {
+						const body = response.data
+						refusal = String((body && (body.message || body.error)) || (typeof body === 'string' ? body : '') || refusal)
+					} else {
+						unavailable.push(source.label ? this.cnTranslate(source.label) : String(source.id || ''))
+					}
 					return []
 				}
 			}))
@@ -272,6 +304,8 @@ export default {
 				return
 			}
 			this.options = sets.flat().filter(Boolean)
+			this.refusal = refusal
+			this.unavailable = unavailable.filter(Boolean)
 			this.searching = false
 		},
 
@@ -315,3 +349,15 @@ export default {
 	},
 }
 </script>
+
+<style scoped>
+.cn-party-picker__refusal {
+	margin: 4px 0 0;
+	color: var(--color-error-text, var(--color-error));
+}
+
+.cn-party-picker__unavailable {
+	margin: 4px 0 0;
+	color: var(--color-text-maxcontrast);
+}
+</style>

package/src/components/CnSearchSelect/CnSearchSelect.vue

@@ -214,6 +214,13 @@ export default {
 	position: relative;
 }
 
+/* The field takes the row: NcSelect is an inline block of at least 260px,
+   which left the magnifier, placed at the row's end, outside the field
+   (DqOverdragen "Nieuw team"). */
+.cn-search-select :deep(.v-select) {
+	width: 100%;
+}
+
 /* The magnifier sits where the chevron was: in the field, at its end. */
 .cn-search-select__magnifier {
 	position: absolute;
@@ -222,6 +229,7 @@ export default {
 	height: var(--default-clickable-area, 34px);
 	display: flex;
 	align-items: center;
+	z-index: 1;
 	color: var(--color-text-maxcontrast);
 	pointer-events: none;
 }

package/src/composables/useRefLabels.js

@@ -65,6 +65,22 @@ export function pickRefLabel(obj, labelField) {
 	return null
 }
 
+/**
+ * Read one field off a referenced object, with no fallback: a colour or an
+ * icon name must not fall back to the title.
+ *
+ * @param {object|null} obj   The referenced object.
+ * @param {string}      field The (possibly nested) property.
+ * @return {string|null} The value as text, or null when it is empty.
+ */
+export function pickRefField(obj, field) {
+	if (!obj || typeof obj !== 'object' || !field) {
+		return null
+	}
+	const text = asText(readPath(obj, field))
+	return text !== '' ? text : null
+}
+
 /**
  * Create a resolver bound to an object store. Labels are cached per register,
  * schema and label field for the lifetime of the resolver.
@@ -91,9 +107,13 @@ export function createRefLabelResolver(getStore) {
 		 * @param {string}   schema     Schema slug of the referenced objects.
 		 * @param {string[]} ids        Ids to resolve (duplicates are dropped).
 		 * @param {string}   labelField Property holding the label (dotted paths allowed).
+		 * @param {{strict?: boolean}} [options] `strict`: read exactly that field, with no
+		 *   fallback to the title or name (a colour or an icon name).
 		 * @return {Promise<Object<string, string|null>>} Label by id.
 		 */
-		async resolve(register, schema, ids, labelField) {
+		async resolve(register, schema, ids, labelField, options = {}) {
+			const strict = options.strict === true
+			const pick = strict ? pickRefField : pickRefLabel
 			const distinct = [...new Set((ids || []).filter((id) => id !== null && id !== undefined && id !== '').map(String))]
 			const out = {}
 			if (distinct.length === 0) {
@@ -115,14 +135,14 @@ export function createRefLabelResolver(getStore) {
 				})
 				return out
 			}
-			const hit = bucket(`${type}::${labelField || ''}`)
+			const hit = bucket(`${type}::${labelField || ''}::${strict ? 'field' : 'label'}`)
 			const missing = []
 			for (const id of distinct) {
 				const stored = store.objects && store.objects[type] && store.objects[type][id]
 				if (hit.has(id)) {
 					continue
 				}
-				const label = stored ? pickRefLabel(stored, labelField) : null
+				const label = stored ? pick(stored, labelField) : null
 				if (label !== null) {
 					hit.set(id, label)
 				} else {
@@ -136,7 +156,7 @@ export function createRefLabelResolver(getStore) {
 					rows = await store.fetchCollectionForOptions(type, {
 						_ids: missing.join(','),
 						_limit: missing.length,
-						_fields: [...new Set([top, 'title', 'name'])].join(','),
+						_fields: (strict ? [top] : [...new Set([top, 'title', 'name'])]).join(','),
 					})
 				} catch {
 					rows = []
@@ -148,7 +168,7 @@ export function createRefLabelResolver(getStore) {
 						byId.set(String(id), row)
 					}
 				})
-				missing.forEach((id) => hit.set(id, pickRefLabel(byId.get(id), labelField)))
+				missing.forEach((id) => hit.set(id, pick(byId.get(id), labelField)))
 			}
 			distinct.forEach((id) => {
 				out[id] = hit.has(id) ? hit.get(id) : null