@conduction/nextcloud-vue 2.99.0 → 2.101.0

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -13,12 +13,12 @@
 		     region (WCAG 2.4.6 / 1.3.1). -->
 		<slot
 			name="header"
-			:title="presented('title')"
+			:title="shownTitle"
 			:description="headerDescription"
 			:icon="resolvedIcon"
 			:showTitle="showTitle">
 			<CnPageHeader
-				:title="presented('title')"
+				:title="shownTitle"
 				:description="headerDescription"
 				:icon="showTitleIcon && !isBoardLook ? resolvedIcon : ''"
 				:breadcrumb="presented('breadcrumb')"
@@ -747,6 +747,7 @@
 					:sortOrder="effectiveSortOrder"
 					:sortKeys="effectiveSortKeys"
 					:selectable="selectable"
+					:hideHeader="hideTableHeader"
 					:rowClickToView="rowClickOpens"
 					:selectedIds="internalSelectedIds"
 					:rowKey="rowKey"
@@ -845,9 +846,64 @@
 				     filter / sidebar / quick-filter machinery as table and cards.
 				     A marker click routes back through onRowClick for identical
 				     detail-page navigation. -->
+				<!-- Map with a numbered list beside it (`mapConfig.list`,
+				     DqZakenKaart): one framed card, the list numbered as the pins
+				     are, the row under the pointer marked on both sides, and the
+				     rows without a place counted under the list with a way to
+				     the table. -->
+				<div v-else-if="currentViewMode === 'map' && mapListEnabled"
+					class="cn-index-page__map-card"
+					data-testid="cn-index-map-card">
+					<CnMapWidget
+						class="cn-index-page__map"
+						:center="mapCenter"
+						:zoom="mapZoom"
+						:layers="mapLayers"
+						:basemaps="mapBasemaps"
+						:markers="mapMarkers"
+						:clustering="mapClustering"
+						:autoFit="true"
+						height="100%"
+						@markerClick="onMarkerClick" />
+					<div class="cn-index-page__map-side">
+						<ol class="cn-index-page__map-list" :aria-label="mapListLabel" data-testid="cn-index-map-list">
+							<li v-for="item in mapList.items"
+								:key="item.key"
+								class="cn-index-page__map-item"
+								:class="{ 'cn-index-page__map-item--active': activeMapKey === item.key }"
+								data-testid="cn-index-map-item"
+								@mouseenter="activeMapKey = item.key"
+								@mouseleave="activeMapKey = ''"
+								@focusin="activeMapKey = item.key">
+								<span class="cn-index-page__map-number" aria-hidden="true">{{ item.n }}</span>
+								<div class="cn-index-page__map-text">
+									<button type="button" class="cn-index-page__map-title" @click="onRowClick(item.row)">
+										{{ item.title }}
+									</button>
+									<span v-if="item.sub" class="cn-index-page__map-sub">{{ item.sub }}</span>
+									<span v-if="item.pills.length > 0 || item.due" class="cn-index-page__map-pills">
+										<CnStatusBadge v-for="(pill, index) in item.pills"
+											:key="index"
+											:label="pill.label"
+											:variant="pill.variant" />
+										<span v-if="item.due" class="cn-index-page__map-due">{{ item.due }}</span>
+									</span>
+								</div>
+							</li>
+						</ol>
+						<div v-if="mapList.missing.length > 0" class="cn-index-page__map-missing" data-testid="cn-index-map-missing">
+							<strong>{{ mapMissingTitle }}</strong>
+							<NcButton variant="tertiary-no-background" data-testid="cn-index-map-missing-table" @click="onViewModeChange('table')">
+								{{ mapMissingLink }}
+							</NcButton>
+						</div>
+					</div>
+				</div>
+
 				<CnMapWidget
 					v-else-if="currentViewMode === 'map'"
 					class="cn-index-page__map"
+					:zoom="mapZoom"
 					:center="mapCenter"
 					:layers="mapLayers"
 					:basemaps="mapBasemaps"
