mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-05 18:23:48 +00:00
80 lines
1.9 KiB
Vue
80 lines
1.9 KiB
Vue
<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/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>
|