47 lines
985 B
Vue
47 lines
985 B
Vue
<script setup lang="ts">
|
|
import {useLabelEditorStore} from "~/store/labelEditorStore";
|
|
|
|
let store = useLabelEditorStore();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="notificationContainer">
|
|
<v-slide-y-reverse-transition
|
|
:group="true"
|
|
>
|
|
<div
|
|
v-for="notificationMessage in store.notificationQueue"
|
|
:key="notificationMessage.id"
|
|
>
|
|
<v-alert
|
|
v-if="notificationMessage.error"
|
|
:closable="true"
|
|
type="error"
|
|
>
|
|
{{ notificationMessage.message }}
|
|
</v-alert>
|
|
|
|
<v-alert
|
|
v-else
|
|
:closable="true"
|
|
type="success"
|
|
>
|
|
{{ notificationMessage.message }}
|
|
</v-alert>
|
|
</div>
|
|
|
|
</v-slide-y-reverse-transition>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.notificationContainer {
|
|
position: fixed;
|
|
bottom: 75px;
|
|
right: 10px;
|
|
display: grid;
|
|
grid-gap: 0.5em;
|
|
width: 300px;
|
|
z-index: 99;
|
|
}
|
|
</style> |