antd-solid 0.0.12 → 0.0.14

package/es/SelectInput/index.js

@@ -0,0 +1,245 @@
+import { delegateEvents, createComponent, use, insert, effect, style, Dynamic, setAttribute, className, template } from 'solid-js/web';
+import { useContext, mergeProps, createMemo, createSignal, Show, For } from 'solid-js';
+import cs from 'classnames';
+import { compact, pick, isUndefined } from 'lodash-es';
+import Tooltip from '../Tooltip/index.js';
+import createControllableValue from '../hooks/createControllableValue.js';
+import useClickAway from '../hooks/useClickAway.js';
+import Element from '../Element/index.js';
+import useComponentSize from '../hooks/useComponentSize.js';
+import CompactContext from '../Compact/context.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<div class=w-full>`),
+  _tmpl$2 = /*#__PURE__*/template(`<span class="right-[--ant-select-input-padding-right] i-ant-design:close-circle-filled cursor-pointer text-[var(--ant-color-text-quaternary)] hover:text-[var(--ant-color-text-tertiary)] active:text-[var(--ant-color-text)]">`),
+  _tmpl$3 = /*#__PURE__*/template(`<div tabindex=0><div>`),
+  _tmpl$4 = /*#__PURE__*/template(`<div class="w-[--ant-select-popup-match-width] max-h-400px overflow-auto [font-size:var(--ant-select-popup-font-size)]">`),
+  _tmpl$5 = /*#__PURE__*/template(`<span class="inline-block w-0"> `),
+  _tmpl$6 = /*#__PURE__*/template(`<span class="block w-full h-[calc(var(--ant-select-input-height)-2px)] leading-[calc(var(--ant-select-input-height)-2px)] text-[var(--ant-color-text-placeholder)]">`),
+  _tmpl$7 = /*#__PURE__*/template(`<div class="w-full h-[calc(var(--ant-select-input-height)-2px)] leading-[calc(var(--ant-select-input-height)-2px)] ellipsis">`),
+  _tmpl$8 = /*#__PURE__*/template(`<span class="inline-block my-2px mr-4px bg-[var(--ant-select-multiple-item-bg)] leading-[var(--ant-select-multiple-item-height)] h-[var(--ant-select-multiple-item-height)] pl-8px pr-4px rounded-[var(--ant-border-radius-sm)]"><span class="i-ant-design:close-outlined text-[var(--ant-color-icon)] hover:text-[var(--ant-color-icon-hover)] text-12px cursor-pointer">`),
+  _tmpl$9 = /*#__PURE__*/template(`<span class="i-ant-design:down-outlined text-[var(--ant-color-text-quaternary)] text-12px">`);
+function SelectInput(_props) {
+  let select;
+  let tooltipContent;
+  const {
+    compact: isCompact
+  } = useContext(CompactContext);
+  const props = mergeProps({
+    variant: 'outlined',
+    placement: 'bottomLeft'
+  }, _props);
+  const size = useComponentSize(() => props.size);
+  const [value, setValue] = createControllableValue(props, {
+    defaultValue: []
+  });
+  const valueArr = createMemo(() => value() ?? []);
+  const [open, setOpen] = createControllableValue(_props, {
+    defaultValue: false,
+    defaultValuePropName: 'defaultOpen',
+    valuePropName: 'open',
+    trigger: 'onOpenChange'
+  });
+  useClickAway(() => setOpen(false), () => compact([select, tooltipContent]));
+  const [popupMatchWidth, setPopupMatchWidth] = createSignal(0);
+  const [hover, setHover] = createSignal(false);
+  const showClearBtn = createMemo(() => props.allowClear && hover() && valueArr().length > 0);
+  const optionLabelRender = v => props.labelRender ? props.labelRender(v) : String(v);
+  const style$1 = createMemo(() => ({
+    '--ant-select-input-font-size': {
+      small: 'var(--ant-font-size)',
+      middle: 'var(--ant-font-size)',
+      large: 'var(--ant-font-size-lg)'
+    }[size()],
+    '--ant-select-input-padding-right': {
+      small: '7px',
+      middle: '11px',
+      large: '11px'
+    }[size()],
+    '--ant-select-input-padding-left': valueArr().length && props.multiple ? '4px' : 'var(--ant-select-input-padding-right)',
+    '--ant-select-input-padding': '0 var(--ant-select-input-padding-right) 0 var(--ant-select-input-padding-left)',
+    '--ant-select-input-addon-after-padding': '0 0 0 var(--ant-padding-xs)',
+    '--ant-select-popup-match-width': `${popupMatchWidth()}px`,
+    '--ant-select-popup-font-size': {
+      small: 'var(--ant-font-size)',
+      middle: 'var(--ant-font-size)',
+      large: 'var(--ant-font-size-lg)'
+    }[size()],
+    ...props.style
+  }));
+  return createComponent(Element, {
+    ref(r$) {
+      var _ref$ = select;
+      typeof _ref$ === "function" ? _ref$(r$) : select = r$;
+    },
+    get ["class"]() {
+      return cs('!p[.ant-input-addon]:my--1px !p[.ant-input-addon]:mx--12px', 'rounded-6px cursor-pointer inline-block text-[var(--ant-color-text)] leading-[var(--ant-line-height)]', isCompact && 'ant-compact-item', props.class, props.disabled && 'cursor-not-allowed');
+    },
+    get style() {
+      return style$1();
+    },
+    get children() {
+      return createComponent(Tooltip, {
+        plain: true,
+        get open() {
+          return open();
+        },
+        onOpenChange: setOpen,
+        trigger: false,
+        get placement() {
+          return props.placement;
+        },
+        arrow: false,
+        contentStyle: {
+          padding: 0
+        },
+        content: () => (() => {
+          var _el$5 = _tmpl$4();
+          var _ref$2 = tooltipContent;
+          typeof _ref$2 === "function" ? use(_ref$2, _el$5) : tooltipContent = _el$5;
+          insert(_el$5, () => props.content(() => setOpen(false)));
+          effect(_$p => style(_el$5, {
+            ...pick(style$1(), ['--ant-select-popup-font-size', '--ant-select-popup-match-width'])
+          }, _$p));
+          return _el$5;
+        })(),
+        get getPopupContainer() {
+          return props.getPopupContainer;
+        },
+        get children() {
+          var _el$ = _tmpl$3(),
+            _el$3 = _el$.firstChild;
+          _el$.addEventListener("mouseleave", () => setHover(false));
+          _el$.addEventListener("mouseenter", () => setHover(true));
+          _el$.$$click = e => {
+            setOpen(v => !v);
+            setPopupMatchWidth(e.currentTarget.offsetWidth);
+            e.currentTarget.focus();
+          };
+          insert(_el$, createComponent(Show, {
+            get when() {
+              return valueArr().length;
+            },
+            get fallback() {
+              return (() => {
+                var _el$6 = _tmpl$6();
+                insert(_el$6, () => props.placeholder, null);
+                insert(_el$6, createComponent(Show, {
+                  get when() {
+                    return !props.placeholder;
+                  },
+                  get children() {
+                    return _tmpl$5();
+                  }
+                }), null);
+                return _el$6;
+              })();
+            },
+            get children() {
+              return createComponent(Show, {
+                get when() {
+                  return props.multiple;
+                },
+                get fallback() {
+                  return createComponent(Dynamic, {
+                    component: () => {
+                      const optionLabel = createMemo(() => optionLabelRender(valueArr()[0]));
+                      return (() => {
+                        var _el$8 = _tmpl$7();
+                        insert(_el$8, optionLabel);
+                        effect(() => setAttribute(_el$8, "title", typeof optionLabel() === 'string' ? optionLabel() : undefined));
+                        return _el$8;
+                      })();
+                    }
+                  });
+                },
+                get children() {
+                  var _el$2 = _tmpl$();
+                  insert(_el$2, createComponent(For, {
+                    get each() {
+                      return valueArr();
+                    },
+                    children: item => {
+                      const optionLabel = createMemo(() => optionLabelRender(valueArr()[0]));
+                      return (() => {
+                        var _el$9 = _tmpl$8(),
+                          _el$10 = _el$9.firstChild;
+                        insert(_el$9, optionLabel, _el$10);
+                        _el$10.$$click = () => setValue(valueArr().filter(v => v !== item));
+                        effect(() => setAttribute(_el$9, "title", typeof optionLabel() === 'string' ? optionLabel() : undefined));
+                        return _el$9;
+                      })();
+                    }
+                  }));
+                  return _el$2;
+                }
+              });
+            }
+          }), _el$3);
+          insert(_el$3, createComponent(Show, {
+            get when() {
+              return showClearBtn();
+            },
+            get fallback() {
+              return createComponent(Show, {
+                get when() {
+                  return isUndefined(props.suffixIcon);
+                },
+                get fallback() {
+                  return props.suffixIcon;
+                },
+                get children() {
+                  return _tmpl$9();
+                }
+              });
+            },
+            get children() {
+              var _el$4 = _tmpl$2();
+              _el$4.$$click = e => {
+                e.stopPropagation();
+                setValue([]);
+                setOpen(false);
+              };
+              return _el$4;
+            }
+          }));
+          effect(_p$ => {
+            var _v$ = cs('p[.ant-input-addon]:border-transparent p[.ant-input-addon]:bg-transparent p[.ant-input-addon]:focus-within:border-transparent p[.ant-input-addon]:hover:border-transparent p[.ant-input-addon]:focus-within:[box-shadow:none]', 'relative h-[--ant-select-input-height] rounded-inherit py-1px flex items-center [font-size:var(--ant-select-input-font-size)] p-[--ant-select-input-padding]', props.disabled && '[pointer-events:none] bg-[var(--ant-color-bg-container-disabled)] color-[var(--ant-color-text-disabled)]', props.variant === 'outlined' && {
+                default: cs('border-1px border-solid border-[--ant-color-border] bg-[--ant-color-bg-container]', !props.disabled && 'hover:border-[var(--ant-color-primary)] focus-within:border-[var(--ant-color-primary)] focus-within:[box-shadow:0_0_0_2px_var(--ant-control-outline)]'),
+                error: cs('border-1px border-solid border-[--ant-color-error] bg-[--ant-color-bg-container]', !props.disabled && 'hover:border-[var(--ant-color-error-border-hover)] focus-within:[box-shadow:0_0_0_2px_rgba(255,38,5,.06)]'),
+                warning: cs('border-1px border-solid border-[--ant-color-warning] bg-[--ant-color-bg-container]', !props.disabled && 'hover:border-[var(--ant-color-warning-border-hover)] focus-within:[box-shadow:0_0_0_2px_rgba(255,215,5,.1)]')
+              }[props.status ?? 'default'], props.variant === 'filled' && {
+                default: cs('bg-[--ant-color-fill-tertiary]', !props.disabled && 'hover:bg-[--ant-color-fill-secondary]'),
+                error: cs('bg-[--ant-color-error-bg]', !props.disabled && 'hover:bg-[--ant-color-error-bg-hover]'),
+                warning: cs('bg-[--ant-color-warning-bg]', !props.disabled && 'hover:bg-[--ant-color-warning-bg-hover]')
+              }[props.status ?? 'default']),
+              _v$2 = {
+                small: '24px',
+                middle: '32px',
+                large: '40px'
+              }[size()],
+              _v$3 = {
+                small: '16px',
+                middle: '24px',
+                large: '32px'
+              }[size()],
+              _v$4 = cs('shrink-0 flex justify-end items-center p-[--ant-select-input-addon-after-padding] empty:hidden');
+            _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+            _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("--ant-select-input-height", _v$2) : _el$.style.removeProperty("--ant-select-input-height"));
+            _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$.style.setProperty("--ant-select-multiple-item-height", _v$3) : _el$.style.removeProperty("--ant-select-multiple-item-height"));
+            _v$4 !== _p$.o && className(_el$3, _p$.o = _v$4);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined,
+            o: undefined
+          });
+          return _el$;
+        }
+      });
+    }
+  });
+}
+delegateEvents(["click"]);
+
+export { SelectInput as default };

