61 lines
1.4 KiB
Vue
61 lines
1.4 KiB
Vue
<template lang="pug">
|
|
teleport(:to="appContainer")
|
|
.absolute.top-0.p-2.right-0.overflow-hidden.z-50(class="w-1/4 xl:w-1/3 sm:w-1/2")
|
|
.pt-32(v-if="displayPadding")
|
|
.flex.gap-2.flex-col.relative
|
|
transition-group(name="list", @before-leave="displayPadding = true", @after-leave="displayPadding = false")
|
|
notification-item(
|
|
v-for="[id, notification] in notificationsList",
|
|
:id="id",
|
|
:key="id",
|
|
:title="notification.title",
|
|
:message="notification.message",
|
|
:type="notification.type"
|
|
:life-time="notification.lifeTime"
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import { notifications } from "@/components/Notifications/notificationContext";
|
|
import NotificationItem from "@/components/Notifications/NotificationItem";
|
|
|
|
export default {
|
|
name: "TheNotificationProvider",
|
|
components: { NotificationItem },
|
|
|
|
data() {
|
|
return {
|
|
displayPadding: false,
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
appContainer() {
|
|
return this.$.appContext.app._container;
|
|
},
|
|
notificationsList() {
|
|
return Object.entries(notifications);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.list-enter-active,
|
|
.list-leave-active {
|
|
transition: all 0.5s ease;
|
|
}
|
|
.list-leave-active {
|
|
position: absolute;
|
|
}
|
|
.list-move {
|
|
transition: all 0.4s ease;
|
|
}
|
|
.list-enter-from,
|
|
.list-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-30px);
|
|
pointer-events: none;
|
|
}
|
|
</style>
|