@@ -1194,6 +1250,7 @@ import CnQuickEditDialog from '../../dialogs/CnQuickEditDialog.vue'
 import CnBuildiqEditButton from '../CnBuildiqEditButton/CnBuildiqEditButton.vue'
 import CnEmptyContent from '../CnEmptyContent/CnEmptyContent.vue'
 import CnFollowToggle from '../CnFollowToggle/CnFollowToggle.vue'
+import CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'
 import CnIndexPageWidgets from './CnIndexPageWidgets.vue'
 import { useContextMenu } from '../../composables/index.js'
 import { useLook } from '../../composables/useLook.js'
@@ -1223,6 +1280,7 @@ import { lensUnavailableText } from '../../utils/lensAvailability.js'
 import { isModifiedClick, openRowTarget } from '../../utils/linkNavigation.js'
 import { resolveClaimedTeams, resolveClaimTokens, splitViewsIntoTabs, viewAsTab, viewIdOf } from '../../utils/listLenses.js'
 import { LIST_SHORTCUTS, listPaletteCommands, shortcutFor } from '../../utils/listShortcuts.js'
+import { mapListItems } from '../../utils/mapList.js'
 import { multiKeySort } from '../../utils/multiKeySort.js'
 import { fetchGroups } from '../../utils/nextcloudDirectory.js'
 import { OBJECTS_CHANGED_EVENT } from '../../utils/objectSignals.js'
