wehub-resource-sync
adf0d17497
publish / version_or_publish (push) Waiting to run
storybook-build / changes (push) Waiting to run
storybook-build / :storybook-build (push) Blocked by required conditions
Sync Gradio Skills to Hugging Face / sync-skills (push) Waiting to run
functional / changes (push) Waiting to run
functional / build-frontend (push) Blocked by required conditions
functional / functional-test-SSR=false (push) Blocked by required conditions
functional / functional-reload (push) Blocked by required conditions
functional / functional-test-SSR=true (push) Blocked by required conditions
hygiene / hygiene-test (push) Waiting to run
python / changes (push) Waiting to run
python / build (push) Blocked by required conditions
python / test-ubuntu-latest-flaky (push) Blocked by required conditions
python / test-ubuntu-latest-not-flaky (push) Blocked by required conditions
python / test-windows-latest-flaky (push) Blocked by required conditions
python / test-windows-latest-not-flaky (push) Blocked by required conditions
js / changes (push) Waiting to run
js / js-test (push) Blocked by required conditions
docs-build / changes (push) Waiting to run
docs-build / docs-build (push) Blocked by required conditions
docs-build / website-build (push) Blocked by required conditions
91 lines
2.2 KiB
Svelte
91 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import { StatusTracker } from "@gradio/statustracker";
|
|
import type { ILoadingStatus as LoadingStatus } from "@gradio/statustracker";
|
|
|
|
type Props = {
|
|
scale?: number | null;
|
|
min_width?: number | null;
|
|
elem_id?: string;
|
|
elem_classes?: string[];
|
|
visible?: boolean | "hidden";
|
|
variant?: "default" | "panel" | "compact";
|
|
loading_status?: LoadingStatus;
|
|
show_progress?: boolean;
|
|
autoscroll?: boolean;
|
|
i18n?: (key: string) => string;
|
|
};
|
|
|
|
let props: Props = $props();
|
|
let el;
|
|
|
|
let scale: number | null = $derived(props.scale ?? null);
|
|
let min_width: number = $derived(props.min_width ?? 0);
|
|
let elem_id: string = $derived(props.elem_id ?? "");
|
|
let elem_classes: string[] = $derived(props.elem_classes ?? []);
|
|
let visible: boolean | "hidden" = $derived(props.visible ?? true);
|
|
let variant: "default" | "panel" | "compact" = $derived(
|
|
props.variant ?? "default"
|
|
);
|
|
let loading_status: LoadingStatus | undefined = $derived(
|
|
props.loading_status
|
|
);
|
|
let show_progress = $derived(props.show_progress ?? false);
|
|
</script>
|
|
|
|
<div
|
|
bind:this={el}
|
|
id={elem_id}
|
|
class="column {elem_classes.join(' ')}"
|
|
class:compact={variant === "compact"}
|
|
class:panel={variant === "panel"}
|
|
class:hide={!visible}
|
|
style:flex-grow={scale}
|
|
style:min-width="calc(min({min_width}px, 100%))"
|
|
>
|
|
{#if loading_status && loading_status.show_progress}
|
|
<StatusTracker
|
|
autoscroll={props.autoscroll ?? false}
|
|
i18n={props.i18n ?? ((key: string) => key)}
|
|
{...loading_status}
|
|
queue_size={loading_status.queue_size ?? null}
|
|
status={loading_status
|
|
? loading_status.status == "pending"
|
|
? "generating"
|
|
: loading_status.status
|
|
: null}
|
|
/>
|
|
{/if}
|
|
<slot />
|
|
</div>
|
|
|
|
<style>
|
|
div {
|
|
display: flex;
|
|
position: relative;
|
|
flex-direction: column;
|
|
gap: var(--layout-gap);
|
|
}
|
|
|
|
div > :global(*),
|
|
div > :global(.form > *) {
|
|
width: var(--size-full);
|
|
}
|
|
|
|
.hide {
|
|
display: none;
|
|
}
|
|
|
|
.compact > :global(*),
|
|
.compact :global(.box) {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.compact,
|
|
.panel {
|
|
border: solid var(--panel-border-width) var(--panel-border-color);
|
|
border-radius: var(--container-radius);
|
|
background: var(--panel-background-fill);
|
|
padding: var(--spacing-lg);
|
|
}
|
|
</style>
|