@salesforce/templates 66.17.5 → 66.19.0

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

@@ -0,0 +1,263 @@
+<script lang="ts">
+export type { MergedSearchResultsProps } from "./MergedSearchResults.types";
+
+// Module scope (not <script setup>): withDefaults hoists its defaults out of setup().
+const DEFAULT_GRID_CLASS = "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3";
+</script>
+
+<script setup lang="ts">
+/**
+ * Merged results layout — a single combined grid across every in-scope source,
+ * driven by one global pager over the cumulative result set.
+ *
+ * Counterpart to `<SearchResults>` (one stacked section per source). Reads the
+ * aggregate accessors off the `SearchHandle` (`mergedResults`,
+ * `globalPagination`, `inScopeSources`), so it honours the config's
+ * `pagination.mode` / `mergeOrder` automatically.
+ *
+ * Layout, top to bottom:
+ *   - Single-source filter chrome (filters + sort + chips) when the scope is
+ *     narrowed to one source; omitted under "All".
+ *   - Results count on its own row above the grid, hidden when empty.
+ *   - The grid — one card per `mergedResults` item. In a mixed grid each card
+ *     is topped with an auto source badge (`labelSingular`, falling back to
+ *     `label`), colored from a palette by config order. Skeletons while loading.
+ *   - One global pager over the cumulative set.
+ */
+import { computed, useSlots } from "vue";
+import { AlertCircle } from "@lucide/vue";
+import { Alert, AlertDescription, AlertTitle } from "../../../components/ui/alert";
+import { Skeleton } from "../../../components/ui/skeleton";
+import ActiveFilters from "./filters/ActiveFilters.vue";
+import DefaultFilterPanel from "./filters/DefaultFilterPanel.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 type { MergedSearchResultsProps } from "./MergedSearchResults.types";
+import type { ResultRenderer } from "./results/resolveResultRenderer";
+import { RenderVNode } from "./results/RenderVNode";
+import { resolveResultRenderer } from "./results/resolveResultRenderer";
+import { MIN_QUERY_LENGTH } from "../constants";
+import { ALL_SCOPE, type SourceConfig } from "../types";
+
+/**
+ * Palette for the auto source badges in a mixed grid. A source's color is its
+ * index in the config's `sources` array, wrapped around the palette.
+ */
+const BADGE_PALETTE = [
+	"bg-blue-100 text-blue-700",
+	"bg-amber-100 text-amber-700",
+	"bg-purple-100 text-purple-700",
+	"bg-pink-100 text-pink-700",
+	"bg-emerald-100 text-emerald-700",
+	"bg-sky-100 text-sky-700",
+] as const;
+
+const props = withDefaults(defineProps<MergedSearchResultsProps>(), {
+	shortQueryMessage: "Start your search…",
+	gridClassName: DEFAULT_GRID_CLASS,
+});
+
+const slots = useSlots();
+
+const page = computed(() => props.handle.globalPagination);
+// Distinguishes "haven't typed enough yet" (useSearch short-circuits below
+// MIN_QUERY_LENGTH without fetching) from a genuine zero-match search.
+const isShortQuery = computed(() => props.handle.q.trim().length < MIN_QUERY_LENGTH);
+
+// A single source is in scope when the scope is narrowed (selected) or locked.
+// Its filter chrome can render meaningfully; under "All" it can't.
+const singleSourceInScope = computed(() => props.handle.scope !== ALL_SCOPE);
+const soleController = computed(() =>
+	singleSourceInScope.value ? props.handle.inScopeSources[0] : undefined,
+);
+// Per-card source badges only make sense when the grid is genuinely mixed.
+const showSourceBadges = computed(() => !singleSourceInScope.value);
+// Badges only show in "All" scope, where `inScopeSources` is every source in
+// config order, so the index here is the source's config position.
+const badgeColorByKey = computed(() => {
+	const out: Record<string, string> = {};
+	props.handle.inScopeSources.forEach((controller, i) => {
+		out[controller.config.key] = BADGE_PALETTE[i % BADGE_PALETTE.length];
+	});
+	return out;
+});
+
+const skeletons = computed(() => props.skeletonCount ?? page.value.pageSize);
+
+const liveMessage = computed(() => {
+	const { loading, error, mergedResults } = props.handle;
+	if (loading) return "Searching…";
+	if (error) return "Search failed.";
+	if (isShortQuery.value) return props.shortQueryMessage;
+	if (mergedResults.length === 0) return props.emptyMessage ?? "No results found.";
+	return `${page.value.totalCount} result${page.value.totalCount === 1 ? "" : "s"}`;
+});
+
+function getItemKey(sourceKey: string, node: unknown, fallback: number): string {
+	const id = node && typeof node === "object" ? (node as { Id?: unknown }).Id : undefined;
+	return typeof id === "string" ? `${sourceKey}:${id}` : `${sourceKey}:${fallback}`;
+}
+
+/** Cards to render: resolves each node's renderer via the shared helper. */
+const cards = computed(() => {
+	const out = [];
+	for (const [i, { sourceKey, node }] of props.handle.mergedResults.entries()) {
+		const source: SourceConfig | undefined = props.handle.sources[sourceKey]?.config;
+		if (!source) continue;
+		// Resolve via the shared helper so CMS nodes render through CmsResultRow in
+		// the merged grid too; a `renderResult[key]` override (incl. `false`) wins.
+		const override = props.renderResult?.[source.key];
+		const renderer =
+			override === undefined && slots.result
+				? (n: unknown) => slots.result!({ sourceKey, node: n, source })
+				: resolveResultResolved(source);
+		if (renderer === false) continue;
+		out.push({
+			key: getItemKey(sourceKey, node, i),
+			sourceKey,
+			badgeLabel: source.labelSingular ?? source.label,
+			render: () => renderer(node),
+		});
+	}
+	return out;
+});
+
+function resolveResultResolved(source: SourceConfig): ResultRenderer {
+	return resolveResultRenderer(source, props.renderResult);
+}
+
+// Single-source chrome ---------------------------------------------------------
+const sObjectSource = computed(() => {
+	const s = soleController.value?.config;
+	return s && s.kind === "sobject" ? s : null;
+});
+const sortBy = computed(() => sObjectSource.value?.sortBy);
+const showFilterPanel = computed(() => (sObjectSource.value?.filterBy?.length ?? 0) > 0);
+const showSortControl = computed(() => (sortBy.value?.length ?? 0) > 0);
+const showActiveChips = computed(() => (soleController.value?.filters.active.length ?? 0) > 0);
+const showChrome = computed(
+	() =>
+		!!soleController.value &&
+		(showFilterPanel.value || showSortControl.value || showActiveChips.value),
+);
+const resetSoleFilters = () => {
+	const c = soleController.value;
+	c?.filters.active.forEach((f) => c.filters.remove(f.field));
+};
+</script>
+
+<template>
+	<div :class="['space-y-6', $props.class]">
+		<p class="sr-only" role="status" aria-live="polite">{{ liveMessage }}</p>
+
+		<div v-if="showChrome && soleController" class="flex flex-col gap-4">
+			<FilterProvider
+				v-if="showFilterPanel && sObjectSource"
+				:filters="soleController.filters.active"
+				@filter-change="soleController.filters.set"
+				@filter-remove="soleController.filters.remove"
+				@reset="resetSoleFilters"
+			>
+				<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">
+						<DefaultFilterPanel :source="sObjectSource" />
+					</div>
+				</div>
+			</FilterProvider>
+
+			<div v-if="showSortControl || showActiveChips" class="flex flex-wrap items-center gap-2">
+				<SortControl
+					v-if="showSortControl && sortBy"
+					:configs="sortBy"
+					:sort="soleController.sort.current"
+					@sort-change="soleController.sort.set"
+				/>
+				<ActiveFilters
+					v-if="showActiveChips"
+					:filters="soleController.filters.active"
+					@remove="soleController.filters.remove"
+				/>
+			</div>
+		</div>
+
+		<!-- Page-level error — set only when every in-scope source failed (or a
+         whole-request/network failure). Shown once, above the grid. -->
+		<Alert v-if="handle.error" variant="destructive" role="alert">
+			<AlertCircle aria-hidden="true" />
+			<AlertTitle>Search failed</AlertTitle>
+			<AlertDescription>{{ handle.error }}</AlertDescription>
+		</Alert>
+
+		<!-- Per-source errors — a source that failed while a sibling succeeded
+         surfaces its own banner without blanking the shared grid. -->
+		<template v-if="!handle.error">
+			<template v-for="c in handle.inScopeSources" :key="c.config.key">
+				<Alert v-if="c.error" variant="destructive" role="alert">
+					<AlertCircle aria-hidden="true" />
+					<AlertTitle>Failed to load {{ c.config.label }}</AlertTitle>
+					<AlertDescription>{{ c.error }}</AlertDescription>
+				</Alert>
+			</template>
+		</template>
+
+		<p
+			v-if="!handle.loading && !handle.error && page.totalCount > 0"
+			class="text-sm text-muted-foreground"
+		>
+			{{ page.totalCount }} result{{ page.totalCount === 1 ? "" : "s" }}
+		</p>
+
+		<div v-if="handle.loading" :class="gridClassName">
+			<Skeleton v-for="i in Math.min(skeletons, 6)" :key="i" class="h-48 w-full rounded-lg" />
+		</div>
+		<template v-else-if="handle.error" />
+		<p v-else-if="isShortQuery" class="py-12 text-center text-sm text-muted-foreground">
+			{{ shortQueryMessage }}
+		</p>
+		<p
+			v-else-if="handle.mergedResults.length === 0"
+			class="py-12 text-center text-sm text-muted-foreground"
+		>
+			{{ emptyMessage ?? "No results found." }}
+		</p>
+		<ul v-else role="list" :class="gridClassName">
+			<li
+				v-for="card in cards"
+				:key="card.key"
+				class="flex flex-col gap-1.5 [&>:last-child]:min-h-0 [&>:last-child]:flex-1"
+			>
+				<span
+					v-if="showSourceBadges"
+					:class="[
+						'w-fit rounded-full px-2.5 py-0.5 text-xs font-medium',
+						badgeColorByKey[card.sourceKey],
+					]"
+				>
+					{{ card.badgeLabel }}
+				</span>
+				<RenderVNode :render="card.render" />
+			</li>
+		</ul>
+
+		<PaginationControls
+			v-if="page.totalCount > 0"
+			:page-index="page.pageIndex"
+			:page-count="page.pageCount"
+			:has-next-page="page.hasNextPage"
+			:has-previous-page="page.hasPreviousPage"
+			:page-size="page.pageSize"
+			:page-size-options="page.pageSizeOptions"
+			:on-next-page="page.goToNextPage"
+			:on-previous-page="page.goToPreviousPage"
+			:on-go-to-page="page.goToPage"
+			:on-page-size-change="page.setPageSize"
+			:disabled="handle.loading || !!handle.error"
+		/>
+	</div>
+</template>

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

