From cfb4cfdd7b81302fb3c3f9cd4b4e3a7c80e28779 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 12 Apr 2024 15:26:58 +0200
Subject: [PATCH] fix(Toast): add missing slots

---
 src/runtime/components/Toast.vue | 53 +++++++++++++++++++++-----------
 1 file changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/runtime/components/Toast.vue b/src/runtime/components/Toast.vue
index c5f15030..300cae1c 100644
--- a/src/runtime/components/Toast.vue
+++ b/src/runtime/components/Toast.vue
@@ -26,6 +26,14 @@ export interface ToastProps extends Omit<ToastRootProps, 'asChild' | 'forceMount
 }
 
 export interface ToastEmits extends ToastRootEmits {}
+
+export interface ToastSlots {
+  default(): any
+  leading(): any
+  title(): any
+  description(): any
+  close(): any
+}
 </script>
 
 <script setup lang="ts">
@@ -37,6 +45,7 @@ import { UIcon, UAvatar } from '#components'
 
 const props = defineProps<ToastProps>()
 const emits = defineEmits<ToastEmits>()
+defineSlots<ToastSlots>()
 
 const toaster = inject<ToasterContext>('Toaster')
 
@@ -74,17 +83,23 @@ defineExpose({
     :class="ui.root({ class: props.class, multiline })"
     :style="{ '--height': height }"
   >
-    <UAvatar v-if="avatar" size="2xl" v-bind="avatar" :class="ui.avatar()" />
-    <UIcon v-else-if="icon" :name="icon" :class="ui.icon()" />
+    <slot name="leading">
+      <UAvatar v-if="avatar" size="2xl" v-bind="avatar" :class="ui.avatar()" />
+      <UIcon v-else-if="icon" :name="icon" :class="ui.icon()" />
+    </slot>
 
     <div :class="ui.wrapper()">
-      <ToastTitle v-if="title" :class="ui.title()">
-        {{ title }}
+      <ToastTitle v-if="title || $slots.title" :class="ui.title()">
+        <slot name="title">
+          {{ title }}
+        </slot>
       </ToastTitle>
-      <template v-if="description">
-        <ToastDescription v-if="isVNode(description)" :as="description" />
+      <template v-if="description || $slots.description">
+        <ToastDescription v-if="description && isVNode(description)" :as="description" />
         <ToastDescription v-else :class="ui.description()">
-          {{ description }}
+          <slot name="description">
+            {{ description }}
+          </slot>
         </ToastDescription>
       </template>
 
@@ -103,17 +118,19 @@ defineExpose({
       </template>
 
       <ToastClose as-child>
-        <UButton
-          v-if="close !== null"
-          :icon="appConfig.ui.icons.close"
-          size="sm"
-          color="gray"
-          variant="link"
-          aria-label="Close"
-          v-bind="close"
-          :class="ui.close()"
-          @click.stop
-        />
+        <slot name="close" :class="ui.close()">
+          <UButton
+            v-if="close !== null"
+            :icon="appConfig.ui.icons.close"
+            size="sm"
+            color="gray"
+            variant="link"
+            aria-label="Close"
+            v-bind="close"
+            :class="ui.close()"
+            @click.stop
+          />
+        </slot>
       </ToastClose>
     </div>