File size: 2,395 Bytes
8a1f4e2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | <script setup lang="ts">
import PluginNotifications from "@plugin/components/PluginNotifications.vue";
import useSnackbar from "@plugin/composables/snackbar.ts";
import {computed} from "vue";
const theme = 'dark-theme';
const direction = 'top';
const { state, closeNotification } = useSnackbar();
const snackItems = computed(() => state.messages);
const handleNotificationClick = (clickFunc: (()=> void) | null): void => {
if (clickFunc && typeof clickFunc === 'function') {
clickFunc();
}
}
</script>
<template>
<div class="snackbar-container" :class="direction">
<div
class="snackbar-item"
v-for="(snack, idx) in snackItems"
:key="idx"
:is-closed="snack.closed"
>
<PluginNotifications
:status="snack.type"
@close="closeNotification(snack.key)"
:solid="true"
is-from-snackbar
:theme="theme"
:show-button="snack.showButton"
:button-text="snack.buttonText"
@clicked="handleNotificationClick(snack.click)"
>
<template v-slot:text>
{{ snack.message }}
</template>
</PluginNotifications>
</div>
</div>
</template>
<style scoped lang="scss">
.snackbar-container {
position: fixed;
width: 100%;
margin: auto;
z-index: 111;
&.top {
top: 30px;
animation-name: slideFromTop;
animation-duration: .5s;
}
&.bottom {
bottom: 20px;
}
> .snackbar-item {
margin-inline: 12px;
:deep(.notifications-section) {
margin-inline: auto;
}
&[is-closed="true"] {
animation-name: closeNotification;
animation-duration: .5s;
}
& + .snackbar-item {
margin-top: 20px;
}
}
@keyframes closeNotification {
from {
transform: translateY(0px);
opacity: 1;
}
to {
transform: translateY(-150px);
opacity: 0;
}
}
@keyframes slideFromTop {
from {
transform: translateY(-150px);
opacity: 0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
}
</style>
|