@conduction/nextcloud-vue 2.79.0 → 2.81.0

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

@@ -10,12 +10,14 @@ import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue';
 import Export from 'vue-material-design-icons/Export.vue';
 import Eye from 'vue-material-design-icons/Eye.vue';
 import FilterOutline from 'vue-material-design-icons/FilterOutline.vue';
+import Tune from 'vue-material-design-icons/Tune.vue';
 import ViewColumnOutline from 'vue-material-design-icons/ViewColumnOutline.vue';
-import __sfc_main$v from '../../dialogs/CnConfirmDialog.vue.js';
-import __sfc_main$w from '../../dialogs/CnQuickEditDialog.vue.js';
-import __sfc_main from '../CnBuildiqEditButton/CnBuildiqEditButton.vue.js';
-import __sfc_main$2 from '../CnEmptyContent/CnEmptyContent.vue.js';
-import __sfc_main$1 from '../CnFollowToggle/CnFollowToggle.vue.js';
+import __sfc_main$w from '../../dialogs/CnConfirmDialog.vue.js';
+import __sfc_main$x from '../../dialogs/CnQuickEditDialog.vue.js';
+import __sfc_main$1 from '../CnBuildiqEditButton/CnBuildiqEditButton.vue.js';
+import __sfc_main$3 from '../CnEmptyContent/CnEmptyContent.vue.js';
+import __sfc_main$2 from '../CnFollowToggle/CnFollowToggle.vue.js';
+import __sfc_main from './CnIndexPageWidgets.vue.js';
 import { useLook } from '../../composables/useLook.js';
 import { copyKindsOf } from '../../composables/useObjectCopy.js';
 import { createRefLabelResolver } from '../../composables/useRefLabels.js';
