fix: items render

backend/modelscope_studio/components/antd/radio/group/__init__.py

@@ -28,12 +28,12 @@ def __init__(
             value: Any | None = None,
             props: dict | None = None,
             *,
-            button_style: Literal['outline', 'solid'] | None = 'outline',
+            button_style: Literal['outline', 'solid'] | None = None,
             default_value: Any | None = None,
             disabled: bool | None = None,
             form_name: str | None = None,
             options: list[str] | list[int | float] | list[dict] | None = None,
-            option_type: Literal['default', 'button'] | None = 'default',
+            option_type: Literal['default', 'button'] | None = None,
             size: Literal['small', 'middle', 'large'] | None = None,
             block: bool | None = None,
             root_class_name: str | None = None,

docs/app.py

@@ -140,6 +140,30 @@ def get_docs(file_path: str, type: Literal["antd", "base"]):
         "label": get_text("Splitter", "Splitter 分割面板"),
         "key": "splitter"
     }]
+}, {
+    "label":
+    get_text("Navigation", "导航"),
+    "type":
+    "group",
+    "children": [{
+        "label": get_text("Anchor", "Anchor 锚点"),
+        "key": "anchor"
+    }, {
+        "label": get_text("Breadcrumb", "Breadcrumb 面包屑"),
+        "key": "breadcrumb"
+    }, {
+        "label": get_text("Dropdown", "Dropdown 下拉菜单"),
+        "key": "dropdown"
+    }]
+}, {
+    "label":
+    get_text("Other", "其他"),
+    "type":
+    "group",
+    "children": [{
+        "label": get_text("ConfigProvider", "ConfigProvider 全局化配置"),
+        "key": "config_provider"
+    }]
 }]
 
 

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

