974a4a0781
Merges the full git history of Inventory_frontend into the monorepo under frontend/. Removes the submodule in favor of a unified repo. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
115 lines
2.9 KiB
Vue
115 lines
2.9 KiB
Vue
<template>
|
|
<div
|
|
class="toast-container pointer-events-none fixed bottom-4 right-4 z-50 flex flex-col gap-2 items-end"
|
|
>
|
|
<TransitionGroup name="toast">
|
|
<div
|
|
v-for="toast in toasts"
|
|
:key="toast.id"
|
|
class="toast-item"
|
|
:class="[
|
|
'transform transition-all duration-300 ease-in-out',
|
|
toast.visible ? 'translate-y-0 opacity-100 pointer-events-auto' : 'translate-y-4 opacity-0 pointer-events-none'
|
|
]"
|
|
>
|
|
<div
|
|
class="alert toast-card shadow-md px-3 py-2 text-sm"
|
|
:class="getToastClasses(toast.type)"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<!-- Icon -->
|
|
<div class="flex-shrink-0">
|
|
<IconLucideCheck
|
|
v-if="toast.type === 'success'"
|
|
class="w-4 h-4"
|
|
aria-hidden="true"
|
|
/>
|
|
<IconLucideCircleX
|
|
v-else-if="toast.type === 'error'"
|
|
class="w-4 h-4"
|
|
aria-hidden="true"
|
|
/>
|
|
<IconLucideAlertTriangle
|
|
v-else-if="toast.type === 'warning'"
|
|
class="w-4 h-4"
|
|
aria-hidden="true"
|
|
/>
|
|
<IconLucideInfo
|
|
v-else
|
|
class="w-4 h-4"
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Message -->
|
|
<div class="flex-1">
|
|
<span class="font-medium">{{ toast.message }}</span>
|
|
</div>
|
|
|
|
<!-- Close button -->
|
|
<button
|
|
class="btn btn-ghost btn-2xs"
|
|
@click="removeToast(toast.id)"
|
|
>
|
|
<IconLucideX class="w-3 h-3" aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TransitionGroup>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useToast } from '~/composables/useToast'
|
|
import IconLucideCheck from '~icons/lucide/check'
|
|
import IconLucideX from '~icons/lucide/x'
|
|
import IconLucideCircleX from '~icons/lucide/circle-x'
|
|
import IconLucideAlertTriangle from '~icons/lucide/alert-triangle'
|
|
import IconLucideInfo from '~icons/lucide/info'
|
|
|
|
const { toasts, removeToast } = useToast()
|
|
|
|
const getToastClasses = (type) => {
|
|
switch (type) {
|
|
case 'success':
|
|
return 'alert-success text-success-content'
|
|
case 'error':
|
|
return 'alert-error text-error-content'
|
|
case 'warning':
|
|
return 'alert-warning text-warning-content'
|
|
case 'info':
|
|
return 'alert-info text-info-content'
|
|
default:
|
|
return 'alert-info'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.toast-enter-active,
|
|
.toast-leave-active {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.toast-enter-from {
|
|
opacity: 0;
|
|
transform: translateY(16px);
|
|
}
|
|
|
|
.toast-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(16px);
|
|
}
|
|
|
|
.toast-move {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.toast-card {
|
|
max-width: 20rem;
|
|
pointer-events: auto;
|
|
border-radius: 0.75rem;
|
|
}
|
|
</style>
|