@conduction/nextcloud-vue 2.111.0 → 2.113.0

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

@@ -27,8 +27,8 @@ import { createRefLabelResolver } from '../../composables/useRefLabels.js';
 import { useSavedViewsApi } from '../../composables/useSavedViewsApi.js';
 import { METADATA_COLUMNS } from '../../constants/metadata.js';
 import { useObjectStore } from '../../store/useObjectStore.js';
-import { routeHref, followItemActionLink, resolveItemActionLink } from '../../utils/actionLink.js';
-import { resolveRegisteredHandler, buildOnSuccessRoute } from '../../utils/actionsDispatcher.js';
+import { routeHref, headerActionAsLink, followItemActionLink, resolveItemActionLink } from '../../utils/actionLink.js';
+import { resolveRegisteredHandler, isExternalActionTarget, buildOnSuccessRoute } from '../../utils/actionsDispatcher.js';
 import { columnFieldsOf, refIdOf, buildValueStages, buildReferenceStages, columnKeyOfRow, resolveDropValue, fullTargetOf, referenceTargetOf, fetchReferenceObjects } from '../../utils/boardReferenceColumns.js';
 import { isColumnSortable } from '../../utils/columnFilters.js';
 import { reportBindingProblems } from '../../utils/diagnostics.js';
@@ -443,6 +443,8 @@ var script = {
 
 	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. */
@@ -2587,11 +2589,16 @@ var script = {
 		 * (unless the handler is the `'none'` keyword) emits
 		 * `@header-action({ action: id, id })`.
 		 *
+		 * An entry with `href` instead renders as a real link and is never
+		 * dispatched or emitted: an absolute `http(s)`, `mailto:`, `tel:` or
+		 * `//host/...` URL is used as written, an instance path (leading `/`) goes through
+		 * `generateUrl()`. `target: '_blank'` opens it in a new tab.
+		 *
 		 * Reserved ids (those used by built-ins on the bar — `refresh`,
 		 * `import`, `export`, `copy`, `delete`) are dropped from the
 		 * merged list with a `console.warn`.
 		 *
-		 * @type {Array<{ id: string, label: string, icon?: string, handler?: string|(() => void), route?: string, disabled?: boolean }>}
+		 * @type {Array<{ id: string, label: string, icon?: string, handler?: string|(() => void), route?: string, href?: string, target?: ('_blank'|'_self'), disabled?: boolean }>}
 		 */
 		headerActions: {
 			type: Array,
@@ -2801,6 +2808,8 @@ var script = {
 			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', ...).
@@ -3042,7 +3051,7 @@ var script = {
 		/**
 		 * The header actions that open a dialog: `type: "open-form"` (the
 		 * schema-driven create form, as the navigation's primary action opens
-		 * it) or `type: "open-modal"`, without a `handler` of their own.
+		 * it) or `type: "open-modal"`, without a `handler` or `href` of their own.
 		 * Reserved ids are left out, as in `mergedHeaderActions`.
 		 *
 		 * @spec openspec/changes/index-header-open-form/specs/index-header/spec.md#requirement-an-index-header-action-can-open-the-create-form
@@ -3054,9 +3063,18 @@ var script = {
 				&& typeof entry.id === 'string'
 				&& !reserved.has(entry.id)
 				&& (entry.handler === undefined || entry.handler === null || entry.handler === '')
+				&& !entry.href
 				&& (entry.type === 'open-form' || entry.type === 'open-modal'))
 		},
 
+		/**
+		 * The header actions without reserved ids, each through
+		 * `resolveHeaderHandler` (a manifest `href` entry becomes a link with
+		 * `_dispatchSuppress`, so the page neither runs nor emits it).
+		 *
+		 * @spec openspec/changes/header-action-href/specs/header-action-href/spec.md#requirement-a-header-action-with-href-is-a-link-that-runs-and-emits-nothing
+		 * @return {Array<object>}
+		 */
 		mergedHeaderActions() {
 			const reserved = new Set(['refresh', 'import', 'export', 'copy', 'delete']);
 			const merged = [];
@@ -4715,6 +4733,12 @@ var script = {
 		 */
 		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) => {
@@ -4785,6 +4809,108 @@ var script = {
 		 *
 		 * @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 || {};
@@ -5052,13 +5178,15 @@ var script = {
 			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,
 			})
 		},
 
@@ -5985,11 +6113,13 @@ var script = {
 		 *
 		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
 		 * @spec openspec/changes/screens-index-header-buttons-parity/specs/index-list-board-look/spec.md#requirement-the-add-header-button-carries-a-plus
-		 * @return {Array<{key: string, label: string, action: string, variant: string, icon: string, format: string}>}
+		 * @spec openspec/changes/header-action-href/specs/header-action-href/spec.md#requirement-a-header-action-with-href-is-a-link-that-runs-and-emits-nothing
+		 * @return {Array<{key: string, label: string, action: string, variant: string, icon: string, format: string, link: ({href: string, target: (string|undefined)}|null)}>}
 		 */
 		resolvedHeaderButtons() {
 			const headerButtons = this.presented('headerButtons');
 			const declared = Array.isArray(headerButtons) ? headerButtons : [];
+			const builtInActions = new Set(['add', 'export', 'import', 'refresh', 'save-view', 'actions-menu']);
 			return declared
 				.filter((button) => button && typeof button === 'object' && typeof button.action === 'string' && button.action !== '')
 				.map((button, index) => {
@@ -6016,6 +6146,13 @@ var script = {
 					if (label === '' && button.action === 'save-view') {
 						label = translate('nextcloud-vue', 'Save view');
 					}
+					const run = typeof button.run === 'string' ? button.run : '';
+					// A button that runs a manifest `href` header action is that link;
+					// a `type: "navigate"` or function-handler entry keeps dispatching.
+					const actionId = button.action === 'export' ? run : (builtInActions.has(button.action) ? '' : button.action);
+					const linked = actionId
+						? this.mergedHeaderActions.find((entry) => entry && entry.id === actionId && entry.href && entry._dispatchSuppress && (!entry.type || entry.type === 'handler'))
+						: null;
 					return {
 						key: String(button.id || button.action || index),
 						label,
@@ -6023,7 +6160,8 @@ var script = {
 						variant: button.variant === 'primary' ? 'primary' : 'secondary',
 						icon,
 						format: button.format === 'excel' ? 'excel' : 'csv',
-						run: typeof button.run === 'string' ? button.run : '',
+						run,
+						link: linked ? { href: linked.href, target: linked.linkTarget || undefined } : null,
 						items: Array.isArray(button.items)
 							? button.items.filter((item) => (typeof item === 'string' && item !== '')
 								|| (item && typeof item === 'object' && typeof item.heading === 'string' && item.heading !== ''))
@@ -6682,6 +6820,15 @@ var script = {
 			},
 		},
 
+		// 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,
@@ -7133,6 +7280,45 @@ var script = {
 			}));
 		},
 
+		/**
+		 * 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`).
 		 *
@@ -7633,8 +7819,11 @@ var script = {
 		 * manifest-actions-dispatch — `navigate`, `emit`, `none`, or a
 		 * registry name (resolved through `resolveRegisteredHandler`).
 		 *
+		 * @spec openspec/changes/header-action-href/specs/header-action-href/spec.md#requirement-a-header-action-with-href-is-a-link-that-runs-and-emits-nothing
 		 * @param {object} entry Raw headerActions entry.
-		 * @return {object} Possibly-mutated copy: function-typed
+		 * @return {object} Possibly-mutated copy: an `href` becomes a
+		 *   resolved link with `linkTarget`, no handler (a function one
+		 *   included) and `_dispatchSuppress: true`; function-typed
 		 *   handlers untouched; `'emit'` and unknown registry names
 		 *   strip the `handler` (emit-only fall-through); `'navigate'`
 		 *   becomes a `$router.push` thunk (with the entry's literal
@@ -7646,14 +7835,23 @@ var script = {
 			if (!entry) {
 				return entry
 			}
+			// An `href` makes the entry a link, which only navigates: it
+			// carries no handler, and the page emits nothing for it.
+			if (typeof entry.href === 'string' && entry.href !== '') {
+				const link = headerActionAsLink(entry);
+				return link.href ? { ...link, linkTarget: link.target, _dispatchSuppress: true } : link
+			}
 			const handler = entry.handler;
 			if (typeof handler === 'function') {
 				return { ...entry }
 			}
 			// `type: "navigate"` with a `target` URL is a link: the bar and the
-			// header's Actions menu render it as a real anchor in a new tab.
+			// header's Actions menu render it as a real anchor, an external URL
+			// in a new tab.
 			if (typeof handler !== 'string' && entry.type === 'navigate' && typeof entry.target === 'string' && entry.target !== '' && !entry.href) {
-				return { ...entry, href: entry.target }
+				return isExternalActionTarget(entry.target)
+					? { ...entry, href: entry.target, linkTarget: '_blank' }
+					: { ...entry, href: entry.target }
 			}
 			if (typeof handler !== 'string') {
 				// No handler declared — emit-only fall-through.
@@ -7824,8 +8022,9 @@ var script = {
 		 *
 		 * @spec openspec/changes/screens-index-header-actions-menu/specs/index-header/spec.md#requirement-the-header-actions-menu-lists-what-its-items-name
 		 * @spec openspec/changes/screens-index-header-menu-headings/specs/index-header/spec.md#requirement-the-header-actions-menu-can-draw-group-headings-and-separators
+		 * @spec openspec/changes/header-action-href/specs/header-action-href/spec.md#requirement-a-header-action-with-href-is-a-link-that-runs-and-emits-nothing
 		 * @param {{items?: Array<(string|{heading: string})>|null, format?: string}} button The resolved header button.
-		 * @return {Array<{key: string, label: string, kind?: ('heading'|'separator'), icon?: string, href?: string, disabled?: boolean, title?: string, iconComponent?: object, run?: Function}>}
+		 * @return {Array<{key: string, label: string, kind?: ('heading'|'separator'), icon?: string, href?: string, linkTarget?: string, disabled?: boolean, title?: string, iconComponent?: object, run?: () => void}>}
 		 */
 		headerMenuEntries(button) {
 			const fromAction = (entry) => ({
@@ -7833,6 +8032,7 @@ var script = {
 				label: entry.label ? this.cnTranslate(entry.label) : '',
 				icon: entry.icon && typeof entry.icon === 'string' && !entry.icon.startsWith('icon-') ? entry.icon : '',
 				href: typeof entry.href === 'string' && entry.href !== '' ? entry.href : '',
+				linkTarget: entry.linkTarget || '',
 				// A `handler: "navigate"` entry whose route resolves carries `to`
 				// (resolveHeaderHandler drops its handler): the menu draws it as
 				// an in-app link, as the actions bar does, so it navigates.
@@ -7866,7 +8066,7 @@ var script = {
 				}),
 
 				documentation: () => (this.documentationUrl
-					? { key: 'documentation', label: this.documentationLabel || translate('nextcloud-vue', 'Documentation'), icon: 'BookOpenVariantOutline', href: this.documentationUrl }
+					? { key: 'documentation', label: this.documentationLabel || translate('nextcloud-vue', 'Documentation'), icon: 'BookOpenVariantOutline', href: this.documentationUrl, linkTarget: '_blank' }
 					: null),
 			};
 			const entries = [];
@@ -7962,13 +8162,18 @@ var script = {
 
 		/**
 		 * A header button was clicked: run its built-in action, or dispatch
-		 * it as the `headerActions` entry with that id.
+		 * it as the `headerActions` entry with that id. A button that is a
+		 * link is left to the browser.
 		 *
 		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
-		 * @param {{action: string, format: string}} button The resolved button.
+		 * @spec openspec/changes/header-action-href/specs/header-action-href/spec.md#requirement-a-header-action-with-href-is-a-link-that-runs-and-emits-nothing
+		 * @param {{action: string, format: string, link?: object}} button The resolved button.
 		 * @return {void}
 		 */
 		onHeaderButton(button) {
+			if (button.link) {
+				return
+			}
 			if (button.action === 'add') {
 				this.onAddClick();
 			} else if (button.action === 'export') {
@@ -10294,7 +10499,7 @@ var script = {
 				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 } : {}) });
 		},
 
 		/**
@@ -10829,7 +11034,9 @@ var script = {
 			if (resultData && resultData.success && this._refLabelResolver) {
 				this._refLabelResolver.invalidate();
 				this.refLabels = {};
+				this.refLooks = {};
 				this.loadRefLabels();
+				this.loadRefLooks();
 			}
 		},