antd-solid 0.0.20 → 0.0.22

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.js

@@ -1,8 +1,9 @@
-import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape, ssrElement, mergeProps } from 'solid-js/web';
+import { delegateEvents, createComponent, insert, effect, className, use, spread, mergeProps, template } from 'solid-js/web';
 import { isNil, omit } from 'lodash-es';
 import { useContext, splitProps, onMount, createMemo, Show } from 'solid-js';
 import cs from 'classnames';
 import createControllableValue from '../hooks/createControllableValue.js';
+import { setRef } from '../utils/solid.js';
 import Element from '../Element/index.js';
 import TextArea from './TextArea.js';
 import useComponentSize from '../hooks/useComponentSize.js';
@@ -10,12 +11,12 @@ import './index.scss.js';
 import useFocus from '../hooks/useFocus.js';
 import CompactContext from '../Compact/context.js';
 
-var _tmpl$ = ["<div", ">", "</div>"],
-  _tmpl$2 = ["<div", " class=\"mr-4px\">", "</div>"],
-  _tmpl$3 = ["<span", " class=\"ml-4px 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$4 = ["<div", " class=\"ml-4px\">", "</div>"],
-  _tmpl$5 = ["<div", " class=\"[display:var(--actions-display)] absolute top-0 bottom-0 right-0 h-[calc(100%-2px)] translate-y-1px -translate-x-1px\">", "</div>"],
-  _tmpl$6 = ["<div", "><!--$-->", "<!--/-->", "<!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
+var _tmpl$ = /*#__PURE__*/template(`<div>`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class=mr-4px>`),
+  _tmpl$3 = /*#__PURE__*/template(`<span class="ml-4px 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$4 = /*#__PURE__*/template(`<div class=ml-4px>`),
+  _tmpl$5 = /*#__PURE__*/template(`<div class="[display:var(--actions-display)] absolute top-0 bottom-0 right-0 h-[calc(100%-2px)] translate-y-1px -translate-x-1px">`),
+  _tmpl$6 = /*#__PURE__*/template(`<div><input>`);
 const statusClassDict = {
   default: (disabled, foucs) => {
     if (disabled) {
@@ -54,8 +55,11 @@ function CommonInput(props) {
   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
   });
@@ -100,49 +104,101 @@ function CommonInput(props) {
           return !isNil(addonBefore());
         },
         get children() {
-          return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs('ant-input-addon', 'shrink-0 flex justify-center items-center px-11px bg-[rgba(0,0,0,.02)] [border:1px_solid_var(--ant-color-border)] border-r-0'), true), false), escape(addonBefore()));
-        }
-      }), ssr(_tmpl$6, ssrHydrationKey() + ssrAttribute("class", escape(cs('ant-input-affix-wrapper', 'flex items-center w-full relative p:hover-child[input]:border-[--ant-color-primary] bg-[--ant-color-bg-container] p-[--ant-input-padding] border-1px border-solid', ['[--actions-display:none]', !props.disabled && 'hover:[--actions-display:block]'], statusClassDict[props.status ?? 'default'](!!props.disabled, foucs())), true), false), escape(createComponent(Show, {
-        get when() {
-          return !isNil(prefix());
-        },
-        get children() {
-          return ssr(_tmpl$2, ssrHydrationKey(), escape(prefix()));
-        }
-      })), ssrElement("input", mergeProps(inputProps, {
-        get ["class"]() {
-          return cs('w-full h-full [font-size:var(--ant-input-font-size)] [outline:none] placeholder-text-[var(--ant-color-text-placeholder)] bg-transparent', props.disabled && 'color-[var(--ant-color-text-disabled)] cursor-not-allowed', props.class);
-        },
-        get value() {
-          return value() ?? '';
-        }
-      }), undefined, false), escape(createComponent(Show, {
-        get when() {
-          return showClearBtn();
-        },
-        get children() {
-          return ssr(_tmpl$3, ssrHydrationKey());
-        }
-      })), escape(createComponent(Show, {
-        get when() {
-          return !isNil(suffix());
-        },
-        get children() {
-          return ssr(_tmpl$4, ssrHydrationKey(), escape(suffix()));
-        }
-      })), escape(createComponent(Show, {
-        get when() {
-          return !isNil(actions());
-        },
-        get children() {
-          return ssr(_tmpl$5, ssrHydrationKey(), escape(actions()));
+          var _el$ = _tmpl$();
+          insert(_el$, addonBefore);
+          effect(() => className(_el$, cs('ant-input-addon', 'shrink-0 flex justify-center items-center px-11px bg-[rgba(0,0,0,.02)] [border:1px_solid_var(--ant-color-border)] border-r-0')));
+          return _el$;
         }
-      }))), createComponent(Show, {
+      }), (() => {
+        var _el$2 = _tmpl$6(),
+          _el$4 = _el$2.firstChild;
+        insert(_el$2, createComponent(Show, {
+          get when() {
+            return !isNil(prefix());
+          },
+          get children() {
+            var _el$3 = _tmpl$2();
+            insert(_el$3, prefix);
+            return _el$3;
+          }
+        }), _el$4);
+        use(el => {
+          setRef(props, el);
+          inputRef = el;
+        }, _el$4);
+        spread(_el$4, mergeProps(inputProps, {
+          get ["class"]() {
+            return cs('w-full h-full [font-size:var(--ant-input-font-size)] [outline:none] placeholder-text-[var(--ant-color-text-placeholder)] bg-transparent', props.disabled && 'color-[var(--ant-color-text-disabled)] cursor-not-allowed', props.class);
+          },
+          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);
+          }
+        }), false, false);
+        insert(_el$2, createComponent(Show, {
+          get when() {
+            return showClearBtn();
+          },
+          get children() {
+            var _el$5 = _tmpl$3();
+            _el$5.$$click = e => {
+              e.stopPropagation();
+              inputRef.value = '';
+              const inputEvent = new InputEvent('input', {
+                bubbles: true
+              });
+              inputRef.dispatchEvent(inputEvent);
+              inputRef?.focus();
+            };
+            return _el$5;
+          }
+        }), null);
+        insert(_el$2, createComponent(Show, {
+          get when() {
+            return !isNil(suffix());
+          },
+          get children() {
+            var _el$6 = _tmpl$4();
+            insert(_el$6, suffix);
+            return _el$6;
+          }
+        }), null);
+        insert(_el$2, createComponent(Show, {
+          get when() {
+            return !isNil(actions());
+          },
+          get children() {
+            var _el$7 = _tmpl$5();
+            insert(_el$7, actions);
+            return _el$7;
+          }
+        }), null);
+        effect(() => className(_el$2, cs('ant-input-affix-wrapper', 'flex items-center w-full relative p:hover-child[input]:border-[--ant-color-primary] bg-[--ant-color-bg-container] p-[--ant-input-padding] border-1px border-solid', ['[--actions-display:none]', !props.disabled && 'hover:[--actions-display:block]'], statusClassDict[props.status ?? 'default'](!!props.disabled, foucs()))));
+        return _el$2;
+      })(), createComponent(Show, {
         get when() {
           return !isNil(addonAfter());
         },
         get children() {
-          return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs('ant-input-addon', 'shrink-0 flex justify-center items-center px-11px bg-[rgba(0,0,0,.02)] [border:1px_solid_var(--ant-color-border)] border-l-0'), true), false), escape(addonAfter()));
+          var _el$8 = _tmpl$();
+          insert(_el$8, addonAfter);
+          effect(() => className(_el$8, cs('ant-input-addon', 'shrink-0 flex justify-center items-center px-11px bg-[rgba(0,0,0,.02)] [border:1px_solid_var(--ant-color-border)] border-l-0')));
+          return _el$8;
         }
       })];
     }
