feat: alerts provider

src/components/Toast/components/ToastProvider/ToastProvider.vue

@@ -22,7 +22,7 @@ export default defineComponent({
         id,
         ...toast,
       })
-      if(toast.time > 0)
+      if (toast.time > 0)
         runRemoveTimeout(id, toast.time)
     }
 
@@ -32,7 +32,7 @@ export default defineComponent({
     }
 
     const popToast = () => {
-      if(toasts.value.length === 0) return
+      if (toasts.value.length === 0) return
       toasts.value.pop()
     }
 
@@ -63,12 +63,18 @@ export default defineComponent({
           },
           {
             default: () => toasts.map(_toast => // rendering every toast
-                h(Toast as any, {
-                  closable: true,
-                  type: _toast.type,
-                  key: _toast.id,
-                  onClose: () => removeToast(_toast.id),
-                }, () => _toast.text),
+                _toast.component
+                    ? h(_toast.component, {
+                      key: _toast.id,
+                      onClose: () => removeToast(_toast.id),
+                      ...(_toast.componentProps ? _toast.componentProps : {}),
+                    }, () => _toast.text)
+                    : h(Toast as any, {
+                      closable: true,
+                      type: _toast.type,
+                      key: _toast.id,
+                      onClose: () => removeToast(_toast.id),
+                    }, () => _toast.text),
             ),
           },
       ),

src/components/Toast/components/ToastProvider/types.ts

@@ -1,9 +1,12 @@
 import type { ToastType } from '@/components/Toast/types'
+import type { DefineComponent } from 'vue'
 
 export type ToastItem = {
     time: number // ms
     type: ToastType
     text: string
+    component?: DefineComponent
+    componentProps?: Record<string, unknown>
 }
 
 export type ToastItemWithId = ToastItem & {

src/components/utils/FlowbiteThemable/FlowbiteThemable.vue

@@ -1,5 +1,7 @@
 <template>
-  <slot />
+  <div>
+    <slot />
+  </div>
 </template>
 <script lang="ts" setup>
 import type { PropType } from 'vue'