Version 2.1.0 - Update UI
This commit is contained in:
158 files changed
+24215
-7686
No files matched your search
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<!-- Région toujours présente : les lecteurs d'écran n'annoncent que ce qui change dans une région déjà connue -->
|
||||
<section class="toasts" aria-label="Notifications des playlists">
|
||||
<div class="sr-only" aria-live="polite" aria-atomic="true">{{ politeText }}</div>
|
||||
<div class="sr-only" aria-live="assertive" aria-atomic="true">{{ alertText }}</div>
|
||||
<TransitionGroup name="toast" tag="ul" class="toasts__list">
|
||||
<li
|
||||
v-for="toast in playlistStore.toasts"
|
||||
:key="toast.id"
|
||||
:class="['toast', `toast--${toast.tone || 'info'}`]"
|
||||
>
|
||||
<Icon class="toast__icon" :icon="ICONS[toast.tone] || ICONS.info" aria-hidden="true" />
|
||||
<p class="toast__message">{{ toast.message }}</p>
|
||||
<button
|
||||
v-if="toast.action && typeof toast.action.run === 'function'"
|
||||
type="button"
|
||||
class="toast__action"
|
||||
@click="runAction(toast)"
|
||||
>{{ toast.action.label }}</button>
|
||||
<IconAction
|
||||
class="toast__close"
|
||||
icon="fa-solid fa-xmark"
|
||||
label="Fermer la notification"
|
||||
@click="playlistStore.dismissToast(toast.id)"
|
||||
/>
|
||||
</li>
|
||||
</TransitionGroup>
|
||||
</section>
|
||||
</Teleport>
|
||||
</template>
|
||||
<script setup>
|
||||
/**
|
||||
* Notifications courtes du store des playlists (playlistStore.notify).
|
||||
* Annonce vocale séparée de l'affichage : « polite » pour les succès / infos, « assertive » pour les erreurs.
|
||||
*/
|
||||
import { nextTick, ref, watch } from 'vue';
|
||||
import IconAction from '@/components/UI/IconAction.vue';
|
||||
import { usePlaylistStore } from '@/stores/playlistStore';
|
||||
|
||||
const playlistStore = usePlaylistStore();
|
||||
|
||||
const ICONS = {
|
||||
success: 'fa-solid fa-circle-check',
|
||||
error: 'fa-solid fa-circle-exclamation',
|
||||
info: 'fa-solid fa-circle-info'
|
||||
};
|
||||
|
||||
const politeText = ref('');
|
||||
const alertText = ref('');
|
||||
let lastAnnounced = 0;
|
||||
|
||||
// Seules les nouvelles notifications sont lues (pas celles qui restent après une fermeture)
|
||||
watch(() => playlistStore.toasts, (list) => {
|
||||
let polite = null;
|
||||
let alert = null;
|
||||
for (const toast of list) {
|
||||
if (toast.id <= lastAnnounced) continue;
|
||||
lastAnnounced = toast.id;
|
||||
if (toast.tone === 'error') alert = toast.message;
|
||||
else polite = toast.message;
|
||||
}
|
||||
// Vidé puis rempli : un message identique au précédent est relu
|
||||
if (polite !== null) {
|
||||
politeText.value = '';
|
||||
nextTick(() => { politeText.value = polite; });
|
||||
}
|
||||
if (alert !== null) {
|
||||
alertText.value = '';
|
||||
nextTick(() => { alertText.value = alert; });
|
||||
}
|
||||
});
|
||||
|
||||
function runAction(toast) {
|
||||
playlistStore.dismissToast(toast.id);
|
||||
try {
|
||||
toast.action.run();
|
||||
} catch (error) {
|
||||
console.error('[PlaylistToasts] Action en échec', error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.toasts {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
z-index: 4000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toasts__list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toast {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: max-content;
|
||||
max-width: min(420px, calc(100vw - 30px));
|
||||
box-sizing: border-box;
|
||||
padding: 10px 8px 10px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-left: 4px solid var(--toast-color);
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--primary);
|
||||
color: var(--text);
|
||||
box-shadow: var(--shadow-lg);
|
||||
pointer-events: auto;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.toast--success { --toast-color: var(--text-success); }
|
||||
.toast--error { --toast-color: var(--text-error); }
|
||||
.toast--info { --toast-color: var(--text-info); }
|
||||
|
||||
.toast__icon {
|
||||
flex-shrink: 0;
|
||||
color: var(--toast-color);
|
||||
}
|
||||
|
||||
.toast__message {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.toast__action {
|
||||
flex-shrink: 0;
|
||||
min-height: 30px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-pill);
|
||||
background-color: transparent;
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color var(--dur-fast) ease;
|
||||
}
|
||||
|
||||
.toast__action:hover {
|
||||
background-color: color-mix(in srgb, var(--text) 9%, transparent);
|
||||
}
|
||||
|
||||
.toast__action:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
|
||||
.toast__close {
|
||||
flex-shrink: 0;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.toast-enter-active,
|
||||
.toast-leave-active {
|
||||
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
|
||||
}
|
||||
|
||||
.toast-enter-from,
|
||||
.toast-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
|
||||
.toast-leave-active {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.toast-move {
|
||||
transition: transform var(--dur) var(--ease);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px),
|
||||
screen and (max-height: 607px) {
|
||||
.toasts {
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
}
|
||||
|
||||
.toasts__list {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.toast {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user