@salesforce/templates 66.17.4 → 66.18.0

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/AgentforceConversationClient.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { embedAgentforceClient } from "@salesforce/agentforce-conversation-client";
+import type { AgentforceClientConfig } from "@salesforce/agentforce-conversation-client";
+import { createAccEmbedder } from "@salesforce/agentforce-conversation-client/ui-bundle";
+import { computed, onMounted, ref, watch } from "vue";
+import type { AgentforceConversationClientProps } from "../types/conversation";
+
+// The embed orchestration (window singleton, global host, dev frontdoor fetch,
+// SFDC_ENV default, partial-embed cleanup) lives in the shared, framework-agnostic
+// @salesforce/agentforce-conversation-client/ui-bundle glue. We hand it the
+// low-level embed function via dependency injection.
+const embedder = createAccEmbedder<AgentforceClientConfig>(embedAgentforceClient);
+
+/**
+ * Vue wrapper that embeds the Agentforce Conversation Client (copilot/agent UI)
+ * using Lightning Out. Requires a valid Salesforce session for the given org.
+ * Flat props are normalized into an `AgentforceClientConfig` and passed through
+ * to the shared embedder as-is. The faithful port of the React
+ * `AgentforceConversationClient`: the `computed` config mirrors the React
+ * `useMemo` and the `onMounted`/`watch` embed mirrors the React `useEffect`.
+ */
+const props = defineProps<AgentforceConversationClientProps>();
+
+const containerRef = ref<HTMLDivElement | null>(null);
+
+const normalizedAgentforceClientConfig = computed<AgentforceClientConfig>(() => {
+	const renderingConfig: NonNullable<AgentforceClientConfig["renderingConfig"]> = {
+		mode: props.inline ? "inline" : "floating",
+		...(props.headerEnabled !== undefined && { headerEnabled: props.headerEnabled }),
+		...(props.showHeaderIcon !== undefined && { showHeaderIcon: props.showHeaderIcon }),
+		showAvatar: false,
+		...(props.width !== undefined && { width: props.width }),
+		...(props.height !== undefined && { height: props.height }),
+	};
+
+	return {
+		agentId: props.agentId,
+		...(props.agentLabel !== undefined && { agentLabel: props.agentLabel }),
+		...(props.styleTokens !== undefined && { styleTokens: props.styleTokens }),
+		...(props.isFileBased !== undefined && { isFileBased: props.isFileBased }),
+		renderingConfig,
+		channel: "Vibes",
+	};
+});
+
+const inline = computed(
+	() => normalizedAgentforceClientConfig.value?.renderingConfig?.mode === "inline",
+);
+
+function embed() {
+	embedder.embedAcc(
+		normalizedAgentforceClientConfig.value,
+		{ salesforceOrigin: props.salesforceOrigin, frontdoorUrl: props.frontdoorUrl },
+		containerRef.value,
+		{ onReady: props.onReady, onError: props.onError },
+		// Intentionally no cleanup:
+		// This component guarantees a single LO initialization per window.
+	);
+}
+
+onMounted(embed);
+watch(
+	() => [
+		normalizedAgentforceClientConfig.value,
+		props.salesforceOrigin,
+		props.frontdoorUrl,
+		props.onReady,
+		props.onError,
+	],
+	embed,
+);
+</script>
+
+<template>
+	<div v-if="inline" ref="containerRef" />
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/account/AccountDetailContent.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Card, CardContent } from "../ui/card";
+import { Separator } from "../ui/separator";
+import { fieldValue, getAddressFieldLines } from "../../utils/accountFields";
+import DetailSection from "./DetailSection.vue";
+import FieldItem from "./FieldItem.vue";
+import FieldRow from "./FieldRow.vue";
+import TelephoneField from "./TelephoneField.vue";
+import type { AccountNode } from "./types";
+
+const props = defineProps<{ account: AccountNode }>();
+
+const name = computed(() => fieldValue(props.account.Name));
+const billingAddress = computed(() =>
+	getAddressFieldLines({
+		street: fieldValue(props.account.BillingStreet),
+		city: fieldValue(props.account.BillingCity),
+		state: fieldValue(props.account.BillingState),
+		postalCode: fieldValue(props.account.BillingPostalCode),
+		country: fieldValue(props.account.BillingCountry),
+	}),
+);
+const shippingAddress = computed(() =>
+	getAddressFieldLines({
+		street: fieldValue(props.account.ShippingStreet),
+		city: fieldValue(props.account.ShippingCity),
+		state: fieldValue(props.account.ShippingState),
+		postalCode: fieldValue(props.account.ShippingPostalCode),
+		country: fieldValue(props.account.ShippingCountry),
+	}),
+);
+const createdBy = computed(
+	() =>
+		[fieldValue(props.account.CreatedBy?.Name), fieldValue(props.account.CreatedDate)]
+			.filter(Boolean)
+			.join(" ") || null,
+);
+const lastModifiedBy = computed(
+	() =>
+		[fieldValue(props.account.LastModifiedBy?.Name), fieldValue(props.account.LastModifiedDate)]
+			.filter(Boolean)
+			.join(" ") || null,
+);
+</script>
+
+<template>
+	<h1 class="text-2xl font-bold mb-4">Account: {{ name }}</h1>
+
+	<Card>
+		<CardContent class="space-y-8 pt-6">
+			<!-- Top section -->
+			<div>
+				<div class="space-y-4">
+					<FieldRow>
+						<FieldItem label="Account Owner" :value="fieldValue(account.Owner?.Name)" />
+						<FieldItem label="Phone">
+							<TelephoneField :value="fieldValue(account.Phone)" />
+						</FieldItem>
+					</FieldRow>
+					<FieldRow>
+						<FieldItem label="Account Name" :value="name" />
+						<FieldItem label="Fax">
+							<TelephoneField :value="fieldValue(account.Fax)" />
+						</FieldItem>
+					</FieldRow>
+					<FieldRow>
+						<FieldItem label="Parent Account" :value="fieldValue(account.Parent?.Name)" />
+						<FieldItem label="Website" :value="fieldValue(account.Website)" />
+					</FieldRow>
+				</div>
+			</div>
+
+			<Separator />
+
+			<!-- Additional Information -->
+			<DetailSection title="Additional Information">
+				<FieldRow>
+					<FieldItem label="Type" :value="fieldValue(account.Type)" />
+					<FieldItem label="Employees" :value="fieldValue(account.NumberOfEmployees)" />
+				</FieldRow>
+				<FieldRow>
+					<FieldItem label="Industry" :value="fieldValue(account.Industry)" />
+					<FieldItem label="Annual Revenue" :value="fieldValue(account.AnnualRevenue)" />
+				</FieldRow>
+				<dl>
+					<FieldItem label="Description" :value="fieldValue(account.Description)" />
+				</dl>
+			</DetailSection>
+
+			<Separator />
+
+			<!-- Address Information -->
+			<DetailSection title="Address Information">
+				<FieldRow>
+					<FieldItem label="Billing Address">
+						<template v-if="billingAddress">
+							<div v-for="(line, i) in billingAddress" :key="i">
+								{{ line }}
+							</div>
+						</template>
+					</FieldItem>
+					<FieldItem label="Shipping Address">
+						<template v-if="shippingAddress">
+							<div v-for="(line, i) in shippingAddress" :key="i">
+								{{ line }}
+							</div>
+						</template>
+					</FieldItem>
+				</FieldRow>
+			</DetailSection>
+
+			<Separator />
+
+			<!-- System Information -->
+			<DetailSection title="System Information">
+				<FieldRow>
+					<FieldItem label="Created By" :value="createdBy" />
+					<FieldItem label="Last Modified By" :value="lastModifiedBy" />
+				</FieldRow>
+			</DetailSection>
+		</CardContent>
+	</Card>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/account/AccountDetailError.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { CircleAlert } from "@lucide/vue";
+import { Alert, AlertTitle, AlertDescription } from "../ui/alert";
+import { Button } from "../ui/button";
+
+defineEmits<{ back: [] }>();
+
+const retry = () => window.location.reload();
+</script>
+
+<template>
+	<!-- Alert hardcodes role="alert"; override so the h1-focus logic in the page is the only announcement path (WCAG 4.1.3) -->
+	<Alert variant="destructive" :role="undefined">
+		<CircleAlert aria-hidden="true" />
+		<AlertTitle>
+			<h1>Failed to load account</h1>
+		</AlertTitle>
+		<AlertDescription>
+			Something went wrong while loading this account. Please try again later.
+		</AlertDescription>
+	</Alert>
+	<div class="mt-4 flex gap-3">
+		<Button variant="outline" @click="$emit('back')">
+			<span aria-hidden="true">←</span> Back
+		</Button>
+		<Button variant="outline" @click="retry"> Retry </Button>
+	</div>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/account/AccountDetailNotFound.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { FileQuestionMark } from "@lucide/vue";
+import { Button } from "../ui/button";
+import { Card, CardContent } from "../ui/card";
+
+defineEmits<{ back: [] }>();
+</script>
+
+<template>
+	<Card>
+		<CardContent class="flex flex-col items-center justify-center py-16 text-center">
+			<FileQuestionMark aria-hidden="true" class="size-12 text-muted-foreground mb-4" />
+			<h1 class="text-lg font-semibold mb-1">Account not found</h1>
+			<p class="text-sm text-muted-foreground mb-6">
+				The account you're looking for doesn't exist or may have been deleted.
+			</p>
+			<Button variant="outline" @click="$emit('back')">
+				<span aria-hidden="true">←</span> Go back
+			</Button>
+		</CardContent>
+	</Card>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/account/AccountDetailSkeleton.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { Card, CardContent } from "../ui/card";
+import { Separator } from "../ui/separator";
+import { Skeleton } from "../ui/skeleton";
+import SkeletonFieldRow from "./SkeletonFieldRow.vue";
+</script>
+
+<template>
+	<div>
+		<Skeleton class="h-8 w-56 mb-4" />
+
+		<Card>
+			<CardContent class="space-y-8 pt-6">
+				<!-- Top section: field rows -->
+				<div>
+					<div class="space-y-4">
+						<SkeletonFieldRow />
+						<SkeletonFieldRow />
+						<SkeletonFieldRow />
+					</div>
+				</div>
+
+				<Separator />
+
+				<!-- Additional Information -->
+				<div class="space-y-4">
+					<Skeleton class="h-7 w-48 py-2" />
+					<SkeletonFieldRow />
+					<SkeletonFieldRow />
+				</div>
+
+				<Separator />
+
+				<!-- Address Information -->
+				<div class="space-y-4">
+					<Skeleton class="h-7 w-48 py-2" />
+					<div class="grid grid-cols-2 gap-x-8 gap-y-4">
+						<div v-for="w in ['w-28', 'w-32']" :key="w">
+							<Skeleton :class="`h-4 ${w} mb-1.5`" />
+							<Skeleton class="h-5 w-44 mb-1" />
+							<Skeleton class="h-5 w-36 mb-1" />
+							<Skeleton class="h-5 w-28" />
+						</div>
+					</div>
+				</div>
+
+				<Separator />
+
+				<!-- System Information -->
+				<div class="space-y-4">
+					<Skeleton class="h-7 w-48 py-2" />
+					<SkeletonFieldRow />
+				</div>
+			</CardContent>
+		</Card>
+	</div>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/account/DetailSection.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { ChevronDown, ChevronRight } from "@lucide/vue";
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "../ui/collapsible";
+
+defineProps<{ title: string }>();
+const open = ref(true);
+</script>
+
+<template>
+	<Collapsible v-model:open="open">
+		<h2>
+			<CollapsibleTrigger class="flex items-center gap-2 cursor-pointer text-lg font-semibold py-2">
+				<ChevronDown v-if="open" aria-hidden="true" class="size-5" />
+				<ChevronRight v-else aria-hidden="true" class="size-5" />
+				{{ title }}
+			</CollapsibleTrigger>
+		</h2>
+		<CollapsibleContent>
+			<div class="mt-2 space-y-4">
+				<slot />
+			</div>
+		</CollapsibleContent>
+	</Collapsible>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/account/FieldItem.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+// Plain-text fields pass `value`; rich content (links, address lines) uses the
+// default slot. An empty `{{ null }}` interpolation still counts as slot
+// content, so the "—" placeholder lives on `value` rather than slot fallback.
+defineProps<{ label: string; value?: string | null }>();
+</script>
+
+<template>
+	<div>
+		<dt class="text-sm text-muted-foreground">
+			{{ label }}
+		</dt>
+		<dd class="mt-0.5">
+			<slot>{{ value ?? "—" }}</slot>
+		</dd>
+	</div>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/account/FieldRow.vue

