antd-solid 0.0.16 → 0.0.18

package/es/Empty/assets/EmptySvg.js

@@ -1,6 +1,6 @@
-import { template } from 'solid-js/web';
+import { ssr, ssrHydrationKey } from 'solid-js/web';
 
-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$();
+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());
 
 export { EmptySvg as default };

package/es/Empty/assets/SimpleEmptySvg.js

@@ -1,6 +1,6 @@
-import { template } from 'solid-js/web';
+import { ssr, ssrHydrationKey } from 'solid-js/web';
 
-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$();
+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());
 
 export { EmptySvg as default };

package/es/Empty/index.js

@@ -1,10 +1,10 @@
-import { createComponent, insert, template } from 'solid-js/web';
+import { createComponent, ssr, ssrHydrationKey, escape } 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$ = /*#__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">`);
+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>"];
 const Empty = props => {
   return createComponent(Element, {
     get ["class"]() {
@@ -14,15 +14,7 @@ const Empty = props => {
       return props.style;
     },
     get children() {
-      return [(() => {
-        var _el$ = _tmpl$();
-        insert(_el$, createComponent(EmptySvg, {}));
-        return _el$;
-      })(), (() => {
-        var _el$2 = _tmpl$2();
-        insert(_el$2, () => props.description ?? '暂无数据');
-        return _el$2;
-      })()];
+      return [ssr(_tmpl$, ssrHydrationKey(), escape(createComponent(EmptySvg, {}))), ssr(_tmpl$2, ssrHydrationKey(), escape(props.description) ?? '暂无数据')];
     }
   });
 };

package/es/Form/FormItem.js

@@ -1,4 +1,4 @@
-import { createComponent, use, insert, effect, className, Dynamic, memo, template } from 'solid-js/web';
+import { createComponent, ssr, ssrHydrationKey, escape, ssrAttribute, Dynamic } 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$ = /*#__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>`);
+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>"];
 const FormItem = props => {
   const {
     formInstance,
@@ -69,77 +69,48 @@ const FormItem = props => {
           return props.style;
         },
         get children() {
-          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);
-                  });
+          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);
                 });
-              }
-            }));
-            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;
-          })()];
+              });
+            }
+          })), escape(createComponent(Show, {
+            get when() {
+              return errMsg();
+            },
+            get children() {
+              return ssr(_tmpl$4, ssrHydrationKey(), escape(errMsg()));
+            }
+          })))];
         }
       });
     }

package/es/Fragment/index.js

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

package/es/Image/index.js

@@ -1,37 +1,17 @@
-import { spread, mergeProps, effect, className, style, template } from 'solid-js/web';
+import { ssr, ssrHydrationKey, ssrAttribute, escape, ssrStyle, ssrElement, mergeProps } from 'solid-js/web';
 import cs from 'classnames';
 
-var _tmpl$ = /*#__PURE__*/template(`<div><img>`);
+var _tmpl$ = ["<div", " style=\"", "\">", "</div>"];
 const Image = props => {
-  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$;
-  })();
+  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));
 };
 
 export { Image as default };

package/es/Input/TextArea.js

@@ -1,4 +1,4 @@
-import { createComponent, use, spread, mergeProps, template } from 'solid-js/web';
+import { createComponent, ssrElement, mergeProps } from 'solid-js/web';
 import { splitProps, onMount } from 'solid-js';
 import cs from 'classnames';
 import Element from '../Element/index.js';
@@ -6,20 +6,16 @@ import createControllableValue from '../hooks/createControllableValue.js';
 import useComponentSize from '../hooks/useComponentSize.js';
 import { statusClassDict } from './index.js';
 import useFocus from '../hooks/useFocus.js';
-import { setRef } from '../utils/solid.js';
+import 'lodash-es';
 
-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) {
-      inputRef?.focus();
-    }
+    if (props.autoFocus) ;
   });
-  const isControlled = () => Object.keys(props).includes('value');
   const [value, setValue] = createControllableValue(props, {
     trigger: null
   });
@@ -43,12 +39,7 @@ const TextArea = props => {
       };
     },
     get children() {
-      var _el$ = _tmpl$();
-      use(el => {
-        setRef(props, el);
-        inputRef = el;
-      }, _el$);
-      spread(_el$, mergeProps(inputProps, {
+      return ssrElement("textarea", 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)]',
@@ -58,25 +49,8 @@ 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);
         }
-      }), false, false);
-      return _el$;
+      }), undefined, true);
     }
   });
 };

package/es/Input/index.js

@@ -1,9 +1,8 @@
-import { delegateEvents, createComponent, insert, effect, className, use, spread, mergeProps, template } from 'solid-js/web';
+import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape, ssrElement, mergeProps } 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';
@@ -11,12 +10,12 @@ import './index.scss.js';
 import useFocus from '../hooks/useFocus.js';
 import CompactContext from '../Compact/context.js';
 
-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>`);
+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>"];
 const statusClassDict = {
   default: (disabled, foucs) => {
     if (disabled) {
@@ -55,11 +54,8 @@ function CommonInput(props) {
   let inputRef;
   const foucs = useFocus(() => inputRef);
   onMount(() => {
-    if (props.autoFocus) {
-      inputRef?.focus();
-    }
+    if (props.autoFocus) ;
   });
-  const isControlled = () => Object.keys(props).includes('value');
   const [value, setValue] = createControllableValue(props, {
     trigger: null
   });
@@ -104,101 +100,49 @@ function CommonInput(props) {
           return !isNil(addonBefore());
         },
         get children() {
-          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$;
+          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$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, {
+      }))), createComponent(Show, {
         get when() {
           return !isNil(addonAfter());
         },
         get children() {
-          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;
+          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()));
         }
       })];
     }
@@ -208,6 +152,5 @@ 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,12 +1,13 @@
-import { delegateEvents, createComponent, mergeProps as mergeProps$1, memo, template } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1, ssr, ssrHydrationKey, ssrAttribute, escape } 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$ = /*#__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>`);
+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>"];
 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,
@@ -75,14 +76,7 @@ const InputNumber = _props => {
       };
     },
     get actions() {
-      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;
+      return props.controls ? ssr(_tmpl$, ssrHydrationKey(), ssrAttribute("class", escape(actionBtnClass, true), false), `[border-top:1px_solid_var(--ant-color-border)] ${escape(actionBtnClass, true)}`) : undefined;
     },
     get value() {
       return `${(focusing() ? value() : displayValue()) ?? ''}`;
@@ -117,6 +111,5 @@ const InputNumber = _props => {
     }
   }));
 };
-delegateEvents(["click"]);
 
 export { InputNumber as default };