antd-solid 0.0.20 → 0.0.22

package/es/Upload/index.js

@@ -1,8 +1,8 @@
-import { ssr, ssrHydrationKey, ssrAttribute, escape } from 'solid-js/web';
+import { delegateEvents, insert, use, effect, className, setAttribute, template } from 'solid-js/web';
 import { nanoid } from 'nanoid';
-import { mergeProps } from 'solid-js';
+import { mergeProps, createSignal } from 'solid-js';
 
-var _tmpl$ = ["<span", "><!--$-->", "<!--/--><input class=\"hidden\" type=\"file\"", "", "></span>"];
+var _tmpl$ = /*#__PURE__*/template(`<span><input class=hidden type=file>`);
 /**
  * 根据一个 File 对象创建一个 UploadFile 对象
  * @param file
@@ -55,6 +55,7 @@ async function request(uploadFileSignal, customRequest) {
   });
 }
 const Upload = _props => {
+  let input;
   const props = mergeProps({
     customRequest: ({
       file,
@@ -70,9 +71,42 @@ const Upload = _props => {
       }).then(onSuccess).catch(onError);
     }
   }, _props);
-  return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(props.class, true), false), escape(props.children), ssrAttribute("accept", escape(props.accept, true), false), ssrAttribute("multiple", props.multiple, true));
+  return (() => {
+    var _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild;
+    _el$.$$click = () => input?.click();
+    insert(_el$, () => props.children, _el$2);
+    _el$2.$$input = e => {
+      const fileList = [];
+      for (const file of Array.from(e.target.files ?? [])) {
+        // eslint-disable-next-line solid/reactivity
+        const uploadFileSignal = createSignal(createUploadFile(file));
+        request(uploadFileSignal, props.customRequest);
+        fileList.push(uploadFileSignal);
+      }
+      props.onAdd?.(fileList);
+      e.target.value = '';
+    };
+    var _ref$ = input;
+    typeof _ref$ === "function" ? use(_ref$, _el$2) : input = _el$2;
+    effect(_p$ => {
+      var _v$ = props.class,
+        _v$2 = props.accept,
+        _v$3 = props.multiple;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && setAttribute(_el$2, "accept", _p$.t = _v$2);
+      _v$3 !== _p$.a && (_el$2.multiple = _p$.a = _v$3);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$;
+  })();
 };
 Upload.request = request;
 Upload.createUploadFile = createUploadFile;
+delegateEvents(["click", "input"]);
 
 export { Upload as default };

package/es/assets/svg/ColorPickUp.js

@@ -1,12 +1,25 @@
-import { ssr, ssrHydrationKey, ssrAttribute, escape, ssrStyle } from 'solid-js/web';
+import { effect, setAttribute, style, template } from 'solid-js/web';
 import { commonStyle } from './common.js';
 
-var _tmpl$ = ["<svg", " viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\"", " style=\"", "\"><path d=\"M856.2176 347.904l-90.624 90.624 53.504 53.504a52.3264 52.3264 0 1 1-73.984 73.984l-71.5776-71.6288-444.928 444.9792a25.6 25.6 0 0 1-13.4656 7.0656l-133.1712 24.576a25.6 25.6 0 0 1-29.7984-29.7984l24.576-133.1712a25.6 25.6 0 0 1 7.0656-13.4656l444.928-444.9792-71.68-71.6288a52.3264 52.3264 0 0 1 73.984-73.984l53.504 53.504 90.624-90.624a128 128 0 0 1 181.0432 181.0432z m-291.328 37.888l-439.296 439.3472-16.384 88.7808 88.832-16.384 439.296-439.296-72.448-72.448z\"></path></svg>"];
+var _tmpl$ = /*#__PURE__*/template(`<svg viewBox="0 0 1024 1024"xmlns=http://www.w3.org/2000/svg><path d="M856.2176 347.904l-90.624 90.624 53.504 53.504a52.3264 52.3264 0 1 1-73.984 73.984l-71.5776-71.6288-444.928 444.9792a25.6 25.6 0 0 1-13.4656 7.0656l-133.1712 24.576a25.6 25.6 0 0 1-29.7984-29.7984l24.576-133.1712a25.6 25.6 0 0 1 7.0656-13.4656l444.928-444.9792-71.68-71.6288a52.3264 52.3264 0 0 1 73.984-73.984l53.504 53.504 90.624-90.624a128 128 0 0 1 181.0432 181.0432z m-291.328 37.888l-439.296 439.3472-16.384 88.7808 88.832-16.384 439.296-439.296-72.448-72.448z">`);
 const ColorPickUpSvg = props => {
-  return ssr(_tmpl$, ssrHydrationKey(), ssrAttribute("class", escape(props.class, true), false), ssrStyle({
-    ...commonStyle,
-    ...props.style
-  }));
+  return (() => {
+    var _el$ = _tmpl$();
+    effect(_p$ => {
+      var _v$ = props.class,
+        _v$2 = {
+          ...commonStyle,
+          ...props.style
+        };
+      _v$ !== _p$.e && setAttribute(_el$, "class", _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$;
+  })();
 };
 
 export { ColorPickUpSvg as default };

package/es/assets/svg/Crosshair.js

@@ -1,12 +1,51 @@
-import { ssr, ssrHydrationKey, ssrAttribute, escape, ssrStyle } from 'solid-js/web';
+import { use, effect, setAttribute, style, template } from 'solid-js/web';
 import { commonStyle } from './common.js';
 
-var _tmpl$ = ["<svg", " viewBox=\"0 0 26 26\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"", " style=\"", "\"><line x1=\"50%\" x2=\"50%\" y2=\"100%\" stroke-width=\"3\"", "></line><line x1=\"50%\" x2=\"50%\" y2=\"100%\" stroke-width=\"1\"", "></line><line x1=\"100%\" y1=\"50%\" y2=\"50%\" stroke-width=\"3\"", "></line><line x1=\"100%\" y1=\"50%\" y2=\"50%\" stroke-width=\"1\"", "></line><circle cx=\"50%\" cy=\"50%\" r=\"32.7%\" fill=\"none\" stroke-width=\"3\"", "></circle><circle cx=\"50%\" cy=\"50%\" r=\"32.7%\" fill=\"none\" stroke-width=\"1\"", "></circle></svg>"];
+var _tmpl$ = /*#__PURE__*/template(`<svg viewBox="0 0 26 26"version=1.1 xmlns=http://www.w3.org/2000/svg><line x1=50% x2=50% y2=100% stroke-width=3></line><line x1=50% x2=50% y2=100% stroke-width=1></line><line x1=100% y1=50% y2=50% stroke-width=3></line><line x1=100% y1=50% y2=50% stroke-width=1></line><circle cx=50% cy=50% r=32.7% fill=none stroke-width=3></circle><circle cx=50% cy=50% r=32.7% fill=none stroke-width=1>`);
 const CrosshairSvg = props => {
-  return ssr(_tmpl$, ssrHydrationKey(), ssrAttribute("class", escape(props.class, true), false), ssrStyle({
-    ...commonStyle,
-    ...props.style
-  }), ssrAttribute("stroke", escape(props.outerColor, true), false), ssrAttribute("stroke", escape(props.innerColor, true), false), ssrAttribute("stroke", escape(props.outerColor, true), false), ssrAttribute("stroke", escape(props.innerColor, true), false), ssrAttribute("stroke", escape(props.outerColor, true), false), ssrAttribute("stroke", escape(props.innerColor, true), false));
+  return (() => {
+    var _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling,
+      _el$4 = _el$3.nextSibling,
+      _el$5 = _el$4.nextSibling,
+      _el$6 = _el$5.nextSibling,
+      _el$7 = _el$6.nextSibling;
+    var _ref$ = props.ref;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : props.ref = _el$;
+    effect(_p$ => {
+      var _v$ = props.class,
+        _v$2 = {
+          ...commonStyle,
+          ...props.style
+        },
+        _v$3 = props.outerColor,
+        _v$4 = props.innerColor,
+        _v$5 = props.outerColor,
+        _v$6 = props.innerColor,
+        _v$7 = props.outerColor,
+        _v$8 = props.innerColor;
+      _v$ !== _p$.e && setAttribute(_el$, "class", _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
+      _v$3 !== _p$.a && setAttribute(_el$2, "stroke", _p$.a = _v$3);
+      _v$4 !== _p$.o && setAttribute(_el$3, "stroke", _p$.o = _v$4);
+      _v$5 !== _p$.i && setAttribute(_el$4, "stroke", _p$.i = _v$5);
+      _v$6 !== _p$.n && setAttribute(_el$5, "stroke", _p$.n = _v$6);
+      _v$7 !== _p$.s && setAttribute(_el$6, "stroke", _p$.s = _v$7);
+      _v$8 !== _p$.h && setAttribute(_el$7, "stroke", _p$.h = _v$8);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined
+    });
+    return _el$;
+  })();
 };
 
 export { CrosshairSvg as default };

package/es/assets/svg/Resize.js

@@ -1,12 +1,25 @@
-import { ssr, ssrHydrationKey, ssrAttribute, escape, ssrStyle } from 'solid-js/web';
+import { effect, setAttribute, style, template } from 'solid-js/web';
 import { commonStyle } from './common.js';
 
-var _tmpl$ = ["<svg", " viewBox=\"0 0 1024 1024\" xmlns=\"http://www.w3.org/2000/svg\"", " style=\"", "\"><path fill=\"black\" stroke=\"white\" stroke-width=\"50\" d=\"M531.2 179.2l130.133333 140.8c4.266667 4.266667 6.4 10.666667 6.4 14.933333-2.133333 4.266667-6.4 6.4-14.933333 6.4h-85.333333v341.333334h85.333333c8.533333 0 12.8 2.133333 14.933333 6.4 2.133333 4.266667 0 8.533333-6.4 14.933333l-130.133333 140.8c-4.266667 6.4-12.8 8.533333-19.2 8.533333s-14.933333-2.133333-19.2-8.533333l-130.133333-140.8c-4.266667-4.266667-6.4-10.666667-6.4-14.933333 2.133333-4.266667 6.4-6.4 14.933333-6.4h85.333333v-341.333334h-85.333333c-8.533333 0-12.8-2.133333-14.933333-6.4-2.133333-4.266667 0-8.533333 6.4-14.933333l130.133333-140.8c4.266667-6.4 12.8-8.533333 19.2-8.533333s14.933333 2.133333 19.2 8.533333z\"></path></svg>"];
+var _tmpl$ = /*#__PURE__*/template(`<svg viewBox="0 0 1024 1024"xmlns=http://www.w3.org/2000/svg><path fill=black stroke=white stroke-width=50 d="M531.2 179.2l130.133333 140.8c4.266667 4.266667 6.4 10.666667 6.4 14.933333-2.133333 4.266667-6.4 6.4-14.933333 6.4h-85.333333v341.333334h85.333333c8.533333 0 12.8 2.133333 14.933333 6.4 2.133333 4.266667 0 8.533333-6.4 14.933333l-130.133333 140.8c-4.266667 6.4-12.8 8.533333-19.2 8.533333s-14.933333-2.133333-19.2-8.533333l-130.133333-140.8c-4.266667-4.266667-6.4-10.666667-6.4-14.933333 2.133333-4.266667 6.4-6.4 14.933333-6.4h85.333333v-341.333334h-85.333333c-8.533333 0-12.8-2.133333-14.933333-6.4-2.133333-4.266667 0-8.533333 6.4-14.933333l130.133333-140.8c4.266667-6.4 12.8-8.533333 19.2-8.533333s14.933333 2.133333 19.2 8.533333z">`);
 const Resize = props => {
-  return ssr(_tmpl$, ssrHydrationKey(), ssrAttribute("class", escape(props.class, true), false), ssrStyle({
-    ...commonStyle,
-    ...props.style
-  }));
+  return (() => {
+    var _el$ = _tmpl$();
+    effect(_p$ => {
+      var _v$ = props.class,
+        _v$2 = {
+          ...commonStyle,
+          ...props.style
+        };
+      _v$ !== _p$.e && setAttribute(_el$, "class", _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$;
+  })();
 };
 
 export { Resize as default };

package/es/assets/svg/Rotate.js

@@ -1,19 +1,20 @@
-import { ssrElement, mergeProps, ssr } from 'solid-js/web';
+import { spread, mergeProps, template } from 'solid-js/web';
 import { commonStyle } from './common.js';
 
-var _tmpl$ = "<g><path data-follow-fill=\"currentColor\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.55 27c7.269 0 13.161-5.893 13.161-13.162C26.711 6.569 20.82.677 13.55.677 6.281.677.389 6.569.389 13.838c0 7.269 5.892 13.161 13.161 13.161Zm8.062-10.286 2.062-2.872c.409-.556.22-1.08-.45-1.08h-1.17c-.508-4.132-4.116-7.479-8.502-7.479-2.324 0-4.443.99-5.932 2.52-.467.426-.467 1.015-.131 1.367.343.376.9.442 1.415 0a6.48 6.48 0 0 1 4.648-1.964c3.371 0 6.071 2.455 6.562 5.556h-1.276c-.655 0-.851.524-.45 1.08l2.07 2.872c.32.45.826.45 1.154 0Zm-8.061 5.678c2.34 0 4.459-.99 5.948-2.52.459-.434.459-1.023.131-1.375-.352-.376-.9-.433-1.424.008a6.457 6.457 0 0 1-4.655 1.964 6.61 6.61 0 0 1-6.555-5.556h1.26c.663 0 .851-.523.45-1.072l-2.062-2.88c-.327-.45-.834-.45-1.153 0l-2.07 2.872c-.401.557-.221 1.08.45 1.08h1.186c.507 4.133 4.116 7.48 8.494 7.48Z\" fill=\"currentColor\"></path></g>";
+var _tmpl$ = /*#__PURE__*/template(`<svg viewBox="0 0 27 27"xmlns=http://www.w3.org/2000/svg><g><path data-follow-fill=currentColor fill-rule=evenodd clip-rule=evenodd d="M13.55 27c7.269 0 13.161-5.893 13.161-13.162C26.711 6.569 20.82.677 13.55.677 6.281.677.389 6.569.389 13.838c0 7.269 5.892 13.161 13.161 13.161Zm8.062-10.286 2.062-2.872c.409-.556.22-1.08-.45-1.08h-1.17c-.508-4.132-4.116-7.479-8.502-7.479-2.324 0-4.443.99-5.932 2.52-.467.426-.467 1.015-.131 1.367.343.376.9.442 1.415 0a6.48 6.48 0 0 1 4.648-1.964c3.371 0 6.071 2.455 6.562 5.556h-1.276c-.655 0-.851.524-.45 1.08l2.07 2.872c.32.45.826.45 1.154 0Zm-8.061 5.678c2.34 0 4.459-.99 5.948-2.52.459-.434.459-1.023.131-1.375-.352-.376-.9-.433-1.424.008a6.457 6.457 0 0 1-4.655 1.964 6.61 6.61 0 0 1-6.555-5.556h1.26c.663 0 .851-.523.45-1.072l-2.062-2.88c-.327-.45-.834-.45-1.153 0l-2.07 2.872c-.401.557-.221 1.08.45 1.08h1.186c.507 4.133 4.116 7.48 8.494 7.48Z"fill=currentColor>`);
 const Rotate = props => {
-  return ssrElement("svg", mergeProps({
-    viewBox: "0 0 27 27",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props, {
-    get style() {
-      return {
-        ...commonStyle,
-        ...props.style
-      };
-    }
-  }), () => ssr(_tmpl$), true);
+  return (() => {
+    var _el$ = _tmpl$();
+    spread(_el$, mergeProps(props, {
+      get style() {
+        return {
+          ...commonStyle,
+          ...props.style
+        };
+      }
+    }), true, true);
+    return _el$;
+  })();
 };
 
 export { Rotate as default };

package/es/assets/svg/RotateArrow.js

@@ -1,26 +1,21 @@
-import { ssrElement, mergeProps, ssr, escape } from 'solid-js/web';
+import { spread, mergeProps, template } from 'solid-js/web';
 import { commonStyle } from './common.js';
 
-var _tmpl$ = ["<path fill=\"black\" stroke-width=\"50\" stroke=\"white\" d=\"", "\"></path>"];
+var _tmpl$ = /*#__PURE__*/template(`<svg viewBox="0 0 1000 1000"xmlns=http://www.w3.org/2000/svg><path fill=black stroke-width=50 stroke=white d="M 100,700 l 210,-150 v 105 Q 700,700 655,310 h -105 L 700,100 l 150,210 h -105 Q 745,745 310,745 v 105 L 100,700">`);
 const RotateArrowSvg = props => {
-  const startX = 100;
-  const startY = 700;
-  const arrowWidth = 300;
-  const halfArrowWidth = arrowWidth / 2;
-  const arrowLength = arrowWidth * 0.7;
-  const curveWidth = arrowWidth * 0.3;
-  const halfCurveWidth = curveWidth / 2;
-  return ssrElement("svg", mergeProps({
-    viewBox: "0 0 1000 1000",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props, {
-    get style() {
-      return {
-        ...commonStyle,
-        ...props.style
-      };
-    }
-  }), () => ssr(_tmpl$, `M ${escape(startX, true)},${escape(startY, true)} l ${escape(arrowLength, true)},${-halfArrowWidth} v ${escape(halfArrowWidth, true) - escape(halfCurveWidth, true)} Q ${escape(startY, true)},${escape(startY, true)} ${escape(startY, true) - escape(halfCurveWidth, true)},${escape(startX, true) + escape(arrowLength, true)} h ${escape(halfCurveWidth, true) - escape(halfArrowWidth, true)} L ${escape(startY, true)},${escape(startX, true)} l ${escape(halfArrowWidth, true)},${escape(arrowLength, true)} h ${escape(halfCurveWidth, true) - escape(halfArrowWidth, true)} Q ${escape(startY, true) + escape(halfCurveWidth, true)},${escape(startY, true) + escape(halfCurveWidth, true)} ${escape(startX, true) + escape(arrowLength, true)},${escape(startY, true) + escape(halfCurveWidth, true)} v ${escape(halfArrowWidth, true) - escape(halfCurveWidth, true)} L ${escape(startX, true)},${escape(startY, true)}`), true);
+  return (() => {
+    var _el$ = _tmpl$();
+      _el$.firstChild;
+    spread(_el$, mergeProps(props, {
+      get style() {
+        return {
+          ...commonStyle,
+          ...props.style
+        };
+      }
+    }), true, true);
+    return _el$;
+  })();
 };
 
 export { RotateArrowSvg as default };

package/es/hooks/useClickAway.js

@@ -1,4 +1,4 @@
-import { onMount, onCleanup } from 'solid-js';
+import { onCleanup } from 'solid-js';
 import { compact } from 'lodash-es';
 import { toArray } from '../utils/array.js';
 
@@ -9,11 +9,9 @@ function useClickAway(onClickAway, target) {
       onClickAway(event);
     }
   };
-  onMount(() => {
-    window.addEventListener('click', onClick);
-    onCleanup(() => {
-      window.removeEventListener('click', onClick);
-    });
+  window.addEventListener('click', onClick);
+  onCleanup(() => {
+    window.removeEventListener('click', onClick);
   });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-solid",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "",
   "main": "dist/index.esm.js",
   "module": "es/index.js",
@@ -23,7 +23,7 @@
     "@unocss/reset": "^0.57.1",
     "@unocss/transformer-variant-group": "^0.51.6",
     "@unocss/vite": "^0.51.6",
-    "babel-preset-solid": "^1.9.6",
+    "babel-preset-solid": "^1.7.3",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-standard-with-typescript": "^43.0.0",

package/es/utils/DOMRect.d.ts

@@ -1,22 +0,0 @@
-export declare class DOMRect {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    constructor(x?: number, y?: number, width?: number, height?: number);
-    static fromRect(otherRect: DOMRect): DOMRect;
-    get top(): number;
-    get left(): number;
-    get right(): number;
-    get bottom(): number;
-    toJSON(): {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-        top: number;
-        left: number;
-        right: number;
-        bottom: number;
-    };
-}

package/es/utils/DOMRect.js

@@ -1,41 +0,0 @@
-class DOMRect {
-  x;
-  y;
-  width;
-  height;
-  constructor(x = 0, y = 0, width = 0, height = 0) {
-    this.x = x;
-    this.y = y;
-    this.width = width;
-    this.height = height;
-  }
-  static fromRect(otherRect) {
-    return new DOMRect(otherRect.x, otherRect.y, otherRect.width, otherRect.height);
-  }
-  get top() {
-    return this.y;
-  }
-  get left() {
-    return this.x;
-  }
-  get right() {
-    return this.x + this.width;
-  }
-  get bottom() {
-    return this.y + this.height;
-  }
-  toJSON() {
-    return {
-      x: this.x,
-      y: this.y,
-      width: this.width,
-      height: this.height,
-      top: this.top,
-      left: this.left,
-      right: this.right,
-      bottom: this.bottom
-    };
-  }
-}
-
-export { DOMRect };