@salesforce/templates 66.17.4 → 66.18.0

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

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import TextFilter from "./inputs/TextFilter.vue";
+import NumericRangeFilter from "./inputs/NumericRangeFilter.vue";
+import BooleanFilter from "./inputs/BooleanFilter.vue";
+import DateRangeFilter from "./inputs/DateRangeFilter.vue";
+import PicklistField from "./PicklistField.vue";
+import type { FilterFieldConfig } from "../../utils/filterUtils";
+import type { SObjectSourceConfig } from "../../types";
+
+defineProps<{ filter: FilterFieldConfig; source: SObjectSourceConfig }>();
+</script>
+
+<template>
+	<TextFilter
+		v-if="filter.type === 'text'"
+		:field="filter.field"
+		:label="filter.label"
+		:placeholder="filter.placeholder"
+		:help-text="filter.helpText"
+	/>
+	<PicklistField
+		v-else-if="filter.type === 'picklist'"
+		:filter="filter"
+		:source="source"
+		:multi="false"
+	/>
+	<PicklistField
+		v-else-if="filter.type === 'multipicklist'"
+		:filter="filter"
+		:source="source"
+		:multi="true"
+	/>
+	<NumericRangeFilter
+		v-else-if="filter.type === 'numeric'"
+		:field="filter.field"
+		:label="filter.label"
+		:help-text="filter.helpText"
+		:min="filter.min"
+		:max="filter.max"
+	/>
+	<BooleanFilter
+		v-else-if="filter.type === 'boolean'"
+		:field="filter.field"
+		:label="filter.label"
+		:help-text="filter.helpText"
+	/>
+	<DateRangeFilter
+		v-else-if="filter.type === 'date' || filter.type === 'daterange'"
+		:field="filter.field"
+		:label="filter.label"
+		:help-text="filter.helpText"
+		filter-type="daterange"
+		:mode="filter.dateMode"
+	/>
+	<DateRangeFilter
+		v-else-if="filter.type === 'datetime' || filter.type === 'datetimerange'"
+		:field="filter.field"
+		:label="filter.label"
+		:help-text="filter.helpText"
+		filter-type="datetimerange"
+		:mode="filter.dateMode"
+	/>
+</template>

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+/**
+ * Default filter panel used when no custom filters are supplied for a source.
+ *
+ * Renders one input per entry in `source.filterBy`, picking the right
+ * component for each `FilterFieldType`:
+ *
+ *   - text                                  -> TextFilter
+ *   - picklist                              -> SelectFilter (inline options or auto-fetched)
+ *   - multipicklist                         -> MultiSelectFilter (inline options or auto-fetched)
+ *   - numeric                               -> NumericRangeFilter
+ *   - boolean                               -> BooleanFilter
+ *   - date / daterange / datetime / datetimerange -> DateRangeFilter
+ *       (its Between / After / Before chrome is chosen by `filter.dateMode`)
+ */
+import type { SObjectSourceConfig } from "../../types";
+import DefaultFilterField from "./DefaultFilterField.vue";
+
+defineProps<{ source: SObjectSourceConfig }>();
+</script>
+
+<template>
+	<template v-if="(source.filterBy ?? []).length > 0">
+		<DefaultFilterField
+			v-for="filter in source.filterBy"
+			:key="filter.field"
+			:filter="filter"
+			:source="source"
+		/>
+	</template>
+</template>

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

