docs: update docs

modelscope · Nov 27, 2024 · 687b8ba · 687b8ba
1 parent d95225d
commit 687b8ba
Show file tree

Hide file tree

Showing 18 changed files with 297 additions and 25 deletions.
diff --git a/backend/modelscope_studio/components/antd/color_picker/__init__.py b/backend/modelscope_studio/components/antd/color_picker/__init__.py
@@ -38,22 +38,21 @@ class AntdColorPicker(ModelScopeDataLayoutComponent):
 
     def __init__(
             self,
-            value: str | None = None,
+            value: str | list[dict] | None = None,
             props: dict | None = None,
             *,
             value_format: Literal['hex', 'rgb', 'hsb'] = 'hex',
             allow_clear: bool = False,
             arrow: bool | dict = True,
             presets: list[dict] | None = None,
-            preset_items: list[dict] | None = None,
             disabled: bool | None = None,
             disabled_alpha: bool | None = None,
             destroy_tooltip_on_hide: bool | None = None,
             format: Literal['hex', 'rgb', 'hsb'] | None = 'hex',
             mode: Literal['single', 'gradient']
         | list[Literal['single', 'gradient']] | None = 'single',
             open: bool | None = None,
-            default_value: str | None = None,
+            default_value: str | list[dict] | None = None,
             default_format: Literal['hex', 'rgb', 'hsb'] | None = None,
             show_text: bool | str | None = None,
             placement: Literal['bottomLeft', 'bottomRight', 'topLeft',
@@ -84,7 +83,6 @@ def __init__(
         self.allow_clear = allow_clear
         self.arrow = arrow
         self.presets = presets
-        self.preset_items = preset_items
         self.disabled = disabled
         self.disabled_alpha = disabled_alpha
         self.destroy_tooltip_on_hide = destroy_tooltip_on_hide
@@ -107,13 +105,30 @@ def skip_api(self):
         return False
 
     def api_info(self) -> dict[str, Any]:
-        return {"type": "string"}
-
-    def preprocess(self, payload: str) -> str:
+        return {
+            "anyOf": [{
+                "type": "string"
+            }, {
+                "type": "array",
+                "items": {
+                    "type": "object",
+                    "properties": {
+                        "color": {
+                            "type": "string"
+                        },
+                        "percent": {
+                            "type": "number"
+                        }
+                    },
+                }
+            }]
+        }
+
+    def preprocess(self, payload: str | list[dict]) -> str | list[dict]:
 
         return payload
 
-    def postprocess(self, value: str) -> str:
+    def postprocess(self, value: str | list[dict]) -> str | list[dict]:
 
         return value
 

diff --git a/docs/app.py b/docs/app.py
@@ -177,6 +177,15 @@ def get_docs(file_path: str, type: Literal["antd", "base"]):
     }, {
         "label": get_text("Cascader", "Cascader 级联选择"),
         "key": "cascader"
+    }, {
+        "label": get_text("Checkbox", "Checkbox 多选框"),
+        "key": "checkbox"
+    }, {
+        "label": get_text("ColorPicker", "ColorPicker 颜色选择器"),
+        "key": "color_picker"
+    }, {
+        "label": get_text("DatePicker", "DatePicker 日期选择框"),
+        "key": "date_picker"
     }, {
         "label": get_text("Select", "Select 选择器"),
         "key": "select"

diff --git a/docs/components/antd/checkbox/README-zh_CN.md b/docs/components/antd/checkbox/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Checkbox
+
+Collect user's choices. See [Ant Design](https://ant.design/components/checkbox/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/docs/components/antd/checkbox/README.md b/docs/components/antd/checkbox/README.md
@@ -0,0 +1,7 @@
+# Checkbox
+
+Collect user's choices. See [Ant Design](https://ant.design/components/checkbox/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/docs/components/antd/checkbox/app.py b/docs/components/antd/checkbox/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+    docs.render().queue().launch()
diff --git a/docs/components/antd/checkbox/demos/basic.py b/docs/components/antd/checkbox/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.Checkbox():
+                ms.Text("Checkbox")
+            antd.Divider("Checkbox Group")
+            with antd.Space(direction="vertical"):
+                antd.Checkbox.Group(value=["Apple"],
+                                    options=[
+                                        {
+                                            "label": 'Apple',
+                                            "value": 'Apple'
+                                        },
+                                        {
+                                            "label": 'Pear',
+                                            "value": 'Pear'
+                                        },
+                                        {
+                                            "label": 'Orange',
+                                            "value": 'Orange',
+                                            "disabled": True
+                                        },
+                                    ])
+                with antd.Checkbox.Group(value=["Pear", "Apple"]):
+                    with antd.Checkbox.Group.Option(value="Apple"):
+                        with ms.Slot("label"):
+                            antd.Typography.Text("Apple", type="success")
+                    antd.Checkbox.Group.Option(value="Pear", label="Pear")
+                    antd.Checkbox.Group.Option(value="Orange",
+                                               disabled=True,
+                                               label="Orange")
+if __name__ == "__main__":
+    demo.queue().launch()
diff --git a/docs/components/antd/color_picker/README-zh_CN.md b/docs/components/antd/color_picker/README-zh_CN.md
@@ -0,0 +1,8 @@
+# ColorPicker
+
+Used for color selection. See [Ant Design](https://ant.design/components/color-picker/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="preset" title="Preset Colors"></demo>
diff --git a/docs/components/antd/color_picker/README.md b/docs/components/antd/color_picker/README.md
@@ -0,0 +1,8 @@
+# ColorPicker
+
+Used for color selection. See [Ant Design](https://ant.design/components/color-picker/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="preset" title="Preset Colors"></demo>
diff --git a/docs/components/antd/color_picker/app.py b/docs/components/antd/color_picker/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+    docs.render().queue().launch()
diff --git a/docs/components/antd/color_picker/demos/basic.py b/docs/components/antd/color_picker/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.Space():
+                antd.ColorPicker(value="#816DF8")
+                antd.ColorPicker(value="#816DF8", show_text=True)
+                antd.ColorPicker(value=[
+                    {
+                        "color": 'rgb(16, 142, 233)',
+                        "percent": 0,
+                    },
+                    {
+                        "color": 'rgb(135, 208, 104)',
+                        "percent": 100,
+                    },
+                ],
+                                 show_text=True,
+                                 allow_clear=True,
+                                 mode="gradient")
+if __name__ == "__main__":
+    demo.queue().launch()
diff --git a/docs/components/antd/color_picker/demos/preset.py b/docs/components/antd/color_picker/demos/preset.py
@@ -0,0 +1,56 @@
+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.Space():
+                antd.ColorPicker(value="#816DF8",
+                                 presets=[{
+                                     "label":
+                                     "primary",
+                                     "colors": [
+                                         "#e6f4ff", "#bae0ff", "#91caff",
+                                         "#69b1ff", "#4096ff", "#1677ff",
+                                         "#0958d9", "#003eb3", "#002c8c",
+                                         "#001d66"
+                                     ]
+                                 }, {
+                                     "label":
+                                     "red",
+                                     "colors": [
+                                         "#fff1f0", "#ffccc7", "#ffa39e",
+                                         "#ff7875", "#ff4d4f", "#f5222d",
+                                         "#cf1322", "#a8071a", "#820014",
+                                         "#5c0011"
+                                     ]
+                                 }, {
+                                     "label":
+                                     "green",
+                                     "colors": [
+                                         "#f6ffed", "#d9f7be", "#b7eb8f",
+                                         "#95de64", "#73d13d", "#52c41a",
+                                         "#389e0d", "#237804", "#135200",
+                                         "#092b00"
+                                     ]
+                                 }])
+                with antd.ColorPicker(value="#816DF8"):
+                    with ms.Slot("presets"):
+                        with antd.ColorPicker.Preset(colors=[
+                                "#e6f4ff", "#bae0ff", "#91caff", "#69b1ff",
+                                "#4096ff", "#1677ff", "#0958d9", "#003eb3",
+                                "#002c8c", "#001d66"
+                        ]):
+                            with ms.Slot("label"):
+                                antd.Typography.Text("Primary", type="success")
+                        antd.ColorPicker.Preset(colors=[
+                            "#fff1f0", "#ffccc7", "#ffa39e", "#ff7875",
+                            "#ff4d4f", "#f5222d", "#cf1322", "#a8071a",
+                            "#820014", "#5c0011"
+                        ],
+                                                label="red")
+
+if __name__ == "__main__":
+    demo.queue().launch()
diff --git a/docs/components/antd/date_picker/README-zh_CN.md b/docs/components/antd/date_picker/README-zh_CN.md
@@ -0,0 +1,8 @@
+# DatePicker
+
+To select or input a date. See [Ant Design](https://ant.design/components/date-picker/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="ranger_picker" title="Ranger Picker"></demo>
diff --git a/docs/components/antd/date_picker/README.md b/docs/components/antd/date_picker/README.md
@@ -0,0 +1,8 @@
+# DatePicker
+
+To select or input a date. See [Ant Design](https://ant.design/components/date-picker/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="ranger_picker" title="Ranger Picker"></demo>
diff --git a/docs/components/antd/date_picker/app.py b/docs/components/antd/date_picker/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+    docs.render().queue().launch()
diff --git a/docs/components/antd/date_picker/demos/basic.py b/docs/components/antd/date_picker/demos/basic.py
@@ -0,0 +1,36 @@
+import time
+
+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.Space(direction="vertical"):
+                antd.DatePicker()
+                antd.DatePicker(picker="week")
+                antd.DatePicker(picker="month")
+                antd.DatePicker(picker="quarter")
+                antd.DatePicker(picker="year")
+            antd.Divider("Preset Date")
+            antd.DatePicker(
+                need_confirm=True,
+                presets=[
+                    {
+                        "label": 'Yesterday',
+                        # Python 的 timestamp
+                        "value": time.time() - 86400
+                    },
+                    {
+                        "label": 'Last 7 Days',
+                        "value": time.time() - 86400 * 7
+                    },
+                    {
+                        "label": 'Last 30 Days',
+                        "value": time.time() - 86400 * 30
+                    }
+                ])
+if __name__ == "__main__":
+    demo.queue().launch()
diff --git a/docs/components/antd/date_picker/demos/ranger_picker.py b/docs/components/antd/date_picker/demos/ranger_picker.py
@@ -0,0 +1,19 @@
+import time
+
+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.Space(direction="vertical"):
+                antd.DatePicker.RangePicker()
+                antd.DatePicker.RangePicker(show_time=True)
+                antd.DatePicker.RangePicker(picker="week")
+                antd.DatePicker.RangePicker(picker="month")
+                antd.DatePicker.RangePicker(picker="quarter")
+                antd.DatePicker.RangePicker(picker="year")
+if __name__ == "__main__":
+    demo.queue().launch()
diff --git a/frontend/antd/color-picker/color-picker.tsx b/frontend/antd/color-picker/color-picker.tsx
@@ -11,8 +11,13 @@ import { type Item } from './context';
 
 export const ColorPicker = sveltify<
   GetProps<typeof AColorPicker> & {
-    onValueChange: (value: string) => void;
-    onChange?: (value: string, ...args: any[]) => void;
+    onValueChange: (
+      value: string | { color: string; percent: number }[]
+    ) => void;
+    onChange?: (
+      value: string | { color: string; percent: number }[],
+      ...args: any[]
+    ) => void;
     value_format: 'rgb' | 'hex' | 'hsb';
     presetItems: Item[];
     setSlotParams: SetSlotParams;
@@ -65,13 +70,29 @@ export const ColorPicker = sveltify<
               : panelRenderFunction
           }
           onChange={(v, ...args) => {
-            const color = {
+            if (v.isGradient()) {
+              const gradientColors = v.getColors().map((color) => {
+                const colors = {
+                  rgb: color.color.toRgbString(),
+                  hex: color.color.toHexString(),
+                  hsb: color.color.toHsbString(),
+                };
+                return {
+                  ...color,
+                  color: colors[value_format],
+                };
+              });
+              onChange?.(gradientColors, ...args);
+              onValueChange(gradientColors);
+              return;
+            }
+            const colors = {
               rgb: v.toRgbString(),
               hex: v.toHexString(),
               hsb: v.toHsbString(),
             };
-            onChange?.(color[value_format], ...args);
-            onValueChange(color[value_format]);
+            onChange?.(colors[value_format], ...args);
+            onValueChange(colors[value_format]);
           }}
         >
           {targets.length === 0 ? null : children}