vue components refactoring

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>