josedario87
81330de97e
- Agrega @pinia/nuxt, idb y store central (stores/music.ts) - Cacheo manual desde menú contextual y borrado (TrackContextMenu) - Ícono verde para canciones cacheadas, sin auto-cache al reproducir - Toasts de feedback (stores/toast.ts, ToastContainer) - Fallback offline de listado a IndexedDB; fix MUSIC_DIR absoluto en preview/prod - Ajustes PWA: navigateFallback '/', devOptions, workbox condicional - Estilos y animación del context menu (tema light/dark, blur fuerte) - Correcciones de sintaxis y posicionamiento exacto al cursor
83 lines
1.6 KiB
Vue
83 lines
1.6 KiB
Vue
<template>
|
|
<div class="toast-container">
|
|
<transition-group name="toast" tag="div">
|
|
<div
|
|
v-for="t in toasts"
|
|
:key="t.id"
|
|
class="toast glass"
|
|
:class="t.type"
|
|
@click="dismiss(t.id)"
|
|
>
|
|
<div class="dot" />
|
|
<span class="msg">{{ t.message }}</span>
|
|
</div>
|
|
</transition-group>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { storeToRefs } from 'pinia'
|
|
import { useToastStore } from '~/stores/toast'
|
|
|
|
const toast = useToastStore()
|
|
const { toasts } = storeToRefs(toast)
|
|
const dismiss = (id: number) => toast.remove(id)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.toast-container {
|
|
position: fixed;
|
|
top: 16px;
|
|
right: 16px;
|
|
z-index: 1100;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.toast-enter-active, .toast-leave-active {
|
|
transition: all 250ms ease;
|
|
}
|
|
.toast-enter-from, .toast-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-8px);
|
|
}
|
|
|
|
.toast {
|
|
pointer-events: auto;
|
|
min-width: 240px;
|
|
max-width: 360px;
|
|
padding: 12px 14px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background: rgba(17, 24, 39, 0.6);
|
|
color: #fff;
|
|
border: 1px solid rgba(255,255,255,0.12);
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.glass { /* keep naming consistent with app */
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.toast .dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 9999px;
|
|
background: var(--accent-primary);
|
|
}
|
|
|
|
.toast.success .dot { background: #22c55e; }
|
|
.toast.error .dot { background: #ef4444; }
|
|
.toast.info .dot { background: #60a5fa; }
|
|
|
|
.msg {
|
|
line-height: 1.2;
|
|
}
|
|
</style>
|