complete story 9.11 with qa tests

2026-01-03 02:57:43 +02:00
parent c96f31c702
commit 5a19903e30
8 changed files with 789 additions and 24 deletions
@@ -0,0 +1,87 @@
+@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-navy': toast.type === 'warning',
+                'bg-navy 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>