diff --git a/.changeset/healthy-buckets-flash.md b/.changeset/healthy-buckets-flash.md new file mode 100644 index 00000000..883a6547 --- /dev/null +++ b/.changeset/healthy-buckets-flash.md @@ -0,0 +1,7 @@ +--- +'@modelscope-studio/antd': patch +'@modelscope-studio/frontend': patch +'modelscope_studio': patch +--- + +fix: make sure bind correct events when use gr.render triggers diff --git a/backend/modelscope_studio/components/antd/button/__init__.py b/backend/modelscope_studio/components/antd/button/__init__.py index 680ec7b2..c4428cf0 100644 --- a/backend/modelscope_studio/components/antd/button/__init__.py +++ b/backend/modelscope_studio/components/antd/button/__init__.py @@ -56,16 +56,16 @@ def __init__( disabled: bool | None = None, ghost: bool | None = None, href: str | None = None, - html_type: Literal["button", "submit", "reset"] | None = "button", + html_type: Literal["button", "submit", "reset"] | None = None, icon: str | None = None, - icon_position: Literal["start", "end"] | None = "start", + icon_position: Literal["start", "end"] | None = None, loading: bool | None = None, - shape: Literal["default", "circle", "round"] | None = "default", + shape: Literal["default", "circle", "round"] | None = None, size: Literal["large", "middle", "small"] | None = None, styles: dict | None = None, href_target: str | None = None, type: Literal["primary", "dashed", "link", "text", "default"] - | None = "default", + | None = None, variant: Literal["outlined", "dashed", "solid", "filled", "text", "link"] | None = None, color: Literal['default', 'primary', 'danger'] | None = None, diff --git a/backend/modelscope_studio/components/antd/date_picker/range_picker/__init__.py b/backend/modelscope_studio/components/antd/date_picker/range_picker/__init__.py index 3da4ea15..1ce64a2f 100644 --- a/backend/modelscope_studio/components/antd/date_picker/range_picker/__init__.py +++ b/backend/modelscope_studio/components/antd/date_picker/range_picker/__init__.py @@ -17,12 +17,12 @@ class AntdDatePickerRangePicker(ModelScopeDataLayoutComponent): EventListener("change", callback=lambda block: block._internal.update( bind_change_event=True)), - EventListener( - "calendar_change", - callback=lambda block: block._internal.update(bind_ok_event=True)), - EventListener("focus", + EventListener("calendar_change", callback=lambda block: block._internal.update( bind_calendarChange_event=True)), + EventListener("focus", + callback=lambda block: block._internal.update( + bind_focus_event=True)), EventListener("blur", callback=lambda block: block._internal.update( bind_blur_event=True)), diff --git a/backend/modelscope_studio/components/antd/time_picker/range_picker/__init__.py b/backend/modelscope_studio/components/antd/time_picker/range_picker/__init__.py index 6c34cef3..dedb748c 100644 --- a/backend/modelscope_studio/components/antd/time_picker/range_picker/__init__.py +++ b/backend/modelscope_studio/components/antd/time_picker/range_picker/__init__.py @@ -17,12 +17,12 @@ class AntdTimePickerRangePicker(ModelScopeDataLayoutComponent): EventListener("change", callback=lambda block: block._internal.update( bind_change_event=True)), - EventListener( - "calendar_change", - callback=lambda block: block._internal.update(bind_ok_event=True)), - EventListener("focus", + EventListener("calendar_change", callback=lambda block: block._internal.update( bind_calendarChange_event=True)), + EventListener("focus", + callback=lambda block: block._internal.update( + bind_focus_event=True)), EventListener("blur", callback=lambda block: block._internal.update( bind_blur_event=True)), diff --git a/backend/modelscope_studio/components/antd/tour/step/__init__.py b/backend/modelscope_studio/components/antd/tour/step/__init__.py index 2b68fddb..a6be0b4e 100644 --- a/backend/modelscope_studio/components/antd/tour/step/__init__.py +++ b/backend/modelscope_studio/components/antd/tour/step/__init__.py @@ -15,10 +15,10 @@ class AntdTourStep(ModelScopeLayoutComponent): EventListener("close", callback=lambda block: block._internal.update( bind_close_event=True)), - EventListener("next_button_props_click", + EventListener("next_button_click", callback=lambda block: block._internal.update( bind_nextButtonProps_click_event=True)), - EventListener("prev_button_props_click", + EventListener("prev_button_click", callback=lambda block: block._internal.update( bind_prevButtonProps_click_event=True)), ] diff --git a/backend/modelscope_studio/components/antd/tree/__init__.py b/backend/modelscope_studio/components/antd/tree/__init__.py index c54d9212..279394ea 100644 --- a/backend/modelscope_studio/components/antd/tree/__init__.py +++ b/backend/modelscope_studio/components/antd/tree/__init__.py @@ -37,7 +37,7 @@ class AntdTree(ModelScopeLayoutComponent): bind_dragStart_event=True)), EventListener("drop", callback=lambda block: block._internal.update( - bind_dragDrop_event=True)), + bind_drop_event=True)), EventListener("expand", callback=lambda block: block._internal.update( bind_expand_event=True)), diff --git a/backend/modelscope_studio/components/antd/tree/directory_tree/__init__.py b/backend/modelscope_studio/components/antd/tree/directory_tree/__init__.py index 43a2a72a..3a390e73 100644 --- a/backend/modelscope_studio/components/antd/tree/directory_tree/__init__.py +++ b/backend/modelscope_studio/components/antd/tree/directory_tree/__init__.py @@ -33,7 +33,7 @@ class AntdTreeDirectoryTree(ModelScopeLayoutComponent): bind_dragStart_event=True)), EventListener("drop", callback=lambda block: block._internal.update( - bind_dragDrop_event=True)), + bind_drop_event=True)), EventListener("expand", callback=lambda block: block._internal.update( bind_expand_event=True)), diff --git a/docs/README-zh_CN.md b/docs/README-zh_CN.md index ff3018c3..3167c764 100644 --- a/docs/README-zh_CN.md +++ b/docs/README-zh_CN.md @@ -5,7 +5,7 @@ ✖️ - +