@@ -0,0 +1,45 @@
+/**
+ * Filter context for custom filter UIs. `<FilterProvider>` provides the active
+ * filters plus change/remove/reset callbacks; `useFilterField` and
+ * `useFilterPanel` read them from any descendant.
+ */
+import {
+	computed,
+	inject,
+	toValue,
+	type ComputedRef,
+	type InjectionKey,
+	type MaybeRefOrGetter,
+} from "vue";
+import type { ActiveFilterValue } from "../../utils/filterUtils";
+
+export interface FilterContextValue {
+	filters: ComputedRef<ActiveFilterValue[]>;
+	onFilterChange: (field: string, value: ActiveFilterValue | undefined) => void;
+	onFilterRemove: (field: string) => void;
+	onReset: () => void;
+}
+
+export const FILTER_CONTEXT_KEY: InjectionKey<FilterContextValue> = Symbol("search-filter-context");
+
+function useFilterContext(): FilterContextValue {
+	const ctx = inject(FILTER_CONTEXT_KEY, null);
+	if (!ctx) throw new Error("useFilterField must be used within a FilterProvider");
+	return ctx;
+}
+
+export function useFilterField(field: MaybeRefOrGetter<string>) {
+	const { filters, onFilterChange, onFilterRemove } = useFilterContext();
+	const value = computed(() => filters.value.find((f) => f.field === toValue(field)));
+	const onChange = (next: ActiveFilterValue | undefined) => {
+		const name = toValue(field);
+		if (next) onFilterChange(name, next);
+		else onFilterRemove(name);
+	};
+	return { value, onChange };
+}
+
+export function useFilterPanel() {
+	const { filters, onReset } = useFilterContext();
+	return { hasActiveFilters: computed(() => filters.value.length > 0), resetAll: onReset };
+}

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed, provide } from "vue";
+import type { ActiveFilterValue } from "../../utils/filterUtils";
+import { FILTER_CONTEXT_KEY } from "./FilterContext";
+
+const props = defineProps<{ filters: ActiveFilterValue[] }>();
+const emit = defineEmits<{
+	filterChange: [field: string, value: ActiveFilterValue | undefined];
+	filterRemove: [field: string];
+	reset: [];
+}>();
+
+provide(FILTER_CONTEXT_KEY, {
+	filters: computed(() => props.filters),
+	onFilterChange: (field, value) => emit("filterChange", field, value),
+	onFilterRemove: (field) => emit("filterRemove", field),
+	onReset: () => emit("reset"),
+});
+</script>
+
+<template>
+	<slot />
+</template>

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

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { Button } from "../../../../components/ui/button";
+import { useFilterPanel } from "./FilterContext";
+
+const { hasActiveFilters, resetAll } = useFilterPanel();
+</script>
+
+<template>
+	<Button
+		v-if="hasActiveFilters"
+		aria-label="Reset filters"
+		variant="destructive"
+		@click="resetAll"
+	>
+		<slot>Reset</slot>
+	</Button>
+</template>

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+/**
+ * Resolves picklist options from inline config first; falls back to fetching
+ * distinct values from the GraphQL aggregate API.
+ */
+import { computed } from "vue";
+import { useDistinctValues } from "../../composables/useDistinctValues";
+import SelectFilter from "./inputs/SelectFilter.vue";
+import MultiSelectFilter from "./inputs/MultiSelectFilter.vue";
+import type { FilterFieldConfig } from "../../utils/filterUtils";
+import type { SObjectSourceConfig } from "../../types";
+
+const props = defineProps<{
+	filter: FilterFieldConfig;
+	source: SObjectSourceConfig;
+	multi: boolean;
+}>();
+
+const fetched = useDistinctValues(() =>
+	props.filter.options
+		? null
+		: { objectName: props.source.objectName, fieldName: props.filter.field },
+);
+const options = computed(() => props.filter.options ?? fetched.value ?? []);
+</script>
+
+<template>
+	<component
+		:is="multi ? MultiSelectFilter : SelectFilter"
+		:field="filter.field"
+		:label="filter.label"
+		:options="options"
+		:help-text="filter.helpText"
+	/>
+</template>

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

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../../../components/ui/select";
+import { useFilterField } from "../FilterContext";
+import FilterFieldWrapper from "./FilterFieldWrapper.vue";
+
+const ANY_VALUE = "__any__";
+
+const props = withDefaults(
+	defineProps<{
+		field: string;
+		label: string;
+		trueLabel?: string;
+		falseLabel?: string;
+		helpText?: string;
+	}>(),
+	{ trueLabel: "Yes", falseLabel: "No" },
+);
+
+const { value, onChange } = useFilterField(() => props.field);
+const id = `filter-${props.field}`;
+
+const onValueChange = (v: unknown) => {
+	if (v === ANY_VALUE) onChange(undefined);
+	else onChange({ field: props.field, label: props.label, type: "boolean", value: String(v) });
+};
+</script>
+
+<template>
+	<FilterFieldWrapper :label="label" :html-for="id" :help-text="helpText">
+		<Select :model-value="value?.value ?? ANY_VALUE" @update:model-value="onValueChange">
+			<SelectTrigger :id="id" class="w-full">
+				<SelectValue />
+			</SelectTrigger>
+			<SelectContent>
+				<SelectItem :value="ANY_VALUE">Any</SelectItem>
+				<SelectItem value="true">{{ trueLabel }}</SelectItem>
+				<SelectItem value="false">{{ falseLabel }}</SelectItem>
+			</SelectContent>
+		</Select>
+	</FilterFieldWrapper>
+</template>

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

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { Input } from "../../../../../components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../../../../../components/ui/select";
+import { useFilterField } from "../FilterContext";
+import FilterFieldWrapper from "./FilterFieldWrapper.vue";
+import type {
+	ActiveFilterValue,
+	DateFilterMode,
+	FilterFieldType,
+} from "../../../utils/filterUtils";
+
+/**
+ * A date constraint whose chrome is driven by `mode`:
+ *   - "range": a single Between control (two date inputs).
+ *   - "comparison" (default): an After / Before selector with one input.
+ *   - "both": a Between / After / Before selector spanning the two.
+ * They map onto the `min`/`max` bounds the query builder understands
+ * (after -> min only, before -> max only, between -> both).
+ */
+type DateOperator = "between" | "after" | "before";
+
+const props = withDefaults(
+	defineProps<{
+		field: string;
+		label: string;
+		helpText?: string;
+		/** "daterange" (Date scalar) or "datetimerange" (DateTime scalar). */
+		filterType?: Extract<FilterFieldType, "daterange" | "datetimerange">;
+		/** Which comparison chrome to show. See DateFilterMode. */
+		mode?: DateFilterMode;
+	}>(),
+	{ filterType: "daterange", mode: "comparison" },
+);
+
+const OPERATOR_LABELS: Record<DateOperator, string> = {
+	between: "Between",
+	after: "After",
+	before: "Before",
+};
+
+const MODE_OPERATORS: Record<DateFilterMode, DateOperator[]> = {
+	range: ["between"],
+	comparison: ["after", "before"],
+	both: ["between", "after", "before"],
+};
+
+/** Pick the operator implied by an already-active filter (e.g. restored from the URL). */
+function operatorFor(value: ActiveFilterValue | undefined): DateOperator {
+	const hasMin = !!value?.min;
+	const hasMax = !!value?.max;
+	if (hasMax && !hasMin) return "before";
+	if (hasMin && !hasMax) return "after";
+	return "between";
+}
+
+const { value, onChange } = useFilterField(() => props.field);
+const operators = MODE_OPERATORS[props.mode];
+
+// Operator is local UI state: it must survive a moment where no date is yet
+// entered (which clears the active filter), so it can't be derived from `value`.
+const restored = operatorFor(value.value);
+const operator = ref<DateOperator>(operators.includes(restored) ? restored : operators[0]);
+
+const emitValue = (nextMin: string | undefined, nextMax: string | undefined) => {
+	if (!nextMin && !nextMax) onChange(undefined);
+	else
+		onChange({
+			field: props.field,
+			label: props.label,
+			type: props.filterType,
+			min: nextMin,
+			max: nextMax,
+		});
+};
+
+const changeOperator = (next: unknown) => {
+	const op = next as DateOperator;
+	operator.value = op;
+	// Re-emit, keeping only the bound(s) the new operator uses.
+	if (op === "after") emitValue(value.value?.min, undefined);
+	else if (op === "before") emitValue(undefined, value.value?.max);
+	else emitValue(value.value?.min, value.value?.max);
+};
+
+const str = (v: string | number | undefined) =>
+	v === undefined || v === "" ? undefined : String(v);
+const operatorId = `filter-${props.field}-op`;
+// A lone "between" operator (mode="range") needs no selector — it can't change.
+const showSelector = operators.length > 1;
+</script>
+
+<template>
+	<FilterFieldWrapper :label="label" :help-text="helpText">
+		<div class="flex flex-col gap-2">
+			<Select v-if="showSelector" :model-value="operator" @update:model-value="changeOperator">
+				<SelectTrigger :id="operatorId" class="w-full" :aria-label="`${label} comparison`">
+					<SelectValue />
+				</SelectTrigger>
+				<SelectContent>
+					<SelectItem v-for="op in operators" :key="op" :value="op">{{
+						OPERATOR_LABELS[op]
+					}}</SelectItem>
+				</SelectContent>
+			</Select>
+
+			<div v-if="operator === 'between'" class="flex items-center gap-2">
+				<Input
+					type="date"
+					:model-value="value?.min ?? ''"
+					:aria-label="`${label} from`"
+					@update:model-value="(v) => emitValue(str(v), value?.max)"
+				/>
+				<span class="text-sm text-muted-foreground">–</span>
+				<Input
+					type="date"
+					:model-value="value?.max ?? ''"
+					:aria-label="`${label} to`"
+					@update:model-value="(v) => emitValue(value?.min, str(v))"
+				/>
+			</div>
+			<Input
+				v-else-if="operator === 'after'"
+				type="date"
+				:model-value="value?.min ?? ''"
+				:aria-label="`${label} after`"
+				@update:model-value="(v) => emitValue(str(v), undefined)"
+			/>
+			<Input
+				v-else
+				type="date"
+				:model-value="value?.max ?? ''"
+				:aria-label="`${label} before`"
+				@update:model-value="(v) => emitValue(undefined, str(v))"
+			/>
+		</div>
+	</FilterFieldWrapper>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { Label } from "../../../../../components/ui/label";
+
+defineProps<{
+	label: string;
+	htmlFor?: string;
+	errorId?: string;
+	helpText?: string;
+	error?: string;
+	class?: string;
+}>();
+</script>
+
+<template>
+	<div :class="['space-y-1', $props.class]">
+		<Label :for="htmlFor">{{ label }}</Label>
+		<slot />
+		<div class="min-h-4">
+			<p v-if="error" :id="errorId" role="alert" class="text-xs text-destructive">{{ error }}</p>
+			<p v-else-if="helpText" class="text-xs text-muted-foreground">{{ helpText }}</p>
+		</div>
+	</div>
+</template>

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

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { ChevronDown } from "@lucide/vue";
+import { Button } from "../../../../../components/ui/button";
+import { Checkbox } from "../../../../../components/ui/checkbox";
+import { Label } from "../../../../../components/ui/label";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "../../../../../components/ui/popover";
+import { useFilterField } from "../FilterContext";
+import FilterFieldWrapper from "./FilterFieldWrapper.vue";
+
+const props = defineProps<{
+	field: string;
+	label: string;
+	options: Array<{ value: string; label: string }>;
+	helpText?: string;
+}>();
+
+const { value, onChange } = useFilterField(() => props.field);
+const selected = computed(
+	() => new Set(value.value?.value ? value.value.value.split(",").filter(Boolean) : []),
+);
+
+const toggle = (v: string, on: boolean) => {
+	const next = new Set(selected.value);
+	if (on) next.add(v);
+	else next.delete(v);
+	const joined = Array.from(next).join(",");
+	if (joined === "") onChange(undefined);
+	else onChange({ field: props.field, label: props.label, type: "multipicklist", value: joined });
+};
+
+// Summarize the selection on the collapsed trigger: the sole label when one is
+// picked, a count when several are, and a placeholder when none.
+const summary = computed(() => {
+	const size = selected.value.size;
+	if (size === 0) return `Select ${props.label.toLowerCase()}`;
+	if (size === 1) {
+		return props.options.find((o) => selected.value.has(o.value))?.label ?? `${size} selected`;
+	}
+	return `${size} selected`;
+});
+const triggerId = `filter-${props.field}`;
+</script>
+
+<template>
+	<FilterFieldWrapper :label="label" :html-for="triggerId" :help-text="helpText">
+		<Popover>
+			<PopoverTrigger as-child>
+				<Button
+					:id="triggerId"
+					variant="outline"
+					class="w-full justify-between font-normal"
+					:aria-label="`${label}: ${summary}`"
+				>
+					<span :class="['truncate', selected.size === 0 ? 'text-foreground/70' : '']">{{
+						summary
+					}}</span>
+					<ChevronDown class="ml-2 size-4 shrink-0 opacity-50" aria-hidden="true" />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent
+				align="start"
+				:aria-label="label"
+				class="w-(--reka-popover-trigger-width) max-h-72 overflow-y-auto"
+			>
+				<div role="group" class="flex flex-col gap-1">
+					<p v-if="options.length === 0" class="px-1 py-2 text-sm text-muted-foreground">
+						No options available.
+					</p>
+					<template v-else>
+						<div v-for="opt in options" :key="opt.value" class="flex items-center gap-2">
+							<Checkbox
+								:id="`filter-${field}-${opt.value}`"
+								:model-value="selected.has(opt.value)"
+								@update:model-value="
+									(checked: boolean | 'indeterminate') => toggle(opt.value, checked === true)
+								"
+							/>
+							<Label
+								:for="`filter-${field}-${opt.value}`"
+								class="text-sm font-normal cursor-pointer"
+							>
+								{{ opt.label }}
+							</Label>
+						</div>
+					</template>
+				</div>
+			</PopoverContent>
+		</Popover>
+	</FilterFieldWrapper>
+</template>

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

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { computed, ref, useId, 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;
+	helpText?: string;
+	min?: number;
+	max?: number;
+}>();
+
+const { value, onChange } = useFilterField(() => props.field);
+const errorId = useId();
+const draftMin = ref<string>(value.value?.min ?? "");
+const draftMax = ref<string>(value.value?.max ?? "");
+
+const emitDebounced = debounce((nextMin: string, nextMax: string) => {
+	if (!nextMin && !nextMax) onChange(undefined);
+	else
+		onChange({
+			field: props.field,
+			label: props.label,
+			type: "numeric",
+			min: nextMin || undefined,
+			max: nextMax || undefined,
+		});
+}, FILTER_DEBOUNCE_MS);
+
+watch(
+	() => [value.value?.min, value.value?.max],
+	([nextMin, nextMax]) => {
+		draftMin.value = nextMin ?? "";
+		draftMax.value = nextMax ?? "";
+	},
+);
+
+const isOutOfBounds = (v: string) => {
+	if (v === "") return false;
+	const n = Number(v);
+	return (props.min != null && n < props.min) || (props.max != null && n > props.max);
+};
+const minOutOfBounds = computed(() => isOutOfBounds(draftMin.value));
+const maxOutOfBounds = computed(() => isOutOfBounds(draftMax.value));
+const isRangeInverted = computed(
+	() =>
+		draftMin.value !== "" &&
+		draftMax.value !== "" &&
+		Number(draftMin.value) > Number(draftMax.value),
+);
+const hasError = computed(
+	() => minOutOfBounds.value || maxOutOfBounds.value || isRangeInverted.value,
+);
+
+const boundsLabel = computed(() => {
+	const { min, max } = props;
+	if (min != null && max != null) return `${min}–${max}`;
+	if (min != null) return `${min} or more`;
+	if (max != null) return `${max} or less`;
+	return null;
+});
+
+const errorMessage = computed(() => {
+	if (isRangeInverted.value) return "Min must not exceed max";
+	if ((minOutOfBounds.value || maxOutOfBounds.value) && boundsLabel.value) {
+		return `Value must be between ${boundsLabel.value}`;
+	}
+	return undefined;
+});
+
+const onMin = (v: string | number | undefined) => {
+	draftMin.value = String(v ?? "");
+	emitDebounced(draftMin.value, draftMax.value);
+};
+const onMax = (v: string | number | undefined) => {
+	draftMax.value = String(v ?? "");
+	emitDebounced(draftMin.value, draftMax.value);
+};
+</script>
+
+<template>
+	<FilterFieldWrapper
+		:label="label"
+		:help-text="helpText"
+		:error="errorMessage"
+		:error-id="errorId"
+	>
+		<div class="flex items-center gap-2">
+			<Input
+				type="number"
+				placeholder="Min"
+				:min="min"
+				:max="max"
+				:model-value="draftMin"
+				:aria-label="`${label} minimum`"
+				:aria-invalid="hasError || undefined"
+				:aria-describedby="hasError ? errorId : undefined"
+				@update:model-value="onMin"
+			/>
+			<span class="text-sm text-muted-foreground">–</span>
+			<Input
+				type="number"
+				placeholder="Max"
+				:min="min"
+				:max="max"
+				:model-value="draftMax"
+				:aria-label="`${label} maximum`"
+				:aria-invalid="hasError || undefined"
+				:aria-describedby="hasError ? errorId : undefined"
+				@update:model-value="onMax"
+			/>
+		</div>
+	</FilterFieldWrapper>
+</template>