Nikolay Tatarinov
adfdfd01c4
- Modified docker-compose.dev.yml to conditionally run npm install based on the presence of package-lock.json. - Upgraded Nuxt version in package-lock.json from 3.21.1 to 4.3.1 for enhanced features. - Enhanced ConfirmModal component with aria-modal attribute for better accessibility. - Updated MapErrorBoundary component's error message for clarity. - Added role and aria-label attributes to MapView and MapSearch components for improved screen reader support. - Refactored various components to manage focus behavior on modal close, enhancing user experience. - Improved ToastContainer styling for better responsiveness and visibility. - Updated layout components to include skip navigation links for improved accessibility.
55 lines
1.6 KiB
Vue
55 lines
1.6 KiB
Vue
<template>
|
||
<Teleport to="body">
|
||
<div
|
||
class="fixed bottom-4 right-4 z-[9998] flex flex-col gap-2 w-full max-w-[calc(100vw-2rem)] sm:max-w-sm pointer-events-none"
|
||
aria-live="polite"
|
||
aria-label="Notifications"
|
||
>
|
||
<TransitionGroup name="toast">
|
||
<div
|
||
v-for="t in toasts"
|
||
:key="t.id"
|
||
class="pointer-events-auto rounded-lg px-4 py-3 shadow-lg border backdrop-blur-sm flex items-center gap-2 min-w-0"
|
||
:class="
|
||
t.type === 'error'
|
||
? 'bg-error/95 text-error-content border-error/30'
|
||
: t.type === 'info'
|
||
? 'bg-info/95 text-info-content border-info/30'
|
||
: 'bg-success/95 text-success-content border-success/30'
|
||
"
|
||
role="alert"
|
||
>
|
||
<span class="flex-1 text-sm font-medium truncate">{{ t.text }}</span>
|
||
<button
|
||
type="button"
|
||
class="btn btn-ghost btn-xs btn-circle shrink-0 opacity-70 hover:opacity-100"
|
||
aria-label="Dismiss"
|
||
@click="dismiss(t.id)"
|
||
>
|
||
<span class="text-lg leading-none font-light" aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
</TransitionGroup>
|
||
</div>
|
||
</Teleport>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const { toasts, dismiss } = useToast()
|
||
</script>
|
||
|
||
<style scoped>
|
||
.toast-enter-active,
|
||
.toast-leave-active {
|
||
transition: all 0.2s ease;
|
||
}
|
||
.toast-enter-from,
|
||
.toast-leave-to {
|
||
opacity: 0;
|
||
transform: translateX(1rem);
|
||
}
|
||
.toast-move {
|
||
transition: transform 0.2s ease;
|
||
}
|
||
</style>
|