antd-solid 0.0.20 → 0.0.22

package/es/Select/index.js

@@ -1,4 +1,4 @@
-import { createComponent, mergeProps, ssr, ssrHydrationKey, escape, ssrAttribute } from 'solid-js/web';
+import { delegateEvents, createComponent, mergeProps, insert, effect, className, setAttribute, template } from 'solid-js/web';
 import { splitProps, createMemo, createSelector, Show, For } from 'solid-js';
 import cs from 'classnames';
 import { isEmpty } from 'lodash-es';
@@ -8,8 +8,8 @@ import SelectInput from '../SelectInput/index.js';
 import Empty from '../Empty/index.js';
 import { unwrapStringOrJSXElement } from '../utils/solid.js';
 
-var _tmpl$ = ["<div", " class=\"p-2px\">", "</div>"],
-  _tmpl$2 = ["<div", ">", "</div>"];
+var _tmpl$ = /*#__PURE__*/template(`<div class=p-2px>`),
+  _tmpl$2 = /*#__PURE__*/template(`<div>`);
 function Select(props) {
   const [selectInputProps] = splitProps(props, ['multiple', 'allowClear', 'class', 'style', 'disabled', 'placeholder', 'status', 'size', 'variant', 'suffixIcon', 'placement', 'getPopupContainer']);
   const [value, setValue] = createControllableValue(props);
@@ -32,15 +32,44 @@ function Select(props) {
         return createComponent(Empty.PRESENTED_IMAGE_SIMPLE, {});
       },
       get children() {
-        return ssr(_tmpl$, ssrHydrationKey(), escape(createComponent(For, {
+        var _el$ = _tmpl$();
+        insert(_el$, createComponent(For, {
           get each() {
             return props.options;
           },
-          children: item => ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("class", escape(cs('ellipsis box-content px-12px py-5px min-h-22px leading-22px hover:bg-[var(--ant-select-option-active-bg)] cursor-pointer rounded-[var(--ant-border-radius-sm)]', selectedValue(item.value) ? '!bg-[var(--ant-select-option-selected-bg)]' : '', item.class), true), false) + ssrAttribute("title", typeof item.label === 'string' || typeof item.label === 'number' ? escape(item.label.toString(), true) : escape(undefined, true), false), escape(unwrapStringOrJSXElement(item.label)))
-        })));
+          children: item => (() => {
+            var _el$2 = _tmpl$2();
+            _el$2.$$click = () => {
+              if (!props.multiple) {
+                setValue(item.value);
+                close();
+                return;
+              }
+              if (valueArr().includes(item.value)) {
+                setValue(valueArr().filter(v => v !== item.value));
+              } else {
+                setValue([...valueArr(), item.value]);
+              }
+            };
+            insert(_el$2, () => unwrapStringOrJSXElement(item.label));
+            effect(_p$ => {
+              var _v$ = cs('ellipsis box-content px-12px py-5px min-h-22px leading-22px hover:bg-[var(--ant-select-option-active-bg)] cursor-pointer rounded-[var(--ant-border-radius-sm)]', selectedValue(item.value) ? '!bg-[var(--ant-select-option-selected-bg)]' : '', item.class),
+                _v$2 = typeof item.label === 'string' || typeof item.label === 'number' ? item.label.toString() : undefined;
+              _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+              _v$2 !== _p$.t && setAttribute(_el$2, "title", _p$.t = _v$2);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$2;
+          })()
+        }));
+        return _el$;
       }
     })
   }));
 }
+delegateEvents(["click"]);
 
 export { Select as default };

package/es/SelectInput/index.js

@@ -1,4 +1,4 @@
-import { createComponent, ssr, ssrHydrationKey, ssrStyle, escape, ssrAttribute, Dynamic } from 'solid-js/web';
+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';
@@ -9,15 +9,15 @@ import Element from '../Element/index.js';
 import useComponentSize from '../hooks/useComponentSize.js';
 import CompactContext from '../Compact/context.js';
 