package/es/Slider/index.d.ts

@@ -0,0 +1,47 @@
+import { type Component, type JSX, type JSXElement } from 'solid-js';
+import { type StringOrJSXElement, type StyleProps } from '../types';
+export interface SliderProps extends StyleProps {
+    defaultValue?: number | null;
+    value?: number | null;
+    /**
+     * 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入
+     */
+    onChange?: (value: number) => void;
+    /**
+     * 与 mouseup 和 keyup 触发时机一致，把当前值作为参数传入
+     */
+    onChangeComplete?: (value: number) => void;
+    disabled?: boolean;
+    /**
+     * 最大值
+     * 默认 100
+     */
+    max?: number;
+    /**
+     * 最大值
+     * 默认 0
+     */
+    min?: number;
+    /**
+     * 步长
+     * 默认 1
+     */
+    step?: number;
+    /**
+     * 是否展示 tooltip
+     * 默认 true
+     */
+    tooltip?: boolean | {
+        formatter?: (value: number) => JSXElement;
+    };
+    /**
+     * 抓取点元素
+     */
+    handle?: StringOrJSXElement;
+    /**
+     * 轨道背景色元素的 style
+     */
+    railBgStyle?: JSX.CSSProperties;
+}
+declare const Slider: Component<SliderProps>;
+export default Slider;

