antd-solid 0.0.21 → 0.0.23

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,8 +86,17 @@ 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');
+              return cs(props.class, '[font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]', 'inset-0 z-1000', !props.mask && {
+                left: '!right-auto',
+                right: '!left-auto',
+                top: '!bottom-auto',
+                bottom: '!top-auto'
+              }[props.placement], isBody() ? 'fixed' : 'absolute');
             },
             get style() {
               return {
@@ -101,45 +110,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 +213,6 @@ const Drawer = _props => {
     }
   });
 };
+delegateEvents(["click"]);
 
 export { Drawer as default };

package/es/Dropdown/index.js

@@ -34,8 +34,10 @@ const Dropdown = _props => {
         props.menu?.onClick?.(info);
       }
     })),
-    contentStyle: {
-      padding: 0
+    contentHTMLAttributes: {
+      style: {
+        padding: 0
+      }
     }
   }, popoverProps, {
     get children() {

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;
+      })()];
     }
   });
 };

package/es/Empty/assets/EmptySvg.js

@@ -1,6 +1,6 @@
-import { ssr, ssrHydrationKey } from 'solid-js/web';
+import { template } from 'solid-js/web';
 
-var _tmpl$ = ["<svg", " width=\"184\" height=\"100\" viewBox=\"0 0 184 152\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><g transform=\"translate(24 31.67)\"><ellipse fill-opacity=\".8\" fill=\"#F5F5F7\" cx=\"67.797\" cy=\"106.89\" rx=\"67.797\" ry=\"12.668\"></ellipse><path d=\"M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z\" fill=\"#AEB8C2\"></path><path d=\"M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z\" fill=\"url(#linearGradient-1)\" transform=\"translate(13.56)\"></path><path d=\"M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z\" fill=\"#F5F5F7\"></path><path d=\"M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z\" fill=\"#DCE0E6\"></path></g><path d=\"M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z\" fill=\"#DCE0E6\"></path><g transform=\"translate(149.65 15.383)\" fill=\"#FFF\"><ellipse cx=\"20.654\" cy=\"3.167\" rx=\"2.849\" ry=\"2.815\"></ellipse><path d=\"M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z\"></path></g></g></svg>"];
-const EmptySvg = () => ssr(_tmpl$, ssrHydrationKey());
+var _tmpl$ = /*#__PURE__*/template(`<svg width=184 height=100 viewBox="0 0 184 152"xmlns=http://www.w3.org/2000/svg><g fill=none fill-rule=evenodd><g transform="translate(24 31.67)"><ellipse fill-opacity=.8 fill=#F5F5F7 cx=67.797 cy=106.89 rx=67.797 ry=12.668></ellipse><path d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"fill=#AEB8C2></path><path d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z"fill=url(#linearGradient-1) transform=translate(13.56)></path><path d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"fill=#F5F5F7></path><path d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"fill=#DCE0E6></path></g><path d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"fill=#DCE0E6></path><g transform="translate(149.65 15.383)"fill=#FFF><ellipse cx=20.654 cy=3.167 rx=2.849 ry=2.815></ellipse><path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z">`);
+const EmptySvg = () => _tmpl$();
 
 export { EmptySvg as default };

package/es/Empty/assets/SimpleEmptySvg.js

@@ -1,6 +1,6 @@
-import { ssr, ssrHydrationKey } from 'solid-js/web';
+import { template } from 'solid-js/web';
 
-var _tmpl$ = ["<svg", " width=\"64\" height=\"41\" viewBox=\"0 0 64 41\" xmlns=\"http://www.w3.org/2000/svg\"><g transform=\"translate(0 1)\" fill=\"none\" fill-rule=\"evenodd\"><ellipse fill=\"#f5f5f5\" cx=\"32\" cy=\"33\" rx=\"32\" ry=\"7\"></ellipse><g fill-rule=\"nonzero\" stroke=\"#d9d9d9\"><path d=\"M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z\"></path><path d=\"M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z\" fill=\"#fafafa\"></path></g></g></svg>"];
-const EmptySvg = () => ssr(_tmpl$, ssrHydrationKey());
+var _tmpl$ = /*#__PURE__*/template(`<svg width=64 height=41 viewBox="0 0 64 41"xmlns=http://www.w3.org/2000/svg><g transform="translate(0 1)"fill=none fill-rule=evenodd><ellipse fill=#f5f5f5 cx=32 cy=33 rx=32 ry=7></ellipse><g fill-rule=nonzero stroke=#d9d9d9><path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path><path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"fill=#fafafa>`);
+const EmptySvg = () => _tmpl$();
 
 export { EmptySvg as default };

