|
@ -1,5 +1,108 @@ |
|
|
<template> |
|
|
<template> |
|
|
<router-view /> |
|
|
<router-view /> |
|
|
|
|
|
|
|
|
|
|
|
<NotificationGroup group="alert"> |
|
|
|
|
|
<div |
|
|
|
|
|
class="fixed top-4 right-4 w-full max-w-sm flex flex-col items-start justify-end" |
|
|
|
|
|
> |
|
|
|
|
|
<Notification |
|
|
|
|
|
v-slot="{ notifications, close }" |
|
|
|
|
|
enter="transform ease-out duration-300 transition" |
|
|
|
|
|
enter-from="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-4" |
|
|
|
|
|
enter-to="translate-y-0 opacity-100 sm:translate-x-0" |
|
|
|
|
|
leave="transition ease-in duration-500" |
|
|
|
|
|
leave-from="opacity-100" |
|
|
|
|
|
leave-to="opacity-0" |
|
|
|
|
|
move="transition duration-500" |
|
|
|
|
|
move-delay="delay-300" |
|
|
|
|
|
> |
|
|
|
|
|
<div |
|
|
|
|
|
v-for="notification in notifications" |
|
|
|
|
|
:key="notification.id" |
|
|
|
|
|
class="w-full" |
|
|
|
|
|
role="alert" |
|
|
|
|
|
> |
|
|
|
|
|
<div |
|
|
|
|
|
v-if="notification.type === 'toast'" |
|
|
|
|
|
class="w-full max-w-sm mx-auto mb-3 overflow-hidden bg-slate-900/90 text-white rounded-lg shadow-md" |
|
|
|
|
|
> |
|
|
|
|
|
<div class="w-full px-4 py-3"> |
|
|
|
|
|
<p class="text-sm">{{ notification.text }}</p> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div |
|
|
|
|
|
v-if="notification.type === 'info'" |
|
|
|
|
|
class="flex w-full max-w-sm mx-auto mb-3 overflow-hidden bg-emerald-100 rounded-lg shadow-md" |
|
|
|
|
|
> |
|
|
|
|
|
<div |
|
|
|
|
|
class="flex items-center justify-center w-12 bg-emerald-600 text-emerald-100" |
|
|
|
|
|
> |
|
|
|
|
|
<fa icon="circle-info" class="fa-fw fa-xl"></fa> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="relative w-full pl-4 pr-8 py-2 text-emerald-900"> |
|
|
|
|
|
<span class="font-semibold">{{ notification.title }}</span> |
|
|
|
|
|
<p class="text-sm">{{ notification.text }}</p> |
|
|
|
|
|
|
|
|
|
|
|
<button |
|
|
|
|
|
@click="close(notification.id)" |
|
|
|
|
|
class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-emerald-200 text-emerald-600" |
|
|
|
|
|
> |
|
|
|
|
|
<fa icon="xmark" class="fa-fw"></fa> |
|
|
|
|
|
</button> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div |
|
|
|
|
|
v-if="notification.type === 'warning'" |
|
|
|
|
|
class="flex w-full max-w-sm mx-auto mb-3 overflow-hidden bg-amber-100 rounded-lg shadow-md" |
|
|
|
|
|
> |
|
|
|
|
|
<div |
|
|
|
|
|
class="flex items-center justify-center w-12 bg-amber-600 text-amber-100" |
|
|
|
|
|
> |
|
|
|
|
|
<fa icon="triangle-exclamation" class="fa-fw fa-xl"></fa> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="relative w-full pl-4 pr-8 py-2 text-amber-900"> |
|
|
|
|
|
<span class="font-semibold">{{ notification.title }}</span> |
|
|
|
|
|
<p class="text-sm">{{ notification.text }}</p> |
|
|
|
|
|
|
|
|
|
|
|
<button |
|
|
|
|
|
@click="close(notification.id)" |
|
|
|
|
|
class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-amber-200 text-amber-600" |
|
|
|
|
|
> |
|
|
|
|
|
<fa icon="xmark" class="fa-fw"></fa> |
|
|
|
|
|
</button> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div |
|
|
|
|
|
v-if="notification.type === 'danger'" |
|
|
|
|
|
class="flex w-full max-w-sm mx-auto mb-3 overflow-hidden bg-rose-100 rounded-lg shadow-md" |
|
|
|
|
|
> |
|
|
|
|
|
<div |
|
|
|
|
|
class="flex items-center justify-center w-12 bg-rose-600 text-rose-100" |
|
|
|
|
|
> |
|
|
|
|
|
<fa icon="triangle-exclamation" class="fa-fw fa-xl"></fa> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="relative w-full pl-4 pr-8 py-2 text-rose-900"> |
|
|
|
|
|
<span class="font-semibold">{{ notification.title }}</span> |
|
|
|
|
|
<p class="text-sm">{{ notification.text }}</p> |
|
|
|
|
|
|
|
|
|
|
|
<button |
|
|
|
|
|
@click="close(notification.id)" |
|
|
|
|
|
class="absolute top-2 right-2 px-0.5 py-0 rounded-full bg-rose-200 text-rose-600" |
|
|
|
|
|
> |
|
|
|
|
|
<fa icon="xmark" class="fa-fw"></fa> |
|
|
|
|
|
</button> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</Notification> |
|
|
|
|
|
</div> |
|
|
|
|
|
</NotificationGroup> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<style></style> |
|
|
<style></style> |
|
|