antd-solid 0.0.17 → 0.0.18

package/es/ColorPicker/ColorPickerInput.js

@@ -1,4 +1,4 @@
-import { insert, createComponent, template } from 'solid-js/web';
+import { ssr, ssrHydrationKey, escape, createComponent } from 'solid-js/web';
 import { useContext, createMemo, createSignal, createRenderEffect, Switch, Match, Show } from 'solid-js';
 import ColorPickerContext from './context.js';
 import Select from '../Select/index.js';
@@ -6,9 +6,9 @@ import Input from '../Input/index.js';
 import InputNumber from '../InputNumber/index.js';
 import Color from './color.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<div class="flex grow-1 gap-[var(--ant-margin-xxs)]">`),
-  _tmpl$2 = /*#__PURE__*/template(`<div class=flex>`),
-  _tmpl$3 = /*#__PURE__*/template(`<span class=text-[--ant-color-text-placeholder]>#`);
+var _tmpl$ = ["<div", " class=\"flex grow-1 gap-[var(--ant-margin-xxs)]\"><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"],
+  _tmpl$2 = ["<div", " class=\"flex\"><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"],
+  _tmpl$3 = ["<span", " class=\"text-[--ant-color-text-placeholder]\">#</span>"];
 const ColorPickerInput = () => {
   const context = useContext(ColorPickerContext);
   const color = createMemo(() => context?.color() ?? new Color());
@@ -17,226 +17,212 @@ const ColorPickerInput = () => {
   createRenderEffect(() => {
     setHexInputValue(color().toHex());
   });
-  return (() => {
-    var _el$ = _tmpl$2();
-    insert(_el$, createComponent(Select, {
-      get value() {
-        return type();
-      },
-      onChange: setType,
-      options: [{
-        label: 'HEX',
-        value: 'HEX'
-      }, {
-        label: 'HSV',
-        value: 'HSV'
-      }, {
-        label: 'RGB',
-        value: 'RGB'
-      }],
-      size: "small",
-      variant: "borderless",
-      style: {
-        'margin-right': 'var(--ant-margin-xs)',
-        '--ant-select-font-size': '12px',
-        '--ant-select-input-padding': '0',
-        '--ant-select-input-addon-after-padding': '0 0 0 var(--ant-padding-xxs)',
-        '--ant-select-popup-match-width': '60px'
-      }
-    }), null);
-    insert(_el$, createComponent(Switch, {
-      get children() {
-        return [createComponent(Match, {
-          get when() {
-            return type() === 'HEX';
-          },
-          get children() {
-            return createComponent(Input, {
-              size: "small",
-              get value() {
-                return hexInputValue();
-              },
-              onChange: e => {
-                const value = e.target.value.replace(/[^a-zA-Z0-9]/g, '');
-                if (value.length > 6) return;
-                setHexInputValue(value);
-                if (value.length !== 6) return;
-                const c = new Color(value);
-                if (!c.isValid) return;
-                context?.setColor(new Color(value).setAlpha(color().a));
-              },
-              onBlur: () => {
-                setHexInputValue(color().toHex());
-                context?.setColor(color(), true);
-              },
-              get prefix() {
-                return _tmpl$3();
-              },
-              style: {
-                '--ant-input-font-size': '12px'
-              }
-            });
-          }
-        }), createComponent(Match, {
-          get when() {
-            return type() === 'HSV';
-          },
-          get children() {
-            var _el$2 = _tmpl$();
-            insert(_el$2, createComponent(InputNumber, {
-              size: "small",
-              get value() {
-                return Math.round(color().toHsv().h);
-              },
-              onChange: value => {
-                const hsv = color().toHsv();
-                hsv.h = value ?? 0;
-                context?.setColor(new Color(hsv));
-              },
-              onBlur: () => {
-                context?.setColor(color(), true);
-              },
-              min: 0,
-              max: 359,
-              precision: 0,
-              style: InputNumberStyle
-            }), null);
-            insert(_el$2, createComponent(InputNumber, {
-              size: "small",
-              get value() {
-                return Math.round(color().toHsv().s * 100);
-              },
-              onChange: value => {
-                const hsv = color().toHsv();
-                hsv.s = (value ?? 0) / 100;
-                context?.setColor(new Color(hsv));
-              },
-              onBlur: () => {
-                context?.setColor(color(), true);
-              },
-              min: 0,
-              max: 100,
-              precision: 0,
-              formatter: value => `${value || 0}%`,
-              style: InputNumberStyle
-            }), null);
-            insert(_el$2, createComponent(InputNumber, {
-              size: "small",
-              get value() {
-                return Math.round(color().toHsv().v * 100);
-              },
-              onChange: value => {
-                const hsv = color().toHsv();
-                hsv.v = (value ?? 0) / 100;
-                context?.setColor(new Color(hsv));
-              },
-              onBlur: () => {
-                context?.setColor(color(), true);
-              },
-              min: 0,
-              max: 100,
-              precision: 0,
-              formatter: value => `${value || 0}%`,
-              style: InputNumberStyle
-            }), null);
-            return _el$2;
-          }
-        }), createComponent(Match, {
-          get when() {
-            return type() === 'RGB';
-          },
-          get children() {
-            var _el$3 = _tmpl$();
-            insert(_el$3, createComponent(InputNumber, {
-              size: "small",
-              get value() {
-                return Math.round(color().r);
-              },
-              onChange: value => {
-                const rgb = color().toRgb();
-                rgb.r = value ?? 0;
-                context?.setColor(new Color(rgb));
-              },
-              onBlur: () => {
-                context?.setColor(color(), true);
-              },
-              min: 0,
-              max: 255,
-              precision: 0,
-              style: InputNumberStyle
-            }), null);
-            insert(_el$3, createComponent(InputNumber, {
-              size: "small",
-              get value() {
-                return Math.round(color().g);
-              },
-              onChange: value => {
-                const rgb = color().toRgb();
-                rgb.g = value ?? 0;
-                context?.setColor(new Color(rgb));
-              },
-              onBlur: () => {
-                context?.setColor(color(), true);
-              },
-              min: 0,
-              max: 255,
-              precision: 0,
-              style: InputNumberStyle
-            }), null);
-            insert(_el$3, createComponent(InputNumber, {
-              size: "small",
-              get value() {
-                return Math.round(color().b);
-              },
-              onChange: value => {
-                const rgb = color().toRgb();
-                rgb.b = value ?? 0;
-                context?.setColor(new Color(rgb));
-              },
-              onBlur: () => {
-                context?.setColor(color(), true);
-              },
-              min: 0,
-              max: 255,
-              precision: 0,
-              style: InputNumberStyle
-            }), null);
-            return _el$3;
-          }
-        })];
-      }
-    }), null);
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return !context?.disabledAlpha();
-      },
-      get children() {
-        return createComponent(InputNumber, {
-          get value() {
-            return Math.round(color().a * 100);
-          },
-          onChange: value => {
-            context?.setColor(color().clone().setAlpha((value ?? 0) / 100));
-          },
-          onBlur: () => {
-            context?.setColor(color(), true);
-          },
-          size: "small",
-          min: 0,
-          max: 100,
-          precision: 0,
-          formatter: value => `${value || 0}%`,
-          get style() {
-            return {
-              ...InputNumberStyle,
-              'margin-left': 'var(--ant-margin-xxs)'
-            };
-          }
-        });
-      }
-    }), null);
-    return _el$;
-  })();
+  return ssr(_tmpl$2, ssrHydrationKey(), escape(createComponent(Select, {
+    get value() {
+      return type();
+    },
+    onChange: setType,
+    options: [{
+      label: 'HEX',
+      value: 'HEX'
+    }, {
+      label: 'HSV',
+      value: 'HSV'
+    }, {
+      label: 'RGB',
+      value: 'RGB'
+    }],
+    size: "small",
+    variant: "borderless",
+    style: {
+      'margin-right': 'var(--ant-margin-xs)',
+      '--ant-select-font-size': '12px',
+      '--ant-select-input-padding': '0',
+      '--ant-select-input-addon-after-padding': '0 0 0 var(--ant-padding-xxs)',
+      '--ant-select-popup-match-width': '60px'
+    }
+  })), escape(createComponent(Switch, {
+    get children() {
+      return [createComponent(Match, {
+        get when() {
+          return type() === 'HEX';
+        },
+        get children() {
+          return createComponent(Input, {
+            size: "small",
+            get value() {
+              return hexInputValue();
+            },
+            onChange: e => {
+              const value = e.target.value.replace(/[^a-zA-Z0-9]/g, '');
+              if (value.length > 6) return;
+              setHexInputValue(value);
+              if (value.length !== 6) return;
+              const c = new Color(value);
+              if (!c.isValid) return;
+              context?.setColor(new Color(value).setAlpha(color().a));
+            },
+            onBlur: () => {
+              setHexInputValue(color().toHex());
+              context?.setColor(color(), true);
+            },
+            get prefix() {
+              return ssr(_tmpl$3, ssrHydrationKey());
+            },
+            style: {
+              '--ant-input-font-size': '12px'
+            }
+          });
+        }
+      }), createComponent(Match, {
+        get when() {
+          return type() === 'HSV';
+        },
+        get children() {
+          return ssr(_tmpl$, ssrHydrationKey(), escape(createComponent(InputNumber, {
+            size: "small",
+            get value() {
+              return Math.round(color().toHsv().h);
+            },
+            onChange: value => {
+              const hsv = color().toHsv();
+              hsv.h = value ?? 0;
+              context?.setColor(new Color(hsv));
+            },
+            onBlur: () => {
+              context?.setColor(color(), true);
+            },
+            min: 0,
+            max: 359,
+            precision: 0,
+            style: InputNumberStyle
+          })), escape(createComponent(InputNumber, {
+            size: "small",
+            get value() {
+              return Math.round(color().toHsv().s * 100);
+            },
+            onChange: value => {
+              const hsv = color().toHsv();
+              hsv.s = (value ?? 0) / 100;
+              context?.setColor(new Color(hsv));
+            },
+            onBlur: () => {
+              context?.setColor(color(), true);
+            },
+            min: 0,
+            max: 100,
+            precision: 0,
+            formatter: value => `${value || 0}%`,
+            style: InputNumberStyle
+          })), escape(createComponent(InputNumber, {
+            size: "small",
+            get value() {
+              return Math.round(color().toHsv().v * 100);
+            },
+            onChange: value => {
+              const hsv = color().toHsv();
+              hsv.v = (value ?? 0) / 100;
+              context?.setColor(new Color(hsv));
+            },
+            onBlur: () => {
+              context?.setColor(color(), true);
+            },
+            min: 0,
+            max: 100,
+            precision: 0,
+            formatter: value => `${value || 0}%`,
+            style: InputNumberStyle
+          })));
+        }
+      }), createComponent(Match, {
+        get when() {
+          return type() === 'RGB';
+        },
+        get children() {
+          return ssr(_tmpl$, ssrHydrationKey(), escape(createComponent(InputNumber, {
+            size: "small",
+            get value() {
+              return Math.round(color().r);
+            },
+            onChange: value => {
+              const rgb = color().toRgb();
+              rgb.r = value ?? 0;
+              context?.setColor(new Color(rgb));
+            },
+            onBlur: () => {
+              context?.setColor(color(), true);
+            },
+            min: 0,
+            max: 255,
+            precision: 0,
+            style: InputNumberStyle
+          })), escape(createComponent(InputNumber, {
+            size: "small",
+            get value() {
+              return Math.round(color().g);
+            },
+            onChange: value => {
+              const rgb = color().toRgb();
+              rgb.g = value ?? 0;
+              context?.setColor(new Color(rgb));
+            },
+            onBlur: () => {
+              context?.setColor(color(), true);
+            },
+            min: 0,
+            max: 255,
+            precision: 0,
+            style: InputNumberStyle
+          })), escape(createComponent(InputNumber, {
+            size: "small",
+            get value() {
+              return Math.round(color().b);
+            },
+            onChange: value => {
+              const rgb = color().toRgb();
+              rgb.b = value ?? 0;
+              context?.setColor(new Color(rgb));
+            },
+            onBlur: () => {
+              context?.setColor(color(), true);
+            },
+            min: 0,
+            max: 255,
+            precision: 0,
+            style: InputNumberStyle
+          })));
+        }
+      })];
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return !context?.disabledAlpha();
+    },
+    get children() {
+      return createComponent(InputNumber, {
+        get value() {
+          return Math.round(color().a * 100);
+        },
+        onChange: value => {
+          context?.setColor(color().clone().setAlpha((value ?? 0) / 100));
+        },
+        onBlur: () => {
+          context?.setColor(color(), true);
+        },
+        size: "small",
+        min: 0,
+        max: 100,
+        precision: 0,
+        formatter: value => `${value || 0}%`,
+        get style() {
+          return {
+            ...InputNumberStyle,
+            'margin-left': 'var(--ant-margin-xxs)'
+          };
+        }
+      });
+    }
+  })));
 };
 const InputNumberStyle = {
   width: '43px',

package/es/ColorPicker/ColorPickerSelect.js

@@ -1,71 +1,14 @@
-import { delegateEvents, effect, template, use } from 'solid-js/web';
+import { ssr, ssrHydrationKey, escape } from 'solid-js/web';
 import { useContext, createMemo } from 'solid-js';
-import { clamp } from 'lodash-es';
+import 'lodash-es';
 import ColorPickerContext from './context.js';
 import Color from './color.js';
-import { setupGlobalDrag } from '../utils/setupGlobalDrag.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<div class="h-160px rounded-[--ant-border-radius-sm] cursor-pointer relative overflow-hidden"><div class="absolute border-2px border-solid border-[--ant-color-bg-container] rounded-1/2 w-16px h-16px -translate-1/2">`);
+var _tmpl$ = ["<div", " class=\"h-160px rounded-[--ant-border-radius-sm] cursor-pointer relative overflow-hidden\" style=\"", "\"><div class=\"absolute border-2px border-solid border-[--ant-color-bg-container] rounded-1/2 w-16px h-16px -translate-1/2\" style=\"", "\"></div></div>"];
 const ColorPickerSelect = () => {
-  let ref;
   const context = useContext(ColorPickerContext);
   const color = createMemo(() => context?.color() ?? new Color());
-  const setColor = (e, completed) => {
-    if (!ref) return;
-    const rect = ref.getBoundingClientRect();
-    const offsetX = e.clientX - rect.x;
-    const offsetY = e.clientY - rect.y;
-    const {
-      clientWidth,
-      clientHeight
-    } = ref;
-    const hsv = color().toHsv();
-    hsv.s = clamp(offsetX / clientWidth, 0, 1);
-    hsv.v = clamp(1 - offsetY / clientHeight, 0, 1);
-    context?.setColor(new Color(hsv), completed);
-  };
-  return (() => {
-    var _el$ = _tmpl$(),
-      _el$2 = _el$.firstChild;
-    _el$.$$click = e => {
-      setColor(e, true);
-    };
-    var _ref$ = ref;
-    typeof _ref$ === "function" ? use(_ref$, _el$) : ref = _el$;
-    _el$.style.setProperty("background-image", "linear-gradient(0deg, rgb(0, 0, 0), transparent), linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0))");
-    _el$2.$$mousedown = () => {
-      let isDrag = false;
-      setupGlobalDrag(
-      // eslint-disable-next-line solid/reactivity
-      e => {
-        setColor(e);
-        isDrag = true;
-      },
-      // eslint-disable-next-line solid/reactivity
-      () => {
-        if (isDrag) context?.setColor(color(), true);
-      });
-    };
-    _el$2.style.setProperty("box-shadow", "inset 0 0 1px 0 var(--ant-color-text-quaternary), 0 0 0 1px var(--ant-color-fill-secondary)");
-    effect(_p$ => {
-      var _v$ = color().toHueRgbString(),
-        _v$2 = `${color().toHsv().s * 100}%`,
-        _v$3 = `${(1 - color().toHsv().v) * 100}%`,
-        _v$4 = color().toRgbString();
-      _v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$.style.setProperty("background-color", _v$) : _el$.style.removeProperty("background-color"));
-      _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$2.style.setProperty("left", _v$2) : _el$2.style.removeProperty("left"));
-      _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$2.style.setProperty("top", _v$3) : _el$2.style.removeProperty("top"));
-      _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$2.style.setProperty("background", _v$4) : _el$2.style.removeProperty("background"));
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined,
-      a: undefined,
-      o: undefined
-    });
-    return _el$;
-  })();
+  return ssr(_tmpl$, ssrHydrationKey(), "background-color:" + escape(color().toHueRgbString(), true) + (";background-image:" + "linear-gradient(0deg, rgb(0, 0, 0), transparent), linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0))"), "left:" + `${escape(color().toHsv().s, true) * 100}%` + (";top:" + `${(1 - escape(color().toHsv().v, true)) * 100}%`) + (";background:" + escape(color().toRgbString(), true)) + (";box-shadow:" + "inset 0 0 1px 0 var(--ant-color-text-quaternary), 0 0 0 1px var(--ant-color-fill-secondary)"));
 };
-delegateEvents(["click", "mousedown"]);
 
 export { ColorPickerSelect as default };