add toast loaders

resources/js/components/SMToast.vue

@@ -16,7 +16,18 @@
             <h5 class="mt-0 mb-2" v-if="title && title.length > 0">
                 {{ title }}
             </h5>
-            <p class="text-xs">{{ content }}</p>
+            <div class="flex">
+                <svg
+                    v-if="props.loader"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    class="spin">
+                    <path d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
+                </svg>
+                <p class="text-xs">
+                    {{ content }}
+                </p>
+            </div>
         </div>
     </div>
 </template>
@@ -44,6 +55,11 @@ const props = defineProps({
         type: String,
         required: true,
     },
+    loader: {
+        type: Boolean,
+        required: false,
+        default: false,
+    },
 });
 
 const toastStore = useToastStore();
@@ -89,21 +105,23 @@ const removeToast = () => {
     }, 500);
 };
 
-onMounted(() => {
-    window.setTimeout(() => {
-        styles.value.opacity = 1;
-        styles.value.marginTop = "0";
+if (!props.loader) {
+    onMounted(() => {
+        window.setTimeout(() => {
+            styles.value.opacity = 1;
+            styles.value.marginTop = "0";
 
-        if (toast.value != null) {
-            const styles = window.getComputedStyle(toast.value);
-            const marginBottom = parseFloat(styles.marginBottom);
-            height = toast.value.offsetHeight + marginBottom || 0;
-        }
+            if (toast.value != null) {
+                const styles = window.getComputedStyle(toast.value);
+                const marginBottom = parseFloat(styles.marginBottom);
+                height = toast.value.offsetHeight + marginBottom || 0;
+            }
 
-        hideTimeoutID = window.setTimeout(() => {
-            hideTimeoutID = null;
-            removeToast();
-        }, 8000);
-    }, 200);
-});
+            hideTimeoutID = window.setTimeout(() => {
+                hideTimeoutID = null;
+                removeToast();
+            }, 8000);
+        }, 200);
+    });
+}
 </script>

resources/js/main.js

@@ -4,7 +4,6 @@ import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
 import { createApp } from "vue";
 import App from "./views/App.vue";
 import "uno.css";
-import "../css/md-editor.scss";
 
 const pinia = createPinia();
 pinia.use(piniaPluginPersistedstate);

resources/js/store/ToastStore.ts

@@ -5,6 +5,7 @@ export interface ToastOptions {
     title?: string;
     content: string;
     type?: string;
+    loader?: boolean;
 }
 
 export interface ToastItem {
@@ -12,6 +13,7 @@ export interface ToastItem {
     title: string;
     content: string;
     type: string;
+    loader: boolean;
 }
 
 export interface ToastStore {
@@ -23,6 +25,7 @@ export const defaultToastItem: ToastItem = {
     title: "",
     content: "",
     type: "primary",
+    loader: false,
 };
 
 export const useToastStore = defineStore({
@@ -32,8 +35,12 @@ export const useToastStore = defineStore({
     }),
 
     actions: {
-        addToast(toast: ToastOptions) {
-            if (!toast.id || toast.id == 0) {
+        addToast(toast: ToastOptions): number {
+            while (
+                !toast.id ||
+                toast.id == 0 ||
+                this.toasts.find((item: ToastItem) => item.id === toast.id)
+            ) {
                 toast.id =
                     Math.floor(Math.random() * Number.MAX_SAFE_INTEGER) + 1;
             }
@@ -42,9 +49,10 @@ export const useToastStore = defineStore({
             toast.type = toast.type || defaultToastItem.type;
 
             this.toasts.push(toast);
+            return toast.id;
         },
 
-        clearToast(id: number) {
+        clearToast(id: number): void {
             this.toasts = this.toasts.filter(
                 (item: ToastItem) => item.id !== id
             );

resources/views/app.blade.php

@@ -37,6 +37,8 @@
 		input { font-family: Poppins, Roboto, "Open Sans", ui-sans-serif, system-ui, sans-serif; }
 		.scrollbar-width-none { scrollbar-width: none; }
 		.scrollbar-width-none::-webkit-scrollbar { display: none; }
+		.spin{animation:rotate 1s infinite linear}
+		@keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
     </style>
 </head>
 <body>