53 lines
1.3 KiB
Vue
53 lines
1.3 KiB
Vue
<template>
|
|
<div class="fixed top-4 right-4 z-50 flex flex-col gap-2 max-w-sm w-full pointer-events-none">
|
|
<transition-group name="toast">
|
|
<div
|
|
v-for="toast in toasts"
|
|
:key="toast.id"
|
|
class="pointer-events-auto rounded-md shadow-lg px-4 py-3 text-sm font-medium flex items-start gap-2"
|
|
:class="toastClasses[toast.type]"
|
|
>
|
|
<span class="flex-1">{{ toast.message }}</span>
|
|
<button
|
|
@click="dismiss(toast.id)"
|
|
class="opacity-60 hover:opacity-100 text-current ml-2 shrink-0"
|
|
>
|
|
×
|
|
</button>
|
|
</div>
|
|
</transition-group>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { toasts } from '../composables/useToast'
|
|
|
|
const toastClasses: Record<string, string> = {
|
|
success: 'bg-green-600 text-white',
|
|
error: 'bg-red-600 text-white',
|
|
warning: 'bg-yellow-500 text-white',
|
|
info: 'bg-blue-600 text-white',
|
|
}
|
|
|
|
function dismiss(id: number) {
|
|
toasts.value = toasts.value.filter(t => t.id !== id)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.toast-enter-active {
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
.toast-leave-active {
|
|
transition: all 0.2s ease-in;
|
|
}
|
|
.toast-enter-from {
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
}
|
|
.toast-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
}
|
|
</style>
|