docs: update

backend/modelscope_studio/components/antd/checkbox/group/option/__init__.py

@@ -19,7 +19,7 @@ class AntdCheckboxGroupOption(ModelScopeLayoutComponent):
 
     def __init__(
             self,
-            value: str | None = None,
+            value: str | int | float | bool | None = None,
             props: dict | None = None,
             *,
             label: str | None = None,

docs/app.py

@@ -154,6 +154,15 @@ def get_docs(file_path: str, type: Literal["antd", "base"]):
     }, {
         "label": get_text("Dropdown", "Dropdown 下拉菜单"),
         "key": "dropdown"
+    }, {
+        "label": get_text("Menu", "Menu 导航菜单"),
+        "key": "menu"
+    }, {
+        "label": get_text("Pagination", "Pagination 分页"),
+        "key": "pagination"
+    }, {
+        "label": get_text("Steps", "Steps 步骤条"),
+        "key": "steps"
     }]
 }, {
     "label":

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

@@ -10,38 +10,62 @@
         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...")
+            with antd.Card():
+                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...")
+                with ms.Div(elem_style=dict(marginBottom=16)):
+                    ms.Span("change theme of components:",
+                            elem_style=dict(marginInlineEnd=16))
+                    with antd.Space():
+                        with antd.Checkbox.Group() as theme:
+                            antd.Checkbox.Group.Option("dark", label="dark")
+                            antd.Checkbox.Group.Option("compact",
+                                                       label="compact")
+                        ms.Text("Primary Color: ")
+                        color = antd.ColorPicker()
+
+                    antd.Button("Primary Button", type="primary", block=True)
+
         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])
+        gr.on([theme.change, color.change],
+              fn=lambda _theme, _color: gr.update(theme=dict(
+                  token=dict(colorPrimary=_color),
+                  algorithm=dict(dark=True
+                                 if _theme and 'dark' in _theme else False,
+                                 compact=True
+                                 if _theme and 'compact' or [] else False))),
+              inputs=[theme, color],
+              outputs=[config_provider])
 
 if __name__ == "__main__":
     demo.queue().launch()

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

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

docs/components/antd/menu/README.md

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

docs/components/antd/menu/app.py

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

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

@@ -0,0 +1,64 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+default_mode = 'horizontal'
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            mode_select = antd.Select(value=default_mode,
+                                      options=[{
+                                          "label": "horizontal",
+                                          "value": "horizontal"
+                                      }, {
+                                          "label": "inline",
+                                          "value": "inline"
+                                      }, {
+                                          "label": "vertical",
+                                          "value": "vertical"
+                                      }],
+                                      elem_style=dict(width=200))
+            inline_collapsed_switch = antd.Switch(
+                False,
+                checked_children="Inline Collapsed",
+                un_checked_children="Inline Expanded")
+            with antd.Menu(selected_keys=[default_mode],
+                           mode="horizontal") as menu:
+                with antd.Menu.Item(key="mail", label="Navigation One"):
+                    with ms.Slot("icon"):
+                        antd.Icon("MailOutlined")
+                with antd.Menu.Item(key="app",
+                                    label="Navigation Two",
+                                    disabled=True):
+                    with ms.Slot("icon"):
+                        antd.Icon("AppstoreOutlined")
+                with antd.Menu.Item(key="SubMenu",
+                                    label="Navigation Three - Submenu"):
+                    with ms.Slot("icon"):
+                        antd.Icon("SettingOutlined")
+                    with antd.Menu.Item(type="group", label="Item 1"):
+                        antd.Menu.Item(label="Option 1", key="setting:1")
+                        antd.Menu.Item(label="Option 2", key="setting:2")
+                    with antd.Menu.Item(type="group", label="Item 2"):
+                        antd.Menu.Item(label="Option 3", key="setting:3")
+                        antd.Menu.Item(label="Option 4", key="setting:4")
+                with antd.Menu.Item(key="modelscope",
+                                    label="Navigation Four - Link"):
+                    with ms.Slot("label"):
+                        antd.Button("Navigation Four - Link",
+                                    type="link",
+                                    href="https://modelscope.cn",
+                                    href_target="_blank")
+            mode_select.change(
+                fn=lambda _mode_select: gr.update(mode=_mode_select),
+                inputs=[mode_select],
+                outputs=[menu])
+            inline_collapsed_switch.change(
+                fn=lambda _inline_collapsed_switch: gr.update(
+                    inline_collapsed=_inline_collapsed_switch),
+                inputs=[inline_collapsed_switch],
+                outputs=[menu])
+if __name__ == "__main__":
+    demo.queue().launch()

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

