@havue/components 1.1.1 → 1.2.0

package/dist/components.full.js

@@ -1,5 +1,5 @@
-(function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue")) : typeof define === "function" && define.amd ? define(["exports", "vue"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.components = {}, global.Vue));
+(function(global2, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue")) : typeof define === "function" && define.amd ? define(["exports", "vue"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2.components = {}, global2.Vue));
 })(this, function(exports2, vue) {
   "use strict";var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -13,6 +13,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     };
     return main;
   };
+  var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
   function getDefaultExportFromCjs(x) {
     return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
   }
@@ -197,10 +198,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   var simpleSwizzleExports = simpleSwizzle.exports;
   var colorNames = colorName;
   var swizzle = simpleSwizzleExports;
-  var hasOwnProperty = Object.hasOwnProperty;
+  var hasOwnProperty$1 = Object.hasOwnProperty;
   var reverseNames = /* @__PURE__ */ Object.create(null);
   for (var name in colorNames) {
-    if (hasOwnProperty.call(colorNames, name)) {
+    if (hasOwnProperty$1.call(colorNames, name)) {
       reverseNames[colorNames[name]] = name;
     }
   }
@@ -289,7 +290,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       if (match[1] === "transparent") {
         return [0, 0, 0, 0];
       }
-      if (!hasOwnProperty.call(colorNames, match[1])) {
+      if (!hasOwnProperty$1.call(colorNames, match[1])) {
         return null;
       }
       rgb = colorNames[match[1]];
@@ -1619,7 +1620,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const secondColor = colorItems[1];
       const curColorType = maxColor.type + secondColor.type;
       let coordinateX = 0;
-      let coordinateY = colorItems[2].value;
+      const coordinateY = colorItems[2].value;
       if (curColorType === "rg" || curColorType === "gr") {
         coordinateX = 255;
         if (secondColor.type === "r") {
@@ -1656,8 +1657,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       const scaleX = canvasWidth / width;
       const scaleY = canvasHeight / height;
-      x = Math.min(x * scaleX, canvasWidth - 1);
-      y = Math.min(y * scaleY, canvasHeight - 1);
+      x = Math.round(Math.min(x * scaleX, canvasWidth - 1));
+      y = Math.round(Math.min(y * scaleY, canvasHeight - 1));
       const color2 = getBaseColorFromCoodinage(x, y);
       return color2;
     }
@@ -1715,7 +1716,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       getColorByCoordinate
     };
   }
-  function throttle(fn, time = 200) {
+  function throttle$2(fn, time = 200) {
     let timer = null;
     return function(...args) {
       const ctx = this;
@@ -1729,46 +1730,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     };
   }
-  class EventBus {
-    constructor() {
-      __publicField(this, "_eventMap");
-      this._eventMap = /* @__PURE__ */ new Map();
-    }
-    on(key, handler) {
-      const handlers = this._eventMap.get(key);
-      if (handlers) {
-        handlers.add(handler);
-      } else {
-        const set = /* @__PURE__ */ new Set();
-        set.add(handler);
-        this._eventMap.set(key, set);
-      }
-    }
-    off(key, handler) {
-      const handlers = this._eventMap.get(key);
-      if (!handlers) return;
-      if (handler) {
-        handlers.delete(handler);
-      } else {
-        handlers.clear();
-      }
-    }
-    emit(key, ...payload) {
-      const handlers = this._eventMap.get(key);
-      if (!handlers) return;
-      for (const callback of handlers.values()) {
-        callback(...payload);
-      }
-    }
-  }
-  const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-  function useOperateEvent() {
+  function useOperateEvent(options) {
     const colorAreaRef = vue.ref();
     const circlePickerCoordinate = vue.reactive({
       x: 0,
       y: 0
     });
+    const isDisabled = vue.computed(() => {
+      return vue.isRef(options.disabled) ? options.disabled.value : options.disabled;
+    });
     function handleTouchStart(e) {
+      if (isDisabled.value) {
+        return;
+      }
       if (e.touches.length === 0) {
         return;
       }
@@ -1796,6 +1770,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       document.body.removeEventListener("touchend", handleTouchEnd);
     }
     function handleMounseDown(e) {
+      if (isDisabled.value) {
+        return;
+      }
       document.body.addEventListener("mousemove", handleMouseMove);
       document.body.addEventListener("mouseup", handleMouseUp);
       handleCirclePickerCoordinateChange({
@@ -1804,14 +1781,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       });
     }
     function handleMouseMove(e) {
+      if (!(e.buttons && 1)) {
+        handleMouseUp();
+        return;
+      }
       handleCirclePickerCoordinateChange({
         x: e.clientX,
         y: e.clientY
       });
     }
-    const handleCirclePickerCoordinateChange = throttle(handleCirclePickerCoordinateChangeFn, 20);
+    const handleCirclePickerCoordinateChange = throttle$2(handleCirclePickerCoordinateChangeFn, 20);
     function handleCirclePickerCoordinateChangeFn(point) {
       var _a;
+      if (isDisabled.value) {
+        return;
+      }
       const { x: clientX, y: clientY } = point;
       const colorAreaRect = (_a = colorAreaRef.value) == null ? void 0 : _a.getBoundingClientRect();
       if (!colorAreaRect) {
@@ -1834,8 +1818,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       } else {
         y = clientY - top;
       }
-      circlePickerCoordinate.x = Math.round(x);
-      circlePickerCoordinate.y = Math.round(y);
+      circlePickerCoordinate.x = x;
+      circlePickerCoordinate.y = y;
     }
     function handleMouseUp() {
       document.body.removeEventListener("mousemove", handleMouseMove);
@@ -1855,23 +1839,17 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
     vue.onMounted(() => {
       var _a, _b;
-      if (isMobile) {
-        (_a = colorAreaRef.value) == null ? void 0 : _a.addEventListener("touchstart", handleTouchStart);
-      } else {
-        (_b = colorAreaRef.value) == null ? void 0 : _b.addEventListener("mousedown", handleMounseDown);
-      }
+      (_a = colorAreaRef.value) == null ? void 0 : _a.addEventListener("touchstart", handleTouchStart);
+      (_b = colorAreaRef.value) == null ? void 0 : _b.addEventListener("mousedown", handleMounseDown);
     });
     vue.onBeforeUnmount(() => {
       var _a, _b;
-      if (isMobile) {
-        (_a = colorAreaRef.value) == null ? void 0 : _a.removeEventListener("touchstart", handleTouchStart);
-        document.body.removeEventListener("touchmove", handleTouchMove);
-        document.body.removeEventListener("touchend", handleTouchEnd);
-      } else {
-        (_b = colorAreaRef.value) == null ? void 0 : _b.removeEventListener("mousedown", handleMounseDown);
-        document.body.removeEventListener("mousemove", handleMouseMove);
-        document.body.removeEventListener("mouseup", handleMouseUp);
-      }
+      (_a = colorAreaRef.value) == null ? void 0 : _a.removeEventListener("touchstart", handleTouchStart);
+      document.body.removeEventListener("touchmove", handleTouchMove);
+      document.body.removeEventListener("touchend", handleTouchEnd);
+      (_b = colorAreaRef.value) == null ? void 0 : _b.removeEventListener("mousedown", handleMounseDown);
+      document.body.removeEventListener("mousemove", handleMouseMove);
+      document.body.removeEventListener("mouseup", handleMouseUp);
     });
     return {
       colorAreaRef,
@@ -1879,26 +1857,27 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       setCirclePickerCoordinate
     };
   }
-  const _hoisted_1$3 = { class: "hv-color-picker__color-form" };
-  const _hoisted_2$2 = { class: "mb-12" };
-  const _hoisted_3$2 = { class: "hv-color-picker__form-group mb-12" };
-  const _hoisted_4$2 = { class: "hv-color-picker__form-group mb-12" };
-  const DEFAULT_COLOR$1 = "#ffffff";
-  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+  const DEFAULT_COLOR = "#FFFFFF";
+  const _hoisted_1$7 = { class: "hv-color-picker__color-form" };
+  const _hoisted_2$6 = { class: "mb-12" };
+  const _hoisted_3$5 = { class: "hv-color-picker__form-group mb-12" };
+  const _hoisted_4$3 = { class: "hv-color-picker__form-group mb-12" };
+  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     __name: "ColorForm",
     props: {
-      modelValue: {}
+      modelValue: {},
+      disabled: { type: Boolean }
     },
     emits: ["change"],
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emits = __emit;
-      const hexColor = vue.ref(Color$1(props.modelValue || DEFAULT_COLOR$1).hex());
+      const hexColor = vue.ref(Color$1(props.modelValue || DEFAULT_COLOR).hex());
       const formInputRGB = vue.reactive(
-        Color$1(hexColor.value || DEFAULT_COLOR$1).rgb().object()
+        Color$1(hexColor.value || DEFAULT_COLOR).rgb().object()
       );
       const formInputHSV = vue.reactive(
-        Color$1(hexColor.value || DEFAULT_COLOR$1).hsv().object()
+        Color$1(hexColor.value || DEFAULT_COLOR).hsv().object()
       );
       function hexFormater(value) {
         return `#${value.replace(/[^0-9A-F]/gi, "").slice(0, 6).toUpperCase()}`;
@@ -1942,89 +1921,897 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       return (_ctx, _cache) => {
         const _component_el_input = vue.resolveComponent("el-input");
         const _component_el_input_number = vue.resolveComponent("el-input-number");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
-          vue.createElementVNode("div", _hoisted_2$2, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
+          vue.createElementVNode("div", _hoisted_2$6, [
             vue.createVNode(_component_el_input, {
               modelValue: hexColor.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => hexColor.value = $event),
+              disabled: props.disabled,
               formatter: hexFormater,
               onChange: handleHexColorChange
-            }, null, 8, ["modelValue"])
+            }, null, 8, ["modelValue", "disabled"])
           ]),
-          vue.createElementVNode("div", _hoisted_3$2, [
+          vue.createElementVNode("div", _hoisted_3$5, [
             _cache[7] || (_cache[7] = vue.createElementVNode("div", { class: "hv-color-picker__form-label" }, "RGB", -1)),
             vue.createVNode(_component_el_input_number, {
               modelValue: formInputRGB.r,
               "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => formInputRGB.r = $event),
+              disabled: props.disabled,
               onChange: handleRgbColorChange,
               "step-strictly": "",
               min: 0,
               max: 255,
               step: 1,
               controls: false
-            }, null, 8, ["modelValue"]),
+            }, null, 8, ["modelValue", "disabled"]),
             vue.createVNode(_component_el_input_number, {
               modelValue: formInputRGB.g,
               "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => formInputRGB.g = $event),
+              disabled: props.disabled,
               onChange: handleRgbColorChange,
               "step-strictly": "",
               min: 0,
               max: 255,
               step: 1,
               controls: false
-            }, null, 8, ["modelValue"]),
+            }, null, 8, ["modelValue", "disabled"]),
             vue.createVNode(_component_el_input_number, {
               modelValue: formInputRGB.b,
               "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => formInputRGB.b = $event),
+              disabled: props.disabled,
               onChange: handleRgbColorChange,
               "step-strictly": "",
               min: 0,
               max: 255,
               step: 1,
               controls: false
-            }, null, 8, ["modelValue"])
-          ]),
-          vue.createElementVNode("div", _hoisted_4$2, [
-            _cache[8] || (_cache[8] = vue.createElementVNode("div", { class: "hv-color-picker__form-label" }, "HSV", -1)),
+            }, null, 8, ["modelValue", "disabled"])
+          ]),
+          vue.createElementVNode("div", _hoisted_4$3, [
+            _cache[8] || (_cache[8] = vue.createElementVNode("div", { class: "hv-color-picker__form-label" }, "HSV", -1)),
+            vue.createVNode(_component_el_input_number, {
+              modelValue: formInputHSV.h,
+              "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => formInputHSV.h = $event),
+              disabled: props.disabled,
+              onChange: handleHsvColorChange,
+              min: 0,
+              max: 360,
+              "step-strictly": "",
+              step: 1,
+              controls: false
+            }, null, 8, ["modelValue", "disabled"]),
+            vue.createVNode(_component_el_input_number, {
+              modelValue: formInputHSV.s,
+              "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => formInputHSV.s = $event),
+              disabled: props.disabled,
+              onChange: handleHsvColorChange,
+              min: 0,
+              max: 100,
+              "step-strictly": "",
+              step: 1,
+              controls: false
+            }, null, 8, ["modelValue", "disabled"]),
+            vue.createVNode(_component_el_input_number, {
+              modelValue: formInputHSV.v,
+              "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => formInputHSV.v = $event),
+              disabled: props.disabled,
+              onChange: handleHsvColorChange,
+              "step-strictly": "",
+              min: 0,
+              max: 100,
+              controls: false
+            }, null, 8, ["modelValue", "disabled"])
+          ])
+        ]);
+      };
+    }
+  });
+  const _hoisted_1$6 = { class: "hv-color-picker__preset" };
+  const _hoisted_2$5 = { class: "hv-color-picker__preset-title" };
+  const _hoisted_3$4 = { class: "hv-color-picker__preset-list" };
+  const _hoisted_4$2 = ["onClick"];
+  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+    __name: "PresetColors",
+    props: {
+      title: {},
+      presetColors: {}
+    },
+    emits: ["change"],
+    setup(__props, { emit: __emit }) {
+      const defaultPresetColors = [
+        "#000000",
+        "#FFFFFF",
+        "#E3822D",
+        "#DCE24F",
+        "#1DCF69",
+        "#6DE5B9",
+        "#11A1F2",
+        "#AA43FF",
+        "#F0689C",
+        "#F8D28B",
+        "#606368",
+        "#E83C34",
+        "#EEBE29",
+        "#89F0AC",
+        "#2FBC9E",
+        "#56CCF2",
+        "#1C1DFA",
+        "#DC88F5",
+        "#D4C595",
+        "#C52F65"
+      ];
+      const props = __props;
+      const preColors = vue.computed(() => {
+        return !props.presetColors ? defaultPresetColors : props.presetColors;
+      });
+      const emits = __emit;
+      function handleClickColor(color2) {
+        emits("change", color2);
+      }
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
+          vue.createElementVNode("div", _hoisted_2$5, vue.toDisplayString(props.title || "Preset colors"), 1),
+          vue.createElementVNode("div", _hoisted_3$4, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(preColors.value, (color2) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                class: "hv-color-picker__preset-list-item",
+                onClick: ($event) => handleClickColor(color2),
+                key: color2,
+                style: vue.normalizeStyle({ backgroundColor: color2 })
+              }, null, 12, _hoisted_4$2);
+            }), 128))
+          ])
+        ]);
+      };
+    }
+  });
+  const _hoisted_1$5 = { class: "hv-color-picker" };
+  const _hoisted_2$4 = { class: "hv-color-picker__title" };
+  const _hoisted_3$3 = { class: "hv-color-picker__area-outer" };
+  const _hoisted_4$1 = { class: "hv-color-picker__slider" };
+  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "HvColorPicker"
+    },
+    __name: "ColorPicker",
+    props: {
+      modelValue: { default: DEFAULT_COLOR },
+      disabled: { type: Boolean },
+      title: {},
+      presetTitle: {},
+      presetColors: {}
+    },
+    emits: ["update:model-value"],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emits = __emit;
+      const isDisabled = vue.computed(() => props.disabled);
+      const { colorAreaCanvas, getColorByCoordinate, getCoordinateByColor, canvasWidth, canvasHeight } = useColorArea();
+      const { colorAreaRef, circlePickerCoordinate, setCirclePickerCoordinate } = useOperateEvent({ disabled: isDisabled });
+      const color2 = vue.computed({
+        get() {
+          return props.modelValue;
+        },
+        set(value) {
+          emits("update:model-value", value);
+        }
+      });
+      const lightColor = vue.ref(Color$1(DEFAULT_COLOR));
+      const colorDepth = vue.ref(100);
+      const originHexColor = vue.computed(() => {
+        if (lightColor.value) {
+          const hex = getOriginHexByLightAndDepth(lightColor.value, colorDepth.value);
+          return hex;
+        }
+        return DEFAULT_COLOR;
+      });
+      vue.watch(color2, (val) => {
+        const hex = getOriginHexByLightAndDepth(lightColor.value, colorDepth.value);
+        if (hex === val) {
+          return;
+        }
+        handleColorChange(val);
+      });
+      vue.watch(
+        () => circlePickerCoordinate,
+        (coordianate) => {
+          var _a;
+          const rect = (_a = colorAreaRef.value) == null ? void 0 : _a.getBoundingClientRect();
+          if (!rect) {
+            return;
+          }
+          const color22 = getColorByCoordinate(coordianate.x, coordianate.y, rect.width, rect.height);
+          lightColor.value = color22;
+        },
+        {
+          deep: true
+        }
+      );
+      const cilcleStyle = vue.computed(() => {
+        if (!color2.value) {
+          return {
+            top: "100%",
+            left: "0",
+            backgroundColor: "#ffffff"
+          };
+        }
+        return {
+          top: circlePickerCoordinate.y + "px",
+          left: circlePickerCoordinate.x + "px",
+          backgroundColor: lightColor.value.hex()
+        };
+      });
+      const sliderBackStyle = vue.computed(() => {
+        const lightHex = colorToHex(lightColor.value);
+        return {
+          "--el-slider-runway-bg-color": `linear-gradient(to right, #000000, ${lightHex})`,
+          "--el-slider-main-bg-color": lightHex
+        };
+      });
+      vue.watch(
+        () => originHexColor.value,
+        (value, oldValue) => {
+          if (value !== oldValue) {
+            emits("update:model-value", value);
+            return;
+          }
+        }
+      );
+      function handleColorChange(hex) {
+        if (props.disabled) {
+          return;
+        }
+        const color22 = hexToColor(hex);
+        const { color: lightRgb, value: depth } = getLightColorAndDepth(color22);
+        lightColor.value = lightRgb;
+        colorDepth.value = depth;
+        const coordin = getCoordinateByColor(lightRgb);
+        setCirclePickerCoordinate(coordin.x, coordin.y, canvasWidth, canvasHeight);
+      }
+      vue.onMounted(() => {
+        handleColorChange(color2.value);
+      });
+      return (_ctx, _cache) => {
+        const _component_ElSlider = vue.resolveComponent("ElSlider");
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
+          vue.createElementVNode("div", _hoisted_2$4, vue.toDisplayString(props.title || "Color picker"), 1),
+          vue.createElementVNode("div", _hoisted_3$3, [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(["hv-color-picker__area", isDisabled.value ? "is-disabled" : ""]),
+              ref_key: "colorAreaRef",
+              ref: colorAreaRef
+            }, [
+              vue.createElementVNode("canvas", {
+                ref_key: "colorAreaCanvas",
+                ref: colorAreaCanvas
+              }, null, 512),
+              vue.createElementVNode("div", {
+                class: "hv-color-picker__circle",
+                style: vue.normalizeStyle(cilcleStyle.value)
+              }, null, 4)
+            ], 2)
+          ]),
+          vue.createElementVNode("div", _hoisted_4$1, [
+            vue.createVNode(_component_ElSlider, {
+              modelValue: colorDepth.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => colorDepth.value = $event),
+              disabled: props.disabled,
+              min: 0,
+              max: 100,
+              "show-tooltip": false,
+              style: vue.normalizeStyle(sliderBackStyle.value)
+            }, null, 8, ["modelValue", "disabled", "style"]),
+            vue.createElementVNode("div", {
+              class: "hv-color-picker__origin-color",
+              style: vue.normalizeStyle({ backgroundColor: originHexColor.value })
+            }, null, 4)
+          ]),
+          vue.createVNode(_sfc_main$a, {
+            "model-value": color2.value,
+            disabled: props.disabled,
+            onChange: handleColorChange
+          }, null, 8, ["model-value", "disabled"]),
+          vue.createVNode(_sfc_main$9, {
+            onChange: handleColorChange,
+            title: props.presetTitle,
+            presetColors: props.presetColors
+          }, null, 8, ["title", "presetColors"])
+        ]);
+      };
+    }
+  });
+  function isObject$3(value) {
+    var type = typeof value;
+    return value != null && (type == "object" || type == "function");
+  }
+  var isObject_1 = isObject$3;
+  var freeGlobal$1 = typeof commonjsGlobal == "object" && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+  var _freeGlobal = freeGlobal$1;
+  var freeGlobal = _freeGlobal;
+  var freeSelf = typeof self == "object" && self && self.Object === Object && self;
+  var root$2 = freeGlobal || freeSelf || Function("return this")();
+  var _root = root$2;
+  var root$1 = _root;
+  var now$1 = function() {
+    return root$1.Date.now();
+  };
+  var now_1 = now$1;
+  var reWhitespace = /\s/;
+  function trimmedEndIndex$1(string) {
+    var index = string.length;
+    while (index-- && reWhitespace.test(string.charAt(index))) {
+    }
+    return index;
+  }
+  var _trimmedEndIndex = trimmedEndIndex$1;
+  var trimmedEndIndex = _trimmedEndIndex;
+  var reTrimStart = /^\s+/;
+  function baseTrim$1(string) {
+    return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, "") : string;
+  }
+  var _baseTrim = baseTrim$1;
+  var root = _root;
+  var Symbol$3 = root.Symbol;
+  var _Symbol = Symbol$3;
+  var Symbol$2 = _Symbol;
+  var objectProto$1 = Object.prototype;
+  var hasOwnProperty = objectProto$1.hasOwnProperty;
+  var nativeObjectToString$1 = objectProto$1.toString;
+  var symToStringTag$1 = Symbol$2 ? Symbol$2.toStringTag : void 0;
+  function getRawTag$1(value) {
+    var isOwn = hasOwnProperty.call(value, symToStringTag$1), tag = value[symToStringTag$1];
+    try {
+      value[symToStringTag$1] = void 0;
+      var unmasked = true;
+    } catch (e) {
+    }
+    var result = nativeObjectToString$1.call(value);
+    if (unmasked) {
+      if (isOwn) {
+        value[symToStringTag$1] = tag;
+      } else {
+        delete value[symToStringTag$1];
+      }
+    }
+    return result;
+  }
+  var _getRawTag = getRawTag$1;
+  var objectProto = Object.prototype;
+  var nativeObjectToString = objectProto.toString;
+  function objectToString$1(value) {
+    return nativeObjectToString.call(value);
+  }
+  var _objectToString = objectToString$1;
+  var Symbol$1 = _Symbol, getRawTag = _getRawTag, objectToString = _objectToString;
+  var nullTag = "[object Null]", undefinedTag = "[object Undefined]";
+  var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : void 0;
+  function baseGetTag$1(value) {
+    if (value == null) {
+      return value === void 0 ? undefinedTag : nullTag;
+    }
+    return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
+  }
+  var _baseGetTag = baseGetTag$1;
+  function isObjectLike$1(value) {
+    return value != null && typeof value == "object";
+  }
+  var isObjectLike_1 = isObjectLike$1;
+  var baseGetTag = _baseGetTag, isObjectLike = isObjectLike_1;
+  var symbolTag = "[object Symbol]";
+  function isSymbol$1(value) {
+    return typeof value == "symbol" || isObjectLike(value) && baseGetTag(value) == symbolTag;
+  }
+  var isSymbol_1 = isSymbol$1;
+  var baseTrim = _baseTrim, isObject$2 = isObject_1, isSymbol = isSymbol_1;
+  var NAN = 0 / 0;
+  var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+  var reIsBinary = /^0b[01]+$/i;
+  var reIsOctal = /^0o[0-7]+$/i;
+  var freeParseInt = parseInt;
+  function toNumber$1(value) {
+    if (typeof value == "number") {
+      return value;
+    }
+    if (isSymbol(value)) {
+      return NAN;
+    }
+    if (isObject$2(value)) {
+      var other = typeof value.valueOf == "function" ? value.valueOf() : value;
+      value = isObject$2(other) ? other + "" : other;
+    }
+    if (typeof value != "string") {
+      return value === 0 ? value : +value;
+    }
+    value = baseTrim(value);
+    var isBinary = reIsBinary.test(value);
+    return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
+  }
+  var toNumber_1 = toNumber$1;
+  var isObject$1 = isObject_1, now = now_1, toNumber = toNumber_1;
+  var FUNC_ERROR_TEXT$1 = "Expected a function";
+  var nativeMax = Math.max, nativeMin = Math.min;
+  function debounce$1(func, wait, options) {
+    var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
+    if (typeof func != "function") {
+      throw new TypeError(FUNC_ERROR_TEXT$1);
+    }
+    wait = toNumber(wait) || 0;
+    if (isObject$1(options)) {
+      leading = !!options.leading;
+      maxing = "maxWait" in options;
+      maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+      trailing = "trailing" in options ? !!options.trailing : trailing;
+    }
+    function invokeFunc(time) {
+      var args = lastArgs, thisArg = lastThis;
+      lastArgs = lastThis = void 0;
+      lastInvokeTime = time;
+      result = func.apply(thisArg, args);
+      return result;
+    }
+    function leadingEdge(time) {
+      lastInvokeTime = time;
+      timerId = setTimeout(timerExpired, wait);
+      return leading ? invokeFunc(time) : result;
+    }
+    function remainingWait(time) {
+      var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime, timeWaiting = wait - timeSinceLastCall;
+      return maxing ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
+    }
+    function shouldInvoke(time) {
+      var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime;
+      return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
+    }
+    function timerExpired() {
+      var time = now();
+      if (shouldInvoke(time)) {
+        return trailingEdge(time);
+      }
+      timerId = setTimeout(timerExpired, remainingWait(time));
+    }
+    function trailingEdge(time) {
+      timerId = void 0;
+      if (trailing && lastArgs) {
+        return invokeFunc(time);
+      }
+      lastArgs = lastThis = void 0;
+      return result;
+    }
+    function cancel() {
+      if (timerId !== void 0) {
+        clearTimeout(timerId);
+      }
+      lastInvokeTime = 0;
+      lastArgs = lastCallTime = lastThis = timerId = void 0;
+    }
+    function flush() {
+      return timerId === void 0 ? result : trailingEdge(now());
+    }
+    function debounced() {
+      var time = now(), isInvoking = shouldInvoke(time);
+      lastArgs = arguments;
+      lastThis = this;
+      lastCallTime = time;
+      if (isInvoking) {
+        if (timerId === void 0) {
+          return leadingEdge(lastCallTime);
+        }
+        if (maxing) {
+          clearTimeout(timerId);
+          timerId = setTimeout(timerExpired, wait);
+          return invokeFunc(lastCallTime);
+        }
+      }
+      if (timerId === void 0) {
+        timerId = setTimeout(timerExpired, wait);
+      }
+      return result;
+    }
+    debounced.cancel = cancel;
+    debounced.flush = flush;
+    return debounced;
+  }
+  var debounce_1 = debounce$1;
+  var debounce = debounce_1, isObject = isObject_1;
+  var FUNC_ERROR_TEXT = "Expected a function";
+  function throttle(func, wait, options) {
+    var leading = true, trailing = true;
+    if (typeof func != "function") {
+      throw new TypeError(FUNC_ERROR_TEXT);
+    }
+    if (isObject(options)) {
+      leading = "leading" in options ? !!options.leading : leading;
+      trailing = "trailing" in options ? !!options.trailing : trailing;
+    }
+    return debounce(func, wait, {
+      "leading": leading,
+      "maxWait": wait,
+      "trailing": trailing
+    });
+  }
+  var throttle_1 = throttle;
+  const throttle$1 = /* @__PURE__ */ getDefaultExportFromCjs(throttle_1);
+  let lastPoint = {
+    x: void 0,
+    y: void 0
+  };
+  function useInteraction(disabled) {
+    const colorAreaRef = vue.ref();
+    const circlePickerCoordinate = vue.reactive({
+      x: 100,
+      y: 100
+    });
+    function handleTouchStart(e) {
+      if (disabled.value) {
+        return;
+      }
+      if (e.touches.length === 0) {
+        return;
+      }
+      e.preventDefault();
+      const { clientX, clientY } = e.touches[0];
+      handleCirclePickerCoordinateChange({
+        x: clientX,
+        y: clientY
+      });
+      document.body.addEventListener("touchmove", handleTouchMove);
+      document.body.addEventListener("touchend", handleTouchEnd);
+    }
+    function handleTouchMove(e) {
+      if (disabled.value) {
+        return;
+      }
+      if (e.touches.length > 1) {
+        return;
+      }
+      const { clientX, clientY } = e.touches[0];
+      handleCirclePickerCoordinateChange({
+        x: clientX,
+        y: clientY
+      });
+    }
+    function handleTouchEnd() {
+      document.body.removeEventListener("touchmove", handleTouchMove);
+      document.body.removeEventListener("touchend", handleTouchEnd);
+    }
+    function handleMounseDown(e) {
+      if (disabled.value) {
+        return;
+      }
+      document.body.addEventListener("mousemove", handleMouseMove);
+      document.body.addEventListener("mouseup", handleMouseUp);
+      handleCirclePickerCoordinateChange({
+        x: e.clientX,
+        y: e.clientY
+      });
+    }
+    function handleMouseMove(e) {
+      if (disabled.value) {
+        return;
+      }
+      if (!(e.buttons && 1)) {
+        handleMouseUp();
+        return;
+      }
+      handleCirclePickerCoordinateChange({
+        x: e.clientX,
+        y: e.clientY
+      });
+    }
+    const handleCirclePickerCoordinateChange = throttle$1(handleCirclePickerCoordinateChangeFn, 20);
+    function handleCirclePickerCoordinateChangeFn(point) {
+      var _a;
+      const { x: clientX, y: clientY } = point;
+      if (lastPoint.x == point.x && lastPoint.y == point.y) {
+        return;
+      }
+      lastPoint = point;
+      const colorAreaRect = (_a = colorAreaRef.value) == null ? void 0 : _a.getBoundingClientRect();
+      if (!colorAreaRect) {
+        return;
+      }
+      const { left, top, width, height } = colorAreaRect;
+      let x = 0;
+      let y = 0;
+      if (clientX <= left) {
+        x = 0;
+      } else if (clientX >= left + width) {
+        x = width;
+      } else {
+        x = clientX - left;
+      }
+      if (clientY <= top) {
+        y = 0;
+      } else if (clientY >= top + height) {
+        y = height;
+      } else {
+        y = clientY - top;
+      }
+      circlePickerCoordinate.x = x / width * 100;
+      circlePickerCoordinate.y = (height - y) / height * 100;
+    }
+    function handleMouseUp() {
+      document.body.removeEventListener("mousemove", handleMouseMove);
+      document.body.removeEventListener("mouseup", handleMouseUp);
+    }
+    function setCirclePickerCoordinate(x, y) {
+      circlePickerCoordinate.x = x;
+      circlePickerCoordinate.y = y;
+    }
+    vue.onMounted(() => {
+      var _a, _b;
+      (_a = colorAreaRef.value) == null ? void 0 : _a.addEventListener("touchstart", handleTouchStart);
+      (_b = colorAreaRef.value) == null ? void 0 : _b.addEventListener("mousedown", handleMounseDown);
+    });
+    vue.onBeforeUnmount(() => {
+      var _a, _b;
+      (_a = colorAreaRef.value) == null ? void 0 : _a.removeEventListener("touchstart", handleTouchStart);
+      document.body.removeEventListener("touchmove", handleTouchMove);
+      document.body.removeEventListener("touchend", handleTouchEnd);
+      (_b = colorAreaRef.value) == null ? void 0 : _b.removeEventListener("mousedown", handleMounseDown);
+      document.body.removeEventListener("mousemove", handleMouseMove);
+      document.body.removeEventListener("mouseup", handleMouseUp);
+    });
+    return {
+      colorAreaRef,
+      circlePickerCoordinate,
+      setCirclePickerCoordinate
+    };
+  }
+  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+    __name: "ColorArea",
+    props: {
+      saturation: { default: 100 },
+      value: { default: 100 },
+      color: {},
+      hueColor: {},
+      disabled: { type: Boolean }
+    },
+    emits: ["update:saturation", "update:value"],
+    setup(__props, { emit: __emit }) {
+      const emits = __emit;
+      const props = __props;
+      const saturationv = vue.computed({
+        get() {
+          return props.saturation;
+        },
+        set(value2) {
+          emits("update:saturation", value2);
+        }
+      });
+      const value = vue.computed({
+        get() {
+          return props.value;
+        },
+        set(value2) {
+          emits("update:value", value2);
+        }
+      });
+      const isDisabled = vue.computed(() => {
+        return props.disabled;
+      });
+      const { colorAreaRef, circlePickerCoordinate, setCirclePickerCoordinate } = useInteraction(isDisabled);
+      const state = vue.reactive({
+        hexColor: "",
+        bgHexColor: ""
+      });
+      vue.watch(
+        () => props.color,
+        (c) => {
+          const color2 = Color$1(c);
+          state.hexColor = color2.hex();
+          let { h, s, v } = color2.hsv().object();
+          state.bgHexColor = Color$1({ h, s: 100, v: 100 }).hex();
+          const curColor = Color$1.hsv({ h, s: circlePickerCoordinate.x, v: circlePickerCoordinate.y }).hex();
+          if (curColor == color2.hex()) {
+            s = circlePickerCoordinate.x;
+          }
+          setCirclePickerCoordinate(s, v);
+        },
+        {
+          immediate: true
+        }
+      );
+      vue.watch(
+        circlePickerCoordinate,
+        (val) => {
+          saturationv.value = val.x;
+          value.value = val.y;
+        },
+        {
+          deep: true
+        }
+      );
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          ref_key: "colorAreaRef",
+          ref: colorAreaRef,
+          class: "hv-color-picker__color-area-outer"
+        }, [
+          vue.createElementVNode("div", {
+            class: "hv-color-picker__color-area",
+            style: vue.normalizeStyle({ backgroundColor: props.hueColor })
+          }, [
+            vue.createElementVNode("div", {
+              class: "hv-color-picker__circle",
+              style: vue.normalizeStyle({
+                backgroundColor: state.hexColor,
+                left: `${vue.unref(circlePickerCoordinate).x}%`,
+                bottom: `${vue.unref(circlePickerCoordinate).y}%`
+              })
+            }, null, 4)
+          ], 4)
+        ], 512);
+      };
+    }
+  });
+  const _export_sfc = (sfc, props) => {
+    const target = sfc.__vccOpts || sfc;
+    for (const [key, val] of props) {
+      target[key] = val;
+    }
+    return target;
+  };
+  const ColorArea = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-d4f5b081"]]);
+  const _hoisted_1$4 = { class: "hv-color_picker__form mb-12" };
+  const _hoisted_2$3 = { class: "hv-color-picker__form-type" };
+  const _hoisted_3$2 = { class: "hv-color-picker__form-body" };
+  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "HvColorPickerNormal"
+    },
+    __name: "ColorForm",
+    props: {
+      modelValue: {},
+      disabled: { type: Boolean },
+      enableAlpha: { type: Boolean }
+    },
+    emits: ["update:modelValue"],
+    setup(__props, { emit: __emit }) {
+      const SelectOptions = ["RGB", "HSL", "HSV"];
+      const props = __props;
+      const emits = __emit;
+      const formType = vue.ref("RGB");
+      const formInputState = vue.ref([255, 255, 255, 100]);
+      const isRGB = vue.computed(() => {
+        return formType.value === "RGB";
+      });
+      vue.watch(
+        () => props.modelValue,
+        () => {
+          handleFormTypeChange();
+        },
+        {
+          immediate: true
+        }
+      );
+      function handleFormTypeChange() {
+        const color2 = Color$1(props.modelValue);
+        const alpha = color2.alpha() * 100;
+        switch (formType.value) {
+          case "RGB": {
+            const arr = color2.rgb().array();
+            formInputState.value = [...arr.slice(0, 3), alpha];
+            break;
+          }
+          case "HSL": {
+            const arr = color2.hsl().array();
+            formInputState.value = [...arr.slice(0, 3), alpha];
+            break;
+          }
+          case "HSV": {
+            const arr = color2.hsv().array();
+            formInputState.value = [...arr.slice(0, 3), alpha];
+            break;
+          }
+        }
+      }
+      function handleColorChange() {
+        let color2 = Color$1(DEFAULT_COLOR);
+        switch (formType.value) {
+          case "RGB": {
+            color2 = Color$1.rgb(...formInputState.value.slice(0, 3));
+            break;
+          }
+          case "HSL": {
+            color2 = Color$1.hsl(...formInputState.value.slice(0, 3));
+            break;
+          }
+          case "HSV": {
+            color2 = Color$1.hsv(...formInputState.value.slice(0, 3));
+            break;
+          }
+        }
+        emits("update:modelValue", color2.alpha(props.enableAlpha ? formInputState.value[3] / 100 : 1).hexa());
+      }
+      return (_ctx, _cache) => {
+        const _component_el_option = vue.resolveComponent("el-option");
+        const _component_el_select = vue.resolveComponent("el-select");
+        const _component_el_input_number = vue.resolveComponent("el-input-number");
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+          vue.createElementVNode("div", _hoisted_2$3, [
+            vue.createVNode(_component_el_select, {
+              modelValue: formType.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => formType.value = $event),
+              disabled: props.disabled,
+              "popper-class": "hv-color-picker-popper",
+              onChange: handleFormTypeChange,
+              teleported: false
+            }, {
+              default: vue.withCtx(() => [
+                (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(SelectOptions, (item) => {
+                  return vue.createVNode(_component_el_option, {
+                    key: item,
+                    label: item,
+                    value: item
+                  }, null, 8, ["label", "value"]);
+                }), 64))
+              ]),
+              _: 1
+            }, 8, ["modelValue", "disabled"])
+          ]),
+          vue.createElementVNode("div", _hoisted_3$2, [
+            vue.createVNode(_component_el_input_number, {
+              modelValue: formInputState.value[0],
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => formInputState.value[0] = $event),
+              onChange: handleColorChange,
+              "step-strictly": "",
+              disabled: props.disabled,
+              min: 0,
+              max: isRGB.value ? 255 : 360,
+              step: 1,
+              controls: false
+            }, null, 8, ["modelValue", "disabled", "max"]),
             vue.createVNode(_component_el_input_number, {
-              modelValue: formInputHSV.h,
-              "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => formInputHSV.h = $event),
-              onChange: handleHsvColorChange,
-              min: 0,
-              max: 360,
+              modelValue: formInputState.value[1],
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => formInputState.value[1] = $event),
+              onChange: handleColorChange,
               "step-strictly": "",
+              disabled: props.disabled,
+              min: 0,
+              max: isRGB.value ? 255 : 100,
               step: 1,
               controls: false
-            }, null, 8, ["modelValue"]),
+            }, null, 8, ["modelValue", "disabled", "max"]),
             vue.createVNode(_component_el_input_number, {
-              modelValue: formInputHSV.s,
-              "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => formInputHSV.s = $event),
-              onChange: handleHsvColorChange,
-              min: 0,
-              max: 100,
+              modelValue: formInputState.value[2],
+              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => formInputState.value[2] = $event),
+              onChange: handleColorChange,
               "step-strictly": "",
+              disabled: props.disabled,
+              min: 0,
+              max: isRGB.value ? 255 : 100,
               step: 1,
               controls: false
-            }, null, 8, ["modelValue"]),
-            vue.createVNode(_component_el_input_number, {
-              modelValue: formInputHSV.v,
-              "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => formInputHSV.v = $event),
-              onChange: handleHsvColorChange,
+            }, null, 8, ["modelValue", "disabled", "max"]),
+            props.enableAlpha ? (vue.openBlock(), vue.createBlock(_component_el_input_number, {
+              key: 0,
+              modelValue: formInputState.value[3],
+              "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => formInputState.value[3] = $event),
+              onChange: handleColorChange,
               "step-strictly": "",
+              disabled: props.disabled,
               min: 0,
               max: 100,
+              step: 1,
               controls: false
-            }, null, 8, ["modelValue"])
+            }, {
+              suffix: vue.withCtx(() => _cache[5] || (_cache[5] = [
+                vue.createElementVNode("span", null, "%", -1)
+              ])),
+              _: 1
+            }, 8, ["modelValue", "disabled"])) : vue.createCommentVNode("", true)
           ])
         ]);
       };
     }
   });