@@ -0,0 +1,7 @@
+# Anchor
+
+Hyperlinks to scroll on one page. See [Ant Design](https://ant.design/components/anchor/) for more information.
+
+## Examples
+
+<demo name="basic" fixed></demo>

docs/components/antd/anchor/README.md

@@ -0,0 +1,7 @@
+# Anchor
+
+Hyperlinks to scroll on one page. See [Ant Design](https://ant.design/components/anchor/) for more information.
+
+## Examples
+
+<demo name="basic" fixed></demo>

docs/components/antd/anchor/app.py

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

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

@@ -0,0 +1,38 @@
+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():
+                with antd.Col(span=16):
+                    with ms.Div(elem_style=dict(maxHeight="700px",
+                                                overflow="auto")):
+                        ms.Div(elem_id="part-1",
+                               elem_style=dict(
+                                   height="100vh",
+                                   background="rgba(255,0,0,0.02)"))
+                        ms.Div(elem_id="part-2",
+                               elem_style=dict(
+                                   height="100vh",
+                                   background="rgba(0,255,0,0.02)"))
+                        ms.Div(elem_id="part-3",
+                               elem_style=dict(
+                                   height="100vh",
+                                   background="rgba(0,0,255,0.02)"))
+                with antd.Col(span=8):
+                    with antd.Anchor():
+                        with antd.Anchor.Item(href="#part-1", key="part-1"):
+                            with ms.Slot("title"):
+                                antd.Typography.Title("Part 1")
+                        antd.Anchor.Item(title="Part 2",
+                                         href="#part-2",
+                                         key="part-2")
+                        antd.Anchor.Item(title="Part 3",
+                                         href="#part-3",
+                                         key="part-3")
+
+if __name__ == "__main__":
+    demo.queue().launch()

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

@@ -0,0 +1,7 @@
+# Breadcrumb
+
+Display the current location within a hierarchy. And allow going back to states higher up in the hierarchy. See [Ant Design](https://ant.design/components/breadcrumb/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>

docs/components/antd/breadcrumb/README.md

@@ -0,0 +1,7 @@
+# Breadcrumb
+
+Display the current location within a hierarchy. And allow going back to states higher up in the hierarchy. See [Ant Design](https://ant.design/components/breadcrumb/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>

docs/components/antd/breadcrumb/app.py

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

docs/components/antd/breadcrumb/demos/basic.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.Breadcrumb():
+                antd.Breadcrumb.Item(title="Ant Design")
+                with antd.Breadcrumb.Item():
+                    with ms.Slot("title"):
+                        antd.Button(type="link", href="#")
+                with antd.Breadcrumb.Item():
+                    with ms.Slot("title"):
+                        antd.Button(type="link", href="General")
+                    with ms.Slot("menu.items"):
+                        with antd.Menu.Item(key="1"):
+                            with ms.Slot("label"):
+                                antd.Button(
+                                    "General",
+                                    type="link",
+                                    href="https://modelscope.cn",
+                                    href_target="_blank",
+                                )
+                        with antd.Menu.Item(key="2"):
+                            with ms.Slot("label"):
+                                antd.Button(
+                                    "Layout",
+                                    type="link",
+                                    href="https://ant.design/",
+                                    href_target="_blank",
+                                )
+                        with antd.Menu.Item(key="3"):
+                            with ms.Slot("label"):
+                                antd.Button(
+                                    "Navigation",
+                                    type="link",
+                                    href="https://www.alipay.com/",
+                                    href_target="_blank",
+                                )
+                antd.Breadcrumb.Item(title="Button")
+
+if __name__ == "__main__":
+    demo.queue().launch()

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

@@ -0,0 +1,7 @@
+# ConfigProvider
+
+Provide a uniform configuration support for components. See [Ant Design](https://ant.design/components/config-provider/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>

docs/components/antd/config_provider/README.md

@@ -0,0 +1,7 @@
+# ConfigProvider
+
+Provide a uniform configuration support for components. See [Ant Design](https://ant.design/components/config-provider/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>

docs/components/antd/config_provider/app.py

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

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

@@ -0,0 +1,47 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+default_locale = "en_US"
+default_direction = 'ltr'
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider(
+                locale=default_locale,
+                direction=default_direction) as config_provider:
+            with ms.Div(elem_style=dict(marginBottom=16)):
+                ms.Span("change locale of components:",
+                        elem_style=dict(marginInlineEnd=16))
+                with antd.Radio.Group(value=default_locale) as locale:
+                    with antd.Radio("en_US"):
+                        ms.Text("English")
+                    with antd.Radio("zh_CN"):
+                        ms.Text("中文")
+                    with antd.Radio("jp_JP"):
+                        ms.Text("日本語")
+                    with antd.Radio("kr_KR"):
+                        ms.Text("한국어")
+                with antd.Space(wrap=True):
+                    antd.DatePicker()
+                    antd.DatePicker.RangePicker()
+                    antd.TimePicker()
+                    antd.TimePicker.RangePicker()
+            with ms.Div(elem_style=dict(marginBottom=16)):
+                ms.Span("change direction of components:",
+                        elem_style=dict(marginInlineEnd=16))
+                with antd.Radio.Group(value=default_direction) as direction:
+                    with antd.Radio.Button("ltr"):
+                        ms.Text("LTR")
+                    with antd.Radio.Button("rtl"):
+                        ms.Text("RTL")
+                antd.Input(placeholder="do something...")
+        locale.change(fn=lambda _locale: gr.update(locale=_locale),
+                      inputs=[locale],
+                      outputs=[config_provider])
+        direction.change(fn=lambda _direction: gr.update(direction=_direction),
+                         inputs=[direction],
+                         outputs=[config_provider])
+
+if __name__ == "__main__":
+    demo.queue().launch()

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

@@ -0,0 +1,7 @@
+# Dropdown
+
+A dropdown list. See [Ant Design](https://ant.design/components/dropdown/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>

docs/components/antd/dropdown/README.md

@@ -0,0 +1,7 @@
+# Dropdown
+
+A dropdown list. See [Ant Design](https://ant.design/components/dropdown/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>

docs/components/antd/dropdown/app.py

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

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

@@ -0,0 +1,51 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+
+def Menu():
+    with antd.Menu.Item(key="1"):
+        with ms.Slot("label"):
+            antd.Button(
+                "General",
+                type="link",
+                href="https://modelscope.cn",
+                href_target="_blank",
+            )
+    with antd.Menu.Item(key="2"):
+        with ms.Slot("label"):
+            antd.Button(
+                "Layout",
+                type="link",
+                href="https://ant.design/",
+                href_target="_blank",
+            )
+    with antd.Menu.Item(key="3"):
+        with ms.Slot("label"):
+            antd.Button(
+                "Navigation",
+                type="link",
+                href="https://www.alipay.com/",
+                href_target="_blank",
+            )
+
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            with antd.Space():
+                with antd.Dropdown():
+                    with antd.Button(type="text"):
+                        with antd.Space():
+                            ms.Text("Hover me")
+                            antd.Icon("DownOutlined")
+                    with ms.Slot("menu.items"):
+                        Menu()
+                with antd.Dropdown.Button(danger=True):
+                    ms.Text("Danger")
+                    with ms.Slot("menu.items"):
+                        Menu()
+
+if __name__ == "__main__":
+    demo.queue().launch()

frontend/antd/anchor/anchor.tsx

@@ -31,7 +31,12 @@ export const Anchor = sveltify<
             // ["title"]
             return (
               items ||
-              renderItems<NonNullable<AnchorProps['items']>[number]>(slotItems)
+              renderItems<NonNullable<AnchorProps['items']>[number]>(
+                slotItems,
+                {
+                  clone: true,
+                }
+              )
             );
           }, [items, slotItems])}
           getContainer={getContainerFunction}

frontend/antd/auto-complete/auto-complete.tsx

@@ -83,6 +83,7 @@ export const AutoComplete = sveltify<
                 NonNullable<GetProps<typeof AAutoComplete>['options']>[number]
               >(optionItems, {
                 children: 'options',
+                clone: true,
               })
             );
           }, [optionItems, options])}

frontend/antd/breadcrumb/breadcrumb.tsx

@@ -34,7 +34,12 @@ export const Breadcrumb = sveltify<
             : props.itemRender
         }
         items={useMemo(() => {
-          return items || renderItems<ItemType>(slotItems);
+          return (
+            items ||
+            renderItems<ItemType>(slotItems, {
+              clone: true,
+            })
+          );
         }, [items, slotItems])}
         separator={
           slots.separator ? (

frontend/antd/breadcrumb/item/BreadcrumbItem.svelte

@@ -72,7 +72,7 @@
         $mergedProps.props.menu?.items ||
         $mergedProps.restProps.menu?.items ||
         $menuItems.length > 0
-          ? renderItems($menuItems)
+          ? renderItems($menuItems, { clone: true })
           : undefined,
       expandIcon:
         renderParamsSlot(
@@ -99,7 +99,7 @@
         $mergedProps.props.dropdownProps?.menu?.items ||
         $mergedProps.restProps.dropdownProps?.menu?.items ||
         $dropdownMenuItems.length > 0
-          ? renderItems($dropdownMenuItems)
+          ? renderItems($dropdownMenuItems, { clone: true })
           : undefined,
       expandIcon:
         renderParamsSlot(

frontend/antd/button/group/button.group.less

@@ -1,4 +1,4 @@
-.ms-gr-antd-container {
+.ms-gr-container {
   .ms-gr-antd-button-group {
     react-portal-target {
       &:not(:first-child) {

frontend/antd/cascader/cascader.tsx

@@ -83,7 +83,8 @@ export const Cascader = sveltify<
             return (
               options ||
               renderItems<NonNullable<CascaderProps['options']>[number]>(
-                optionItems
+                optionItems,
+                { clone: true }
               )
             );
           }, [options, optionItems])}