mirror of
https://github.com/gradio-app/gradio.git
synced 2024-12-09 02:00:44 +08:00
fbdad78af4
* lazy load compoennts more granularly * add changeset * format * add changeset * fix casing * fix casing * fix casing * revert changelog formatting * add changeset * revert changelog formatting * add changeset * make interactive updates work * revert changelog stuff * fix order * fix static dataframe * revert demo change --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
47 lines
978 B
Svelte
47 lines
978 B
Svelte
<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>
|