@salesforce/templates 66.17.4 → 66.18.0

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../../../components/ui/select";
+import { useFilterField } from "../FilterContext";
+import FilterFieldWrapper from "./FilterFieldWrapper.vue";
+
+const ALL_VALUE = "__all__";
+
+const props = defineProps<{
+	field: string;
+	label: string;
+	options: Array<{ value: string; label: string }>;
+	helpText?: string;
+}>();
+
+const { value, onChange } = useFilterField(() => props.field);
+const id = `filter-${props.field}`;
+
+const onValueChange = (v: unknown) => {
+	if (v === ALL_VALUE) onChange(undefined);
+	else onChange({ field: props.field, label: props.label, type: "picklist", value: String(v) });
+};
+</script>
+
+<template>
+	<FilterFieldWrapper :label="label" :html-for="id" :help-text="helpText">
+		<Select :model-value="value?.value ?? ALL_VALUE" @update:model-value="onValueChange">
+			<SelectTrigger :id="id" class="w-full">
+				<SelectValue :placeholder="`Select ${label.toLowerCase()}`" />
+			</SelectTrigger>
+			<SelectContent>
+				<SelectItem :value="ALL_VALUE">All</SelectItem>
+				<SelectItem v-for="opt in options" :key="opt.value" :value="opt.value">
+					{{ opt.label }}
+				</SelectItem>
+			</SelectContent>
+		</Select>
+	</FilterFieldWrapper>
+</template>

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { Input } from "../../../../../components/ui/input";
+import { useFilterField } from "../FilterContext";
+import FilterFieldWrapper from "./FilterFieldWrapper.vue";
+import { debounce, FILTER_DEBOUNCE_MS } from "../../../utils/debounce";
+
+const props = defineProps<{
+	field: string;
+	label: string;
+	placeholder?: string;
+	helpText?: string;
+}>();
+
+const { value, onChange } = useFilterField(() => props.field);
+const draft = ref<string>(value.value?.value ?? "");
+
+// One stable debounced caller; it always reads the latest props/onChange.
+const emitDebounced = debounce((next: string) => {
+	if (next === "") onChange(undefined);
+	else onChange({ field: props.field, label: props.label, type: "text", value: next });
+}, FILTER_DEBOUNCE_MS);
+
+watch(
+	() => value.value?.value,
+	(v) => {
+		draft.value = v ?? "";
+	},
+);
+
+const onInput = (next: string | number | undefined) => {
+	const text = String(next ?? "");
+	draft.value = text;
+	emitDebounced(text);
+};
+const id = `filter-${props.field}`;
+</script>
+
+<template>
+	<FilterFieldWrapper :label="label" :html-for="id" :help-text="helpText">
+		<Input
+			:id="id"
+			type="text"
+			:model-value="draft"
+			:placeholder="placeholder"
+			@update:model-value="onInput"
+		/>
+	</FilterFieldWrapper>
+</template>

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

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+/**
+ * Per-node row for a CMS source. Used by both the per-source section
+ * (`SearchResults`) and the merged grid (`MergedSearchResults`) via the shared
+ * `resolveResultRenderer` whenever `source.kind === "cms"`.
+ *
+ * Renders a title, a published-date subtitle, an optional content-type badge,
+ * and a vue-router `<RouterLink>` when a route can be built.
+ *
+ * Link target: `source.routePattern` tokens `:id` (managedContentId), `:key`
+ * (managedContentKey), `:contentType` (contentType). No routePattern -> a plain
+ * (non-linked) row.
+ *
+ * The content-type label is rendered only when its FQN passes `isValidCmsFqn`.
+ */
+import { computed } from "vue";
+import { RouterLink } from "vue-router";
+import type { CmsSourceConfig, CmsSearchItem } from "../../adapters/cms/types";
+import { formatContentTypeLabel, isValidCmsFqn } from "../../adapters/cms/contentTypeUtils";
+
+const EM_BLOCK_SPLIT = /(<(?:em)>[\s\S]*?<\/(?:em)>)/g;
+const EM_BLOCK_EXEC = /^<(?:em)>([\s\S]*?)<\/(?:em)>$/;
+const STRAY_TAG = /<\/?[a-zA-Z][^>]*>/g;
+const ROUTE_TOKEN = /:([A-Za-z_][A-Za-z0-9_]*)/g;
+
+/** Formats an ISO date string for display; echoes the raw string on failure. */
+function formatPublishedDate(dateStr: string): string {
+	const date = new Date(dateStr);
+	if (isNaN(date.getTime())) return dateStr;
+	return date.toLocaleDateString(undefined, {
+		year: "numeric",
+		month: "short",
+		day: "numeric",
+	});
+}
+
+/**
+ * Substitutes `:id` / `:key` / `:contentType` tokens in a route pattern with
+ * the item's values (URL-encoded). Returns `null` if a required token has no
+ * value.
+ */
+function resolveRoute(pattern: string, item: CmsSearchItem): string | null {
+	const tokens: Record<string, string | undefined> = {
+		id: item.managedContentId,
+		key: item.managedContentKey,
+		contentType: item.contentType,
+	};
+	let failed = false;
+	const out = pattern.replace(ROUTE_TOKEN, (_match, token: string) => {
+		const value = tokens[token];
+		if (value == null || value === "") {
+			failed = true;
+			return "";
+		}
+		return encodeURIComponent(value);
+	});
+	return failed ? null : out;
+}
+
+/**
+ * - Decodes every HTML entity the browser knows (named + numeric).
+ * - Runs twice to unwrap the double-encoding CMS search sometimes returns.
+ */
+function decodeEntities(input: string): string {
+	if (typeof document === "undefined") return input;
+	const el = document.createElement("textarea");
+	const pass = (s: string) => {
+		el.innerHTML = s;
+		return el.value;
+	};
+	return pass(pass(input));
+}
+
+/** A snippet segment: plain text or a highlighted (`<em>`) run. */
+interface Segment {
+	text: string;
+	highlight: boolean;
+}
+
+/**
+ * Parses a snippet that may contain `<em>…</em>` segments into highlighted
+ * segments, and strips any other HTML tags so their content renders as plain
+ * text. Rendered through text interpolation, so no HTML is ever injected.
+ */
+function highlightSegments(snippet: string): Segment[] {
+	const decoded = decodeEntities(snippet);
+	return decoded.split(EM_BLOCK_SPLIT).map((part) => {
+		const emphasisMatch = EM_BLOCK_EXEC.exec(part);
+		if (emphasisMatch) return { text: emphasisMatch[1].replace(STRAY_TAG, ""), highlight: true };
+		return { text: part.replace(STRAY_TAG, ""), highlight: false };
+	});
+}
+
+function toPlainText(raw: string): string {
+	return decodeEntities(raw).replace(STRAY_TAG, "");
+}
+
+const props = defineProps<{ node: unknown; source: CmsSourceConfig }>();
+
+const item = computed(() => props.node as CmsSearchItem);
+const titleSegments = computed(() => (item.value.title ? highlightSegments(item.value.title) : []));
+const snippetSegments = computed(() =>
+	item.value.highlightedSnippet ? highlightSegments(item.value.highlightedSnippet) : [],
+);
+const subtitle = computed(() => {
+	const publishedDate = item.value.managedContentChannelDeliveryDetails?.[0]?.publishedDate;
+	const showType =
+		typeof item.value.contentType === "string" && isValidCmsFqn(item.value.contentType);
+	const parts: string[] = [];
+	if (showType) parts.push(formatContentTypeLabel(item.value.contentType));
+	if (publishedDate) parts.push(`Published: ${formatPublishedDate(publishedDate)}`);
+	return parts.join(" · ");
+});
+// Only render a drill-down link when the source explicitly configures a
+// routePattern. Without one, content rows render as plain (non-linked) rows.
+const href = computed(() =>
+	props.source.routePattern ? resolveRoute(props.source.routePattern, item.value) : null,
+);
+const linkLabel = computed(
+	() => `View content: ${item.value.title ? toPlainText(item.value.title) : "content"}`,
+);
+</script>
+
+<template>
+	<component
+		:is="href ? RouterLink : 'div'"
+		v-bind="
+			href
+				? {
+						to: href,
+						class: 'block hover:bg-accent rounded-md px-3 -mx-3 py-1 transition-colors',
+						'aria-label': linkLabel,
+					}
+				: { class: 'px-3 -mx-3 py-1' }
+		"
+	>
+		<span class="font-medium">
+			<template v-if="titleSegments.length > 0">
+				<template v-for="(seg, i) in titleSegments" :key="i">
+					<mark
+						v-if="seg.highlight"
+						class="bg-yellow-200 dark:bg-yellow-700/60 rounded-sm px-0.5"
+						>{{ seg.text }}</mark
+					>
+					<template v-else>{{ seg.text }}</template>
+				</template>
+			</template>
+			<template v-else>—</template>
+		</span>
+		<p v-if="snippetSegments.length > 0" class="text-sm text-neutral-600 dark:text-neutral-300">
+			<template v-for="(seg, i) in snippetSegments" :key="i">
+				<mark v-if="seg.highlight" class="bg-yellow-200 dark:bg-yellow-700/60 rounded-sm px-0.5">{{
+					seg.text
+				}}</mark>
+				<template v-else>{{ seg.text }}</template>
+			</template>
+		</p>
+		<p v-if="subtitle" class="text-sm text-neutral-600 dark:text-neutral-300">{{ subtitle }}</p>
+	</component>
+</template>

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

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+/**
+ * Default per-node row used when no `renderResult` is supplied for a source.
+ *
+ * Layout:
+ *   - Title: first entry in `displayFields` (preferring displayValue).
+ *   - Subtitle: remaining display fields joined with " · ".
+ *   - When `routePattern` is configured on the source, the row is wrapped in a
+ *     vue-router `<RouterLink>` whose `to` is built by substituting `:fieldName`
+ *     tokens with the corresponding field values (special token `:id` resolves
+ *     to the configured `idField`, default "Id").
+ */
+import { computed } from "vue";
+import { RouterLink } from "vue-router";
+import { fieldValue } from "../../utils/fieldUtils";
+import type { DisplayField, SObjectSourceConfig } from "../../types";
+
+const ROUTE_TOKEN = /:([A-Za-z_][A-Za-z0-9_]*)/g;
+
+function fieldName(f: DisplayField): string {
+	return typeof f === "string" ? f : f.name;
+}
+
+/** Resolves a single dot-path against a node, returning a string or null. */
+function readPath(node: unknown, path: string): string | null {
+	if (!node || typeof node !== "object") return null;
+	const parts = path.split(".");
+	let cursor: unknown = node;
+	for (let i = 0; i < parts.length - 1; i++) {
+		if (!cursor || typeof cursor !== "object") return null;
+		cursor = (cursor as Record<string, unknown>)[parts[i]];
+	}
+	const leaf = (cursor as Record<string, unknown> | null)?.[parts[parts.length - 1]];
+	if (leaf == null) return null;
+	if (typeof leaf === "object") {
+		return fieldValue(leaf as { value?: unknown; displayValue?: string | null });
+	}
+	return String(leaf);
+}
+
+/** Reads the user-facing string for a top-level display field. */
+function readDisplayField(node: unknown, field: DisplayField): string | null {
+	if (typeof field === "string") return readPath(node, field);
+	if ("raw" in field) return readPath(node, field.name);
+	// Relationship: prefer the first scalar subfield's display value.
+	const sub = field.subfields[0];
+	if (!sub) return null;
+	const subName = fieldName(sub);
+	return readPath(node, `${field.name}.${subName}`);
+}
+
+/** Substitutes `:fieldName` tokens in routePattern with node values. */
+function resolveRoute(pattern: string, node: unknown, idField: string): string | null {
+	let failed = false;
+	const out = pattern.replace(ROUTE_TOKEN, (_, token) => {
+		const path = token === "id" ? idField : token;
+		const value = readPath(node, path);
+		if (value == null) {
+			failed = true;
+			return "";
+		}
+		return encodeURIComponent(value);
+	});
+	return failed ? null : out;
+}
+
+const props = defineProps<{ node: unknown; source: SObjectSourceConfig }>();
+
+const idField = computed(() => props.source.idField ?? "Id");
+const title = computed(() => {
+	const titleField = props.source.displayFields[0];
+	return titleField ? readDisplayField(props.node, titleField) : null;
+});
+const subtitle = computed(() =>
+	props.source.displayFields
+		.slice(1)
+		.map((f) => readDisplayField(props.node, f))
+		.filter((s): s is string => s != null && s !== "")
+		.join(" · "),
+);
+const href = computed(() =>
+	props.source.routePattern
+		? resolveRoute(props.source.routePattern, props.node, idField.value)
+		: null,
+);
+</script>
+
+<template>
+	<RouterLink
+		v-if="href"
+		:to="href"
+		class="block hover:bg-accent rounded-md px-3 -mx-3 py-1 transition-colors"
+		:aria-label="`View: ${title ?? 'result'}`"
+	>
+		<span class="font-medium">{{ title ?? "—" }}</span>
+		<p v-if="subtitle" class="text-sm text-neutral-600 dark:text-neutral-300">{{ subtitle }}</p>
+	</RouterLink>
+	<div v-else class="px-3 -mx-3 py-1">
+		<span class="font-medium">{{ title ?? "—" }}</span>
+		<p v-if="subtitle" class="text-sm text-neutral-600 dark:text-neutral-300">{{ subtitle }}</p>
+	</div>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/_f_/search/components/results/RenderVNode.ts