package/es/Slider/index.js

@@ -0,0 +1,177 @@
+import { delegateEvents, createComponent, insert, memo, use, effect, className, setAttribute, style, template } from 'solid-js/web';
+import { mergeProps, createMemo, createSignal, children, createEffect, onCleanup, Show } from 'solid-js';
+import cs from 'classnames';
+import { clamp, isNil } from 'lodash-es';
+import NP from 'number-precision';
+import createControllableValue from '../hooks/createControllableValue.js';
+import Tooltip from '../Tooltip/index.js';
+import useHover from '../hooks/useHover.js';
+import useFocus from '../hooks/useFocus.js';
+import Element from '../Element/index.js';
+import { unwrapStringOrJSXElement } from '../utils/solid.js';
+import { setupGlobalDrag } from '../utils/setupGlobalDrag.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<div>`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class="absolute top-1/2 -translate-1/2 w-[--ant-slider-handle-size] h-[--ant-slider-handle-size]">`),
+  _tmpl$3 = /*#__PURE__*/template(`<div><div></div><div></div><div class="absolute left-[calc(var(--ant-slider-handle-size)/2)] right-[calc(var(--ant-slider-handle-size)/2)] top-1/2 -translate-y-1/2">`);
+const Slider = _props => {
+  let containerRef;
+  let handleRef;
+  const props = mergeProps({
+    min: 0,
+    max: 100,
+    step: 1,
+    tooltip: true
+  }, _props);
+  const [_value, _setValue] = createControllableValue(props);
+  const value = createMemo(() => clamp(typeof _value() === 'number' ? _value() : 0, props.min, props.max));
+  const setValue = v => {
+    const _v = clamp(NP.times(Math.round(v / props.step), props.step), props.min, props.max);
+    _setValue(_v);
+  };
+  const gap = createMemo(() => props.max - props.min);
+  const progress = createMemo(() => (value() - props.min) / gap());
+  const isHover = useHover(() => handleRef);
+  const isFocus = useFocus(() => handleRef);
+  const [isDragging, setIsDragging] = createSignal(false);
+  const resolvedHandle = children(() => unwrapStringOrJSXElement(props.handle));
+  // 注册键盘监听
+  createEffect(() => {
+    if (props.disabled) return;
+    const onKeydown = e => {
+      if (document.activeElement !== handleRef) return;
+      switch (e.code) {
+        case 'ArrowLeft':
+        case 'ArrowDown':
+          e.preventDefault();
+          setValue(NP.minus(value(), props.step));
+          break;
+        case 'ArrowRight':
+        case 'ArrowUp':
+          e.preventDefault();
+          setValue(NP.plus(value(), props.step));
+          e.preventDefault();
+          break;
+      }
+    };
+    window.addEventListener('keydown', onKeydown);
+    onCleanup(() => {
+      window.removeEventListener('keydown', onKeydown);
+    });
+  });
+  return createComponent(Element, {
+    ref(r$) {
+      var _ref$ = containerRef;
+      typeof _ref$ === "function" ? _ref$(r$) : containerRef = r$;
+    },
+    get ["class"]() {
+      return cs(props.class, 'relative cursor-pointer', props.disabled && 'cursor-not-allowed');
+    },
+    get style() {
+      return {
+        '--ant-slider-rail-size': '4px',
+        // 轨道高度
+        '--ant-slider-handle-size': '14px',
+        // 抓取点元素大小
+        '--ant-slider-rail-bg': 'var(--ant-color-fill-tertiary)',
+        '--ant-slider-rail-hover-bg': 'var(--ant-color-fill-secondary)',
+        '--ant-slider-track-bg': 'var(--ant-color-primary-border)',
+        '--ant-slider-track-hover-bg': 'var(--ant-color-primary-border-hover)',
+        padding: 'calc((var(--ant-slider-handle-size) - var(--ant-slider-rail-size)) / 2) 0',
+        ...props.style
+      };
+    },
+    get children() {
+      var _el$ = _tmpl$3(),
+        _el$2 = _el$.firstChild,
+        _el$3 = _el$2.nextSibling,
+        _el$4 = _el$3.nextSibling;
+      _el$.$$click = e => {
+        const handleWidth = handleRef?.offsetWidth ?? 0;
+        const halfHandleWidth = handleWidth / 2;
+        const offsetX = clamp(e.offsetX - halfHandleWidth, 0, containerRef.offsetWidth - handleWidth);
+        setValue(props.min + offsetX / (containerRef.offsetWidth - handleWidth) * gap());
+      };
+      insert(_el$4, createComponent(Tooltip, {
+        get open() {
+          return memo(() => !!props.tooltip)() && (isHover() || isFocus() || isDragging());
+        },
+        get content() {
+          return memo(() => !!(typeof props.tooltip === 'object' && props.tooltip.formatter))() ? props.tooltip.formatter(value()) : value();
+        },
+        get children() {
+          var _el$5 = _tmpl$2();
+          _el$5.$$mousedown = e => {
+            const startX = e.clientX;
+            const startValue = value();
+            setIsDragging(true);
+            const handleWidth = handleRef.offsetWidth;
+            setupGlobalDrag(
+            // eslint-disable-next-line solid/reactivity
+            _e => {
+              const moveX = _e.clientX - startX;
+              setValue(startValue + moveX / (containerRef.offsetWidth - handleWidth) * gap());
+            },
+            // eslint-disable-next-line solid/reactivity
+            () => {
+              props.onChangeComplete?.(value());
+              setIsDragging(false);
+            });
+          };
+          _el$5.$$click = e => {
+            e.stopPropagation();
+          };
+          var _ref$2 = handleRef;
+          typeof _ref$2 === "function" ? use(_ref$2, _el$5) : handleRef = _el$5;
+          insert(_el$5, createComponent(Show, {
+            get when() {
+              return isNil(resolvedHandle());
+            },
+            get fallback() {
+              return resolvedHandle();
+            },
+            get children() {
+              var _el$6 = _tmpl$();
+              effect(_p$ => {
+                var _v$ = cs('box-border w-full h-full bg-[--ant-color-bg-container-secondary] rounded-1/2 border-solid border-2px cursor-pointer', props.disabled ? 'border-[var(--ant-slider-handle-color-disabled)]' : ['border-[var(--ant-slider-handle-color)]', 'hover:border-[var(--ant-slider-handle-active-color)] hover:[outline:4px_solid_var(--ant-control-outline)]', 'focus:border-[var(--ant-slider-handle-active-color)] focus:[outline:4px_solid_var(--ant-control-outline)]']),
+                  _v$2 = props.disabled ? undefined : '0';
+                _v$ !== _p$.e && className(_el$6, _p$.e = _v$);
+                _v$2 !== _p$.t && setAttribute(_el$6, "tabindex", _p$.t = _v$2);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined
+              });
+              return _el$6;
+            }
+          }));
+          effect(() => `${progress() * 100}%` != null ? _el$5.style.setProperty("left", `${progress() * 100}%`) : _el$5.style.removeProperty("left"));
+          return _el$5;
+        }
+      }));
+      effect(_p$ => {
+        var _v$3 = cs(props.disabled && 'pointer-events-none'),
+          _v$4 = cs('[background:var(--ant-slider-rail-bg)] h-[--ant-slider-rail-size] rounded-[calc(var(--ant-slider-rail-size)/2)]', !props.disabled && 'hover:[background:var(--ant-slider-rail-hover-bg)]'),
+          _v$5 = props.railBgStyle,
+          _v$6 = cs('absolute left-0 top-1/2 -translate-y-1/2 h-[--ant-slider-rail-size] rounded-[calc(var(--ant-slider-rail-size)/2)]', props.disabled ? 'bg-[var(--ant-slider-track-bg-disabled)]' : ['bg-[var(--ant-slider-track-bg)] hover:bg-[var(--ant-slider-track-hover-bg)]']),
+          _v$7 = `${progress() * 100}%`;
+        _v$3 !== _p$.e && className(_el$, _p$.e = _v$3);
+        _v$4 !== _p$.t && className(_el$2, _p$.t = _v$4);
+        _p$.a = style(_el$2, _v$5, _p$.a);
+        _v$6 !== _p$.o && className(_el$3, _p$.o = _v$6);
+        _v$7 !== _p$.i && ((_p$.i = _v$7) != null ? _el$3.style.setProperty("width", _v$7) : _el$3.style.removeProperty("width"));
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined,
+        i: undefined
+      });
+      return _el$;
+    }
+  });
+};
+delegateEvents(["click", "mousedown"]);
+
+export { Slider as default };

