31 lines
1.1 KiB
Vue
31 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import type { Alert } from '@/types';
|
|
import { computed, ref, onBeforeMount } from 'vue';
|
|
import { CircleX, CircleAlert, CircleCheck, Info } from '@lucide/vue';
|
|
|
|
const props = defineProps<{ alert: Alert }>();
|
|
const dismissed = ref<boolean>(false);
|
|
const refreshKey = ref<number>(1);
|
|
const visible = computed<boolean>(() => refreshKey.value > 0 && !dismissed.value && (new Date().getTime() - props.alert.created.getTime()) <= props.alert.seconds * 1000);
|
|
|
|
function onDismiss() {
|
|
dismissed.value = true;
|
|
}
|
|
|
|
onBeforeMount(() => {
|
|
setInterval(() => {
|
|
refreshKey.value++;
|
|
}, 500);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="visible" class="alert alert-info alert-soft cursor-pointer" :class="`alert-${alert.type}`" @click="onDismiss">
|
|
<CircleX v-if="alert.type === 'error'" /> <!-- alert-error -->
|
|
<CircleAlert v-if="alert.type === 'warning'" /> <!-- alert-warning -->
|
|
<CircleCheck v-if="alert.type === 'success'" /> <!-- alert-success -->
|
|
<Info v-if="alert.type === 'info'" /> <!-- alert-info -->
|
|
<span>{{ alert.message }}</span>
|
|
</div>
|
|
</template>
|