88 lines
3.7 KiB
PHP
88 lines
3.7 KiB
PHP
@props([
|
|
'position' => 'top-right',
|
|
])
|
|
|
|
@php
|
|
$positions = [
|
|
'top-right' => 'top-4 end-4',
|
|
'top-left' => 'top-4 start-4',
|
|
'bottom-right' => 'bottom-4 end-4',
|
|
'bottom-left' => 'bottom-4 start-4',
|
|
];
|
|
$positionClass = $positions[$position] ?? $positions['top-right'];
|
|
@endphp
|
|
|
|
<div
|
|
x-data="{
|
|
toasts: [],
|
|
add(toast) {
|
|
const id = Date.now();
|
|
this.toasts.push({ id, ...toast });
|
|
setTimeout(() => this.remove(id), toast.duration || 5000);
|
|
},
|
|
remove(id) {
|
|
this.toasts = this.toasts.filter(t => t.id !== id);
|
|
}
|
|
}"
|
|
x-on:toast.window="add($event.detail)"
|
|
{{ $attributes->merge(['class' => 'fixed z-50 ' . $positionClass]) }}
|
|
aria-live="polite"
|
|
aria-atomic="true"
|
|
>
|
|
<template x-for="toast in toasts" :key="toast.id">
|
|
<div
|
|
x-show="true"
|
|
x-transition:enter="toast-enter"
|
|
x-transition:enter-start="toast-enter"
|
|
x-transition:enter-end="toast-enter-active"
|
|
x-transition:leave="toast-enter-active"
|
|
x-transition:leave-start="toast-enter-active"
|
|
x-transition:leave-end="toast-enter"
|
|
class="mb-3 flex items-center gap-3 rounded-lg p-4 shadow-lg min-w-[300px] max-w-md"
|
|
:class="{
|
|
'bg-success text-white': toast.type === 'success',
|
|
'bg-danger text-white': toast.type === 'error',
|
|
'bg-warning text-text': toast.type === 'warning',
|
|
'bg-primary text-white': toast.type === 'info' || !toast.type
|
|
}"
|
|
role="alert"
|
|
>
|
|
{{-- Icon based on type --}}
|
|
<template x-if="toast.type === 'success'">
|
|
<svg class="h-5 w-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</template>
|
|
<template x-if="toast.type === 'error'">
|
|
<svg class="h-5 w-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</template>
|
|
<template x-if="toast.type === 'warning'">
|
|
<svg class="h-5 w-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
</template>
|
|
<template x-if="toast.type === 'info' || !toast.type">
|
|
<svg class="h-5 w-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</template>
|
|
|
|
{{-- Message --}}
|
|
<span x-text="toast.message" class="flex-1"></span>
|
|
|
|
{{-- Close button --}}
|
|
<button
|
|
x-on:click="remove(toast.id)"
|
|
class="flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity"
|
|
:aria-label="'{{ __('common.close') }}'"
|
|
>
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|