@havue/components 1.0.0

package/dist/components.full.js

@@ -0,0 +1,3217 @@
+(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));
+})(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;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+  const withInstall = (main, extra) => {
+    main.install = (app) => {
+      for (const comp of [main, ...Object.values({})]) {
+        app.component(comp.name, comp);
+      }
+    };
+    return main;
+  };
+  function getDefaultExportFromCjs(x) {
+    return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+  }
+  var colorString$1 = { exports: {} };
+  var colorName = {
+    "aliceblue": [240, 248, 255],
+    "antiquewhite": [250, 235, 215],
+    "aqua": [0, 255, 255],
+    "aquamarine": [127, 255, 212],
+    "azure": [240, 255, 255],
+    "beige": [245, 245, 220],
+    "bisque": [255, 228, 196],
+    "black": [0, 0, 0],
+    "blanchedalmond": [255, 235, 205],
+    "blue": [0, 0, 255],
+    "blueviolet": [138, 43, 226],
+    "brown": [165, 42, 42],
+    "burlywood": [222, 184, 135],
+    "cadetblue": [95, 158, 160],
+    "chartreuse": [127, 255, 0],
+    "chocolate": [210, 105, 30],
+    "coral": [255, 127, 80],
+    "cornflowerblue": [100, 149, 237],
+    "cornsilk": [255, 248, 220],
+    "crimson": [220, 20, 60],
+    "cyan": [0, 255, 255],
+    "darkblue": [0, 0, 139],
+    "darkcyan": [0, 139, 139],
+    "darkgoldenrod": [184, 134, 11],
+    "darkgray": [169, 169, 169],
+    "darkgreen": [0, 100, 0],
+    "darkgrey": [169, 169, 169],
+    "darkkhaki": [189, 183, 107],
+    "darkmagenta": [139, 0, 139],
+    "darkolivegreen": [85, 107, 47],
+    "darkorange": [255, 140, 0],
+    "darkorchid": [153, 50, 204],
+    "darkred": [139, 0, 0],
+    "darksalmon": [233, 150, 122],
+    "darkseagreen": [143, 188, 143],
+    "darkslateblue": [72, 61, 139],
+    "darkslategray": [47, 79, 79],
+    "darkslategrey": [47, 79, 79],
+    "darkturquoise": [0, 206, 209],
+    "darkviolet": [148, 0, 211],
+    "deeppink": [255, 20, 147],
+    "deepskyblue": [0, 191, 255],
+    "dimgray": [105, 105, 105],
+    "dimgrey": [105, 105, 105],
+    "dodgerblue": [30, 144, 255],
+    "firebrick": [178, 34, 34],
+    "floralwhite": [255, 250, 240],
+    "forestgreen": [34, 139, 34],
+    "fuchsia": [255, 0, 255],
+    "gainsboro": [220, 220, 220],
+    "ghostwhite": [248, 248, 255],
+    "gold": [255, 215, 0],
+    "goldenrod": [218, 165, 32],
+    "gray": [128, 128, 128],
+    "green": [0, 128, 0],
+    "greenyellow": [173, 255, 47],
+    "grey": [128, 128, 128],
+    "honeydew": [240, 255, 240],
+    "hotpink": [255, 105, 180],
+    "indianred": [205, 92, 92],
+    "indigo": [75, 0, 130],
+    "ivory": [255, 255, 240],
+    "khaki": [240, 230, 140],
+    "lavender": [230, 230, 250],
+    "lavenderblush": [255, 240, 245],
+    "lawngreen": [124, 252, 0],
+    "lemonchiffon": [255, 250, 205],
+    "lightblue": [173, 216, 230],
+    "lightcoral": [240, 128, 128],
+    "lightcyan": [224, 255, 255],
+    "lightgoldenrodyellow": [250, 250, 210],
+    "lightgray": [211, 211, 211],
+    "lightgreen": [144, 238, 144],
+    "lightgrey": [211, 211, 211],
+    "lightpink": [255, 182, 193],
+    "lightsalmon": [255, 160, 122],
+    "lightseagreen": [32, 178, 170],
+    "lightskyblue": [135, 206, 250],
+    "lightslategray": [119, 136, 153],
+    "lightslategrey": [119, 136, 153],
+    "lightsteelblue": [176, 196, 222],
+    "lightyellow": [255, 255, 224],
+    "lime": [0, 255, 0],
+    "limegreen": [50, 205, 50],
+    "linen": [250, 240, 230],
+    "magenta": [255, 0, 255],
+    "maroon": [128, 0, 0],
+    "mediumaquamarine": [102, 205, 170],
+    "mediumblue": [0, 0, 205],
+    "mediumorchid": [186, 85, 211],
+    "mediumpurple": [147, 112, 219],
+    "mediumseagreen": [60, 179, 113],
+    "mediumslateblue": [123, 104, 238],
+    "mediumspringgreen": [0, 250, 154],
+    "mediumturquoise": [72, 209, 204],
+    "mediumvioletred": [199, 21, 133],
+    "midnightblue": [25, 25, 112],
+    "mintcream": [245, 255, 250],
+    "mistyrose": [255, 228, 225],
+    "moccasin": [255, 228, 181],
+    "navajowhite": [255, 222, 173],
+    "navy": [0, 0, 128],
+    "oldlace": [253, 245, 230],
+    "olive": [128, 128, 0],
+    "olivedrab": [107, 142, 35],
+    "orange": [255, 165, 0],
+    "orangered": [255, 69, 0],
+    "orchid": [218, 112, 214],
+    "palegoldenrod": [238, 232, 170],
+    "palegreen": [152, 251, 152],
+    "paleturquoise": [175, 238, 238],
+    "palevioletred": [219, 112, 147],
+    "papayawhip": [255, 239, 213],
+    "peachpuff": [255, 218, 185],
+    "peru": [205, 133, 63],
+    "pink": [255, 192, 203],
+    "plum": [221, 160, 221],
+    "powderblue": [176, 224, 230],
+    "purple": [128, 0, 128],
+    "rebeccapurple": [102, 51, 153],
+    "red": [255, 0, 0],
+    "rosybrown": [188, 143, 143],
+    "royalblue": [65, 105, 225],
+    "saddlebrown": [139, 69, 19],
+    "salmon": [250, 128, 114],
+    "sandybrown": [244, 164, 96],
+    "seagreen": [46, 139, 87],
+    "seashell": [255, 245, 238],
+    "sienna": [160, 82, 45],
+    "silver": [192, 192, 192],
+    "skyblue": [135, 206, 235],
+    "slateblue": [106, 90, 205],
+    "slategray": [112, 128, 144],
+    "slategrey": [112, 128, 144],
+    "snow": [255, 250, 250],
+    "springgreen": [0, 255, 127],
+    "steelblue": [70, 130, 180],
+    "tan": [210, 180, 140],
+    "teal": [0, 128, 128],
+    "thistle": [216, 191, 216],
+    "tomato": [255, 99, 71],
+    "turquoise": [64, 224, 208],
+    "violet": [238, 130, 238],
+    "wheat": [245, 222, 179],
+    "white": [255, 255, 255],
+    "whitesmoke": [245, 245, 245],
+    "yellow": [255, 255, 0],
+    "yellowgreen": [154, 205, 50]
+  };
+  var simpleSwizzle = { exports: {} };
+  var isArrayish$1 = function isArrayish2(obj) {
+    if (!obj || typeof obj === "string") {
+      return false;
+    }
+    return obj instanceof Array || Array.isArray(obj) || obj.length >= 0 && (obj.splice instanceof Function || Object.getOwnPropertyDescriptor(obj, obj.length - 1) && obj.constructor.name !== "String");
+  };
+  var isArrayish = isArrayish$1;
+  var concat = Array.prototype.concat;
+  var slice = Array.prototype.slice;
+  var swizzle$1 = simpleSwizzle.exports = function swizzle2(args) {
+    var results = [];
+    for (var i = 0, len = args.length; i < len; i++) {
+      var arg = args[i];
+      if (isArrayish(arg)) {
+        results = concat.call(results, slice.call(arg));
+      } else {
+        results.push(arg);
+      }
+    }
+    return results;
+  };
+  swizzle$1.wrap = function(fn) {
+    return function() {
+      return fn(swizzle$1(arguments));
+    };
+  };
+  var simpleSwizzleExports = simpleSwizzle.exports;
+  var colorNames = colorName;
+  var swizzle = simpleSwizzleExports;
+  var hasOwnProperty = Object.hasOwnProperty;
+  var reverseNames = /* @__PURE__ */ Object.create(null);
+  for (var name in colorNames) {
+    if (hasOwnProperty.call(colorNames, name)) {
+      reverseNames[colorNames[name]] = name;
+    }
+  }
+  var cs = colorString$1.exports = {
+    to: {},
+    get: {}
+  };
+  cs.get = function(string) {
+    var prefix = string.substring(0, 3).toLowerCase();
+    var val;
+    var model;
+    switch (prefix) {
+      case "hsl":
+        val = cs.get.hsl(string);
+        model = "hsl";
+        break;
+      case "hwb":
+        val = cs.get.hwb(string);
+        model = "hwb";
+        break;
+      default:
+        val = cs.get.rgb(string);
+        model = "rgb";
+        break;
+    }
+    if (!val) {
+      return null;
+    }
+    return { model, value: val };
+  };
+  cs.get.rgb = function(string) {
+    if (!string) {
+      return null;
+    }
+    var abbr = /^#([a-f0-9]{3,4})$/i;
+    var hex = /^#([a-f0-9]{6})([a-f0-9]{2})?$/i;
+    var rgba = /^rgba?\(\s*([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/;
+    var per = /^rgba?\(\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/;
+    var keyword = /^(\w+)$/;
+    var rgb = [0, 0, 0, 1];
+    var match;
+    var i;
+    var hexAlpha;
+    if (match = string.match(hex)) {
+      hexAlpha = match[2];
+      match = match[1];
+      for (i = 0; i < 3; i++) {
+        var i2 = i * 2;
+        rgb[i] = parseInt(match.slice(i2, i2 + 2), 16);
+      }
+      if (hexAlpha) {
+        rgb[3] = parseInt(hexAlpha, 16) / 255;
+      }
+    } else if (match = string.match(abbr)) {
+      match = match[1];
+      hexAlpha = match[3];
+      for (i = 0; i < 3; i++) {
+        rgb[i] = parseInt(match[i] + match[i], 16);
+      }
+      if (hexAlpha) {
+        rgb[3] = parseInt(hexAlpha + hexAlpha, 16) / 255;
+      }
+    } else if (match = string.match(rgba)) {
+      for (i = 0; i < 3; i++) {
+        rgb[i] = parseInt(match[i + 1], 0);
+      }
+      if (match[4]) {
+        if (match[5]) {
+          rgb[3] = parseFloat(match[4]) * 0.01;
+        } else {
+          rgb[3] = parseFloat(match[4]);
+        }
+      }
+    } else if (match = string.match(per)) {
+      for (i = 0; i < 3; i++) {
+        rgb[i] = Math.round(parseFloat(match[i + 1]) * 2.55);
+      }
+      if (match[4]) {
+        if (match[5]) {
+          rgb[3] = parseFloat(match[4]) * 0.01;
+        } else {
+          rgb[3] = parseFloat(match[4]);
+        }
+      }
+    } else if (match = string.match(keyword)) {
+      if (match[1] === "transparent") {
+        return [0, 0, 0, 0];
+      }
+      if (!hasOwnProperty.call(colorNames, match[1])) {
+        return null;
+      }
+      rgb = colorNames[match[1]];
+      rgb[3] = 1;
+      return rgb;
+    } else {
+      return null;
+    }
+    for (i = 0; i < 3; i++) {
+      rgb[i] = clamp(rgb[i], 0, 255);
+    }
+    rgb[3] = clamp(rgb[3], 0, 1);
+    return rgb;
+  };
+  cs.get.hsl = function(string) {
+    if (!string) {
+      return null;
+    }
+    var hsl = /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d\.]+)%\s*,?\s*([+-]?[\d\.]+)%\s*(?:[,|\/]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
+    var match = string.match(hsl);
+    if (match) {
+      var alpha = parseFloat(match[4]);
+      var h = (parseFloat(match[1]) % 360 + 360) % 360;
+      var s = clamp(parseFloat(match[2]), 0, 100);
+      var l = clamp(parseFloat(match[3]), 0, 100);
+      var a = clamp(isNaN(alpha) ? 1 : alpha, 0, 1);
+      return [h, s, l, a];
+    }
+    return null;
+  };
+  cs.get.hwb = function(string) {
+    if (!string) {
+      return null;
+    }
+    var hwb = /^hwb\(\s*([+-]?\d{0,3}(?:\.\d+)?)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/;
+    var match = string.match(hwb);
+    if (match) {
+      var alpha = parseFloat(match[4]);
+      var h = (parseFloat(match[1]) % 360 + 360) % 360;
+      var w = clamp(parseFloat(match[2]), 0, 100);
+      var b = clamp(parseFloat(match[3]), 0, 100);
+      var a = clamp(isNaN(alpha) ? 1 : alpha, 0, 1);
+      return [h, w, b, a];
+    }
+    return null;
+  };
+  cs.to.hex = function() {
+    var rgba = swizzle(arguments);
+    return "#" + hexDouble(rgba[0]) + hexDouble(rgba[1]) + hexDouble(rgba[2]) + (rgba[3] < 1 ? hexDouble(Math.round(rgba[3] * 255)) : "");
+  };
+  cs.to.rgb = function() {
+    var rgba = swizzle(arguments);
+    return rgba.length < 4 || rgba[3] === 1 ? "rgb(" + Math.round(rgba[0]) + ", " + Math.round(rgba[1]) + ", " + Math.round(rgba[2]) + ")" : "rgba(" + Math.round(rgba[0]) + ", " + Math.round(rgba[1]) + ", " + Math.round(rgba[2]) + ", " + rgba[3] + ")";
+  };
+  cs.to.rgb.percent = function() {
+    var rgba = swizzle(arguments);
+    var r = Math.round(rgba[0] / 255 * 100);
+    var g = Math.round(rgba[1] / 255 * 100);
+    var b = Math.round(rgba[2] / 255 * 100);
+    return rgba.length < 4 || rgba[3] === 1 ? "rgb(" + r + "%, " + g + "%, " + b + "%)" : "rgba(" + r + "%, " + g + "%, " + b + "%, " + rgba[3] + ")";
+  };
+  cs.to.hsl = function() {
+    var hsla = swizzle(arguments);
+    return hsla.length < 4 || hsla[3] === 1 ? "hsl(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%)" : "hsla(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%, " + hsla[3] + ")";
+  };
+  cs.to.hwb = function() {
+    var hwba = swizzle(arguments);
+    var a = "";
+    if (hwba.length >= 4 && hwba[3] !== 1) {
+      a = ", " + hwba[3];
+    }
+    return "hwb(" + hwba[0] + ", " + hwba[1] + "%, " + hwba[2] + "%" + a + ")";
+  };
+  cs.to.keyword = function(rgb) {
+    return reverseNames[rgb.slice(0, 3)];
+  };
+  function clamp(num, min, max) {
+    return Math.min(Math.max(min, num), max);
+  }
+  function hexDouble(num) {
+    var str = Math.round(num).toString(16).toUpperCase();
+    return str.length < 2 ? "0" + str : str;
+  }
+  var colorStringExports = colorString$1.exports;
+  const cssKeywords = colorName;
+  const reverseKeywords = {};
+  for (const key of Object.keys(cssKeywords)) {
+    reverseKeywords[cssKeywords[key]] = key;
+  }
+  const convert$2 = {
+    rgb: { channels: 3, labels: "rgb" },
+    hsl: { channels: 3, labels: "hsl" },
+    hsv: { channels: 3, labels: "hsv" },
+    hwb: { channels: 3, labels: "hwb" },
+    cmyk: { channels: 4, labels: "cmyk" },
+    xyz: { channels: 3, labels: "xyz" },
+    lab: { channels: 3, labels: "lab" },
+    lch: { channels: 3, labels: "lch" },
+    hex: { channels: 1, labels: ["hex"] },
+    keyword: { channels: 1, labels: ["keyword"] },
+    ansi16: { channels: 1, labels: ["ansi16"] },
+    ansi256: { channels: 1, labels: ["ansi256"] },
+    hcg: { channels: 3, labels: ["h", "c", "g"] },
+    apple: { channels: 3, labels: ["r16", "g16", "b16"] },
+    gray: { channels: 1, labels: ["gray"] }
+  };
+  var conversions$2 = convert$2;
+  for (const model of Object.keys(convert$2)) {
+    if (!("channels" in convert$2[model])) {
+      throw new Error("missing channels property: " + model);
+    }
+    if (!("labels" in convert$2[model])) {
+      throw new Error("missing channel labels property: " + model);
+    }
+    if (convert$2[model].labels.length !== convert$2[model].channels) {
+      throw new Error("channel and label counts mismatch: " + model);
+    }
+    const { channels, labels } = convert$2[model];
+    delete convert$2[model].channels;
+    delete convert$2[model].labels;
+    Object.defineProperty(convert$2[model], "channels", { value: channels });
+    Object.defineProperty(convert$2[model], "labels", { value: labels });
+  }
+  convert$2.rgb.hsl = function(rgb) {
+    const r = rgb[0] / 255;
+    const g = rgb[1] / 255;
+    const b = rgb[2] / 255;
+    const min = Math.min(r, g, b);
+    const max = Math.max(r, g, b);
+    const delta = max - min;
+    let h;
+    let s;
+    if (max === min) {
+      h = 0;
+    } else if (r === max) {
+      h = (g - b) / delta;
+    } else if (g === max) {
+      h = 2 + (b - r) / delta;
+    } else if (b === max) {
+      h = 4 + (r - g) / delta;
+    }
+    h = Math.min(h * 60, 360);
+    if (h < 0) {
+      h += 360;
+    }
+    const l = (min + max) / 2;
+    if (max === min) {
+      s = 0;
+    } else if (l <= 0.5) {
+      s = delta / (max + min);
+    } else {
+      s = delta / (2 - max - min);
+    }
+    return [h, s * 100, l * 100];
+  };
+  convert$2.rgb.hsv = function(rgb) {
+    let rdif;
+    let gdif;
+    let bdif;
+    let h;
+    let s;
+    const r = rgb[0] / 255;
+    const g = rgb[1] / 255;
+    const b = rgb[2] / 255;
+    const v = Math.max(r, g, b);
+    const diff = v - Math.min(r, g, b);
+    const diffc = function(c) {
+      return (v - c) / 6 / diff + 1 / 2;
+    };
+    if (diff === 0) {
+      h = 0;
+      s = 0;
+    } else {
+      s = diff / v;
+      rdif = diffc(r);
+      gdif = diffc(g);
+      bdif = diffc(b);
+      if (r === v) {
+        h = bdif - gdif;
+      } else if (g === v) {
+        h = 1 / 3 + rdif - bdif;
+      } else if (b === v) {
+        h = 2 / 3 + gdif - rdif;
+      }
+      if (h < 0) {
+        h += 1;
+      } else if (h > 1) {
+        h -= 1;
+      }
+    }
+    return [
+      h * 360,
+      s * 100,
+      v * 100
+    ];
+  };
+  convert$2.rgb.hwb = function(rgb) {
+    const r = rgb[0];
+    const g = rgb[1];
+    let b = rgb[2];
+    const h = convert$2.rgb.hsl(rgb)[0];
+    const w = 1 / 255 * Math.min(r, Math.min(g, b));
+    b = 1 - 1 / 255 * Math.max(r, Math.max(g, b));
+    return [h, w * 100, b * 100];
+  };
+  convert$2.rgb.cmyk = function(rgb) {
+    const r = rgb[0] / 255;
+    const g = rgb[1] / 255;
+    const b = rgb[2] / 255;
+    const k = Math.min(1 - r, 1 - g, 1 - b);
+    const c = (1 - r - k) / (1 - k) || 0;
+    const m = (1 - g - k) / (1 - k) || 0;
+    const y = (1 - b - k) / (1 - k) || 0;
+    return [c * 100, m * 100, y * 100, k * 100];
+  };
+  function comparativeDistance(x, y) {
+    return (x[0] - y[0]) ** 2 + (x[1] - y[1]) ** 2 + (x[2] - y[2]) ** 2;
+  }
+  convert$2.rgb.keyword = function(rgb) {
+    const reversed = reverseKeywords[rgb];
+    if (reversed) {
+      return reversed;
+    }
+    let currentClosestDistance = Infinity;
+    let currentClosestKeyword;
+    for (const keyword of Object.keys(cssKeywords)) {
+      const value = cssKeywords[keyword];
+      const distance = comparativeDistance(rgb, value);
+      if (distance < currentClosestDistance) {
+        currentClosestDistance = distance;
+        currentClosestKeyword = keyword;
+      }
+    }
+    return currentClosestKeyword;
+  };
+  convert$2.keyword.rgb = function(keyword) {
+    return cssKeywords[keyword];
+  };
+  convert$2.rgb.xyz = function(rgb) {
+    let r = rgb[0] / 255;
+    let g = rgb[1] / 255;
+    let b = rgb[2] / 255;
+    r = r > 0.04045 ? ((r + 0.055) / 1.055) ** 2.4 : r / 12.92;
+    g = g > 0.04045 ? ((g + 0.055) / 1.055) ** 2.4 : g / 12.92;
+    b = b > 0.04045 ? ((b + 0.055) / 1.055) ** 2.4 : b / 12.92;
+    const x = r * 0.4124 + g * 0.3576 + b * 0.1805;
+    const y = r * 0.2126 + g * 0.7152 + b * 0.0722;
+    const z = r * 0.0193 + g * 0.1192 + b * 0.9505;
+    return [x * 100, y * 100, z * 100];
+  };
+  convert$2.rgb.lab = function(rgb) {
+    const xyz = convert$2.rgb.xyz(rgb);
+    let x = xyz[0];
+    let y = xyz[1];
+    let z = xyz[2];
+    x /= 95.047;
+    y /= 100;
+    z /= 108.883;
+    x = x > 8856e-6 ? x ** (1 / 3) : 7.787 * x + 16 / 116;
+    y = y > 8856e-6 ? y ** (1 / 3) : 7.787 * y + 16 / 116;
+    z = z > 8856e-6 ? z ** (1 / 3) : 7.787 * z + 16 / 116;
+    const l = 116 * y - 16;
+    const a = 500 * (x - y);
+    const b = 200 * (y - z);
+    return [l, a, b];
+  };
+  convert$2.hsl.rgb = function(hsl) {
+    const h = hsl[0] / 360;
+    const s = hsl[1] / 100;
+    const l = hsl[2] / 100;
+    let t2;
+    let t3;
+    let val;
+    if (s === 0) {
+      val = l * 255;
+      return [val, val, val];
+    }
+    if (l < 0.5) {
+      t2 = l * (1 + s);
+    } else {
+      t2 = l + s - l * s;
+    }
+    const t1 = 2 * l - t2;
+    const rgb = [0, 0, 0];
+    for (let i = 0; i < 3; i++) {
+      t3 = h + 1 / 3 * -(i - 1);
+      if (t3 < 0) {
+        t3++;
+      }
+      if (t3 > 1) {
+        t3--;
+      }
+      if (6 * t3 < 1) {
+        val = t1 + (t2 - t1) * 6 * t3;
+      } else if (2 * t3 < 1) {
+        val = t2;
+      } else if (3 * t3 < 2) {
+        val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
+      } else {
+        val = t1;
+      }
+      rgb[i] = val * 255;
+    }
+    return rgb;
+  };
+  convert$2.hsl.hsv = function(hsl) {
+    const h = hsl[0];
+    let s = hsl[1] / 100;
+    let l = hsl[2] / 100;
+    let smin = s;
+    const lmin = Math.max(l, 0.01);
+    l *= 2;
+    s *= l <= 1 ? l : 2 - l;
+    smin *= lmin <= 1 ? lmin : 2 - lmin;
+    const v = (l + s) / 2;
+    const sv = l === 0 ? 2 * smin / (lmin + smin) : 2 * s / (l + s);
+    return [h, sv * 100, v * 100];
+  };
+  convert$2.hsv.rgb = function(hsv) {
+    const h = hsv[0] / 60;
+    const s = hsv[1] / 100;
+    let v = hsv[2] / 100;
+    const hi = Math.floor(h) % 6;
+    const f = h - Math.floor(h);
+    const p = 255 * v * (1 - s);
+    const q = 255 * v * (1 - s * f);
+    const t = 255 * v * (1 - s * (1 - f));
+    v *= 255;
+    switch (hi) {
+      case 0:
+        return [v, t, p];
+      case 1:
+        return [q, v, p];
+      case 2:
+        return [p, v, t];
+      case 3:
+        return [p, q, v];
+      case 4:
+        return [t, p, v];
+      case 5:
+        return [v, p, q];
+    }
+  };
+  convert$2.hsv.hsl = function(hsv) {
+    const h = hsv[0];
+    const s = hsv[1] / 100;
+    const v = hsv[2] / 100;
+    const vmin = Math.max(v, 0.01);
+    let sl;
+    let l;
+    l = (2 - s) * v;
+    const lmin = (2 - s) * vmin;
+    sl = s * vmin;
+    sl /= lmin <= 1 ? lmin : 2 - lmin;
+    sl = sl || 0;
+    l /= 2;
+    return [h, sl * 100, l * 100];
+  };
+  convert$2.hwb.rgb = function(hwb) {
+    const h = hwb[0] / 360;
+    let wh = hwb[1] / 100;
+    let bl = hwb[2] / 100;
+    const ratio = wh + bl;
+    let f;
+    if (ratio > 1) {
+      wh /= ratio;
+      bl /= ratio;
+    }
+    const i = Math.floor(6 * h);
+    const v = 1 - bl;
+    f = 6 * h - i;
+    if ((i & 1) !== 0) {
+      f = 1 - f;
+    }
+    const n = wh + f * (v - wh);
+    let r;
+    let g;
+    let b;
+    switch (i) {
+      default:
+      case 6:
+      case 0:
+        r = v;
+        g = n;
+        b = wh;
+        break;
+      case 1:
+        r = n;
+        g = v;
+        b = wh;
+        break;
+      case 2:
+        r = wh;
+        g = v;
+        b = n;
+        break;
+      case 3:
+        r = wh;
+        g = n;
+        b = v;
+        break;
+      case 4:
+        r = n;
+        g = wh;
+        b = v;
+        break;
+      case 5:
+        r = v;
+        g = wh;
+        b = n;
+        break;
+    }
+    return [r * 255, g * 255, b * 255];
+  };
+  convert$2.cmyk.rgb = function(cmyk) {
+    const c = cmyk[0] / 100;
+    const m = cmyk[1] / 100;
+    const y = cmyk[2] / 100;
+    const k = cmyk[3] / 100;
+    const r = 1 - Math.min(1, c * (1 - k) + k);
+    const g = 1 - Math.min(1, m * (1 - k) + k);
+    const b = 1 - Math.min(1, y * (1 - k) + k);
+    return [r * 255, g * 255, b * 255];
+  };
+  convert$2.xyz.rgb = function(xyz) {
+    const x = xyz[0] / 100;
+    const y = xyz[1] / 100;
+    const z = xyz[2] / 100;
+    let r;
+    let g;
+    let b;
+    r = x * 3.2406 + y * -1.5372 + z * -0.4986;
+    g = x * -0.9689 + y * 1.8758 + z * 0.0415;
+    b = x * 0.0557 + y * -0.204 + z * 1.057;
+    r = r > 31308e-7 ? 1.055 * r ** (1 / 2.4) - 0.055 : r * 12.92;
+    g = g > 31308e-7 ? 1.055 * g ** (1 / 2.4) - 0.055 : g * 12.92;
+    b = b > 31308e-7 ? 1.055 * b ** (1 / 2.4) - 0.055 : b * 12.92;
+    r = Math.min(Math.max(0, r), 1);
+    g = Math.min(Math.max(0, g), 1);
+    b = Math.min(Math.max(0, b), 1);
+    return [r * 255, g * 255, b * 255];
+  };
+  convert$2.xyz.lab = function(xyz) {
+    let x = xyz[0];
+    let y = xyz[1];
+    let z = xyz[2];
+    x /= 95.047;
+    y /= 100;
+    z /= 108.883;
+    x = x > 8856e-6 ? x ** (1 / 3) : 7.787 * x + 16 / 116;
+    y = y > 8856e-6 ? y ** (1 / 3) : 7.787 * y + 16 / 116;
+    z = z > 8856e-6 ? z ** (1 / 3) : 7.787 * z + 16 / 116;
+    const l = 116 * y - 16;
+    const a = 500 * (x - y);
+    const b = 200 * (y - z);
+    return [l, a, b];
+  };
+  convert$2.lab.xyz = function(lab) {
+    const l = lab[0];
+    const a = lab[1];
+    const b = lab[2];
+    let x;
+    let y;
+    let z;
+    y = (l + 16) / 116;
+    x = a / 500 + y;
+    z = y - b / 200;
+    const y2 = y ** 3;
+    const x2 = x ** 3;
+    const z2 = z ** 3;
+    y = y2 > 8856e-6 ? y2 : (y - 16 / 116) / 7.787;
+    x = x2 > 8856e-6 ? x2 : (x - 16 / 116) / 7.787;
+    z = z2 > 8856e-6 ? z2 : (z - 16 / 116) / 7.787;
+    x *= 95.047;
+    y *= 100;
+    z *= 108.883;
+    return [x, y, z];
+  };
+  convert$2.lab.lch = function(lab) {
+    const l = lab[0];
+    const a = lab[1];
+    const b = lab[2];
+    let h;
+    const hr = Math.atan2(b, a);
+    h = hr * 360 / 2 / Math.PI;
+    if (h < 0) {
+      h += 360;
+    }
+    const c = Math.sqrt(a * a + b * b);
+    return [l, c, h];
+  };
+  convert$2.lch.lab = function(lch) {
+    const l = lch[0];
+    const c = lch[1];
+    const h = lch[2];
+    const hr = h / 360 * 2 * Math.PI;
+    const a = c * Math.cos(hr);
+    const b = c * Math.sin(hr);
+    return [l, a, b];
+  };
+  convert$2.rgb.ansi16 = function(args, saturation = null) {
+    const [r, g, b] = args;
+    let value = saturation === null ? convert$2.rgb.hsv(args)[2] : saturation;
+    value = Math.round(value / 50);
+    if (value === 0) {
+      return 30;
+    }
+    let ansi = 30 + (Math.round(b / 255) << 2 | Math.round(g / 255) << 1 | Math.round(r / 255));
+    if (value === 2) {
+      ansi += 60;
+    }
+    return ansi;
+  };
+  convert$2.hsv.ansi16 = function(args) {
+    return convert$2.rgb.ansi16(convert$2.hsv.rgb(args), args[2]);
+  };
+  convert$2.rgb.ansi256 = function(args) {
+    const r = args[0];
+    const g = args[1];
+    const b = args[2];
+    if (r === g && g === b) {
+      if (r < 8) {
+        return 16;
+      }
+      if (r > 248) {
+        return 231;
+      }
+      return Math.round((r - 8) / 247 * 24) + 232;
+    }
+    const ansi = 16 + 36 * Math.round(r / 255 * 5) + 6 * Math.round(g / 255 * 5) + Math.round(b / 255 * 5);
+    return ansi;
+  };
+  convert$2.ansi16.rgb = function(args) {
+    let color2 = args % 10;
+    if (color2 === 0 || color2 === 7) {
+      if (args > 50) {
+        color2 += 3.5;
+      }
+      color2 = color2 / 10.5 * 255;
+      return [color2, color2, color2];
+    }
+    const mult = (~~(args > 50) + 1) * 0.5;
+    const r = (color2 & 1) * mult * 255;
+    const g = (color2 >> 1 & 1) * mult * 255;
+    const b = (color2 >> 2 & 1) * mult * 255;
+    return [r, g, b];
+  };
+  convert$2.ansi256.rgb = function(args) {
+    if (args >= 232) {
+      const c = (args - 232) * 10 + 8;
+      return [c, c, c];
+    }
+    args -= 16;
+    let rem;
+    const r = Math.floor(args / 36) / 5 * 255;
+    const g = Math.floor((rem = args % 36) / 6) / 5 * 255;
+    const b = rem % 6 / 5 * 255;
+    return [r, g, b];
+  };
+  convert$2.rgb.hex = function(args) {
+    const integer = ((Math.round(args[0]) & 255) << 16) + ((Math.round(args[1]) & 255) << 8) + (Math.round(args[2]) & 255);
+    const string = integer.toString(16).toUpperCase();
+    return "000000".substring(string.length) + string;
+  };
+  convert$2.hex.rgb = function(args) {
+    const match = args.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);
+    if (!match) {
+      return [0, 0, 0];
+    }
+    let colorString2 = match[0];
+    if (match[0].length === 3) {
+      colorString2 = colorString2.split("").map((char) => {
+        return char + char;
+      }).join("");
+    }
+    const integer = parseInt(colorString2, 16);
+    const r = integer >> 16 & 255;
+    const g = integer >> 8 & 255;
+    const b = integer & 255;
+    return [r, g, b];
+  };
+  convert$2.rgb.hcg = function(rgb) {
+    const r = rgb[0] / 255;
+    const g = rgb[1] / 255;
+    const b = rgb[2] / 255;
+    const max = Math.max(Math.max(r, g), b);
+    const min = Math.min(Math.min(r, g), b);
+    const chroma = max - min;
+    let grayscale;
+    let hue;
+    if (chroma < 1) {
+      grayscale = min / (1 - chroma);
+    } else {
+      grayscale = 0;
+    }
+    if (chroma <= 0) {
+      hue = 0;
+    } else if (max === r) {
+      hue = (g - b) / chroma % 6;
+    } else if (max === g) {
+      hue = 2 + (b - r) / chroma;
+    } else {
+      hue = 4 + (r - g) / chroma;
+    }
+    hue /= 6;
+    hue %= 1;
+    return [hue * 360, chroma * 100, grayscale * 100];
+  };
+  convert$2.hsl.hcg = function(hsl) {
+    const s = hsl[1] / 100;
+    const l = hsl[2] / 100;
+    const c = l < 0.5 ? 2 * s * l : 2 * s * (1 - l);
+    let f = 0;
+    if (c < 1) {
+      f = (l - 0.5 * c) / (1 - c);
+    }
+    return [hsl[0], c * 100, f * 100];
+  };
+  convert$2.hsv.hcg = function(hsv) {
+    const s = hsv[1] / 100;
+    const v = hsv[2] / 100;
+    const c = s * v;
+    let f = 0;
+    if (c < 1) {
+      f = (v - c) / (1 - c);
+    }
+    return [hsv[0], c * 100, f * 100];
+  };
+  convert$2.hcg.rgb = function(hcg) {
+    const h = hcg[0] / 360;
+    const c = hcg[1] / 100;
+    const g = hcg[2] / 100;
+    if (c === 0) {
+      return [g * 255, g * 255, g * 255];
+    }
+    const pure = [0, 0, 0];
+    const hi = h % 1 * 6;
+    const v = hi % 1;
+    const w = 1 - v;
+    let mg = 0;
+    switch (Math.floor(hi)) {
+      case 0:
+        pure[0] = 1;
+        pure[1] = v;
+        pure[2] = 0;
+        break;
+      case 1:
+        pure[0] = w;
+        pure[1] = 1;
+        pure[2] = 0;
+        break;
+      case 2:
+        pure[0] = 0;
+        pure[1] = 1;
+        pure[2] = v;
+        break;
+      case 3:
+        pure[0] = 0;
+        pure[1] = w;
+        pure[2] = 1;
+        break;
+      case 4:
+        pure[0] = v;
+        pure[1] = 0;
+        pure[2] = 1;
+        break;
+      default:
+        pure[0] = 1;
+        pure[1] = 0;
+        pure[2] = w;
+    }
+    mg = (1 - c) * g;
+    return [
+      (c * pure[0] + mg) * 255,
+      (c * pure[1] + mg) * 255,
+      (c * pure[2] + mg) * 255
+    ];
+  };
+  convert$2.hcg.hsv = function(hcg) {
+    const c = hcg[1] / 100;
+    const g = hcg[2] / 100;
+    const v = c + g * (1 - c);
+    let f = 0;
+    if (v > 0) {
+      f = c / v;
+    }
+    return [hcg[0], f * 100, v * 100];
+  };
+  convert$2.hcg.hsl = function(hcg) {
+    const c = hcg[1] / 100;
+    const g = hcg[2] / 100;
+    const l = g * (1 - c) + 0.5 * c;
+    let s = 0;
+    if (l > 0 && l < 0.5) {
+      s = c / (2 * l);
+    } else if (l >= 0.5 && l < 1) {
+      s = c / (2 * (1 - l));
+    }
+    return [hcg[0], s * 100, l * 100];
+  };
+  convert$2.hcg.hwb = function(hcg) {
+    const c = hcg[1] / 100;
+    const g = hcg[2] / 100;
+    const v = c + g * (1 - c);
+    return [hcg[0], (v - c) * 100, (1 - v) * 100];
+  };
+  convert$2.hwb.hcg = function(hwb) {
+    const w = hwb[1] / 100;
+    const b = hwb[2] / 100;
+    const v = 1 - b;
+    const c = v - w;
+    let g = 0;
+    if (c < 1) {
+      g = (v - c) / (1 - c);
+    }
+    return [hwb[0], c * 100, g * 100];
+  };
+  convert$2.apple.rgb = function(apple) {
+    return [apple[0] / 65535 * 255, apple[1] / 65535 * 255, apple[2] / 65535 * 255];
+  };
+  convert$2.rgb.apple = function(rgb) {
+    return [rgb[0] / 255 * 65535, rgb[1] / 255 * 65535, rgb[2] / 255 * 65535];
+  };
+  convert$2.gray.rgb = function(args) {
+    return [args[0] / 100 * 255, args[0] / 100 * 255, args[0] / 100 * 255];
+  };
+  convert$2.gray.hsl = function(args) {
+    return [0, 0, args[0]];
+  };
+  convert$2.gray.hsv = convert$2.gray.hsl;
+  convert$2.gray.hwb = function(gray) {
+    return [0, 100, gray[0]];
+  };
+  convert$2.gray.cmyk = function(gray) {
+    return [0, 0, 0, gray[0]];
+  };
+  convert$2.gray.lab = function(gray) {
+    return [gray[0], 0, 0];
+  };
+  convert$2.gray.hex = function(gray) {
+    const val = Math.round(gray[0] / 100 * 255) & 255;
+    const integer = (val << 16) + (val << 8) + val;
+    const string = integer.toString(16).toUpperCase();
+    return "000000".substring(string.length) + string;
+  };
+  convert$2.rgb.gray = function(rgb) {
+    const val = (rgb[0] + rgb[1] + rgb[2]) / 3;
+    return [val / 255 * 100];
+  };
+  const conversions$1 = conversions$2;
+  function buildGraph() {
+    const graph = {};
+    const models2 = Object.keys(conversions$1);
+    for (let len = models2.length, i = 0; i < len; i++) {
+      graph[models2[i]] = {
+        // http://jsperf.com/1-vs-infinity
+        // micro-opt, but this is simple.
+        distance: -1,
+        parent: null
+      };
+    }
+    return graph;
+  }
+  function deriveBFS(fromModel) {
+    const graph = buildGraph();
+    const queue = [fromModel];
+    graph[fromModel].distance = 0;
+    while (queue.length) {
+      const current = queue.pop();
+      const adjacents = Object.keys(conversions$1[current]);
+      for (let len = adjacents.length, i = 0; i < len; i++) {
+        const adjacent = adjacents[i];
+        const node = graph[adjacent];
+        if (node.distance === -1) {
+          node.distance = graph[current].distance + 1;
+          node.parent = current;
+          queue.unshift(adjacent);
+        }
+      }
+    }
+    return graph;
+  }
+  function link(from, to) {
+    return function(args) {
+      return to(from(args));
+    };
+  }
+  function wrapConversion(toModel, graph) {
+    const path = [graph[toModel].parent, toModel];
+    let fn = conversions$1[graph[toModel].parent][toModel];
+    let cur = graph[toModel].parent;
+    while (graph[cur].parent) {
+      path.unshift(graph[cur].parent);
+      fn = link(conversions$1[graph[cur].parent][cur], fn);
+      cur = graph[cur].parent;
+    }
+    fn.conversion = path;
+    return fn;
+  }
+  var route$1 = function(fromModel) {
+    const graph = deriveBFS(fromModel);
+    const conversion = {};
+    const models2 = Object.keys(graph);
+    for (let len = models2.length, i = 0; i < len; i++) {
+      const toModel = models2[i];
+      const node = graph[toModel];
+      if (node.parent === null) {
+        continue;
+      }
+      conversion[toModel] = wrapConversion(toModel, graph);
+    }
+    return conversion;
+  };
+  const conversions = conversions$2;
+  const route = route$1;
+  const convert$1 = {};
+  const models = Object.keys(conversions);
+  function wrapRaw(fn) {
+    const wrappedFn = function(...args) {
+      const arg0 = args[0];
+      if (arg0 === void 0 || arg0 === null) {
+        return arg0;
+      }
+      if (arg0.length > 1) {
+        args = arg0;
+      }
+      return fn(args);
+    };
+    if ("conversion" in fn) {
+      wrappedFn.conversion = fn.conversion;
+    }
+    return wrappedFn;
+  }
+  function wrapRounded(fn) {
+    const wrappedFn = function(...args) {
+      const arg0 = args[0];
+      if (arg0 === void 0 || arg0 === null) {
+        return arg0;
+      }
+      if (arg0.length > 1) {
+        args = arg0;
+      }
+      const result = fn(args);
+      if (typeof result === "object") {
+        for (let len = result.length, i = 0; i < len; i++) {
+          result[i] = Math.round(result[i]);
+        }
+      }
+      return result;
+    };
+    if ("conversion" in fn) {
+      wrappedFn.conversion = fn.conversion;
+    }
+    return wrappedFn;
+  }
+  models.forEach((fromModel) => {
+    convert$1[fromModel] = {};
+    Object.defineProperty(convert$1[fromModel], "channels", { value: conversions[fromModel].channels });
+    Object.defineProperty(convert$1[fromModel], "labels", { value: conversions[fromModel].labels });
+    const routes = route(fromModel);
+    const routeModels = Object.keys(routes);
+    routeModels.forEach((toModel) => {
+      const fn = routes[toModel];
+      convert$1[fromModel][toModel] = wrapRounded(fn);
+      convert$1[fromModel][toModel].raw = wrapRaw(fn);
+    });
+  });
+  var colorConvert = convert$1;
+  const colorString = colorStringExports;
+  const convert = colorConvert;
+  const skippedModels = [
+    // To be honest, I don't really feel like keyword belongs in color convert, but eh.
+    "keyword",
+    // Gray conflicts with some method names, and has its own method defined.
+    "gray",
+    // Shouldn't really be in color-convert either...
+    "hex"
+  ];
+  const hashedModelKeys = {};
+  for (const model of Object.keys(convert)) {
+    hashedModelKeys[[...convert[model].labels].sort().join("")] = model;
+  }
+  const limiters = {};
+  function Color(object, model) {
+    if (!(this instanceof Color)) {
+      return new Color(object, model);
+    }
+    if (model && model in skippedModels) {
+      model = null;
+    }
+    if (model && !(model in convert)) {
+      throw new Error("Unknown model: " + model);
+    }
+    let i;
+    let channels;
+    if (object == null) {
+      this.model = "rgb";
+      this.color = [0, 0, 0];
+      this.valpha = 1;
+    } else if (object instanceof Color) {
+      this.model = object.model;
+      this.color = [...object.color];
+      this.valpha = object.valpha;
+    } else if (typeof object === "string") {
+      const result = colorString.get(object);
+      if (result === null) {
+        throw new Error("Unable to parse color from string: " + object);
+      }
+      this.model = result.model;
+      channels = convert[this.model].channels;
+      this.color = result.value.slice(0, channels);
+      this.valpha = typeof result.value[channels] === "number" ? result.value[channels] : 1;
+    } else if (object.length > 0) {
+      this.model = model || "rgb";
+      channels = convert[this.model].channels;
+      const newArray = Array.prototype.slice.call(object, 0, channels);
+      this.color = zeroArray(newArray, channels);
+      this.valpha = typeof object[channels] === "number" ? object[channels] : 1;
+    } else if (typeof object === "number") {
+      this.model = "rgb";
+      this.color = [
+        object >> 16 & 255,
+        object >> 8 & 255,
+        object & 255
+      ];
+      this.valpha = 1;
+    } else {
+      this.valpha = 1;
+      const keys = Object.keys(object);
+      if ("alpha" in object) {
+        keys.splice(keys.indexOf("alpha"), 1);
+        this.valpha = typeof object.alpha === "number" ? object.alpha : 0;
+      }
+      const hashedKeys = keys.sort().join("");
+      if (!(hashedKeys in hashedModelKeys)) {
+        throw new Error("Unable to parse color from object: " + JSON.stringify(object));
+      }
+      this.model = hashedModelKeys[hashedKeys];
+      const { labels } = convert[this.model];
+      const color2 = [];
+      for (i = 0; i < labels.length; i++) {
+        color2.push(object[labels[i]]);
+      }
+      this.color = zeroArray(color2);
+    }
+    if (limiters[this.model]) {
+      channels = convert[this.model].channels;
+      for (i = 0; i < channels; i++) {
+        const limit = limiters[this.model][i];
+        if (limit) {
+          this.color[i] = limit(this.color[i]);
+        }
+      }
+    }
+    this.valpha = Math.max(0, Math.min(1, this.valpha));
+    if (Object.freeze) {
+      Object.freeze(this);
+    }
+  }
+  Color.prototype = {
+    toString() {
+      return this.string();
+    },
+    toJSON() {
+      return this[this.model]();
+    },
+    string(places) {
+      let self2 = this.model in colorString.to ? this : this.rgb();
+      self2 = self2.round(typeof places === "number" ? places : 1);
+      const args = self2.valpha === 1 ? self2.color : [...self2.color, this.valpha];
+      return colorString.to[self2.model](args);
+    },
+    percentString(places) {
+      const self2 = this.rgb().round(typeof places === "number" ? places : 1);
+      const args = self2.valpha === 1 ? self2.color : [...self2.color, this.valpha];
+      return colorString.to.rgb.percent(args);
+    },
+    array() {
+      return this.valpha === 1 ? [...this.color] : [...this.color, this.valpha];
+    },
+    object() {
+      const result = {};
+      const { channels } = convert[this.model];
+      const { labels } = convert[this.model];
+      for (let i = 0; i < channels; i++) {
+        result[labels[i]] = this.color[i];
+      }
+      if (this.valpha !== 1) {
+        result.alpha = this.valpha;
+      }
+      return result;
+    },
+    unitArray() {
+      const rgb = this.rgb().color;
+      rgb[0] /= 255;
+      rgb[1] /= 255;
+      rgb[2] /= 255;
+      if (this.valpha !== 1) {
+        rgb.push(this.valpha);
+      }
+      return rgb;
+    },
+    unitObject() {
+      const rgb = this.rgb().object();
+      rgb.r /= 255;
+      rgb.g /= 255;
+      rgb.b /= 255;
+      if (this.valpha !== 1) {
+        rgb.alpha = this.valpha;
+      }
+      return rgb;
+    },
+    round(places) {
+      places = Math.max(places || 0, 0);
+      return new Color([...this.color.map(roundToPlace(places)), this.valpha], this.model);
+    },
+    alpha(value) {
+      if (value !== void 0) {
+        return new Color([...this.color, Math.max(0, Math.min(1, value))], this.model);
+      }
+      return this.valpha;
+    },
+    // Rgb
+    red: getset("rgb", 0, maxfn(255)),
+    green: getset("rgb", 1, maxfn(255)),
+    blue: getset("rgb", 2, maxfn(255)),
+    hue: getset(["hsl", "hsv", "hsl", "hwb", "hcg"], 0, (value) => (value % 360 + 360) % 360),
+    saturationl: getset("hsl", 1, maxfn(100)),
+    lightness: getset("hsl", 2, maxfn(100)),
+    saturationv: getset("hsv", 1, maxfn(100)),
+    value: getset("hsv", 2, maxfn(100)),
+    chroma: getset("hcg", 1, maxfn(100)),
+    gray: getset("hcg", 2, maxfn(100)),
+    white: getset("hwb", 1, maxfn(100)),
+    wblack: getset("hwb", 2, maxfn(100)),
+    cyan: getset("cmyk", 0, maxfn(100)),
+    magenta: getset("cmyk", 1, maxfn(100)),
+    yellow: getset("cmyk", 2, maxfn(100)),
+    black: getset("cmyk", 3, maxfn(100)),
+    x: getset("xyz", 0, maxfn(95.047)),
+    y: getset("xyz", 1, maxfn(100)),
+    z: getset("xyz", 2, maxfn(108.833)),
+    l: getset("lab", 0, maxfn(100)),
+    a: getset("lab", 1),
+    b: getset("lab", 2),
+    keyword(value) {
+      if (value !== void 0) {
+        return new Color(value);
+      }
+      return convert[this.model].keyword(this.color);
+    },
+    hex(value) {
+      if (value !== void 0) {
+        return new Color(value);
+      }
+      return colorString.to.hex(this.rgb().round().color);
+    },
+    hexa(value) {
+      if (value !== void 0) {
+        return new Color(value);
+      }
+      const rgbArray = this.rgb().round().color;
+      let alphaHex = Math.round(this.valpha * 255).toString(16).toUpperCase();
+      if (alphaHex.length === 1) {
+        alphaHex = "0" + alphaHex;
+      }
+      return colorString.to.hex(rgbArray) + alphaHex;
+    },
+    rgbNumber() {
+      const rgb = this.rgb().color;
+      return (rgb[0] & 255) << 16 | (rgb[1] & 255) << 8 | rgb[2] & 255;
+    },
+    luminosity() {
+      const rgb = this.rgb().color;
+      const lum = [];
+      for (const [i, element] of rgb.entries()) {
+        const chan = element / 255;
+        lum[i] = chan <= 0.04045 ? chan / 12.92 : ((chan + 0.055) / 1.055) ** 2.4;
+      }
+      return 0.2126 * lum[0] + 0.7152 * lum[1] + 0.0722 * lum[2];
+    },
+    contrast(color2) {
+      const lum1 = this.luminosity();
+      const lum2 = color2.luminosity();
+      if (lum1 > lum2) {
+        return (lum1 + 0.05) / (lum2 + 0.05);
+      }
+      return (lum2 + 0.05) / (lum1 + 0.05);
+    },
+    level(color2) {
+      const contrastRatio = this.contrast(color2);
+      if (contrastRatio >= 7) {
+        return "AAA";
+      }
+      return contrastRatio >= 4.5 ? "AA" : "";
+    },
+    isDark() {
+      const rgb = this.rgb().color;
+      const yiq = (rgb[0] * 2126 + rgb[1] * 7152 + rgb[2] * 722) / 1e4;
+      return yiq < 128;
+    },
+    isLight() {
+      return !this.isDark();
+    },
+    negate() {
+      const rgb = this.rgb();
+      for (let i = 0; i < 3; i++) {
+        rgb.color[i] = 255 - rgb.color[i];
+      }
+      return rgb;
+    },
+    lighten(ratio) {
+      const hsl = this.hsl();
+      hsl.color[2] += hsl.color[2] * ratio;
+      return hsl;
+    },
+    darken(ratio) {
+      const hsl = this.hsl();
+      hsl.color[2] -= hsl.color[2] * ratio;
+      return hsl;
+    },
+    saturate(ratio) {
+      const hsl = this.hsl();
+      hsl.color[1] += hsl.color[1] * ratio;
+      return hsl;
+    },
+    desaturate(ratio) {
+      const hsl = this.hsl();
+      hsl.color[1] -= hsl.color[1] * ratio;
+      return hsl;
+    },
+    whiten(ratio) {
+      const hwb = this.hwb();
+      hwb.color[1] += hwb.color[1] * ratio;
+      return hwb;
+    },
+    blacken(ratio) {
+      const hwb = this.hwb();
+      hwb.color[2] += hwb.color[2] * ratio;
+      return hwb;
+    },
+    grayscale() {
+      const rgb = this.rgb().color;
+      const value = rgb[0] * 0.3 + rgb[1] * 0.59 + rgb[2] * 0.11;
+      return Color.rgb(value, value, value);
+    },
+    fade(ratio) {
+      return this.alpha(this.valpha - this.valpha * ratio);
+    },
+    opaquer(ratio) {
+      return this.alpha(this.valpha + this.valpha * ratio);
+    },
+    rotate(degrees) {
+      const hsl = this.hsl();
+      let hue = hsl.color[0];
+      hue = (hue + degrees) % 360;
+      hue = hue < 0 ? 360 + hue : hue;
+      hsl.color[0] = hue;
+      return hsl;
+    },
+    mix(mixinColor, weight) {
+      if (!mixinColor || !mixinColor.rgb) {
+        throw new Error('Argument to "mix" was not a Color instance, but rather an instance of ' + typeof mixinColor);
+      }
+      const color1 = mixinColor.rgb();
+      const color2 = this.rgb();
+      const p = weight === void 0 ? 0.5 : weight;
+      const w = 2 * p - 1;
+      const a = color1.alpha() - color2.alpha();
+      const w1 = ((w * a === -1 ? w : (w + a) / (1 + w * a)) + 1) / 2;
+      const w2 = 1 - w1;
+      return Color.rgb(
+        w1 * color1.red() + w2 * color2.red(),
+        w1 * color1.green() + w2 * color2.green(),
+        w1 * color1.blue() + w2 * color2.blue(),
+        color1.alpha() * p + color2.alpha() * (1 - p)
+      );
+    }
+  };
+  for (const model of Object.keys(convert)) {
+    if (skippedModels.includes(model)) {
+      continue;
+    }
+    const { channels } = convert[model];
+    Color.prototype[model] = function(...args) {
+      if (this.model === model) {
+        return new Color(this);
+      }
+      if (args.length > 0) {
+        return new Color(args, model);
+      }
+      return new Color([...assertArray(convert[this.model][model].raw(this.color)), this.valpha], model);
+    };
+    Color[model] = function(...args) {
+      let color2 = args[0];
+      if (typeof color2 === "number") {
+        color2 = zeroArray(args, channels);
+      }
+      return new Color(color2, model);
+    };
+  }
+  function roundTo(number, places) {
+    return Number(number.toFixed(places));
+  }
+  function roundToPlace(places) {
+    return function(number) {
+      return roundTo(number, places);
+    };
+  }
+  function getset(model, channel, modifier) {
+    model = Array.isArray(model) ? model : [model];
+    for (const m of model) {
+      (limiters[m] || (limiters[m] = []))[channel] = modifier;
+    }
+    model = model[0];
+    return function(value) {
+      let result;
+      if (value !== void 0) {
+        if (modifier) {
+          value = modifier(value);
+        }
+        result = this[model]();
+        result.color[channel] = value;
+        return result;
+      }
+      result = this[model]().color[channel];
+      if (modifier) {
+        result = modifier(result);
+      }
+      return result;
+    };
+  }
+  function maxfn(max) {
+    return function(v) {
+      return Math.max(0, Math.min(max, v));
+    };
+  }
+  function assertArray(value) {
+    return Array.isArray(value) ? value : [value];
+  }
+  function zeroArray(array, length) {
+    for (let i = 0; i < length; i++) {
+      if (typeof array[i] !== "number") {
+        array[i] = 0;
+      }
+    }
+    return array;
+  }
+  var color = Color;
+  const Color$1 = /* @__PURE__ */ getDefaultExportFromCjs(color);
+  function hexToColor(hex) {
+    const colorIns = Color$1(hex);
+    return colorIns;
+  }
+  function colorToHex(color2) {
+    return color2.hex();
+  }
+  function getLightColorAndDepth(color2) {
+    const { h, s, v } = color2.hsv().object();
+    return {
+      color: Color$1.hsv(h, s, 100),
+      value: v
+    };
+  }
+  function getOriginColorByLightAndDepth(color2, value) {
+    const { h, s } = color2.hsv().object();
+    return Color$1.hsv(h, s, value);
+  }
+  function getOriginHexByLightAndDepth(color2, value) {
+    const originColor = getOriginColorByLightAndDepth(color2, value);
+    return colorToHex(originColor);
+  }
+  function useColorArea() {
+    const colorAreaCanvas = vue.ref();
+    const canvasWidth = 255 * 6 + 1;
+    const canvasHeight = 256;
+    function drawColorArea() {
+      if (!colorAreaCanvas.value) {
+        return;
+      }
+      const canvas = colorAreaCanvas.value;
+      canvas.width = canvasWidth;
+      canvas.height = canvasHeight;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        return;
+      }
+      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+      const colorGradient = ctx.createLinearGradient(0, 0, canvasWidth, 0);
+      colorGradient.addColorStop(0, "#FF0000");
+      colorGradient.addColorStop(1 / 6, "#FFFF00");
+      colorGradient.addColorStop(1 / 3, "#00FF00");
+      colorGradient.addColorStop(1 / 2, "#00FFFF");
+      colorGradient.addColorStop(2 / 3, "#0000FF");
+      colorGradient.addColorStop(5 / 6, "#FF00FF");
+      colorGradient.addColorStop(1, "#FF0000");
+      ctx.fillStyle = colorGradient;
+      ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+      const whiteGradient = ctx.createLinearGradient(0, canvasHeight, 0, 0);
+      whiteGradient.addColorStop(0, "rgb(255 255 255 / 100%)");
+      whiteGradient.addColorStop(1, "rgb(255 255 255 / 0%)");
+      ctx.fillStyle = whiteGradient;
+      ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+    }
+    function getCoordinateByHex(hex) {
+      const color2 = hexToColor(hex);
+      return getCoordinateByColor(color2);
+    }
+    function getCoordinateByColor(color2) {
+      const { r, g, b } = color2.rgb().object();
+      const colorItems = [
+        {
+          type: "r",
+          value: r
+        },
+        {
+          type: "g",
+          value: g
+        },
+        {
+          type: "b",
+          value: b
+        }
+      ];
+      colorItems.sort((a, b2) => b2.value - a.value);
+      const maxColor = colorItems[0];
+      const secondColor = colorItems[1];
+      const curColorType = maxColor.type + secondColor.type;
+      let coordinateX = 0;
+      let coordinateY = colorItems[2].value;
+      if (curColorType === "rg" || curColorType === "gr") {
+        coordinateX = 255;
+        if (secondColor.type === "r") {
+          coordinateX += 255 - getSecondColorDistance(coordinateY, secondColor.value);
+        } else {
+          coordinateX -= 255 - getSecondColorDistance(coordinateY, secondColor.value);
+        }
+      } else if (curColorType === "gb" || curColorType === "bg") {
+        coordinateX = 255 * 3;
+        if (secondColor.type === "g") {
+          coordinateX += 255 - getSecondColorDistance(coordinateY, secondColor.value);
+        } else {
+          coordinateX -= 255 - getSecondColorDistance(coordinateY, secondColor.value);
+        }
+      } else if (curColorType === "rb" || curColorType === "br") {
+        coordinateX = 255 * 5;
+        if (secondColor.type === "b") {
+          coordinateX += 255 - getSecondColorDistance(coordinateY, secondColor.value);
+        } else {
+          coordinateX -= 255 - getSecondColorDistance(coordinateY, secondColor.value);
+        }
+      }
+      return {
+        x: coordinateX,
+        y: coordinateY
+      };
+    }
+    function getSecondColorDistance(y, target) {
+      return y === 255 ? 255 : (255 * target - 255 * y) / (255 - y);
+    }
+    function getColorByCoordinate(x, y, width, height) {
+      if (!colorAreaCanvas.value) {
+        return Color$1();
+      }
+      const scaleX = canvasWidth / width;
+      const scaleY = canvasHeight / height;
+      x = Math.min(x * scaleX, canvasWidth - 1);
+      y = Math.min(y * scaleY, canvasHeight - 1);
+      const color2 = getBaseColorFromCoodinage(x, y);
+      return color2;
+    }
+    function getBaseColorFromCoodinage(x, y) {
+      let r = 0;
+      let g = 0;
+      let b = 0;
+      const COLOR_GAP = 255;
+      const redRange = numberInGap(x, 0, COLOR_GAP) || numberInGap(x, COLOR_GAP * 5, COLOR_GAP * 6);
+      const greenRange = numberInGap(x, COLOR_GAP, COLOR_GAP * 3);
+      const blueRange = numberInGap(x, COLOR_GAP * 3, COLOR_GAP * 5);
+      if (redRange) {
+        r = 255;
+      } else if (x <= COLOR_GAP * 2) {
+        r = Math.max(2 * COLOR_GAP - x, 0);
+      } else if (x >= COLOR_GAP * 4) {
+        r = Math.max(x - COLOR_GAP * 4, 0);
+      }
+      if (greenRange) {
+        g = 255;
+      } else if (x < COLOR_GAP) {
+        g = Math.max(x, 0);
+      } else {
+        g = Math.max(COLOR_GAP * 4 - x, 0);
+      }
+      if (blueRange) {
+        b = 255;
+      } else if (x < COLOR_GAP * 3) {
+        b = Math.max(x - COLOR_GAP * 2, 0);
+      } else {
+        b = Math.max(COLOR_GAP * 6 - x, 0);
+      }
+      const rGap = COLOR_GAP - r;
+      const gGap = COLOR_GAP - g;
+      const bGap = COLOR_GAP - b;
+      const scale = y / COLOR_GAP;
+      r += rGap * scale;
+      g += gGap * scale;
+      b += bGap * scale;
+      return Color$1.rgb(r, g, b);
+    }
+    function numberInGap(num, begin, end) {
+      return num >= begin && num <= end;
+    }
+    vue.onMounted(() => {
+      drawColorArea();
+    });
+    return {
+      canvasWidth,
+      canvasHeight,
+      colorAreaCanvas,
+      drawColorArea,
+      getCoordinateByColor,
+      getCoordinateByHex,
+      getColorByCoordinate
+    };
+  }
+  function throttle(fn, time = 200) {
+    let timer = null;
+    return function(...args) {
+      const ctx = this;
+      if (timer) {
+        return;
+      } else {
+        timer = window.setTimeout(() => {
+          fn.apply(ctx, args);
+          timer = null;
+        }, time);
+      }
+    };
+  }
+  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() {
+    const colorAreaRef = vue.ref();
+    const circlePickerCoordinate = vue.reactive({
+      x: 0,
+      y: 0
+    });
+    function handleTouchStart(e) {
+      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 (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) {
+      document.body.addEventListener("mousemove", handleMouseMove);
+      document.body.addEventListener("mouseup", handleMouseUp);
+      handleCirclePickerCoordinateChange({
+        x: e.clientX,
+        y: e.clientY
+      });
+    }
+    function handleMouseMove(e) {
+      handleCirclePickerCoordinateChange({
+        x: e.clientX,
+        y: e.clientY
+      });
+    }
+    const handleCirclePickerCoordinateChange = throttle(handleCirclePickerCoordinateChangeFn, 20);
+    function handleCirclePickerCoordinateChangeFn(point) {
+      var _a;
+      const { x: clientX, y: clientY } = 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 = Math.round(x);
+      circlePickerCoordinate.y = Math.round(y);
+    }
+    function handleMouseUp() {
+      document.body.removeEventListener("mousemove", handleMouseMove);
+      document.body.removeEventListener("mouseup", handleMouseUp);
+    }
+    function setCirclePickerCoordinate(x, y, width, height) {
+      var _a;
+      const colorAreaRect = (_a = colorAreaRef.value) == null ? void 0 : _a.getBoundingClientRect();
+      if (!colorAreaRect) {
+        return;
+      }
+      const { width: AreaWidth, height: AreaHeight } = colorAreaRect;
+      const scaleX = AreaWidth / width;
+      const scaleY = AreaHeight / height;
+      circlePickerCoordinate.x = x * scaleX;
+      circlePickerCoordinate.y = y * scaleY;
+    }
+    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);
+      }
+    });
+    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);
+      }
+    });
+    return {
+      colorAreaRef,
+      circlePickerCoordinate,
+      setCirclePickerCoordinate
+    };
+  }
+  const _hoisted_1$3 = { class: "color-form" };
+  const _hoisted_2$2 = { class: "hex-color mb-12" };
+  const _hoisted_3$2 = { class: "form-group mb-12" };
+  const _hoisted_4$2 = { class: "form-group mb-12" };
+  const DEFAULT_COLOR$1 = "#ffffff";
+  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+    __name: "ColorForm",
+    props: {
+      modelValue: {}
+    },
+    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 formInputRGB = vue.reactive(
+        Color$1(hexColor.value || DEFAULT_COLOR$1).rgb().object()
+      );
+      const formInputHSV = vue.reactive(
+        Color$1(hexColor.value || DEFAULT_COLOR$1).hsv().object()
+      );
+      function hexFormater(value) {
+        return `#${value.replace(/[^0-9A-F]/gi, "").slice(0, 6).toUpperCase()}`;
+      }
+      vue.watch(
+        () => props.modelValue,
+        (value) => {
+          const colorIns = Color$1(value);
+          hexColor.value = colorIns.hex();
+          const { r, g, b } = colorIns.rgb().object();
+          const { h, s, v } = colorIns.hsv().object();
+          Object.assign(formInputRGB, {
+            r,
+            g,
+            b
+          });
+          Object.assign(formInputHSV, {
+            h,
+            s,
+            v
+          });
+        }
+      );
+      function handleHexColorChange() {
+        let value = hexColor.value || "";
+        const len = value.replace(/[^0-9A-F]/gi, "").length;
+        if (len === 6) {
+          emits("change", hexColor.value);
+        } else {
+          hexColor.value = props.modelValue;
+        }
+      }
+      function handleRgbColorChange() {
+        const { r, g, b } = formInputRGB;
+        emits("change", Color$1.rgb(r, g, b).hex().toString());
+      }
+      function handleHsvColorChange() {
+        const { h, s, v } = formInputHSV;
+        emits("change", Color$1.hsv(h, s, v).hex().toString());
+      }
+      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, [
+            vue.createVNode(_component_el_input, {
+              modelValue: hexColor.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => hexColor.value = $event),
+              formatter: hexFormater,
+              onChange: handleHexColorChange
+            }, null, 8, ["modelValue"])
+          ]),
+          vue.createElementVNode("div", _hoisted_3$2, [
+            _cache[7] || (_cache[7] = vue.createElementVNode("div", { class: "label" }, "RGB", -1)),
+            vue.createVNode(_component_el_input_number, {
+              modelValue: formInputRGB.r,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => formInputRGB.r = $event),
+              onChange: handleRgbColorChange,
+              "step-strictly": "",
+              min: 0,
+              max: 255,
+              step: 1,
+              controls: false
+            }, null, 8, ["modelValue"]),
+            vue.createVNode(_component_el_input_number, {
+              modelValue: formInputRGB.g,
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => formInputRGB.g = $event),
+              onChange: handleRgbColorChange,
+              "step-strictly": "",
+              min: 0,
+              max: 255,
+              step: 1,
+              controls: false
+            }, null, 8, ["modelValue"]),
+            vue.createVNode(_component_el_input_number, {
+              modelValue: formInputRGB.b,
+              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => formInputRGB.b = $event),
+              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: "label" }, "HSV", -1)),
+            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,
+              "step-strictly": "",
+              step: 1,
+              controls: false
+            }, null, 8, ["modelValue"]),
+            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,
+              "step-strictly": "",
+              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,
+              "step-strictly": "",
+              min: 0,
+              max: 100,
+              controls: false
+            }, null, 8, ["modelValue"])
+          ])
+        ]);
+      };
+    }
+  });
+  const _export_sfc = (sfc, props) => {
+    const target = sfc.__vccOpts || sfc;
+    for (const [key, val] of props) {
+      target[key] = val;
+    }
+    return target;
+  };
+  const ColorForm = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-30715da5"]]);
+  const _hoisted_1$2 = { class: "preset-colors" };
+  const _hoisted_2$1 = { class: "preset-colors_title" };
+  const _hoisted_3$1 = { class: "preset-color_list" };
+  const _hoisted_4$1 = ["onClick"];
+  const _sfc_main$4 = /* @__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$2, [
+          vue.createElementVNode("div", _hoisted_2$1, vue.toDisplayString(props.title || "系统预设色彩"), 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", {
+                class: "preset-color_list-item",
+                onClick: ($event) => handleClickColor(color2),
+                key: color2,
+                style: vue.normalizeStyle({ backgroundColor: color2 })
+              }, null, 12, _hoisted_4$1);
+            }), 128))
+          ])
+        ]);
+      };
+    }
+  });
+  const PresetColors = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-bf94ca7c"]]);
+  const _hoisted_1$1 = { class: "color-picker" };
+  const _hoisted_2 = { class: "title" };
+  const _hoisted_3 = { class: "color-area__wrapper" };
+  const _hoisted_4 = { class: "slider-color" };
+  const DEFAULT_COLOR = "#ffffff";
+  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "HvColorPicker"
+    },
+    __name: "ColorPicker",
+    props: /* @__PURE__ */ vue.mergeModels({
+      title: {},
+      presetTitle: {},
+      presetColors: {}
+    }, {
+      "modelValue": {
+        type: String,
+        default: DEFAULT_COLOR
+      },
+      "modelModifiers": {}
+    }),
+    emits: /* @__PURE__ */ vue.mergeModels(["update:model-value"], ["update:modelValue"]),
+    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;
+        }
+        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) {
+        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$1, [
+          vue.createElementVNode("div", _hoisted_2, vue.toDisplayString(props.title || "颜色编辑器"), 1),
+          vue.createElementVNode("div", _hoisted_3, [
+            vue.createElementVNode("div", {
+              class: "color-area",
+              ref_key: "colorAreaRef",
+              ref: colorAreaRef
+            }, [
+              vue.createElementVNode("canvas", {
+                ref_key: "colorAreaCanvas",
+                ref: colorAreaCanvas
+              }, null, 512),
+              vue.createElementVNode("div", {
+                class: "cur-color-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: "origin-color",
+              style: vue.normalizeStyle({ backgroundColor: originHexColor.value })
+            }, null, 4)
+          ]),
+          vue.createVNode(ColorForm, {
+            "model-value": color2.value,
+            onChange: handleColorChange
+          }, null, 8, ["model-value"]),
+          vue.createVNode(PresetColors, {
+            onChange: handleColorChange,
+            title: props.presetTitle,
+            presetColors: props.presetColors
+          }, null, 8, ["title", "presetColors"])
+        ]);
+      };
+    }
+  });
+  const ColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-e1675222"]]);
+  const HvColorPicker = withInstall(ColorPicker);
+  class DnDManager extends EventBus {
+    constructor() {
+      super();
+      /** 是否开始拖动 */
+      __publicField(this, "isDragStart", false);
+      /** 拖动元素类型 */
+      __publicField(this, "dragType");
+      /** Draggable传递的数据，
+       * 供Droppable使用
+       */
+      __publicField(this, "dragData");
+      __publicField(this, "isSendFirstMovePos", false);
+      /** 移动端长按一定时间才触发 onStart */
+      __publicField(this, "touchStartPressTime", 300);
+      /** touchstart事件触发的时的时间 */
+      __publicField(this, "touchStartTime", 0);
+      /** touchstart时间触发的位置 */
+      __publicField(this, "touchStartPosition", { x: 0, y: 0 });
+      /** onMove最后位置 */
+      __publicField(this, "lastMovePoint", { x: 0, y: 0 });
+      __publicField(this, "emitTouchStartTimer");
+      __publicField(this, "destroy", () => {
+      });
+      this.bindEventListener();
+    }
+    updateDargInfo(type, data) {
+      if (type === void 0 || type === null) {
+        throw new Error("请传入拖动元素 type");
+      }
+      this.isDragStart = true;
+      this.dragType = type;
+      this.dragData = data;
+      this.emitTouchStartTimer && clearTimeout(this.emitTouchStartTimer);
+      this.emitTouchStartTimer = void 0;
+    }
+    /**
+     * 通知 Draggable 开始点击
+     * @param point
+     */
+    onDown(point) {
+      this.emit("down", point);
+    }
+    /**
+     * 通知 Draggable 拖拽开始
+     * @param point
+     */
+    onFirstMove(point, e) {
+      if (this.isDragStart) {
+        return;
+      }
+      this.isSendFirstMovePos = true;
+      this.emit("first-move", point, e);
+    }
+    /**
+     * 通知 Draggable 拖拽开始
+     * @param point
+     */
+    onStart(point) {
+      if (this.isDragStart) {
+        return;
+      }
+      this.emit("start", point);
+    }
+    /**
+     * 通知 Draggable 移动
+     * @param point
+     * @returns
+     */
+    onMove(point) {
+      if (!this.isDragStart || !this.dragType) {
+        return;
+      }
+      this.lastMovePoint = point;
+      this.emit("move", {
+        type: this.dragType,
+        data: this.dragData,
+        point
+      });
+    }
+    /**
+     * 结束拖拽
+     * @returns
+     */
+    onEnd() {
+      this.emitTouchStartTimer && clearTimeout(this.emitTouchStartTimer);
+      this.emitTouchStartTimer = void 0;
+      this.isSendFirstMovePos = false;
+      if (!this.isDragStart || !this.dragType) {
+        return;
+      }
+      this.isDragStart = false;
+      this.emit("end", {
+        point: this.lastMovePoint,
+        type: this.dragType,
+        data: this.dragData
+      });
+    }
+    onMouseDown(e) {
+      if (e.buttons !== 1) {
+        this.onEnd();
+        return;
+      }
+      const { clientX, clientY } = e;
+      const position = {
+        x: clientX,
+        y: clientY
+      };
+      this.touchStartTime = Date.now();
+      this.touchStartPosition = position;
+      this.emitTouchStartTimer && clearTimeout(this.emitTouchStartTimer);
+      this.onDown(position);
+      this.emitTouchStartTimer = window.setTimeout(() => {
+        this.onStart(position);
+      }, this.touchStartPressTime);
+    }
+    onMouseMove(e) {
+      if (e.buttons !== 1) {
+        this.onEnd();
+        return;
+      }
+      const { clientX, clientY } = e;
+      if (this.isDragStart) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.onMove({
+          x: clientX,
+          y: clientY
+        });
+      } else {
+        if (!this.isSendFirstMovePos) {
+          this.onFirstMove(
+            {
+              x: clientX,
+              y: clientY
+            },
+            e
+          );
+        }
+        const { x, y } = this.touchStartPosition;
+        const timeInLimit = Date.now() - this.touchStartTime < this.touchStartPressTime;
+        if (timeInLimit && (Math.abs(x - clientX) > 30 || Math.abs(y - clientY) > 30)) {
+          clearTimeout(this.emitTouchStartTimer);
+          this.emitTouchStartTimer = void 0;
+        }
+      }
+    }
+    onMouseUp() {
+      this.onEnd();
+    }
+    onTouchStart(e) {
+      if (e.touches.length > 1) {
+        return;
+      }
+      const { clientX, clientY } = e.touches[0];
+      const position = {
+        x: clientX,
+        y: clientY
+      };
+      this.touchStartTime = Date.now();
+      this.touchStartPosition = position;
+      this.onDown(position);
+      this.emitTouchStartTimer = window.setTimeout(() => {
+        this.onStart(position);
+      }, this.touchStartPressTime);
+    }
+    onTouchMove(e) {
+      if (e.touches.length > 1) {
+        return;
+      }
+      const { clientX, clientY } = e.touches[0];
+      if (this.isDragStart) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.onMove({
+          x: clientX,
+          y: clientY
+        });
+      } else {
+        if (!this.isSendFirstMovePos) {
+          this.onFirstMove(
+            {
+              x: clientX,
+              y: clientY
+            },
+            e
+          );
+        }
+        const { x, y } = this.touchStartPosition;
+        const timeInLimit = Date.now() - this.touchStartTime < this.touchStartPressTime;
+        if (timeInLimit && (Math.abs(x - clientX) > 30 || Math.abs(y - clientY) > 30)) {
+          clearTimeout(this.emitTouchStartTimer);
+        }
+      }
+    }
+    onTouchEnd() {
+      this.onEnd();
+    }
+    bindEventListener() {
+      if (document.body) {
+        const onTouchStart = this.onTouchStart.bind(this);
+        const onTouchMove = this.onTouchMove.bind(this);
+        const onTouchEnd = this.onTouchEnd.bind(this);
+        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);
+        }
+        this.destroy = () => {
+          document.body.removeEventListener("touchstart", onTouchStart);
+          document.body.removeEventListener("touchmove", onTouchMove);
+          document.body.removeEventListener("touchend", onTouchEnd);
+          document.body.removeEventListener("mousedown", onMouseDown);
+          document.body.removeEventListener("mousemove", onMouseMove);
+          document.body.removeEventListener("mouseup", onMouseUp);
+        };
+      } else {
+        document.addEventListener("DOMContentLoaded", this.bindEventListener);
+      }
+    }
+    removeEventListener() {
+      this.destroy();
+    }
+    destroyed() {
+      this.isDragStart = false;
+      this.dragType = void 0;
+      this.dragData = void 0;
+      this.removeEventListener();
+    }
+  }
+  const DnDManagerInstance = new DnDManager();
+  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "HvDraggable"
+    },
+    __name: "Draggable",
+    props: {
+      type: {},
+      immediate: {},
+      disabled: { type: Boolean, default: false },
+      data: {}
+    },
+    setup(__props) {
+      const ImmediateEnumType = {
+        LEFT: "left",
+        RIGHT: "right",
+        TOP: "top",
+        BOTTOM: "bottom",
+        ALL: "all"
+      };
+      const props = __props;
+      const dragItemRef = vue.ref();
+      const isDownThis = vue.ref(false);
+      const downPosition = vue.reactive({
+        x: 0,
+        y: 0
+      });
+      const isDragThis = vue.ref(false);
+      const cloneNodePosition = vue.reactive({
+        x: 0,
+        y: 0
+      });
+      const immediateDirections = vue.computed(() => {
+        if (Array.isArray(props.immediate)) {
+          return props.immediate;
+        }
+        return props.immediate ? [props.immediate] : [];
+      });
+      const cloneNodeStyle = vue.computed(() => {
+        return {
+          transform: `translate(${cloneNodePosition.x}px, ${cloneNodePosition.y}px) translate(-50%, -50%)`
+        };
+      });
+      DnDManagerInstance.on("down", (params) => {
+        const { x, y } = params;
+        const startEl = document.elementFromPoint(x, y);
+        if (!props.disabled && dragItemRef.value && dragItemRef.value.contains(startEl)) {
+          if (immediateDirections.value.includes(ImmediateEnumType.ALL)) {
+            handleStart(params);
+            return;
+          }
+          isDownThis.value = true;
+          downPosition.x = x;
+          downPosition.y = y;
+        }
+      });
+      DnDManagerInstance.on("first-move", (params, event) => {
+        const { x, y } = params;
+        const directions = immediateDirections.value.filter((item) => item !== ImmediateEnumType.ALL);
+        if (isDownThis.value && !props.disabled && directions.length) {
+          const distanceH = x - downPosition.x;
+          const distanceHAbs = Math.abs(distanceH);
+          const distanceV = y - downPosition.y;
+          const distanceVAbs = Math.abs(distanceV);
+          const max = Math.max(distanceHAbs, distanceVAbs);
+          const isMaxH = distanceHAbs === max;
+          const isMaxV = distanceVAbs === max;
+          let isImmediate = false;
+          if (isMaxH) {
+            isImmediate = directions.includes(ImmediateEnumType.LEFT) && distanceH < 0 || directions.includes(ImmediateEnumType.RIGHT) && distanceH > 0;
+          }
+          if (isMaxV && !isImmediate) {
+            isImmediate = directions.includes(ImmediateEnumType.TOP) && distanceV < 0 || directions.includes(ImmediateEnumType.BOTTOM) && distanceV > 0;
+          }
+          if (isImmediate) {
+            event.preventDefault();
+            event.stopPropagation();
+            handleStart(downPosition);
+            handleMove(params);
+            return;
+          }
+        }
+      });
+      DnDManagerInstance.on("start", (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 { point } = params;
+        if (isDragThis.value) {
+          handleMove(point);
+        }
+      });
+      DnDManagerInstance.on("end", () => {
+        isDownThis.value = false;
+        isDragThis.value = false;
+        Object.assign(downPosition, {
+          x: 0,
+          y: 0
+        });
+        Object.assign(cloneNodePosition, {
+          x: 0,
+          y: 0
+        });
+      });
+      function handleStart(point) {
+        isDragThis.value = true;
+        cloneNodePosition.x = point.x;
+        cloneNodePosition.y = point.y;
+        DnDManagerInstance.updateDargInfo(props.type, props.data);
+      }
+      function handleMove(point) {
+        cloneNodePosition.x = point.x;
+        cloneNodePosition.y = point.y;
+      }
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          ref_key: "dragItemRef",
+          ref: dragItemRef,
+          class: vue.normalizeClass(["draggable-area", _ctx.disabled ? "disabled" : ""])
+        }, [
+          vue.renderSlot(_ctx.$slots, "default", {}, void 0, true),
+          isDragThis.value ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: "draggable-clone-item",
+            style: vue.normalizeStyle(cloneNodeStyle.value)
+          }, [
+            vue.renderSlot(_ctx.$slots, "drag-item", {}, () => [
+              vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ], true)
+          ], 4)) : vue.createCommentVNode("", true)
+        ], 2);
+      };
+    }
+  });
+  const Draggable = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-8361cd1f"]]);
+  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "HvDroppable"
+    },
+    __name: "Droppable",
+    props: {
+      acceptDragType: {}
+    },
+    emits: ["enter", "move", "drop", "leave"],
+    setup(__props, { emit: __emit }) {
+      const emits = __emit;
+      const props = __props;
+      const dropAreaRef = vue.ref();
+      const isEntered = vue.ref(false);
+      const acceptDragTypeList = vue.computed(() => {
+        return Array.isArray(props.acceptDragType) ? props.acceptDragType : [props.acceptDragType];
+      });
+      function getPositionInArea(point) {
+        if (!dropAreaRef.value) {
+          return {
+            isInArea: false,
+            position: {
+              x: 0,
+              y: 0
+            }
+          };
+        }
+        const { x: pointX, y: pointY } = point;
+        const { x, y, width, height } = dropAreaRef.value.getBoundingClientRect();
+        const posX = pointX - x;
+        const posY = pointY - y;
+        return {
+          isInArea: posX >= 0 && posX <= width && posY >= 0 && posY <= height,
+          position: {
+            x: posX,
+            y: posY
+          }
+        };
+      }
+      DnDManagerInstance.on("move", (params) => {
+        const { type, data, point } = params;
+        if (dropAreaRef.value && acceptDragTypeList.value.includes(type)) {
+          const { isInArea, position } = getPositionInArea(point);
+          if (isInArea) {
+            if (isEntered.value) {
+              emits("move", type, position, data);
+            } else {
+              isEntered.value = true;
+              emits("enter", type, position, data);
+            }
+          } else if (isEntered.value) {
+            isEntered.value = false;
+            emits("leave", type, data);
+          }
+        }
+      });
+      DnDManagerInstance.on("end", ({ type, point, data }) => {
+        if (dropAreaRef.value && acceptDragTypeList.value.includes(type) && isEntered.value) {
+          const { position } = getPositionInArea(point);
+          emits("drop", type, position, data);
+        }
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          ref_key: "dropAreaRef",
+          ref: dropAreaRef,
+          class: "droppable-area"
+        }, [
+          vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ], 512);
+      };
+    }
+  });
+  const Droppable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-a40b9a59"]]);
+  const HvDraggable = withInstall(Draggable);
+  const HvDroppable = withInstall(Droppable);
+  function useDragAndScale(target, operateTarget, options) {
+    const _options = vue.computed(() => {
+      return vue.isRef(options) ? vue.toValue(options) : options;
+    });
+    const _containerRealSize = vue.computed(() => {
+      return _options.value.containerRealSize;
+    });
+    const _keepRatio = vue.computed(() => {
+      const krOption = typeof _options.value.keepRatio === "boolean" ? {
+        enable: _options.value.keepRatio,
+        scaleCase: "min"
+        /* MIN */
+      } : _options.value.keepRatio;
+      return Object.assign(
+        {
+          scaleCase: "min",
+          enable: false
+        },
+        krOption || {}
+      );
+    });
+    const _limit = vue.computed(() => {
+      const limitOpt = Object.assign(
+        {
+          inContainer: true,
+          minWidth: 0,
+          minHeight: 0,
+          maxWidth: Infinity,
+          maxHeight: Infinity
+        },
+        _options.value.limit || {}
+      );
+      if (limitOpt.minWidth > limitOpt.maxWidth) {
+        limitOpt.maxWidth = limitOpt.minWidth;
+      }
+      if (limitOpt.minHeight > limitOpt.maxHeight) {
+        limitOpt.maxHeight = limitOpt.minHeight;
+      }
+      return limitOpt;
+    });
+    const _disabled = vue.computed(() => {
+      return _options.value.disabled || false;
+    });
+    const _targetEl = vue.computed(() => {
+      return vue.isRef(target) ? vue.toValue(target) : target;
+    });
+    const _containerEl = vue.computed(() => {
+      return _options.value.container;
+    });
+    const _operateEl = vue.computed(() => {
+      return vue.isRef(operateTarget) ? vue.toValue(operateTarget) : operateTarget;
+    });
+    let startPoint = {
+      x: 0,
+      y: 0
+    };
+    let lastOperatePoint = {
+      x: 0,
+      y: 0
+    };
+    let curOperatePoint = {
+      x: 0,
+      y: 0
+    };
+    const containerElSize = {
+      width: 0,
+      height: 0
+    };
+    const startArea = {
+      elX: 0,
+      elY: 0,
+      elWidth: 0,
+      elHeight: 0
+    };
+    const effectDirection = {
+      leftSide: false,
+      rightSide: false,
+      topSide: false,
+      bottomSide: false,
+      center: false
+    };
+    let isOperateStart = false;
+    let isMoved = false;
+    let realRateEl_w = 1;
+    let realRateEl_h = 1;
+    vue.watch(
+      () => _targetEl.value && _containerEl.value && _operateEl.value,
+      (value) => {
+        if (value) {
+          bindEvent();
+        } else {
+          removeEvent();
+        }
+      }
+    );
+    function onStart(point) {
+      if (_disabled.value) {
+        return;
+      }
+      startPoint = point;
+      curOperatePoint = point;
+      if (!_containerEl.value || !_targetEl.value) {
+        return;
+      }
+      const {
+        x: containerX,
+        y: containerY,
+        width: containerWidth,
+        height: containerHeight
+      } = _containerEl.value.getBoundingClientRect();
+      Object.assign(containerElSize, {
+        width: containerWidth,
+        height: containerHeight
+      });
+      if (_containerRealSize.value) {
+        const { width: realWdith, height: realHeight } = _containerRealSize.value;
+        realRateEl_w = realWdith / containerWidth;
+        realRateEl_h = realHeight / containerHeight;
+      } else {
+        realRateEl_w = 1;
+        realRateEl_h = 1;
+      }
+      const { x: targetX, y: targetY, width: targetW, height: targetH } = _targetEl.value.getBoundingClientRect();
+      const { x: startX, y: startY } = point;
+      Object.assign(startArea, {
+        elX: targetX - containerX,
+        elY: targetY - containerY,
+        elWidth: targetW,
+        elHeight: targetH
+      });
+      const touchEl = document.elementFromPoint(startX, startY);
+      if (!touchEl) {
+        return;
+      }
+      const sides = (touchEl.dataset["scaleSide"] || "").split(",").filter((item) => !!item);
+      if (!sides.length) {
+        return;
+      }
+      let leftSide = sides.includes("left");
+      let topSide = sides.includes("top");
+      let rightSide = sides.includes("right");
+      let bottomSide = sides.includes("bottom");
+      const center = sides.includes("center");
+      isOperateStart = true;
+      if (_keepRatio.value.enable && !center) {
+        if (startX - targetX <= targetW / 2 && startY - targetY <= targetH / 2) {
+          leftSide = true;
+          topSide = true;
+        }
+        if (startX - targetX > targetW / 2 && startY - targetY <= targetH / 2) {
+          rightSide = true;
+          topSide = true;
+        }
+        if (startX - targetX <= targetW / 2 && startY - targetY > targetH / 2) {
+          leftSide = true;
+          bottomSide = true;
+        }
+        if (startX - targetX > targetW / 2 && startY - targetY > targetH / 2) {
+          rightSide = true;
+          bottomSide = true;
+        }
+      }
+      Object.assign(effectDirection, {
+        leftSide,
+        rightSide,
+        topSide,
+        bottomSide,
+        center
+      });
+    }
+    function onMove(point) {
+      if (_disabled.value || isOperateStart !== true) {
+        isOperateStart = false;
+        return;
+      }
+      isMoved = true;
+      lastOperatePoint = curOperatePoint;
+      curOperatePoint = point;
+      const deltaX = point.x - startPoint.x;
+      const deltaY = point.y - startPoint.y;
+      let dX = 0;
+      let dY = 0;
+      let dW = 0;
+      let dH = 0;
+      const { elX, elY, elWidth, elHeight } = startArea;
+      const { minWidth, minHeight, maxWidth, maxHeight } = _limit.value;
+      const minElWidth = minWidth / realRateEl_w;
+      const minElHeight = minHeight / realRateEl_h;
+      const maxElWidth = maxWidth / realRateEl_w;
+      const maxElHeight = maxHeight / realRateEl_h;
+      if (effectDirection.center) {
+        const containerWidth = containerElSize.width;
+        const containerHeight = containerElSize.height;
+        if (_limit.value.inContainer) {
+          const distanceX = elX + deltaX < 0 ? -elX : elX + elWidth + deltaX > containerWidth ? containerWidth - elWidth - elX : deltaX;
+          const distanceY = elY + deltaY < 0 ? -elY : elY + elHeight + deltaY > containerHeight ? containerHeight - elHeight - elY : deltaY;
+          dX = distanceX;
+          dY = distanceY;
+        } else {
+          dX = deltaX;
+          dY = deltaY;
+        }
+      } else {
+        const { leftSide, rightSide, topSide, bottomSide } = effectDirection;
+        if (leftSide) {
+          let distance = _limit.value.inContainer && elX + deltaX < 0 ? -elX : deltaX;
+          if (elWidth - distance < minElWidth) {
+            distance = elWidth - minElWidth;
+          }
+          if (elWidth - distance > maxElWidth) {
+            distance = elWidth - maxElWidth;
+          }
+          dX = distance;
+          dW = -distance;
+        }
+        if (rightSide) {
+          const containerWidth = containerElSize.width;
+          let distance = _limit.value.inContainer && elX + elWidth + deltaX > containerWidth ? containerWidth - elWidth - elX : deltaX;
+          if (elWidth + distance < minElWidth) {
+            distance = minElWidth - elWidth;
+          }
+          if (elWidth + distance > maxElWidth) {
+            distance = maxElWidth - elWidth;
+          }
+          dW = distance;
+        }
+        if (topSide) {
+          let distance = _limit.value.inContainer && elY + deltaY < 0 ? -elY : deltaY;
+          if (elHeight - distance < minElHeight) {
+            distance = elHeight - minElHeight;
+          }
+          if (elHeight - distance > maxElHeight) {
+            distance = elHeight - maxElHeight;
+          }
+          dY = distance;
+          dH = -distance;
+        }
+        if (bottomSide) {
+          const containerHeight = containerElSize.height;
+          let distance = _limit.value.inContainer && elY + elHeight + deltaY > containerHeight ? containerHeight - elHeight - elY : deltaY;
+          if (elHeight + distance < minElHeight) {
+            distance = minElHeight - elHeight;
+          }
+          if (elHeight + distance > maxElHeight) {
+            distance = maxElHeight - elHeight;
+          }
+          dH = distance;
+        }
+        if (_keepRatio.value.enable) {
+          const dwR = dW / elWidth;
+          const dhR = dH / elHeight;
+          if (dwR < dhR && _keepRatio.value.scaleCase === "min" || dwR > dhR && _keepRatio.value.scaleCase === "max") {
+            dH = dwR * elHeight;
+            if (elHeight + dH < minElHeight) {
+              const originDw = dW;
+              dH = minElHeight - elHeight;
+              dW = dH / elHeight * elWidth;
+              dX = dX * (dW / originDw);
+            }
+            if (elHeight + dH > maxElHeight) {
+              const originDw = dW;
+              dH = maxElHeight - elHeight;
+              dW = dH / elHeight * elWidth;
+              dX = dX * (dW / originDw);
+            }
+            if (effectDirection.topSide) {
+              dY = -dH;
+            }
+          } else if (dhR < dwR && _keepRatio.value.scaleCase === "min" || dhR > dwR && _keepRatio.value.scaleCase === "max") {
+            dW = dhR * elWidth;
+            if (elWidth + dW < minElWidth) {
+              const originDh = dH;
+              dW = minElWidth - elWidth;
+              dH = dW / elWidth * elHeight;
+              dY = dY * (dH / originDh);
+            }
+            if (elWidth + dW > maxElWidth) {
+              const originDh = dH;
+              dW = maxElWidth - elWidth;
+              dH = dW / elWidth * elHeight;
+              dY = dY * (dH / originDh);
+            }
+            if (effectDirection.leftSide) {
+              dX = -dW;
+            }
+          }
+          const currentElX2 = elX + dX;
+          const currentElY2 = elY + dY;
+          const currentElW2 = elWidth + dW;
+          const currentElH2 = elHeight + dH;
+          if (_limit.value.inContainer && (currentElX2 < 0 || currentElY2 < 0 || currentElX2 + currentElW2 > containerElSize.width || currentElY2 + currentElH2 > containerElSize.height)) {
+            let clipX = currentElX2 < 0 ? 0 : currentElX2;
+            let clipY = currentElY2 < 0 ? 0 : currentElY2;
+            let clipW = currentElX2 + currentElW2 > containerElSize.width ? containerElSize.width - clipX : currentElX2 + currentElW2 - clipX;
+            let clipH = currentElY2 + currentElH2 > containerElSize.height ? containerElSize.height - clipY : currentElY2 + currentElH2 - clipY;
+            const clipX2 = clipX + clipW;
+            const clipY2 = clipY + clipH;
+            const clipRate = clipW / clipH;
+            const elRate = elWidth / elHeight;
+            if (clipRate < elRate) {
+              clipH = clipW / elRate;
+            } else if (clipRate > elRate) {
+              clipW = clipH * elRate;
+            }
+            const { topSide: topSide2, leftSide: leftSide2 } = effectDirection;
+            if (leftSide2) {
+              clipX = clipX2 - clipW;
+            }
+            if (topSide2) {
+              clipY = clipY2 - clipH;
+            }
+            dX = clipX - elX;
+            dY = clipY - elY;
+            dW = clipW - elWidth;
+            dH = clipH - elHeight;
+          }
+        }
+      }
+      const currentElX = elX + dX;
+      const currentElY = elY + dY;
+      const currentElW = elWidth + dW;
+      const currentElH = elHeight + dH;
+      _options.value.onChange && _options.value.onChange({
+        type: effectDirection.center ? "move" : "scale",
+        deltaX: curOperatePoint.x - lastOperatePoint.x,
+        deltaY: curOperatePoint.y - lastOperatePoint.y,
+        elX: currentElX,
+        elY: currentElY,
+        elWidth: currentElW,
+        elHeight: currentElH,
+        realX: currentElX * realRateEl_w,
+        realY: currentElY * realRateEl_h,
+        realWidth: currentElW * realRateEl_w,
+        realHeight: currentElH * realRateEl_h
+      });
+    }
+    function onEnd() {
+      lastOperatePoint = {
+        x: 0,
+        y: 0
+      };
+      curOperatePoint = {
+        x: 0,
+        y: 0
+      };
+      if (_disabled.value || isOperateStart !== true || !isMoved) {
+        isOperateStart = false;
+        isMoved = false;
+        return;
+      }
+      isOperateStart = false;
+      isMoved = false;
+      _options.value.onFinish && _options.value.onFinish();
+    }
+    function onTouchStart(e) {
+      e.preventDefault();
+      if (e.touches.length > 1) {
+        return;
+      }
+      const { clientX, clientY } = e.touches[0];
+      onStart({
+        x: clientX,
+        y: clientY
+      });
+      document.body.addEventListener("touchcancel", onTouchEnd, { capture: true });
+      document.body.addEventListener("touchmove", onTouchMove, { capture: true });
+      document.body.addEventListener("touchend", onTouchEnd, { capture: true });
+    }
+    function onTouchMove(e) {
+      if (_disabled.value || isOperateStart !== true) {
+        isOperateStart = false;
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      if (e.touches.length > 1) {
+        onEnd();
+        return;
+      }
+      const { clientX, clientY } = e.touches[0];
+      if (clientX === startPoint.x && clientY === startPoint.y) {
+        return;
+      }
+      onMove({
+        x: clientX,
+        y: clientY
+      });
+    }
+    function onTouchEnd() {
+      document.body.removeEventListener("touchmove", onTouchMove);
+      document.body.removeEventListener("touchend", onTouchEnd);
+      document.body.removeEventListener("touchcancel", onTouchEnd);
+      if (_disabled.value || isOperateStart !== true) {
+        isOperateStart = false;
+        isMoved = false;
+        return;
+      }
+      onEnd();
+    }
+    function onMouseDown(e) {
+      e.preventDefault();
+      if ((e.buttons & 1) === 0) {
+        return;
+      }
+      const { clientX, clientY } = e;
+      onStart({
+        x: clientX,
+        y: clientY
+      });
+      document.body.addEventListener("mousemove", onMouseMove, { capture: true });
+      document.body.addEventListener("mouseup", onMouseUp, { capture: true });
+    }
+    function onMouseMove(e) {
+      if (_disabled.value || isOperateStart !== true) {
+        isOperateStart = false;
+        return;
+      }
+      e.preventDefault();
+      if ((e.buttons & 1) === 0) {
+        onEnd();
+        return;
+      }
+      const { clientX, clientY } = e;
+      onMove({
+        x: clientX,
+        y: clientY
+      });
+    }
+    function onMouseUp() {
+      document.body.removeEventListener("mousemove", onMouseMove);
+      document.body.removeEventListener("mouseup", onMouseUp);
+      if (_disabled.value || isOperateStart !== true) {
+        isOperateStart = false;
+        return;
+      }
+      onEnd();
+    }
+    function bindEvent() {
+      removeEvent();
+      if (isMobile) {
+        _operateEl.value.addEventListener("touchstart", onTouchStart, { capture: true });
+      } else {
+        _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);
+      }
+    }
+    vue.onBeforeUnmount(() => {
+      isOperateStart = false;
+      removeEvent();
+    });
+  }
+  const _hoisted_1 = { class: "zoom-mark-box" };
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "HvDragAndScale"
+    },
+    __name: "DragAndScale",
+    props: {
+      container: {},
+      containerRealSize: {},
+      keepRatio: { type: [Boolean, Object] },
+      limit: {},
+      disabled: { type: Boolean }
+    },
+    emits: ["change", "finish"],
+    setup(__props, { emit: __emit }) {
+      const emits = __emit;
+      const props = __props;
+      const targetRef = vue.ref();
+      const operateRef = vue.ref();
+      function onChange(params) {
+        emits("change", params);
+      }
+      function onFinish() {
+        emits("finish");
+      }
+      const useDragAndScaleOptions = vue.computed(() => {
+        return {
+          container: props.container,
+          containerRealSize: props.containerRealSize,
+          keepRatio: props.keepRatio,
+          limit: props.limit,
+          disabled: props.disabled,
+          onChange,
+          onFinish
+        };
+      });
+      useDragAndScale(targetRef, operateRef, useDragAndScaleOptions);
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: "drag-and-scale-box",
+          ref_key: "targetRef",
+          ref: targetRef
+        }, [
+          vue.renderSlot(_ctx.$slots, "default", {}, void 0, true),
+          vue.createElementVNode("div", _hoisted_1, [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(["zoom-operate-box", props.disabled ? "disabled" : ""]),
+              ref_key: "operateRef",
+              ref: operateRef
+            }, _cache[0] || (_cache[0] = [
+              vue.createStaticVNode('<div class="top-box block" data-v-91217104><div class="left-box" data-scale-side="left,top" data-v-91217104></div><div class="center-box" data-scale-side="top" data-v-91217104></div><div class="right-box" data-scale-side="right,top" data-v-91217104></div></div><div class="middle-box block" data-v-91217104><div class="left-box" data-scale-side="left" data-v-91217104></div><div class="center-box" data-scale-side="center" data-v-91217104></div><div class="right-box" data-scale-side="right" data-v-91217104></div></div><div class="bottom-box block" data-v-91217104><div class="left-box" data-scale-side="left,bottom" data-v-91217104></div><div class="center-box" data-scale-side="bottom" data-v-91217104></div><div class="right-box" data-scale-side="right,bottom" data-v-91217104></div></div>', 3)
+            ]), 2)
+          ])
+        ], 512);
+      };
+    }
+  });
+  const DragAndScale = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-91217104"]]);
+  const HvDragAndScale = withInstall(DragAndScale);
+  exports2.HvColorPicker = HvColorPicker;
+  exports2.HvDragAndScale = HvDragAndScale;
+  exports2.HvDraggable = HvDraggable;
+  exports2.HvDroppable = HvDroppable;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});