@@ -0,0 +1,7 @@
+# Pagination
+
+A long list can be divided into several pages, and only one page will be loaded at a time. See [Ant Design](https://ant.design/components/pagination/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>

docs/components/antd/pagination/README.md

@@ -0,0 +1,7 @@
+# Pagination
+
+A long list can be divided into several pages, and only one page will be loaded at a time. See [Ant Design](https://ant.design/components/pagination/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>

docs/components/antd/pagination/app.py

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

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

@@ -0,0 +1,15 @@
+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():
+            antd.Pagination(total=85,
+                            show_quick_jumper=True,
+                            show_size_changer=True,
+                            show_total="(total) => `Total ${total} items``")
+
+if __name__ == "__main__":
+    demo.queue().launch()

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

@@ -0,0 +1,7 @@
+# Steps
+
+A navigation bar that guides users through the steps of a task. See [Ant Design](https://ant.design/components/steps/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>

docs/components/antd/steps/README.md

@@ -0,0 +1,7 @@
+# Steps
+
+A navigation bar that guides users through the steps of a task. See [Ant Design](https://ant.design/components/steps/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>

docs/components/antd/steps/app.py

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

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

@@ -0,0 +1,48 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+description = "This is a description."
+
+
+def on_next(_state):
+    _state["current"] += 1
+    return {
+        steps: gr.update(current=_state["current"]),
+        prev_btn: gr.update(visible=True if _state["current"] > 0 else False),
+        next_btn: gr.update(visible=True if _state["current"] < 3 else False)
+    }
+
+
+def on_prev(_state):
+    _state["current"] -= 1
+    return {
+        steps: gr.update(current=_state["current"]),
+        prev_btn: gr.update(visible=True if _state["current"] > 0 else False),
+        next_btn: gr.update(visible=True if _state["current"] < 3 else False)
+    }
+
+
+with gr.Blocks() as demo:
+    state = gr.State({"current": 0})
+    with ms.Application():
+        with antd.ConfigProvider():
+            with antd.Steps(0) as steps:
+                antd.Steps.Item(title="Waiting", description=description)
+                antd.Steps.Item(title="In Progress",
+                                sub_title="Left 00:00:08",
+                                description=description)
+                antd.Steps.Item(title="Finished", description=description)
+            prev_btn = antd.Button("Prev", visible=False)
+            next_btn = antd.Button("Next", type="primary")
+
+            prev_btn.click(fn=on_prev,
+                           inputs=[state],
+                           outputs=[steps, prev_btn, next_btn])
+            next_btn.click(fn=on_next,
+                           inputs=[state],
+                           outputs=[steps, prev_btn, next_btn])
+
+if __name__ == "__main__":
+    demo.queue().launch()

frontend/antd/config-provider/config-provider.tsx

@@ -73,6 +73,7 @@ export const ConfigProvider = sveltify<
       dark: themeMode === 'dark' ? true : false,
       ...(props.theme?.algorithm || {}),
     };
+
     const getPopupContainerFunction = useFunction(getPopupContainer);
     const getTargetContainerFunction = useFunction(getTargetContainer);
     const renderEmptyFunction = useFunction(renderEmpty);
@@ -105,16 +106,16 @@ export const ConfigProvider = sveltify<
                   })
                 : renderEmptyFunction
             }
+            // switch bug
+            // key={`${algorithm.dark}`}
             theme={{
               cssVar: true,
               ...props.theme,
               algorithm: Object.keys(algorithm)
                 .map((algo) => {
                   switch (algo) {
                     case 'dark':
-                      return algorithm[algo]
-                        ? theme.darkAlgorithm
-                        : theme.defaultAlgorithm;
+                      return algorithm[algo] ? theme.darkAlgorithm : null;
                     case 'compact':
                       return algorithm[algo] ? theme.compactAlgorithm : null;
                     default:

frontend/antd/pagination/Index.svelte

@@ -23,10 +23,6 @@
   $: updatedProps.update((prev) => ({ ...prev, ...props }));
   export let _internal: Record<string, any> = {};
 
-  export let value: {
-    page?: number;
-    page_size?: number;
-  } = {};
   export let as_item: string | undefined;
   // gradio properties
   export let visible = true;
@@ -43,7 +39,6 @@
     elem_classes,
     elem_style,
     as_item,
-    value,
     restProps: $$restProps,
   });
   const setSlotParams = getSetSlotParamsFn();
@@ -57,7 +52,6 @@
     elem_classes,
     elem_style,
     as_item,
-    value,
     restProps: $$restProps,
   });
 </script>

frontend/svelte-preprocess-react/component.ts

@@ -114,7 +114,7 @@ export function bindEvents<
             serializedPayload = payload.map((item) => {
               if (item && typeof item === 'object') {
                 return Object.fromEntries(
-                  Object.entries(item).filter(([_, v]) => {
+                  Object.entries(item).filter(([, v]) => {
                     try {
                       JSON.stringify(v);
                       return true;

frontend/utils/hooks/useValueChange.ts

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { isEqual } from 'lodash-es';
 
 export interface UseValueChangeProps<T, P> {
   value: T;
@@ -19,7 +20,7 @@ export function useValueChange<T, P>({
   }, [mergedValue]);
 
   useEffect(() => {
-    if (value !== mergedValueRef.current) {
+    if (!isEqual(value, mergedValueRef.current)) {
       setMergedValue(value);
     }
   }, [value]);