package/es/Empty/index.js

@@ -1,10 +1,10 @@
-import { createComponent, ssr, ssrHydrationKey, escape } from 'solid-js/web';
+import { createComponent, insert, template } from 'solid-js/web';
 import PRESENTED_IMAGE_SIMPLE from './PRESENTED_IMAGE_SIMPLE.js';
 import EmptySvg from './assets/EmptySvg.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)] 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)] text-center">`);
 const Empty = props => {
   return createComponent(Element, {
     get ["class"]() {
@@ -14,7 +14,15 @@ const Empty = 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;
+      })()];
     }
   });
 };

package/es/Form/FormItem.js

@@ -1,4 +1,4 @@
-import { createComponent, ssr, ssrHydrationKey, escape, ssrAttribute, Dynamic } from 'solid-js/web';
+import { createComponent, use, insert, effect, className, Dynamic, memo, template } from 'solid-js/web';
 import { useContext, createSignal, createEffect, onCleanup, on, Show } from 'solid-js';
 import { set, unset, isNil } from 'lodash-es';
 import { nanoid } from 'nanoid';
@@ -6,11 +6,11 @@ import cs from 'classnames';
 import FormContext from './context.js';
 import Element from '../Element/index.js';
 
-var _tmpl$ = ["<label", " class=\"mr-4px\">", "</label>"],
-  _tmpl$2 = ["<span", " class=\"text-[var(--ant-color-error)]\">*</span>"],
-  _tmpl$3 = ["<div", " class=\"flex items-center\" style=\"", "\"><label", "><!--$-->", "<!--/--><!--$-->", "<!--/--></label></div>"],
-  _tmpl$4 = ["<div", " class=\"absolute top-[100%] text-[var(--ant-color-error)]\">", "</div>"],
-  _tmpl$5 = ["<div", " class=\"flex flex-col relative flex-grow-1\" style=\"", "\"><div>", "</div><!--$-->", "<!--/--></div>"];
+var _tmpl$ = /*#__PURE__*/template(`<label class=mr-4px>`),
+  _tmpl$2 = /*#__PURE__*/template(`<span class=text-[var(--ant-color-error)]>*`),
+  _tmpl$3 = /*#__PURE__*/template(`<div class="flex items-center"><label>`),
+  _tmpl$4 = /*#__PURE__*/template(`<div class="absolute top-[100%] text-[var(--ant-color-error)]">`),
+  _tmpl$5 = /*#__PURE__*/template(`<div class="flex flex-col relative flex-grow-1"><div>`);
 const FormItem = props => {
   const {
     formInstance,
@@ -69,48 +69,77 @@ const FormItem = props => {
           return props.style;
         },
         get children() {
-          return [ssr(_tmpl$3, ssrHydrationKey(), "width:" + (layout() === 'horizontal' && maxItemWidth ? `${escape(maxItemWidth(), true) ?? 0}px` : escape(undefined, true)), ssrAttribute("class", escape(cs('shrink-0 leading-32px not[:empty]:h-32px not[:empty]:pr-8px text-right [white-space:nowrap]'), true), false), escape(createComponent(Show, {
-            get when() {
-              return !isNil(props.label);
-            },
-            get children() {
-              return ssr(_tmpl$, ssrHydrationKey(), escape(props.label));
-            }
-          })), escape(createComponent(Show, {
-            get when() {
-              return !isNil(props.required);
-            },
-            get children() {
-              return ssr(_tmpl$2, ssrHydrationKey());
-            }
-          }))), ssr(_tmpl$5, ssrHydrationKey(), "width:" + (layout() === 'horizontal' && maxItemWidth ? `calc(100% - ${escape(maxItemWidth(), true) ?? 0}px)` : escape(undefined, true)), escape(createComponent(Dynamic, {
-            get component() {
-              return props.component;
-            },
-            get value() {
-              return props.name ? formInstance?.getFieldValue(props.name) : undefined;
-            },
-            get status() {
-              return errMsg() ? 'error' : undefined;
-            },
-            onChange: value => {
-              if (!isNil(props.name)) formInstance?.setFieldValue(props.name, value);
-              props.rules?.forEach(rule => {
-                rule.validate(value).then(() => {
-                  setErrMsg('');
-                }).catch(err => {
-                  setErrMsg(err.message);
+          return [(() => {
+            var _el$ = _tmpl$3(),
+              _el$2 = _el$.firstChild;
+            var _ref$ = label;
+            typeof _ref$ === "function" ? use(_ref$, _el$2) : label = _el$2;
+            insert(_el$2, createComponent(Show, {
+              get when() {
+                return !isNil(props.label);
+              },
+              get children() {
+                var _el$3 = _tmpl$();
+                insert(_el$3, () => props.label);
+                return _el$3;
+              }
+            }), null);
+            insert(_el$2, createComponent(Show, {
+              get when() {
+                return !isNil(props.required);
+              },
+              get children() {
+                return _tmpl$2();
+              }
+            }), null);
+            effect(_p$ => {
+              var _v$ = layout() === 'horizontal' && maxItemWidth ? `${maxItemWidth() ?? 0}px` : undefined,
+                _v$2 = cs('shrink-0 leading-32px not[:empty]:h-32px not[:empty]:pr-8px text-right [white-space:nowrap]');
+              _v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$.style.setProperty("width", _v$) : _el$.style.removeProperty("width"));
+              _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$;
+          })(), (() => {
+            var _el$5 = _tmpl$5(),
+              _el$6 = _el$5.firstChild;
+            insert(_el$6, createComponent(Dynamic, {
+              get component() {
+                return props.component;
+              },
+              get value() {
+                return memo(() => !!props.name)() ? formInstance?.getFieldValue(props.name) : undefined;
+              },
+              get status() {
+                return errMsg() ? 'error' : undefined;
+              },
+              onChange: value => {
+                if (!isNil(props.name)) formInstance?.setFieldValue(props.name, value);
+                props.rules?.forEach(rule => {
+                  rule.validate(value).then(() => {
+                    setErrMsg('');
+                  }).catch(err => {
+                    setErrMsg(err.message);
+                  });
                 });
-              });
-            }
-          })), escape(createComponent(Show, {
-            get when() {
-              return errMsg();
-            },
-            get children() {
-              return ssr(_tmpl$4, ssrHydrationKey(), escape(errMsg()));
-            }
-          })))];
+              }
+            }));
+            insert(_el$5, createComponent(Show, {
+              get when() {
+                return errMsg();
+              },
+              get children() {
+                var _el$7 = _tmpl$4();
+                insert(_el$7, errMsg);
+                return _el$7;
+              }
+            }), null);
+            effect(() => (layout() === 'horizontal' && maxItemWidth ? `calc(100% - ${maxItemWidth() ?? 0}px)` : undefined) != null ? _el$5.style.setProperty("width", layout() === 'horizontal' && maxItemWidth ? `calc(100% - ${maxItemWidth() ?? 0}px)` : undefined) : _el$5.style.removeProperty("width"));
+            return _el$5;
+          })()];
         }
       });
     }

package/es/Fragment/index.js

@@ -1,5 +1,7 @@
+import { memo } from 'solid-js/web';
+
 const Fragment = props => {
-  return props.children;
+  return memo(() => props.children);
 };
 
 export { Fragment as default };

package/es/Image/index.js

@@ -1,17 +1,37 @@
-import { ssr, ssrHydrationKey, ssrAttribute, escape, ssrStyle, ssrElement, mergeProps } from 'solid-js/web';
+import { spread, mergeProps, effect, className, style, template } from 'solid-js/web';
 import cs from 'classnames';
 
-var _tmpl$ = ["<div", " style=\"", "\">", "</div>"];
+var _tmpl$ = /*#__PURE__*/template(`<div><img>`);
 const Image = props => {
-  return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs(props.rootClass, 'inline-block'), true), false), ssrStyle({
-    width: typeof props.width === 'string' ? props.width : undefined,
-    height: typeof props.height === 'string' ? props.height : undefined,
-    ...props.rootStyle
-  }), ssrElement("img", mergeProps(props, {
-    get src() {
-      return props.src ? props.src : props.fallback;
-    }
-  }), undefined, false));
+  return (() => {
+    var _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild;
+    spread(_el$2, mergeProps(props, {
+      get src() {
+        return props.src ? props.src : props.fallback;
+      },
+      "onError": e => {
+        if (props.fallback) {
+          e.currentTarget.src = props.fallback;
+        }
+      }
+    }), false, false);
+    effect(_p$ => {
+      var _v$ = cs(props.rootClass, 'inline-block'),
+        _v$2 = {
+          width: typeof props.width === 'string' ? props.width : undefined,
+          height: typeof props.height === 'string' ? props.height : undefined,
+          ...props.rootStyle
+        };
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$;
+  })();
 };
 
 export { Image as default };

package/es/Input/TextArea.js

@@ -1,4 +1,4 @@
-import { createComponent, ssrElement, mergeProps } from 'solid-js/web';
+import { createComponent, use, spread, mergeProps, template } from 'solid-js/web';
 import { splitProps, onMount } from 'solid-js';
 import cs from 'classnames';
 import Element from '../Element/index.js';
@@ -6,16 +6,20 @@ import createControllableValue from '../hooks/createControllableValue.js';
 import useComponentSize from '../hooks/useComponentSize.js';
 import { statusClassDict } from './index.js';
 import useFocus from '../hooks/useFocus.js';
-import 'lodash-es';
+import { setRef } from '../utils/solid.js';
 
+var _tmpl$ = /*#__PURE__*/template(`<textarea>`);
 const TextArea = props => {
   const size = useComponentSize(() => props.size);
   const [_, inputProps] = splitProps(props, ['defaultValue', 'value', 'onChange', 'onPressEnter', 'onKeyDown', 'size', 'autoFocus', 'status']);
   let inputRef;
   const foucs = useFocus(() => inputRef);
   onMount(() => {
-    if (props.autoFocus) ;
+    if (props.autoFocus) {
+      inputRef?.focus();
+    }
   });
+  const isControlled = () => Object.keys(props).includes('value');
   const [value, setValue] = createControllableValue(props, {
     trigger: null
   });
@@ -39,7 +43,12 @@ const TextArea = props => {
       };
     },
     get children() {
-      return ssrElement("textarea", mergeProps(inputProps, {
+      var _el$ = _tmpl$();
+      use(el => {
+        setRef(props, el);
+        inputRef = el;
+      }, _el$);
+      spread(_el$, mergeProps(inputProps, {
         get ["class"]() {
           return cs('p-[--ant-input-padding] border-1px border-solid bg-[--ant-color-bg-container]', 'w-full h-full [font-size:var(--ant-input-font-size)] [outline:none] placeholder-text-[var(--ant-color-text-placeholder)]', props.disabled && 'color-[var(--ant-color-text-disabled)] cursor-not-allowed', {
             small: 'rounded-[var(--ant-border-radius-sm)]',
@@ -49,8 +58,25 @@ const TextArea = props => {
         },
         get value() {
           return value() ?? '';
+        },
+        "onInput": e => {
+          setValue(e.target.value);
+          try {
+            props.onChange?.(e);
+          } finally {
+            if (isControlled() && e.target.value !== props.value) {
+              e.target.value = props.value ?? '';
+            }
+          }
+        },
+        "onKeyDown": e => {
+          if (e.key === 'Enter') {
+            props.onPressEnter?.(e);
+          }
+          props.onKeyDown?.(e);
         }
-      }), undefined, true);
+      }), false, false);
+      return _el$;
     }
   });
 };

package/es/Input/index.d.ts

@@ -7,9 +7,13 @@ type CommonInputProps = RootStyleProps & Omit<JSX.InputHTMLAttributes<HTMLInputE
     defaultValue?: string | null | undefined;
     value?: string | null | undefined;
     addonBefore?: JSXElement;
+    addonBeforeHTMLAttributes?: JSX.HTMLAttributes<HTMLDivElement>;
     addonAfter?: JSXElement;
+    addonAfterHTMLAttributes?: JSX.HTMLAttributes<HTMLDivElement>;
     prefix?: JSXElement;
+    prefixHTMLAttributes?: JSX.HTMLAttributes<HTMLDivElement>;
     suffix?: JSXElement;
+    suffixHTMLAttributes?: JSX.HTMLAttributes<HTMLDivElement>;
     /**
        * 仅供 InputNumber 使用
        */
@@ -29,6 +33,7 @@ type CommonInputProps = RootStyleProps & Omit<JSX.InputHTMLAttributes<HTMLInputE
     onChange?: JSX.InputEventHandler<HTMLInputElement, InputEvent>;
     onPressEnter?: JSX.EventHandler<HTMLInputElement, KeyboardEvent>;
     onKeyDown?: JSX.EventHandler<HTMLInputElement, KeyboardEvent>;
+    affixWrapperHTMLAttributes?: JSX.HTMLAttributes<HTMLDivElement>;
 };
 export declare const statusClassDict: {
     default: (disabled: boolean, foucs: boolean) => "border-[--ant-color-border]" | "border-[--ant-color-primary] [box-shadow:0_0_0_2px_rgba(5,145,255,0.1)]" | "border-[--ant-color-border] hover:border-[--ant-color-primary]";