-var _tmpl$ = ["<div", " class=\"w-full\">", "</div>"],
-  _tmpl$2 = ["<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)]\"></span>"],
-  _tmpl$3 = ["<div", " style=\"", "\" tabindex=\"0\"><!--$-->", "<!--/--><div", ">", "</div></div>"],
-  _tmpl$4 = ["<div", " class=\"w-[--ant-select-popup-match-width] max-h-400px overflow-auto [font-size:var(--ant-select-popup-font-size)]\" style=\"", "\">", "</div>"],
-  _tmpl$5 = ["<span", " class=\"inline-block w-0\"> </span>"],
-  _tmpl$6 = ["<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)]\"><!--$-->", "<!--/--><!--$-->", "<!--/--></span>"],
-  _tmpl$7 = ["<div", " class=\"w-full h-[calc(var(--ant-select-input-height)-2px)] leading-[calc(var(--ant-select-input-height)-2px)] ellipsis\"", ">", "</div>"],
-  _tmpl$8 = ["<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\"></span></span>"],
-  _tmpl$9 = ["<span", " class=\"i-ant-design:down-outlined text-[var(--ant-color-text-quaternary)] text-12px\"></span>"];
+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;
@@ -44,7 +44,7 @@ function SelectInput(_props) {
   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 = createMemo(() => ({
+  const style$1 = createMemo(() => ({
     '--ant-select-input-font-size': {
       small: 'var(--ant-font-size)',
       middle: 'var(--ant-font-size)',
@@ -67,11 +67,15 @@ function SelectInput(_props) {
     ...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();
+      return style$1();
     },
     get children() {
       return createComponent(Tooltip, {
@@ -88,42 +92,47 @@ function SelectInput(_props) {
         contentStyle: {
           padding: 0
         },
-        content: () => ssr(_tmpl$4, ssrHydrationKey(), ssrStyle({
-          ...pick(style(), ['--ant-select-popup-font-size', '--ant-select-popup-match-width'])
-        }), escape(props.content(() => setOpen(false)))),
+        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() {
-          return ssr(_tmpl$3, ssrHydrationKey() + ssrAttribute("class", escape(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']), true), false), "--ant-select-input-height:" + escape({
-            small: '24px',
-            middle: '32px',
-            large: '40px'
-          }[size()], true) + (";--ant-select-multiple-item-height:" + escape({
-            small: '16px',
-            middle: '24px',
-            large: '32px'
-          }[size()], true)), escape(createComponent(Show, {
+          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 ssr(_tmpl$6, ssrHydrationKey(), escape(props.placeholder), escape(createComponent(Show, {
-                get when() {
-                  return !props.placeholder;
-                },
-                get children() {
-                  return ssr(_tmpl$5, ssrHydrationKey());
-                }
-              })));
+              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, {
@@ -134,24 +143,39 @@ function SelectInput(_props) {
                   return createComponent(Dynamic, {
                     component: () => {
                       const optionLabel = createMemo(() => optionLabelRender(valueArr()[0]));
-                      return ssr(_tmpl$7, ssrHydrationKey(), ssrAttribute("title", typeof optionLabel() === 'string' ? escape(optionLabel(), true) : escape(undefined, true), false), escape(optionLabel()));
+                      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() {
-                  return ssr(_tmpl$, ssrHydrationKey(), escape(createComponent(For, {
+                  var _el$2 = _tmpl$();
+                  insert(_el$2, createComponent(For, {
                     get each() {
                       return valueArr();
                     },
                     children: item => {
                       const optionLabel = createMemo(() => optionLabelRender(valueArr()[0]));
-                      return ssr(_tmpl$8, ssrHydrationKey(), ssrAttribute("title", typeof optionLabel() === 'string' ? escape(optionLabel(), true) : escape(undefined, true), false), escape(optionLabel()));
+                      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;
                 }
               });
             }
-          })), ssrAttribute("class", escape(cs('shrink-0 flex justify-end items-center p-[--ant-select-input-addon-after-padding] empty:hidden'), true), false), escape(createComponent(Show, {
+          }), _el$3);
+          insert(_el$3, createComponent(Show, {
             get when() {
               return showClearBtn();
             },
@@ -164,18 +188,58 @@ function SelectInput(_props) {
                   return props.suffixIcon;
                 },
                 get children() {
-                  return ssr(_tmpl$9, ssrHydrationKey());
+                  return _tmpl$9();
                 }
               });
             },
             get children() {
-              return ssr(_tmpl$2, ssrHydrationKey());
+              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.js

@@ -1,4 +1,4 @@
-import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape, ssrStyle } from 'solid-js/web';
+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';
@@ -9,11 +9,13 @@ 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$ = ["<div", "></div>"],
-  _tmpl$2 = ["<div", " class=\"absolute top-1/2 -translate-1/2 w-[--ant-slider-handle-size] h-[--ant-slider-handle-size]\" style=\"", "\">", "</div>"],
-  _tmpl$3 = ["<div", "><div", " style=\"", "\"></div><div", " style=\"", "\"></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\">", "</div></div>"];
+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,
@@ -58,6 +60,10 @@ const Slider = _props => {
     });
   });
   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');
     },
@@ -76,15 +82,48 @@ const Slider = _props => {
       };
     },
     get children() {
-      return ssr(_tmpl$3, ssrHydrationKey() + ssrAttribute("class", escape(cs(props.disabled && 'pointer-events-none'), true), false), ssrAttribute("class", escape(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)]'), true), false), ssrStyle(props.railBgStyle), ssrAttribute("class", escape(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)]']), true), false), "width:" + `${escape(progress(), true) * 100}%`, escape(createComponent(Tooltip, {
+      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 props.tooltip && (isHover() || isFocus() || isDragging());
+          return memo(() => !!props.tooltip)() && (isHover() || isFocus() || isDragging());
         },
         get content() {
-          return typeof props.tooltip === 'object' && props.tooltip.formatter ? props.tooltip.formatter(value()) : value();
+          return memo(() => !!(typeof props.tooltip === 'object' && props.tooltip.formatter))() ? props.tooltip.formatter(value()) : value();
         },
         get children() {
-          return ssr(_tmpl$2, ssrHydrationKey(), "left:" + `${escape(progress(), true) * 100}%`, escape(createComponent(Show, {
+          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());
             },
@@ -92,13 +131,47 @@ const Slider = _props => {
               return resolvedHandle();
             },
             get children() {
-              return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(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)]']), true), false) + ssrAttribute("tabindex", props.disabled ? escape(undefined, true) : '0', false));
+              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.js

@@ -1,4 +1,4 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+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';
@@ -7,7 +7,7 @@ function Space(props) {
   return createComponent(Element, {
     get children() {
       return createComponent(For, mergeProps(props, {
-        children: (item, index) => [index() !== 0 && unwrapStringOrJSXElement(props.split), props.children(item, index)]
+        children: (item, index) => [memo(() => memo(() => index() !== 0)() && unwrapStringOrJSXElement(props.split)), memo(() => props.children(item, index))]
       }));
     }
   });

package/es/Spin/index.js

@@ -1,12 +1,12 @@
-import { ssr, ssrHydrationKey, escape, createComponent } from 'solid-js/web';
+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$ = ["<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]\" style=\"", "\"></span><!--$-->", "<!--/--></div>"],
-  _tmpl$2 = ["<div", ">", "</div>"],
-  _tmpl$3 = ["<div", " class=\"absolute inset-0 flex items-center justify-center bg-[var(--ant-color-bg-container)] opacity-40\">", "</div>"];
+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,
@@ -14,14 +14,20 @@ const Spin = _props => {
   }, _props);
   const resolvedChildren = children(() => props.children);
   const resolvedTip = children(() => unwrapStringOrJSXElement(props.tip));
-  const spin = ssr(_tmpl$, ssrHydrationKey(), "font-size:" + `${escape(props.size, true)}px`, escape(createComponent(Show, {
-    get when() {
-      return !isEmptyJSXElement(resolvedTip());
-    },
-    get children() {
-      return resolvedTip();
-    }
-  })));
+  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());
@@ -53,12 +59,18 @@ const Spin = _props => {
           return props.style;
         },
         get children() {
-          return [ssr(_tmpl$2, ssrHydrationKey(), escape(resolvedChildren())), createComponent(Show, {
+          return [(() => {
+            var _el$3 = _tmpl$2();
+            insert(_el$3, resolvedChildren);
+            return _el$3;
+          })(), createComponent(Show, {
             get when() {
               return props.spinning;
             },
             get children() {
-              return ssr(_tmpl$3, ssrHydrationKey(), escape(spin));
+              var _el$4 = _tmpl$3();
+              insert(_el$4, spin);
+              return _el$4;
             }
           })];
         }

package/es/Switch/index.js

@@ -1,10 +1,10 @@
-import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape } from 'solid-js/web';
+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$ = ["<div", "></div>"];
+var _tmpl$ = /*#__PURE__*/template(`<div>`);
 const Switch = props => {
   const size = useComponentSize(() => props.size);
   const [checked, setChecked] = createControllableValue(props, {
@@ -27,11 +27,13 @@ const Switch = props => {
       setChecked(c => !c);
     },
     get children() {
-      return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs('rounded-50% bg-white absolute top-1/2 -translate-y-1/2 transition-left', {
+      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'), true), false));
+      }[size()], checked() ? 'right-2px' : 'left-2px')));
+      return _el$;
     }
   });
 };