feat: alert system + useToast works

docs/components/toastProvider/examples/ToastProviderExample.vue

@@ -1,5 +1,13 @@
 <template>
-  <toast-provider>
+  <toast-provider :transition="transition">
+    <label for="countries" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Select transition</label>
+    <select v-model="transition" id="countries" class="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+      <option value="slide-left">Slide left</option>
+      <option value="slide-right">Slide right</option>
+      <option value="slide-top">Slide top</option>
+      <option value="slide-bottom">Slide bottom</option>
+      <option value="fade">Fade</option>
+    </select>
     <div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
       <toast-provider-example-child />
     </div>
@@ -8,4 +16,7 @@
 <script setup>
 import { ToastProvider } from '../../../../src/index'
 import ToastProviderExampleChild from './ToastProviderExampleChild.vue'
+import { ref } from 'vue'
+
+const transition = ref('slide-left')
 </script>

docs/components/toastProvider/examples/ToastProviderExampleChild.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="flex flex-col gap-2">
-    <input class="text-black" type="number" v-model="ms">
+    <label for="ms" class="block text-sm font-medium text-gray-900 dark:text-gray-400">Duration(ms)</label>
+    <input v-model.number="ms" type="number" id="ms" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="John" required>
     <div class="flex gap-2">
       <Button @click="() => add('success')" color="green">success</Button>
       <Button @click="() => add('warning')" color="yellow">warning</Button>
@@ -8,22 +9,21 @@
       <Button @click="() => add('update')" color="purple">update</Button>
     </div>
     <div class="flex">
-      <Button @click="remove" color="alternative">remove</Button>
+      <Button @click="remove" color="alternative">pop</Button>
     </div>
   </div>
 </template>
 <script setup>
-import { FLOWBITE_TOAST_INJECTION_KEY } from '../../../../src/components/Toast/components/ToastProvider/injection/config'
-import { inject, ref, shallowRef } from 'vue'
-import { Button } from '../../../../src/index'
+import { ref, shallowRef } from 'vue'
+import { Button, useToast } from '../../../../src/index'
 import UpdateToast from './UpdateToast.vue'
 
-const ms = ref('5000')
+const ms = ref(5000)
 
-const injected = inject(FLOWBITE_TOAST_INJECTION_KEY)
+const toast = useToast()
 
 const addUpdate = () => {
-  injected.add({
+  const id = toast.add({
     time: parseInt(ms.value) || 0,
     text: 'A new software version is available for download.',
     component: shallowRef(UpdateToast),
@@ -36,7 +36,7 @@ const addUpdate = () => {
 
 const add = (type) => {
   if(type === 'update') return addUpdate()
-  injected.add({
+  toast.add({
     type,
     time: parseInt(ms.value) || 0,
     text: `${type} alert! Hello world!`,
@@ -44,7 +44,7 @@ const add = (type) => {
 
 }
 const remove = () => {
-  injected.pop()
+  toast.pop()
 }
 
 </script>