-  const _hoisted_1$2 = { class: "hv-color-picker__preset" };
-  const _hoisted_2$1 = { class: "hv-color-picker__preset-title" };
+  const ColorForm = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-855a2e17"]]);
+  const _hoisted_1$3 = { class: "hv-color-picker__preset" };
+  const _hoisted_2$2 = { class: "hv-color-picker__preset-title" };
   const _hoisted_3$1 = { class: "hv-color-picker__preset-list" };
-  const _hoisted_4$1 = ["onClick"];
-  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_4 = ["onClick"];
+  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     __name: "PresetColors",
     props: {
       title: {},
@@ -2063,8 +2850,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         emits("change", color2);
       }
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
-          vue.createElementVNode("div", _hoisted_2$1, vue.toDisplayString(props.title || "系统预设色彩"), 1),
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+          vue.createElementVNode("div", _hoisted_2$2, vue.toDisplayString(props.title || "Reset colors"), 1),
           vue.createElementVNode("div", _hoisted_3$1, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(preColors.value, (color2) => {
               return vue.openBlock(), vue.createElementBlock("div", {
@@ -2072,152 +2859,169 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 onClick: ($event) => handleClickColor(color2),
                 key: color2,
                 style: vue.normalizeStyle({ backgroundColor: color2 })
-              }, null, 12, _hoisted_4$1);
+              }, null, 12, _hoisted_4);
             }), 128))
           ])
         ]);
       };
     }
   });