@@ -1508,6 +1566,7 @@ export default {
 
 	components: {
 		CnIndexPageWidgets,
+		CnStatusBadge,
 		NcNoteCard,
 		CnBuildiqEditButton,
 		CnFollowToggle,
@@ -1576,8 +1635,33 @@ export default {
 	 * Falls back to an empty object so `CnIndexPage` works standalone
 	 * (unit tests, isolated mount) without `CnAppRoot`.
 	 */
+	/**
+	 * The list a side-panel widget reads (`cnIndexList`): the applied saved
+	 * view, the list's total, and a way to hand back a view that changed
+	 * (the saved-view alert widget). Getters, so a widget follows the page.
+	 *
+	 * @return {object}
+	 */
+	provide() {
+		return {
+			cnIndexList: Object.defineProperties({}, {
+				appliedView: { enumerable: true, get: () => this.appliedSavedView },
+				total: {
+					enumerable: true,
+					get: () => {
+						const total = this.effectivePagination && this.effectivePagination.total
+						return typeof total === 'number' ? total : undefined
+					},
+				},
+				replaceSavedView: { enumerable: true, value: (view) => this.replaceSavedView(view) },
+			}),
+		}
+	},
+
 	inject: {
 		cnCustomComponents: { default: () => ({}) },
+		/** The permissions the user holds, provided by CnAppRoot; for gated page tabs. */
+		cnPermissions: { default: () => [] },
 		/** The app id CnAppRoot provides, for the plural form of `countSubtitle`. */
 		cnAppId: { default: '' },
 		/**
@@ -1668,7 +1752,9 @@ export default {
 
 		/**
 		 * A note after the breadcrumb and a middle dot (manifest `config.headerMeta`),
-		 * such as "{total} open": `{total}` and `{shown}` are the list's counts.
+		 * such as "{total} open": `{total}` and `{shown}` are the list's counts,
+		 * and `{count:<name>}` the count of a list named in `headerMetaCounts`
+		 * ("{total} contracten bij {count:suppliers} leveranciers").
 		 *
 		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-list-dashboard-or-settings-page-can-show-a-breadcrumb-and-a-meta-note
 		 */
@@ -1677,12 +1763,29 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * The other lists `headerMeta` counts (manifest `config.headerMetaCounts`):
+		 * `{ <name>: { register, schema, filter? } }`, each read as one list
+		 * total and filled in for `{count:<name>}`. While a count loads, or when
+		 * it fails, the note is left out rather than shown with a gap.
+		 *
+		 * @type {Record<string, {register: string, schema: string, filter?: object}>|null}
+		 */
+		headerMetaCounts: {
+			type: Object,
+			default: null,
+		},
+
 		/**
 		 * Tabs to sibling pages above the toolbar (manifest `config.pageTabs`),
 		 * each `{ id?, label, route?, params?, query?, href?, countFrom?: {
-		 * register, schema, filter? } }`: DqPrivacy's "AVG-verzoeken |
-		 * Datalekken". The current page's tab is marked; `countFrom` adds the
-		 * count of that list. Wins over a named source's own page tabs.
+		 * register, schema, filter? }, adminOnly?, permission? }`: DqPrivacy's
+		 * "AVG-verzoeken | Datalekken". The current page's tab is marked;
+		 * `countFrom` adds the count of that list. A tab with `adminOnly` shows
+		 * only to an instance admin, one with `permission` only to a user who
+		 * holds it. That hides the tab and nothing more: the page it points to
+		 * must still refuse the user on the server. Wins over a named source's
+		 * own page tabs.
 		 *
 		 * @type {Array<object>|null}
 		 * @spec openspec/changes/index-page-tabs-notice/specs/index-page/spec.md#requirement-an-index-page-can-link-its-sibling-pages-as-tabs
@@ -1852,7 +1955,9 @@ export default {
 		 * variant?, icon?, format?, id? }`: `action` is `add` (the Add flow;
 		 * its label defaults to the Add label), `export` (the export leaf in
 		 * `format`, `csv` by default, else the export dialog), `import`,
-		 * `refresh`, or the id of a `headerActions` entry; `variant` is
+		 * `refresh`, `save-view` (the save-current-view dialog: the board's
+		 * "Zoekopdracht opslaan", label "Save view" by default), or the id of a
+		 * `headerActions` entry; `variant` is
 		 * `primary` or `secondary` (the default). Shown only with
 		 * `showTitle`. When they show, the actions bar drops its Views and
 		 * Actions menus, and the Add button and Export menu when a button
@@ -2164,6 +2269,16 @@ export default {
 			default: true,
 		},
 
+		/**
+		 * Draw the table without its column-header row (manifest
+		 * `config.hideTableHeader`), for a list the board draws as plain rows
+		 * (DqTeamwachtrij). Pair it with `selectable: false` for no checkboxes.
+		 */
+		hideTableHeader: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * When true, a row/card click emits `row-click` (to open/navigate) even
 		 * while `selectable` — selection then happens via the checkbox only.
@@ -2307,8 +2422,15 @@ export default {
 		 * - `popupField` — object property rendered in the marker popup.
 		 * - `center` — optional `[lat, lng]` fallback centre when the filtered set
 		 *   has no plottable rows.
+		 * - `zoom` — the map's initial zoom level.
+		 * - `list` — a numbered list beside the map, map and list in one card
+		 *   (DqZakenKaart): `{ title, sub?, pills?: [{ path?, text?, map?,
+		 *   colorMap? }], due? }`, field templates read per row. The pins carry the
+		 *   list's numbers, the row under the pointer is marked on both, the rows
+		 *   without a place are counted under the list with a link to the table,
+		 *   and the page's count line adds how many are on the map.
 		 *
-		 * @type {{ latField?: string, lngField?: string, geoField?: string, popupField?: string, center?: [number, number] }}
+		 * @type {{ latField?: string, lngField?: string, geoField?: string, popupField?: string, center?: [number, number], zoom?: number, list?: object }}
 		 */
 		mapConfig: {
 			type: Object,
@@ -3722,6 +3844,10 @@ export default {
 			filterStripCounts: null,
 			/** The `countFrom` counts of the manifest page tabs, by index. */
 			pageTabCounts: {},
+			/** The `headerMetaCounts` totals, by name; a failed one is null. */
+			headerMetaCountValues: {},
+			/** The row the pointer is on in the map list, by key; '' for none. */
+			activeMapKey: '',
 			/** The tabs `quickFiltersFrom` produced, or null before they load. */
 			generatedQuickFilters: null,
 			/** Count per saved-view id, for the views control; null = none. */
@@ -5480,6 +5606,8 @@ export default {
 		 */
 		mapMarkers() {
 			const features = []
+			// With the list beside the map, a pin carries the row's number there.
+			const numbers = this.mapListEnabled ? new Map(this.mapList.items.map((item) => [item.row, item.n])) : null
 			for (const row of this.displayObjects) {
 				const geometry = this.resolveRowGeometry(row)
 				if (!geometry) {
@@ -5491,6 +5619,7 @@ export default {
 					properties: {
 						[this.rowKey]: row[this.rowKey],
 						...(this.mapConfig.popupField ? { [this.mapConfig.popupField]: row[this.mapConfig.popupField] } : {}),
+						...(numbers && numbers.has(row) ? { markerNumber: numbers.get(row), markerActive: this.activeMapKey === String(row[this.rowKey]) } : {}),
 					},
 				})
 			}
@@ -5517,6 +5646,57 @@ export default {
 			return this.mapConfig.clustering !== false
 		},
 
+		/** @return {number|undefined} The map's initial zoom (`mapConfig.zoom`), when a number. */
+		mapZoom() {
+			const zoom = this.mapConfig && this.mapConfig.zoom
+			return typeof zoom === 'number' && Number.isFinite(zoom) ? zoom : undefined
+		},
+
+		/** @return {boolean} Whether the map draws its numbered list (`mapConfig.list`). */
+		mapListEnabled() {
+			const list = this.mapConfig && this.mapConfig.list
+			return Boolean(list && typeof list === 'object' && typeof list.title === 'string' && list.title !== '')
+		},
+
+		/**
+		 * The map list's entries, numbered as the pins, and the rows without a
+		 * place. Templates go through the host's translate first.
+		 *
+		 * @return {{items: Array<object>, missing: Array<object>}}
+		 */
+		mapList() {
+			if (!this.mapListEnabled) {
+				return { items: [], missing: [] }
+			}
+			const list = this.mapConfig.list
+			const translated = {
+				...list,
+				title: this.cnTranslate(list.title),
+				sub: 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),
+			})
+		},
+
+		/** @return {string} The list's accessible name. */
+		mapListLabel() {
+			return t('nextcloud-vue', 'On the map')
+		},
+
+		/** @return {string} The card under the list, for the rows without a place. */
+		mapMissingTitle() {
+			return n('nextcloud-vue', '%n without an address', '%n without an address', this.mapList.missing.length)
+		},
+
+		/** @return {string} The link from that card to the table. */
+		mapMissingLink() {
+			return t('nextcloud-vue', 'Show them in the table')
+		},
+
 		/**
 		 * Extra (non-background) map layers — WMS / WFS / GeoJSON overlays declared in
 		 * `mapConfig.layers`. The background map comes from `mapBasemaps` instead, so
@@ -5617,9 +5797,51 @@ export default {
 			if (this.selfFetchFailed) {
 				return { ...this.list.pagination.value, total: 0, page: 1, pages: 1 }
 			}
+			// A named source that reports its own total (the search source)
+			// gives the count line its number.
+			if (this.isNamedSource && this.namedSource && typeof this.namedSource.total === 'function') {
+				return { ...(this.pagination || {}), total: this.namedSource.total() }
+			}
 			return this.isSelfFetchMode ? this.list.pagination.value : this.pagination
 		},
 
+		/**
+		 * The saved view the page has applied, or null.
+		 *
+		 * @return {object|null}
+		 */
+		appliedSavedView() {
+			const id = this.appliedSavedViewId
+			if (!id) {
+				return null
+			}
+			return (this.savedViews || []).find((view) => view && (String(view.id) === id || String(view.slug) === id || String(view.uuid) === id)) || null
+		},
+
+		/**
+		 * The term a named source searched for, for `{term}` in the title and
+		 * the count line ("Zoeken: Lindelaan"), or ''.
+		 *
+		 * @return {string}
+		 */
+		sourceTerm() {
+			return this.isNamedSource && this.namedSource && typeof this.namedSource.term === 'function' ? String(this.namedSource.term() || '') : ''
+		},
+
+		/**
+		 * The page title with `{term}` filled in.
+		 *
+		 * @return {string}
+		 */
+		shownTitle() {
+			const title = this.presented('title')
+			// A title with the term is translated here, before the term goes in,
+			// so its catalogue entry is found ("Zoeken: {term}").
+			return typeof title === 'string' && title.includes('{term}')
+				? this.cnTranslate(title).replace(/\{term\}/g, this.sourceTerm)
+				: title
+		},
+
 		/**
 		 * Whether the table marks unread rows. The boards draw every row alike,
 		 * so under the board look only a page that offers the Unread lens
@@ -6202,9 +6424,13 @@ export default {
 			if (!Array.isArray(this.pageTabs) || this.pageTabs.length === 0) {
 				return this.sourcePageTabs
 			}
+			// The index is the tab's place in `pageTabs`, which is how its count
+			// is keyed, so the tabs are numbered before any is left out.
 			return this.pageTabs
-				.filter((tab) => tab && typeof tab.label === 'string' && tab.label !== '' && (tab.route || tab.to || tab.href))
-				.map((tab, index) => {
+				.map((tab, index) => ({ tab, index }))
+				.filter(({ tab }) => tab && typeof tab.label === 'string' && tab.label !== '' && (tab.route || tab.to || tab.href))
+				.filter(({ tab }) => this.pageTabVisible(tab))
+				.map(({ tab, index }) => {
 					const to = tab.route
 						? { name: tab.route, ...(tab.params ? { params: tab.params } : {}), ...(tab.query ? { query: tab.query } : {}) }
 						: (tab.to || tab.href)
@@ -6356,6 +6582,9 @@ export default {
 					if (label === '' && button.action === 'actions-menu') {
 						label = t('nextcloud-vue', 'Actions')
 					}
+					if (label === '' && button.action === 'save-view') {
+						label = t('nextcloud-vue', 'Save view')
+					}
 					return {
 						key: String(button.id || button.action || index),
 						label,
@@ -6646,12 +6875,60 @@ export default {
 				return ''
 			}
 			const total = this.effectivePagination?.total
-			return this.cnTranslate(headerMeta)
+			let missing = false
+			const text = this.cnTranslate(headerMeta)
 				.replace('{shown}', String(this.effectiveObjects.length))
 				.replace('{total}', typeof total === 'number' ? String(total) : '')
+				.replace(/\{count:([\w-]+)\}/g, (match, name) => {
+					const value = this.headerMetaCountValues[name]
+					if (typeof value !== 'number') {
+						missing = true
+						return ''
+					}
+					return String(value)
+				})
+			return missing ? '' : text
 		},
 
+		/**
+		 * Whether the header note carries a count, so the board leaves out its
+		 * own "{shown} of {total}" line (DqPrivacy, DqContracten).
+		 *
+		 * @return {boolean}
+		 */
+		headerMetaCarriesCount() {
+			const headerMeta = this.presented('headerMeta')
+			return typeof headerMeta === 'string' && /\{(shown|total|count:[\w-]+)\}/.test(headerMeta)
+		},
+
+		/**
+		 * What the header note's other counts depend on, as one key.
+		 *
+		 * @return {string}
+		 */
+		headerMetaCountKey() {
+			const sources = this.headerMetaCounts && typeof this.headerMetaCounts === 'object' ? this.headerMetaCounts : {}
+			const valid = Object.entries(sources).filter(([, from]) => from && from.register && from.schema)
+			return valid.length > 0 ? JSON.stringify(valid) : ''
+		},
+
+		/**
+		 * The header's description line, and on the map with its list the
+		 * number of rows on the map after a middle dot ("· 5 met een adres op
+		 * de kaart", DqZakenKaart).
+		 *
+		 * @return {string}
+		 */
 		headerDescription() {
+			const base = this.headerDescriptionBase
+			if (this.currentViewMode !== 'map' || !this.mapListEnabled) {
+				return base
+			}
+			const onMap = n('nextcloud-vue', '%n with an address on the map', '%n with an address on the map', this.mapList.items.length)
+			return base ? `${base} · ${onMap}` : onMap
+		},
+
+		headerDescriptionBase() {
 			const total = this.effectivePagination?.total
 			// Board look: the count line is a template over the rows on this page
 			// and all rows, "{shown} of {total}" unless the page says otherwise.
@@ -6661,6 +6938,10 @@ export default {
 				// reads "14 van 14" in Dutch; a page's own template goes
 				// through the app's label lookup.
 				const countText = this.presented('countText')
+				// The note after the breadcrumb already says how many there are.
+				if (!countText && !this.countSubtitle && this.headerMetaCarriesCount) {
+					return this.description
+				}
 				if (!countText && !this.countSubtitle) {
 					return t('nextcloud-vue', '{shown} of {total}', { shown, total })
 				}
@@ -6668,6 +6949,7 @@ export default {
 					return this.cnTranslate(countText)
 						.replace('{shown}', String(shown))
 						.replace('{total}', String(total))
+						.replace(/\{term\}/g, this.sourceTerm)
 				}
 				return this.countLine(this.countSubtitle, total, shown)
 			}
@@ -6907,6 +7189,13 @@ export default {
 			},
 		},
 
+		headerMetaCountKey: {
+			immediate: true,
+			handler() {
+				this.loadHeaderMetaCounts()
+			},
+		},
+
 		pageTabCountKey: {
 			immediate: true,
 			/** @spec openspec/changes/index-page-tabs-notice/specs/index-page/spec.md#requirement-an-index-page-can-link-its-sibling-pages-as-tabs */
@@ -7326,6 +7615,65 @@ export default {
 			]
 		},
 
+		/**
+		 * Whether Nextcloud says the user administers this instance; false
+		 * when the user cannot be read.
+		 *
+		 * @return {boolean}
+		 */
+		viewerIsAdmin() {
+			try {
+				return getCurrentUser()?.isAdmin === true
+			} catch {
+				return false
+			}
+		},
+
+		/**
+		 * Whether a manifest page tab shows to this user: an `adminOnly` tab to
+		 * an instance admin, a tab with a `permission` to a user who holds it
+		 * (as a menu entry: with no permissions known, it shows). This only
+		 * decides whether the tab is drawn. It is not access control; the
+		 * page behind the tab must enforce its own access on the server.
+		 *
+		 * @param {object} tab The tab declaration.
+		 * @return {boolean} True when the tab is drawn.
+		 */
+		pageTabVisible(tab) {
+			if (tab.adminOnly === true && !this.viewerIsAdmin()) {
+				return false
+			}
+			if (tab.permission) {
+				const held = Array.isArray(this.cnPermissions) ? this.cnPermissions : []
+				if (held.length > 0 && !held.includes(tab.permission)) {
+					return false
+				}
+			}
+			return true
+		},
+
+		/**
+		 * Read the totals of the lists `headerMetaCounts` names, one list
+		 * request each. A failed count is null and leaves the note out.
+		 *
+		 * @return {Promise<void>}
+		 */
+		async loadHeaderMetaCounts() {
+			const key = this.headerMetaCountKey
+			if (key === '') {
+				this.headerMetaCountValues = {}
+				return
+			}
+			const ctx = typeof this.selfFetchTokenCtx === 'function' ? this.selfFetchTokenCtx() : {}
+			const values = {}
+			await Promise.all(JSON.parse(key).map(async ([name, from]) => {
+				values[name] = await fetchListTotal(from.register, from.schema, from.filter || {}, ctx).catch(() => null)
+			}))
+			if (key === this.headerMetaCountKey) {
+				this.headerMetaCountValues = values
+			}
+		},
+
 		/**
 		 * Count the lists behind the manifest page tabs (`countFrom`), one list
 		 * request each. A failed count shows no number.
@@ -8048,6 +8396,8 @@ export default {
 				this.showImportDialog = true
 			} else if (button.action === 'refresh') {
 				this.onRefreshEvent()
+			} else if (button.action === 'save-view') {
+				this.showSaveViewDialog = true
 			} else {
 				this.onHeaderAction({ action: button.action, id: button.action })
 			}
@@ -10058,6 +10408,21 @@ export default {
 			}
 		},
 
+		/**
+		 * Put a saved view that changed elsewhere (its alert) back in the list,
+		 * matched on its id or uuid.
+		 *
+		 * @param {object} view The saved view as the server returned it.
+		 * @return {void}
+		 */
+		replaceSavedView(view) {
+			if (!view || typeof view !== 'object') {
+				return
+			}
+			const same = (other) => other && ((view.id !== undefined && other.id === view.id) || (view.uuid && other.uuid === view.uuid))
+			this.savedViews = (this.savedViews || []).map((other) => (same(other) ? view : other))
+		},
+
 		async onSaveViewConfirm({ name, isPublic, sharedWith, presentation }) {
 			const state = this.isSelfFetchMode
 				? this.currentViewState()

package/src/components/CnIndexPage/useNamedSource.js

@@ -75,7 +75,10 @@ export function useNamedSource(props, options = {}) {
 		}
 	}
 
-	const source = resolveIndexSource(props.entitySource, props.sourceConfig)
+	const cnTranslate = inject('cnTranslate', null)
+	const source = resolveIndexSource(props.entitySource, props.sourceConfig, {
+		translate: (text) => (typeof cnTranslate === 'function' ? cnTranslate(text) : text),
+	})
 
 	// An unknown source name resolves to null and was already warned about.
 	// The page then behaves as an empty index rather than throwing.

package/src/components/CnMapWidget/CnMapWidget.vue

@@ -865,6 +865,21 @@ export default {
 					const color = (feature.properties && feature.properties.markerColor)
 						|| (this.cfg.markers && this.cfg.markers.iconColor)
 						|| 'var(--color-primary-element, #2196F3)'
+					// A numbered pin, the number the list beside the map shows for the
+					// same row (an index map with `mapConfig.list`); the active row's
+					// pin draws darker.
+					const number = feature.properties && Number(feature.properties.markerNumber)
+					if (Number.isInteger(number) && number > 0) {
+						const active = feature.properties.markerActive === true
+						return L.marker(latlng, {
+							icon: L.divIcon({
+								className: active ? 'cn-map-widget__pin cn-map-widget__pin--active' : 'cn-map-widget__pin',
+								html: `<span>${number}</span>`,
+								iconSize: [26, 26],
+								iconAnchor: [13, 13],
+							}),
+						})
+					}
 					if (this.cfg.markers && this.cfg.markers.iconUrl) {
 						return L.marker(latlng, {
 							icon: L.icon({ iconUrl: this.cfg.markers.iconUrl, iconSize: [25, 41], iconAnchor: [12, 41] }),
@@ -1479,3 +1494,25 @@ export default {
 	background: var(--color-background-hover);
 }
 </style>
+
+<style>
+/* A numbered pin (`properties.markerNumber`): a 26px primary circle with its
+   number in white, the active one darker. Unscoped, because Leaflet creates
+   the marker element outside the template. */
+.cn-map-widget__pin {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: 2px solid var(--color-main-background);
+	border-radius: 50%;
+	background: var(--color-primary-element);
+	color: var(--color-primary-element-text);
+	font-size: 13px;
+	font-weight: 700;
+	box-sizing: border-box;
+}
+
+.cn-map-widget__pin--active {
+	background: var(--color-primary-element-light-text);
+}
+</style>