mirror of
https://github.com/axllent/mailpit.git
synced 2025-03-21 21:47:19 +02:00
45 lines
1.1 KiB
Vue
45 lines
1.1 KiB
Vue
<script>
|
|
import { Toast } from 'bootstrap'
|
|
|
|
export default {
|
|
props: {
|
|
message: Object
|
|
},
|
|
|
|
mounted() {
|
|
let self = this
|
|
let el = document.getElementById('messageToast')
|
|
if (el) {
|
|
el.addEventListener('hidden.bs.toast', () => {
|
|
self.$emit("clearMessageToast")
|
|
})
|
|
|
|
let b = Toast.getOrCreateInstance(el)
|
|
b.show()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
|
<div id="messageToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<i class="bi bi-envelope-exclamation-fill me-2"></i>
|
|
<strong class="me-auto"><a :href="'#' + message.ID">New message</a></strong>
|
|
<small class="text-body-secondary">now</small>
|
|
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<div class="toast-body">
|
|
<div>
|
|
<a :href="'#' + message.ID" class="d-block text-truncate text-body-secondary">
|
|
<template v-if="message.Subject != ''">{{ message.Subject }}</template>
|
|
<template v-else>[ no subject ]</template>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|