@@ -152,5 +208,6 @@ const Input = props => {
   return createComponent(CommonInput, mergeProps(() => omit(props, ['actions'])));
 };
 Input.TextArea = TextArea;
+delegateEvents(["click"]);
 
 export { CommonInput, Input as default, statusClassDict };

package/es/InputNumber/index.js

@@ -1,13 +1,12 @@
-import { createComponent, mergeProps as mergeProps$1, ssr, ssrHydrationKey, ssrAttribute, escape } from 'solid-js/web';
+import { delegateEvents, createComponent, mergeProps as mergeProps$1, memo, template } from 'solid-js/web';
 import { mergeProps, splitProps, createSignal, untrack, createMemo, createRenderEffect, on } from 'solid-js';
 import { isNumber, isNil, clamp, floor } from 'lodash-es';
 import NP from 'number-precision';
 import { CommonInput } from '../Input/index.js';
 import { dispatchEventHandlerUnion } from '../utils/solid.js';
 
-var _tmpl$ = ["<div", " class=\"flex flex-col h-full w-[--ant-input-number-handle-width] [border-left:1px_solid_var(--ant-color-border)] bg-[--ant-color-bg-container]\"><div", "><div class=\"i-ant-design:up-outlined\"></div></div><div class=\"", "\"><div class=\"i-ant-design:down-outlined\"></div></div></div>"];
+var _tmpl$ = /*#__PURE__*/template(`<div class="flex flex-col h-full w-[--ant-input-number-handle-width] [border-left:1px_solid_var(--ant-color-border)] bg-[--ant-color-bg-container]"><div class="text-12px flex justify-center items-center h-1/2 cursor-pointer opacity-70 hover:h-100% hover:text-[var(--ant-color-primary)] transition-color transition-height transition-duration-500"><div class=i-ant-design:up-outlined></div></div><div class="[border-top:1px_solid_var(--ant-color-border)] text-12px flex justify-center items-center h-1/2 cursor-pointer opacity-70 hover:h-100% hover:text-[var(--ant-color-primary)] transition-color transition-height transition-duration-500"><div class=i-ant-design:down-outlined>`);
 const isEmptyValue = value => isNil(value) || value === '';
-const actionBtnClass = 'text-12px flex justify-center items-center h-1/2 cursor-pointer opacity-70 hover:h-100% hover:text-[var(--ant-color-primary)] transition-color transition-height transition-duration-500';
 const InputNumber = _props => {
   const props = mergeProps({
     min: -Infinity,
@@ -76,7 +75,14 @@ const InputNumber = _props => {
       };
     },
     get actions() {
-      return props.controls ? ssr(_tmpl$, ssrHydrationKey(), ssrAttribute("class", escape(actionBtnClass, true), false), `[border-top:1px_solid_var(--ant-color-border)] ${escape(actionBtnClass, true)}`) : undefined;
+      return memo(() => !!props.controls)() ? (() => {
+        var _el$ = _tmpl$(),
+          _el$2 = _el$.firstChild,
+          _el$3 = _el$2.nextSibling;
+        _el$2.$$click = up;
+        _el$3.$$click = down;
+        return _el$;
+      })() : undefined;
     },
     get value() {
       return `${(focusing() ? value() : displayValue()) ?? ''}`;
@@ -111,5 +117,6 @@ const InputNumber = _props => {
     }
   }));
 };
+delegateEvents(["click"]);
 
 export { InputNumber as default };