@salesforce/templates 66.17.4 → 66.18.0

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/_f_/search/components/SourceSection.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+/**
+ * Renders one source's slice of a search result: optional filter panel, sort
+ * dropdown, active-filter chips, the result list (delegated to the caller via
+ * `renderResult`), and pagination controls.
+ *
+ * The component is "smart" only about orchestration. The actual list-item UI is
+ * owned by the application via the `renderResult(node)` render function — search
+ * never decides how an Account or Contact card looks.
+ */
+import { computed, type VNodeChild } from "vue";
+import { AlertCircle, Search, SearchX } from "@lucide/vue";
+import { Alert, AlertDescription, AlertTitle } from "../../../components/ui/alert";
+import { Skeleton } from "../../../components/ui/skeleton";
+import ActiveFilters from "./filters/ActiveFilters.vue";
+import FilterProvider from "./filters/FilterProvider.vue";
+import FilterResetButton from "./filters/FilterResetButton.vue";
+import PaginationControls from "./controls/PaginationControls.vue";
+import SortControl from "./controls/SortControl.vue";
+import { RenderVNode } from "./results/RenderVNode";
+import { MIN_QUERY_LENGTH } from "../constants";
+import type { SourceController } from "../types";
+
+function getNodeKey(node: unknown, idField: string | undefined, fallback: number): string | number {
+	if (node && typeof node === "object") {
+		const id = (node as Record<string, unknown>)[idField ?? "Id"];
+		if (typeof id === "string" || typeof id === "number") return id;
+	}
+	return fallback;
+}
+
+const props = withDefaults(
+	defineProps<{
+		controller: SourceController;
+		renderResult: (node: unknown) => VNodeChild;
+		/** Optional filter UI (TextFilter, SelectFilter, ...) rendered above the results. */
+		renderFilters?: () => VNodeChild;
+		/**
+		 * Suppress the filter panel, the active-filter chips, and the sort dropdown.
+		 * Pre-existing filter / sort selections stay in state (and apply to the
+		 * GraphQL query) so the caller can restore the chrome without losing them.
+		 * Set by `<SearchResults>` when the current scope is "all".
+		 */
+		hideFilterChrome?: boolean;
+		emptyMessage?: string;
+		/**
+		 * The current search query. Used to distinguish a not-yet-started search
+		 * (query below MIN_QUERY_LENGTH, so no fetch was issued) from a genuine
+		 * zero-match result, so the empty state can prompt instead of claiming
+		 * "No … found."
+		 */
+		q?: string;
+		/** Message shown when the query is below MIN_QUERY_LENGTH. Defaults to "Start your search…" */
+		shortQueryMessage?: string;
+		class?: string;
+	}>(),
+	{ q: "", shortQueryMessage: "Start your search…" },
+);
+
+const config = computed(() => props.controller.config);
+const nodes = computed(() => props.controller.result?.nodes ?? []);
+const totalCount = computed(() => props.controller.result?.totalCount);
+const loading = computed(() => props.controller.loading);
+const error = computed(() => props.controller.error);
+const showResults = computed(() => !loading.value && !error.value && nodes.value.length > 0);
+const showEmpty = computed(() => !loading.value && !error.value && nodes.value.length === 0);
+// A query below MIN_QUERY_LENGTH never triggers a fetch, so an empty result
+// means "not searched yet" — prompt rather than report zero matches.
+const isShortQuery = computed(() => props.q.trim().length < MIN_QUERY_LENGTH);
+
+const pageSizeOptions = computed(
+	() => props.controller.pagination.pageSizeOptions ?? [props.controller.pagination.pageSize],
+);
+
+// `sortBy` / `idField` are SObject-only — narrow on `kind` so the union
+// widening of `config` doesn't regress SObject behavior (CMS has neither).
+const sortBy = computed(() => (config.value.kind === "sobject" ? config.value.sortBy : undefined));
+const idField = computed(() =>
+	config.value.kind === "sobject" ? config.value.idField : undefined,
+);
+
+const showFilterPanel = computed(() => !!props.renderFilters && !props.hideFilterChrome);
+const showActiveChips = computed(
+	() => !props.hideFilterChrome && props.controller.filters.active.length > 0,
+);
+const showSortControl = computed(() => !props.hideFilterChrome && (sortBy.value?.length ?? 0) > 0);
+
+const emptyText = computed(() =>
+	isShortQuery.value
+		? props.shortQueryMessage
+		: (props.emptyMessage ?? `No ${config.value.label.toLowerCase()} found.`),
+);
+
+// Persistent, always-mounted live region: screen readers announce result
+// updates (searching → count → empty → error) without an Enter keypress.
+const liveMessage = computed(() => {
+	if (loading.value) return "Searching…";
+	if (error.value) return `Failed to load ${config.value.label}.`;
+	if (showEmpty.value) return emptyText.value;
+	if (totalCount.value != null) {
+		return `${config.value.label}: ${totalCount.value} ${totalCount.value === 1 ? "result" : "results"}`;
+	}
+	return "";
+});
+
+const resetFilters = () =>
+	props.controller.filters.active.forEach((f) => props.controller.filters.remove(f.field));
+</script>
+
+<template>
+	<section :class="['flex flex-col gap-6', $props.class]">
+		<p class="sr-only" role="status" aria-live="polite">{{ liveMessage }}</p>
+
+		<FilterProvider
+			v-if="showFilterPanel"
+			:filters="controller.filters.active"
+			@filter-change="controller.filters.set"
+			@filter-remove="controller.filters.remove"
+			@reset="resetFilters"
+		>
+			<div class="rounded-md border p-3 space-y-3">
+				<div class="flex items-center justify-between">
+					<h2 class="text-sm font-semibold">Filters</h2>
+					<FilterResetButton size="sm" />
+				</div>
+				<div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+					<RenderVNode :render="renderFilters!" />
+				</div>
+			</div>
+		</FilterProvider>
+
+		<div class="min-w-0">
+			<header class="flex flex-wrap items-baseline gap-3 mb-3">
+				<h2 class="text-lg font-semibold">{{ config.label }}</h2>
+			</header>
+
+			<div v-if="showSortControl || showActiveChips" class="flex flex-wrap items-center gap-2 mb-3">
+				<SortControl
+					v-if="showSortControl && sortBy"
+					:configs="sortBy"
+					:sort="controller.sort.current"
+					@sort-change="controller.sort.set"
+				/>
+				<ActiveFilters
+					v-if="showActiveChips"
+					:filters="controller.filters.active"
+					@remove="controller.filters.remove"
+				/>
+			</div>
+
+			<!-- Result count, shown just above the results in every scope —
+           including a locked / single-source (restrictTo) view. -->
+			<p v-if="!loading && !error && totalCount != null" class="text-sm text-muted-foreground mb-3">
+				{{ totalCount }} {{ totalCount === 1 ? "result" : "results" }}
+			</p>
+
+			<div class="min-h-32">
+				<div v-if="loading" class="space-y-2">
+					<Skeleton
+						v-for="i in Math.min(controller.pagination.pageSize, 5)"
+						:key="i"
+						class="h-12 w-full"
+					/>
+				</div>
+
+				<Alert v-if="error" variant="destructive" role="alert">
+					<AlertCircle aria-hidden="true" />
+					<AlertTitle>Failed to load {{ config.label }}</AlertTitle>
+					<AlertDescription>{{ error }}</AlertDescription>
+				</Alert>
+
+				<ul v-if="showResults" role="list" class="divide-y">
+					<li v-for="(node, i) in nodes" :key="getNodeKey(node, idField, i)" class="py-3">
+						<RenderVNode :render="() => renderResult(node)" />
+					</li>
+				</ul>
+
+				<div v-if="showEmpty" class="flex flex-col items-center justify-center py-10 text-center">
+					<Search
+						v-if="isShortQuery"
+						aria-hidden="true"
+						class="size-10 text-muted-foreground mb-3"
+					/>
+					<SearchX v-else aria-hidden="true" class="size-10 text-muted-foreground mb-3" />
+					<p class="text-sm text-muted-foreground">{{ emptyText }}</p>
+				</div>
+			</div>
+
+			<PaginationControls
+				:page-index="controller.pagination.pageIndex"
+				:has-next-page="controller.pagination.hasNextPage"
+				:has-previous-page="controller.pagination.hasPreviousPage"
+				:page-size="controller.pagination.pageSize"
+				:page-size-options="pageSizeOptions"
+				:on-next-page="controller.pagination.goToNextPage"
+				:on-previous-page="controller.pagination.goToPreviousPage"
+				:on-page-size-change="controller.pagination.setPageSize"
+				:disabled="loading || !!error"
+				:id-prefix="`page-size-${config.key}`"
+				:nav-label="`${config.label} pagination`"
+			/>
+		</div>
+	</section>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/_f_/search/components/controls/PaginationControls.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import {
+	Pagination,
+	PaginationContent,
+	PaginationEllipsis,
+	PaginationItem,
+	PaginationLink,
+	PaginationNext,
+	PaginationPrevious,
+} from "../../../../components/ui/pagination";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../../components/ui/select";
+import { Label } from "../../../../components/ui/label";
+
+/**
+ * Callbacks are declared as props (`onNextPage`, ...) rather than emits so that
+ * presence of `onGoToPage` can gate the numbered page buttons. `@next-page="fn"`
+ * and `:on-next-page="fn"` are equivalent.
+ */
+const props = withDefaults(
+	defineProps<{
+		pageIndex: number;
+		hasNextPage: boolean;
+		hasPreviousPage: boolean;
+		pageSize: number;
+		pageSizeOptions: readonly number[];
+		onNextPage: () => void;
+		onPreviousPage: () => void;
+		onPageSizeChange: (size: number) => void;
+		/**
+		 * Total number of pages. When provided (with `onGoToPage`) and `> 1`, the
+		 * control renders numbered page buttons with ellipsis truncation instead of
+		 * a plain "Page N" label. Omit for cursor-style sources where the total page
+		 * count is unknown.
+		 */
+		pageCount?: number;
+		/** Jump to a 0-based page. Required to render numbered page buttons. */
+		onGoToPage?: (pageIndex: number) => void;
+		disabled?: boolean;
+		idPrefix?: string;
+		/** Accessible name for the pagination `<nav>` landmark; keep it unique per instance (WCAG 1.3.1, landmark-unique). */
+		navLabel?: string;
+	}>(),
+	{ disabled: false, idPrefix: "page-size", navLabel: "Pagination" },
+);
+
+/**
+ * Builds the list of page tokens to render: 0-based page numbers plus
+ * "ellipsis" gap markers. Always shows the first and last page, a window
+ * around the current page, and collapses the rest. e.g. for current=5,
+ * total=12 -> [0, ellipsis, 4, 5, 6, ellipsis, 11].
+ */
+function getPageTokens(currentIndex: number, pageCount: number): Array<number | "ellipsis"> {
+	const SIBLINGS = 1; // pages shown on each side of the current page
+	const last = pageCount - 1;
+	const pages = new Set<number>([0, last]);
+	for (let p = currentIndex - SIBLINGS; p <= currentIndex + SIBLINGS; p++) {
+		if (p >= 0 && p <= last) pages.add(p);
+	}
+	const sorted = [...pages].sort((a, b) => a - b);
+	const tokens: Array<number | "ellipsis"> = [];
+	let prev = -1;
+	for (const p of sorted) {
+		if (prev !== -1 && p - prev > 1) tokens.push("ellipsis");
+		tokens.push(p);
+		prev = p;
+	}
+	return tokens;
+}
+
+const handlePageSizeChange = (next: unknown) => {
+	const size = parseInt(String(next), 10);
+	if (!isNaN(size) && size !== props.pageSize) props.onPageSizeChange(size);
+};
+const prevDisabled = computed(() => props.disabled || !props.hasPreviousPage);
+const nextDisabled = computed(() => props.disabled || !props.hasNextPage);
+const selectId = computed(() => `${props.idPrefix}-select`);
+
+// Numbered page buttons require both a known page count and a seek callback.
+const showNumberedPages = computed(
+	() => props.pageCount != null && props.pageCount > 1 && props.onGoToPage != null,
+);
+const tokens = computed(() =>
+	showNumberedPages.value ? getPageTokens(props.pageIndex, props.pageCount as number) : [],
+);
+
+// The underlying pagination control renders an <a> without an href, so it is
+// not keyboard-operable on its own. Activate it on Enter/Space to match the
+// behaviour of a native button (WCAG 2.2 SC 2.1.1 Keyboard).
+const activationKey = (action: () => void) => (event: KeyboardEvent) => {
+	if (event.key === "Enter" || event.key === " ") {
+		event.preventDefault();
+		action();
+	}
+};
+</script>
+
+<template>
+	<div class="w-full grid grid-cols-1 sm:grid-cols-2 items-center gap-4 py-2">
+		<div class="flex justify-center sm:justify-start items-center gap-2">
+			<Label :for="selectId" class="text-sm font-normal whitespace-nowrap">Results per page:</Label>
+			<Select :model-value="pageSize.toString()" @update:model-value="handlePageSizeChange">
+				<SelectTrigger :id="selectId" class="w-16">
+					<SelectValue />
+				</SelectTrigger>
+				<SelectContent>
+					<SelectItem v-for="size in pageSizeOptions" :key="size" :value="size.toString()">
+						{{ size }}
+					</SelectItem>
+				</SelectContent>
+			</Select>
+		</div>
+		<Pagination :aria-label="navLabel" class="w-full mx-0 sm:justify-end">
+			<PaginationContent>
+				<PaginationItem>
+					<PaginationPrevious
+						role="button"
+						:tabindex="prevDisabled ? -1 : 0"
+						:aria-disabled="prevDisabled"
+						:class="prevDisabled ? 'pointer-events-none opacity-50' : 'cursor-pointer'"
+						@click="prevDisabled ? undefined : onPreviousPage()"
+						@keydown="prevDisabled ? undefined : activationKey(onPreviousPage)($event)"
+					/>
+				</PaginationItem>
+
+				<template v-if="showNumberedPages">
+					<template
+						v-for="(token, i) in tokens"
+						:key="token === 'ellipsis' ? `ellipsis-${i}` : token"
+					>
+						<PaginationItem v-if="token === 'ellipsis'">
+							<PaginationEllipsis />
+						</PaginationItem>
+						<PaginationItem v-else>
+							<PaginationLink
+								role="button"
+								:tabindex="disabled ? -1 : 0"
+								:is-active="token === pageIndex"
+								:aria-label="`Go to page ${token + 1}`"
+								:aria-current="token === pageIndex ? 'page' : undefined"
+								:aria-disabled="disabled"
+								:class="disabled ? 'pointer-events-none opacity-50' : 'cursor-pointer'"
+								@click="disabled ? undefined : onGoToPage?.(token)"
+								@keydown="disabled ? undefined : activationKey(() => onGoToPage?.(token))($event)"
+							>
+								{{ token + 1 }}
+							</PaginationLink>
+						</PaginationItem>
+					</template>
+				</template>
+				<PaginationItem v-else>
+					<span class="min-w-16 text-center text-sm text-muted-foreground px-2">
+						{{
+							pageCount != null && pageCount > 0
+								? `Page ${pageIndex + 1} of ${pageCount}`
+								: `Page ${pageIndex + 1}`
+						}}
+					</span>
+				</PaginationItem>
+
+				<PaginationItem>
+					<PaginationNext
+						role="button"
+						:tabindex="nextDisabled ? -1 : 0"
+						:aria-disabled="nextDisabled"
+						:class="nextDisabled ? 'pointer-events-none opacity-50' : 'cursor-pointer'"
+						@click="nextDisabled ? undefined : onNextPage()"
+						@keydown="nextDisabled ? undefined : activationKey(onNextPage)($event)"
+					/>
+				</PaginationItem>
+			</PaginationContent>
+		</Pagination>
+	</div>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/_f_/search/components/controls/ScopeSelector.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+/**
+ * Dropdown that narrows the search to a single source (or "All").
+ *
+ * Sits next to the search bar in the default `<Search>` layout. The options are
+ * derived from the configured sources: an "All" entry plus one entry per source
+ * (using each source's `label`). When CMS content types have been discovered at
+ * runtime, one extra entry per type is appended under its CMS source — value
+ * `"<cmsKey>:<fqn>"`, label the server-provided content-type label — so a user
+ * can narrow a CMS search to a single content type.
+ *
+ * Selecting a non-"All" scope tells `useSearch` to fetch and render only that
+ * source. Switching scope resets per-source pagination cursors.
+ */
+import { computed } from "vue";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../../components/ui/select";
+import { ALL_SCOPE, CMS_SCOPE_SEPARATOR, type SearchConfig, type SearchScope } from "../../types";
+import type { DiscoveredContentType } from "../../adapters/cms/contentTypeUtils";
+import { isCmsSearchSupported } from "../../adapters/cms/api/orgApiVersionService";
+
+const props = withDefaults(
+	defineProps<{
+		config: SearchConfig;
+		scope: SearchScope;
+		allLabel?: string;
+		/**
+		 * CMS content types discovered at runtime (from `SearchHandle.discoveredContentTypes`).
+		 * Appended as per-type entries under the CMS source once discovery completes.
+		 */
+		discoveredContentTypes?: DiscoveredContentType[];
+		class?: string;
+	}>(),
+	{ allLabel: "All", discoveredContentTypes: () => [] },
+);
+const emit = defineEmits<{ scopeChange: [scope: SearchScope] }>();
+
+// Discovered content types attach to the (single) CMS source. Entries are
+// injected only after discovery, so the dropdown starts with just the config
+// sources and grows once the CMS channel's types are known.
+const cmsSource = computed(() => props.config.sources.find((s) => s.kind === "cms"));
+const hasDiscoveredTypes = computed(
+	() => !!cmsSource.value && props.discoveredContentTypes.length > 0,
+);
+const contentTypeEntries = computed(() =>
+	hasDiscoveredTypes.value
+		? props.discoveredContentTypes.map((ct) => ({
+				value: `${cmsSource.value!.key}${CMS_SCOPE_SEPARATOR}${ct.fqn}`,
+				label: ct.label,
+			}))
+		: [],
+);
+
+const visibleSources = computed(() =>
+	props.config.sources.filter((source) => {
+		// CMS search is skipped entirely on builds below the CMS-search API version,
+		// so its scope entry would only ever yield an empty result. Hide it.
+		if (source.kind === "cms" && !isCmsSearchSupported()) return false;
+		// Once the CMS channel's content types are known, the generic CMS source
+		// entry is redundant — drop it, EXCEPT while it is the current scope, so the
+		// controlled select never holds a value no item represents (WCAG 4.1.2).
+		if (source.kind === "cms" && hasDiscoveredTypes.value && props.scope !== source.key)
+			return false;
+		return true;
+	}),
+);
+</script>
+
+<template>
+	<div v-if="config.sources.length > 0" :class="$props.class">
+		<Select :model-value="scope" @update:model-value="(v) => emit('scopeChange', String(v))">
+			<SelectTrigger size="sm" class="min-w-[140px]" aria-label="Search scope">
+				<SelectValue />
+			</SelectTrigger>
+			<SelectContent>
+				<SelectItem :value="ALL_SCOPE">{{ allLabel }}</SelectItem>
+				<SelectItem v-for="source in visibleSources" :key="source.key" :value="source.key">
+					{{ source.label }}
+				</SelectItem>
+				<SelectItem v-for="entry in contentTypeEntries" :key="entry.value" :value="entry.value">
+					{{ entry.label }}
+				</SelectItem>
+			</SelectContent>
+		</Select>
+	</div>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/_f_/search/components/controls/SearchBar.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+/**
+ * Debounced text input for the global `q` term. Keeps a local `draft` so
+ * keystrokes feel responsive while the upstream `change` is rate-limited.
+ */
+import { ref, watch } from "vue";
+import { Search } from "@lucide/vue";
+import { Input } from "../../../../components/ui/input";
+import { debounce } from "../../utils/debounce";
+
+const TYPE_DEBOUNCE_MS = 250;
+
+const props = withDefaults(
+	defineProps<{
+		value: string;
+		placeholder?: string;
+		class?: string;
+	}>(),
+	{ placeholder: "Search…" },
+);
+const emit = defineEmits<{ change: [next: string] }>();
+
+const draft = ref(props.value);
+const emitDebounced = debounce((next: string) => emit("change", next), TYPE_DEBOUNCE_MS);
+
+// External value can change (URL restore, reset). Keep draft in sync.
+watch(
+	() => props.value,
+	(v) => {
+		draft.value = v;
+	},
+);
+
+const onInput = (v: string | number | undefined) => {
+	const text = String(v ?? "");
+	draft.value = text;
+	emitDebounced(text);
+};
+</script>
+
+<template>
+	<div :class="['relative flex-1', $props.class]">
+		<Search
+			aria-hidden="true"
+			class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"
+		/>
+		<Input
+			type="text"
+			:model-value="draft"
+			:placeholder="placeholder"
+			class="pl-9"
+			aria-label="Unified search"
+			@update:model-value="onInput"
+		/>
+	</div>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/_f_/search/components/controls/SortControl.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ArrowDown, ArrowUp } from "@lucide/vue";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../../components/ui/select";
+import { Button } from "../../../../components/ui/button";
+import type { SortFieldConfig, SortState } from "../../utils/sortUtils";
+
+const NONE_VALUE = "__none__";
+
+const props = defineProps<{
+	configs: SortFieldConfig[];
+	sort: SortState | null;
+	class?: string;
+}>();
+const emit = defineEmits<{ sortChange: [sort: SortState | null] }>();
+
+const onFieldChange = (v: unknown) => {
+	if (v === NONE_VALUE) emit("sortChange", null);
+	else emit("sortChange", { field: String(v), direction: props.sort?.direction ?? "ASC" });
+};
+const toggleDirection = () => {
+	if (!props.sort) return;
+	emit("sortChange", { ...props.sort, direction: props.sort.direction === "ASC" ? "DESC" : "ASC" });
+};
+</script>
+
+<template>
+	<div v-if="configs.length > 0" :class="['flex items-center gap-2', $props.class]">
+		<span class="text-sm text-muted-foreground whitespace-nowrap">Sort by</span>
+		<Select :model-value="sort?.field ?? NONE_VALUE" @update:model-value="onFieldChange">
+			<SelectTrigger size="sm" class="w-[160px]" aria-label="Sort by">
+				<SelectValue placeholder="Default" />
+			</SelectTrigger>
+			<SelectContent>
+				<SelectItem :value="NONE_VALUE">Default</SelectItem>
+				<SelectItem v-for="c in configs" :key="c.field" :value="c.field">{{ c.label }}</SelectItem>
+			</SelectContent>
+		</Select>
+		<Button
+			v-if="sort"
+			variant="ghost"
+			size="icon-sm"
+			:aria-label="`Sort ${sort.direction === 'ASC' ? 'descending' : 'ascending'}`"
+			@click="toggleDirection"
+		>
+			<ArrowUp v-if="sort.direction === 'ASC'" />
+			<ArrowDown v-else />
+		</Button>
+	</div>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/_f_/search/components/filters/ActiveFilters.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { X } from "@lucide/vue";
+import { Button } from "../../../../components/ui/button";
+import type { ActiveFilterValue } from "../../utils/filterUtils";
+
+defineProps<{
+	filters: ActiveFilterValue[];
+	class?: string;
+}>();
+const emit = defineEmits<{ remove: [field: string] }>();
+
+function formatLabel(filter: ActiveFilterValue): string {
+	const { label, type, value, min, max } = filter;
+	switch (type) {
+		case "text":
+		case "picklist":
+			return `${label}: ${value ?? ""}`;
+		case "multipicklist": {
+			const values = value ? value.split(",") : [];
+			if (values.length <= 2) return `${label}: ${values.join(", ")}`;
+			return `${label}: ${values.length} selected`;
+		}
+		case "boolean":
+			return `${label}: ${value === "true" ? "Yes" : "No"}`;
+		case "numeric": {
+			if (min && max) return `${label}: ${min} – ${max}`;
+			if (min) return `${label}: ≥ ${min}`;
+			return `${label}: ≤ ${max ?? ""}`;
+		}
+		case "date":
+		case "daterange":
+		case "datetime":
+		case "datetimerange": {
+			if (min && max) return `${label}: ${min} → ${max}`;
+			if (min) return `${label}: from ${min}`;
+			return `${label}: until ${max ?? ""}`;
+		}
+		default:
+			return label;
+	}
+}
+</script>
+
+<template>
+	<div v-if="filters.length > 0" :class="['flex flex-wrap gap-2', $props.class]">
+		<Button
+			v-for="filter in filters"
+			:key="filter.field"
+			variant="outline"
+			size="sm"
+			class="gap-1 h-7 text-xs"
+			:aria-label="`Remove ${formatLabel(filter)}`"
+			@click="emit('remove', filter.field)"
+		>
+			{{ formatLabel(filter) }}
+			<X class="h-3 w-3" aria-hidden="true" />
+		</Button>
+	</div>
+</template>