package/es/Space/index.d.ts

@@ -0,0 +1,13 @@
+import { type Accessor, type JSX } from 'solid-js';
+import { type StringOrJSXElement } from '../types';
+interface SpaceProps<T extends readonly any[], U extends JSX.Element> {
+    each: T | undefined | null | false;
+    fallback?: JSX.Element;
+    children: (item: T[number], index: Accessor<number>) => U;
+    /**
+     * 设置拆分
+     */
+    split: StringOrJSXElement;
+}
+declare function Space<T extends readonly any[], U extends JSX.Element>(props: SpaceProps<T, U>): JSX.Element;
+export default Space;

package/es/Space/index.js

@@ -0,0 +1,16 @@
+import { createComponent, mergeProps, memo } from 'solid-js/web';
+import { For } from 'solid-js';
+import Element from '../Element/index.js';
+import { unwrapStringOrJSXElement } from '../utils/solid.js';
+
+function Space(props) {
+  return createComponent(Element, {
+    get children() {
+      return createComponent(For, mergeProps(props, {
+        children: (item, index) => [memo(() => memo(() => index() !== 0)() && unwrapStringOrJSXElement(props.split)), memo(() => props.children(item, index))]
+      }));
+    }
+  });
+}
+
+export { Space as default };

package/es/Spin/index.d.ts

