fix: layout compatibility

modelscope · Dec 20, 2024 · 83ed675 · 83ed675
1 parent caa6270
commit 83ed675
Show file tree

Hide file tree

Showing 15 changed files with 92 additions and 85 deletions.
diff --git a/backend/modelscope_studio/components/base/div/__init__.py b/backend/modelscope_studio/components/base/div/__init__.py
@@ -5,10 +5,6 @@
 from gradio.events import EventListener
 
 from ....utils.dev import ModelScopeLayoutComponent, resolve_frontend_dir
-from ...antd.carousel import AntdCarousel
-from ...antd.space import AntdSpace
-from ...antd.tooltip import AntdTooltip
-from ..slot import ModelScopeSlot
 
 
 class ModelScopeDiv(ModelScopeLayoutComponent):
@@ -66,14 +62,8 @@ def __init__(
                          as_item=as_item,
                          elem_style=elem_style,
                          **kwargs)
-        if self.parent and self._internal and (any(
-                isinstance(self.parent, component) for component in [
-                    AntdCarousel,
-                    AntdSpace,
-                    AntdTooltip,
-                    ModelScopeSlot,
-                ])):
-            self._internal.update(fragment=True)
+
+        self._internal.update(fragment=True)
         self.value = value
         self.props = props
 

diff --git a/backend/modelscope_studio/components/base/span/__init__.py b/backend/modelscope_studio/components/base/span/__init__.py
@@ -5,10 +5,6 @@
 from gradio.events import EventListener
 
 from ....utils.dev import ModelScopeLayoutComponent, resolve_frontend_dir
-from ...antd.carousel import AntdCarousel
-from ...antd.space import AntdSpace
-from ...antd.tooltip import AntdTooltip
-from ..slot import ModelScopeSlot
 
 
 class ModelScopeSpan(ModelScopeLayoutComponent):
@@ -66,14 +62,8 @@ def __init__(
                          as_item=as_item,
                          elem_style=elem_style,
                          **kwargs)
-        if self.parent and self._internal and (any(
-                isinstance(self.parent, component) for component in [
-                    AntdCarousel,
-                    AntdSpace,
-                    AntdTooltip,
-                    ModelScopeSlot,
-                ])):
-            self._internal.update(fragment=True)
+
+        self._internal.update(fragment=True)
         self.value = value
         self.props = props
 

diff --git a/backend/modelscope_studio/components/base/text/__init__.py b/backend/modelscope_studio/components/base/text/__init__.py
@@ -3,9 +3,6 @@
 from typing import Any
 
 from ....utils.dev import ModelScopeComponent, resolve_frontend_dir
-from ...antd.carousel import AntdCarousel
-from ...antd.space import AntdSpace
-from ...antd.tooltip import AntdTooltip
 
 
 class ModelScopeText(ModelScopeComponent):
@@ -37,10 +34,7 @@ def __init__(
                          as_item=as_item,
                          elem_style=elem_style,
                          **kwargs)
-        if self.parent and self._internal and (any(
-                isinstance(self.parent, component)
-                for component in [AntdCarousel, AntdTooltip, AntdSpace])):
-            self._internal.update(fragment=True)
+        self._internal.update(fragment=True)
         self.value = value
 
     FRONTEND_DIR = resolve_frontend_dir("text", type="base")

diff --git a/backend/modelscope_studio/utils/dev/app_context.py b/backend/modelscope_studio/utils/dev/app_context.py
@@ -1,3 +1,6 @@
+import warnings
+
+
 class AppContext:
     _app = None
 
@@ -12,7 +15,7 @@ def has_app(cls):
     @classmethod
     def assert_app(cls):
         if cls._app is None:
