fix: layout (#41)

* fix: layout * chore: add changeset
modelscope · Dec 24, 2024 · ba8a4dc · ba8a4dc
1 parent dc92d50
commit ba8a4dc
Show file tree

Hide file tree

Showing 11 changed files with 85 additions and 80 deletions.
diff --git a/.changeset/swift-apricots-rest.md b/.changeset/swift-apricots-rest.md
@@ -0,0 +1,6 @@
+---
+'modelscope_studio': patch
+'@modelscope-studio/antd': patch
+---
+
+fix: layout
diff --git a/config/lint-config/configs/eslint/typescript.mjs b/config/lint-config/configs/eslint/typescript.mjs
@@ -41,7 +41,14 @@ export const typescript = [
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/no-unused-vars': [
         'warn',
-        { vars: 'all', varsIgnorePattern: '^_' },
+        {
+          args: 'all',
+          argsIgnorePattern: '^_',
+          caughtErrors: 'all',
+          caughtErrorsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+        },
       ],
       '@typescript-eslint/no-unused-expressions': 'off',
       '@typescript-eslint/ban-types': 'off',

diff --git a/frontend/antd/button/Index.svelte b/frontend/antd/button/Index.svelte
@@ -20,7 +20,7 @@
   export let _internal: {
     layout?: boolean;
   } = {};
-  export let value = '';
+  export let value: string | undefined;
 
   export let as_item: string | undefined;
   // gradio properties

diff --git a/frontend/antd/button/button.tsx b/frontend/antd/button/button.tsx
@@ -8,19 +8,17 @@ export const Button = sveltify<GetProps<typeof AButton>, ['icon']>(
   ({ 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>
+      <>
+        <div style={{ display: 'none' }}>
+          {targets.length > 0 ? null : children}
+        </div>
+        <AButton
+          {...props}
+          icon={slots.icon ? <ReactSlot slot={slots.icon} /> : props.icon}
+        >
+          {targets.length > 0 ? children : value}
+        </AButton>
+      </>
     );
   }
 );

diff --git a/frontend/antd/dropdown/button/Index.svelte b/frontend/antd/dropdown/button/Index.svelte
@@ -23,7 +23,7 @@
 
   export let gradio: Gradio;
   export let props: Record<string, any> = {};
-  export let value = '';
+  export let value: string | undefined;
   const updatedProps = writable(props);
   $: updatedProps.update((prev) => ({ ...prev, ...props }));
   export let _internal: {

diff --git a/frontend/antd/dropdown/button/dropdown.button.tsx b/frontend/antd/dropdown/button/dropdown.button.tsx
@@ -42,58 +42,58 @@ export const DropdownButton = sveltify<
     const targets = useTargets(children);
 
     return (
-      <ADropdown.Button
-        {...props}
-        buttonsRender={
-          buttonsRenderTargets.length
-            ? (...args) => {
-                setSlotParams('buttonsRender', args);
-                return buttonsRenderTargets.map((item, index) => {
-                  return <ReactSlot slot={item} key={index} />;
-                });
-              }
-            : buttonsRenderFunction
-        }
-        menu={{
-          ...props.menu,
-          items: useMemo(() => {
-            return (
-              props.menu?.items ||
-              renderItems<ItemType>(menuItems, { clone: true })
-            );
-          }, [menuItems, props.menu?.items]),
-          expandIcon: slots['menu.expandIcon']
-            ? renderParamsSlot(
-                { slots, setSlotParams, key: 'menu.expandIcon' },
-                { clone: true }
-              )
-            : props.menu?.expandIcon,
-          overflowedIndicator: slots['menu.overflowedIndicator'] ? (
-            <ReactSlot slot={slots['menu.overflowedIndicator']} />
-          ) : (
-            props.menu?.overflowedIndicator
-          ),
-        }}
-        getPopupContainer={getPopupContainerFunction}
-        dropdownRender={
-          slots.dropdownRender
-            ? renderParamsSlot({
-                slots,
-                setSlotParams,
-                key: 'dropdownRender',
-              })
-            : dropdownRenderFunction
-        }
-      >
-        {targets.length > 0 ? (
-          children
-        ) : (
-          <>
-            {children}
-            {value}
-          </>
-        )}
-      </ADropdown.Button>
+      <>
+        <div style={{ display: 'none' }}>
+          {targets.length > 0 ? null : children}
+        </div>
+        <ADropdown.Button
+          {...props}
+          buttonsRender={
+            buttonsRenderTargets.length
+              ? (...args) => {
+                  setSlotParams('buttonsRender', args);
+                  return buttonsRenderTargets.map((item, index) => {
+                    return <ReactSlot slot={item} key={index} />;
+                  });
+                }
+              : buttonsRenderFunction
+          }
+          menu={{
+            ...props.menu,
+            items: useMemo(() => {
+              return (
+                props.menu?.items ||
+                renderItems<ItemType>(menuItems, { clone: true }) ||
+                []
+              );
+            }, [menuItems, props.menu?.items]),
+            expandIcon: slots['menu.expandIcon']
+              ? renderParamsSlot(
+                  { slots, setSlotParams, key: 'menu.expandIcon' },
+                  { clone: true }
+                )
+              : props.menu?.expandIcon,
+            overflowedIndicator: slots['menu.overflowedIndicator'] ? (
+              <ReactSlot slot={slots['menu.overflowedIndicator']} />
+            ) : (
+              props.menu?.overflowedIndicator
+            ),
+          }}
+          getPopupContainer={getPopupContainerFunction}
+          dropdownRender={
+            slots.dropdownRender
+              ? renderParamsSlot({
+                  slots,
+                  setSlotParams,
+                  key: 'dropdownRender',
+                })
+              : dropdownRenderFunction
+          }
+          icon={slots.icon ? <ReactSlot slot={slots.icon} /> : props.icon}
+        >
+          {targets.length > 0 ? children : value}
+        </ADropdown.Button>
+      </>
     );
   }
 );

diff --git a/frontend/antd/dropdown/dropdown.tsx b/frontend/antd/dropdown/dropdown.tsx
@@ -38,7 +38,8 @@ export const Dropdown = sveltify<
             items: useMemo(() => {
               return (
                 props.menu?.items ||
-                renderItems<ItemType>(menuItems, { clone: true })
+                renderItems<ItemType>(menuItems, { clone: true }) ||
+                []
               );
             }, [menuItems, props.menu?.items]),
             expandIcon: slots['menu.expandIcon']

diff --git a/frontend/antd/tag/Index.svelte b/frontend/antd/tag/Index.svelte
@@ -22,7 +22,7 @@
   } = {};
 
   export let as_item: string | undefined;
-  export let value = '';
+  export let value: string | undefined;
   // gradio properties
 
   export let visible = true;

diff --git a/frontend/antd/tag/checkable-tag/Index.svelte b/frontend/antd/tag/checkable-tag/Index.svelte
@@ -25,7 +25,7 @@
 
   export let as_item: string | undefined;
   export let value: boolean = false;
-  export let label = '';
+  export let label: string | undefined;
   // gradio properties
 
   export let visible = true;

diff --git a/frontend/antd/tag/checkable-tag/tag.checkable-tag.tsx b/frontend/antd/tag/checkable-tag/tag.checkable-tag.tsx
@@ -18,14 +18,7 @@ export const CheckableTag = sveltify<
         onValueChange(v);
       }}
     >
-      {targets.length > 0 ? (
-        children
-      ) : (
-        <>
-          {children}
-          {label}
-        </>
-      )}
+      {targets.length > 0 ? children : label}
     </ATag.CheckableTag>
   );
 });

diff --git a/frontend/antd/typography/typography.base.tsx b/frontend/antd/typography/typography.base.tsx
@@ -163,7 +163,7 @@ export const TypographyBase = sveltify<
                 : undefined) as boolean
           }
         >
-          {targets.length > 0 ? restChildren : <>{value}</>}
+          {targets.length > 0 ? restChildren : value}
         </TypographyComponent>
       </>
     );