@@ -0,0 +1,19 @@
+import { type Component, type ParentProps } from 'solid-js';
+import { type StringOrJSXElement, type StyleProps } from '../types';
+interface SpinProps extends ParentProps, StyleProps {
+    /**
+     * 是否为加载中状态
+     * 默认 true
+     */
+    spinning?: boolean;
+    /**
+     * 组件大小，可选值为 small default large
+     */
+    size?: number;
+    /**
+     * 当作为包裹元素时，可以自定义描述文案
+     */
+    tip?: StringOrJSXElement;
+}
+declare const Spin: Component<SpinProps>;
+export default Spin;

package/es/Spin/index.js

@@ -0,0 +1,82 @@
+import { insert, createComponent, effect, template } from 'solid-js/web';
+import { mergeProps, children, Show } from 'solid-js';
+import cs from 'classnames';
+import Element from '../Element/index.js';
+import { unwrapStringOrJSXElement, isEmptyJSXElement } from '../utils/solid.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<div class="inline-flex flex-col items-center gap-8px text-[var(--ant-color-primary)]"><span class="i-ant-design:loading keyframes-spin [animation:spin_1s_linear_infinite]">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div>`),
+  _tmpl$3 = /*#__PURE__*/template(`<div class="absolute inset-0 flex items-center justify-center bg-[var(--ant-color-bg-container)] opacity-40">`);
+const Spin = _props => {
+  const props = mergeProps({
+    spinning: true,
+    size: 20
+  }, _props);
+  const resolvedChildren = children(() => props.children);
+  const resolvedTip = children(() => unwrapStringOrJSXElement(props.tip));
+  const spin = (() => {
+    var _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild;
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return !isEmptyJSXElement(resolvedTip());
+      },
+      get children() {
+        return resolvedTip();
+      }
+    }), null);
+    effect(() => `${props.size}px` != null ? _el$2.style.setProperty("font-size", `${props.size}px`) : _el$2.style.removeProperty("font-size"));
+    return _el$;
+  })();
+  return createComponent(Show, {
+    get when() {
+      return !isEmptyJSXElement(resolvedChildren());
+    },
+    get fallback() {
+      return createComponent(Element, {
+        get ["class"]() {
+          return cs(props.class, 'inline-block text-center');
+        },
+        get style() {
+          return props.style;
+        },
+        get children() {
+          return createComponent(Show, {
+            get when() {
+              return props.spinning;
+            },
+            children: spin
+          });
+        }
+      });
+    },
+    get children() {
+      return createComponent(Element, {
+        get ["class"]() {
+          return cs(props.class, 'relative');
+        },
+        get style() {
+          return props.style;
+        },
+        get children() {
+          return [(() => {
+            var _el$3 = _tmpl$2();
+            insert(_el$3, resolvedChildren);
+            return _el$3;
+          })(), createComponent(Show, {
+            get when() {
+              return props.spinning;
+            },
+            get children() {
+              var _el$4 = _tmpl$3();
+              insert(_el$4, spin);
+              return _el$4;
+            }
+          })];
+        }
+      });
+    }
+  });
+};
+
+export { Spin as default };

