antd-solid 0.0.16 → 0.0.18

package/es/Button/index.js

@@ -1,4 +1,4 @@
-import { createComponent, mergeProps as mergeProps$1, insert, effect, className, style, template } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1, ssr, ssrHydrationKey, escape, ssrAttribute, ssrStyle } from 'solid-js/web';
 import { mergeProps, splitProps, createSignal, createMemo, children, Show } from 'solid-js';
 import cs from 'classnames';
 import './index.scss.js';
@@ -7,9 +7,9 @@ import Element from '../Element/index.js';
 import useComponentSize from '../hooks/useComponentSize.js';
 import { unwrapStringOrJSXElement } from '../utils/solid.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<span class="i-ant-design:loading [vertical-align:-0.125em] keyframes-spin [animation:spin_1s_linear_infinite]">`),
-  _tmpl$2 = /*#__PURE__*/template(`<span>`),
-  _tmpl$3 = /*#__PURE__*/template(`<span class="inline-block leading-inherit">`);
+var _tmpl$ = ["<span", " class=\"i-ant-design:loading [vertical-align:-0.125em] keyframes-spin [animation:spin_1s_linear_infinite]\"></span>"],
+  _tmpl$2 = ["<span", " style=\"", "\">", "</span>"],
+  _tmpl$3 = ["<span", " class=\"inline-block leading-inherit\">", "</span>"];
 const sizeClassMap = {
   large: 'px-15px py-7px h-40px leading-24px',
   middle: 'px-15px py-4px h-32px leading-22px',
@@ -41,10 +41,6 @@ const Button = _props => {
   return createComponent(Element, mergeProps$1({
     tag: "button"
   }, buttonElementProps, {
-    ref(r$) {
-      var _ref$ = props.ref;
-      typeof _ref$ === "function" ? _ref$(r$) : props.ref = r$;
-    },
     get ["class"]() {
       return cs(`ant-btn ant-btn-${props.type}`, 'inline-flex justify-center items-center gap-8px', 'relative cursor-pointer [font-size:var(--ant-font-size)] rounded-[--ant-button-border-radius]', 'focus-visible:[outline:4px_solid_var(--ant-color-primary-border)] focus-visible:[outline-offset:1px]', props.block && 'block w-full', props.class, sizeClassMap[size()], props.disabled && 'cursor-not-allowed', typeClassMap[props.type](props.danger, props.disabled), loading() && 'opacity-65');
     },
@@ -82,33 +78,19 @@ const Button = _props => {
               return resolvedIcon();
             },
             get children() {
-              var _el$3 = _tmpl$3();
-              insert(_el$3, resolvedIcon);
-              return _el$3;
+              return ssr(_tmpl$3, ssrHydrationKey(), escape(resolvedIcon()));
             }
           });
         },
         get children() {
-          return _tmpl$();
+          return ssr(_tmpl$, ssrHydrationKey());
         }
       }), createComponent(Show, {
         get when() {
           return resolvedChildren();
         },
         get children() {
-          var _el$2 = _tmpl$2();
-          insert(_el$2, resolvedChildren);
-          effect(_p$ => {
-            var _v$ = cs('inline-block leading-inherit', props.contentClass),
-              _v$2 = props.contentStyle;
-            _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
-            _p$.t = style(_el$2, _v$2, _p$.t);
-            return _p$;
-          }, {
-            e: undefined,
-            t: undefined
-          });
-          return _el$2;
+          return ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("class", escape(cs('inline-block leading-inherit', props.contentClass), true), false), ssrStyle(props.contentStyle), escape(resolvedChildren()));
         }
       })];
     }

package/es/Checkbox/Group.js

@@ -1,4 +1,4 @@
-import { createComponent, memo } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
 import { For } from 'solid-js';
 import cs from 'classnames';
 import createControllableValue from '../hooks/createControllableValue.js';