diff --git a/docs/components/antd/date_picker/README-zh_CN.md b/docs/components/antd/date_picker/README-zh_CN.md index 71ae1d14..5ebb9a90 100644 --- a/docs/components/antd/date_picker/README-zh_CN.md +++ b/docs/components/antd/date_picker/README-zh_CN.md @@ -5,4 +5,4 @@ To select or input a date. See [Ant Design](https://ant.design/components/date-p ## Examples - + diff --git a/docs/components/antd/date_picker/README.md b/docs/components/antd/date_picker/README.md index 71ae1d14..5ebb9a90 100644 --- a/docs/components/antd/date_picker/README.md +++ b/docs/components/antd/date_picker/README.md @@ -5,4 +5,4 @@ To select or input a date. See [Ant Design](https://ant.design/components/date-p ## Examples - + diff --git a/docs/components/antd/date_picker/demos/ranger_picker.py b/docs/components/antd/date_picker/demos/range_picker.py similarity index 98% rename from docs/components/antd/date_picker/demos/ranger_picker.py rename to docs/components/antd/date_picker/demos/range_picker.py index dd8123ce..62660e43 100644 --- a/docs/components/antd/date_picker/demos/ranger_picker.py +++ b/docs/components/antd/date_picker/demos/range_picker.py @@ -1,5 +1,3 @@ -import time - import gradio as gr import modelscope_studio.components.antd as antd diff --git a/docs/components/antd/time_picker/README-zh_CN.md b/docs/components/antd/time_picker/README-zh_CN.md index 27d81f68..94521170 100644 --- a/docs/components/antd/time_picker/README-zh_CN.md +++ b/docs/components/antd/time_picker/README-zh_CN.md @@ -5,4 +5,4 @@ To select/input a time. See [Ant Design](https://ant.design/components/time-pick ## Examples - + diff --git a/docs/components/antd/time_picker/README.md b/docs/components/antd/time_picker/README.md index 27d81f68..94521170 100644 --- a/docs/components/antd/time_picker/README.md +++ b/docs/components/antd/time_picker/README.md @@ -5,4 +5,4 @@ To select/input a time. See [Ant Design](https://ant.design/components/time-pick ## Examples - + diff --git a/docs/components/antd/time_picker/demos/ranger_picker.py b/docs/components/antd/time_picker/demos/range_picker.py similarity index 100% rename from docs/components/antd/time_picker/demos/ranger_picker.py rename to docs/components/antd/time_picker/demos/range_picker.py diff --git a/docs/components/base/each/README-zh_CN.md b/docs/components/base/each/README-zh_CN.md index d2fb4257..4fd52419 100644 --- a/docs/components/base/each/README-zh_CN.md +++ b/docs/components/base/each/README-zh_CN.md @@ -2,10 +2,13 @@ 辅助渲染组件，该组件支持传入列表作为参数，并会在前端遍历被包裹的组件，将列表的每一项注入当前遍历的上下文中，被包裹的组件属性会在前端被相应的上下文属性替换（只支持从`modelscope_studio`中导出的组件）。 +> 注意：在大多数情况下，您不需要使用`Each`组件，如果您需要动态渲染组件，我们更建议您使 Gradio 提供的 [render](https://www.gradio.app/docs/gradio/render) 函数。 + ## 何时使用 - 当被遍历的组件中全部都是`modelscope_studio`组件或非`modelscope_studio`的组件值不与被遍历的值绑定时； - 当需要遍历展示的列表长度无法确定时； +- 不想要在 Python 中绑定过多事件监听时； ## 示例 diff --git a/docs/components/base/each/README.md b/docs/components/base/each/README.md index 2c22674d..ddc30c9f 100644 --- a/docs/components/base/each/README.md +++ b/docs/components/base/each/README.md @@ -2,6 +2,8 @@ A helper rendering component that supports passing a list as a parameter and will traverse the wrapped components on the front end, injecting each item of the list into the current traversal context. The attributes of the wrapped components will be replaced by corresponding context properties on the front end (only supports components exported from `modelscope_studio`). +> Note: In most cases, you do not need to use the `Each` component. If you need to render components dynamically, we recommend using the [render](https://www.gradio.app/docs/gradio/render) function provided by Gradio. + ## When to Use - When all components being traversed are `modelscope_studio` components or non-`modelscope_studio` components whose values do not bind to the traversed values. diff --git a/frontend/antd/auto-complete/Index.svelte b/frontend/antd/auto-complete/Index.svelte index 58657881..5a676c9e 100644 --- a/frontend/antd/auto-complete/Index.svelte +++ b/frontend/antd/auto-complete/Index.svelte @@ -71,7 +71,9 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + dropdown_visible_change: 'dropdownVisibleChange', + })} value={$mergedProps.props.value ?? $mergedProps.value} slots={$slots} optionItems={$options.length > 0 ? $options : $children} diff --git a/frontend/antd/breadcrumb/Index.svelte b/frontend/antd/breadcrumb/Index.svelte index 6da140f0..cfcb9e88 100644 --- a/frontend/antd/breadcrumb/Index.svelte +++ b/frontend/antd/breadcrumb/Index.svelte @@ -69,7 +69,14 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + menu_open_change: 'menu_openChange', + dropdown_open_change: 'dropdownProps_openChange', + dropdown_menu_click: 'dropdownProps_menu_click', + dropdown_menu_deselect: 'dropdownProps_menu_deselect', + dropdown_menu_open_change: 'dropdownProps_menu_openChange', + dropdown_menu_select: 'dropdownProps_menu_select', + })} slots={$slots} slotItems={$items.length > 0 ? $items : $children} {setSlotParams} diff --git a/frontend/antd/calendar/Index.svelte b/frontend/antd/calendar/Index.svelte index e5b45b82..d94f23c9 100644 --- a/frontend/antd/calendar/Index.svelte +++ b/frontend/antd/calendar/Index.svelte @@ -69,7 +69,9 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + panel_change: 'panelChange', + })} slots={$slots} value={$mergedProps.props.value || $mergedProps.value} onValueChange={(val) => { diff --git a/frontend/antd/card/Index.svelte b/frontend/antd/card/Index.svelte index a45a4ec9..eef7f3e0 100644 --- a/frontend/antd/card/Index.svelte +++ b/frontend/antd/card/Index.svelte @@ -65,7 +65,9 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + tab_change: 'tabChange', + })} containsGrid={$mergedProps._internal.contains_grid} slots={$slots} tabListItems={$tabList} diff --git a/frontend/antd/cascader/Index.svelte b/frontend/antd/cascader/Index.svelte index 9cdb2328..21ee183e 100644 --- a/frontend/antd/cascader/Index.svelte +++ b/frontend/antd/cascader/Index.svelte @@ -71,7 +71,10 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + dropdown_visible_change: 'dropdownVisibleChange', + load_data: 'loadData', + })} value={$mergedProps.props.value ?? $mergedProps.value} slots={$slots} optionItems={$options.length > 0 ? $options : $children} diff --git a/frontend/antd/cascader/panel/Index.svelte b/frontend/antd/cascader/panel/Index.svelte index 24caf22a..5507c0b4 100644 --- a/frontend/antd/cascader/panel/Index.svelte +++ b/frontend/antd/cascader/panel/Index.svelte @@ -68,7 +68,9 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + load_data: 'loadData', + })} value={$mergedProps.props.value ?? $mergedProps.value} slots={$slots} optionItems={$options.length > 0 ? $options : $children} diff --git a/frontend/antd/collapse/item/Index.svelte b/frontend/antd/collapse/item/Index.svelte index f1fbc5d3..ae302dcc 100644 --- a/frontend/antd/collapse/item/Index.svelte +++ b/frontend/antd/collapse/item/Index.svelte @@ -64,7 +64,9 @@ id: $mergedProps.elem_id, ...$mergedProps.restProps, ...$mergedProps.props, - ...bindEvents($mergedProps), + ...bindEvents($mergedProps, { + item_click: 'itemClick', + }), }, slots: { children: $slot, diff --git a/frontend/antd/color-picker/Index.svelte b/frontend/antd/color-picker/Index.svelte index 261b8eac..e2df575a 100644 --- a/frontend/antd/color-picker/Index.svelte +++ b/frontend/antd/color-picker/Index.svelte @@ -72,7 +72,11 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + change_complete: 'changeComplete', + open_change: 'openChange', + format_change: 'formatChange', + })} value={$mergedProps.props.value ?? $mergedProps.value ?? undefined} slots={$slots} presetItems={$presets} diff --git a/frontend/antd/date-picker/Index.svelte b/frontend/antd/date-picker/Index.svelte index 49074b0e..20357db6 100644 --- a/frontend/antd/date-picker/Index.svelte +++ b/frontend/antd/date-picker/Index.svelte @@ -73,7 +73,10 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + panel_change: 'panelChange', + open_change: 'openChange', + })} slots={$slots} value={$mergedProps.props.value || $mergedProps.value} presetItems={$presets} diff --git a/frontend/antd/date-picker/range-picker/Index.svelte b/frontend/antd/date-picker/range-picker/Index.svelte index 8388ad47..edf73427 100644 --- a/frontend/antd/date-picker/range-picker/Index.svelte +++ b/frontend/antd/date-picker/range-picker/Index.svelte @@ -78,7 +78,9 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + calendar_change: 'calendarChange', + })} slots={$slots} value={$mergedProps.props.value || $mergedProps.value} presetItems={$presets} diff --git a/frontend/antd/dropdown/Index.svelte b/frontend/antd/dropdown/Index.svelte index 4fd369b9..814ffb7c 100644 --- a/frontend/antd/dropdown/Index.svelte +++ b/frontend/antd/dropdown/Index.svelte @@ -68,7 +68,10 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + open_change: 'openChange', + menu_open_change: 'menu_openChange', + })} slots={$slots} menuItems={$items} {setSlotParams} diff --git a/frontend/antd/dropdown/button/Index.svelte b/frontend/antd/dropdown/button/Index.svelte index ccfa0fab..50d808e9 100644 --- a/frontend/antd/dropdown/button/Index.svelte +++ b/frontend/antd/dropdown/button/Index.svelte @@ -74,7 +74,10 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + open_change: 'openChange', + menu_open_change: 'menu_OpenChange', + })} slots={$slots} menuItems={$items} {setSlotParams} diff --git a/frontend/antd/float-button/Index.svelte b/frontend/antd/float-button/Index.svelte index b3e73778..1891fe5e 100644 --- a/frontend/antd/float-button/Index.svelte +++ b/frontend/antd/float-button/Index.svelte @@ -66,7 +66,9 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + open_change: 'openChange', + })} slots={$slots} > diff --git a/frontend/antd/form/Index.svelte b/frontend/antd/form/Index.svelte index 7e5d612b..bfe9a589 100644 --- a/frontend/antd/form/Index.svelte +++ b/frontend/antd/form/Index.svelte @@ -73,7 +73,11 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + fields_change: 'fieldsChange', + finish_failed: 'finishFailed', + values_change: 'valuesChange', + })} slots={$slots} value={$mergedProps.value} onValueChange={(v) => { diff --git a/frontend/antd/form/provider/Index.svelte b/frontend/antd/form/provider/Index.svelte index 80e0e807..ac15cd75 100644 --- a/frontend/antd/form/provider/Index.svelte +++ b/frontend/antd/form/provider/Index.svelte @@ -54,7 +54,10 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + form_change: 'formChange', + form_finish: 'formFinish', + })} slots={{}} > diff --git a/frontend/antd/image/Index.svelte b/frontend/antd/image/Index.svelte index 83b4fa9b..57a701f6 100644 --- a/frontend/antd/image/Index.svelte +++ b/frontend/antd/image/Index.svelte @@ -78,7 +78,9 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + preview_visible_change: 'preview_visibleChange', + })} slots={$slots} src={$mergedProps.props.src || src} {setSlotParams} diff --git a/frontend/antd/image/preview-group/Index.svelte b/frontend/antd/image/preview-group/Index.svelte index 489df6c2..56bf9834 100644 --- a/frontend/antd/image/preview-group/Index.svelte +++ b/frontend/antd/image/preview-group/Index.svelte @@ -69,7 +69,9 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + preview_visible_change: 'preview_visibleChange', + })} slots={$slots} items={$mergedProps.props.items || $mergedProps.items} > diff --git a/frontend/antd/input-number/Index.svelte b/frontend/antd/input-number/Index.svelte index 865ed457..53ce7501 100644 --- a/frontend/antd/input-number/Index.svelte +++ b/frontend/antd/input-number/Index.svelte @@ -63,7 +63,9 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + press_enter: 'pressEnter', + })} value={$mergedProps.props.value ?? $mergedProps.value} slots={$slots} onValueChange={(v) => { diff --git a/frontend/antd/input/Index.svelte b/frontend/antd/input/Index.svelte index 5579b30d..6a18655e 100644 --- a/frontend/antd/input/Index.svelte +++ b/frontend/antd/input/Index.svelte @@ -67,7 +67,9 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + press_enter: 'pressEnter', + })} value={$mergedProps.props.value ?? $mergedProps.value} slots={$slots} onValueChange={(v) => { diff --git a/frontend/antd/input/password/Index.svelte b/frontend/antd/input/password/Index.svelte index ebde2452..67ae2612 100644 --- a/frontend/antd/input/password/Index.svelte +++ b/frontend/antd/input/password/Index.svelte @@ -72,7 +72,10 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + press_enter: 'pressEnter', + visibility_toggle_visible_change: 'visibilityToggle_visibleChange', + })} value={$mergedProps.props.value ?? $mergedProps.value} slots={$slots} onValueChange={(v) => { diff --git a/frontend/antd/input/search/Index.svelte b/frontend/antd/input/search/Index.svelte index bb6caba2..bfdd86a6 100644 --- a/frontend/antd/input/search/Index.svelte +++ b/frontend/antd/input/search/Index.svelte @@ -70,7 +70,9 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + press_enter: 'pressEnter', + })} value={$mergedProps.props.value ?? $mergedProps.value} slots={$slots} onValueChange={(v) => { diff --git a/frontend/antd/input/textarea/Index.svelte b/frontend/antd/input/textarea/Index.svelte index bdb536a6..e087d762 100644 --- a/frontend/antd/input/textarea/Index.svelte +++ b/frontend/antd/input/textarea/Index.svelte @@ -72,7 +72,9 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + press_enter: 'pressEnter', + })} value={$mergedProps.props.value ?? $mergedProps.value} slots={$slots} onValueChange={(v) => { diff --git a/frontend/antd/list/Index.svelte b/frontend/antd/list/Index.svelte index 285bae20..75eafc60 100644 --- a/frontend/antd/list/Index.svelte +++ b/frontend/antd/list/Index.svelte @@ -65,7 +65,9 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + pagination_show_size_change: 'pagination_showSizeChange', + })} slots={$slots} {setSlotParams} > diff --git a/frontend/antd/menu/Index.svelte b/frontend/antd/menu/Index.svelte index 7e26f124..e5fb8b54 100644 --- a/frontend/antd/menu/Index.svelte +++ b/frontend/antd/menu/Index.svelte @@ -68,7 +68,9 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + open_change: 'openChange', + })} slots={$slots} slotItems={$items.length > 0 ? $items : $children} {setSlotParams} diff --git a/frontend/antd/menu/item/Index.svelte b/frontend/antd/menu/item/Index.svelte index 451e1558..8bd4b7f8 100644 --- a/frontend/antd/menu/item/Index.svelte +++ b/frontend/antd/menu/item/Index.svelte @@ -74,7 +74,9 @@ label: $mergedProps.label, ...$mergedProps.restProps, ...$mergedProps.props, - ...bindEvents($mergedProps), + ...bindEvents($mergedProps, { + title_click: 'titleClick', + }), }, slots: { ...$slots, diff --git a/frontend/antd/pagination/Index.svelte b/frontend/antd/pagination/Index.svelte index 913c6f5c..3b566649 100644 --- a/frontend/antd/pagination/Index.svelte +++ b/frontend/antd/pagination/Index.svelte @@ -65,7 +65,9 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + show_size_change: 'showSizeChange', + })} slots={$slots} {setSlotParams} > diff --git a/frontend/antd/popconfirm/Index.svelte b/frontend/antd/popconfirm/Index.svelte index 52dc8ad4..f2c22de7 100644 --- a/frontend/antd/popconfirm/Index.svelte +++ b/frontend/antd/popconfirm/Index.svelte @@ -63,7 +63,10 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + open_change: 'openChange', + popup_click: 'popupClick', + })} slots={$slots} title={$mergedProps.props.title || $mergedProps.title} > diff --git a/frontend/antd/popover/Index.svelte b/frontend/antd/popover/Index.svelte index 1ca93eb0..0587d97f 100644 --- a/frontend/antd/popover/Index.svelte +++ b/frontend/antd/popover/Index.svelte @@ -62,7 +62,9 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + open_change: 'openChange', + })} slots={$slots} content={$mergedProps.props.content || $mergedProps.content} > diff --git a/frontend/antd/rate/Index.svelte b/frontend/antd/rate/Index.svelte index 6e9098ca..2ba203ca 100644 --- a/frontend/antd/rate/Index.svelte +++ b/frontend/antd/rate/Index.svelte @@ -69,7 +69,10 @@ value={$mergedProps.value} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + hover_change: 'hoverChange', + key_down: 'keyDown', + })} slots={$slots} onValueChange={(v) => { value = v; diff --git a/frontend/antd/select/Index.svelte b/frontend/antd/select/Index.svelte index 2d3ff656..deaf6b94 100644 --- a/frontend/antd/select/Index.svelte +++ b/frontend/antd/select/Index.svelte @@ -71,7 +71,10 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + popup_scroll: 'popupScroll', + dropdown_visible_change: 'dropdownVisibleChange', + })} value={$mergedProps.props.value ?? $mergedProps.value} slots={$slots} optionItems={$options.length > 0 ? $options : $children} diff --git a/frontend/antd/slider/Index.svelte b/frontend/antd/slider/Index.svelte index 13195362..6388bb35 100644 --- a/frontend/antd/slider/Index.svelte +++ b/frontend/antd/slider/Index.svelte @@ -71,7 +71,9 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + change_complete: 'changeComplete', + })} value={$mergedProps.props.value ?? $mergedProps.value} slots={$slots} markItems={$marks} diff --git a/frontend/antd/splitter/Index.svelte b/frontend/antd/splitter/Index.svelte index 7ba98150..72519ead 100644 --- a/frontend/antd/splitter/Index.svelte +++ b/frontend/antd/splitter/Index.svelte @@ -63,7 +63,10 @@ className={cls($mergedProps.elem_classes, 'ms-gr-antd-splitter')} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + resize_start: 'resizeStart', + resize_end: 'resizeEnd', + })} slots={$slots} items={$items} > diff --git a/frontend/antd/table/column/Column.svelte b/frontend/antd/table/column/Column.svelte index 148a773f..21dfa019 100644 --- a/frontend/antd/table/column/Column.svelte +++ b/frontend/antd/table/column/Column.svelte @@ -141,7 +141,9 @@ id: $mergedProps.elem_id, ...$mergedProps.restProps, ...$mergedProps.props, - ...bindEvents($mergedProps), + ...bindEvents($mergedProps, { + filter_dropdown_open_change: 'filterDropdownOpenChange', + }), render: createFunction( $mergedProps.props.render || $mergedProps.restProps.render ), diff --git a/frontend/antd/table/expandable/Expandable.svelte b/frontend/antd/table/expandable/Expandable.svelte index ea88bbec..fac01313 100644 --- a/frontend/antd/table/expandable/Expandable.svelte +++ b/frontend/antd/table/expandable/Expandable.svelte @@ -60,7 +60,9 @@ const setSlotParams = getSetSlotParamsFn(); const setExpandableItem = getSetExpandableItemFn(); $: { - const events = bindEvents($mergedProps); + const events = bindEvents($mergedProps, { + expanded_rows_change: 'expandedRowsChange', + }); setExpandableItem($slotKey, $mergedProps._internal.index || 0, { props: { diff --git a/frontend/antd/table/row-selection/RowSelection.svelte b/frontend/antd/table/row-selection/RowSelection.svelte index 5d5954a7..47070aee 100644 --- a/frontend/antd/table/row-selection/RowSelection.svelte +++ b/frontend/antd/table/row-selection/RowSelection.svelte @@ -62,7 +62,12 @@ const { selections: selectionsItems } = getSelectionItems(['selections']); const setRowSelectionItem = getSetRowSelectionItemFn(); $: { - const events = bindEvents($mergedProps); + const events = bindEvents($mergedProps, { + select_all: 'selectAll', + select_invert: 'selectInvert', + select_none: 'selectNone', + select_multiple: 'selectMultiple', + }); setRowSelectionItem($slotKey, $mergedProps._internal.index || 0, { props: { style: $mergedProps.elem_style, diff --git a/frontend/antd/tabs/Index.svelte b/frontend/antd/tabs/Index.svelte index e2c1289b..87d0b878 100644 --- a/frontend/antd/tabs/Index.svelte +++ b/frontend/antd/tabs/Index.svelte @@ -68,7 +68,10 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + tab_click: 'tabClick', + tab_scroll: 'tabScroll', + })} slots={$slots} slotItems={$items.length > 0 ? $items : $children} {setSlotParams} diff --git a/frontend/antd/time-picker/Index.svelte b/frontend/antd/time-picker/Index.svelte index 5f606f75..d0e20338 100644 --- a/frontend/antd/time-picker/Index.svelte +++ b/frontend/antd/time-picker/Index.svelte @@ -70,7 +70,10 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + open_change: 'openChange', + calendar_change: 'calendarChange', + })} slots={$slots} value={$mergedProps.props.value || $mergedProps.value} onValueChange={(val) => { diff --git a/frontend/antd/time-picker/range-picker/Index.svelte b/frontend/antd/time-picker/range-picker/Index.svelte index 60021229..46e0cbf4 100644 --- a/frontend/antd/time-picker/range-picker/Index.svelte +++ b/frontend/antd/time-picker/range-picker/Index.svelte @@ -74,7 +74,9 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + calendar_change: 'calendarChange', + })} slots={$slots} value={$mergedProps.props.value || $mergedProps.value} onValueChange={(val) => { diff --git a/frontend/antd/tooltip/Index.svelte b/frontend/antd/tooltip/Index.svelte index a31ccfcc..cde36b81 100644 --- a/frontend/antd/tooltip/Index.svelte +++ b/frontend/antd/tooltip/Index.svelte @@ -59,7 +59,9 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + open_change: 'openChange', + })} slots={$slots} > diff --git a/frontend/antd/tour/step/Index.svelte b/frontend/antd/tour/step/Index.svelte index d3ba838e..34221dd7 100644 --- a/frontend/antd/tour/step/Index.svelte +++ b/frontend/antd/tour/step/Index.svelte @@ -65,7 +65,10 @@ id: $mergedProps.elem_id, ...$mergedProps.restProps, ...$mergedProps.props, - ...bindEvents($mergedProps), + ...bindEvents($mergedProps, { + next_button_click: 'nextButtonProps_click', + prev_button_click: 'prevButtonProps_click', + }), target: createFunction( $mergedProps.props.target || $mergedProps.restProps.target diff --git a/frontend/antd/transfer/Index.svelte b/frontend/antd/transfer/Index.svelte index a18a12ce..3887b7a7 100644 --- a/frontend/antd/transfer/Index.svelte +++ b/frontend/antd/transfer/Index.svelte @@ -73,7 +73,9 @@ targetKeys={$mergedProps.value} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + select_change: 'selectChange', + })} slots={$slots} onValueChange={(v) => { value = v; diff --git a/frontend/antd/tree-select/Index.svelte b/frontend/antd/tree-select/Index.svelte index c3ce72c7..d06aff48 100644 --- a/frontend/antd/tree-select/Index.svelte +++ b/frontend/antd/tree-select/Index.svelte @@ -71,7 +71,12 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + tree_expand: 'treeExpand', + popup_scroll: 'popupScroll', + dropdown_visible_change: 'dropdownVisibleChange', + load_data: 'loadData', + })} slots={$slots} slotItems={$treeData.length ? $treeData : $children} onValueChange={(val) => { diff --git a/frontend/antd/tree/Index.svelte b/frontend/antd/tree/Index.svelte index d8e7b3a7..2d81762a 100644 --- a/frontend/antd/tree/Index.svelte +++ b/frontend/antd/tree/Index.svelte @@ -68,7 +68,15 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + drag_end: 'dragEnd', + drag_enter: 'dragEnter', + drag_leave: 'dragLeave', + drag_over: 'dragOver', + drag_start: 'dragStart', + right_click: 'rightClick', + load_data: 'loadData', + })} slots={$slots} slotItems={$treeData.length ? $treeData : $children} {setSlotParams} diff --git a/frontend/antd/tree/directory-tree/Index.svelte b/frontend/antd/tree/directory-tree/Index.svelte index 54e02bca..c7738b32 100644 --- a/frontend/antd/tree/directory-tree/Index.svelte +++ b/frontend/antd/tree/directory-tree/Index.svelte @@ -69,7 +69,15 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + drag_end: 'dragEnd', + drag_enter: 'dragEnter', + drag_leave: 'dragLeave', + drag_over: 'dragOver', + drag_start: 'dragStart', + right_click: 'rightClick', + load_data: 'loadData', + })} slots={$slots} directory slotItems={$treeData.length ? $treeData : $children} diff --git a/frontend/antd/typography/Base.svelte b/frontend/antd/typography/Base.svelte index bab3ee82..f8e06df2 100644 --- a/frontend/antd/typography/Base.svelte +++ b/frontend/antd/typography/Base.svelte @@ -78,7 +78,9 @@ id={$mergedProps.elem_id} {...$mergedProps.restProps} {...$mergedProps.props} - {...bindEvents($mergedProps)} + {...bindEvents($mergedProps, { + ellipsis_tooltip_open_change: 'ellipsis_tooltip_openChange', + })} slots={$slots} value={$mergedProps.value} {setSlotParams} diff --git a/frontend/svelte-preprocess-react/component.ts b/frontend/svelte-preprocess-react/component.ts index a1fa2624..1c3241cd 100644 --- a/frontend/svelte-preprocess-react/component.ts +++ b/frontend/svelte-preprocess-react/component.ts @@ -32,7 +32,7 @@ function convertToCamelCase(str: string) { }); } -const gradioProps = [ +const skippedGradioProps = [ 'interactive', 'gradio', 'server', @@ -48,16 +48,16 @@ const gradioProps = [ 'props', 'value', '_selectable', - 'attached_events', 'loading_status', 'value_is_output', ]; +const gradioProps = skippedGradioProps.concat(['attached_events']); export function getComponentRestProps>( props: T, mapping: Record = {} as Record ) { - return mapKeys(omit(props, gradioProps), (_, key) => { + return mapKeys(omit(props, skippedGradioProps), (_, key) => { return mapping[key] || convertToCamelCase(key); }); } @@ -70,7 +70,7 @@ export function bindEvents< restProps?: Record; originalRestProps?: Record; }, ->(props: T) { +>(props: T, eventsMapping?: Record) { const { gradio, _internal: internal, @@ -78,92 +78,106 @@ export function bindEvents< originalRestProps, ...component } = props; + // gradio props + const attachedEvents: string[] = restProps?.attachedEvents || []; - return Object.keys(internal).reduce( - (acc, key) => { - const matched = key.match(/bind_(.+)_event/); - if (matched) { - const event = matched[1]; - const splitted = event.split('_'); - const handler = (...args: any[]) => { - const payload = args.map((arg) => { - if ( - args && - typeof arg === 'object' && - (arg.nativeEvent || arg instanceof Event) - ) { - return { - type: arg.type, - detail: arg.detail, - timestamp: arg.timeStamp, - clientX: arg.clientX, - clientY: arg.clientY, - targetId: arg.target.id, - targetClassName: arg.target.className, - altKey: arg.altKey, - ctrlKey: arg.ctrlKey, - shiftKey: arg.shiftKey, - metaKey: arg.metaKey, - }; + return Array.from( + new Set([ + ...(Object.keys(internal) + .map((key) => { + const matched = key.match(/bind_(.+)_event/); + if (matched && matched[1]) { + return matched[1]; + } + return null; + }) + .filter(Boolean) as string[]), + ...attachedEvents.map((event) => { + if (eventsMapping && eventsMapping[event]) { + return eventsMapping[event]; + } + return event; + }), + ]) + ).reduce( + (acc, event) => { + const splitted = event.split('_'); + const handler = (...args: any[]) => { + const payload = args.map((arg) => { + if ( + args && + typeof arg === 'object' && + (arg.nativeEvent || arg instanceof Event) + ) { + return { + type: arg.type, + detail: arg.detail, + timestamp: arg.timeStamp, + clientX: arg.clientX, + clientY: arg.clientY, + targetId: arg.target.id, + targetClassName: arg.target.className, + altKey: arg.altKey, + ctrlKey: arg.ctrlKey, + shiftKey: arg.shiftKey, + metaKey: arg.metaKey, + }; + } + return arg; + }); + let serializedPayload: any; + try { + serializedPayload = JSON.parse(JSON.stringify(payload)); + } catch { + serializedPayload = payload.map((item) => { + if (item && typeof item === 'object') { + return Object.fromEntries( + Object.entries(item).filter(([, v]) => { + try { + JSON.stringify(v); + return true; + } catch { + return false; + } + }) + ); } - return arg; + return item; }); - let serializedPayload; - try { - serializedPayload = JSON.parse(JSON.stringify(payload)); - } catch { - serializedPayload = payload.map((item) => { - if (item && typeof item === 'object') { - return Object.fromEntries( - Object.entries(item).filter(([, v]) => { - try { - JSON.stringify(v); - return true; - } catch { - return false; - } - }) - ); - } - return item; - }); + } + return gradio.dispatch( + event.replace(/[A-Z]/g, (letter) => '_' + letter.toLowerCase()), + { + payload: serializedPayload, + component: { + ...component, + ...omit(originalRestProps, gradioProps), + }, } - return gradio.dispatch( - event.replace(/[A-Z]/g, (letter) => '_' + letter.toLowerCase()), - { - payload: serializedPayload, - component: { - ...component, - ...omit(originalRestProps, gradioProps), - }, - } - ); - }; + ); + }; - if (splitted.length > 1) { - let value: Record = { - ...(component.props[splitted[0]] || restProps?.[splitted[0]] || {}), + if (splitted.length > 1) { + let value: Record = { + ...(component.props[splitted[0]] || restProps?.[splitted[0]] || {}), + }; + acc[splitted[0]] = value; + for (let i = 1; i < splitted.length - 1; i++) { + const prop = { + ...(component.props[splitted[i]] || restProps?.[splitted[i]] || {}), }; - acc[splitted[0]] = value; - for (let i = 1; i < splitted.length - 1; i++) { - const prop = { - ...(component.props[splitted[i]] || - restProps?.[splitted[i]] || - {}), - }; - value[splitted[i]] = prop; - value = prop; - } - const listener = splitted[splitted.length - 1]; - value[`on${listener.slice(0, 1).toUpperCase()}${listener.slice(1)}`] = - handler; - - return acc; + value[splitted[i]] = prop; + value = prop; } - const listener = splitted[0]; - acc[`on${listener.slice(0, 1).toUpperCase()}${listener.slice(1)}`] = + const listener = splitted[splitted.length - 1]; + value[`on${listener.slice(0, 1).toUpperCase()}${listener.slice(1)}`] = handler; + + return acc; } + const listener = splitted[0]; + acc[`on${listener.slice(0, 1).toUpperCase()}${listener.slice(1)}`] = + handler; return acc; }, {} as Record diff --git a/frontend/svelte-preprocess-react/internal/Bridge.ts b/frontend/svelte-preprocess-react/internal/Bridge.ts index cdde9409..c40ae69a 100644 --- a/frontend/svelte-preprocess-react/internal/Bridge.ts +++ b/frontend/svelte-preprocess-react/internal/Bridge.ts @@ -17,10 +17,21 @@ export type BridgeProps = { node: TreeNode; nodeSlotKey?: string; }; + +function omitNodeProps(props: Record) { + if (Reflect.has(props, 'attachedEvents')) { + const newProps = { ...props }; + Reflect.deleteProperty(newProps, 'attachedEvents'); + return newProps; + } + return props; +} + const Bridge: React.FC = ({ createPortal, node }) => { // rerender when target or slot changed const target = useStore(node.target); - const nodeProps = useStore(node.props); + let nodeProps = useStore(node.props); + nodeProps = omitNodeProps(nodeProps); const slot = useStore(node.slot); const subSlotKeys = useStores( useMemo(