antd-solid 0.0.20 → 0.0.22

package/es/Button/index.js

@@ -1,4 +1,4 @@
-import { createComponent, mergeProps as mergeProps$1, ssr, ssrHydrationKey, escape, ssrAttribute, ssrStyle } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1, insert, effect, className, style, template } 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$ = ["<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>"];
+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">`);
 const sizeClassMap = {
   large: 'px-15px py-7px h-40px leading-24px',
   middle: 'px-15px py-4px h-32px leading-22px',
@@ -41,6 +41,10 @@ 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');
     },
@@ -78,19 +82,33 @@ const Button = _props => {
               return resolvedIcon();
             },
             get children() {
-              return ssr(_tmpl$3, ssrHydrationKey(), escape(resolvedIcon()));
+              var _el$3 = _tmpl$3();
+              insert(_el$3, resolvedIcon);
+              return _el$3;
             }
           });
         },
         get children() {
-          return ssr(_tmpl$, ssrHydrationKey());
+          return _tmpl$();
         }
       }), createComponent(Show, {
         get when() {
           return resolvedChildren();
         },
         get children() {
-          return ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("class", escape(cs('inline-block leading-inherit', props.contentClass), true), false), ssrStyle(props.contentStyle), escape(resolvedChildren()));
+          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;
         }
       })];
     }

package/es/Checkbox/Group.js

@@ -1,4 +1,4 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, memo } 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 [typeof option === 'object' ? unwrapStringOrJSXElement(option.label) : option, ' '];
+            return [memo(() => typeof option === 'object' ? unwrapStringOrJSXElement(option.label) : option), ' '];
           }
         })
       });

package/es/Checkbox/index.js

@@ -1,12 +1,12 @@
-import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape } from 'solid-js/web';
+import { createComponent, effect, className, insert, template } 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$ = ["<span", "><input class=\"m-0 hidden\" type=\"checkbox\"></span>"],
-  _tmpl$2 = ["<span", ">", "</span>"];
+var _tmpl$ = /*#__PURE__*/template(`<span><input class="m-0 hidden"type=checkbox>`),
+  _tmpl$2 = /*#__PURE__*/template(`<span>`);
 const Checkbox = props => {
   const [checked, setChecked] = createControllableValue(props, {
     defaultValue: false,
@@ -23,20 +23,33 @@ const Checkbox = props => {
       return props.style;
     },
     get children() {
-      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, {
+      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, {
         get when() {
           return props.children;
         },
         get children() {
-          return ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("class", escape(cs('px-8px', props.disabled && 'text-[var(--ant-color-text-disabled)]'), true), false), escape(props.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;
         }
       })];
     }

package/es/CodeInput/index.js

@@ -45,6 +45,9 @@ 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 { createComponent, Dynamic, ssr, ssrHydrationKey, ssrAttribute, escape, ssrStyle } from 'solid-js/web';
+import { delegateEvents, createComponent, Dynamic, insert, effect, className, style, template, memo } 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$ = ["<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>"];
+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>`);
 const CollapseItem = _props => {
   const props = mergeProps({
     type: 'line',
@@ -33,9 +33,13 @@ const CollapseItem = _props => {
         return !props.disabledChildren && props.expandIcon !== false && props.expandIconPosition === position;
       },
       get children() {
-        return typeof props.expandIcon === 'function' ? props.expandIcon({
+        return memo(() => typeof props.expandIcon === 'function')() ? props.expandIcon({
           isActive: () => !!open()
-        }) : ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs('i-ant-design:right-outlined', 'duration-.3s', open() && 'rotate-[90deg]'), true), false));
+        }) : (() => {
+          var _el$ = _tmpl$();
+          effect(() => className(_el$, cs('i-ant-design:right-outlined', 'duration-.3s', open() && 'rotate-[90deg]')));
+          return _el$;
+        })();
       }
     });
   };
@@ -51,7 +55,31 @@ const CollapseItem = _props => {
       };
     },
     get children() {
-      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, {
+      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, {
         onEnter: (el, done) => {
           el.animate([{
             height: '0px'
@@ -76,7 +104,20 @@ const CollapseItem = _props => {
               return open();
             },
             get children() {
-              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));
+              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;
             }
           });
         }
@@ -84,5 +125,6 @@ const CollapseItem = _props => {
     }
   });
 };
+delegateEvents(["click"]);
 
 export { CollapseItem as default };

package/es/Collapse/index.js

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