vue components refactoring

resources/js/components/Toaster/Toaster.vue

@@ -0,0 +1,45 @@
+<template>
+    <transition appear name="fade">
+        <div
+            class="relative w-full overflow-hidden rounded-xl bg-opacity-80 p-4 shadow-lg backdrop-blur-2xl"
+            :class="{
+                'bg-red-50 dark:bg-2x-dark-foreground': item.type === 'danger',
+                'bg-green-50 dark:bg-2x-dark-foreground': item.type === 'success',
+            }"
+        >
+            <!--Content-->
+            <div class="flex items-center justify-between">
+                <div class="flex items-start">
+					<check-icon v-if="item.type === 'success'" size="22" class="vue-feather dark:text-green-600 text-green-600" />
+					<x-icon v-if="item.type === 'danger'" size="22" class="vue-feather dark:text-red-600 text-red-600" />
+
+                    <p
+                        class="px-4 font-bold"
+                        :class="{
+                            'text-green-600': item.type === 'success',
+                            'text-red-600': item.type === 'danger',
+                        }"
+                    >
+                        {{ item.message }}
+                    </p>
+                </div>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script>
+import { CheckIcon, XIcon } from 'vue-feather-icons'
+
+export default {
+	name: 'Toaster',
+    components: {
+        CheckIcon,
+		XIcon,
+    },
+    props: [
+		'barColor',
+		'item',
+	],
+}
+</script>

resources/js/components/Toaster/ToasterNotifications.vue

@@ -0,0 +1,79 @@
+<template>
+    <div
+		v-if="toasters.length || notifications.length"
+		class="fixed bottom-4 right-4 left-4 z-50 sm:w-[360px] sm:left-auto lg:bottom-8 lg:right-8"
+	>
+        <ToasterWrapper
+			v-for="notification in notifications"
+			:key="notification.data.id"
+			class="mt-4 overflow-hidden rounded-xl dark:bg-2x-dark-foreground bg-white/80 backdrop-blur-2xl shadow-xl"
+			bar-color="bg-theme"
+		>
+            <Notification :notification="notification" class="z-10 !mb-0 !px-4 !pt-4 !pb-5" />
+        </ToasterWrapper>
+
+		<ToasterWrapper
+			v-for="(toaster, i) in toasters"
+			:key="i"
+			class="mt-4 overflow-hidden rounded-xl shadow-xl"
+			:bar-color="getToasterColor(toaster)"
+		>
+        	<Toaster :item="toaster" />
+        </ToasterWrapper>
+    </div>
+</template>
+
+<script>
+import Notification from '../Notifications/Components/Notification'
+import ToasterWrapper from './ToasterWrapper'
+import {events} from '../../bus'
+import Toaster from './Toaster'
+
+export default {
+	components: {
+		ToasterWrapper,
+		Notification,
+		Toaster,
+	},
+	data() {
+		return {
+			notifications: [],
+			toasters: [],
+		}
+	},
+	methods: {
+		getToasterColor(toaster) {
+			return {
+				danger: 'bg-red-400',
+				success: 'bg-green-400',
+			}[toaster.type]
+		}
+	},
+	created() {
+		events.$on('toaster', (toaster) => this.toasters.push(toaster))
+		events.$on('notification', (notification) => this.notifications.push(notification))
+
+		/*events.$emit('notification', {
+			data: {
+				type: 'file-request',
+				id: 'df954d23-f9d4-4677-85c8-abfd48aaa090',
+				attributes: {
+					action: {
+						type: 'route',
+						params: {
+							route: 'Files',
+							button: 'Show Files',
+							id: 'ae37b1d8-c147-489a-83ab-2a3c7cb86263',
+						},
+					},
+					created_at: '',
+					description: "Your file request for 'Multi Level Folder' folder was filled successfully.",
+					read_at: '',
+					title: 'File Request Filled',
+					category: 'file-request',
+				},
+			},
+		})*/
+	},
+}
+</script>

resources/js/components/Toaster/ToasterWrapper.vue

@@ -0,0 +1,64 @@
+<template>
+	<transition v-if="isActive" appear name="fade">
+		<div class="relative">
+			<div @click="isActive = false" class="absolute z-[20] right-0 top-0 cursor-pointer p-2">
+				<x-icon size="16" class="vue-feather text-black opacity-10 dark:text-white" />
+			</div>
+
+			<slot />
+
+			<!--Progress bar-->
+			<div class="absolute bottom-0 left-0 right-0 z-20">
+				<span class="bar-animation block h-1 w-0" :class="barColor"></span>
+			</div>
+		</div>
+	</transition>
+</template>
+
+<script>
+	import { XIcon } from 'vue-feather-icons'
+
+	export default {
+		name: 'Toast',
+		props: [
+			'barColor'
+		],
+		components: {
+			XIcon,
+		},
+		data() {
+			return {
+				isActive: 1,
+			}
+		},
+		created() {
+			setTimeout(() => (this.isActive = 0), 6000)
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+.bar-animation {
+	animation: progressbar 6s linear both;
+}
+
+@keyframes progressbar {
+	0% {
+		width: 0;
+	}
+	100% {
+		width: 100%;
+	}
+}
+
+.fade-enter-active,
+.fade-leave-active {
+	transition: 0.3s ease;
+}
+
+.fade-enter,
+.fade-leave-to {
+	opacity: 0;
+	transform: translateX(100%);
+}
+</style>