antd-solid 0.0.20 → 0.0.22

package/es/ColorPicker/ColorPickerSlider.js

@@ -1,4 +1,4 @@
-import { ssr, ssrHydrationKey, escape, createComponent, ssrAttribute } from 'solid-js/web';
+import { delegateEvents, insert, createComponent, memo, effect, className, template } from 'solid-js/web';
 import { useContext, createMemo, Show } from 'solid-js';
 import cs from 'classnames';
 import ColorPickerContext from './context.js';
@@ -6,77 +6,110 @@ import Slider from '../Slider/index.js';
 import Color from './color.js';
 import ColorPickUpSvg from '../assets/svg/ColorPickUp.js';
 
-var _tmpl$ = ["<div", " class=\"flex gap-[--ant-margin-sm] items-center\"><div class=\"flex flex-col gap-[--ant-margin-sm] w-full\"><!--$-->", "<!--/--><!--$-->", "<!--/--></div><div class=\"shrink-0 w-28px h-28px rounded-[--ant-border-radius-sm]\" style=\"", "\"><div class=\"w-full h-full rounded-inherit\" style=\"", "\"></div></div><!--$-->", "<!--/--></div>"],
-  _tmpl$2 = ["<span", " class=\"shrink-0 text-18px cursor-pointer\">", "</span>"],
-  _tmpl$3 = ["<div", " style=\"", "\" tabindex=\"0\"></div>"];
+var _tmpl$ = /*#__PURE__*/template(`<div class="flex gap-[--ant-margin-sm] items-center"><div class="flex flex-col gap-[--ant-margin-sm] w-full"></div><div class="shrink-0 w-28px h-28px rounded-[--ant-border-radius-sm]"><div class="w-full h-full rounded-inherit">`),
+  _tmpl$2 = /*#__PURE__*/template(`<span class="shrink-0 text-18px cursor-pointer">`),
+  _tmpl$3 = /*#__PURE__*/template(`<div tabindex=0>`);
 const ColorPickerSlider = () => {
   const context = useContext(ColorPickerContext);
   const color = createMemo(() => context?.color() ?? new Color());
-  return ssr(_tmpl$, ssrHydrationKey(), escape(createComponent(Slider, {
-    get value() {
-      return color().toHsv().h / 3.55;
-    },
-    onChange: v => {
-      const hsv = color().toHsv();
-      hsv.h = Math.round(v * 3.55);
-      context?.setColor(new Color(hsv));
-    },
-    onChangeComplete: () => {
-      context?.setColor(color(), true);
-    },
-    tooltip: false,
-    handle: () => getSliderHandle(color().toHueRgbString()),
-    style: {
-      '--ant-slider-rail-size': '8px',
-      '--ant-slider-handle-size': '10px',
-      '--ant-slider-rail-bg': 'linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)',
-      '--ant-slider-rail-hover-bg': 'var(--ant-slider-rail-bg)',
-      '--ant-slider-track-bg': 'transparent',
-      '--ant-slider-track-hover-bg': 'transparent'
-    },
-    railBgStyle: {
-      'box-shadow': 'inset 0 0 1px 0 var(--ant-color-text-quaternary)'
-    }
-  })), escape(createComponent(Show, {
-    get when() {
-      return !context?.disabledAlpha();
-    },
-    get children() {
-      return createComponent(Slider, {
-        get value() {
-          return color().a * 100;
-        },
-        onChange: v => {
-          context?.setColor(color().clone().setAlpha(v / 100));
-        },
-        onChangeComplete: () => {
-          context?.setColor(color(), true);
-        },
-        min: 0,
-        step: 1,
-        tooltip: false,
-        handle: () => getSliderHandle(color().toRgbString()),
-        get style() {
-          return {
-            '--ant-slider-rail-size': '8px',
-            '--ant-slider-handle-size': '10px',
-            '--ant-slider-rail-bg': `linear-gradient(90deg, ${color().clone().setAlpha(0).toRgbString()} 0%, ${color().toHexString()} 100%)`,
-            '--ant-slider-rail-hover-bg': 'var(--ant-slider-rail-bg)',
-            '--ant-slider-track-bg': 'transparent',
-            '--ant-slider-track-hover-bg': 'transparent',
-            'background-image': 'conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)',
-            'background-size': '8px 8px'
-          };
-        },
-        railBgStyle: {
-          'box-shadow': 'inset 0 0 1px 0 var(--ant-color-text-quaternary)'
-        }
-      });
-    }
-  })), "background-image:" + "conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)" + (";background-size:" + "50% 50%") + (";box-shadow:" + "inset 0 0 1px 0 var(--ant-color-text-quaternary)"), "background-color:" + escape(color().toRgbString(), true), window.EyeDropper && ssr(_tmpl$2, ssrHydrationKey(), escape(createComponent(ColorPickUpSvg, {}))));
+  return (() => {
+    var _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling,
+      _el$4 = _el$3.firstChild;
+    insert(_el$2, createComponent(Slider, {
+      get value() {
+        return color().toHsv().h / 3.55;
+      },
+      onChange: v => {
+        const hsv = color().toHsv();
+        hsv.h = Math.round(v * 3.55);
+        context?.setColor(new Color(hsv));
+      },
+      onChangeComplete: () => {
+        context?.setColor(color(), true);
+      },
+      tooltip: false,
+      handle: () => getSliderHandle(color().toHueRgbString()),
+      style: {
+        '--ant-slider-rail-size': '8px',
+        '--ant-slider-handle-size': '10px',
+        '--ant-slider-rail-bg': 'linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)',
+        '--ant-slider-rail-hover-bg': 'var(--ant-slider-rail-bg)',
+        '--ant-slider-track-bg': 'transparent',
+        '--ant-slider-track-hover-bg': 'transparent'
+      },
+      railBgStyle: {
+        'box-shadow': 'inset 0 0 1px 0 var(--ant-color-text-quaternary)'
+      }
+    }), null);
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return !context?.disabledAlpha();
+      },
+      get children() {
+        return createComponent(Slider, {
+          get value() {
+            return color().a * 100;
+          },
+          onChange: v => {
+            context?.setColor(color().clone().setAlpha(v / 100));
+          },
+          onChangeComplete: () => {
+            context?.setColor(color(), true);
+          },
+          min: 0,
+          step: 1,
+          tooltip: false,
+          handle: () => getSliderHandle(color().toRgbString()),
+          get style() {
+            return {
+              '--ant-slider-rail-size': '8px',
+              '--ant-slider-handle-size': '10px',
+              '--ant-slider-rail-bg': `linear-gradient(90deg, ${color().clone().setAlpha(0).toRgbString()} 0%, ${color().toHexString()} 100%)`,
+              '--ant-slider-rail-hover-bg': 'var(--ant-slider-rail-bg)',
+              '--ant-slider-track-bg': 'transparent',
+              '--ant-slider-track-hover-bg': 'transparent',
+              'background-image': 'conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)',
+              'background-size': '8px 8px'
+            };
+          },
+          railBgStyle: {
+            'box-shadow': 'inset 0 0 1px 0 var(--ant-color-text-quaternary)'
+          }
+        });
+      }
+    }), null);
+    _el$3.style.setProperty("background-image", "conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)");
+    _el$3.style.setProperty("background-size", "50% 50%");
+    _el$3.style.setProperty("box-shadow", "inset 0 0 1px 0 var(--ant-color-text-quaternary)");
+    insert(_el$, (() => {
+      var _c$ = memo(() => !!window.EyeDropper);
+      return () => _c$() && (() => {
+        var _el$5 = _tmpl$2();
+        _el$5.$$click = () => {
+          if (!window.EyeDropper) return;
+          const eyeDropper = new window.EyeDropper();
+          eyeDropper.open().then(result => {
+            context?.setColor(new Color(result.sRGBHex), true);
+          }).catch(console.error);
+        };
+        insert(_el$5, createComponent(ColorPickUpSvg, {}));
+        return _el$5;
+      })();
+    })(), null);
+    effect(() => color().toRgbString() != null ? _el$4.style.setProperty("background-color", color().toRgbString()) : _el$4.style.removeProperty("background-color"));
+    return _el$;
+  })();
 };
 const getSliderHandle = bgColor => {
-  return ssr(_tmpl$3, ssrHydrationKey() + ssrAttribute("class", escape(cs('box-border w-[--ant-slider-handle-size] h-[--ant-slider-handle-size] rounded-1/2 border-solid border-2px border-[--ant-color-bg-container-secondary] cursor-pointer', '[box-shadow:inset_0_0_1px_0_var(--ant-color-text-quaternary),0_0_0_1px_var(--ant-color-fill-secondary)]', 'focus:[box-shadow:inset_0_0_1px_0_var(--ant-color-text-quaternary),0_0_0_1px_var(--ant-color-primary-active)]'), true), false), "background:" + escape(bgColor, true));
+  return (() => {
+    var _el$6 = _tmpl$3();
+    bgColor != null ? _el$6.style.setProperty("background", bgColor) : _el$6.style.removeProperty("background");
+    effect(() => className(_el$6, cs('box-border w-[--ant-slider-handle-size] h-[--ant-slider-handle-size] rounded-1/2 border-solid border-2px border-[--ant-color-bg-container-secondary] cursor-pointer', '[box-shadow:inset_0_0_1px_0_var(--ant-color-text-quaternary),0_0_0_1px_var(--ant-color-fill-secondary)]', 'focus:[box-shadow:inset_0_0_1px_0_var(--ant-color-text-quaternary),0_0_0_1px_var(--ant-color-primary-active)]')));
+    return _el$6;
+  })();
 };