@@ -0,0 +1,10 @@
+import type { FunctionalComponent, VNodeChild } from "vue";
+
+/**
+ * Tiny functional component that invokes a render function and returns its
+ * output. Lets templates mount the `(node) => VNodeChild` renderers that
+ * `renderResult` / `renderFilters` / `renderHeader` accept.
+ */
+export const RenderVNode: FunctionalComponent<{ render: () => VNodeChild }> = (props) =>
+	props.render() as never;
+RenderVNode.props = ["render"];

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/_f_/search/components/results/resolveResultRenderer.ts

@@ -0,0 +1,41 @@
+/**
+ * Single source of truth for choosing how one source's result node is rendered.
+ *
+ * Every result layout (`SearchResults`, `MergedSearchResults`, and any future
+ * grid/list) MUST resolve its per-node renderer through this helper so the
+ * kind-aware default can never be missed in one mode. The rule, in order:
+ *
+ *   1. A `renderResult[source.key]` config override wins in EVERY mode —
+ *      including `false`, which hides the source entirely.
+ *   2. Otherwise `source.kind === "cms"` -> {@link CmsResultRow}.
+ *   3. Otherwise (SObject) -> {@link DefaultResultRow}.
+ *
+ * Returning the same union the callers already use (`renderer | false`) lets a
+ * component skip a hidden source without special-casing.
+ */
+
+import { h, type VNodeChild } from "vue";
+import type { SourceConfig } from "../../types";
+import DefaultResultRow from "./DefaultResultRow.vue";
+import CmsResultRow from "./CmsResultRow.vue";
+
+/** A per-node renderer (Vue render function), or `false` to hide the source's results. */
+export type ResultRenderer = ((node: unknown) => VNodeChild) | false;
+
+/**
+ * Resolves the renderer for one source. See the module doc for the precedence
+ * rules. `renderResult` is the optional per-source override map from `<Search>`.
+ */
+export function resolveResultRenderer(
+	source: SourceConfig,
+	renderResult?: Record<string, ResultRenderer>,
+): ResultRenderer {
+	const override = renderResult?.[source.key];
+	// A config override wins in every mode — including `false` (hide).
+	if (override !== undefined) return override;
+
+	if (source.kind === "cms") {
+		return (node: unknown) => h(CmsResultRow, { node, source });
+	}
+	return (node: unknown) => h(DefaultResultRow, { node, source });
+}

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/_f_/search/composables/useAsyncData.ts

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import type { Ref, WatchSource } from "vue";
+import { ref, shallowRef, watch } from "vue";
+
+/** Reactive async-data snapshot: current data, loading, and error. */
+export interface AsyncData<T> {
+	/** Latest successful result. Kept visible during a refetch. */
+	data: Ref<T | null>;
+	/** True while a fetch for the current args is in flight. */
+	loading: Ref<boolean>;
+	/** Error message from the most recent failed fetch, else null. */
+	error: Ref<string | null>;
+}
+
+/**
+ * Runs an async `fetcher` immediately and again whenever `source` changes,
+ * exposing the result as reactive refs. Stale responses (the source changed
+ * during a fetch, or the component unmounted) are dropped via a generation
+ * counter, so only the latest in-flight request can write state.
+ *
+ * Shipped with the feature (like the React feature's own hook) rather than
+ * re-exported from the base app, so the search library works in host apps that
+ * don't include base-vue-app's `composables/useAsyncData`.
+ */
+export function useAsyncData<TArgs, T>(
+	source: WatchSource<TArgs>,
+	fetcher: (args: TArgs) => Promise<T>,
+): AsyncData<T> {
+	const data = shallowRef<T | null>(null);
+	const loading = ref<boolean>(true);
+	const error = ref<string | null>(null);
+
+	let generation = 0;
+
+	const run = (args: TArgs): void => {
+		const current = ++generation;
+		loading.value = true;
+		error.value = null;
+
+		fetcher(args)
+			.then((result) => {
+				if (current === generation) {
+					data.value = result;
+				}
+			})
+			.catch((err: unknown) => {
+				console.error(err);
+				if (current === generation) {
+					error.value = err instanceof Error ? err.message : "An error occurred";
+				}
+			})
+			.finally(() => {
+				if (current === generation) {
+					loading.value = false;
+				}
+			});
+	};
+
+	watch(source, (args) => run(args), { immediate: true, deep: true });
+
+	return { data, loading, error };
+}

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/_f_/search/composables/useDistinctValues.ts