package/es/{Switch.d.ts → Switch/index.d.ts}

@@ -3,6 +3,15 @@ export interface SwitchProps {
     defaultChecked?: boolean;
     checked?: boolean;
     onChange?: (checked: boolean) => void;
+    /**
+     * 开关大小
+     * 默认 'middle'
+     */
+    size?: 'small' | 'middle' | 'large';
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
 }
 declare const Switch: Component<SwitchProps>;
 export default Switch;

package/es/Switch/index.js

@@ -0,0 +1,41 @@
+import { createComponent, effect, className, template } from 'solid-js/web';
+import cs from 'classnames';
+import createControllableValue from '../hooks/createControllableValue.js';
+import Element from '../Element/index.js';
+import useComponentSize from '../hooks/useComponentSize.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<div>`);
+const Switch = props => {
+  const size = useComponentSize(() => props.size);
+  const [checked, setChecked] = createControllableValue(props, {
+    defaultValuePropName: 'defaultChecked',
+    valuePropName: 'checked'
+  });
+  return createComponent(Element, {
+    tag: "button",
+    get ["class"]() {
+      return cs('rounded-100px relative vertical-middle', {
+        large: 'w-56px h-28px',
+        middle: 'w-40px h-22px',
+        small: 'w-28px h-16px'
+      }[size()], checked() ? 'bg-[var(--ant-color-primary)]' : 'bg-[rgba(0,0,0,0.45)]', props.disabled && 'opacity-[--ant-opacity-loading] cursor-not-allowed');
+    },
+    get disabled() {
+      return props.disabled;
+    },
+    onClick: () => {
+      setChecked(c => !c);
+    },
+    get children() {
+      var _el$ = _tmpl$();
+      effect(() => className(_el$, cs('rounded-50% bg-white absolute top-1/2 -translate-y-1/2 transition-left', {
+        large: 'w-24px h-24px',
+        middle: 'w-18px h-18px',
+        small: 'w-12px h-12px'
+      }[size()], checked() ? 'right-2px' : 'left-2px')));
+      return _el$;
+    }
+  });
+};
+
+export { Switch as default };

package/es/{Table.d.ts → Table/index.d.ts}

@@ -1,11 +1,15 @@
-import { type JSXElement } from 'solid-js';
+import { type JSXElement, type Accessor } from 'solid-js';
 export interface TableColumn<R extends {}> {
     title: JSXElement;
-    render: (row: R) => JSXElement;
+    render: (row: R, index: Accessor<number>) => JSXElement;
 }
 export interface TableProps<R extends {}> {
     columns: Array<TableColumn<R>>;
     dataSource: R[];
+    /**
+     * 默认 'middle'
+     */
+    size?: 'small' | 'middle' | 'large';
 }
 declare const Table: <R extends {}>(props: TableProps<R>) => import("solid-js").JSX.Element;
 export default Table;