+delegateEvents(["click"]);
 
 export { ColorPickerSlider as default };

package/es/ColorPicker/index.js

@@ -1,4 +1,4 @@
-import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape } from 'solid-js/web';
+import { delegateEvents, createComponent, insert, effect, className, template } from 'solid-js/web';
 import cs from 'classnames';
 import { createSignal, untrack, createRenderEffect, createMemo, Show } from 'solid-js';
 import Color from './color.js';
@@ -10,11 +10,11 @@ import ColorPickerSlider from './ColorPickerSlider.js';
 import ColorPickerInput from './ColorPickerInput.js';
 import useComponentSize from '../hooks/useComponentSize.js';
 
-var _tmpl$ = ["<div", " class=\"flex justify-end mb-[--ant-margin-xs]\"><div class=\"w-24px h-24px rounded-[--ant-border-radius-sm] relative overflow-hidden border-1px border-solid border-[--ant-color-split] cursor-pointer hover:border-[--ant-color-border]\"><div class=\"absolute top-1/2 left-1/2 -translate-1/2 w-200% h-2px bg-[--ant-color-error] rotate-135deg\"></div></div></div>"],
-  _tmpl$2 = ["<div", " class=\"w-234px flex flex-col gap-[--ant-margin-sm]\"><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"],
-  _tmpl$3 = ["<div", " style=\"", "\"><div class=\"w-full h-full\" style=\"", "\"></div></div>"],
-  _tmpl$4 = ["<div", " style=\"", "\">", "</div>"],
-  _tmpl$5 = ["<div", "><div class=\"absolute top-1/2 left-1/2 -translate-1/2 w-200% h-2px bg-[--ant-color-error] rotate-135deg\"></div></div>"];
+var _tmpl$ = /*#__PURE__*/template(`<div class="flex justify-end mb-[--ant-margin-xs]"><div class="w-24px h-24px rounded-[--ant-border-radius-sm] relative overflow-hidden border-1px border-solid border-[--ant-color-split] cursor-pointer hover:border-[--ant-color-border]"><div class="absolute top-1/2 left-1/2 -translate-1/2 w-200% h-2px bg-[--ant-color-error] rotate-135deg">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class="w-234px flex flex-col gap-[--ant-margin-sm]">`),
+  _tmpl$3 = /*#__PURE__*/template(`<div><div class="w-full h-full">`),
+  _tmpl$4 = /*#__PURE__*/template(`<div>`),
+  _tmpl$5 = /*#__PURE__*/template(`<div><div class="absolute top-1/2 left-1/2 -translate-1/2 w-200% h-2px bg-[--ant-color-error] rotate-135deg">`);
 // TODO 超出范围
 const ColorPicker = props => {
   const isControlled = () => Object.keys(props).includes('value');
@@ -46,9 +46,21 @@ const ColorPicker = props => {
           return props.allowClear;
         },
         get children() {
-          return ssr(_tmpl$, ssrHydrationKey());
+          var _el$ = _tmpl$(),
+            _el$2 = _el$.firstChild;
+          _el$2.$$click = () => {
+            setColor(new Color());
+            close();
+          };
+          return _el$;
         }
-      }), ssr(_tmpl$2, ssrHydrationKey(), escape(createComponent(ColorPickerSelect, {})), escape(createComponent(ColorPickerSlider, {})), escape(createComponent(ColorPickerInput, {})))];
+      }), (() => {
+        var _el$3 = _tmpl$2();
+        insert(_el$3, createComponent(ColorPickerSelect, {}), null);
+        insert(_el$3, createComponent(ColorPickerSlider, {}), null);
+        insert(_el$3, createComponent(ColorPickerInput, {}), null);
+        return _el$3;
+      })()];
     }
   });
   return createComponent(Popover, {
@@ -69,25 +81,59 @@ const ColorPicker = props => {
           return cs('inline-block', props.disabled && 'cursor-not-allowed');
         },
         get children() {
-          return ssr(_tmpl$4, ssrHydrationKey() + ssrAttribute("class", escape(cs('p-[calc(var(--ant-padding-xxs)-var(--border-width))] border-width-[--border-width] border-[--ant-color-border] border-solid rounded-[--ant-border-radius] cursor-pointer hover:border-[--ant-color-primary-hover]', open() && '!border-[--ant-color-primary-active]', props.disabled ? 'pointer-events-none bg-[--ant-color-bg-container-disabled]' : 'bg-[--ant-color-bg-elevated]'), true), false), "--border-width:" + "1px" + (";--inner-size:" + escape({
-            small: '16px',
-            middle: '24px',
-            large: '32px'
-          }[size()], true)), escape(createComponent(Show, {
+          var _el$4 = _tmpl$4();
+          _el$4.style.setProperty("--border-width", "1px");
+          insert(_el$4, createComponent(Show, {
             get when() {
               return color().isValid;
             },
             get fallback() {
-              return ssr(_tmpl$5, ssrHydrationKey() + ssrAttribute("class", escape(cs('w-[--inner-size] h-[--inner-size] rounded-[--ant-border-radius-sm] relative overflow-hidden border-1px border-solid border-[--ant-color-split]'), true), false));
+              return (() => {
+                var _el$7 = _tmpl$5();
+                effect(() => className(_el$7, cs('w-[--inner-size] h-[--inner-size] rounded-[--ant-border-radius-sm] relative overflow-hidden border-1px border-solid border-[--ant-color-split]')));
+                return _el$7;
+              })();
             },
             get children() {
-              return ssr(_tmpl$3, ssrHydrationKey() + ssrAttribute("class", escape(cs('w-[--inner-size] h-[--inner-size] rounded-[--ant-border-radius-sm] overflow-hidden'), true), false), "box-shadow:" + "inset 0 0 1px 0 var(--ant-color-text-quaternary)" + (";background-image:" + "conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)") + (";background-size:" + "50% 50%"), "box-shadow:" + "inset 0 0 0 var(--ant-line-width) var(--ant-color-fill-secondary)" + (";background-color:" + escape(color().toRgbString(), true)));
+              var _el$5 = _tmpl$3(),
+                _el$6 = _el$5.firstChild;
+              _el$5.style.setProperty("box-shadow", "inset 0 0 1px 0 var(--ant-color-text-quaternary)");
+              _el$5.style.setProperty("background-image", "conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)");
+              _el$5.style.setProperty("background-size", "50% 50%");
+              _el$6.style.setProperty("box-shadow", "inset 0 0 0 var(--ant-line-width) var(--ant-color-fill-secondary)");
+              effect(_p$ => {
+                var _v$ = cs('w-[--inner-size] h-[--inner-size] rounded-[--ant-border-radius-sm] overflow-hidden'),
+                  _v$2 = color().toRgbString();
+                _v$ !== _p$.e && className(_el$5, _p$.e = _v$);
+                _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$6.style.setProperty("background-color", _v$2) : _el$6.style.removeProperty("background-color"));
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined
+              });
+              return _el$5;
             }
-          })));
+          }));
+          effect(_p$ => {
+            var _v$3 = cs('p-[calc(var(--ant-padding-xxs)-var(--border-width))] border-width-[--border-width] border-[--ant-color-border] border-solid rounded-[--ant-border-radius] cursor-pointer hover:border-[--ant-color-primary-hover]', open() && '!border-[--ant-color-primary-active]', props.disabled ? 'pointer-events-none bg-[--ant-color-bg-container-disabled]' : 'bg-[--ant-color-bg-elevated]'),
+              _v$4 = {
+                small: '16px',
+                middle: '24px',
+                large: '32px'
+              }[size()];
+            _v$3 !== _p$.e && className(_el$4, _p$.e = _v$3);
+            _v$4 !== _p$.t && ((_p$.t = _v$4) != null ? _el$4.style.setProperty("--inner-size", _v$4) : _el$4.style.removeProperty("--inner-size"));
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$4;
         }
       });
     }
   });
 };
