@conduction/nextcloud-vue 2.111.0 → 2.112.0

package/dist/esm/components/CnDetailPage/CnDetailPage.vue2.js

@@ -47,7 +47,7 @@ import { pageViews } from '../../mixins/pageViews.js';
 import { isAppInstalled } from '../../utils/appInstalled.js';
 import { compactLayoutRows } from '../../utils/dashboardPlacement.js';
 import { defaultDetailGrid } from '../../utils/defaultDetailGrid.js';
-import { stageOf, normalisePinnedAction, stageEntry, MAX_QUICK_ACTIONS, groupMenuEntries, resolveNextStep, pillCountSource, resolveCountPill, resolvePill } from '../../utils/detailActionModel.js';
+import { stageOf, normalisePinnedAction, stageEntry, MAX_QUICK_ACTIONS, groupMenuEntries, resolveNextStep, pillCountSource, resolveCountPill, resolvePill, pillLook } from '../../utils/detailActionModel.js';
 import { visibilityContextRefs, widgetConditionData, fetchVisibilityRows, detailWidgetVisible } from '../../utils/detailWidgetVisibility.js';
 import { reportBindingProblems } from '../../utils/diagnostics.js';
 import { fetchListTotal } from '../../utils/fetchFilterCounts.js';
@@ -1273,9 +1273,12 @@ var script = {
 		 * `field`: `text`, a constant ("Inwoner"), or `countFrom`
 		 * (`{ register, schema, filter? }`) with `countLabel` (`{ one, other }`
 		 * with `{count}`), a count of a related list ("1 lopende zaak") that
-		 * shows nothing at 0.
+		 * shows nothing at 0. With `resolve: { register, schema, labelField?,
+		 * colorField?, iconField? }` the pill shows the referenced record's
+		 * label, takes its tone from that record's colour (an NL Design System
+		 * hue such as `red`, or a badge role) and shows its icon.
 		 *
-		 * @type {{field?: string, text?: string, countFrom?: object, countLabel?: object, colorMap?: object, labels?: object, variant?: string}|null}
+		 * @type {{field?: string, text?: string, countFrom?: object, countLabel?: object, colorMap?: object, labels?: object, variant?: string, resolve?: object}|null}
 		 */
 		typePill: {
 			type: Object,
@@ -1716,6 +1719,8 @@ var script = {
 			pillCountSeq: 0,
 			/** The labels of the records pills with `resolve` point at, by pill key. */
 			pillRefLabels: {},
+			/** The colour and icon names read off the records pills with `resolve` point at, by pill key. */
+			pillRefLooks: {},
 			/** Sequence of the last pill label lookup, so a late answer for another record is dropped. */
 			pillRefSeq: 0,
 			/** `register/schema/id` the read-state call was last made for, so it is sent once per load. */
@@ -2264,10 +2269,11 @@ var script = {
 					// `resolve`: the referenced record's label replaces the id, and
 					// keys the colour too ("Woo-verzoek", not a uuid).
 					const resolved = this.pillRefLabels[key];
+					const look = pillLook(this.pillRefLooks[key]);
 					if (typeof resolved === 'string' && resolved !== '') {
-						return { ...pill, key, label: this.effectiveTranslate(resolved), colorKey: resolved }
+						return { ...pill, ...look, key, label: this.effectiveTranslate(resolved), colorKey: resolved }
 					}
-					return { ...pill, key, label: this.effectiveTranslate(pill.label) }
+					return { ...pill, ...look, key, label: this.effectiveTranslate(pill.label) }
 				})
 				.filter(Boolean)
 		},
@@ -2302,7 +2308,8 @@ var script = {
 				.filter(([, config]) => config && config.resolve && config.resolve.register && config.resolve.schema && typeof config.field === 'string')
 				.map(([key, config]) => {
 					const pill = resolvePill({ field: config.field }, this.resolvedObject);
-					return pill ? [key, config.resolve.register, config.resolve.schema, config.resolve.labelField || '', pill.colorKey] : null
+					const { register, schema, labelField, colorField, iconField } = config.resolve;
+					return pill ? [key, register, schema, labelField || '', pill.colorKey, colorField || '', iconField || ''] : null
 				})
 				.filter(Boolean)
 		},
@@ -4116,6 +4123,7 @@ var script = {
 			const seq = ++this.pillRefSeq;
 			if (targets.length === 0) {
 				this.pillRefLabels = {};
+				this.pillRefLooks = {};
 				return
 			}
 			if (!this._pillRefResolver) {
@@ -4128,14 +4136,30 @@ var script = {
 				});
 			}
 			const labels = {};
-			await Promise.all(targets.map(async ([key, register, schema, labelField, id]) => {
-				const found = await this._pillRefResolver.resolve(register, schema, [id], labelField).catch(() => ({}));
+			const looks = {};
+			const field = async (register, schema, id, name) => {
+				if (!name) {
+					return null
+				}
+				const found = await this._pillRefResolver.resolve(register, schema, [id], name, { strict: true }).catch(() => ({}));
+				return found && typeof found[id] === 'string' ? found[id] : null
+			};
+			await Promise.all(targets.map(async ([key, register, schema, labelField, id, colorField, iconField]) => {
+				const [found, color, icon] = await Promise.all([
+					this._pillRefResolver.resolve(register, schema, [id], labelField).catch(() => ({})),
+					field(register, schema, id, colorField),
+					field(register, schema, id, iconField),
+				]);
 				if (found && typeof found[id] === 'string') {
 					labels[key] = found[id];
 				}
+				if (color || icon) {
+					looks[key] = { color, icon };
+				}
 			}));
 			if (seq === this.pillRefSeq) {
 				this.pillRefLabels = labels;
+				this.pillRefLooks = looks;
 			}
 		},