port-nimara-client-portal/components/GlobalToast.vue

32 lines
879 B
Vue

<template>
<v-snackbar
v-model="toast.show"
:color="toast.color"
:timeout="toast.timeout"
location="top"
variant="flat"
>
<div class="d-flex align-center">
<v-icon v-if="toast.color === 'success'" class="mr-2">mdi-check-circle</v-icon>
<v-icon v-else-if="toast.color === 'error'" class="mr-2">mdi-alert-circle</v-icon>
<v-icon v-else-if="toast.color === 'warning'" class="mr-2">mdi-alert</v-icon>
<v-icon v-else-if="toast.color === 'info'" class="mr-2">mdi-information</v-icon>
<span>{{ toast.message }}</span>
</div>
<template v-slot:actions>
<v-btn
variant="text"
@click="toast.show = false"
>
Close
</v-btn>
</template>
</v-snackbar>
</template>
<script setup lang="ts">
import { useToast } from '~/composables/useToast'
const { toast } = useToast()
</script>