+delegateEvents(["click"]);
 
 export { ColorPicker as default };

package/es/ContextMenu/index.js

@@ -11,7 +11,7 @@ const ContextMenuCommand = Command.createCommand(props => {
   const [, menuProps] = splitProps(props, ['x', 'y']);
   const [reverse, setReverse] = createSignal(false);
   createEffect(() => {
-    setReverse(props.y + (0) + offsetY > window.innerHeight);
+    setReverse(props.y + (ref?.clientHeight ?? 0) + offsetY > window.innerHeight);
   });
   const {
     dispose
@@ -35,6 +35,10 @@ const ContextMenuCommand = Command.createCommand(props => {
     abortController.abort();
   });
   return createComponent(Element, {
+    ref(r$) {
+      var _ref$ = ref;
+      typeof _ref$ === "function" ? _ref$(r$) : ref = r$;
+    },
     "class": "z-1000 fixed left-0 top-0 [font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)] bg-[--ant-color-bg-container-tertiary] rounded-[var(--ant-border-radius)]",
     get style() {
       return {

package/es/Cursor/index.js

@@ -1,7 +1,7 @@
-import { createComponent, Portal, ssr, ssrHydrationKey, escape } from 'solid-js/web';
+import { createComponent, Portal, insert, effect, template } from 'solid-js/web';
 import { children, createSignal, createEffect, onCleanup, Show } from 'solid-js';
 
-var _tmpl$ = ["<span", " class=\"absolute pointer-events-none z-2000\" style=\"", "\">", "</span>"];
+var _tmpl$ = /*#__PURE__*/template(`<span class="absolute pointer-events-none z-2000">`);
 const Cursor = props => {
   const resolvedChildren = children(() => props.children);
   const [hover, setHover] = createSignal(false);
@@ -49,7 +49,19 @@ const Cursor = props => {
     get children() {
       return createComponent(Portal, {
         get children() {
-          return ssr(_tmpl$, ssrHydrationKey(), "top:" + `${escape(cursorPosition().y, true)}px` + (";left:" + `${escape(cursorPosition().x, true)}px`), escape(props.cursor));
+          var _el$ = _tmpl$();
+          insert(_el$, () => props.cursor);
+          effect(_p$ => {
+            var _v$ = `${cursorPosition().y}px`,
+              _v$2 = `${cursorPosition().x}px`;
+            _v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$.style.setProperty("top", _v$) : _el$.style.removeProperty("top"));
+            _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("left", _v$2) : _el$.style.removeProperty("left"));
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$;
         }
       });
     }

package/es/Divider/index.js

@@ -1,11 +1,11 @@
-import { createComponent, ssr, ssrHydrationKey, escape } from 'solid-js/web';
+import { createComponent, use, insert, effect, template } from 'solid-js/web';
 import { mergeProps, createMemo, children, Show } from 'solid-js';
 import cs from 'classnames';
 import 'lodash-es';
 import useSize from '../hooks/useSize.js';
 import Element from '../Element/index.js';
 
-var _tmpl$ = ["<span", " class=\"inline-block px-[var(--ant-divider-text-padding-inline)]\" style=\"", "\">", "</span>"];
+var _tmpl$ = /*#__PURE__*/template(`<span class="inline-block px-[var(--ant-divider-text-padding-inline)]">`);
 const Divider = _props => {
   const props = mergeProps({
     orientation: 'center',
@@ -40,6 +40,10 @@ const Divider = _props => {
     },
     get children() {
       return createComponent(Element, {
+        ref(r$) {
+          var _ref$ = container;
+          typeof _ref$ === "function" ? _ref$(r$) : container = r$;
+        },
         get ["class"]() {
           return cs(props.class, 'my-[var(--ant-margin)] flex items-center relative', ['before:content-empty before:block before:absolute before:left-0 before:w-[var(--ant-divider-children-start)] before:border-width-[1px_0_0] before:border-[var(--ant-color-split)]', props.dashed ? 'before:border-dashed' : 'before:border-solid'], ['after:content-empty after:block after:absolute after:left-[var(--ant-divider-children-end)] after:right-0 after:border-width-[1px_0_0] after:border-[var(--ant-color-split)]', props.dashed ? 'after:border-dashed' : 'after:border-solid']);
         },
@@ -52,7 +56,12 @@ const Divider = _props => {
           };
         },
         get children() {
-          return ssr(_tmpl$, ssrHydrationKey(), "transform:" + `translateX(${escape(childrenStart(), true)}px)`, escape(resolvedChildren()));
+          var _el$ = _tmpl$();
+          var _ref$2 = childrenRef;
+          typeof _ref$2 === "function" ? use(_ref$2, _el$) : childrenRef = _el$;
+          insert(_el$, resolvedChildren);
+          effect(() => `translateX(${childrenStart()}px)` != null ? _el$.style.setProperty("transform", `translateX(${childrenStart()}px)`) : _el$.style.removeProperty("transform"));
+          return _el$;
         }
       });
     }

package/es/Drawer/index.js

@@ -1,4 +1,4 @@
-import { createComponent, Dynamic, ssr, ssrHydrationKey, ssrAttribute, escape, Portal } from 'solid-js/web';
+import { delegateEvents, createComponent, Dynamic, effect, className, insert, Portal, template } from 'solid-js/web';
 import { mergeProps, createEffect, onCleanup, createMemo, Show } from 'solid-js';
 import cs from 'classnames';
 import { Transition } from 'solid-transition-group';
@@ -10,11 +10,11 @@ import DelayShow from '../DelayShow/index.js';
 import createControllableValue from '../hooks/createControllableValue.js';
 import { unwrapStringOrJSXElement } from '../utils/solid.js';
 
-var _tmpl$ = ["<div", " aria-label=\"mask\"></div>"],
-  _tmpl$2 = ["<span", " class=\"i-ant-design:close-outlined\"></span>"],
-  _tmpl$3 = ["<div", " class=\"w-full text-[var(--ant-color-text)] text-size-[var(--ant-font-size-lg)] [font-weight:var(--ant-font-weight-strong)] leading-[var(--ant-line-height-lg)]\">", "</div>"],
-  _tmpl$4 = ["<div", " class=\"shrink-0\">", "</div>"],
-  _tmpl$5 = ["<div", " style=\"", "\"><div class=\"px-[var(--ant-padding-lg)] py-[var(--ant-padding)] flex items-center [border-bottom:var(--ant-line-width)_solid_var(--ant-color-split)] empty:hidden\"><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><div class=\"p-[--ant-drawer-body-padding] overflow-auto\">", "</div></div>"];
+var _tmpl$ = /*#__PURE__*/template(`<div aria-label=mask>`),
+  _tmpl$2 = /*#__PURE__*/template(`<span class=i-ant-design:close-outlined>`),
+  _tmpl$3 = /*#__PURE__*/template(`<div class="w-full text-[var(--ant-color-text)] text-size-[var(--ant-font-size-lg)] [font-weight:var(--ant-font-weight-strong)] leading-[var(--ant-line-height-lg)]">`),
+  _tmpl$4 = /*#__PURE__*/template(`<div class=shrink-0>`),
+  _tmpl$5 = /*#__PURE__*/template(`<div><div class="px-[var(--ant-padding-lg)] py-[var(--ant-padding)] flex items-center [border-bottom:var(--ant-line-width)_solid_var(--ant-color-split)] empty:hidden"></div><div class="p-[--ant-drawer-body-padding] overflow-auto">`);
 const Drawer = _props => {
   const props = mergeProps({
     size: '378px',
@@ -86,6 +86,10 @@ const Drawer = _props => {
         },
         get children() {
           return createComponent(Element, {
+            ref(r$) {
+              var _ref$ = drawerRef;
+              typeof _ref$ === "function" ? _ref$(r$) : drawerRef = r$;
+            },
             get ["class"]() {
               return cs(props.class, '[font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]', 'inset-0 z-1000', isBody() ? 'fixed' : 'absolute');
             },
@@ -101,45 +105,81 @@ const Drawer = _props => {
                   return props.mask;
                 },
                 get children() {
-                  return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs('ant-drawer-mask', 'absolute inset-0 bg-[--ant-color-bg-mask]'), true), false));
-                }
-              }), ssr(_tmpl$5, ssrHydrationKey() + ssrAttribute("class", escape(cs('ant-drawer-content', {
-                left: 'ant-drawer-content-left',
-                right: 'ant-drawer-content-right',
-                top: 'ant-drawer-content-top',
-                bottom: 'ant-drawer-content-bottom'
-              }[props.placement], 'absolute bg-[--ant-color-bg-container-secondary] grid [grid-template-rows:auto_1fr]'), true), false), "width:" + (direction() === 'horizontal' ? escape(props.size, true) : escape(undefined, true)) + (";height:" + (direction() === 'vertical' ? escape(props.size, true) : escape(undefined, true))), escape(createComponent(Show, {
-                get when() {
-                  return props.closeIcon;
-                },
-                get children() {
-                  return createComponent(Button, {
-                    type: "text",
-                    size: "small",
-                    "class": "shrink-0 mr-[var(--ant-margin-sm)] text-size-[var(--ant-font-size-lg)] h-[var(--ant-font-size-lg)] leading-[var(--ant-font-size-lg)] hover:!bg-transparent !text-[var(--ant-color-icon)] hover:!text-[var(--ant-color-icon-hover)] !p-0",
-                    onClick: () => {
+                  var _el$ = _tmpl$();
+                  _el$.$$click = () => {
+                    if (props.maskClosable) {
                       props.onClose?.();
-                    },
-                    get children() {
-                      return ssr(_tmpl$2, ssrHydrationKey());
                     }
-                  });
-                }
-              })), escape(createComponent(Show, {
-                get when() {
-                  return title();
-                },
-                get children() {
-                  return ssr(_tmpl$3, ssrHydrationKey(), escape(title()));
-                }
-              })), escape(createComponent(Show, {
-                get when() {
-                  return extra();
-                },
-                get children() {
-                  return ssr(_tmpl$4, ssrHydrationKey(), escape(extra()));
+                  };
+                  effect(() => className(_el$, cs('ant-drawer-mask', 'absolute inset-0 bg-[--ant-color-bg-mask]')));
+                  return _el$;
                 }
-              })), escape(props.children))];
+              }), (() => {
+                var _el$2 = _tmpl$5(),
+                  _el$3 = _el$2.firstChild,
+                  _el$7 = _el$3.nextSibling;
+                _el$2.$$click = e => {
+                  e.stopPropagation();
+                };
+                insert(_el$3, createComponent(Show, {
+                  get when() {
+                    return props.closeIcon;
+                  },
+                  get children() {
+                    return createComponent(Button, {
+                      type: "text",
+                      size: "small",
+                      "class": "shrink-0 mr-[var(--ant-margin-sm)] text-size-[var(--ant-font-size-lg)] h-[var(--ant-font-size-lg)] leading-[var(--ant-font-size-lg)] hover:!bg-transparent !text-[var(--ant-color-icon)] hover:!text-[var(--ant-color-icon-hover)] !p-0",
+                      onClick: () => {
+                        props.onClose?.();
+                      },
+                      get children() {
+                        return _tmpl$2();
+                      }
+                    });
+                  }
+                }), null);
+                insert(_el$3, createComponent(Show, {
+                  get when() {
+                    return title();
+                  },
+                  get children() {
+                    var _el$5 = _tmpl$3();
+                    insert(_el$5, title);
+                    return _el$5;
+                  }
+                }), null);
+                insert(_el$3, createComponent(Show, {
+                  get when() {
+                    return extra();
+                  },
+                  get children() {
+                    var _el$6 = _tmpl$4();
+                    insert(_el$6, extra);
+                    return _el$6;
+                  }
+                }), null);
+                insert(_el$7, () => props.children);
+                effect(_p$ => {
+                  var _v$ = cs('ant-drawer-content', {
+                      left: 'ant-drawer-content-left',
+                      right: 'ant-drawer-content-right',
+                      top: 'ant-drawer-content-top',
+                      bottom: 'ant-drawer-content-bottom'
+                    }[props.placement], 'absolute bg-[--ant-color-bg-container-secondary] grid [grid-template-rows:auto_1fr]'),
+                    _v$2 = direction() === 'horizontal' ? props.size : undefined,
+                    _v$3 = direction() === 'vertical' ? props.size : undefined;
+                  _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+                  _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$2.style.setProperty("width", _v$2) : _el$2.style.removeProperty("width"));
+                  _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$2.style.setProperty("height", _v$3) : _el$2.style.removeProperty("height"));
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined
+                });
+                return _el$2;
+              })()];
             }
           });
         }
@@ -168,5 +208,6 @@ const Drawer = _props => {
     }
   });
 };
