feat: toast-provider and useToast initial

docs/.vitepress/config.ts

@@ -58,6 +58,7 @@ function getComponents() {
 function getUtils() {
   return [
     { text: 'Flowbite Themable', link: '/components/flowbiteThemable/flowbiteThemable.md' },
+    { text: 'ToastProvider', link: '/components/toastProvider/toastProvider.md' },
   ]
 }
 

docs/.vitepress/theme/index.js

@@ -4,4 +4,12 @@ import DefaultTheme from 'vitepress/theme'
 
 import './clear.css'
 
-export default DefaultTheme
+import { TransitionGroup } from "vue";
+
+export default {
+    ...DefaultTheme,
+    enhanceApp({ app, router, siteData }) {
+        // strange thing, but there is no global transition-group component inside vitepress app
+        app.component('TransitionGroup', TransitionGroup)
+    }
+}

docs/components/toast/toast.md

@@ -4,6 +4,7 @@ import ToastClosableExample from './examples/ToastClosableExample.vue';
 import ToastIconExample from './examples/ToastIconExample.vue';
 import ToastDivideExample from './examples/ToastDivideExample.vue';
 import ToastMessageExample from './examples/ToastMessageExample.vue';
+import ToastProviderExample from './examples/ToastProviderExample.vue';
 import ToastInteractiveExample from './examples/ToastInteractiveExample.vue'
 </script>
 # Toast
@@ -176,3 +177,6 @@ import { Toast } from 'flowbite-vue'
 ```
 
 <ToastIconExample />
+
+---
+<ToastProviderExample />

docs/components/toastProvider/examples/ToastProviderExample.vue

@@ -0,0 +1,11 @@
+<template>
+  <toast-provider>
+    <div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
+      <toast-provider-example-child />
+    </div>
+  </toast-provider>
+</template>
+<script setup>
+import { ToastProvider } from '../../../../src/index'
+import ToastProviderExampleChild from './ToastProviderExampleChild.vue'
+</script>

docs/components/toastProvider/examples/ToastProviderExampleChild.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <input class="text-black" type="number" v-model="ms">
+    <div class="flex gap-2">
+      <Button @click="() => add('success')" color="green">success</Button>
+      <Button @click="() => add('warning')" color="yellow">warning</Button>
+      <Button @click="() => add('danger')" color="red">danger</Button>
+    </div>
+    <div class="flex">
+      <Button @click="remove" color="alternative">remove</Button>
+    </div>
+  </div>
+</template>
+<script setup>
+import { FLOWBITE_TOAST_INJECTION_KEY } from '../../../../src/components/Toast/components/ToastProvider/injection/config'
+import { inject, ref } from 'vue'
+import { Button } from '../../../../src/index'
+
+const ms = ref('5000')
+
+const injected = inject(FLOWBITE_TOAST_INJECTION_KEY)
+const add = (type) => {
+  injected.add({
+    time: parseInt(ms.value) || 0,
+    type: type,
+    text: `${type} alert! Hello world!`,
+  })
+}
+const remove = () => {
+  injected.pop()
+}
+
+</script>

docs/components/toastProvider/toastProvider.md

@@ -0,0 +1,6 @@
+<script setup>
+import ToastProviderExample from './examples/ToastProviderExample.vue';
+</script>
+# Toast provider
+
+<ToastProviderExample />