mirror of
https://github.com/rommapp/romm.git
synced 2026-02-18 23:42:07 +01:00
53 lines
1.4 KiB
Vue
53 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import storeNotifications from "@/stores/notifications";
|
|
import type { Events, SnackbarStatus } from "@/types/emitter";
|
|
import type { Emitter } from "mitt";
|
|
import { inject, ref } from "vue";
|
|
import { useDisplay } from "vuetify";
|
|
|
|
// Props
|
|
const show = ref(false);
|
|
const { xs } = useDisplay();
|
|
const snackbarStatus = ref<SnackbarStatus>({ msg: "" });
|
|
const notificationStore = storeNotifications();
|
|
|
|
// Event listeners bus
|
|
const emitter = inject<Emitter<Events>>("emitter");
|
|
emitter?.on("snackbarShow", (snackbar: SnackbarStatus) => {
|
|
show.value = true;
|
|
snackbarStatus.value = snackbar;
|
|
snackbarStatus.value.id = notificationStore.notifications.length + 1;
|
|
});
|
|
|
|
function closeDialog() {
|
|
notificationStore.remove(snackbarStatus.value.id);
|
|
show.value = false;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<v-snackbar
|
|
transition="scroll-y-transition"
|
|
v-model="show"
|
|
:timeout="snackbarStatus.timeout || 3000"
|
|
@timeout="closeDialog"
|
|
absolute
|
|
:location="xs ? 'top' : 'top right'"
|
|
color="primary-darken"
|
|
>
|
|
<template #text>
|
|
<v-row class="d-flex align-center px-2">
|
|
<v-icon :icon="snackbarStatus.icon" class="mx-2" />
|
|
<span class="text-subtitle-1 font-weight-bold">
|
|
{{ snackbarStatus.msg }}
|
|
</span>
|
|
</v-row>
|
|
</template>
|
|
<template #actions>
|
|
<v-btn variant="text" @click="closeDialog">
|
|
<v-icon icon="mdi-close" />
|
|
</v-btn>
|
|
</template>
|
|
</v-snackbar>
|
|
</template>
|