@@ -0,0 +1,200 @@
+<script lang="ts">
+import type { SObjectSourceConfig } from "../types";
+
+/**
+ * Locks the search to a single source. Reuses the same shared `config.json`
+ * but shows only results matching the given (kind, key) tuple.
+ *
+ * When set:
+ *   - The scope dropdown is hidden.
+ *   - URL `?scope=` is not written (the page route already implies the source).
+ *   - Only the matching source is fetched and rendered.
+ */
+export interface RestrictTo {
+	kind: SObjectSourceConfig["kind"];
+	key: string;
+}
+</script>
+
+<script setup lang="ts">
+/**
+ * Drop-in search component. Given a `SearchConfig`, renders a complete search
+ * experience: search bar, an aggregate result count, and results.
+ *
+ * The results layout follows the config's pagination mode — no separate prop:
+ *   - `pagination.mode: "per-source"` (default): one stacked section per
+ *     source, each with its own filters, sort, and pagination.
+ *   - `pagination.mode: "merged"`: a single combined grid across every in-scope
+ *     source, driven by one global pager over the cumulative result set.
+ *
+ * Simplest integration:
+ *   <Search :config="config" />
+ *
+ * Override points:
+ *   - `renderResult[sourceKey]` — replace the default row renderer for one
+ *     source (a Vue render function `(node) => VNodeChild`). `false` hides the
+ *     source. The `#result="{ sourceKey, node, source }"` scoped slot overrides
+ *     rendering for every source without a `renderResult` entry.
+ *   - `renderFilters[sourceKey]` — replace the default filter panel for one
+ *     source. `false` suppresses filters for that source.
+ *   - `renderHeader` prop / `#header="{ handle }"` slot — replace the default
+ *     header (title + subtitle).
+ *   - `searchPlaceholder` — placeholder text for the search input.
+ *   - `title`, `subtitle` — defaults passed to the built-in header.
+ */
+import { computed, useSlots, type VNodeChild } from "vue";
+import { AlertCircle } from "@lucide/vue";
+import { Alert, AlertDescription, AlertTitle } from "../../../components/ui/alert";
+import { useSearch } from "../composables/useSearch";
+import SearchBar from "./controls/SearchBar.vue";
+import ScopeSelector from "./controls/ScopeSelector.vue";
+import SearchResults from "./SearchResults.vue";
+import MergedSearchResults from "./MergedSearchResults.vue";
+import { RenderVNode } from "./results/RenderVNode";
+import type { ResultRenderer } from "./results/resolveResultRenderer";
+import { ALL_SCOPE } from "../types";
+import type { SearchConfig, SearchHandle } from "../types";
+
+type FilterRenderer = (() => VNodeChild) | false;
+
+const props = withDefaults(
+	defineProps<{
+		config: SearchConfig;
+		renderResult?: Record<string, ResultRenderer>;
+		renderFilters?: Record<string, FilterRenderer>;
+		emptyMessages?: Record<string, string>;
+		searchPlaceholder?: string;
+		title?: string;
+		subtitle?: string;
+		/**
+		 * Lock the search to a single source by `(kind, key)`. Hides the scope
+		 * dropdown and forces results to that one source.
+		 */
+		restrictTo?: RestrictTo;
+		/**
+		 * Show the source-scope dropdown next to the search bar. Defaults to `true`
+		 * when the config has 2+ sources, `false` otherwise. Always hidden when
+		 * `restrictTo` is set.
+		 */
+		showScopeSelector?: boolean;
+		/** Label for the "search everything" entry in the scope dropdown. */
+		allScopeLabel?: string;
+		/** Optional override for the entire header region. */
+		renderHeader?: (handle: SearchHandle) => VNodeChild;
+		class?: string;
+		/** Root element tag; use `"main"` when this owns its route's landmark (WCAG 1.3.1). */
+		as?: "div" | "main";
+	}>(),
+	{ searchPlaceholder: "Search…", title: "Search", as: "div", showScopeSelector: undefined },
+);
+
+const slots = useSlots();
+
+// Resolve restrictTo to a lockedScope value, surfacing a clear warning if the
+// (kind, key) pair doesn't match any source.
+const lockedScope = computed<string | undefined>(() => {
+	const restrict = props.restrictTo;
+	if (!restrict) return undefined;
+	const match = props.config.sources.find(
+		(s) => s.kind === restrict.kind && s.key === restrict.key,
+	);
+	if (!match) {
+		console.warn(
+			`<Search restrictTo>: no source with kind="${restrict.kind}" and key="${restrict.key}" in config. Falling back to "all".`,
+		);
+		return undefined;
+	}
+	return match.key;
+});
+
+const handle = useSearch(props.config, { lockedScope: lockedScope.value });
+
+// The results layout follows the pagination mode — a "merged" config means a
+// single combined grid, "per-source" (default) means one section per source.
+const merged = computed(() => props.config.pagination?.mode === "merged");
+const totalResults = computed(() =>
+	Object.values(handle.sources).reduce(
+		(acc, controller) => acc + (controller.result?.totalCount ?? 0),
+		0,
+	),
+);
+const shouldShowScope = computed(
+	() => !handle.scopeLocked && (props.showScopeSelector ?? props.config.sources.length >= 2),
+);
+// The aggregate count is only meaningful when results from more than one source
+// are combined. In merged mode the results grid renders its own count row.
+const sourcesInScope = computed(() =>
+	handle.scope === ALL_SCOPE ? props.config.sources.length : 1,
+);
+const showTotalResults = computed(() => !merged.value && sourcesInScope.value >= 2);
+const emptyMessage = computed(() => props.emptyMessages?.[handle.scope]);
+</script>
+
+<template>
+	<component
+		:is="as"
+		:class="['max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6', $props.class]"
+	>
+		<RenderVNode v-if="renderHeader" :render="() => renderHeader!(handle)" />
+		<slot v-else-if="slots.header" name="header" :handle="handle" />
+		<header v-else class="space-y-2">
+			<h1 class="text-2xl font-bold">{{ title }}</h1>
+			<p v-if="subtitle" class="text-sm text-muted-foreground">{{ subtitle }}</p>
+		</header>
+
+		<div class="flex flex-wrap items-center gap-3">
+			<SearchBar :value="handle.q" :placeholder="searchPlaceholder" @change="handle.setQ" />
+			<ScopeSelector
+				v-if="shouldShowScope"
+				:config="config"
+				:scope="handle.scope"
+				:all-label="allScopeLabel"
+				:discovered-content-types="handle.discoveredContentTypes"
+				@scope-change="handle.setScope"
+			/>
+		</div>
+
+		<MergedSearchResults
+			v-if="merged"
+			:handle="handle"
+			:render-result="renderResult"
+			:empty-message="emptyMessage"
+		>
+			<template v-if="slots.result" #result="slotProps"
+				><slot name="result" v-bind="slotProps"
+			/></template>
+		</MergedSearchResults>
+		<template v-else>
+			<!-- Page-level failure (every queried source failed, or a whole-request/
+           network error). Show the single consolidated banner and nothing else
+           — the per-source sections would each repeat the same error. -->
+			<Alert v-if="handle.error" variant="destructive" role="alert">
+				<AlertCircle aria-hidden="true" />
+				<AlertTitle>Search failed</AlertTitle>
+				<AlertDescription>{{ handle.error }}</AlertDescription>
+			</Alert>
+			<template v-else>
+				<!-- Aggregate count on its own row, directly above the results — only in
+             "All" scope, where the per-source sections don't each carry a single
+             meaningful total. -->
+				<p
+					v-if="showTotalResults && !handle.loading"
+					class="text-sm text-muted-foreground"
+					role="status"
+				>
+					{{ totalResults }} total result{{ totalResults === 1 ? "" : "s" }}
+				</p>
+				<SearchResults
+					:handle="handle"
+					:render-result="renderResult"
+					:render-filters="renderFilters"
+					:empty-messages="emptyMessages"
+				>
+					<template v-if="slots.result" #result="slotProps"
+						><slot name="result" v-bind="slotProps"
+					/></template>
+				</SearchResults>
+			</template>
+		</template>
+	</component>
+</template>

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

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+/**
+ * Renders one SourceSection per configured source, in declaration order.
+ *
+ * Customization is optional — sensible defaults kick in for any source you
+ * don't override:
+ *   - `renderResult[sourceKey]` — per-node render function. Default: title from
+ *     `displayFields[0]`, subtitle from the rest, optional `<RouterLink>` driven
+ *     by `routePattern`. Alternatively provide the scoped slot
+ *     `#result="{ sourceKey, node, source }"` for all sources.
+ *   - `renderFilters[sourceKey]` — sidebar filter UI. Default: one input per
+ *     `filterBy` entry, with picklist options resolved from inline config or
+ *     auto-fetched from the GraphQL aggregate API.
+ *
+ * Pass `false` for either entry to suppress the default for that source.
+ *
+ * Filter chrome (sidebar + active-filter chips + sort dropdown) is
+ * automatically hidden when `handle.scope === "all"`. Pre-existing filter /
+ * sort selections stay in state, so narrowing the scope brings them back.
+ */
+import { h, useSlots, type VNodeChild } from "vue";
+import SourceSection from "./SourceSection.vue";
+import DefaultFilterPanel from "./filters/DefaultFilterPanel.vue";
+import { resolveResultRenderer, type ResultRenderer } from "./results/resolveResultRenderer";
+import { ALL_SCOPE, parseScope, type SearchHandle, type SourceConfig } from "../types";
+import { isCmsSearchSupported } from "../adapters/cms/api/orgApiVersionService";
+
+type FilterRenderer = (() => VNodeChild) | false;
+
+const props = defineProps<{
+	handle: SearchHandle;
+	renderResult?: Record<string, ResultRenderer>;
+	renderFilters?: Record<string, FilterRenderer>;
+	emptyMessages?: Record<string, string>;
+}>();
+
+const slots = useSlots();
+
+/** Resolves the per-node renderer: map override > `#result` slot > kind default. */
+function resolveRenderer(source: SourceConfig): ResultRenderer {
+	const override = props.renderResult?.[source.key];
+	if (override === undefined && slots.result) {
+		return (node: unknown) => slots.result!({ sourceKey: source.key, node, source });
+	}
+	return resolveResultRenderer(source, props.renderResult);
+}
+
+function resolveFilters(source: SourceConfig): (() => VNodeChild) | undefined {
+	const override = props.renderFilters?.[source.key];
+	if (override === false) return undefined;
+	if (override) return override;
+	// CMS sources have no `filterBy`; the guard keeps their chrome off.
+	if (source.kind === "sobject" && (source.filterBy?.length ?? 0) > 0) {
+		return () => h(DefaultFilterPanel, { source });
+	}
+	return undefined;
+}
+
+/** Sections to render for the current scope (hidden sources are omitted). */
+function visibleSections() {
+	const filtersHidden = props.handle.scope === ALL_SCOPE;
+	// Match sections against the base scope so a "<cmsKey>:<fqn>" scope still
+	// renders the CMS source's section (the fqn only narrows the query).
+	const { base: scopeBase } = parseScope(props.handle.scope);
+	const out = [];
+	for (const [key, controller] of Object.entries(props.handle.sources)) {
+		if (scopeBase !== ALL_SCOPE && scopeBase !== key) continue;
+		// CMS search is skipped on builds below the CMS-search API version, so a CMS
+		// source never returns rows — hide its section (same gate as the fetch skip).
+		if (controller.config.kind === "cms" && !isCmsSearchSupported()) continue;
+		// A `renderResult[key]` override of `false` hides the source.
+		const renderResult = resolveRenderer(controller.config);
+		if (renderResult === false) continue;
+		out.push({
+			key,
+			controller,
+			renderResult,
+			renderFilters: resolveFilters(controller.config),
+			filtersHidden,
+		});
+	}
+	return out;
+}
+</script>
+
+<template>
+	<div class="space-y-10">
+		<SourceSection
+			v-for="section in visibleSections()"
+			:key="section.key"
+			:controller="section.controller"
+			:render-result="section.renderResult"
+			:render-filters="section.renderFilters"
+			:hide-filter-chrome="section.filtersHidden"
+			:empty-message="emptyMessages?.[section.key]"
+			:q="handle.q"
+		/>
+	</div>
+</template>