@@ -45,37 +47,37 @@ import { viewMatchesScope, extractViewState, buildRouteQueryFromViewState, extra
 import { fieldsFromSchema, columnsFromSchema } from '../../utils/schema.js';
 import { resolveScopeLayout } from '../../utils/scopeListLayout.js';
 import { dispatchObjectCreated } from '../../utils/walkthroughSignals.js';
-import __sfc_main$5 from '../CnActionsBar/CnActionsBar.vue.js';
-import __sfc_main$o from '../CnAdvancedFormDialog/CnAdvancedFormDialog.vue.js';
+import __sfc_main$6 from '../CnActionsBar/CnActionsBar.vue.js';
+import __sfc_main$p from '../CnAdvancedFormDialog/CnAdvancedFormDialog.vue.js';
 import '../CnAdvancedFormDialog/CnMetadataTab.vue.js';
 import '../CnAdvancedFormDialog/CnPropertiesTab.vue.js';
 import '../CnAdvancedFormDialog/CnPropertyValueCell.vue.js';
-import __sfc_main$9 from '../CnBoardView/CnBoardView.vue.js';
-import __sfc_main$8 from '../CnCardGrid/CnCardGrid.vue.js';
-import __sfc_main$p from '../CnContextMenu/CnContextMenu.vue.js';
-import __sfc_main$m from '../CnCopyDialog/CnCopyDialog.vue.js';
-import __sfc_main$7 from '../CnDataTable/CnDataTable.vue.js';
-import __sfc_main$a from '../CnDateAxisView/CnDateAxisView.vue.js';
-import __sfc_main$l from '../CnDeleteDialog/CnDeleteDialog.vue.js';
-import __sfc_main$e from '../CnFolderSidebar/CnFolderSidebar.vue.js';
-import __sfc_main$n from '../CnFormDialog/CnFormDialog.vue.js';
-import __sfc_main$6 from '../CnIcon/CnIcon.vue.js';
-import __sfc_main$q from '../CnIndexSidebar/CnIndexSidebar.vue.js';
-import __sfc_main$c from '../CnMapWidget/CnMapWidget.vue.js';
-import __sfc_main$i from '../CnMassCopyDialog/CnMassCopyDialog.vue.js';
-import __sfc_main$h from '../CnMassDeleteDialog/CnMassDeleteDialog.vue.js';
-import __sfc_main$j from '../CnMassExportDialog/CnMassExportDialog.vue.js';
-import __sfc_main$k from '../CnMassImportDialog/CnMassImportDialog.vue.js';
-import __sfc_main$b from '../CnObjectCalendar/CnObjectCalendar.vue.js';
-import __sfc_main$d from '../CnObjectList/CnObjectList.vue.js';
-import __sfc_main$3 from '../CnPageHeader/CnPageHeader.vue.js';
-import __sfc_main$f from '../CnPagination/CnPagination.vue.js';
-import __sfc_main$4 from '../CnQuickFilterBar/CnQuickFilterBar.vue.js';
-import __sfc_main$g from '../CnRowActions/CnRowActions.vue.js';
-import __sfc_main$s from '../CnSavedViewPresentationDialog/CnSavedViewPresentationDialog.vue.js';
-import __sfc_main$r from '../CnSavedViewsControl/CnSavedViewsControl.vue.js';
-import __sfc_main$t from '../CnSavedViewShareDialog/CnSavedViewShareDialog.vue.js';
-import __sfc_main$u from '../CnSaveViewDialog/CnSaveViewDialog.vue.js';
+import __sfc_main$a from '../CnBoardView/CnBoardView.vue.js';
+import __sfc_main$9 from '../CnCardGrid/CnCardGrid.vue.js';
+import __sfc_main$q from '../CnContextMenu/CnContextMenu.vue.js';
+import __sfc_main$n from '../CnCopyDialog/CnCopyDialog.vue.js';
+import __sfc_main$8 from '../CnDataTable/CnDataTable.vue.js';
+import __sfc_main$b from '../CnDateAxisView/CnDateAxisView.vue.js';
+import __sfc_main$m from '../CnDeleteDialog/CnDeleteDialog.vue.js';
+import __sfc_main$f from '../CnFolderSidebar/CnFolderSidebar.vue.js';
+import __sfc_main$o from '../CnFormDialog/CnFormDialog.vue.js';
+import __sfc_main$7 from '../CnIcon/CnIcon.vue.js';
+import __sfc_main$r from '../CnIndexSidebar/CnIndexSidebar.vue.js';
+import __sfc_main$d from '../CnMapWidget/CnMapWidget.vue.js';
+import __sfc_main$j from '../CnMassCopyDialog/CnMassCopyDialog.vue.js';
+import __sfc_main$i from '../CnMassDeleteDialog/CnMassDeleteDialog.vue.js';
+import __sfc_main$k from '../CnMassExportDialog/CnMassExportDialog.vue.js';
+import __sfc_main$l from '../CnMassImportDialog/CnMassImportDialog.vue.js';
+import __sfc_main$c from '../CnObjectCalendar/CnObjectCalendar.vue.js';
+import __sfc_main$e from '../CnObjectList/CnObjectList.vue.js';
+import __sfc_main$4 from '../CnPageHeader/CnPageHeader.vue.js';
+import __sfc_main$g from '../CnPagination/CnPagination.vue.js';
+import __sfc_main$5 from '../CnQuickFilterBar/CnQuickFilterBar.vue.js';
+import __sfc_main$h from '../CnRowActions/CnRowActions.vue.js';
+import __sfc_main$t from '../CnSavedViewPresentationDialog/CnSavedViewPresentationDialog.vue.js';
+import __sfc_main$s from '../CnSavedViewsControl/CnSavedViewsControl.vue.js';
+import __sfc_main$u from '../CnSavedViewShareDialog/CnSavedViewShareDialog.vue.js';
+import __sfc_main$v from '../CnSaveViewDialog/CnSaveViewDialog.vue.js';
 import { applyAiContext } from './aiContext.js';
 import { buildDefaultActions } from './defaultActions.js';
 import { dispatchAction } from './manifestActionDispatch.js';
@@ -303,10 +305,11 @@ var script = {
 	name: 'CnIndexPage',
 
 	components: {
-		CnBuildiqEditButton: __sfc_main,
-		CnFollowToggle: __sfc_main$1,
+		CnIndexPageWidgets: __sfc_main,
+		CnBuildiqEditButton: __sfc_main$1,
+		CnFollowToggle: __sfc_main$2,
 		NcLoadingIcon,
-		CnEmptyContent: __sfc_main$2,
+		CnEmptyContent: __sfc_main$3,
 		NcActions,
 		NcActionButton,
 		NcActionCaption,
@@ -318,39 +321,40 @@ var script = {
 		DatabaseSearch,
 		Export,
 		FilterOutline,
+		Tune,
 		ViewColumnOutline,
 		NcCheckboxRadioSwitch,
-		CnPageHeader: __sfc_main$3,
-		CnQuickFilterBar: __sfc_main$4,
-		CnActionsBar: __sfc_main$5,
+		CnPageHeader: __sfc_main$4,
+		CnQuickFilterBar: __sfc_main$5,
+		CnActionsBar: __sfc_main$6,
 		DotsHorizontal,
-		CnIcon: __sfc_main$6,
-		CnDataTable: __sfc_main$7,
-		CnCardGrid: __sfc_main$8,
-		CnBoardView: __sfc_main$9,
-		CnDateAxisView: __sfc_main$a,
-		CnObjectCalendar: __sfc_main$b,
-		CnMapWidget: __sfc_main$c,
-		CnObjectList: __sfc_main$d,
-		CnFolderSidebar: __sfc_main$e,
-		CnPagination: __sfc_main$f,
-		CnRowActions: __sfc_main$g,
-		CnMassDeleteDialog: __sfc_main$h,
-		CnMassCopyDialog: __sfc_main$i,
-		CnMassExportDialog: __sfc_main$j,
-		CnMassImportDialog: __sfc_main$k,
-		CnDeleteDialog: __sfc_main$l,
-		CnCopyDialog: __sfc_main$m,
-		CnFormDialog: __sfc_main$n,
-		CnAdvancedFormDialog: __sfc_main$o,
-		CnContextMenu: __sfc_main$p,
-		CnIndexSidebar: __sfc_main$q,
-		CnSavedViewsControl: __sfc_main$r,
-		CnSavedViewPresentationDialog: __sfc_main$s,
-		CnSavedViewShareDialog: __sfc_main$t,
-		CnSaveViewDialog: __sfc_main$u,
-		CnConfirmDialog: __sfc_main$v,
-		CnQuickEditDialog: __sfc_main$w,
+		CnIcon: __sfc_main$7,
+		CnDataTable: __sfc_main$8,
+		CnCardGrid: __sfc_main$9,
+		CnBoardView: __sfc_main$a,
+		CnDateAxisView: __sfc_main$b,
+		CnObjectCalendar: __sfc_main$c,
+		CnMapWidget: __sfc_main$d,
+		CnObjectList: __sfc_main$e,
+		CnFolderSidebar: __sfc_main$f,
+		CnPagination: __sfc_main$g,
+		CnRowActions: __sfc_main$h,
+		CnMassDeleteDialog: __sfc_main$i,
+		CnMassCopyDialog: __sfc_main$j,
+		CnMassExportDialog: __sfc_main$k,
+		CnMassImportDialog: __sfc_main$l,
+		CnDeleteDialog: __sfc_main$m,
+		CnCopyDialog: __sfc_main$n,
+		CnFormDialog: __sfc_main$o,
+		CnAdvancedFormDialog: __sfc_main$p,
+		CnContextMenu: __sfc_main$q,
+		CnIndexSidebar: __sfc_main$r,
+		CnSavedViewsControl: __sfc_main$s,
+		CnSavedViewPresentationDialog: __sfc_main$t,
+		CnSavedViewShareDialog: __sfc_main$u,
+		CnSaveViewDialog: __sfc_main$v,
+		CnConfirmDialog: __sfc_main$w,
+		CnQuickEditDialog: __sfc_main$x,
 	},
 
 	/**
@@ -499,7 +503,6 @@ var script = {
 			default: true,
 		},
 
-		// eslint-disable-next-line vue/no-unused-properties
 		/**
 		 * Draw this page in the `board` look (or `nextcloud`) whatever the app
 		 * does. Empty follows the `cnLook` CnAppRoot provides. Manifest key
@@ -647,7 +650,13 @@ var script = {
 		 * `$route.params` just like the `filter` prop. The first tab with
 		 * `default:true` (else index 0) is active on mount; changing tabs
 		 * re-fetches at page 1. Omit (or `null`) → no tab strip, behaviour
-		 * unchanged.
+		 * unchanged. Under the board look a tab with `activeLabel` ("Pipeline:
+		 * Sales") adds a removable chip with that text to the Active line and
+		 * counts on the Filter badge while it is selected; removing the chip
+		 * goes back to the default tab. A tab can say `empty: "field"` (or a
+		 * list of fields) for the rows where the field has no value, and
+		 * `notEmpty` for the rows where it has one: it reads as the filter
+		 * `{ field: { isnull: true } }`.
 		 */
 		quickFilters: {
 			type: Array,
@@ -1018,6 +1027,22 @@ var script = {
 			default: null,
 		},
 
+		/**
+		 * Board look: the segments the view switch draws, e.g. `['table',
+		 * 'cards', 'board', 'map']` as the boards do. A listed mode the page
+		 * can open is an ordinary segment; one it cannot (no board columns, no
+		 * map configured) is drawn disabled, named "<mode>: not available on
+		 * this list". Fed from `pages[].config.viewSwitch`. Ignored without the
+		 * board look, and absent the switch is as before.
+		 *
+		 * @type {Array<'table' | 'cards' | 'board' | 'map'>}
+		 * @spec openspec/changes/screens-view-switch-parity/specs/view-switch-board-look/spec.md#requirement-the-manifest-can-draw-segments-the-page-cannot-open
+		 */
+		viewSwitch: {
+			type: Array,
+			default: null,
+		},
+
 		/**
 		 * The board's configuration, mirroring the manifest `config.board`
 		 * block: `{ statusField, cardFields, swimlaneField }`. The board is
@@ -1704,6 +1729,35 @@ var script = {
 			default: null,
 		},
 
+		/**
+		 * KPI tiles above the list (manifest `config.statRow`): dashboard
+		 * widget definitions `{ id, type, title?, content }`, usually `stat`,
+		 * drawn in an auto-fit row (each at least 200px) in the listed order.
+		 * Types resolve like dashboard widgets: the app registry, then the
+		 * dashboard catalog. Empty by default.
+		 *
+		 * @spec openspec/changes/screens-index-stat-row/specs/index-page/spec.md#requirement-an-index-page-can-draw-a-stat-row-above-the-list
+		 * @type {Array<object>}
+		 */
+		statRow: {
+			type: Array,
+			default: () => [],
+		},
+
+		/**
+		 * Cards beside the list (manifest `config.sidePanel`): dashboard
+		 * widget definitions `{ id, type, title?, content, headerLink? }`
+		 * drawn in a 300px column right of the toolbar and the list. Empty
+		 * by default; below 1024px the column moves above the list.
+		 *
+		 * @spec openspec/changes/screens-index-stat-row/specs/index-page/spec.md#requirement-an-index-page-can-draw-a-side-panel-beside-the-list
+		 * @type {Array<object>}
+		 */
+		sidePanel: {
+			type: Array,
+			default: () => [],
+		},
+
 		/**
 		 * Where a row carries the actions the server says this caller may run
 		 * on it: a dotted path, read off the rows the list already fetched, so
@@ -1887,6 +1941,8 @@ var script = {
 		 * Show a filter menu (funnel button) in the table header, above the
 		 * row-actions column. Its menu lists every enum/badge column's values as
 		 * toggleable facet filters — a compact alternative to the facet sidebar.
+		 * Under the board look, on a page with no filter sidebar, it is the
+		 * toolbar's labelled Filter button instead (row 1, before the view switch).
 		 * Fed from the manifest as `pages[].config.filterMenu`.
 		 */
 		filterMenu: {
@@ -2383,6 +2439,16 @@ var script = {
 	},
 
 	computed: {
+		/**
+		 * Whether the page draws cards beside its list (`sidePanel`).
+		 *
+		 * @spec openspec/changes/screens-index-stat-row/specs/index-page/spec.md#requirement-an-index-page-can-draw-a-side-panel-beside-the-list
+		 * @return {boolean}
+		 */
+		hasSidePanel() {
+			return Array.isArray(this.sidePanel) && this.sidePanel.length > 0
+		},
+
 		/**
 		 * The empty-state copy run through the host translate function
 		 * (the injected `cnTranslate`, identity by default). Only this
@@ -2755,6 +2821,21 @@ var script = {
 			return Object.keys(this.mapConfig || {}).length > 0
 		},
 
+		/**
+		 * Board look: the modes `viewSwitch` lists that this page cannot open,
+		 * drawn as disabled segments.
+		 *
+		 * @return {Array<string>} The disabled modes.
+		 * @spec openspec/changes/screens-view-switch-parity/specs/view-switch-board-look/spec.md#requirement-the-manifest-can-draw-segments-the-page-cannot-open
+		 */
+		viewSwitchDisabledModes() {
+			if (!this.isBoardLook || !Array.isArray(this.viewSwitch)) {
+				return []
+			}
+			const offered = [...this.effectiveToggleModes, ...(this.showMapSegment ? ['map'] : [])];
+			return this.viewSwitch.filter((mode) => ['table', 'cards', 'board', 'map'].includes(mode) && !offered.includes(mode))
+		},
+
 		/**
 		 * The base view-toggle segments (cards/table/list) passed to CnActionsBar.
 		 * Beta's explicit `viewModes` whitelist wins when set; otherwise the
@@ -4324,11 +4405,11 @@ var script = {
 				return []
 			}
 			const props = this.effectiveSchema?.properties || {};
-			const chips = [];
+			const chips = [...this.quickFilterActiveChips];
 			for (const [key, raw] of Object.entries(this.effectiveActiveFilters || {})) {
 				const values = (Array.isArray(raw) ? raw : [raw])
 					.filter((value) => value !== null && value !== undefined && value !== '')
-					.map((value) => String(value));
+					.map((value) => this.activeFilterValueLabel(key, value));
 				if (values.length === 0) {
 					continue
 				}
@@ -4338,6 +4419,87 @@ var script = {
 			return chips
 		},
 
+		/**
+		 * The Active line's chips for the selected quick filters: one per
+		 * selected tab that declares an `activeLabel` ("Pipeline: Sales"), run
+		 * through the app's translate. A tab without one (an "All" tab) adds no
+		 * chip. The chip carries the tab's index so removing it can deselect it.
+		 *
+		 * @spec openspec/changes/screens-active-filter-line-parity/specs/active-filter-line-board-look/spec.md#requirement-a-quick-filter-with-an-active-label-joins-the-active-line
+		 * @return {Array<{key: string, label: string, quickFilterIndex: number}>}
+		 */
+		quickFilterActiveChips() {
+			const tabs = this.tabStripEntries || [];
+			if (tabs.length === 0) {
+				return []
+			}
+			const indices = this.quickFilterMultiple
+				? (this.selectedQuickFilterIndices || [])
+				: [this.activeQuickFilterIndex];
+			return indices
+				.filter((index) => typeof index === 'number' && tabs[index] && typeof tabs[index].activeLabel === 'string' && tabs[index].activeLabel !== '')
+				.map((index) => ({ key: `quick-filter:${index}`, label: this.cnTranslate(tabs[index].activeLabel), quickFilterIndex: index }))
+		},
+
+		/**
+		 * Filter keys over a reference property that the Active line must name,
+		 * and that no reference column resolves already: one spec each, with the
+		 * referenced register and schema off the page schema's `$ref`.
+		 *
+		 * @spec openspec/changes/screens-active-filter-line-parity/specs/active-filter-line-board-look/spec.md#requirement-an-active-chip-names-the-value-not-its-id
+		 * @return {Array<{key: string, labelField: string, register: string, schema: string}>}
+		 */
+		activeFilterRefSpecs() {
+			if (!this.isBoardLook || !this.effectiveSchema) {
+				return []
+			}
+			const keys = Object.keys(this.effectiveActiveFilters || {});
+			if (keys.length === 0) {
+				return []
+			}
+			const covered = new Set(this.refLabelSpecs.map((spec) => spec.key));
+			const fields = fieldsFromSchema(this.effectiveSchema, { includeReadOnly: true });
+			const specs = [];
+			for (const key of keys) {
+				if (covered.has(key)) {
+					continue
+				}
+				const field = fields.find((f) => f.key === key);
+				const ref = field && field.reference;
+				if (!ref || ref.schema === undefined || ref.schema === null) {
+					continue
+				}
+				specs.push({
+					key,
+					labelField: '',
+					register: ref.register || (typeof this.register === 'string' ? this.register : ''),
+					schema: String(ref.schema),
+				});
+			}
+			return specs
+		},
+
+		/**
+		 * The ids each active reference filter holds, per filter key, for the
+		 * label lookup of the Active line.
+		 *
+		 * @return {{[key: string]: string[]}} Distinct ids per filter key.
+		 */
+		activeFilterRefIds() {
+			const out = {};
+			const keys = new Set([...this.refLabelSpecs, ...this.activeFilterRefSpecs].map((spec) => spec.key));
+			for (const [key, raw] of Object.entries(this.effectiveActiveFilters || {})) {
+				if (!keys.has(key)) {
+					continue
+				}
+				out[key] = (Array.isArray(raw) ? raw : [raw])
+					.filter((id) => id !== null && id !== undefined && id !== '' && typeof id !== 'object')
+					.map((id) => String(id))
+					.sort();
+			}
+			return out
+		},
+
 		/**
 		 * The plural the board bulk band names: "With the selected cases".
 		 * The schema's `titlePlural` (or `plural`), else the lower-cased
@@ -4495,6 +4657,27 @@ var script = {
 			return !!this.resolvedSidebar.enabled && this.resolvedSidebar.show !== false
 		},
 
+		/**
+		 * Whether the board toolbar draws the Filter button as a menu: the
+		 * board look, `filterMenu` on, something to filter by, and no filter
+		 * sidebar (whose toggle is that button otherwise).
+		 *
+		 * @return {boolean}
+		 */
+		boardFilterMenu() {
+			return this.isBoardLook && this.filterMenu && !this.hasSidebar && this.filterableFields.length > 0
+		},
+
+		/**
+		 * Whether the funnel menu sits in the table header: `filterMenu` with
+		 * values to offer, unless the toolbar's Filter button is that menu.
+		 *
+		 * @return {boolean}
+		 */
+		showHeaderFilterMenu() {
+			return this.filterMenu && this.filterableFields.length > 0 && !this.boardFilterMenu
+		},
+
 		/** Search props forwarded to the embedded CnIndexSidebar (defaults applied per CnIndexSidebar). */
 		sidebarSearchProps() {
 			return (this.sidebar && this.sidebar.search) || {}
@@ -4618,6 +4801,14 @@ var script = {
 			},
 		},
 
+		// The Active line names a referenced value, not its id.
+		activeFilterRefIds: {
+			deep: true,
+			handler() {
+				this.loadRefLabels();
+			},
+		},
+
 		countRequestKey: {
 			immediate: true,
 			/** @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views */
@@ -4886,7 +5077,7 @@ var script = {
 		 * @spec openspec/changes/index-ref-column-labels/tasks.md#task-2
 		 */
 		async loadRefLabels() {
-			const specs = this.refLabelSpecs;
+			const specs = [...this.refLabelSpecs, ...this.activeFilterRefSpecs];
 			if (specs.length === 0) {
 				return
 			}
@@ -4901,7 +5092,8 @@ var script = {
 			}
 			await Promise.all(specs.map(async (spec) => {
 				const known = this.refLabels[spec.key] || {};
-				const ids = (this.refLabelIds[spec.key] || []).filter((id) => !Object.hasOwn(known, id));
+				const wanted = new Set([...(this.refLabelIds[spec.key] || []), ...(this.activeFilterRefIds[spec.key] || [])]);
+				const ids = [...wanted].filter((id) => !Object.hasOwn(known, id));
 				if (ids.length === 0) {
 					return
 				}
@@ -5585,6 +5777,11 @@ var script = {
 		 * @return {void}
 		 */
 		onClearFilters() {
+			// "Clear all" on the Active line also undoes the quick filters it
+			// listed (a tab without an `activeLabel` is not a filter there).
+			for (const chip of this.quickFilterActiveChips) {
+				this.deselectQuickFilterChip(chip.quickFilterIndex);
+			}
 			// Clearing the view brings the person's own columns back.
 			this.appliedViewColumns = null;
 			this.appliedSavedViewId = '';
@@ -5675,11 +5872,74 @@ var script = {
 		 * @spec openspec/changes/screens-index-list-parity/specs/index-list-board-look/spec.md#requirement-the-toolbar-sits-on-the-ground-in-two-rows
 		 */
 		onRemoveActiveFilter(chip) {
+			if (chip && typeof chip.quickFilterIndex === 'number') {
+				this.deselectQuickFilterChip(chip.quickFilterIndex);
+				return
+			}
 			if (chip && typeof chip.key === 'string') {
 				this.onFilterEvent({ key: chip.key, values: [] });
 			}
 		},
 
+		/**
+		 * Undo a quick filter from the Active line. With several tabs selectable
+		 * the tab leaves the selection; with one, the page goes back to its
+		 * default tab when that tab names no active filter itself, and else to no
+		 * tab at all, so the chip does not come straight back.
+		 *
+		 * @param {number} index The tab index the chip stands for.
+		 * @return {void}
+		 * @spec openspec/changes/screens-active-filter-line-parity/specs/active-filter-line-board-look/spec.md#requirement-a-quick-filter-with-an-active-label-joins-the-active-line
+		 */
+		deselectQuickFilterChip(index) {
+			if (this.quickFilterMultiple) {
+				this.onQuickFilterMultiChange((this.selectedQuickFilterIndices || []).filter((i) => i !== index));
+				return
+			}
+			if (this.activeQuickFilterIndex !== index) {
+				return
+			}
+			const tabs = this.tabStripEntries || [];
+			let fallback = tabs.findIndex((tab) => tab && tab.default === true);
+			if (fallback < 0 && tabs.length > 0) {
+				fallback = 0;
+			}
+			const fallbackNamed = fallback >= 0 && typeof tabs[fallback].activeLabel === 'string' && tabs[fallback].activeLabel !== '';
+			this.onQuickFilterChange(fallback >= 0 && fallback !== index && !fallbackNamed ? fallback : null);
+		},
+
+		/**
+		 * The text an Active chip shows for one filter value: the referenced
+		 * object's label, the facet bucket's label, the schema's `oneOf` title,
+		 * else the value itself.
+		 *
+		 * @param {string} key The filter key.
+		 * @param {unknown} value One value of that filter.
+		 * @return {string} The label.
+		 * @spec openspec/changes/screens-active-filter-line-parity/specs/active-filter-line-board-look/spec.md#requirement-an-active-chip-names-the-value-not-its-id
+		 */
+		activeFilterValueLabel(key, value) {
+			const id = String(value);
+			const refs = this.refLabels[key];
+			if (refs && typeof refs[id] === 'string' && refs[id] !== '') {
+				return refs[id]
+			}
+			const facet = this.effectiveFacetData && this.effectiveFacetData[key];
+			const bucket = facet && Array.isArray(facet.values)
+				? facet.values.find((fv) => fv && typeof fv === 'object' && String(fv.value) === id)
+				: null;
+			if (bucket && typeof bucket.label === 'string' && bucket.label !== '') {
+				return this.cnTranslate(bucket.label)
+			}
+			const prop = this.effectiveSchema?.properties?.[key];
+			const options = prop && Array.isArray(prop.oneOf) ? prop.oneOf : [];
+			const option = options.find((o) => o && String(o.const) === id && typeof o.title === 'string');
+			if (option) {
+				return this.cnTranslate(option.title)
+			}
+			return id
+		},
+
 		/**
 		 * A header filter was applied or cleared. One column can own several
 		 * query parameters (a range is `key[gte]` and `key[lte]`), so they are
@@ -6374,7 +6634,7 @@ var script = {
 			this.cnIndexSidebarConfig.value = {
 				// markRaw: the holder is CnAppRoot `data()`, so it is deeply
 				// reactive and would proxy the component definition itself.
-				component: markRaw(__sfc_main$q),
+				component: markRaw(__sfc_main$r),
 				props: this.hoistedSidebarProps,
 				listeners: {
 					'update:open': (val) => {