antd-solid 0.0.20 → 0.0.22

package/es/ColorPicker/ColorPickerInput.js

@@ -1,4 +1,4 @@
-import { ssr, ssrHydrationKey, escape, createComponent } from 'solid-js/web';
+import { insert, createComponent, template } 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$ = ["<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>"];
+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]>#`);
 const ColorPickerInput = () => {
   const context = useContext(ColorPickerContext);
   const color = createMemo(() => context?.color() ?? new Color());
@@ -17,212 +17,226 @@ const ColorPickerInput = () => {
   createRenderEffect(() => {
     setHexInputValue(color().toHex());
   });
-  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)'
-          };
-        }
-      });
-    }
-  })));
+  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$;
+  })();
 };
 const InputNumberStyle = {
   width: '43px',

package/es/ColorPicker/ColorPickerSelect.js

@@ -1,14 +1,71 @@
-import { ssr, ssrHydrationKey, escape } from 'solid-js/web';
+import { delegateEvents, effect, template, use } from 'solid-js/web';
 import { useContext, createMemo } from 'solid-js';
-import 'lodash-es';
+import { clamp } from 'lodash-es';
 import ColorPickerContext from './context.js';
 import Color from './color.js';
+import { setupGlobalDrag } from '../utils/setupGlobalDrag.js';
 
-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>"];
+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">`);
 const ColorPickerSelect = () => {
+  let ref;
   const context = useContext(ColorPickerContext);
   const color = createMemo(() => context?.color() ?? new Color());
-  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)"));
+  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$;
+  })();
 };
+delegateEvents(["click", "mousedown"]);
 
 export { ColorPickerSelect as default };