gradio/js/html/static/StaticHtml.svelte
pngwn fe057300f0
delegate gradio events via a custom event dispatcher (#5279)
* delegate gradio events via a custom event dispatcher

* improve md perf + share code

* fix df markdown

* prevent model3d from rerending too frequently

* tweaks

* fix more event bugs with video

* add changeset

* optimise handle mount

* does this do anything

* fix

* remove old dispatches

* fix dropdown position

* oops

* fixes

* fix tests

* fix types

* format

* fix markdown code

* add changeset

* fix typecheck

* fix typecheck

* fix demos

* notebooks

* fix tests

* changer

* maybe this

* fixes

* add changeset

* fix chatbot alignment mobile

* fix chantbot

* add changeset

* changeset

* changeset

* storybook

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
2023-08-23 21:48:10 +01:00

44 lines
1010 B
Svelte

<script lang="ts">
import type { Gradio } from "@gradio/utils";
import HTML from "./HTML.svelte";
import { StatusTracker } from "@gradio/statustracker";
import type { LoadingStatus } from "@gradio/statustracker";
import { Block } from "@gradio/atoms";
export let label: string;
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let value = "";
export let loading_status: LoadingStatus;
export let gradio: Gradio<{
change: never;
}>;
$: label, gradio.dispatch("change");
</script>
<Block {visible} {elem_id} {elem_classes} container={false}>
<StatusTracker {...loading_status} variant="center" />
<div class:pending={loading_status?.status === "pending"}>
<HTML
min_height={loading_status && loading_status?.status !== "complete"}
{value}
{elem_id}
{elem_classes}
{visible}
on:change={() => gradio.dispatch("change")}
/>
</div>
</Block>
<style>
div {
transition: 150ms;
}
.pending {
opacity: 0.2;
}
</style>