@conduction/nextcloud-vue 2.111.0 → 2.112.0

package/src/store/plugins/logs.js

@@ -156,6 +156,7 @@ export function logsPlugin(options = {}) {
 
 	if (autoRefreshOnItemChange) {
 		plugin.setup = function setup(store) {
+			// Detached: the store outlives the component whose setup first used it.
 			store.$onAction(({ name, after }) => {
 				if (name !== 'setItem') {
 					return
@@ -170,7 +171,7 @@ export function logsPlugin(options = {}) {
 						store.clearLogs()
 					}
 				})
-			})
+			}, true)
 		}
 	}
 

package/src/utils/detailActionModel.js

@@ -16,6 +16,7 @@
  * @module utils/detailActionModel
  */
 
+import { variantForColor } from './headerFieldChips.js'
 import { readPath } from './readPath.js'
 import { evaluateVisibleWhenLocal } from './visibleWhen.js'
 
@@ -239,6 +240,32 @@ export function resolvePill(config, object) {
 	}
 }
 
+/**
+ * What a pill takes from the record its `resolve` points at
+ * (`resolve.colorField`, `resolve.iconField`): the tone its colour name maps
+ * onto (an NL Design System hue or a badge role, see `variantForColor`), which
+ * replaces the pill's own `variant` and `colorMap`, and an icon name. An empty
+ * colour or icon leaves the pill as declared.
+ *
+ * @param {{color?: string|null, icon?: string|null}|null|undefined} look The names read off the record.
+ * @return {{variant?: string, colorMap?: null, icon?: string}} The keys to lay over the pill.
+ * @spec openspec/changes/pill-color-field/specs/pill-color-field/spec.md#requirement-a-pill-takes-its-tone-and-icon-from-the-referenced-record
+ */
+export function pillLook(look) {
+	const out = {}
+	if (!look || typeof look !== 'object') {
+		return out
+	}
+	if (typeof look.color === 'string' && look.color !== '') {
+		out.variant = variantForColor(look.color)
+		out.colorMap = null
+	}
+	if (typeof look.icon === 'string' && look.icon !== '') {
+		out.icon = look.icon
+	}
+	return out
+}
+
 /**
  * Resolve a tab's count.
  *

package/src/utils/fillTemplate.js

@@ -7,7 +7,7 @@ import { formatMoney } from './formatMetric.js'
 import { readPath } from './readPath.js'
 import { userDisplayName } from './userDisplayName.js'
 
-const TOKEN = /\{([^{}\s|]+)(?:\|([a-z]+)(?::([^{}\s]+))?)?\}/g
+const TOKEN = /\{([^{}\s|]+)(?:\|([A-Za-z]+)(?::([^{}\s]+))?)?\}/g
 
 /**
  * A moment in the board's short form with the time: "4 okt, 10:52", or
@@ -68,12 +68,18 @@ export function formatLongDate(value, now = new Date(), withYear = false) {
  * @param {string} [arg] The format's argument (`currency:EUR`, or a row path holding the code).
  * @param {object|null} [object] The row, for a currency read from a field.
  * @param {object|null} [config] The app config map, for the reporting currency.
+ * @param {object|null} [formatters] The app's named formatters (`cnFormatters`), for any other format name.
  * @return {string} The text, '' when nothing can be shown.
+ * @spec openspec/changes/map-list-formatters/specs/map-list-formatters/spec.md#requirement-a-map-list-reads-display-names-through-the-apps-formatters
  */
