Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 43 44 45 46 47 48 49 50 51 52 53 54 | 6x 1x 6x 17x 1x 1x 1x 1x 6x 6x 6x | <template>
<Teleport to="body">
<div class="fixed bottom-24 left-0 right-0 z-50 flex flex-col items-center gap-2 pointer-events-none px-4">
<TransitionGroup name="toast">
<div
v-for="n in store.notifications"
:key="n.id"
class="pointer-events-auto w-full max-w-sm bg-ctp-surface0 border border-ctp-teal/30 rounded-2xl px-4 py-3 shadow-xl flex items-center gap-3"
>
<!-- Bell icon -->
<div class="shrink-0 w-8 h-8 rounded-xl bg-ctp-teal/15 flex items-center justify-center">
<svg class="w-4 h-4 text-ctp-teal" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</div>
<!-- Text -->
<div class="flex-1 min-w-0">
<p class="text-xs font-semibold text-ctp-teal truncate">{{ n.listName }}</p>
<p class="text-xs text-ctp-subtext1 leading-tight">{{ n.message }}</p>
</div>
<!-- Check button -->
<button
@click="store.dismiss(n.id)"
class="shrink-0 w-8 h-8 rounded-xl bg-ctp-teal/15 hover:bg-ctp-teal/30 flex items-center justify-center text-ctp-teal transition-colors"
aria-label="Bestätigen"
>
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
</button>
</div>
</TransitionGroup>
</div>
</Teleport>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useNotificationsStore } from '../../stores/notifications'
const store = useNotificationsStore()
onMounted(() => {
store.dismissAll()
})
</script>
<style scoped>
.toast-enter-active { transition: all 0.25s ease; }
.toast-leave-active { transition: all 0.2s ease; }
.toast-enter-from { opacity: 0; transform: translateY(12px); }
.toast-leave-to { opacity: 0; transform: translateY(12px); }
</style>
|