fix: sub index for Each & Radio value mapping

docs/app.py

@@ -124,6 +124,12 @@ def get_docs(file_path: str, type: Literal["antd", "base"]):
     "children": [{
         "label": get_text("Divider", "Divider 分割线"),
         "key": "divider"
+    }, {
+        "label": get_text("Flex", "Flex 弹性布局"),
+        "key": "flex"
+    }, {
+        "label": get_text("Grid", "Grid 栅格布局"),
+        "key": "grid"
     }]
 }]
 
@@ -143,17 +149,23 @@ def logo():
 
 def more_components():
     with antd.Button(type="link",
+                     block=True,
                      href="https://ant.design/components/overview/",
-                     href_target="_blank"):
+                     href_target="_blank",
+                     elem_style=dict(display="block",
+                                     textAlign="left",
+                                     whiteSpace="nowrap",
+                                     textOverflow="ellipsis",
+                                     overflow="hidden")):
         ms.Text(get_text("More Components", "更多组件"))
 
         with ms.Slot("icon"):
-            antd.Icon("ExportOutlined")
+            antd.Icon("ExportOutlined", elem_style=dict(marginRight=4))
 
 
 tabs = [
     {
-        "label": get_text("Overview", "预览"),
+        "label": get_text("Overview", "概览"),
         "key": "index",
         "default_active_key": "modelscope_studio",
         "menus": index_menu_items

docs/components/antd/flex/README-zh_CN.md

@@ -0,0 +1,8 @@
+# Flex
+
+A flex layout container for alignment. See [Ant Design](https://ant.design/components/flex/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="align"></demo>

docs/components/antd/flex/README.md

@@ -0,0 +1,8 @@
+# Flex
+
+A flex layout container for alignment. See [Ant Design](https://ant.design/components/flex/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="align"></demo>

docs/components/antd/flex/app.py

@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+    docs.render().queue().launch()

docs/components/antd/flex/demos/align.py

@@ -0,0 +1,45 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            with antd.Flex(gap="middle", align="start", vertical=True):
+                ms.Div("Select justify:")
+                justify_segmented = antd.Segmented('flex-start',
+                                                   options=[
+                                                       'flex-start',
+                                                       'center',
+                                                       'flex-end',
+                                                       'space-between',
+                                                       'space-around',
+                                                       'space-evenly',
+                                                   ])
+                ms.Div("Select align:")
+                align_segmented = antd.Segmented(
+                    'flex-start', options=['flex-start', 'center', 'flex-end'])
+                with antd.Flex(elem_style=dict(
+                        width='100%',
+                        height=120,
+                        borderRadius=6,
+                        border='1px solid #40a9ff',
+                ),
+                               justify="flex-start",
+                               align="flex-start") as flex:
+                    antd.Button("Primary", type="primary")
+                    antd.Button("Primary", type="primary")
+                    antd.Button("Primary", type="primary")
+                    antd.Button("Primary", type="primary")
+                justify_segmented.change(fn=lambda _justify_segmented: gr.
+                                         update(justify=_justify_segmented),
+                                         inputs=[justify_segmented],
+                                         outputs=[flex])
+                align_segmented.change(fn=lambda _align_segmented: gr.update(
+                    align=_align_segmented),
+                                       inputs=[align_segmented],
+                                       outputs=[flex])
+
+if __name__ == "__main__":
+    demo.queue().launch()

docs/components/antd/flex/demos/basic.py

@@ -0,0 +1,26 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            with antd.Flex(gap="middle", vertical=True):
+                with antd.Radio.Group("horizontal") as radio_group:
+                    with antd.Radio("horizontal"):
+                        ms.Text("horizontal")
+                    with antd.Radio("vertical"):
+                        ms.Text("vertical")
+                with antd.Flex(vertical=False) as flex:
+                    for i in range(4):
+                        ms.Div(elem_style=dict(height=54,
+                                               width="25%",
+                                               backgroundColor='#1677ff' if i %
+                                               2 else '#1677ffbf'))
+                radio_group.change(fn=lambda _radio_group: gr.update(
+                    vertical=True if _radio_group == "vertical" else False),
+                                   inputs=[radio_group],
+                                   outputs=[flex])
+if __name__ == "__main__":
+    demo.queue().launch()

docs/components/antd/grid/README-zh_CN.md

@@ -0,0 +1,8 @@
+# Grid
+
+24 Grids System. See [Ant Design](https://ant.design/components/grid/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="playground" title="Playground"></demo>

docs/components/antd/grid/README.md

@@ -0,0 +1,8 @@
+# Grid
+
+24 Grids System. See [Ant Design](https://ant.design/components/grid/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="playground" title="Playground"></demo>

docs/components/antd/grid/app.py

@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+    docs.render().queue().launch()

docs/components/antd/grid/demos/basic.py

@@ -0,0 +1,25 @@
+import json
+
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            with antd.Row(gutter=[6, 10]):
+                with antd.Col(span=6):
+                    ms.Text("Col-6")
+                with antd.Col(span=12):
+                    ms.Text("Col-12")
+                with antd.Col(span=6):
+                    ms.Text("Col-6")
+                with antd.Col(span=6):
+                    ms.Text("Col-6")
+                with antd.Col(span=12):
+                    ms.Text("Col-12")
+                with antd.Col(span=6):
+                    ms.Text("Col-6")
+if __name__ == "__main__":
+    demo.queue().launch()

docs/components/antd/grid/demos/playground.py

@@ -0,0 +1,90 @@
+import json
+
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+gutters = {}
+vgutters = {}
+col_counts = {}
+
+for i, v in enumerate([8, 16, 24, 32, 40, 48]):
+    gutters[str(i)] = vgutters[str(i)] = v
+
+for i, v in enumerate([2, 3, 4, 6, 8, 12]):
+    col_counts[str(i)] = v
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            ms.Span("Horizontal Gutter (px): ")
+            with ms.Div(elem_style=dict(width="50%")):
+                horizontal_slider = antd.Slider(
+                    value=1,
+                    min=0,
+                    max=len(gutters) - 1,
+                    marks=gutters,
+                    step=None,
+                    tooltip=dict(
+                        formatter=f"(value) => ({json.dumps(gutters)}[value])")
+                )
+            ms.Span("Vertical Gutter (px): ")
+            with ms.Div(elem_style=dict(width="50%")):
+                vertical_slider = antd.Slider(
+                    value=1,
+                    min=0,
+                    max=len(vgutters) - 1,
+                    marks=vgutters,
+                    step=None,
+                    tooltip=dict(
+                        formatter=f"(value) => ({json.dumps(vgutters)}[value])"
+                    ))
+            ms.Span("Column Count: ")
+            with ms.Div(elem_style=dict(width="50%", marginBottom=48)):
+                count_slider = antd.Slider(
+                    value=1,
+                    min=0,
+                    max=len(col_counts) - 1,
+                    marks=col_counts,
+                    step=None,
+                    tooltip=dict(
+                        formatter=
+                        f"(value) => ({json.dumps(col_counts)}[value])"))
+            with antd.Row(gutter=[gutters["1"], vgutters["1"]]) as row:
+                with ms.Each(value=[{
+                        "span": 8
+                }, {
+                        "span": 8
+                }, {
+                        "span": 8
+                }] * 2) as cols:
+                    with antd.Col(elem_style=dict(background="transparent",
+                                                  border=0)):
+                        ms.Div("Column",
+                               elem_style=dict(height=120,
+                                               fontSize=14,
+                                               lineHeight='120px',
+                                               background="#0092ff",
+                                               borderRadius=4,
+                                               color="#fff",
+                                               textAlign='center'))
+
+            def on_change(_horizontal_slider, _vertical_slider, _count_slider):
+                return gr.update(gutter=[
+                    gutters[str(_horizontal_slider)], vgutters[str(
+                        _vertical_slider)]
+                ]), gr.update(
+                    value=[{
+                        "span": int(24 / col_counts[str(_count_slider)])
+                    } for _ in range(col_counts[str(_count_slider)])] * 2)
+
+            gr.on([
+                horizontal_slider.change, vertical_slider.change,
+                count_slider.change
+            ],
+                  fn=on_change,
+                  inputs=[horizontal_slider, vertical_slider, count_slider],
+                  outputs=[row, cols])
+if __name__ == "__main__":
+    demo.queue().launch()

docs/helper/Site.py

@@ -59,7 +59,7 @@ def on_tab_menu_select(e: gr.EventData):
   padding: 0 !important;
 }
 """) as demo:
-            with ms.Application():
+            with ms.Application() as app:
                 with antd.ConfigProvider():
                     with antd.Layout(elem_style=dict(
                             height=
@@ -107,18 +107,22 @@ def on_tab_menu_select(e: gr.EventData):
                                                 overflow="auto")):
                                             tab["content"].render()
                                     elif "menus" in tab:
+
                                         # menus render
                                         with antd.Layout(elem_style=dict(
                                                 height='100%')):
                                             with antd.Layout.Sider(
+                                                    collapsed=False,
+                                                    collapsible=True,
+                                                    trigger=None,
                                                     elem_style=dict(
                                                         height=
                                                         "calc(100vh - 64px)",
                                                         overflow="auto",
                                                         position="relative",
                                                         backgroundColor=
                                                         "var(--ms-gr-ant-color-bg-container)"
-                                                    )):
+                                                    )) as layout_sider:
                                                 sider_menu = antd.Menu(
                                                     selected_keys=[
                                                         tab.get(
@@ -191,6 +195,14 @@ def on_layout_menu_select(
                                         sider_menu, layout_content_tabs,
                                         *docs_tabs
                                     ])
+
+                                def on_app_mount(e: gr.EventData):
+                                    screen_width = e._data["screen"]["width"]
+                                    return gr.update(
+                                        collapsed=screen_width < 576)
+
+                                app.mount(on_app_mount, outputs=[layout_sider])
+
                         tab_menu.select(
                             fn=on_tab_menu_select,
                             outputs=[tab_menu, tabs, *tab_components])