fix!: add close event to toast component (#1383)

src/lib/toast/Toast.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   // import type { Snippet } from 'svelte';
+  import {createEventDispatcher} from 'svelte';
   import { fade, type TransitionConfig } from 'svelte/transition';
   import { twMerge } from 'tailwind-merge';
   import { CloseButton } from '$lib';
@@ -20,6 +21,7 @@
   export let params = {};
 
   export let toastStatus: boolean = true;
+  const dispatch = createEventDispatcher();
 
   // const divCls: string =
   //   'w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 gap-3';
@@ -94,6 +96,7 @@
         {color}
         on:click={() => {
           toastStatus = false;
+          dispatch('close');
         }}
       />
     {/if}

src/routes/component-data/Toast.json

@@ -1 +1,17 @@
-{"name":"Toast","slots":["icon"],"events":[],"props":[["dismissable","boolean","true"],["color","ColorVariant","'primary'"],["position","ToastPositionType","'none'"],["divClass","string","'w-full max-w-xs p-4 text-gray-500 bg-white shadow dark:text-gray-400 dark:bg-gray-800 gap-3'"],["defaultIconClass","string","'w-8 h-8'"],["contentClass","string","'w-full text-sm font-normal'"],["align","boolean","true"],["transition","TransitionFunc","fade"],["params","string","{}"],["toastStatus","boolean","true"]]}
+{
+  "name": "Toast",
+  "slots": ["icon"],
+  "events": ["on:close"],
+  "props": [
+    ["dismissable", "boolean", "true"],
+    ["color", "ColorVariant", "'primary'"],
+    ["position", "ToastPositionType", "'none'"],
+    ["divClass", "string", "'w-full max-w-xs p-4 text-gray-500 bg-white shadow dark:text-gray-400 dark:bg-gray-800 gap-3'"],
+    ["defaultIconClass", "string", "'w-8 h-8'"],
+    ["contentClass", "string", "'w-full text-sm font-normal'"],
+    ["align", "boolean", "true"],
+    ["transition", "TransitionFunc", "fade"],
+    ["params", "string", "{}"],
+    ["toastStatus", "boolean", "true"]
+  ]
+}

src/routes/docs/components/toast.md

@@ -345,6 +345,19 @@ Use the position property to position these toast components relative to the mai
   <Toast dismissable={false} position="bottom-right">Bottom right positioning.</Toast>
 </div>
 ```
+## Events
+
+You can use on:close to execute custom logic when the toast is closed. 
+
+```svelte example hideScript
+<script>
+  import { Toast } from 'flowbite-svelte';
+</script>
+
+<div class="relative h-56">
+  <Toast on:close={() => alert('Toast closed')}>Click the close button to see the event.</Toast>
+</div>
+```
 
 ## Component data