core/resources/views/components/notifications.blade.php at e26c288af5203f8c71af617e68a94ce9f50a6136 · rapidez/core · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<notifications v-cloak>
    <div class="fixed sm:max-w-sm sm:w-full top-6 right-6 left-6 sm:left-auto flex flex-col z-notifications" data-testid="notifications" slot-scope="{ notifications }">
        <notification v-if="notifications.length" v-for="(notification, index) in notifications" :notification="notification" :key="index +1">
            <transition
                enter-active-class="ease-in-out duration-500"
                enter-class="opacity-0"
                enter-to-class="opacity-100"
                leave-active-class="ease-in-out duration-500"
                leave-class="opacity-100"
                leave-to-class="opacity-0"
                slot-scope="{ message, type, show, close, classes, link }"
            >
                <component :is="link ? 'a' : 'div'" v-if="show" class="relative flex items-end justify-center pointer-events-none mb-3 sm:items-start sm:justify-end" :class="{ 'pointer-events-none': !link }">

                    <div class="max-w-sm w-full rounded-lg pointer-events-auto ring-1 ring-emphasis/10 overflow-hidden border" :class="classes">
                        <div class="p-4">
                            <div class="flex items-start">
                                <div class="flex-shrink-0">
                                    <x-heroicon-o-check-circle class="size-6" v-if="type == 'success'"/>
                                    <x-heroicon-o-exclamation-circle class="size-6" v-if="type == 'error'"/>
                                    <x-heroicon-o-information-circle class="size-6" v-if="type == 'info'"/>
                                    <x-heroicon-o-exclamation-triangle class="size-6" v-if="type == 'warning'"/>
                                </div>
                                <div class="ml-3 w-0 flex-1 pt-0.5">
                                    <p class="text-sm font-medium">
                                        @{{ message }}
                                    </p>
                                </div>
                                <div class="ml-4 flex-shrink-0 flex self-start">
                                    <button @click.prevent="close()" class="rounded-md inline-flex focus:outline-none focus:ring-none focus:ring-offset-none">
                                        <span class="sr-only">@lang('Close')</span>
                                        <x-heroicon-s-x-mark class="size-5"/>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </component>
            </transition>
        </notification>
    </div>
</notifications>