File size: 978 Bytes
a03b3ba |
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 |
<script lang="ts">
import { flip } from "svelte/animate";
import type { ToastMessage } from "./types";
import ToastContent from "./ToastContent.svelte";
export let messages: ToastMessage[] = [];
$: scroll_to_top(messages);
function scroll_to_top(_messages: ToastMessage[]): void {
if (_messages.length > 0) {
if ("parentIFrame" in window) {
window.parentIFrame?.scrollTo(0, 0);
}
}
}
</script>
<div class="toast-wrap">
{#each messages as { type, message, id } (id)}
<div animate:flip={{ duration: 300 }} style:width="100%">
<ToastContent {type} {message} on:close {id} />
</div>
{/each}
</div>
<style>
.toast-wrap {
display: flex;
position: fixed;
top: var(--size-4);
right: var(--size-4);
flex-direction: column;
align-items: end;
gap: var(--size-2);
z-index: var(--layer-top);
width: calc(100% - var(--size-8));
}
@media (--screen-sm) {
.toast-wrap {
width: calc(var(--size-96) + var(--size-10));
}
}
</style>
|