@@ -0,0 +1,5 @@
+<template>
+	<dl class="grid grid-cols-2 gap-x-8 gap-y-4">
+		<slot />
+	</dl>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/account/SkeletonFieldRow.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { Skeleton } from "../ui/skeleton";
+</script>
+
+<template>
+	<div class="grid grid-cols-2 gap-x-8 gap-y-4">
+		<div v-for="i in 2" :key="i">
+			<Skeleton class="h-4 w-24 mb-1.5" />
+			<Skeleton class="h-5 w-40" />
+		</div>
+	</div>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/account/TelephoneField.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+defineProps<{ value?: string | null }>();
+</script>
+
+<template>
+	<a v-if="value" :href="`tel:${value}`" class="underline">{{ value }}</a>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/account/types.ts

@@ -0,0 +1,42 @@
+/** A uiapi scalar field as returned with `@optional { value displayValue }`. Typed locally to avoid a generated-types dependency. */
+export type FieldValue = { value?: unknown; displayValue?: string | null } | null;
+export type NameHolder = { Name?: FieldValue } | null;
+
+export interface AccountNode {
+	Id?: string;
+	Name?: FieldValue;
+	Owner?: NameHolder;
+	Phone?: FieldValue;
+	Fax?: FieldValue;
+	Parent?: NameHolder;
+	Website?: FieldValue;
+	Type?: FieldValue;
+	NumberOfEmployees?: FieldValue;
+	Industry?: FieldValue;
+	AnnualRevenue?: FieldValue;
+	Description?: FieldValue;
+	BillingStreet?: FieldValue;
+	BillingCity?: FieldValue;
+	BillingState?: FieldValue;
+	BillingPostalCode?: FieldValue;
+	BillingCountry?: FieldValue;
+	ShippingStreet?: FieldValue;
+	ShippingCity?: FieldValue;
+	ShippingState?: FieldValue;
+	ShippingPostalCode?: FieldValue;
+	ShippingCountry?: FieldValue;
+	CreatedBy?: NameHolder;
+	CreatedDate?: FieldValue;
+	LastModifiedBy?: NameHolder;
+	LastModifiedDate?: FieldValue;
+}
+
+export interface GetAccountDetailResponse {
+	uiapi?: {
+		query?: {
+			Account?: {
+				edges?: Array<{ node?: AccountNode } | null> | null;
+			} | null;
+		} | null;
+	} | null;
+}

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/alerts/status-alert.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, useId } from 'vue';
+import { cva } from 'class-variance-authority';
+import { AlertCircleIcon, CheckCircle2Icon, InfoIcon } from '@lucide/vue';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+
+const statusAlertVariants = cva('', {
+  variants: {
+    variant: {
+      error: '',
+      success: '',
+      info: 'text-blue-700 dark:text-blue-400 *:[svg]:text-current *:data-[slot=alert-description]:text-blue-700 dark:*:data-[slot=alert-description]:text-blue-400',
+    },
+  },
+  defaultVariants: {
+    variant: 'error',
+  },
+});
+
+/**
+ * Status alert component for displaying error, success, or info messages.
+ * Renders nothing when the default slot is empty.
+ */
+const props = withDefaults(
+  defineProps<{
+    /** Alert variant type. @default "error" */
+    variant?: 'error' | 'success' | 'info';
+  }>(),
+  {
+    variant: 'error',
+  }
+);
+
+const descriptionId = useId();
+const isError = computed(() => props.variant === 'error');
+const icon = computed(
+  () =>
+    ({
+      error: AlertCircleIcon,
+      success: CheckCircle2Icon,
+      info: InfoIcon,
+    })[props.variant]
+);
+</script>
+
+<template>
+  <Alert
+    v-if="$slots.default"
+    :variant="isError ? 'destructive' : 'default'"
+    :class="statusAlertVariants({ variant })"
+    :aria-describedby="descriptionId"
+    :role="isError ? 'alert' : 'status'"
+  >
+    <component :is="icon" aria-hidden="true" />
+    <AlertDescription :id="descriptionId">
+      <slot />
+    </AlertDescription>
+  </Alert>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/layouts/card-layout.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+
+/**
+ * Card layout component for authentication pages.
+ * Provides a CardHeader with title and optional description, and CardContent.
+ */
+defineProps<{
+  title: string;
+  description?: string;
+}>();
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle class="text-2xl">{{ title }}</CardTitle>
+      <CardDescription v-if="description">{{ description }}</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <slot />
+    </CardContent>
+  </Card>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/ui/alert/Alert.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import type { AlertVariants } from '.';
+import { cn } from '@/lib/utils';
+import { alertVariants } from '.';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+  variant?: AlertVariants['variant'];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="alert"
+    role="alert"
+    :class="cn(alertVariants({ variant }), props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/ui/alert/AlertAction.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="alert-action"
+    :class="cn('absolute top-2 right-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/ui/alert/AlertDescription.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="alert-description"
+    :class="
+      cn(
+        'text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/ui/alert/AlertTitle.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="alert-title"
+    :class="
+      cn(
+        'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/ui/alert/index.ts

@@ -0,0 +1,25 @@
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+export { default as Alert } from './Alert.vue';
+export { default as AlertTitle } from './AlertTitle.vue';
+export { default as AlertDescription } from './AlertDescription.vue';
+export { default as AlertAction } from './AlertAction.vue';
+
+export const alertVariants = cva(
+  "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'text-red-700 dark:text-red-400 bg-card *:data-[slot=alert-description]:text-red-700 dark:*:data-[slot=alert-description]:text-red-400 *:[svg]:text-current',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export type AlertVariants = VariantProps<typeof alertVariants>;

package/lib/templates/project/vueinternalapp/_p_/_m_/_w_/_a_/src/components/ui/avatar/Avatar.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { AvatarRoot } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <AvatarRoot
+    data-slot="avatar"
+    :class="
+      cn(
+        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </AvatarRoot>
+</template>