42 lines
1.2 KiB
Vue
42 lines
1.2 KiB
Vue
<template>
|
|
|
|
<div class="toast-container position-absolute top-0 start-50 mt-3 translate-middle-x">
|
|
<transition-group name="fade">
|
|
<div v-for="(note, index) in notifications" :key="index" data-bs-delay="2000" data-bs-autohide="true" class="show fade toast border-0 text-white" :class="toastClasses(note.type)" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="d-flex">
|
|
<div class="toast-body">
|
|
{{note.text}}
|
|
</div>
|
|
<button type="button" @click="destroyAlert(index)" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
|
|
</div>
|
|
</div>
|
|
</transition-group>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useNotifications } from '@/stores/notifications'
|
|
import { storeToRefs } from 'pinia'
|
|
|
|
const notes = useNotifications()
|
|
const { notifications } = storeToRefs(notes)
|
|
|
|
function destroyAlert(index : number) {
|
|
notes.removeAlert(index)
|
|
}
|
|
|
|
function toastClasses(type : string){
|
|
return {
|
|
'bg-danger': type === 'danger',
|
|
'bg-success' : type === 'success',
|
|
'bg-warning' : type === 'warning'
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|