+delegateEvents(["click"]);
 
 export { Drawer as default };

package/es/Element/index.js

@@ -1,5 +1,5 @@
 import { createComponent, Dynamic, mergeProps as mergeProps$1 } from 'solid-js/web';
-import { mergeProps, useContext, createSignal, onMount } from 'solid-js';
+import { mergeProps, useContext, onMount } from 'solid-js';
 import cs from 'classnames';
 import ConfigProviderContext from '../ConfigProvider/context.js';
 
@@ -12,10 +12,8 @@ function Element(_props) {
     cssVariablesClass,
     cssVariables
   } = useContext(ConfigProviderContext);
-  const [_cssVariablesClass, setCssVariablesClass] = createSignal('');
   onMount(() => {
     let styleTag = document.head.querySelector(`[data-token-hash=${cssVariablesClass}]`);
-    setCssVariablesClass(cssVariablesClass);
     if (styleTag) return;
     styleTag = document.createElement('style');
     styleTag.setAttribute('type', 'text/css');
@@ -36,9 +34,7 @@ function Element(_props) {
     }
   }, props, {
     get ["class"]() {
-      return cs(_cssVariablesClass(),
-      // ssr 水合时，如果直接使用 cssVariablesClass，不会自动更新，导致在浏览器端使用的还是服务器端的 cssVariablesClass 值
-      props.class);
+      return cs(cssVariablesClass, props.class);
     }
   }));
 }

