90 lines
1.8 KiB
Vue
90 lines
1.8 KiB
Vue
<template>
|
|
<div
|
|
v-if="showAlert"
|
|
:class="['alert', type]"
|
|
@click="dismiss"
|
|
>
|
|
<img
|
|
v-if="icon"
|
|
:src="icon"
|
|
alt="Notification icon"
|
|
>
|
|
<div class="message-container">
|
|
<h4 class="heading">
|
|
{{ heading }}
|
|
</h4>
|
|
<p class="message">
|
|
{{ message }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, watch } from 'vue'
|
|
import { useAlert } from '@/composables/useAlert'
|
|
|
|
const alertIcons = {
|
|
error: require('@/assets/notification-error.svg'),
|
|
success: require('@/assets/notification-success.svg'),
|
|
info: require('@/assets/notification-info.svg'),
|
|
}
|
|
|
|
const { current, clear, scheduleAutoDismiss } = useAlert()
|
|
|
|
const showAlert = computed(() => !!current.value)
|
|
const heading = computed(() => current.value?.heading ?? '')
|
|
const message = computed(() => current.value?.message ?? '')
|
|
const type = computed(() => current.value?.type ?? '')
|
|
const icon = computed(() => (type.value && alertIcons[type.value] ? alertIcons[type.value] : null))
|
|
|
|
function dismiss() {
|
|
clear()
|
|
}
|
|
|
|
watch(
|
|
() => current.value?._ts,
|
|
(ts) => {
|
|
if (ts) scheduleAutoDismiss(5000)
|
|
}
|
|
)
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Display as a toast, in the bottom right corner */
|
|
/* Place the icon to the left for the full height, then have the heading and message stacked to the right */
|
|
|
|
.alert {
|
|
position: fixed;
|
|
bottom: 1em;
|
|
right: 1em;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 1em;
|
|
border-radius: 5px;
|
|
color: white;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
text-align: left;
|
|
}
|
|
|
|
.alert img {
|
|
width: 2em;
|
|
height: 2em;
|
|
margin-right: 1em;
|
|
|
|
/* Invert svg colors */
|
|
filter: invert(1);
|
|
}
|
|
|
|
.alert.error {
|
|
background-color: #f44336;
|
|
}
|
|
|
|
.alert.success {
|
|
background-color: #4caf50;
|
|
}
|
|
|
|
.alert.info {
|
|
background-color: #2196f3;
|
|
}
|
|
</style>
|