mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-01-18 10:44:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

rework visible, attach to all components (#1511)

Browse Source 
* changes

* fix
This commit is contained in:
aliabid94 2022-06-13 16:49:23 -07:00 committed by GitHub
parent fdbecafffb
commit caa6a4e687
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
38 changed files with 43 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo/blocks_form/run.py
View File

@ -9,7 +9,7 @@ with gr.Blocks() as demo:
submit_btn = gr.Button("Submit")
diagnosis_box = gr.Textbox(label="Diagnosis")
patient_summary_box = gr.Textbox(label="Patient Summary")
patient_summary_box = gr.Textbox(label="Patient Summary", visible=False)
def submit(name, age, symptoms):
if len(name) == 0:
@ -18,7 +18,7 @@ with gr.Blocks() as demo:
return {error_box: gr.update(value="Enter valid age", visible=True)}
return {
diagnosis_box: "covid" if "Cough" in symptoms else "flu",
patient_summary_box: f"{name}, {age} y/o",
patient_summary_box: gr.update(value=f"{name}, {age} y/o", visible=True)
}
submit_btn.click(

60
ui/packages/app/src/Render.svelte
View File

@ -41,12 +41,6 @@
return () => dispatch("destroy", id);
});
$: {
if (typeof props.visible === "boolean") {
props.style.visible = props.visible;
}
}
const forms = [
"textbox",
"number",
@ -99,29 +93,31 @@
setContext("BLOCK_KEY", parent);
</script>
<svelte:component
this={component}
bind:this={instance_map[id].instance}
bind:value={instance_map[id].props.value}
elem_id={props.elem_id || id}
{...props}
{root}
>
{#if children && children.length}
{#each children as { component, id: each_id, props, children, has_modes } (each_id)}
<svelte:self
parent={instance_map[id].type}
{component}
id={each_id}
{props}
{root}
{instance_map}
{children}
{dynamic_ids}
{has_modes}
on:destroy
on:mount
/>
{/each}
{/if}
</svelte:component>
{#if props.visible !== false}
<svelte:component
this={component}
bind:this={instance_map[id].instance}
bind:value={instance_map[id].props.value}
elem_id={props.elem_id || id}
{...props}
{root}
>
{#if children && children.length}
{#each children as { component, id: each_id, props, children, has_modes } (each_id)}
<svelte:self
parent={instance_map[id].type}
{component}
id={each_id}
{props}
{root}
{instance_map}
{children}
{dynamic_ids}
{has_modes}
on:destroy
on:mount
/>
{/each}
{/if}
</svelte:component>
{/if}

2
ui/packages/app/src/components/Audio/Audio.svelte
View File

@ -19,7 +19,6 @@
}>();
export let elem_id: string = "";
export let visible: boolean = true;
export let mode: "static" | "dynamic";
export let value: null | FileData | string = null;
export let name: string;
@ -47,7 +46,6 @@
padding={false}
{elem_id}
style={{ rounded: style.rounded }}
{visible}
>
<StatusTracker {...loading_status} />

3
ui/packages/app/src/components/Button/Button.svelte
View File

@ -5,11 +5,10 @@
export let style: Styles = {};
export let elem_id: string = "";
export let visible: boolean = true;
export let value: string;
export let variant: "primary" | "secondary" = "primary";
</script>
<Button {variant} {elem_id} {visible} {style} on:click>
<Button {variant} {elem_id} {style} on:click>
{$_(value)}
</Button>

3
ui/packages/app/src/components/Carousel/Carousel.svelte
View File

@ -4,11 +4,10 @@
import type { LoadingStatus } from "../StatusTracker/types";
export let elem_id: string = "";
export let visible: boolean = true;
export let loading_status: LoadingStatus;
</script>
<Carousel {elem_id} {visible} on:change>
<Carousel {elem_id} on:change>
<StatusTracker {...loading_status} />
<slot />

3
ui/packages/app/src/components/Chatbot/Chatbot.svelte
View File

@ -7,7 +7,6 @@
import { Chat } from "@gradio/icons";
export let elem_id: string = "";
export let visible: boolean = true;
export let value: Array<[string, string]> = [];
export let style: Styles = {};
export let label: string;
@ -21,7 +20,7 @@
export let loading_status: LoadingStatus;
</script>
<Block padding={false} {elem_id} style={{ rounded: style.rounded }} {visible}>
<Block padding={false} {elem_id} style={{ rounded: style.rounded }}>
<StatusTracker {...loading_status} />
{#if show_label}
<BlockLabel

2
ui/packages/app/src/components/Checkbox/Checkbox.svelte
View File

@ -6,7 +6,6 @@
import type { Styles } from "@gradio/utils";
export let elem_id: string = "";
export let visible: boolean = true;
export let value: boolean = false;
export let label: string = "Checkbox";
export let mode: "static" | "dynamic";
@ -20,7 +19,6 @@
{form_position}
{elem_id}
disable={typeof style.container === "boolean" && !style.container}
{visible}
>
<StatusTracker {...loading_status} />

2
ui/packages/app/src/components/CheckboxGroup/CheckboxGroup.svelte
View File

@ -6,7 +6,6 @@
import type { Styles } from "@gradio/utils";
export let elem_id: string = "";
export let visible: boolean = true;
export let value: Array<string> = [];
export let choices: Array<string>;
export let style: Styles = {};
@ -23,7 +22,6 @@
{elem_id}
type="fieldset"
disable={typeof style.container === "boolean" && !style.container}
{visible}
>
<StatusTracker {...loading_status} />

2
ui/packages/app/src/components/Column/Column.svelte
View File

@ -2,7 +2,6 @@
import { create_classes } from "@gradio/utils";
export let elem_id: string = "";
export let visible: boolean = true;
export let variant: "default" | "panel" = "default";
export let parent: string | null = null;
export let style: Record<string, unknown> = {};
@ -10,7 +9,6 @@
<div
id={elem_id}
class:hidden={visible === false}
class:bg-gray-50={variant === "panel"}
class:p-2={variant === "panel"}
class:rounded-lg={variant === "panel"}

2
ui/packages/app/src/components/DataFrame/DataFrame.svelte
View File

@ -10,7 +10,6 @@
export let headers: Headers = [];
export let elem_id: string = "";
export let visible: boolean = true;
export let value: Data | { data: Data; headers: Headers } = [["", "", ""]];
export let mode: "static" | "dynamic";
export let col_count: [number, "fixed" | "dynamic"];
@ -42,7 +41,6 @@
<div
id={elem_id}
class:hidden={visible === false}
class="relative overflow-hidden"
class:flex-1={parent === "row" || !parent}
>

7
ui/packages/app/src/components/Dataset/Dataset.svelte
View File

@ -6,7 +6,6 @@
export let headers: Array<string>;
export let samples: Array<Array<any>>;
export let elem_id: string = "";
export let visible: boolean = true;
export let value: Number | null = null;
export let root: string;
export let samples_per_page: number = 10;
@ -51,11 +50,7 @@
}
</script>
<div
id={elem_id}
class:hidden={visible === false}
class="mt-4 inline-block max-w-full text-gray-700 w-full"
>
<div id={elem_id} class="mt-4 inline-block max-w-full text-gray-700 w-full">
<div class="text-xs mb-2 flex items-center text-gray-500">
<svg
xmlns="http://www.w3.org/2000/svg"

2
ui/packages/app/src/components/Dropdown/Dropdown.svelte
View File

@ -7,7 +7,6 @@
export let label: string = "Dropdown";
export let elem_id: string = "";
export let visible: boolean = true;
export let value: string = "";
export let choices: Array<string>;
export let form_position: "first" | "last" | "mid" | "single" = "single";
@ -22,7 +21,6 @@
{form_position}
{elem_id}
disable={typeof style.container === "boolean" && !style.container}
{visible}
>
<StatusTracker {...loading_status} />

2
ui/packages/app/src/components/File/File.svelte
View File

@ -11,7 +11,6 @@
import { _ } from "svelte-i18n";
export let elem_id: string = "";
export let visible: boolean = true;
export let value: null | FileData = null;
export let mode: "static" | "dynamic";
export let root: string;
@ -34,7 +33,6 @@
padding={false}
{elem_id}
style={{ rounded: style.rounded }}
{visible}
>
<StatusTracker {...loading_status} />

2
ui/packages/app/src/components/Gallery/Gallery.svelte
View File

@ -12,7 +12,6 @@
export let show_label: boolean;
export let label: string;
export let elem_id: string = "";
export let visible: boolean = true;
export let value: Array<string> | null = null;
export let style: Styles = {};
@ -83,7 +82,6 @@
padding={false}
{elem_id}
disable={typeof style.container === "boolean" && !style.container}
{visible}
>
<StatusTracker {...loading_status} />
{#if show_label}

3
ui/packages/app/src/components/HTML/HTML.svelte
View File

@ -4,7 +4,6 @@
export let label: string;
export let elem_id: string = "";
export let visible: boolean = true;
export let value: string = "";
const dispatch = createEventDispatcher<{ change: undefined }>();
@ -12,4 +11,4 @@
$: label, dispatch("change");
</script>
<HTML {value} {elem_id} {visible} on:change />
<HTML {value} {elem_id} on:change />

2
ui/packages/app/src/components/HighlightedText/HighlightedText.svelte
View File

@ -8,7 +8,6 @@
import type { Styles } from "@gradio/utils";
export let elem_id: string = "";
export let visible: boolean = true;
export let value: Array<[string, string | number]>;
export let show_legend: boolean;
export let color_map: Record<string, string> = {};
@ -30,7 +29,6 @@
{elem_id}
disable={typeof style.container === "boolean" && !style.container}
style={{ rounded: style.rounded }}
{visible}
>
<StatusTracker {...loading_status} />
{#if label}

2
ui/packages/app/src/components/Image/Image.svelte
View File

@ -8,7 +8,6 @@
import type { Styles } from "@gradio/utils";
export let elem_id: string = "";
export let visible: boolean = true;
export let value: null | string = null;
export let source: "canvas" | "webcam" | "upload" = "upload";
export let tool: "editor" | "select" = "editor";
@ -36,7 +35,6 @@
padding={false}
{elem_id}
style={{ rounded: style.rounded, height: style.height, width: style.width }}
{visible}
>
<StatusTracker {...loading_status} />
{#if mode === "static"}

2
ui/packages/app/src/components/Json/Json.svelte
View File

@ -9,7 +9,6 @@
import type { Styles } from "@gradio/utils";
export let elem_id: string = "";
export let visible: boolean = true;
export let value: any;
export let loading_status: LoadingStatus;
export let label: string;
@ -24,7 +23,6 @@
test_id="json"
{elem_id}
disable={typeof style.container === "boolean" && !style.container}
{visible}
>
{#if label}
<BlockLabel

2
ui/packages/app/src/components/Label/Label.svelte
View File

@ -8,7 +8,6 @@
import type { Styles } from "@gradio/utils";
export let elem_id: string = "";
export let visible: boolean = true;
export let value: {
label: string;
confidences?: Array<{ label: string; confidence: number }>;
@ -27,7 +26,6 @@
<Block
{elem_id}
disable={typeof style.container === "boolean" && !style.container}
{visible}
>
<StatusTracker {...loading_status} />
{#if show_label}

3
ui/packages/app/src/components/Markdown/Markdown.svelte
View File

@ -4,7 +4,6 @@
export let label: string;
export let elem_id: string = "";
export let visible: boolean = true;
export let value: string = "";
const dispatch = createEventDispatcher<{ change: undefined }>();
@ -12,4 +11,4 @@
$: label, dispatch("change");
</script>
<Markdown {value} {elem_id} {visible} on:change />
<Markdown {value} {elem_id} on:change />

2
ui/packages/app/src/components/Model3D/Model3D.svelte
View File

@ -11,7 +11,6 @@
export let style: Styles = {};
export let elem_id: string = "";
export let visible: boolean = true;
export let value: null | FileData = null;
export let mode: "static" | "dynamic";
export let root: string;
@ -33,7 +32,6 @@
padding={false}
{elem_id}
style={{ rounded: style.rounded }}
{visible}
>
<StatusTracker {...loading_status} />

2
ui/packages/app/src/components/Number/Number.svelte
View File

@ -8,7 +8,6 @@
export let label: string = "Number";
export let elem_id: string = "";
export let style: Styles = {};
export let visible: boolean = true;
export let value: number = 0;
export let form_position: "first" | "last" | "mid" | "single" = "single";
export let show_label: boolean;
@ -21,7 +20,6 @@
{form_position}
{elem_id}
disable={typeof style.container === "boolean" && !style.container}
{visible}
>
<StatusTracker {...loading_status} />

3
ui/packages/app/src/components/Plot/Plot.svelte
View File

@ -10,14 +10,13 @@
export let value: null | string = null;
export let elem_id: string = "";
export let visible: boolean = true;
export let loading_status: LoadingStatus;
export let label: string;
export let show_label: boolean;
</script>
<Block padding={false} {elem_id} {visible}>
<Block padding={false} {elem_id}>
<BlockLabel {show_label} label={label || "Plot"} Icon={PlotIcon} />
<StatusTracker {...loading_status} />

2
ui/packages/app/src/components/Radio/Radio.svelte
View File

@ -7,7 +7,6 @@
export let label: string = "Radio";
export let elem_id: string = "";
export let visible: boolean = true;
export let value: string = "";
export let choices: Array<string> = [];
export let mode: "static" | "dynamic";
@ -22,7 +21,6 @@
type="fieldset"
{elem_id}
disable={typeof style.container === "boolean" && !style.container}
{visible}
>
<StatusTracker {...loading_status} />

2
ui/packages/app/src/components/Slider/Slider.svelte
View File

@ -6,7 +6,6 @@
import type { Styles } from "@gradio/utils";
export let elem_id: string = "";
export let visible: boolean = true;
export let value: number = 0;
export let label: string = "Slider";
export let style: Styles = {};
@ -24,7 +23,6 @@
{form_position}
{elem_id}
disable={typeof style.container === "boolean" && !style.container}
{visible}
>
<StatusTracker {...loading_status} />

3
ui/packages/app/src/components/TabItem/Tabs.svelte
View File

@ -2,10 +2,9 @@
import { TabItem } from "@gradio/tabs";
export let elem_id: string = "";
export let visible: boolean = true;
export let label: string;
</script>
<TabItem {elem_id} {visible} name={label} on:select>
<TabItem {elem_id} name={label} on:select>
<slot />
</TabItem>

3
ui/packages/app/src/components/Tabs/Tabs.svelte
View File

@ -2,9 +2,8 @@
import { Tabs } from "@gradio/tabs";
export let elem_id: string = "";
export let visible: boolean = true;
</script>
<Tabs {elem_id} {visible} on:change>
<Tabs {elem_id} on:change>
<slot />
</Tabs>

2
ui/packages/app/src/components/Textbox/Textbox.svelte
View File

@ -8,7 +8,6 @@
export let label: string = "Textbox";
export let elem_id: string = "";
export let visible: boolean = true;
export let value: string = "";
export let lines: number;
export let placeholder: string = "";
@ -26,7 +25,6 @@
<Block
{form_position}
{elem_id}
{visible}
disable={typeof style.container === "boolean" && !style.container}
>
<StatusTracker {...loading_status} />

2
ui/packages/app/src/components/TimeSeries/TimeSeries.svelte
View File

@ -32,7 +32,6 @@
}
export let elem_id: string = "";
export let visible: boolean = true;
export let value: null | Data;
export let y: Array<string>;
export let x: string;
@ -123,7 +122,6 @@
padding={false}
{elem_id}
style={{ rounded: style.rounded }}
{visible}
>
<BlockLabel {show_label} Icon={ChartIcon} label={label || "TimeSeries"} />
<StatusTracker {...loading_status} />

2
ui/packages/app/src/components/Video/Video.svelte
View File

@ -10,7 +10,6 @@
import { _ } from "svelte-i18n";
export let elem_id: string = "";
export let visible: boolean = true;
export let value: FileData | null | string = null;
export let label: string;
export let source: string;
@ -35,7 +34,6 @@
padding={false}
{elem_id}
style={{ rounded: style.rounded, height: style.height, width: style.width }}
{visible}
>
<StatusTracker {...loading_status} />

5
ui/packages/atoms/src/Block.svelte
View File

@ -6,7 +6,6 @@
export let style: Styles = {};
export let elem_id: string = "";
export let visible: boolean = true;
export let variant: "solid" | "dashed" | "none" = "solid";
export let color: "grey" | "green" = "grey";
export let padding: boolean = true;
@ -64,7 +63,6 @@
typeof style.rounded === "boolean"
? get_styles({ rounded: rounded }, ["rounded"]).classes
: "";
$: visible_style = get_styles({ visible }, ["visible"]).classes;
$: size_style =
"" +
(typeof style.width === "number" ? `height: ${style.width}px; ` : "") +
@ -77,8 +75,7 @@
id={elem_id}
class="overflow-hidden {styles[variant]} {rounded
? styles[color]
: ''} {form_class} {classes} {rounded_style} {visible_style}"
class:w-full={!style.width}
: ''} {form_class} {classes} {rounded_style}"
class:gr-panel={padding}
class:form={form_position}
class:gr-box-unrounded={!rounded && form_position}

2
ui/packages/button/src/Button.svelte
View File

@ -4,7 +4,6 @@
export let style: Styles = {};
export let elem_id: string = "";
export let visible: boolean = true;
export let variant: "primary" | "secondary" = "secondary";
export let size: "sm" | "lg" = "lg";
@ -21,7 +20,6 @@
class="gr-button gr-button-{size} gr-button-{variant} self-start
{classes}"
id={elem_id}
class:hidden={visible === false}
>
<slot />
</button>

7
ui/packages/carousel/src/Carousel.svelte
View File

@ -7,7 +7,6 @@
import { writable } from "svelte/store";
export let elem_id: string = "";
export let visible: boolean = true;
const dispatch = createEventDispatcher<{
change: undefined;
@ -46,11 +45,7 @@
};
</script>
<div
class="output-carousel flex flex-col relative"
id={elem_id}
class:hidden={visible === false}
>
<div class="output-carousel flex flex-col relative" id={elem_id}>
<slot />
<div

1
ui/packages/html/src/HTML.svelte
View File

@ -2,7 +2,6 @@
import { createEventDispatcher } from "svelte";
export let elem_id: string = "";
export let visible: boolean = true;
export let value: string;
const dispatch = createEventDispatcher<{ change: undefined }>();

8
ui/packages/markdown/src/Markdown.svelte
View File

@ -3,7 +3,6 @@
import "./typography.css";
export let elem_id: string = "";
export let visible: boolean = true;
export let value: string;
const dispatch = createEventDispatcher<{ change: undefined }>();
@ -11,11 +10,6 @@
$: value, dispatch("change");
</script>
<div
id={elem_id}
class:hidden={visible === false}
class="output-markdown gr-prose"
style="max-width: 100%"
>
<div id={elem_id} class="output-markdown gr-prose" style="max-width: 100%">
{@html value}
</div>

1
ui/packages/plot/src/Plot.svelte
View File

@ -16,7 +16,6 @@
import { afterUpdate, onMount } from "svelte";
// export let visible: boolean = true;
export let value: null | string;
export let theme: string;

2
ui/packages/tabs/src/TabItem.svelte
View File

@ -3,7 +3,6 @@
import { TABS } from "./Tabs.svelte";
export let elem_id: string = "";
export let visible: boolean = true;
export let name: string;
const dispatch = createEventDispatcher<{ select: undefined }>();
@ -23,7 +22,6 @@
{#if $selected_tab === id}
<div
id={elem_id}
class:hidden={visible === false}
class="tabitem p-2 border-2 border-t-0 border-gray-200 relative flex"
>
<div

7
ui/packages/tabs/src/Tabs.svelte
View File

@ -12,7 +12,6 @@
}
export let elem_id: string = "";
export let visible: boolean = true;
const tabs: Array<Tab> = [];
@ -41,11 +40,7 @@
}
</script>
<div
class="tabs flex flex-col my-4"
id={elem_id}
class:hidden={visible === false}
>
<div class="tabs flex flex-col my-4" id={elem_id}>
<div class="flex border-b-2 dark:border-gray-700">
{#each tabs as t, i}
{#if t.id === $selected_tab}