package/es/Empty/PRESENTED_IMAGE_SIMPLE.js

@@ -1,10 +1,10 @@
-import { createComponent, ssr, ssrHydrationKey, escape } from 'solid-js/web';
+import { createComponent, insert, template } from 'solid-js/web';
 import cs from 'classnames';
 import EmptySvg from './assets/SimpleEmptySvg.js';
 import Element from '../Element/index.js';
 
-var _tmpl$ = ["<div", " class=\"mb-[var(--ant-margin-xs)] flex justify-center\">", "</div>"],
-  _tmpl$2 = ["<div", " class=\"text-[var(--ant-color-text-description)] text-center\">", "</div>"];
+var _tmpl$ = /*#__PURE__*/template(`<div class="mb-[var(--ant-margin-xs)] flex justify-center">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class="text-[var(--ant-color-text-description)] text-center">`);
 const PRESENTED_IMAGE_SIMPLE = props => {
   return createComponent(Element, {
     get ["class"]() {
@@ -14,7 +14,15 @@ const PRESENTED_IMAGE_SIMPLE = props => {
       return props.style;
     },
     get children() {
-      return [ssr(_tmpl$, ssrHydrationKey(), escape(createComponent(EmptySvg, {}))), ssr(_tmpl$2, ssrHydrationKey(), escape(props.description) ?? '暂无数据')];
+      return [(() => {
+        var _el$ = _tmpl$();
+        insert(_el$, createComponent(EmptySvg, {}));
+        return _el$;
+      })(), (() => {
+        var _el$2 = _tmpl$2();
+        insert(_el$2, () => props.description ?? '暂无数据');
+        return _el$2;
+      })()];
     }
   });
 };