-            raise ImportError(
+            warnings.warn(
                 """<modelscope-studio>: Cannot find the `Application` component, did you forget to import it from `modelscope_studio.components.base`?"""
             )
 

diff --git a/frontend/antd/button/Index.svelte b/frontend/antd/button/Index.svelte
@@ -72,12 +72,9 @@
       {...$mergedProps.props}
       {...bindEvents($mergedProps)}
       slots={$slots}
+      value={$mergedProps.value}
     >
-      {#if $mergedProps._internal.layout}
-        <slot></slot>
-      {:else}
-        {$mergedProps.value}
-      {/if}
+      <slot></slot>
     </Button>
   {/await}
 {/if}

diff --git a/frontend/antd/button/button.tsx b/frontend/antd/button/button.tsx
@@ -1,15 +1,26 @@
 import { sveltify } from '@svelte-preprocess-react';
 import { ReactSlot } from '@svelte-preprocess-react/react-slot';
 import React from 'react';
+import { useTargets } from '@utils/hooks/useTargets';
 import { Button as AButton, type GetProps } from 'antd';
 
 export const Button = sveltify<GetProps<typeof AButton>, ['icon']>(
-  ({ slots, ...props }) => {
+  ({ slots, value, children, ...props }) => {
+    const targets = useTargets(children);
     return (
       <AButton
         {...props}
         icon={slots.icon ? <ReactSlot slot={slots.icon} /> : props.icon}
-      />
+      >
+        {targets.length > 0 ? (
+          children
+        ) : (
+          <>
+            {children}
+            {value}
+          </>
+        )}
+      </AButton>
     );
   }
 );

diff --git a/frontend/antd/divider/divider.tsx b/frontend/antd/divider/divider.tsx
@@ -1,10 +1,8 @@
 import { sveltify } from '@svelte-preprocess-react';
 import { Divider as ADivider, type GetProps } from 'antd';
 
-export const Divider = sveltify<GetProps<typeof ADivider>, ['children']>(
-  ({ ...props }) => {
-    return <ADivider {...props} />;
-  }
-);
+export const Divider = sveltify<GetProps<typeof ADivider>>(({ ...props }) => {
+  return <ADivider {...props} />;
+});
 
 export default Divider;
diff --git a/frontend/antd/dropdown/button/Index.svelte b/frontend/antd/dropdown/button/Index.svelte
@@ -81,12 +81,9 @@
       slots={$slots}
       menuItems={$items}
       {setSlotParams}
+      value={$mergedProps.value}
     >
-      {#if $mergedProps._internal.layout}
-        <slot></slot>
-      {:else}
-        {$mergedProps.value}
-      {/if}
+      <slot></slot>
     </DropdownButton>
   {/await}
 {/if}

diff --git a/frontend/antd/dropdown/button/dropdown.button.tsx b/frontend/antd/dropdown/button/dropdown.button.tsx
@@ -14,6 +14,7 @@ export const DropdownButton = sveltify<
   GetProps<typeof ADropdown.Button> & {
     menuItems: Item[];
     setSlotParams: SetSlotParams;
+    value?: string;
   },
   [
     'icon',
@@ -31,12 +32,15 @@ export const DropdownButton = sveltify<
     dropdownRender,
     buttonsRender,
     setSlotParams,
+    value,
     ...props
   }) => {
     const getPopupContainerFunction = useFunction(getPopupContainer);
     const dropdownRenderFunction = useFunction(dropdownRender);
     const buttonsRenderFunction = useFunction(buttonsRender);
     const buttonsRenderTargets = useTargets(children, 'buttonsRender');
+    const targets = useTargets(children);
+
     return (
       <ADropdown.Button
         {...props}
@@ -81,7 +85,14 @@ export const DropdownButton = sveltify<
             : dropdownRenderFunction
         }
       >
-        {children}
+        {targets.length > 0 ? (
+          children
+        ) : (
+          <>
+            {children}
+            {value}
+          </>
+        )}
       </ADropdown.Button>
     );
   }

diff --git a/frontend/antd/table/table.tsx b/frontend/antd/table/table.tsx
@@ -70,7 +70,7 @@ export const Table = sveltify<
     const paginationConfig = getConfig(pagination);
     const paginationShowTotalFunction = useFunction(paginationConfig.showTotal);
     const rowClassNameFunction = useFunction(rowClassName);
-    const rowKeyFunction = useFunction(rowKey);
+    const rowKeyFunction = useFunction(rowKey, true);
     const supportShowSorterTooltipConfig =
       slots['showSorterTooltip.title'] || typeof showSorterTooltip === 'object';
     const showSorterTooltipConfig = getConfig(showSorterTooltip);

diff --git a/frontend/antd/tag/Index.svelte b/frontend/antd/tag/Index.svelte
@@ -69,12 +69,9 @@
       {...$mergedProps.props}
       {...bindEvents($mergedProps)}
       slots={$slots}
+      value={$mergedProps.value}
     >
-      {#if $mergedProps._internal.layout}
-        <slot></slot>
-      {:else}
-        {$mergedProps.value}
-      {/if}
+      <slot></slot>
     </Tag>
   {/await}
 {/if}

diff --git a/frontend/antd/tag/checkable-tag/Index.svelte b/frontend/antd/tag/checkable-tag/Index.svelte
@@ -74,16 +74,13 @@
       {...$mergedProps.props}
       {...bindEvents($mergedProps)}
       slots={$slots}
+      label={$mergedProps.label}
       checked={$mergedProps.props.checked ?? $mergedProps.value}
       onValueChange={(checked) => {
         value = checked;
       }}
     >
-      {#if $mergedProps._internal.layout}
-        <slot></slot>
-      {:else}
-        {$mergedProps.label}
-      {/if}
+      <slot></slot>
     </CheckableTag>
   {/await}
 {/if}

diff --git a/frontend/antd/tag/checkable-tag/tag.checkable-tag.tsx b/frontend/antd/tag/checkable-tag/tag.checkable-tag.tsx
@@ -1,20 +1,32 @@
 import { sveltify } from '@svelte-preprocess-react';
 import React from 'react';
+import { useTargets } from '@utils/hooks/useTargets';
 import { type GetProps, Tag as ATag } from 'antd';
 
 export const CheckableTag = sveltify<
   GetProps<typeof ATag.CheckableTag> & {
     onValueChange: (checked: boolean) => void;
+    label?: string;
   }
->(({ onChange, onValueChange, ...props }) => {
+>(({ onChange, onValueChange, children, label, ...props }) => {
+  const targets = useTargets(children);
   return (
     <ATag.CheckableTag
       {...props}
       onChange={(v) => {
         onChange?.(v);
         onValueChange(v);
       }}
-    />
+    >
+      {targets.length > 0 ? (
+        children
+      ) : (
+        <>
+          {children}
+          {label}
+        </>
+      )}
+    </ATag.CheckableTag>
   );
 });
 

diff --git a/frontend/antd/tag/tag.tsx b/frontend/antd/tag/tag.tsx
@@ -1,24 +1,34 @@
 import { sveltify } from '@svelte-preprocess-react';
 import { ReactSlot } from '@svelte-preprocess-react/react-slot';
 import React from 'react';
+import { useTargets } from '@utils/hooks/useTargets';
 import { type GetProps, Tag as ATag } from 'antd';
 
-export const Tag = sveltify<GetProps<typeof ATag>, ['closeIcon', 'icon']>(
-  ({ slots, ...props }) => {
-    return (
-      <ATag
-        {...props}
-        icon={slots.icon ? <ReactSlot slot={slots.icon} /> : props.icon}
-        closeIcon={
-          slots.closeIcon ? (
-            <ReactSlot slot={slots.closeIcon} />
-          ) : (
-            props.closeIcon
-          )
-        }
-      />
-    );
-  }
-);
+export const Tag = sveltify<
+  GetProps<typeof ATag> & {
+    value?: string;
+  },
+  ['closeIcon', 'icon']
+>(({ slots, value, children, ...props }) => {
+  const targets = useTargets(children);
+  return (
+    <ATag
+      {...props}
+      icon={slots.icon ? <ReactSlot slot={slots.icon} /> : props.icon}
+      closeIcon={
+        slots.closeIcon ? <ReactSlot slot={slots.closeIcon} /> : props.closeIcon
+      }
+    >
+      {targets.length > 0 ? (
+        children
+      ) : (
+        <>
+          {children}
+          {value}
+        </>
+      )}
+    </ATag>
+  );
+});
 
 export default Tag;
diff --git a/frontend/antd/typography/typography.base.tsx b/frontend/antd/typography/typography.base.tsx
@@ -3,14 +3,13 @@ import { ReactSlot } from '@svelte-preprocess-react/react-slot';
 import type { SetSlotParams } from '@svelte-preprocess-react/slot';
 import React, { useMemo } from 'react';
 import { useSlotsChildren } from '@utils/hooks/useSlotsChildren';
+import { useTargets } from '@utils/hooks/useTargets';
 import { omitUndefinedProps } from '@utils/omitUndefinedProps';
 import { renderParamsSlot } from '@utils/renderParamsSlot';
 import { type GetProps, Typography } from 'antd';
 import type { EllipsisConfig } from 'antd/es/typography/Base';
 import cls from 'classnames';
 
-import { useTargets } from '../../utils/hooks/useTargets';
-
 function getConfig<T>(value: T): Partial<T & Record<PropertyKey, any>> {
   if (typeof value === 'object' && value !== null) {
     return value as any;
@@ -83,6 +82,7 @@ export const TypographyBase = sveltify<
       }
     }, [component]);
     const [slotsChildren, restChildren] = useSlotsChildren(children);
+    const targets = useTargets(children);
     return (
       <>
         <div style={{ display: 'none' }}>{slotsChildren}</div>
@@ -103,7 +103,7 @@ export const TypographyBase = sveltify<
                   icon:
                     copyableIconTargets.length > 0
                       ? copyableIconTargets.map((slot, index) => {
-                          return <ReactSlot key={index} slot={slot} />;
+                          return <ReactSlot key={index} slot={slot} clone />;
                         })
                       : copyableConfig.icon,
                 })
@@ -114,7 +114,7 @@ export const TypographyBase = sveltify<
               ? {
                   ...editableConfig,
                   icon: slots['editable.icon'] ? (
-                    <ReactSlot slot={slots['editable.icon']} />
+                    <ReactSlot slot={slots['editable.icon']} clone />
                   ) : (
                     editableConfig.icon
                   ),
@@ -163,7 +163,7 @@ export const TypographyBase = sveltify<
                 : undefined) as boolean
           }
         >
-          {restChildren}
+          {targets.length > 0 ? restChildren : <>{value}</>}
         </TypographyComponent>
       </>
     );