@@ -0,0 +1,67 @@
+/**
+ * Caches and serves distinct picklist values fetched via the GraphQL
+ * aggregate API. The cache key is `${objectName}.${fieldName}`; entries
+ * persist for the lifetime of the page so repeated mounts of the same
+ * picklist filter share the same response.
+ *
+ * Pass `null` to short-circuit the fetch (e.g. when inline options are
+ * available on the filter config). The query may be a ref/getter; the fetch
+ * re-runs when the resolved cache key changes.
+ */
+
+import { ref, toValue, watch, type MaybeRefOrGetter, type Ref } from "vue";
+import { fetchDistinctValues, type PicklistOption } from "../api/distinctValuesService";
+
+const cache = new Map<string, PicklistOption[]>();
+const inflight = new Map<string, Promise<PicklistOption[]>>();
+
+export interface DistinctValuesQuery {
+	objectName: string;
+	fieldName: string;
+}
+
+export function useDistinctValues(
+	query: MaybeRefOrGetter<DistinctValuesQuery | null>,
+): Ref<PicklistOption[] | null> {
+	const keyOf = (q: DistinctValuesQuery | null) => (q ? `${q.objectName}.${q.fieldName}` : null);
+	const options = ref<PicklistOption[] | null>(null) as Ref<PicklistOption[] | null>;
+	const initialKey = keyOf(toValue(query));
+	if (initialKey) options.value = cache.get(initialKey) ?? null;
+
+	watch(
+		() => keyOf(toValue(query)),
+		(cacheKey, _prev, onCleanup) => {
+			const q = toValue(query);
+			if (!q || !cacheKey) return;
+			const cached = cache.get(cacheKey);
+			if (cached) {
+				options.value = cached;
+				return;
+			}
+			let cancelled = false;
+			onCleanup(() => {
+				cancelled = true;
+			});
+			const existing = inflight.get(cacheKey);
+			const promise =
+				existing ??
+				fetchDistinctValues(q.objectName, q.fieldName).then((result) => {
+					cache.set(cacheKey, result);
+					inflight.delete(cacheKey);
+					return result;
+				});
+			if (!existing) inflight.set(cacheKey, promise);
+			promise
+				.then((result) => {
+					if (!cancelled) options.value = result;
+				})
+				.catch((err: unknown) => {
+					inflight.delete(cacheKey);
+					console.error(`Failed to fetch distinct values for ${cacheKey}:`, err);
+				});
+		},
+		{ immediate: true },
+	);
+
+	return options;
+}