-  const _hoisted_1$1 = { class: "hv-color-picker" };
-  const _hoisted_2 = { class: "hv-color-picker__title" };
-  const _hoisted_3 = { class: "hv-color-picker__area-outer" };
-  const _hoisted_4 = { class: "hv-color-picker__slider" };
-  const DEFAULT_COLOR = "#ffffff";
-  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+  const PresetColors = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-c15cc053"]]);
+  const _hoisted_1$2 = { class: "hv-color-picker-normal" };
+  const _hoisted_2$1 = { class: "hv-color-picker__color-select-box" };
+  const _hoisted_3 = { class: "hv-color-picker__sliders" };
+  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "HvColorPicker"
+      name: "HvColorPickerNormal"
     },
     __name: "ColorPicker",
-    props: /* @__PURE__ */ vue.mergeModels({
-      title: {},
+    props: {
+      modelValue: { default: DEFAULT_COLOR },
+      disabled: { type: Boolean },
+      enableAlpha: { type: Boolean, default: true },
       presetTitle: {},
       presetColors: {}
-    }, {
-      "modelValue": {
-        type: String,
-        default: DEFAULT_COLOR
-      },
-      "modelModifiers": {}
-    }),
-    emits: /* @__PURE__ */ vue.mergeModels(["update:model-value"], ["update:modelValue"]),
+    },
+    emits: ["update:model-value"],
     setup(__props, { emit: __emit }) {
-      const props = __props;
       const emits = __emit;
-      const { colorAreaCanvas, getColorByCoordinate, getCoordinateByColor, canvasWidth, canvasHeight } = useColorArea();
-      const { colorAreaRef, circlePickerCoordinate, setCirclePickerCoordinate } = useOperateEvent();
-      const color2 = vue.useModel(__props, "modelValue");
-      const lightColor = vue.ref(Color$1(DEFAULT_COLOR));
-      const colorDepth = vue.ref(100);
-      const originHexColor = vue.computed(() => {
-        if (lightColor.value) {
-          const hex = getOriginHexByLightAndDepth(lightColor.value, colorDepth.value);
-          return hex;
+      const props = __props;
+      const color2 = vue.computed({
+        get() {
+          return props.modelValue;
+        },
+        set(value2) {
+          emits("update:model-value", value2);
         }
-        return DEFAULT_COLOR;
       });
-      vue.watch(color2, (val) => {
-        const hex = getOriginHexByLightAndDepth(lightColor.value, colorDepth.value);
-        if (hex === val) {
-          return;
-        }
-        handleColorChange(val);
+      const isSupportEyeDropper = !!window.EyeDropper;
+      const colorAreaRef = vue.ref();
+      const hue = vue.ref(0);
+      const alpha = vue.ref(0);
+      const saturationv = vue.ref(100);
+      const value = vue.ref(100);
+      const fullAlphaColor = vue.computed(() => {
+        return Color$1(color2.value).alpha(1).hex();
       });
       vue.watch(
-        () => circlePickerCoordinate,
-        (coordianate) => {
-          var _a;
-          const rect = (_a = colorAreaRef.value) == null ? void 0 : _a.getBoundingClientRect();
-          if (!rect) {
-            return;
+        color2,
+        (c) => {
+          const color22 = Color$1(c);
+          const { h, s } = color22.hsv().object();
+          saturationv.value = s;
+          const equlValues = [0, 360];
+          alpha.value = props.enableAlpha ? Math.round(color22.alpha() * 100) : 100;
+          const curColor = Color$1.hsv({ h: hue.value, s: saturationv.value, v: value.value, alpha: alpha.value }).hexa();
+          if (curColor !== color22.hexa()) {
+            if (!(equlValues.includes(h) && equlValues.includes(hue.value))) {
+              hue.value = h;
+            }
           }
-          const color22 = getColorByCoordinate(coordianate.x, coordianate.y, rect.width, rect.height);
-          lightColor.value = color22;
         },
         {
-          deep: true
+          immediate: true
         }
       );
-      const cilcleStyle = vue.computed(() => {
-        if (!color2.value) {
-          return {
-            top: "100%",
-            left: "0",
-            backgroundColor: "#ffffff"
-          };
-        }
-        return {
-          top: circlePickerCoordinate.y + "px",
-          left: circlePickerCoordinate.x + "px",
-          backgroundColor: lightColor.value.hex()
-        };
+      const hueColor = vue.computed(() => {
+        const color22 = Color$1({ h: hue.value, s: 100, v: 100 });
+        return color22.hex();
       });
-      const sliderBackStyle = vue.computed(() => {
-        const lightHex = colorToHex(lightColor.value);
-        return {
-          "--el-slider-runway-bg-color": `linear-gradient(to right, #000000, ${lightHex})`,
-          "--el-slider-main-bg-color": lightHex
-        };
+      vue.watch([hue, alpha, saturationv, value], () => {
+        reCompColor();
       });
-      vue.watch(
-        () => originHexColor.value,
-        (value, oldValue) => {
-          if (value !== oldValue) {
-            emits("update:model-value", value);
-            return;
-          }
+      const reCompColor = throttle$1(
+        function reCompColor2() {
+          const newColor = Color$1({ h: hue.value, s: saturationv.value, v: value.value, alpha: alpha.value / 100 });
+          color2.value = props.enableAlpha ? newColor.hexa() : newColor.hex();
+        },
+        50,
+        {
+          leading: false,
+          trailing: true
         }
       );
+      function handleOpenEyeDropper() {
+        if (props.disabled) {
+          return;
+        }
+        const eyeDropper = new window.EyeDropper();
+        eyeDropper.open().then((result) => {
+          color2.value = result.sRGBHex;
+        }).catch((e) => {
+          console.error("Eyedropper failed to get color", e);
+        });
+      }
       function handleColorChange(hex) {
-        const color22 = hexToColor(hex);
-        const { color: lightRgb, value: depth } = getLightColorAndDepth(color22);
-        lightColor.value = lightRgb;
-        colorDepth.value = depth;
-        const coordin = getCoordinateByColor(lightRgb);
-        setCirclePickerCoordinate(coordin.x, coordin.y, canvasWidth, canvasHeight);
+        if (props.disabled) {
+          return;
+        }
+        color2.value = hex;
       }
-      vue.onMounted(() => {
-        handleColorChange(color2.value);
-      });
       return (_ctx, _cache) => {
         const _component_ElSlider = vue.resolveComponent("ElSlider");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
-          vue.createElementVNode("div", _hoisted_2, vue.toDisplayString(props.title || "颜色编辑器"), 1),
-          vue.createElementVNode("div", _hoisted_3, [
-            vue.createElementVNode("div", {
-              class: "hv-color-picker__area",
-              ref_key: "colorAreaRef",
-              ref: colorAreaRef
-            }, [
-              vue.createElementVNode("canvas", {
-                ref_key: "colorAreaCanvas",
-                ref: colorAreaCanvas
-              }, null, 512),
-              vue.createElementVNode("div", {
-                class: "hv-color-picker__circle",
-                style: vue.normalizeStyle(cilcleStyle.value)
-              }, null, 4)
-            ], 512)
-          ]),
-          vue.createElementVNode("div", _hoisted_4, [
-            vue.createVNode(_component_ElSlider, {
-              modelValue: colorDepth.value,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => colorDepth.value = $event),
-              min: 0,
-              max: 100,
-              "show-tooltip": false,
-              style: vue.normalizeStyle(sliderBackStyle.value)
-            }, null, 8, ["modelValue", "style"]),
-            vue.createElementVNode("div", {
-              class: "hv-color-picker__origin-color",
-              style: vue.normalizeStyle({ backgroundColor: originHexColor.value })
-            }, null, 4)
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+          vue.createVNode(ColorArea, {
+            ref_key: "colorAreaRef",
+            ref: colorAreaRef,
+            "hue-color": hueColor.value,
+            color: color2.value,
+            saturation: saturationv.value,
+            "onUpdate:saturation": _cache[0] || (_cache[0] = ($event) => saturationv.value = $event),
+            value: value.value,
+            "onUpdate:value": _cache[1] || (_cache[1] = ($event) => value.value = $event),
+            disabled: props.disabled
+          }, null, 8, ["hue-color", "color", "saturation", "value", "disabled"]),
+          vue.createElementVNode("div", _hoisted_2$1, [
+            isSupportEyeDropper ? (vue.openBlock(), vue.createElementBlock("svg", {
+              key: 0,
+              onClick: handleOpenEyeDropper,
+              class: vue.normalizeClass(["hv-color-picker__dropper", props.disabled ? "is-disabled" : ""]),
+              width: "28",
+              height: "28",
+              viewBox: "0 0 28 28",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg"
+            }, _cache[5] || (_cache[5] = [
+              vue.createElementVNode("path", {
+                d: "M22.9297 5.8C21.863 4.73333 20.263 4.73333 19.1964 5.8L15.463 9.53332L14.3963 8.59999C13.863 8.06666 13.063 8.06666 12.5296 8.59999C11.9963 9.13332 11.9963 9.93332 12.5296 10.4667L13.463 11.4L5.72967 19.1333C5.19634 19.6666 4.39634 21.6666 5.72967 23C7.06299 24.3333 9.06299 23.5333 9.59632 23L17.3296 15.2666L18.263 16.2C18.7964 16.7333 19.5964 16.7333 20.1297 16.2C20.663 15.6666 20.663 14.8666 20.1297 14.3333L19.1964 13.4L22.9297 9.66666C23.9964 8.46666 23.9964 6.86666 22.9297 5.8ZM8.39632 21.6666H7.06299V20.3333L14.7963 12.6L16.1296 13.9333C15.9963 13.9333 8.39632 21.6666 8.39632 21.6666Z",
+                fill: "currentcolor"
+              }, null, -1)
+            ]), 2)) : vue.createCommentVNode("", true),
+            vue.createElementVNode("div", _hoisted_3, [
+              vue.createVNode(_component_ElSlider, {
+                modelValue: hue.value,
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => hue.value = $event),
+                min: 0,
+                max: 360,
+                disabled: props.disabled,
+                "show-tooltip": false,
+                class: "hv-color-picker__hue-slider",
+                style: vue.normalizeStyle({
+                  "--el-slider-button-bg-color": hueColor.value
+                })
+              }, null, 8, ["modelValue", "disabled", "style"]),
+              props.enableAlpha ? (vue.openBlock(), vue.createBlock(_component_ElSlider, {
+                key: 0,
+                modelValue: alpha.value,
+                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => alpha.value = $event),
+                min: 0,
+                max: 100,
+                disabled: props.disabled,
+                "show-tooltip": false,
+                class: "hv-color-picker__alpha-slider",
+                style: vue.normalizeStyle({
+                  "--hv-cur-full-alpha-color": fullAlphaColor.value
+                })
+              }, null, 8, ["modelValue", "disabled", "style"])) : vue.createCommentVNode("", true)
+            ])
           ]),
-          vue.createVNode(_sfc_main$5, {
+          vue.createVNode(ColorForm, {
             "model-value": color2.value,
-            onChange: handleColorChange
-          }, null, 8, ["model-value"]),
-          vue.createVNode(_sfc_main$4, {
+            "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => color2.value = $event),
+            disabled: props.disabled,
+            "enable-alpha": props.enableAlpha
+          }, null, 8, ["model-value", "disabled", "enable-alpha"]),
+          vue.createVNode(PresetColors, {
             onChange: handleColorChange,
             title: props.presetTitle,
             presetColors: props.presetColors
@@ -2226,26 +3030,59 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const HvColorPicker = withInstall(_sfc_main$3);
+  const ColorPickerNormal = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-fbafd973"]]);
+  const HvColorPicker = withInstall(_sfc_main$8);
+  const HvColorPickerRainbow = HvColorPicker;
+  const HvColorPickerNormal = withInstall(ColorPickerNormal);
+  class EventBus {
+    constructor() {
+      __publicField(this, "_eventMap");
+      this._eventMap = /* @__PURE__ */ new Map();
+    }
+    on(key, handler) {
+      const handlers = this._eventMap.get(key);
+      if (handlers) {
+        handlers.add(handler);
+      } else {
+        const set = /* @__PURE__ */ new Set();
+        set.add(handler);
+        this._eventMap.set(key, set);
+      }
+    }
+    off(key, handler) {
+      const handlers = this._eventMap.get(key);
+      if (!handlers) return;
+      if (handler) {
+        handlers.delete(handler);
+      } else {
+        handlers.clear();
+      }
+    }
+    emit(key, ...payload) {
+      const handlers = this._eventMap.get(key);
+      if (!handlers) return;
+      for (const callback of handlers.values()) {
+        callback(...payload);
+      }
+    }
+  }
   class DnDManager extends EventBus {
     constructor() {
       super();
-      /** 是否开始拖动 */
+      /** 是否开始拖动 | Whether to start dragging */
       __publicField(this, "isDragStart", false);
-      /** 拖动元素类型 */
+      /** 拖动元素类型 | Drag type */
       __publicField(this, "dragType");
-      /** Draggable传递的数据，
-       * 供Droppable使用
-       */
+      /** Draggable传递的数据，供Droppable使用 | Draggable passes data for use by Droppable */
       __publicField(this, "dragData");
       __publicField(this, "isSendFirstMovePos", false);
-      /** 移动端长按一定时间才触发 onStart */
+      /** 长按一定时间才触发 onStart | Press and hold for a certain amount of time to trigger onStart */
       __publicField(this, "touchStartPressTime", 300);
-      /** touchstart事件触发的时的时间 */
+      /** 点击触发时的时间 | The time at which the click is triggered */
       __publicField(this, "touchStartTime", 0);
-      /** touchstart时间触发的位置 */
+      /** 点击触发的位置 | The position where the click event is triggered */
       __publicField(this, "touchStartPosition", { x: 0, y: 0 });
-      /** onMove最后位置 */
+      /** onMove最后位置 | onMove last position */
       __publicField(this, "lastMovePoint", { x: 0, y: 0 });
       __publicField(this, "emitTouchStartTimer");
       __publicField(this, "destroy", () => {
@@ -2263,14 +3100,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.emitTouchStartTimer = void 0;
     }
     /**
-     * 通知 Draggable 开始点击
+     * 通知 Draggable 开始点击 | Tell Draggable to start clicking
      * @param point
      */
     onDown(point) {
       this.emit("down", point);
     }
     /**
-     * 通知 Draggable 拖拽开始
+     * 第一次移动时，通知 Draggable | On the first move, notify Draggable
      * @param point
      */
     onFirstMove(point, e) {
@@ -2281,7 +3118,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.emit("first-move", point, e);
     }
     /**
-     * 通知 Draggable 拖拽开始
+     * 通知 Draggable 拖拽开始 | Notify Draggable to begin the drag
      * @param point
      */
     onStart(point) {
@@ -2291,7 +3128,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.emit("start", point);
     }
     /**
-     * 通知 Draggable 移动
+     * 通知 Draggable 移动 | Notify Draggable to move
      * @param point
      * @returns
      */
@@ -2307,7 +3144,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       });
     }
     /**
-     * 结束拖拽
+     * 结束拖拽 | Ending drag
      * @returns
      */
     onEnd() {
@@ -2432,15 +3269,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         const onMouseDown = this.onMouseDown.bind(this);
         const onMouseMove = this.onMouseMove.bind(this);
         const onMouseUp = this.onMouseUp.bind(this);
-        if (isMobile) {
-          document.body.addEventListener("touchstart", onTouchStart, { passive: false });
-          document.body.addEventListener("touchmove", onTouchMove, { passive: false });
-          document.body.addEventListener("touchend", onTouchEnd, { passive: false });
-        } else {
-          document.body.addEventListener("mousedown", onMouseDown);
-          document.body.addEventListener("mousemove", onMouseMove);
-          document.body.addEventListener("mouseup", onMouseUp);
-        }
+        document.body.addEventListener("touchstart", onTouchStart, { passive: false });
+        document.body.addEventListener("touchmove", onTouchMove, { passive: false });
+        document.body.addEventListener("touchend", onTouchEnd, { passive: false });
+        document.body.addEventListener("mousedown", onMouseDown);
+        document.body.addEventListener("mousemove", onMouseMove);
+        document.body.addEventListener("mouseup", onMouseUp);
         this.destroy = () => {
           document.body.removeEventListener("touchstart", onTouchStart);
           document.body.removeEventListener("touchmove", onTouchMove);
@@ -2464,7 +3298,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
   }
   const DnDManagerInstance = new DnDManager();
-  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "HvDraggable"
     },
@@ -2506,7 +3340,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           transform: `translate(${cloneNodePosition.x}px, ${cloneNodePosition.y}px) translate(-50%, -50%)`
         };
       });
-      DnDManagerInstance.on("down", (params) => {
+      const onDown = (params) => {
         const { x, y } = params;
         const startEl = document.elementFromPoint(x, y);
         if (!props.disabled && dragItemRef.value && dragItemRef.value.contains(startEl)) {
@@ -2518,8 +3352,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           downPosition.x = x;
           downPosition.y = y;
         }
-      });
-      DnDManagerInstance.on("first-move", (params, event) => {
+      };
+      const onFirstMove = (params, event) => {
         const { x, y } = params;
         const directions = immediateDirections.value.filter((item) => item !== ImmediateEnumType.ALL);
         if (isDownThis.value && !props.disabled && directions.length) {
@@ -2545,21 +3379,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             return;
           }
         }
-      });
-      DnDManagerInstance.on("start", (params) => {
+      };
+      const onStart = (params) => {
         const { x, y } = params;
         const startEl = document.elementFromPoint(x, y);
         if (!props.disabled && dragItemRef.value && dragItemRef.value.contains(startEl)) {
           handleStart(params);
         }
-      });
-      DnDManagerInstance.on("move", (params) => {
+      };
+      const onMove = (params) => {
         const { point } = params;
         if (isDragThis.value) {
           handleMove(point);
         }
-      });
-      DnDManagerInstance.on("end", () => {
+      };
+      const onEnd = () => {
         isDownThis.value = false;
         isDragThis.value = false;
         Object.assign(downPosition, {
@@ -2570,7 +3404,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           x: 0,
           y: 0
         });
-      });
+      };
       function handleStart(point) {
         isDragThis.value = true;
         cloneNodePosition.x = point.x;
@@ -2581,6 +3415,20 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         cloneNodePosition.x = point.x;
         cloneNodePosition.y = point.y;
       }
+      vue.onMounted(() => {
+        DnDManagerInstance.on("down", onDown);
+        DnDManagerInstance.on("first-move", onFirstMove);
+        DnDManagerInstance.on("start", onStart);
+        DnDManagerInstance.on("move", onMove);
+        DnDManagerInstance.on("end", onEnd);
+      });
+      vue.onBeforeUnmount(() => {
+        DnDManagerInstance.off("down", onDown);
+        DnDManagerInstance.off("first-move", onFirstMove);
+        DnDManagerInstance.off("start", onStart);
+        DnDManagerInstance.off("move", onMove);
+        DnDManagerInstance.off("end", onEnd);
+      });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           ref_key: "dragItemRef",
@@ -2593,7 +3441,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             class: "hv-draggable__clone-item",
             style: vue.normalizeStyle(cloneNodeStyle.value)
           }, [
-            vue.renderSlot(_ctx.$slots, "hv-drag-item", {}, () => [
+            vue.renderSlot(_ctx.$slots, "drag-item", {}, () => [
               vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
             ], true)
           ], 4)) : vue.createCommentVNode("", true)
@@ -2601,21 +3449,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const _export_sfc = (sfc, props) => {
-    const target = sfc.__vccOpts || sfc;
-    for (const [key, val] of props) {
-      target[key] = val;
-    }
-    return target;
-  };
-  const Draggable = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-1d116395"]]);
-  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  const Draggable = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-2309f70a"]]);
+  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "HvDroppable"
     },
     __name: "Droppable",
     props: {
-      acceptDragType: {}
+      acceptDragType: {},
+      disabled: { type: Boolean }
     },
     emits: ["enter", "move", "drop", "leave"],
     setup(__props, { emit: __emit }) {
@@ -2648,7 +3490,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           }
         };
       }
-      DnDManagerInstance.on("move", (params) => {
+      const onMove = (params) => {
+        if (props.disabled) {
+          return;
+        }
         const { type, data, point } = params;
         if (dropAreaRef.value && acceptDragTypeList.value.includes(type)) {
           const { isInArea, position } = getPositionInArea(point);
@@ -2664,12 +3509,23 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             emits("leave", type, data);
           }
         }
-      });
-      DnDManagerInstance.on("end", ({ type, point, data }) => {
+      };
+      const onEnd = ({ type, point, data }) => {
+        if (props.disabled) {
+          return;
+        }
         if (dropAreaRef.value && acceptDragTypeList.value.includes(type) && isEntered.value) {
           const { position } = getPositionInArea(point);
           emits("drop", type, position, data);
         }
+      };
+      vue.onMounted(() => {
+        DnDManagerInstance.on("move", onMove);
+        DnDManagerInstance.on("end", onEnd);
+      });
+      vue.onBeforeUnmount(() => {
+        DnDManagerInstance.off("move", onMove);
+        DnDManagerInstance.off("end", onEnd);
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
@@ -2683,7 +3539,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
   });
   const HvDraggable = withInstall(Draggable);
-  const HvDroppable = withInstall(_sfc_main$1);
+  const HvDroppable = withInstall(_sfc_main$2);
   function useDragAndScale(target, operateTarget, options) {
     const _options = vue.computed(() => {
       return vue.isRef(options) ? vue.toValue(options) : options;
@@ -3123,31 +3979,25 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
     function bindEvent() {
       removeEvent();
-      if (isMobile) {
-        _operateEl.value.addEventListener("touchstart", onTouchStart, { capture: true });
-      } else {
-        _operateEl.value.addEventListener("mousedown", onMouseDown);
-      }
+      _operateEl.value.addEventListener("touchstart", onTouchStart, { capture: true });
+      _operateEl.value.addEventListener("mousedown", onMouseDown);
     }
     function removeEvent() {
-      if (isMobile) {
-        _operateEl.value.removeEventListener("touchstart", onTouchStart);
-        document.body.removeEventListener("touchmove", onTouchMove);
-        document.body.removeEventListener("touchend", onTouchEnd);
-        document.body.removeEventListener("touchcancel", onTouchEnd);
-      } else {
-        _operateEl.value.removeEventListener("mousedown", onMouseDown);
-        document.body.removeEventListener("mousemove", onMouseMove);
-        document.body.removeEventListener("mouseup", onMouseUp);
-      }
+      _operateEl.value.removeEventListener("touchstart", onTouchStart);
+      document.body.removeEventListener("touchmove", onTouchMove);
+      document.body.removeEventListener("touchend", onTouchEnd);
+      document.body.removeEventListener("touchcancel", onTouchEnd);
+      _operateEl.value.removeEventListener("mousedown", onMouseDown);
+      document.body.removeEventListener("mousemove", onMouseMove);
+      document.body.removeEventListener("mouseup", onMouseUp);
     }
     vue.onBeforeUnmount(() => {
       isOperateStart = false;
       removeEvent();
     });
   }
-  const _hoisted_1 = { class: "hv-drag-and-scale__zoom-mark" };
-  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$1 = { class: "hv-drag-and-scale__zoom-mark" };
+  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "HvDragAndScale"
     },
@@ -3190,7 +4040,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           ref: targetRef
         }, [
           vue.renderSlot(_ctx.$slots, "default"),
-          vue.createElementVNode("div", _hoisted_1, [
+          vue.createElementVNode("div", _hoisted_1$1, [
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["hv-drag-and-scale__area-box", props.disabled ? "disabled" : ""]),
               ref_key: "operateRef",
@@ -3203,10 +4053,165 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const HvDragAndScale = withInstall(_sfc_main);
+  const HvDragAndScale = withInstall(_sfc_main$1);
+  function getValidIPItemValue(val) {
+    const num = parseInt(val + "");
+    return isNaN(num) ? "" : num < 0 ? "0" : num > 255 ? "255" : num + "";
+  }
+  function getRange(el) {
+    const ret = {
+      begin: null,
+      end: null,
+      result: null
+    };
+    ret.begin = el.selectionStart || 0;
+    ret.end = el.selectionEnd || 0;
+    ret.result = el.value.substring(ret.begin, ret.end);
+    el.focus();
+    return ret;
+  }
+  const _hoisted_1 = ["value", "disabled", "onInput", "onKeydown", "onPaste"];
+  const _hoisted_2 = { key: 0 };
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "HvIpInput"
+    },
+    __name: "IpInput",
+    props: {
+      modelValue: { default: "..." },
+      disabled: { type: Boolean, default: false }
+    },
+    emits: ["update:model-value"],
+    setup(__props, { emit: __emit }) {
+      const emits = __emit;
+      const props = __props;
+      const inputRefs = vue.ref([]);
+      const values = vue.ref([]);
+      vue.watch(
+        () => props.modelValue,
+        (value) => {
+          value = value + "";
+          const strs = value.split(".");
+          values.value = Array(4).fill("").map((_, i) => {
+            return getValidIPItemValue(strs[i] + "");
+          });
+        },
+        {
+          immediate: true
+        }
+      );
+      function onIPChange() {
+        const ip = values.value.map((val) => getValidIPItemValue(val)).join(".");
+        return emits("update:model-value", ip);
+      }
+      function handleChange(e, i) {
+        var _a;
+        if (props.disabled) {
+          return;
+        }
+        const curValue = e.target.value;
+        const num = getValidIPItemValue(curValue);
+        values.value[i] = num;
+        e.target.value = num;
+        onIPChange();
+        if (num === "") {
+          return e.preventDefault();
+        }
+        if (String(num).length === 3 && i < 3) {
+          (_a = inputRefs.value[i + 1]) == null ? void 0 : _a.focus();
+        }
+      }
+      function handleKeyDown(e, i) {
+        let domId = i;
+        const { end } = getRange(e.target);
+        switch (e.keyCode) {
+          case 37:
+          case 8: {
+            if (end === 0 && i > 0) {
+              domId = i - 1;
+            }
+            break;
+          }
+          case 39: {
+            if (end === e.target.value.length && i < 3) {
+              domId = i + 1;
+            }
+            break;
+          }
+          case 110:
+          case 190: {
+            e.preventDefault();
+            if (i < 3) {
+              domId = i + 1;
+            }
+            break;
+          }
+        }
+        const inputEl = inputRefs.value[domId];
+        inputEl.focus();
+        if (domId < i) {
+          const len = inputEl.value.length;
+          inputEl.selectionStart = inputEl.selectionEnd = len;
+        } else if (domId > i) {
+          inputEl.selectionStart = inputEl.selectionEnd = 0;
+        }
+      }
+      function handlePaste(e, i) {
+        if (!e.clipboardData || !e.clipboardData.getData) {
+          return;
+        }
+        const pasteData = e.clipboardData.getData("text/plain");
+        if (!pasteData) {
+          return;
+        }
+        const value = pasteData.split(".").map((v) => getValidIPItemValue(v));
+        if (value.length !== 4 - i) {
+          return;
+        }
+        if (!value.every((item) => item !== "")) {
+          return;
+        }
+        value.forEach((val, j) => {
+          values.value[i + j] = val + "";
+        });
+        onIPChange();
+        return e.preventDefault();
+      }
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.normalizeClass(["hv-ip-input", props.disabled ? "is-disabled" : ""])
+        }, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(values.value, (value, i) => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              class: "hv-ip-input-item",
+              key: i
+            }, [
+              vue.createElementVNode("input", {
+                ref_for: true,
+                ref_key: "inputRefs",
+                ref: inputRefs,
+                type: "text",
+                value,
+                disabled: props.disabled,
+                onInput: (e) => handleChange(e, i),
+                onKeydown: (e) => handleKeyDown(e, i),
+                onPaste: (e) => handlePaste(e, i)
+              }, null, 40, _hoisted_1),
+              i !== 3 ? (vue.openBlock(), vue.createElementBlock("i", _hoisted_2, ".")) : vue.createCommentVNode("", true)
+            ]);
+          }), 128))
+        ], 2);
+      };
+    }
+  });
+  const HvIpInput = withInstall(_sfc_main);
+  exports2.DEFAULT_COLOR = DEFAULT_COLOR;
   exports2.HvColorPicker = HvColorPicker;
+  exports2.HvColorPickerNormal = HvColorPickerNormal;
+  exports2.HvColorPickerRainbow = HvColorPickerRainbow;
   exports2.HvDragAndScale = HvDragAndScale;
   exports2.HvDraggable = HvDraggable;
   exports2.HvDroppable = HvDroppable;
+  exports2.HvIpInput = HvIpInput;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });