antd-solid 0.0.11 → 0.0.12

package/es/Modal.js

@@ -1,6 +1,6 @@
 import { delegateEvents, createComponent, Portal, insert, memo, effect, className, render, mergeProps as mergeProps$1, template } from 'solid-js/web';
 import { mergeProps, createSignal, untrack, Show } from 'solid-js';
-import Button from './Button.js';
+import Button from './Button/index.js';
 import cs from 'classnames';
 
 const _tmpl$ = /*#__PURE__*/template(`<span class="i-ant-design:close-outlined">`),
@@ -35,14 +35,15 @@ function Modal(_props) {
       };
     },
     close() {
-      setHide(true);
-      cleanup();
-      props.afterClose?.();
-    },
-    destroy() {
-      setOpen(false);
-      cleanup();
-      props.afterClose?.();
+      untrack(() => {
+        if (props.destroyOnClose) {
+          setOpen(false);
+        } else {
+          setHide(true);
+        }
+        cleanup();
+        props.afterClose?.();
+      });
     }
   };
   untrack(() => {

package/es/Popconfirm.js

@@ -1,6 +1,6 @@
 import { createComponent, mergeProps as mergeProps$1, insert, template } from 'solid-js/web';
 import { mergeProps, splitProps, createSignal, untrack } from 'solid-js';
-import Button from './Button.js';
+import Button from './Button/index.js';
 import Tooltip from './Tooltip.js';
 
 const _tmpl$ = /*#__PURE__*/template(`<div><div class="ant-mb-8px ant-flex ant-items-center"><span class="i-ant-design:exclamation-circle-fill ant-text-#faad14"></span><span class="ant-ml-8px ant-text-[rgba(0,0,0,0.88)] ant-font-600"></span></div><div class="ant-ml-22px ant-mb-8px ant-text-[rgba(0,0,0,0.88)]"></div><div class="ant-text-right">`);

package/es/Progress/index.d.ts

@@ -7,9 +7,8 @@ export interface ProgressProps {
     percent?: number;
     /**
      * 状态
-     * 默认 'default'
      */
-    status?: 'default' | 'success' | 'error';
+    status?: 'normal' | 'success' | 'error';
     /**
      * 'line' 类型进度条的高度
      * 默认 8

package/es/Progress/index.js

@@ -1,18 +1,21 @@
 import { insert, createComponent, effect, className, template } from 'solid-js/web';
-import { mergeProps, Show, Switch, Match } from 'solid-js';
+import { mergeProps, createMemo, Show, Switch, Match } from 'solid-js';
 import cs from 'classnames';
 
-const _tmpl$ = /*#__PURE__*/template(`<span class="i-ant-design:check-circle-filled ant-text-[var(--primary-color)]">`),
+const _tmpl$ = /*#__PURE__*/template(`<span class="i-ant-design:check-circle-filled ant-text-[var(--ant-color-success)]">`),
   _tmpl$2 = /*#__PURE__*/template(`<span class="i-ant-design:close-circle-filled ant-text-[var(--ant-color-error)]">`),
   _tmpl$3 = /*#__PURE__*/template(`<span class="ant-shrink-0 ant-min-w-40px ant-ml-8px ant-text-center">`),
   _tmpl$4 = /*#__PURE__*/template(`<div class="ant-flex ant-items-center"><div>`);
 const Progress = _props => {
   const props = mergeProps({
     percent: 0,
-    status: 'default',
     height: 8,
     showInfo: true
   }, _props);
+  const status = createMemo(() => {
+    if (props.status) return props.status;
+    return props.percent >= 100 ? 'success' : 'normal';
+  });
   return (() => {
     const _el$ = _tmpl$4(),
       _el$2 = _el$.firstChild;
@@ -30,14 +33,14 @@ const Progress = _props => {
           get children() {
             return [createComponent(Match, {
               get when() {
-                return props.status === 'success' || props.percent >= 100;
+                return status() === 'success';
               },
               get children() {
                 return _tmpl$();
               }
             }), createComponent(Match, {
               get when() {
-                return props.status === 'error';
+                return status() === 'error';
               },
               get children() {
                 return _tmpl$2();
@@ -49,20 +52,27 @@ const Progress = _props => {
       }
     }), null);
     effect(_p$ => {
-      const _v$ = cs('ant-w-full ant-bg-[var(--ant-progress-remaining-color)]', 'before:ant-content-empty before:ant-block before:ant-bg-[var(--primary-color)] before:ant-w-[var(--percent)] before:ant-h-full before:ant-rounded-inherit'),
+      const _v$ = cs('ant-w-full ant-bg-[var(--ant-progress-remaining-color)]', 'before:ant-content-empty before:ant-block before:ant-bg-[var(--color)] before:ant-w-[var(--percent)] before:ant-h-full before:ant-rounded-inherit'),
         _v$2 = `${props.height}px`,
         _v$3 = `${props.height / 2}px`,
-        _v$4 = `${props.percent}%`;
+        _v$4 = `${props.percent}%`,
+        _v$5 = {
+          normal: 'var(--ant-color-primary)',
+          success: 'var(--ant-color-success)',
+          error: 'var(--ant-color-error)'
+        }[status()];
       _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
       _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$2.style.setProperty("height", _v$2) : _el$2.style.removeProperty("height"));
       _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$2.style.setProperty("border-radius", _v$3) : _el$2.style.removeProperty("border-radius"));
       _v$4 !== _p$._v$4 && ((_p$._v$4 = _v$4) != null ? _el$2.style.setProperty("--percent", _v$4) : _el$2.style.removeProperty("--percent"));
+      _v$5 !== _p$._v$5 && ((_p$._v$5 = _v$5) != null ? _el$2.style.setProperty("--color", _v$5) : _el$2.style.removeProperty("--color"));
       return _p$;
     }, {
       _v$: undefined,
       _v$2: undefined,
       _v$3: undefined,
-      _v$4: undefined
+      _v$4: undefined,
+      _v$5: undefined
     });
     return _el$;
   })();

package/es/Radio.js

@@ -22,7 +22,7 @@ const Radio = props => {
       untrack(() => props.onChange?.(e));
     };
     insert(_el$, () => props.children, null);
-    effect(() => className(_el$2, cs('ant-w-16px ant-h-16px ant-rounded-50% ant-[border:1px_solid_var(--ant-color-border)]', checked() && 'ant-[border:5px_solid_var(--primary-color)]')));
+    effect(() => className(_el$2, cs('ant-w-16px ant-h-16px ant-rounded-50% ant-[border:1px_solid_var(--ant-color-border)]', checked() && 'ant-[border:5px_solid_var(--ant-color-primary)]')));
     effect(() => _el$3.checked = checked());
     effect(() => _el$3.value = props.value ?? '');
     return _el$;
@@ -43,7 +43,7 @@ Radio.Button = props => {
       untrack(() => props.onChange?.(e));
     };
     insert(_el$4, () => props.children, null);
-    effect(() => className(_el$4, cs('ant-px-15px ant-[border:1px_solid_rgb(217,217,217)] first:ant-rounded-l-6px last:ant-rounded-r-6px ant-h-32px ant-inline-flex ant-items-center hover:ant-text-[var(--primary-color)] not[:last-child]:ant-border-r-transparent ant-cursor-pointer ant-flex-grow ant-justify-center', checked() && 'ant-text-[var(--primary-color)] ant-[border:1px_solid_var(--primary-color)] !ant-border-r-[var(--primary-color)]')));
+    effect(() => className(_el$4, cs('ant-px-15px ant-[border:1px_solid_rgb(217,217,217)] first:ant-rounded-l-6px last:ant-rounded-r-6px ant-h-32px ant-inline-flex ant-items-center hover:ant-text-[var(--ant-color-primary)] not[:last-child]:ant-border-r-transparent ant-cursor-pointer ant-flex-grow ant-justify-center', checked() && 'ant-text-[var(--ant-color-primary)] ant-[border:1px_solid_var(--ant-color-primary)] !ant-border-r-[var(--ant-color-primary)]')));
     effect(() => _el$5.checked = checked());
     effect(() => _el$5.value = props.value ?? '');
     return _el$4;

package/es/Result.js

@@ -4,7 +4,7 @@ import cs from 'classnames';
 const _tmpl$ = /*#__PURE__*/template(`<div class="ant-text-center ant-px-32px ant-py-48px"><div class="ant-mb-24px"><span></span></div><div class="ant-my-8px ant-text-[rgba(0,0,0,.88)] ant-text-24px"></div><div class="ant-text-[rgba(0,0,0,.45)] ant-text-14px"></div><div class="ant-mt-24px"></div><div class="ant-mt-24px">`);
 const statusIconMap = {
   success: 'ant-text-#52c41a i-ant-design:check-circle-filled',
-  info: 'ant-text-[var(--primary-color)] i-ant-design:exclamation-circle-filled',
+  info: 'ant-text-[var(--ant-color-primary)] i-ant-design:exclamation-circle-filled',
   warning: 'ant-text-#faad14 i-ant-design:warning-filled',
   error: 'ant-text-#ff4d4f i-ant-design:close-circle-filled'
 };

package/es/Select.js

@@ -47,7 +47,7 @@ const Select = props => {
             close();
           };
           insert(_el$7, () => item.label);
-          effect(() => className(_el$7, cs('ant-box-content ant-px-12px ant-py-5px ant-h-22px ant-leading-22px hover:ant-bg-[var(--hover-bg-color)]', selectedValue(item.value) ? '!ant-bg-[var(--active-bg-color)]' : '')));
+          effect(() => className(_el$7, cs('ant-box-content ant-px-12px ant-py-5px ant-h-22px ant-leading-22px hover:ant-bg-[var(--hover-bg-color)]', selectedValue(item.value) ? '!ant-bg-[var(--ant-select-option-selected-bg)]' : '')));
           return _el$7;
         })()
       }));
@@ -103,7 +103,7 @@ const Select = props => {
           return _el$5;
         }
       }));
-      effect(() => className(_el$, cs('ant-h-32px ant-leading-32px ant-rounded-6px ant-[border:1px_solid_var(--ant-color-border)] ant-px-11px focus:ant-[border-color:var(--primary-color)]', props.class)));
+      effect(() => className(_el$, cs('ant-h-32px ant-leading-32px ant-rounded-6px ant-[border:1px_solid_var(--ant-color-border)] ant-px-11px focus:ant-[border-color:var(--ant-color-primary)]', props.class)));
       return _el$;
     }
   });

package/es/Spin.d.ts

@@ -4,6 +4,7 @@ interface SpinProps extends ParentProps {
      * 是否为加载中状态
      */
     spinning?: boolean;
+    size?: number;
 }
 declare const Spin: Component<SpinProps>;
 export default Spin;

package/es/Spin.js

@@ -1,9 +1,12 @@
-import { insert, createComponent, template } from 'solid-js/web';
-import { Show } from 'solid-js';
+import { insert, createComponent, effect, template } from 'solid-js/web';
+import { mergeProps, Show } from 'solid-js';
 
-const _tmpl$ = /*#__PURE__*/template(`<div class="ant-absolute ant-inset-0 ant-flex ant-items-center ant-justify-center ant-bg-[rgba(255,255,255,.5)]"><span class="i-ant-design:loading keyframes-spin ant-[animation:spin_1s_linear_infinite] ant-text-32px ant-text-[var(--primary-color)]">`),
-  _tmpl$2 = /*#__PURE__*/template(`<div class="ant-relative ant-min-h-32px">`);
-const Spin = props => {
+const _tmpl$ = /*#__PURE__*/template(`<div class="ant-flex ant-items-center ant-justify-center ant-bg-[rgba(255,255,255,.5)]"><span class="i-ant-design:loading keyframes-spin ant-[animation:spin_1s_linear_infinite] ant-text-[var(--ant-color-primary)]">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div>`);
+const Spin = _props => {
+  const props = mergeProps({
+    size: 20
+  }, _props);
   return (() => {
     const _el$ = _tmpl$2();
     insert(_el$, () => props.children, null);
@@ -12,7 +15,10 @@ const Spin = props => {
         return props.spinning;
       },
       get children() {
-        return _tmpl$();
+        const _el$2 = _tmpl$(),
+          _el$3 = _el$2.firstChild;
+        effect(() => `${props.size}px` != null ? _el$3.style.setProperty("font-size", `${props.size}px`) : _el$3.style.removeProperty("font-size"));
+        return _el$2;
       }
     }), null);
     return _el$;

package/es/Switch.js

@@ -13,7 +13,7 @@ const Switch = props => {
       _el$2 = _el$.firstChild;
     _el$.$$click = () => setChecked(c => !c);
     effect(_p$ => {
-      const _v$ = cs('ant-w-44px ant-h-22px ant-rounded-100px ant-relative', checked() ? 'ant-bg-[var(--primary-color)]' : 'ant-bg-[rgba(0,0,0,0.45)]'),
+      const _v$ = cs('ant-w-44px ant-h-22px ant-rounded-100px ant-relative', checked() ? 'ant-bg-[var(--ant-color-primary)]' : 'ant-bg-[rgba(0,0,0,0.45)]'),
         _v$2 = cs('ant-w-18px ant-h-18px ant-rounded-50% ant-bg-white ant-absolute ant-top-1/2 -ant-translate-y-1/2 ant-transition-left', checked() ? 'ant-left-[calc(100%-20px)]' : 'ant-left-2px');
       _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
       _v$2 !== _p$._v$2 && className(_el$2, _p$._v$2 = _v$2);

package/es/Tabs.js

@@ -4,7 +4,7 @@ import cs from 'classnames';
 import Segmented from './Segmented/index.js';
 import { unwrapStringOrJSXElement } from './utils/solid.js';
 
-const _tmpl$ = /*#__PURE__*/template(`<div><div role="selected-bar" class="ant-absolute ant-bottom-0 ant-bg-[var(--primary-color)] ant-h-2px ant-transition-left">`),
+const _tmpl$ = /*#__PURE__*/template(`<div><div role="selected-bar" class="ant-absolute ant-bottom-0 ant-bg-[var(--ant-color-primary)] ant-h-2px ant-transition-left">`),
   _tmpl$2 = /*#__PURE__*/template(`<div><div>`),
   _tmpl$3 = /*#__PURE__*/template(`<div>`);
 const Tabs = _props => {
@@ -63,7 +63,7 @@ const Tabs = _props => {
                   updateSelectedBarStyle();
                 };
                 insert(_el$5, () => unwrapStringOrJSXElement(item.label));
-                effect(() => className(_el$5, cs('ant-py-12px ant-cursor-pointer', props.navItemClass, isSelectedItem(item.key) && 'ant-text-[var(--primary-color)] selected')));
+                effect(() => className(_el$5, cs('ant-py-12px ant-cursor-pointer', props.navItemClass, isSelectedItem(item.key) && 'ant-text-[var(--ant-color-primary)] selected')));
                 return _el$5;
               })()
             }), _el$3);

package/es/Timeline.js

@@ -2,7 +2,7 @@ import { insert, createComponent, memo, template } from 'solid-js/web';
 import { For } from 'solid-js';
 
 const _tmpl$ = /*#__PURE__*/template(`<div class="ant-flex ant-flex-col ant-gap-[16px]">`),
-  _tmpl$2 = /*#__PURE__*/template(`<div class="ant-flex ant-relative"><div class="ant-w-[10px] ant-h-[10px] ant-border-solid ant-border-width-[3px] ant-border-[var(--primary-color)] ant-bg-white ant-rounded-[50%] ant-mt-[8px]"></div><div class="ant-ml-[8px]">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class="ant-flex ant-relative"><div class="ant-w-[10px] ant-h-[10px] ant-border-solid ant-border-width-[3px] ant-border-[var(--ant-color-primary)] ant-bg-white ant-rounded-[50%] ant-mt-[8px]"></div><div class="ant-ml-[8px]">`),
   _tmpl$3 = /*#__PURE__*/template(`<div class="ant-absolute ant-top-[8px] ant-bottom-[-24px] ant-left-[4px] ant-w-[2px] ant-bg-[rgba(5,5,5,.06)]">`);
 const Timeline = props => {
   return (() => {

package/es/Tree.js

@@ -98,9 +98,9 @@ function SingleLevelTree(props) {
           indexes
         }));
         effect(_p$ => {
-          const _v$ = cs('ant-flex ant-items-center ant-h-28px ant-pb-4px', isDraggable(item()) && 'ant-[border:1px_solid_var(--primary-color)] ant-bg-white', draggableNode() && 'child[]:ant-pointer-events-none'),
+          const _v$ = cs('ant-flex ant-items-center ant-h-28px ant-pb-4px', isDraggable(item()) && 'ant-[border:1px_solid_var(--ant-color-primary)] ant-bg-white', draggableNode() && 'child[]:ant-pointer-events-none'),
             _v$2 = cs('ant-flex-shrink-0 ant-w-24px ant-h-24px ant-flex ant-items-center ant-justify-center ant-cursor-pointer', isEmpty(props.children(item())) && 'opacity-0'),
-            _v$3 = cs('ant-h-full ant-leading-24px hover:ant-bg-[var(--hover-bg-color)] ant-rounded-1 ant-px-1 ant-cursor-pointer ant-relative', props.blockNode && 'w-full', selectedNodes()?.includes(item()) && '!ant-bg-[var(--active-bg-color)]', isTarget(item()) && "before:ant-content-[''] before:ant-inline-block before:ant-w-8px before:ant-h-8px before:ant-absolute before:ant-bottom-0 before:ant-left-0 before:-ant-translate-x-full before:ant-translate-y-1/2 before:ant-rounded-1/2 before:ant-[border:2px_solid_var(--primary-color)] after:ant-content-[''] after:ant-inline-block after:ant-h-2px after:ant-absolute after:ant-left-0 after:ant-right-0 after:ant-bottom--1px after:ant-bg-[var(--primary-color)]");
+            _v$3 = cs('ant-h-full ant-leading-24px hover:ant-bg-[var(--hover-bg-color)] ant-rounded-1 ant-px-1 ant-cursor-pointer ant-relative', props.blockNode && 'w-full', selectedNodes()?.includes(item()) && '!ant-bg-[var(--ant-tree-node-selected-bg)]', isTarget(item()) && "before:ant-content-[''] before:ant-inline-block before:ant-w-8px before:ant-h-8px before:ant-absolute before:ant-bottom-0 before:ant-left-0 before:-ant-translate-x-full before:ant-translate-y-1/2 before:ant-rounded-1/2 before:ant-[border:2px_solid_var(--ant-color-primary)] after:ant-content-[''] after:ant-inline-block after:ant-h-2px after:ant-absolute after:ant-left-0 after:ant-right-0 after:ant-bottom--1px after:ant-bg-[var(--ant-color-primary)]");
           _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
           _v$2 !== _p$._v$2 && className(_el$4, _p$._v$2 = _v$2);
           _v$3 !== _p$._v$3 && className(_el$6, _p$._v$3 = _v$3);

package/es/Upload.d.ts

@@ -1,11 +1,57 @@
-/// <reference types="react" />
-export type { UploadFile } from 'antd/es/upload';
-declare const Upload: import("solid-js").Component<Omit<Omit<import("antd").UploadProps<any> & {
-    children?: import("react").ReactNode;
-} & import("react").RefAttributes<any>, "className"> & {
-    class?: string | undefined;
-}, "children"> & {
-    children?: import("solid-js").JSX.Element;
-}>;
-export type UploadProps = Parameters<typeof Upload>[0];
+import { type Component, type ParentProps, type Signal } from 'solid-js';
+interface UploadProgressEvent extends Partial<ProgressEvent> {
+    percent?: number;
+}
+export interface UploadRequestOption<T = any> {
+    file: File;
+    onProgress?: (event: UploadProgressEvent) => void;
+    onError?: (event: Error) => void;
+    onSuccess?: (body: T) => void;
+}
+export interface UploadFile<T = any> {
+    /**
+     * 文件唯一标识
+     */
+    id: string;
+    /**
+     * 文件名
+     */
+    name: string;
+    /**
+     * MIME 类型
+     */
+    type?: string;
+    /**
+     * 文件大小
+     */
+    size?: number;
+    file?: File;
+    response?: T;
+    status?: 'pending' | 'uploading' | 'error' | 'finished';
+    percent?: number;
+    /**
+     * 下载地址
+     */
+    url?: string;
+}
+export interface UploadProps<T = any> extends ParentProps {
+    class?: string;
+    accept?: string;
+    /**
+     * 上传的地址
+     */
+    action?: string;
+    /**
+     * 上传请求的 http method
+     * 默认 'post'
+     */
+    method?: string;
+    customRequest?: (option: UploadRequestOption<T>) => void;
+    onAdd?: (fileList: Array<Signal<T>>) => void;
+    multiple?: boolean;
+}
+declare function request(file: File, customRequest: UploadProps['customRequest']): Signal<UploadFile<any>>;
+declare const Upload: Component<UploadProps> & {
+    request: typeof request;
+};
 export default Upload;

package/es/Upload.js

@@ -1,6 +1,96 @@
-import { replaceChildren, replaceClassName, reactToSolidComponent } from './utils/component.js';
-import { Upload as Upload$1 } from 'antd';
+import { delegateEvents, insert, use, effect, className, setAttribute, template } from 'solid-js/web';
+import { nanoid } from 'nanoid';
+import { mergeProps, createSignal } from 'solid-js';
 
-const Upload = replaceChildren(replaceClassName(reactToSolidComponent(Upload$1)));
+const _tmpl$ = /*#__PURE__*/template(`<span><input class="hidden" type="file">`);
+function request(file, customRequest) {
+  const id = `upload-${nanoid()}`;
+  // eslint-disable-next-line solid/reactivity
+  const uploadFileSignal = createSignal({
+    id,
+    file,
+    name: file.name,
+    type: file.type,
+    size: file.size,
+    status: 'pending',
+    percent: 0
+  });
+  const [, setUploadFile] = uploadFileSignal;
+  customRequest?.({
+    file,
+    onProgress(event) {
+      setUploadFile(value => ({
+        ...value,
+        status: 'uploading',
+        percent: event.percent ?? 0
+      }));
+    },
+    onSuccess(response) {
+      setUploadFile(value => ({
+        ...value,
+        status: 'finished',
+        response
+      }));
+    },
+    onError() {
+      setUploadFile(value => ({
+        ...value,
+        status: 'error'
+      }));
+    }
+  });
+  return uploadFileSignal;
+}
+const Upload = _props => {
+  let input;
+  const props = mergeProps({
+    customRequest: ({
+      file,
+      onSuccess,
+      onError
+    }) => {
+      if (!_props.action) return;
+      const formData = new FormData();
+      formData.append('file', file);
+      fetch(_props.action, {
+        method: _props.method ?? 'post',
+        body: formData
+      }).then(onSuccess).catch(onError);
+    }
+  }, _props);
+  return (() => {
+    const _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild;
+    _el$.$$click = () => input?.click();
+    insert(_el$, () => props.children, _el$2);
+    _el$2.$$input = e => {
+      const fileList = [];
+      for (const file of e.target.files ?? []) {
+        const uploadFileSignal = request(file, props.customRequest);
+        fileList.push(uploadFileSignal);
+      }
+      props.onAdd?.(fileList);
+      e.target.value = '';
+    };
+    const _ref$ = input;
+    typeof _ref$ === "function" ? use(_ref$, _el$2) : input = _el$2;
+    effect(_p$ => {
+      const _v$ = props.class,
+        _v$2 = props.accept,
+        _v$3 = props.multiple;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && setAttribute(_el$2, "accept", _p$._v$2 = _v$2);
+      _v$3 !== _p$._v$3 && (_el$2.multiple = _p$._v$3 = _v$3);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined,
+      _v$3: undefined
+    });
+    return _el$;
+  })();
+};
+Upload.request = request;
+delegateEvents(["click", "input"]);
 
 export { Upload as default };

package/es/index.js

@@ -1,4 +1,4 @@
-export { default as Button } from './Button.js';
+export { default as Button } from './Button/index.js';
 export { default as Input } from './Input.js';
 export { default as InputNumber } from './InputNumber.js';
 export { default as Timeline } from './Timeline.js';
@@ -22,7 +22,7 @@ export { default as Skeleton } from './Skeleton.js';
 export { default as Spin } from './Spin.js';
 export { default as Image } from './Image.js';
 export { default as Table } from './Table.js';
-export { default as Compact } from './Compact.js';
+export { default as Compact } from './Compact/index.js';
 export { default as Collapse } from './Collapse/index.js';
 export { default as Empty } from './Empty/index.js';
 export { default as Segmented } from './Segmented/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-solid",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "",
   "main": "src/index.ts",
   "types": "es/index.d.ts",

package/src/Button/index.scss

@@ -0,0 +1,9 @@
+.ant-compact {
+  .ant-btn-primary:not(:first-child) {
+    border-left: 1px solid white;
+  }
+  .ant-btn-primary:not(:last-child) {
+    border-right: 1px solid white;
+
+  }
+}

package/src/{Button.tsx → Button/index.tsx}

@@ -6,17 +6,20 @@ import {
   Show,
   createSignal,
   createMemo,
+  untrack,
 } from 'solid-js'
 import cs from 'classnames'
+import Compact from '../Compact'
+import './index.scss'
 
 interface ButtonProps extends ParentProps, JSX.CustomAttributes<HTMLButtonElement> {
   type?: 'default' | 'primary' | 'dashed' | 'text' | 'link'
   onClick?: ((e: MouseEvent) => void) | ((e: MouseEvent) => Promise<unknown>)
+  'on:click'?: (e: MouseEvent) => void
   /**
    * 默认: middle
-   * plain: 没有多余的 padding 和高度等
    */
-  size?: 'large' | 'middle' | 'small' | 'plain'
+  size?: 'large' | 'middle' | 'small'
   class?: string
   style?: JSX.CSSProperties
   loading?: boolean
@@ -30,7 +33,6 @@ const sizeClassMap = {
   large: 'ant-px-15px ant-py-6px ant-h-40px ant-rounded-8px',
   middle: 'ant-px-15px ant-py-4px ant-h-32px ant-rounded-6px',
   small: 'ant-px-7px ant-h-24px ant-rounded-4px',
-  plain: 'ant-p-0',
 } as const
 
 const typeClassMap = {
@@ -39,21 +41,21 @@ const typeClassMap = {
       'ant-bg-white',
       danger
         ? 'ant-[border:1px_solid_var(--ant-color-error)] ant-text-[var(--ant-color-error)] hover:ant-[border-color:var(--light-error-color)] hover:ant-text-[var(--light-error-color)] active:ant-[border-color:var(--dark-error-color)] active:ant-text-[var(--dark-error-color)]'
-        : 'ant-[border:1px_solid_var(--ant-color-border)] ant-text-[var(--dark-color)] hover:ant-[border-color:var(--light-primary-color)] hover:ant-text-[var(--light-primary-color)] active:ant-[border-color:var(--dark-primary-color)] active:ant-text-[var(--dark-primary-color)]',
+        : 'ant-[border:1px_solid_var(--ant-color-border)] ant-text-[var(--dark-color)] hover:ant-[border-color:var(--ant-color-primary-hover)] hover:ant-text-[var(--ant-color-primary-hover)] active:ant-[border-color:var(--ant-color-primary-active)] active:ant-text-[var(--ant-color-primary-active)]',
     ),
   primary: (danger: boolean) =>
     cs(
       'ant-text-white',
       danger
         ? 'ant-[border:1px_solid_var(--ant-color-error)] ant-bg-[var(--ant-color-error)] hover:ant-[border-color:var(--light-error-color)] hover:ant-bg-[var(--light-error-color)] active:ant-[border-color:var(--dark-error-color)] active:ant-bg-[var(--dark-error-color)]'
-        : 'ant-[border:1px_solid_var(--primary-color)] ant-bg-[var(--primary-color)] hover:ant-[border-color:var(--light-primary-color)] hover:ant-bg-[var(--light-primary-color)] active:ant-[border-color:var(--dark-primary-color)] active:ant-bg-[var(--dark-primary-color)]',
+        : 'ant-[border:1px_solid_var(--ant-color-primary)] ant-bg-[var(--ant-color-primary)] hover:ant-[border-color:var(--ant-color-primary-hover)] hover:ant-bg-[var(--ant-color-primary-hover)] active:ant-[border-color:var(--ant-color-primary-active)] active:ant-bg-[var(--ant-color-primary-active)]',
     ),
   dashed: (danger: boolean) =>
     cs(
       ' ant-bg-white',
       danger
         ? 'ant-[border:1px_dashed_var(--ant-color-error)] ant-text-[var(--ant-color-error)] hover:ant-[border-color:var(--light-error-color)] hover:ant-text-[var(--light-error-color)] active:ant-[border-color:var(--dark-error-color)] active:ant-text-[var(--dark-error-color)]'
-        : 'ant-[border:1px_dashed_var(--ant-color-border)] ant-text-[var(--dark-color)] hover:ant-[border-color:var(--light-primary-color)] hover:ant-text-[var(--light-primary-color)] active:ant-[border-color:var(--dark-primary-color)] active:ant-text-[var(--dark-primary-color)]',
+        : 'ant-[border:1px_dashed_var(--ant-color-border)] ant-text-[var(--dark-color)] hover:ant-[border-color:var(--ant-color-primary-hover)] hover:ant-text-[var(--ant-color-primary-hover)] active:ant-[border-color:var(--ant-color-primary-active)] active:ant-text-[var(--ant-color-primary-active)]',
     ),
   text: (danger: boolean) =>
     cs(
@@ -67,7 +69,7 @@ const typeClassMap = {
       'ant-border-none ant-bg-transparent',
       danger
         ? 'ant-text-[var(--ant-color-error)] hover:ant-text-[var(--light-error-color)] active:ant-text-[var(--dark-error-color)]'
-        : 'ant-text-[var(--primary-color)] hover:ant-text-[var(--light-primary-color)] active:ant-text-[var(--dark-primary-color)]',
+        : 'ant-text-[var(--ant-color-primary)] hover:ant-text-[var(--ant-color-primary-hover)] active:ant-text-[var(--ant-color-primary-active)]',
     ),
 } as const
 
@@ -80,15 +82,22 @@ const Button: Component<ButtonProps> = props => {
     <button
       ref={mergedProps.ref}
       class={cs(
+        `ant-btn ant-btn-${mergedProps.type}`,
         'ant-relative ant-cursor-pointer',
         'focus-visible:ant-[outline:4px_solid_var(--ant-color-primary-border)] focus-visible:ant-[outline-offset:1px]',
         mergedProps.class,
         sizeClassMap[mergedProps.size!],
         typeClassMap[mergedProps.type!](props.danger ?? false),
         loading() && 'ant-opacity-65',
-        'ant-[--color:--light-primary-color]',
+        'ant-[--color:--ant-color-primary-hover]',
+        Compact.compactItemRounded0Class,
+        Compact.compactItemZIndexClass,
+        Compact.compactItemClass,
       )}
       style={mergedProps.style}
+      // @ts-expect-error on:
+      on:click={untrack(() => props['on:click'])}
+      // eslint-disable-next-line solid/jsx-no-duplicate-props
       onClick={e => {
         const res = mergedProps.onClick?.(e)
         if (res instanceof Promise) {
@@ -105,7 +114,7 @@ const Button: Component<ButtonProps> = props => {
           div.className = cs(
             props.danger
               ? 'ant-[--color:var(--light-error-color)]'
-              : 'ant-[--color:var(--light-primary-color)]',
+              : 'ant-[--color:var(--ant-color-primary-hover)]',
             'ant-absolute ant-inset-0 ant-rounded-inherit ant-[background:radial-gradient(var(--color),rgba(0,0,0,0))] ant-z--1 ant-keyframes-button-border[inset:0px][inset:-6px] ant-[animation:button-border_ease-out_0.3s]',
           )
           const onAnimationEnd = () => {

package/src/Compact/index.tsx

@@ -0,0 +1,20 @@
+import { type ParentProps } from 'solid-js'
+
+interface CompactProps extends ParentProps {}
+
+function Compact(props: CompactProps) {
+  return (
+    <div class="ant-compact ant-flex child[:first-child]>:ant-rounded-l-6px child[:last-child]>:ant-rounded-r-6px">
+      {props.children}
+    </div>
+  )
+}
+
+Compact.compactItemClass = 'p[.ant-compact]:ant-ml--1px p[.ant-compact]:first:ant-ml-0'
+Compact.compactItemRounded0Class = 'p[.ant-compact]:ant-rounded-0'
+Compact.compactItemRoundedLeftClass = 'p[.ant-compact>:first-child]:ant-rounded-l-6px'
+Compact.compactItemRoundedRightClass = 'p[.ant-compact>:last-child]:ant-rounded-r-6px'
+Compact.compactItemZIndexClass =
+  'p[.ant-compact]:hover:ant-z-10 p[.ant-compact]:focus:ant-z-10 p[.ant-compact]:focus-within:ant-z-10'
+
+export default Compact

package/src/Drawer/index.tsx

@@ -179,8 +179,7 @@ const Drawer: Component<DrawerProps> = _props => {
                 <Show when={props.closeIcon !== false}>
                   <Button
                     type="text"
-                    size="plain"
-                    class="ant-mr-[var(--ant-margin-sm)] ant-text-size-[var(--ant-font-size-lg)] ant-h-[var(--ant-font-size-lg)] ant-leading-[var(--ant-font-size-lg)] hover:!ant-bg-transparent !ant-text-[var(--ant-color-icon)] hover:!ant-text-[var(--ant-color-icon-hover)]"
+                    class="ant-mr-[var(--ant-margin-sm)] ant-text-size-[var(--ant-font-size-lg)] ant-h-[var(--ant-font-size-lg)] ant-leading-[var(--ant-font-size-lg)] hover:!ant-bg-transparent !ant-text-[var(--ant-color-icon)] hover:!ant-text-[var(--ant-color-icon-hover)] !ant-p-0"
                     onClick={() => {
                       instance?.close()
                     }}

package/src/Empty/index.tsx

@@ -1,16 +1,21 @@
-import { type Component } from 'solid-js'
+import { type Component, type JSX } from 'solid-js'
 import PRESENTED_IMAGE_SIMPLE from './PRESENTED_IMAGE_SIMPLE'
 import EmptySvg from './assets/EmptySvg'
 
-const Empty: Component & {
+export interface EmptyProps {
+  class?: string
+  style?: JSX.CSSProperties
+}
+
+const Empty: Component<EmptyProps> & {
   PRESENTED_IMAGE_SIMPLE: Component
-} = () => {
+} = props => {
   return (
-    <div>
-      <div class='ant-mb-[var(--ant-margin-xs)] ant-flex ant-justify-center'>
+    <div {...props} style={props.style}>
+      <div class="ant-mb-[var(--ant-margin-xs)] ant-flex ant-justify-center">
         <EmptySvg />
       </div>
-      <div class='ant-text-[var(--ant-color-text)] ant-text-center'>暂无数据</div>
+      <div class="ant-text-[var(--ant-color-text)] ant-text-center">暂无数据</div>
     </div>
   )
 }