-
Notifications
You must be signed in to change notification settings - Fork 2.3k
/
Toast.svelte
47 lines (40 loc) 路 1013 Bytes
/
Toast.svelte
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 { onMount } from "svelte";
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>