-function formatValue(value, format, now, arg = '', object = null, config = null) {
+function formatValue(value, format, now, arg = '', object = null, config = null, formatters = null) {
 	if (value === null || value === undefined || value === '' || typeof value === 'object') {
 		return ''
 	}
+	if (format !== '' && formatters && typeof formatters[format] === 'function') {
+		const shown = formatters[format](value, object)
+		return shown === null || shown === undefined ? '' : String(shown)
+	}
 	if (format === 'date') {
 		return formatBoardDate(value, now)
 	}
@@ -130,14 +136,16 @@ function formatValue(value, format, now, arg = '', object = null, config = null)
  * the row field is empty, the app's reporting currency), `{path|relative}` and
  * `{path|relativetime}` say "today", "yesterday" and then the short date
  * ("vandaag, 09.42"), and `{path|days}` is the
- * whole days since that date ("has waited {createdAt|days} days"). A token without a
+ * whole days since that date ("has waited {createdAt|days} days"). Any other
+ * name is one of the app's formatters, passed as `context.formatters`
+ * (`{id|caseAddress}`). A token without a
  * value empties the WHOLE template, because "Termijn " is worse than nothing.
  * A template without tokens is returned as written (a constant label).
  *
  * @param {string} template The template, already translated.
  * @param {object|null} object The object to read.
  * @param {Date} [now] The reference moment for dates.
- * @param {{config?: object}|null} [context] The app config map, for the reporting currency of a money token.
+ * @param {{config?: object, formatters?: object}|null} [context] The app config map, for the reporting currency of a money token, and the app's named formatters.
  * @return {string} The filled text, or ''.
  * @spec openspec/changes/screens-relation-pages/specs/relation-pages/spec.md#requirement-a-record-list-shows-the-objects-that-point-at-this-record
  */
@@ -148,7 +156,7 @@ export function fillTemplate(template, object, now = new Date(), context = null)
 	let missing = false
 	const text = template.replace(TOKEN, (_match, path, format, arg) => {
 		const value = object && typeof object === 'object' ? readPath(object, path) : undefined
-		const shown = formatValue(value, format || '', now, arg || '', object, context && context.config ? context.config : null)
+		const shown = formatValue(value, format || '', now, arg || '', object, context && context.config ? context.config : null, context && context.formatters ? context.formatters : null)
 		if (shown === '') {
 			missing = true
 		}

package/src/utils/headerFieldChips.js

@@ -11,7 +11,12 @@
 /** The renderers a header chip can use. */
 export const HEADER_CHIP_FORMATS = Object.freeze(['text', 'mono', 'badge', 'user', 'date'])
 
-/** The variants a colour name maps onto; anything else is neutral. */
+/**
+ * The variants a colour name maps onto; anything else is neutral. A name is a
+ * badge role (`success`, `warning`, ...) or an NL Design System hue as a
+ * register stores it (`red`, `blue-light`, ...): a hue and its light tint
+ * take the same tone.
+ */
 const COLOR_VARIANTS = Object.freeze({
 	success: 'success',
 	warning: 'warning',
@@ -19,6 +24,20 @@ const COLOR_VARIANTS = Object.freeze({
 	info: 'info',
 	primary: 'primary',
 	neutral: 'default',
+	blue: 'info',
+	'blue-light': 'info',
+	green: 'success',
+	'green-light': 'success',
+	orange: 'warning',
+	'orange-light': 'warning',
+	red: 'error',
+	'red-light': 'error',
+	purple: 'purple',
+	'purple-light': 'purple',
+	teal: 'teal',
+	'teal-light': 'teal',
+	grey: 'default',
+	'grey-light': 'default',
 })
 
 /**
@@ -69,7 +88,7 @@ export function isEmptyChipValue(value) {
 /**
  * Map a colour name read off a referenced object onto a badge variant.
  *
- * @param {*} name The colour name (`success`, `warning`, `error`, `info`, `neutral`).
+ * @param {*} name The colour name: a badge role (`success`, `warning`, `error`, `info`, `neutral`) or an NL Design System hue (`red`, `blue-light`, ...).
  * @return {string} A `CnStatusBadge` variant; `default` (neutral) when unknown.
  */
 export function variantForColor(name) {

package/src/utils/mapList.js

@@ -3,7 +3,8 @@
  * SPDX-License-Identifier: EUPL-1.2
  */
 import { isBadgeVariant } from './badgeVariants.js'
-import { fillTemplate } from './fillTemplate.js'
+import { pillLook } from './detailActionModel.js'
+import { fillTemplate, firstFilled } from './fillTemplate.js'
 import { readPath } from './readPath.js'
 
 /**
@@ -12,10 +13,14 @@ import { readPath } from './readPath.js'
  * pin and the number in the list are the same, and the rows without one.
  *
  * `spec` is `mapConfig.list`: `{ title, sub?, pills?: [{ path?, text?, map?,
- * colorMap? }], due? }`. `title`, `sub` and `due` are field templates
- * (`"{title}"`, `"{address} · {identifier}"`, `"{deadline|date}"`), already
- * translated by the caller; a pill reads `path` (or shows `text`), maps it
- * through `map`, and takes its tone from `colorMap` by the raw value.
+ * formatter?, colorMap?, variant?, resolve? }], due? }`. `title`, `sub` and `due` are
+ * field templates (`"{title}"`, `"{address} · {identifier}"`,
+ * `"{deadline|date}"`), already translated by the caller; `sub` may list
+ * several, the first that fills wins. A pill reads `path` (or shows `text`),
+ * maps it through `map` or the app formatter `formatter` (a reference's
+ * display name), and takes its tone from `colorMap` by the raw value, or,
+ * with `resolve`, the tone and icon of the record the value points at
+ * (`options.looks`, read by CnIndexPage as for its other pills).
  *
  * @param {Array<object>} rows The rows, in display order.
  * @param {object} spec The list declaration.
@@ -23,9 +28,14 @@ import { readPath } from './readPath.js'
  * @param {string} options.rowKey The row's key field.
  * @param {Function} options.located Whether a row has a place on the map.
  * @param {Function} [options.translate] The host's translate, for pill labels.
+ * @param {object} [options.formatters] The app's named formatters, for pills and template tokens.
+ * @param {object} [options.looks] The referenced records' looks by field and id (`{ [path]: { [id]: { color, icon } } }`).
  * @return {{items: Array<{key: string, n: number, row: object, title: string, sub: string, due: string, pills: Array<{label: string, variant: string}>}>, missing: Array<object>}}
+ * @spec openspec/changes/map-list-formatters/specs/map-list-formatters/spec.md#requirement-a-map-list-reads-display-names-through-the-apps-formatters
+ * @spec openspec/changes/map-list-formatters/specs/map-list-formatters/spec.md#requirement-a-map-list-pill-takes-its-tone-and-icon-from-the-referenced-record
  */
-export function mapListItems(rows, spec, { rowKey, located, translate = (text) => text }) {
+export function mapListItems(rows, spec, { rowKey, located, translate = (text) => text, formatters = null, looks = null }) {
+	const context = formatters ? { formatters } : null
 	const items = []
 	const missing = []
 	const list = spec && typeof spec === 'object' ? spec : {}
@@ -40,7 +50,9 @@ export function mapListItems(rows, spec, { rowKey, located, translate = (text) =
 					return null
 				}
 				const raw = typeof pill.path === 'string' && pill.path !== '' ? readPath(row, pill.path) : undefined
-				const mapped = pill.map && (typeof raw === 'string' || typeof raw === 'number') && Object.hasOwn(pill.map, raw) ? pill.map[raw] : undefined
+				const formatter = typeof pill.formatter === 'string' && formatters ? formatters[pill.formatter] : null
+				const formatted = typeof formatter === 'function' && (typeof raw === 'string' || typeof raw === 'number') && raw !== '' ? formatter(raw, row) : undefined
+				const mapped = pill.map && (typeof raw === 'string' || typeof raw === 'number') && Object.hasOwn(pill.map, raw) ? pill.map[raw] : formatted
 				const text = mapped ?? pill.text ?? raw
 				if (typeof text !== 'string' && typeof text !== 'number') {
 					return null
@@ -50,16 +62,19 @@ export function mapListItems(rows, spec, { rowKey, located, translate = (text) =
 					return null
 				}
 				const tone = pill.colorMap && (typeof raw === 'string' || typeof raw === 'number') ? pill.colorMap[raw] : pill.variant
-				return { label, variant: isBadgeVariant(tone) ? tone : 'default' }
+				const fieldLooks = pill.resolve && looks && typeof pill.path === 'string' ? looks[pill.path] : null
+				const look = pillLook(fieldLooks && (typeof raw === 'string' || typeof raw === 'number') ? fieldLooks[String(raw)] : null)
+				const variant = look.variant || tone
+				return { label, variant: isBadgeVariant(variant) ? variant : 'default', ...(look.icon ? { icon: look.icon } : {}) }
 			})
 			.filter(Boolean)
 		items.push({
 			key: String(row[rowKey]),
 			n: items.length + 1,
 			row,
-			title: fillTemplate(list.title || '', row),
-			sub: fillTemplate(list.sub || '', row),
-			due: fillTemplate(list.due || '', row),
+			title: fillTemplate(list.title || '', row, undefined, context),
+			sub: list.sub ? firstFilled(list.sub, row, undefined, undefined, context) : '',
+			due: fillTemplate(list.due || '', row, undefined, context),
 			pills,
 		})
 	}

package/src/utils/savedViewMenu.js

@@ -64,6 +64,9 @@ export function normalizeSavedViewMenu(entries) {
 		}
 		seen.add(`${page}|${id}`)
 		const entry = { id, page, name: e && typeof e.name === 'string' && e.name !== '' ? e.name : id }
+		if (typeof e.icon === 'string' && e.icon !== '') {
+			entry.icon = e.icon
+		}
 		const badge = normalizeBadge(e.badge)
 		if (badge) {
 			entry.badge = badge
@@ -87,12 +90,12 @@ export function toggleSavedViewMenuEntry(entries, entry) {
 	if (present) {
 		return list.filter((e) => !(e.id === id && e.page === entry.page))
 	}
-	return normalizeSavedViewMenu([...list, { id, page: entry.page, name: entry.name, badge: entry.badge }])
+	return normalizeSavedViewMenu([...list, { id, page: entry.page, name: entry.name, icon: entry.icon, badge: entry.badge }])
 }
 
 /**
  * Bring one page's entries in line with the views that page can show:
- * current names and badges, and no entry for a view that was deleted or is
+ * current names, icons and badges, and no entry for a view that was deleted or is
  * no longer shared with the user. Other pages' entries are left alone. A
  * view's badge is read from its `menuBadge` (see `withSavedViewMenu`).
  *
@@ -110,9 +113,10 @@ export function syncSavedViewMenu(entries, page, views) {
 				return e
 			}
 			const view = byId.get(e.id)
-			const { badge, ...rest } = e
+			const { badge, icon, ...rest } = e
 			const next = normalizeBadge(view.menuBadge)
-			return normalizeSavedViewMenu([{ ...rest, name: view.name || e.name, ...(next ? { badge: next } : {}) }])[0]
+			const nextIcon = typeof view.icon === 'string' && view.icon !== '' ? view.icon : icon
+			return normalizeSavedViewMenu([{ ...rest, name: view.name || e.name, ...(nextIcon ? { icon: nextIcon } : {}), ...(next ? { badge: next } : {}) }])[0]
 		})
 }
 
@@ -127,6 +131,9 @@ export const SAVED_VIEW_MENU_EMPTY = 'saved-views-empty'
  * same place (Ruben's design rule, 19 Oct); it replaces app-specific groups
  * such as dossiq's "My case types".
  *
+ * An entry shows its view's `icon` (a registered icon name; a case type's
+ * own icon, say), else the filter icon.
+ *
  * An entry with a badge carries it as the menu entry's `count` (and
  * `counterVariant`), which CnAppRoot fetches like any filtered menu count.
  *
@@ -154,7 +161,7 @@ export function withSavedViewMenu(menu, entries, options = {}) {
 					label: e.name,
 					route: e.page,
 					query: { savedView: e.id },
-					icon: 'FilterOutline',
+					icon: e.icon || 'FilterOutline',
 					...(e.badge || {}),
 				}))
 			: [{ id: SAVED_VIEW_MENU_EMPTY, type: 'hint', label: t('nextcloud-vue', 'Add a view to the menu from Filters') }]),