mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-03-25 12:10:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix gr.Group, container=False (#4916)

Browse Source 
* changes

* changes

* changes

* changes

* changes

* fix

* changes

* changes

* Deploy group demo

* changes

* changes

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
Co-authored-by: freddyaboulton <alfonsoboulton@gmail.com>
This commit is contained in:
aliabid94 2023-07-17 10:05:46 -07:00 committed by GitHub
parent c409cd5c73
commit f2fd37ee59
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
63 changed files with 255 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -26,6 +26,7 @@ demo.launch()
- Add missing `display: flex` property to `Row` so that flex styling is applied to children by [@hannahblair] in [PR 4896](https://github.com/gradio-app/gradio/pull/4896)
- Fixed bug where `gr.Video` could not preprocess urls by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4904](https://github.com/gradio-app/gradio/pull/4904)
- Fixed copy button rendering in API page on Safari by [@aliabid94](https://github.com/aliabid94) in [PR 4924](https://github.com/gradio-app/gradio/pull/4924)
- Fixed `gr.Group` and `container=False`. `container` parameter only available for `Textbox`, `Number`, and `Dropdown`, the only elements where it makes sense. By [@aliabid94](https://github.com/aliabid94) in [PR 4916](https://github.com/gradio-app/gradio/pull/4916)
- Fixed broken image link in auto-generated `app.py` from `ThemeClass.push_to_hub` by [@deepkyu](https://github.com/deepkyu) in [PR 4944](https://github.com/gradio-app/gradio/pull/4944)
## Other Changes:

1
demo/blocks_group/run.ipynb Normal file
View File

@ -0,0 +1 @@
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: blocks_group"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "def greet(name):\n", " return \"Hello \" + name + \"!\"\n", "\n", "with gr.Blocks() as demo:\n", " gr.Markdown(\"### This is a couple of elements without any gr.Group. Form elements naturally group together anyway.\")\n", " gr.Textbox(\"A\")\n", " gr.Number(3)\n", " gr.Button()\n", " gr.Image()\n", " gr.Slider()\n", "\n", " gr.Markdown(\"### This is the same set put in a gr.Group.\")\n", " with gr.Group():\n", " gr.Textbox(\"A\")\n", " gr.Number(3)\n", " gr.Button()\n", " gr.Image()\n", " gr.Slider()\n", "\n", " gr.Markdown(\"### Now in a Row, no group.\")\n", " with gr.Row():\n", " gr.Textbox(\"A\")\n", " gr.Number(3)\n", " gr.Button()\n", " gr.Image()\n", " gr.Slider()\n", "\n", " gr.Markdown(\"### Now in a Row in a group.\")\n", " with gr.Group():\n", " with gr.Row():\n", " gr.Textbox(\"A\")\n", " gr.Number(3)\n", " gr.Button()\n", " gr.Image()\n", " gr.Slider()\n", "\n", " gr.Markdown(\"### Several rows grouped together.\")\n", " with gr.Group():\n", " with gr.Row():\n", " gr.Textbox(\"A\")\n", " gr.Number(3)\n", " gr.Button()\n", " with gr.Row():\n", " gr.Image()\n", " gr.Audio()\n", "\n", " gr.Markdown(\"### Several columns grouped together. If columns are uneven, there is a gray group background.\")\n", " with gr.Group():\n", " with gr.Row():\n", " with gr.Column():\n", " name = gr.Textbox(label=\"Name\")\n", " btn = gr.Button(\"Hello\")\n", " gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True)\n", " gr.Number()\n", " gr.Textbox()\n", " with gr.Column():\n", " gr.Image()\n", " gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True)\n", " with gr.Row():\n", " gr.Number(scale=2)\n", " gr.Textbox()\n", "\n", " gr.Markdown(\"### container=False removes label, padding, and block border, placing elements 'directly' on background.\")\n", " gr.Radio([1,2,3], container=False)\n", " gr.Textbox(container=False)\n", " gr.Image(\"https://picsum.photos/id/237/200/300\", container=False, height=200)\n", "\n", " gr.Markdown(\"### Textbox, Dropdown, and Number input boxes takes up full space when within a group without a container.\")\n", "\n", "\n", " with gr.Group():\n", " name = gr.Textbox(label=\"Name\")\n", " output = gr.Textbox(show_label=False, container=False)\n", " greet_btn = gr.Button(\"Greet\")\n", " with gr.Row():\n", " gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True, container=False)\n", " gr.Textbox(container=False)\n", " gr.Number(container=False)\n", " gr.Image(height=100)\n", " greet_btn.click(fn=greet, inputs=name, outputs=output, api_name=\"greet\")\n", "\n", "\n", " gr.Markdown(\"### More examples\")\n", "\n", " with gr.Group():\n", " gr.Chatbot()\n", " with gr.Row():\n", " name = gr.Textbox(label=\"Prompot\", container=False)\n", " go = gr.Button(\"go\", scale=0)\n", "\n", " with gr.Column():\n", " gr.Radio([1,2,3], container=False)\n", " gr.Slider(0, 20, container=False)\n", "\n", " with gr.Group():\n", " with gr.Row():\n", " gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True, container=False, elem_id=\"here2\")\n", " gr.Number(container=False)\n", " gr.Textbox(container=False)\n", "\n", " with gr.Row():\n", " with gr.Column():\n", " gr.Dropdown([\"a\", \"b\", \"c\"], interactive=True, container=False, elem_id=\"here2\")\n", " with gr.Column():\n", " gr.Number(container=False)\n", " with gr.Column():\n", " gr.Textbox(container=False)\n", "\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

113
demo/blocks_group/run.py Normal file
View File

@ -0,0 +1,113 @@
import gradio as gr
def greet(name):
return "Hello " + name + "!"
with gr.Blocks() as demo:
gr.Markdown("### This is a couple of elements without any gr.Group. Form elements naturally group together anyway.")
gr.Textbox("A")
gr.Number(3)
gr.Button()
gr.Image()
gr.Slider()
gr.Markdown("### This is the same set put in a gr.Group.")
with gr.Group():
gr.Textbox("A")
gr.Number(3)
gr.Button()
gr.Image()
gr.Slider()
gr.Markdown("### Now in a Row, no group.")
with gr.Row():
gr.Textbox("A")
gr.Number(3)
gr.Button()
gr.Image()
gr.Slider()
gr.Markdown("### Now in a Row in a group.")
with gr.Group():
with gr.Row():
gr.Textbox("A")
gr.Number(3)
gr.Button()
gr.Image()
gr.Slider()
gr.Markdown("### Several rows grouped together.")
with gr.Group():
with gr.Row():
gr.Textbox("A")
gr.Number(3)
gr.Button()
with gr.Row():
gr.Image()
gr.Audio()
gr.Markdown("### Several columns grouped together. If columns are uneven, there is a gray group background.")
with gr.Group():
with gr.Row():
with gr.Column():
name = gr.Textbox(label="Name")
btn = gr.Button("Hello")
gr.Dropdown(["a", "b", "c"], interactive=True)
gr.Number()
gr.Textbox()
with gr.Column():
gr.Image()
gr.Dropdown(["a", "b", "c"], interactive=True)
with gr.Row():
gr.Number(scale=2)
gr.Textbox()
gr.Markdown("### container=False removes label, padding, and block border, placing elements 'directly' on background.")
gr.Radio([1,2,3], container=False)
gr.Textbox(container=False)
gr.Image("https://picsum.photos/id/237/200/300", container=False, height=200)
gr.Markdown("### Textbox, Dropdown, and Number input boxes takes up full space when within a group without a container.")
with gr.Group():
name = gr.Textbox(label="Name")
output = gr.Textbox(show_label=False, container=False)
greet_btn = gr.Button("Greet")
with gr.Row():
gr.Dropdown(["a", "b", "c"], interactive=True, container=False)
gr.Textbox(container=False)
gr.Number(container=False)
gr.Image(height=100)
greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")
gr.Markdown("### More examples")
with gr.Group():
gr.Chatbot()
with gr.Row():
name = gr.Textbox(label="Prompot", container=False)
go = gr.Button("go", scale=0)
with gr.Column():
gr.Radio([1,2,3], container=False)
gr.Slider(0, 20, container=False)
with gr.Group():
with gr.Row():
gr.Dropdown(["a", "b", "c"], interactive=True, container=False, elem_id="here2")
gr.Number(container=False)
gr.Textbox(container=False)
with gr.Row():
with gr.Column():
gr.Dropdown(["a", "b", "c"], interactive=True, container=False, elem_id="here2")
with gr.Column():
gr.Number(container=False)
with gr.Column():
gr.Textbox(container=False)
if __name__ == "__main__":
demo.launch()

2
demo/blocks_kitchen_sink/run.ipynb
View File

File diff suppressed because one or more lines are too long

5
demo/blocks_kitchen_sink/run.py
View File

@ -112,8 +112,7 @@ with gr.Blocks(theme=base_theme) as demo:
check = gr.Checkbox(label="Go")
with gr.Column(variant="panel", scale=2):
img = gr.Image(
"https://raw.githubusercontent.com/gradio-app/gradio/main/js/_website/src/assets/img/header-image.jpg",
label="Image"
"https://gradio.app/assets/img/header-image.jpg", label="Image"
).style(height=320)
with gr.Row():
go_btn = gr.Button("Go", label="Primary Button", variant="primary")
@ -123,7 +122,7 @@ with gr.Blocks(theme=base_theme) as demo:
def go(*args):
time.sleep(3)
return "https://raw.githubusercontent.com/gradio-app/gradio/main/js/_website/src/assets/img/header-image.jpg"
return "https://i.ibb.co/6BgKdSj/groot.jpg"
go_btn.click(go, [radio, drop, drop_2, check, name], img, api_name="go")

2
gradio/components/annotated_image.py
View File

@ -46,7 +46,7 @@ class AnnotatedImage(Selectable, IOComponent, JSONSerializable):
color_map: dict[str, str] | None = None,
label: str | None = None,
every: float | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,

2
gradio/components/audio.py
View File

@ -56,7 +56,7 @@ class Audio(
type: Literal["numpy", "filepath"] = "numpy",
label: str | None = None,
every: float | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,

2
gradio/components/bar_plot.py
View File

@ -58,7 +58,7 @@ class BarPlot(Plot):
caption: str | None = None,
interactive: bool | None = True,
label: str | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,

10
gradio/components/base.py
View File

@ -133,7 +133,7 @@ class IOComponent(Component):
value: Any = None,
label: str | None = None,
info: str | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int | None = None,
@ -156,6 +156,12 @@ class IOComponent(Component):
self.label = label
self.info = info
if not container:
if show_label:
warn_deprecation("show_label has no effect when container is False.")
show_label = False
if show_label is None:
show_label = True
self.show_label = show_label
self.container = container
if scale is not None and scale != round(scale):
@ -366,6 +372,8 @@ class IOComponent(Component):
class FormComponent:
def get_expected_parent(self) -> type[Form]:
if getattr(self, "container", None) is False:
return None
return Form

2
gradio/components/chatbot.py
View File

@ -42,7 +42,7 @@ class Chatbot(Changeable, Selectable, IOComponent, JSONSerializable):
*,
label: str | None = None,
every: float | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,

2
gradio/components/checkbox.py
View File

@ -40,7 +40,7 @@ class Checkbox(
label: str | None = None,
info: str | None = None,
every: float | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,

2
gradio/components/checkboxgroup.py
View File

@ -42,7 +42,7 @@ class CheckboxGroup(
label: str | None = None,
info: str | None = None,
every: float | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,

2
gradio/components/code.py
View File

@ -57,7 +57,7 @@ class Code(Changeable, Inputable, IOComponent, StringSerializable):
lines: int = 5,
label: str | None = None,
interactive: bool | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,

2
gradio/components/color_picker.py
View File

@ -37,7 +37,7 @@ class ColorPicker(
label: str | None = None,
info: str | None = None,
every: float | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,

2
gradio/components/dataframe.py
View File

@ -55,7 +55,7 @@ class Dataframe(Changeable, Inputable, Selectable, IOComponent, JSONSerializable
overflow_row_behaviour: Literal["paginate", "show_ends"] = "paginate",
label: str | None = None,
every: float | None = None,
show_label: bool = True,
show_label: bool | None = None,
scale: int | None = None,
min_width: int = 160,
interactive: bool | None = None,

3
gradio/components/dropdown.py
View File

@ -50,7 +50,7 @@ class Dropdown(
label: str | None = None,
info: str | None = None,
every: float | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,
@ -155,6 +155,7 @@ class Dropdown(
"multiselect": self.multiselect,
"max_choices": self.max_choices,
"allow_custom_value": self.allow_custom_value,
"container": self.container,
**IOComponent.get_config(self),
}

2
gradio/components/file.py
View File

@ -51,7 +51,7 @@ class File(
type: Literal["file", "binary"] = "file",
label: str | None = None,
every: float | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,

2
gradio/components/gallery.py
View File

@ -39,7 +39,7 @@ class Gallery(IOComponent, GallerySerializable, Selectable):
*,
label: str | None = None,
every: float | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,

2
gradio/components/highlighted_text.py
View File

@ -42,7 +42,7 @@ class HighlightedText(Changeable, Selectable, IOComponent, JSONSerializable):
adjacent_separator: str = "",
label: str | None = None,
every: float | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,

2
gradio/components/html.py
View File

@ -30,7 +30,7 @@ class HTML(Changeable, IOComponent, StringSerializable):
*,
label: str | None = None,
every: float | None = None,
show_label: bool = True,
show_label: bool | None = None,
visible: bool = True,
elem_id: str | None = None,
elem_classes: list[str] | str | None = None,

2
gradio/components/image.py
View File

@ -69,7 +69,7 @@ class Image(
type: Literal["numpy", "pil", "filepath"] = "numpy",
label: str | None = None,
every: float | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,

2
gradio/components/json_component.py
View File

@ -33,7 +33,7 @@ class JSON(Changeable, IOComponent, JSONSerializable):
*,
label: str | None = None,
every: float | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,

2
gradio/components/label.py
View File

@ -42,7 +42,7 @@ class Label(Changeable, Selectable, IOComponent, JSONSerializable):
num_top_classes: int | None = None,
label: str | None = None,
every: float | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,

2
gradio/components/line_plot.py
View File

@ -71,7 +71,7 @@ class LinePlot(Plot):
caption: str | None = None,
interactive: bool | None = True,
label: str | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,

2
gradio/components/model3d.py
View File

@ -40,7 +40,7 @@ class Model3D(
clear_color: list[float] | None = None,
label: str | None = None,
every: float | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,

3
gradio/components/number.py
View File

@ -49,7 +49,7 @@ class Number(
label: str | None = None,
info: str | None = None,
every: float | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,
@ -127,6 +127,7 @@ class Number(
"value": self.value,
"minimum": self.minimum,
"maximum": self.maximum,
"container": self.container,
**IOComponent.get_config(self),
}

2
gradio/components/plot.py
View File

@ -36,7 +36,7 @@ class Plot(Changeable, Clearable, IOComponent, JSONSerializable):
*,
label: str | None = None,
every: float | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,

2
gradio/components/radio.py
View File

@ -43,7 +43,7 @@ class Radio(
label: str | None = None,
info: str | None = None,
every: float | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,

2
gradio/components/scatter_plot.py
View File

@ -87,7 +87,7 @@ class ScatterPlot(Plot):
interactive: bool | None = True,
label: str | None = None,
every: float | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,

2
gradio/components/slider.py
View File

@ -48,7 +48,7 @@ class Slider(
label: str | None = None,
info: str | None = None,
every: float | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,

3
gradio/components/textbox.py
View File

@ -59,7 +59,7 @@ class Textbox(
label: str | None = None,
info: str | None = None,
every: float | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,
@ -140,6 +140,7 @@ class Textbox(
"value": self.value,
"type": self.type,
"show_copy_button": self.show_copy_button,
"container": self.container,
"text_align": self.text_align,
"rtl": self.rtl,
**IOComponent.get_config(self),

2
gradio/components/timeseries.py
View File

@ -34,7 +34,7 @@ class Timeseries(Changeable, IOComponent, JSONSerializable):
colors: list[str] | None = None,
label: str | None = None,
every: float | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,

2
gradio/components/video.py
View File

@ -60,7 +60,7 @@ class Video(
width: int | None = None,
label: str | None = None,
every: float | None = None,
show_label: bool = True,
show_label: bool | None = None,
container: bool = True,
scale: int | None = None,
min_width: int = 160,

2
gradio/layouts.py
View File

@ -1,5 +1,6 @@
from __future__ import annotations
import warnings
from typing import TYPE_CHECKING, Literal
from gradio_client.documentation import document, set_documentation_group
@ -295,6 +296,7 @@ class Box(BlockContext):
visible: If False, box will be hidden.
elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
"""
warnings.warn("gr.Box is deprecated. Use gr.Group instead.", DeprecationWarning)
super().__init__(visible=visible, elem_id=elem_id, **kwargs)
def get_config(self):

2
js/app/src/components/AnnotatedImage/AnnotatedImage.svelte
View File

@ -19,7 +19,7 @@
export let height: number | undefined;
export let width: number | undefined;
export let color_map: Record<string, string>;
export let container: boolean = false;
export let container: boolean = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let root: string;

2
js/app/src/components/Audio/Audio.svelte
View File

@ -34,7 +34,7 @@
export let pending: boolean;
export let streaming: boolean;
export let root_url: null | string;
export let container = false;
export let container: boolean = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let loading_status: LoadingStatus;

2
js/app/src/components/Checkbox/Checkbox.svelte
View File

@ -12,7 +12,7 @@
export let label: string = "Checkbox";
export let info: string | undefined = undefined;
export let mode: "static" | "dynamic";
export let container: boolean = false;
export let container: boolean = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let loading_status: LoadingStatus;

2
js/app/src/components/CheckboxGroup/CheckboxGroup.svelte
View File

@ -10,7 +10,7 @@
export let value: Array<string> = [];
export let value_is_output: boolean = false;
export let choices: Array<string>;
export let container: boolean = false;
export let container: boolean = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let mode: "static" | "dynamic";

2
js/app/src/components/ColorPicker/ColorPicker.svelte
View File

@ -14,7 +14,7 @@
export let value: string;
export let value_is_output: boolean = false;
export let show_label: boolean;
export let container: boolean = false;
export let container: boolean = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let loading_status: LoadingStatus;

5
js/app/src/components/Dropdown/Dropdown.svelte
View File

@ -15,7 +15,7 @@
export let max_choices: number;
export let choices: Array<string>;
export let show_label: boolean;
export let container: boolean = false;
export let container: boolean = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let loading_status: LoadingStatus;
@ -30,7 +30,7 @@
}
</script>
<Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
<Block {visible} {elem_id} {elem_classes} padding={container} allow_overflow={false} {scale} {min_width}>
<StatusTracker {...loading_status} />
<Dropdown
@ -43,6 +43,7 @@
{info}
{show_label}
{allow_custom_value}
{container}
on:change
on:input
on:select

2
js/app/src/components/File/File.svelte
View File

@ -30,7 +30,7 @@
export let root_url: null | string;
export let selectable: boolean = false;
export let loading_status: LoadingStatus;
export let container: boolean = false;
export let container: boolean = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;

2
js/app/src/components/Gallery/Gallery.svelte
View File

@ -15,7 +15,7 @@
export let visible: boolean = true;
export let value: (FileData | string | [FileData | string, string])[] | null =
null;
export let container: boolean = false;
export let container: boolean = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let grid_cols: number | Array<number> | undefined = [2];

45
js/app/src/components/Group/Group.svelte
View File

@ -4,30 +4,39 @@
export let visible: boolean = true;
</script>
<div id={elem_id} class={elem_classes.join(" ")} class:hide={!visible}>
<div
id={elem_id}
class='gr-group {elem_classes.join(" ")}'
class:hide={!visible}
>
<div class="styler"
style:--block-radius="0px"
style:--block-border-width="0px"
style:--layout-gap="1px"
style:--form-gap-width="1px"
style:--button-border-width="0px"
style:--button-large-radius="0px"
style:--button-small-radius="0px"
>
<slot />
</div>
</div>
<style>
div {
border: var(--block-border-width) solid var(--border-color-primary);
background: var(--border-color-primary);
border-radius: var(--block-radius);
display: flex;
flex-direction: column;
gap: var(--form-gap-width);
overflow: hidden;
}
div > :global(*:not(.absolute)) {
border-radius: 0px !important;
border: none;
border-radius: 0;
}
div > :global(*:first-child) {
border-top-right-radius: var(--radius-lg) !important;
border-top-left-radius: var(--radius-lg) !important;
}
div > :global(*:last-child) {
border-top-right-radius: var(--radius-lg) !important;
border-top-left-radius: var(--radius-lg) !important;
}
div > :global(* + *:not(.absolute)) {
border-top: none !important;
}
.hide {
display: none;
}
</style>
</style>

2
js/app/src/components/HighlightedText/HighlightedText.svelte
View File

@ -14,7 +14,7 @@
export let show_legend: boolean;
export let color_map: Record<string, string> = {};
export let label: string = "Highlighted Text";
export let container: boolean = false;
export let container: boolean = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let selectable: boolean = false;

2
js/app/src/components/Image/Image.svelte
View File

@ -25,7 +25,7 @@
export let shape: [number, number];
export let brush_radius: number;
export let selectable: boolean = false;
export let container: boolean = false;
export let container: boolean = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let loading_status: LoadingStatus;

2
js/app/src/components/Json/Json.svelte
View File

@ -16,7 +16,7 @@
export let loading_status: LoadingStatus;
export let label: string;
export let show_label: boolean;
export let container: boolean = false;
export let container: boolean = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;

2
js/app/src/components/Label/Label.svelte
View File

@ -15,7 +15,7 @@
confidences?: Array<{ label: string; confidence: number }>;
} = {};
export let label: string = "Label";
export let container: boolean = false;
export let container: boolean = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let loading_status: LoadingStatus;

2
js/app/src/components/Model3D/Model3D.svelte
View File

@ -21,7 +21,7 @@
export let loading_status: LoadingStatus;
export let label: string;
export let show_label: boolean;
export let container: boolean = false;
export let container: boolean = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;

5
js/app/src/components/Number/Number.svelte
View File

@ -9,7 +9,7 @@
export let elem_id: string = "";
export let elem_classes: Array<string> = [];
export let visible: boolean = true;
export let container: boolean = false;
export let container: boolean = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let value: number = 0;
@ -21,7 +21,7 @@
export let value_is_output: boolean = false;
</script>
<Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
<Block {visible} {elem_id} {elem_classes} padding={container} allow_overflow={false} {scale} {min_width}>
<StatusTracker {...loading_status} />
<Number
@ -32,6 +32,7 @@
{show_label}
{minimum}
{maximum}
{container}
disabled={mode === "static"}
on:change
on:input

2
js/app/src/components/Plot/Plot.svelte
View File

@ -17,7 +17,7 @@
export let label: string;
export let show_label: boolean;
export let target: HTMLElement;
export let container: boolean = false;
export let container: boolean = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let theme_mode: ThemeMode;

2
js/app/src/components/Slider/Slider.svelte
View File

@ -10,7 +10,7 @@
export let value: number = 0;
export let label: string = "Slider";
export let info: string | undefined = undefined;
export let container: boolean = false;
export let container: boolean = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let minimum: number;

3
js/app/src/components/Textbox/Textbox.svelte
View File

@ -28,7 +28,7 @@
export let text_align: "left" | "right" | undefined = undefined;
</script>
<Block {visible} {elem_id} {elem_classes} {scale} {min_width} {container}>
<Block {visible} {elem_id} {elem_classes} {scale} {min_width} allow_overflow={false} padding={container}>
{#if loading_status}
<StatusTracker {...loading_status} />
{/if}
@ -46,6 +46,7 @@
max_lines={!max_lines && mode === "static" ? lines + 1 : max_lines}
{placeholder}
{show_copy_button}
{container}
on:change
on:input
on:submit

2
js/app/src/components/TimeSeries/TimeSeries.svelte
View File

@ -42,7 +42,7 @@
export let label: string;
export let show_label: boolean;
export let colors: Array<string>;
export let container: boolean = false;
export let container: boolean = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let loading_status: LoadingStatus;

2
js/app/test/components.test.ts
View File

@ -155,7 +155,7 @@ describe("all components should be invisible when visible=false", () => {
const elem = container.querySelector(`#test-id`);
expect(elem).toHaveClass("hide-container");
expect(elem).toHaveClass("hidden");
});
});

5
js/atoms/src/Block.svelte
View File

@ -1,5 +1,4 @@
<script lang="ts">
export let container: boolean = true;
export let height: number | undefined = undefined;
export let width: number | undefined = undefined;
export let elem_id: string = "";
@ -10,6 +9,7 @@
export let type: "normal" | "fieldset" = "normal";
export let test_id: string | undefined = undefined;
export let explicit_call: boolean = false;
export let container: boolean = true;
export let visible = true;
export let allow_overflow = true;
export let scale: number | null = null;
@ -35,6 +35,7 @@
style:overflow={allow_overflow ? "visible" : "hidden"}
style:flex-grow={scale}
style:min-width={`calc(min(${min_width}px, 100%))`}
style:border-width="var(--block-border-width)"
>
<slot />
</svelte:element>
@ -66,7 +67,7 @@
.hide-container {
margin: 0;
box-shadow: none;
border-width: 0;
--block-border-width: 0;
background: transparent;
padding: 0;
overflow: visible;

4
js/atoms/src/BlockLabel.svelte
View File

@ -38,6 +38,10 @@
font-size: var(--block-label-text-size);
line-height: var(--line-sm);
}
:global(.gr-group) div {
border-top-left-radius: 0;
}
div.float {
position: absolute;
top: var(--block-label-margin);

4
js/button/src/Button.svelte
View File

@ -11,7 +11,7 @@
<button
on:click
class:hide-container={!visible}
class:hidden={!visible}
class="{size} {variant} {elem_classes.join(' ')}"
style:flex-grow={scale}
style:width={scale === 0 ? "fit-content" : null}
@ -49,7 +49,7 @@
cursor: not-allowed;
}
.hide-container {
.hidden {
display: none;
}

5
js/chatbot/src/Index.svelte
View File

@ -18,7 +18,6 @@
right: string;
display: boolean;
}[];
export let container = false;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let label: string;
@ -52,7 +51,7 @@
{elem_classes}
{visible}
padding={false}
{container}
{scale}
{min_width}
{height}
@ -73,7 +72,7 @@
Icon={Chat}
float={false}
label={label || "Chatbot"}
disable={container === false}
/>
{/if}
<ChatBot

13
js/form/src/Dropdown.svelte
View File

@ -14,6 +14,7 @@
export let choices: Array<string>;
export let disabled: boolean = false;
export let show_label: boolean;
export let container: boolean = true;
export let allow_custom_value: boolean = false;
const dispatch = createEventDispatcher<{
@ -171,7 +172,7 @@
}
</script>
<label>
<label class:container>
<BlockTitle {show_label} {info}>{label}</BlockTitle>
<div class="wrap">
@ -253,10 +254,16 @@
</label>
<style>
.wrap {
position: relative;
label:not(.container), label:not(.container) .wrap, label:not(.container) .wrap-inner, label:not(.container) .secondary-wrap, label:not(.container) .token, label:not(.container) input {
height: 100%;
}
.container .wrap {
box-shadow: var(--input-shadow);
border: var(--input-border-width) solid var(--border-color-primary);
}
.wrap {
position: relative;
border-radius: var(--input-radius);
background: var(--input-background-fill);
}

13
js/form/src/Number.svelte
View File

@ -10,6 +10,7 @@
export let label: string;
export let info: string | undefined = undefined;
export let show_label: boolean = true;
export let container: boolean = true;
const dispatch = createEventDispatcher<{
change: number;
@ -45,7 +46,7 @@
</script>
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="block">
<label class="block" class:container>
<BlockTitle {show_label} {info}>{label}</BlockTitle>
<input
type="number"
@ -59,13 +60,19 @@
</label>
<style>
label:not(.container), label:not(.container) > input {
height: 100%;
border: none;
}
.container > input {
border: var(--input-border-width) solid var(--input-border-color);
border-radius: var(--input-radius);
}
input[type="number"] {
display: block;
position: relative;
outline: none !important;
box-shadow: var(--input-shadow);
border: var(--input-border-width) solid var(--input-border-color);
border-radius: var(--input-radius);
background: var(--input-background-fill);
padding: var(--input-padding);
width: 100%;

19
js/form/src/Textbox.svelte
View File

@ -13,6 +13,7 @@
export let info: string | undefined = undefined;
export let disabled = false;
export let show_label: boolean = true;
export let container: boolean = true;
export let max_lines: number;
export let type: "text" | "password" | "email" = "text";
export let show_copy_button: boolean = false;
@ -95,7 +96,7 @@
event: Event | { target: HTMLTextAreaElement | HTMLInputElement }
) {
await tick();
if (lines === max_lines) return;
if (lines === max_lines || !container) return;
let max =
max_lines === undefined
@ -135,7 +136,7 @@
</script>
<!-- svelte-ignore a11y-label-has-associated-control -->
<label>
<label class:container>
<BlockTitle {show_label} {info}>{label}</BlockTitle>
{#if lines === 1 && max_lines === 1}
@ -215,16 +216,12 @@
width: 100%;
}
input[type="text"],
input[type="password"],
input[type="email"],
input,
textarea {
display: block;
position: relative;
outline: none !important;
box-shadow: var(--input-shadow);
border: var(--input-border-width) solid var(--input-border-color);
border-radius: var(--input-radius);
background: var(--input-background-fill);
padding: var(--input-padding);
width: 100%;
@ -232,6 +229,14 @@
font-weight: var(--input-text-weight);
font-size: var(--input-text-size);
line-height: var(--line-sm);
border: none;
}
label:not(.container), label:not(.container) > input, label:not(.container) > textarea {
height: 100%;
}
.container > input, .container > textarea {
border: var(--input-border-width) solid var(--input-border-color);
border-radius: var(--input-radius);
}
input:disabled,
textarea:disabled {

2
js/gallery/src/Gallery.svelte
View File

@ -176,7 +176,7 @@
{show_label}
Icon={Image}
label={label || "Gallery"}
disable={container === false}
/>
{/if}
{#if value === null || _value === null || _value.length === 0}

1
scripts/copy_demos.py
View File

@ -10,6 +10,7 @@ def copy_all_demos(source_dir: str, dest_dir: str):
"audio_debugger",
"altair_plot",
"blocks_essay",
"blocks_group",
"blocks_js_methods",
"blocks_layout",
"blocks_mask",