@@ -38,7 +38,7 @@ const Group = props => {
             return props.disabled;
           },
           get children() {
-            return [memo(() => typeof option === 'object' ? unwrapStringOrJSXElement(option.label) : option), ' '];
+            return [typeof option === 'object' ? unwrapStringOrJSXElement(option.label) : option, ' '];
           }
         })
       });

package/es/Checkbox/index.js

@@ -1,12 +1,12 @@
-import { createComponent, effect, className, insert, template } from 'solid-js/web';
+import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape } from 'solid-js/web';
 import { Show } from 'solid-js';
 import cs from 'classnames';
 import createControllableValue from '../hooks/createControllableValue.js';
 import Group from './Group.js';
 import Element from '../Element/index.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<span><input class="m-0 hidden"type=checkbox>`),
-  _tmpl$2 = /*#__PURE__*/template(`<span>`);
+var _tmpl$ = ["<span", "><input class=\"m-0 hidden\" type=\"checkbox\"></span>"],
+  _tmpl$2 = ["<span", ">", "</span>"];
 const Checkbox = props => {
   const [checked, setChecked] = createControllableValue(props, {
     defaultValue: false,
@@ -23,33 +23,20 @@ const Checkbox = props => {
       return props.style;
     },
     get children() {
-      return [(() => {
-        var _el$ = _tmpl$(),
-          _el$2 = _el$.firstChild;
-        _el$2.addEventListener("change", e => {
-          if (props.disabled) return;
-          e.target.checked = setChecked(v => !v);
-          props.onChange?.(e);
-        });
-        effect(() => className(_el$, cs('w-16px h-16px rounded-[var(--ant-border-radius-sm)] relative', (() => {
-          if (checked()) {
-            return ['after:content-empty after:block after:absolute after:top-[calc(50%-1px)] after:left-1/2 after:-translate-1/2 after:-rotate-45 after:w-10px after:h-6px', 'after:border-solid after:border-2px after:border-t-0px after:border-r-0px', props.disabled ? 'bg-[var(--ant-color-bg-container-disabled)] [border:1px_solid_var(--ant-color-border)] after:border-[var(--ant-color-text-disabled)]' : 'bg-[var(--ant-color-primary)] after:border-white'];
-          }
-          if (props.indeterminate) {
-            return ['[border:1px_solid_var(--ant-color-border)]', 'after:content-empty after:block after:absolute after:top-1/2 after:left-1/2 after:-translate-1/2 after:w-8px after:h-8px', props.disabled ? 'after:bg-[var(--ant-color-text-disabled)]' : 'after:bg-[var(--ant-color-primary)]'];
-          }
-          return ['[border:1px_solid_var(--ant-color-border)]', props.disabled ? 'bg-[var(--ant-color-bg-container-disabled)]' : 'bg-[--ant-color-bg-container]'];
-        })())));
-        return _el$;
-      })(), createComponent(Show, {
+      return [ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs('w-16px h-16px rounded-[var(--ant-border-radius-sm)] relative', (() => {
+        if (checked()) {
+          return ['after:content-empty after:block after:absolute after:top-[calc(50%-1px)] after:left-1/2 after:-translate-1/2 after:-rotate-45 after:w-10px after:h-6px', 'after:border-solid after:border-2px after:border-t-0px after:border-r-0px', props.disabled ? 'bg-[var(--ant-color-bg-container-disabled)] [border:1px_solid_var(--ant-color-border)] after:border-[var(--ant-color-text-disabled)]' : 'bg-[var(--ant-color-primary)] after:border-white'];
+        }
+        if (props.indeterminate) {
+          return ['[border:1px_solid_var(--ant-color-border)]', 'after:content-empty after:block after:absolute after:top-1/2 after:left-1/2 after:-translate-1/2 after:w-8px after:h-8px', props.disabled ? 'after:bg-[var(--ant-color-text-disabled)]' : 'after:bg-[var(--ant-color-primary)]'];
+        }
+        return ['[border:1px_solid_var(--ant-color-border)]', props.disabled ? 'bg-[var(--ant-color-bg-container-disabled)]' : 'bg-[--ant-color-bg-container]'];
+      })()), true), false)), createComponent(Show, {
         get when() {
           return props.children;
         },
         get children() {
-          var _el$3 = _tmpl$2();
-          insert(_el$3, () => props.children);
-          effect(() => className(_el$3, cs('px-8px', props.disabled && 'text-[var(--ant-color-text-disabled)]')));
-          return _el$3;
+          return ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("class", escape(cs('px-8px', props.disabled && 'text-[var(--ant-color-text-disabled)]'), true), false), escape(props.children));
         }
       })];
     }

package/es/CodeInput/index.js

@@ -45,9 +45,6 @@ const CodeInput = _props => {
             unset(inputRefDict, item);
           });
           return createComponent(Input, {
-            ref: el => {
-              inputRefDict[item] = el;
-            },
             "class": "!w-32px !text-center",
             get value() {
               return value()[item];

package/es/Collapse/Item.js

@@ -1,4 +1,4 @@
-import { delegateEvents, createComponent, Dynamic, insert, effect, className, style, template, memo } from 'solid-js/web';
+import { createComponent, Dynamic, ssr, ssrHydrationKey, ssrAttribute, escape, ssrStyle } from 'solid-js/web';
 import { mergeProps, useContext, Show } from 'solid-js';
 import cs from 'classnames';
 import { Transition } from 'solid-transition-group';
@@ -9,9 +9,9 @@ import CollapseContext from './context.js';
 import useComponentSize from '../hooks/useComponentSize.js';
 import { getElementClass, getElementCssVariables } from './utils.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<span>`),
-  _tmpl$2 = /*#__PURE__*/template(`<div><span class="inline-flex items-center gap-[--ant-margin-sm]"></span><span class="inline-flex items-center gap-[--ant-margin-sm]">`),
-  _tmpl$3 = /*#__PURE__*/template(`<div class=overflow-hidden><div>`);
+var _tmpl$ = ["<span", "></span>"],
+  _tmpl$2 = ["<div", " style=\"", "\"><span class=\"inline-flex items-center gap-[--ant-margin-sm]\"><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></span><span class=\"inline-flex items-center gap-[--ant-margin-sm]\"><!--$-->", "<!--/--><!--$-->", "<!--/--></span></div>"],
+  _tmpl$3 = ["<div", " class=\"overflow-hidden\"><div", " style=\"", "\">", "</div></div>"];
 const CollapseItem = _props => {
   const props = mergeProps({
     type: 'line',
@@ -33,13 +33,9 @@ const CollapseItem = _props => {
         return !props.disabledChildren && props.expandIcon !== false && props.expandIconPosition === position;
       },
       get children() {
-        return memo(() => typeof props.expandIcon === 'function')() ? props.expandIcon({
+        return typeof props.expandIcon === 'function' ? props.expandIcon({
           isActive: () => !!open()
-        }) : (() => {
-          var _el$ = _tmpl$();
-          effect(() => className(_el$, cs('i-ant-design:right-outlined', 'duration-.3s', open() && 'rotate-[90deg]')));
-          return _el$;
-        })();
+        }) : ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs('i-ant-design:right-outlined', 'duration-.3s', open() && 'rotate-[90deg]'), true), false));
       }
     });
   };
@@ -55,31 +51,7 @@ const CollapseItem = _props => {
       };
     },
     get children() {
-      return [(() => {
-        var _el$2 = _tmpl$2(),
-          _el$3 = _el$2.firstChild,
-          _el$4 = _el$3.nextSibling;
-        _el$2.$$click = () => {
-          if (props.disabledChildren) return;
-          setOpen(!open());
-        };
-        insert(_el$3, () => getExpandIcon('left'), null);
-        insert(_el$3, () => unwrapStringOrJSXElement(props.label), null);
-        insert(_el$3, () => getExpandIcon('right'), null);
-        insert(_el$4, () => unwrapStringOrJSXElement(props.extra), null);
-        insert(_el$4, () => getExpandIcon('end'), null);
-        effect(_p$ => {
-          var _v$ = cs('text-[--ant-color-text-heading] flex justify-between items-center cursor-pointer', props.type === 'card' && 'bg-[var(--ant-collapse-header-bg)] p-[--ant-collapse-header-padding]'),
-            _v$2 = props.headerStyle;
-          _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
-          _p$.t = style(_el$2, _v$2, _p$.t);
-          return _p$;
-        }, {
-          e: undefined,
-          t: undefined
-        });
-        return _el$2;
-      })(), createComponent(Transition, {
+      return [ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("class", escape(cs('text-[--ant-color-text-heading] flex justify-between items-center cursor-pointer', props.type === 'card' && 'bg-[var(--ant-collapse-header-bg)] p-[--ant-collapse-header-padding]'), true), false), ssrStyle(props.headerStyle), escape(getExpandIcon('left')), escape(unwrapStringOrJSXElement(props.label)), escape(getExpandIcon('right')), escape(unwrapStringOrJSXElement(props.extra)), escape(getExpandIcon('end'))), createComponent(Transition, {
         onEnter: (el, done) => {
           el.animate([{
             height: '0px'
@@ -104,20 +76,7 @@ const CollapseItem = _props => {
               return open();
             },
             get children() {
-              var _el$5 = _tmpl$3(),
-                _el$6 = _el$5.firstChild;
-              insert(_el$6, () => props.children);
-              effect(_p$ => {
-                var _v$3 = cs('p-[--ant-collapse-content-padding]', props.type === 'card' && '[border-top:1px_solid_var(--ant-color-border)]'),
-                  _v$4 = props.bodyStyle;
-                _v$3 !== _p$.e && className(_el$6, _p$.e = _v$3);
-                _p$.t = style(_el$6, _v$4, _p$.t);
-                return _p$;
-              }, {
-                e: undefined,
-                t: undefined
-              });
-              return _el$5;
+              return ssr(_tmpl$3, ssrHydrationKey(), ssrAttribute("class", escape(cs('p-[--ant-collapse-content-padding]', props.type === 'card' && '[border-top:1px_solid_var(--ant-color-border)]'), true), false), ssrStyle(props.bodyStyle), escape(props.children));
             }
           });
         }
@@ -125,6 +84,5 @@ const CollapseItem = _props => {
     }
   });
 };
-delegateEvents(["click"]);
 
 export { CollapseItem as default };

package/es/Collapse/index.js

@@ -1,4 +1,4 @@
-import { createComponent, effect, className, mergeProps as mergeProps$1, template } from 'solid-js/web';
+import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps, Show, For } from 'solid-js';
 import cs from 'classnames';
 import { isEmpty } from 'lodash-es';
@@ -10,7 +10,7 @@ import CollapseItem from './Item.js';
 import CollapseContext from './context.js';
 import { getElementClass, getElementCssVariables } from './utils.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<div>`);
+var _tmpl$ = ["<div", "></div>"];
 const Collapse = _props => {
   const props = mergeProps({
     divider: true,
@@ -55,9 +55,7 @@ const Collapse = _props => {
                     return index() !== 0 && props.divider;
                   },
                   get children() {
-                    var _el$ = _tmpl$();
-                    effect(() => className(_el$, cs('h-1px bg-[var(--ant-color-split)]', props.type === 'line' && 'm-[--ant-collapse-divider-margin]')));
-                    return _el$;
+                    return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs('h-1px bg-[var(--ant-color-split)]', props.type === 'line' && 'm-[--ant-collapse-divider-margin]'), true), false));
                   }
                 }), createComponent(CollapseItem, mergeProps$1(item, {
                   get open() {