From abd2be1aa667f91c47673450445e09211c821365 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 5 Feb 2025 15:32:20 +0100
Subject: [PATCH] feat(Toast): handle vnodes in `title` and `description`

Resolves #3226
---
 src/runtime/components/Toast.vue | 17 +++++++++++++----
 src/runtime/types/utils.ts       |  5 +++++
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/runtime/components/Toast.vue b/src/runtime/components/Toast.vue
index b8d3002e..43a61551 100644
--- a/src/runtime/components/Toast.vue
+++ b/src/runtime/components/Toast.vue
@@ -7,6 +7,7 @@ import theme from '#build/ui/toast'
 import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
 import { tv } from '../utils/tv'
 import type { AvatarProps, ButtonProps } from '../types'
+import type { StringOrVNode } from '../types/utils'
 
 const appConfigToast = _appConfig as AppConfig & { ui: { toast: Partial<typeof theme> } }
 
@@ -20,8 +21,8 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
    * @defaultValue 'li'
    */
   as?: any
-  title?: string
-  description?: string
+  title?: StringOrVNode
+  description?: StringOrVNode
   icon?: string
   avatar?: AvatarProps
   color?: ToastVariants['color']
@@ -124,12 +125,20 @@ defineExpose({
     <div :class="ui.wrapper({ class: props.ui?.wrapper })">
       <ToastTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
         <slot name="title">
-          {{ title }}
+          <component :is="title()" v-if="typeof title === 'function'" />
+          <component :is="title" v-else-if="typeof title === 'object'" />
+          <template v-else>
+            {{ title }}
+          </template>
         </slot>
       </ToastTitle>
       <ToastDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description">
-          {{ description }}
+          <component :is="description()" v-if="typeof description === 'function'" />
+          <component :is="description" v-else-if="typeof description === 'object'" />
+          <template v-else>
+            {{ description }}
+          </template>
         </slot>
       </ToastDescription>
 
diff --git a/src/runtime/types/utils.ts b/src/runtime/types/utils.ts
index 29f22cd6..2357fb20 100644
--- a/src/runtime/types/utils.ts
+++ b/src/runtime/types/utils.ts
@@ -33,3 +33,8 @@ export type SelectItemKey<T> = T extends Record<string, any> ? keyof T : string
 export type SelectModelValueEmits<T, V, M extends boolean = false, DV = T> = {
   'update:modelValue': [payload: SelectModelValue<T, V, M, DV>]
 }
+
+export type StringOrVNode =
+  | string
+  | VNode
+  | (() => VNode)