vue-devui 1.0.0-beta.10 → 1.0.0-beta.14

package/color-picker/index.es.js

@@ -0,0 +1,2960 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { ref, watch, defineComponent, reactive, provide, onUpdated, onBeforeMount, onMounted, createVNode, inject, getCurrentInstance, computed, nextTick, resolveComponent, readonly, unref, Teleport, Transition } from "vue";
+function colorPickerResize(colorCubeRef, top, left) {
+  var _a;
+  const rect = (_a = colorCubeRef.value) == null ? void 0 : _a.getBoundingClientRect();
+  left.value = rect == null ? void 0 : rect.left;
+  top.value = (rect == null ? void 0 : rect.top) + window.scrollY + rect.height;
+}
+function isExhibitionColorPicker(event, colorCubeRef, pickerRef, showColorPicker) {
+  var _a, _b;
+  if ((_a = colorCubeRef.value) == null ? void 0 : _a.contains(event.target)) {
+    showColorPicker.value = true;
+  }
+  if (!!pickerRef.value && !((_b = pickerRef.value) == null ? void 0 : _b.contains(event.target))) {
+    showColorPicker.value = !showColorPicker.value;
+  }
+}
+function useReactive(source) {
+  const model = ref();
+  model.value = source();
+  watch(source, (newValue) => {
+    model.value = newValue;
+  });
+  return model;
+}
+function changeColorValue(value, maxValue) {
+  if (value.alpha > maxValue) {
+    return value.hsva.v > maxValue && value.hsva.s < maxValue ? { color: "#000" } : { color: "#fff" };
+  } else {
+    return { color: "#000" };
+  }
+}
+const colorPickerProps$1 = {
+  modelValue: {
+    type: [Object, String]
+  },
+  mode: {
+    type: String
+  },
+  showAlpha: {
+    type: Boolean,
+    default: true
+  },
+  dotSize: {
+    type: Number,
+    default: 15
+  },
+  swatches: {
+    type: Array
+  },
+  showHistory: {
+    type: Boolean,
+    default: true
+  }
+};
+const colorPickerProps = {
+  colorMap: {
+    type: Object
+  },
+  modelValue: {
+    type: Object
+  },
+  showAlpha: {
+    type: Boolean,
+    default: true
+  },
+  mode: {
+    type: String
+  }
+};
+var tabs = "";
+var Tabs = defineComponent({
+  name: "DTabs",
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: null
+    },
+    type: {
+      type: String,
+      default: "tabs"
+    },
+    showContent: {
+      type: Boolean,
+      default: true
+    },
+    vertical: {
+      type: Boolean,
+      default: false
+    },
+    reactivable: {
+      type: Boolean,
+      default: true
+    },
+    customWidth: {
+      type: String,
+      default: ""
+    },
+    cssClass: {
+      type: String,
+      default: ""
+    },
+    beforeChange: {
+      type: Function,
+      default: null
+    }
+  },
+  emits: ["update:modelValue", "activeTabChange"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const tabsEle = ref(null);
+    const data = reactive({
+      offsetLeft: 0,
+      offsetWidth: 0,
+      id: null
+    });
+    const state = reactive({
+      data: [],
+      active: props.modelValue,
+      showContent: props.showContent,
+      slots: []
+    });
+    provide("tabs", {
+      state
+    });
+    const canChange = function(currentTab) {
+      let changeResult = Promise.resolve(true);
+      if (typeof props.beforeChange === "function") {
+        const result = props.beforeChange(currentTab);
+        if (typeof result !== "undefined") {
+          if (result.then) {
+            changeResult = result;
+          } else {
+            console.log(result);
+            changeResult = Promise.resolve(result);
+          }
+        }
+      }
+      return changeResult;
+    };
+    const activeClick = function(item, tabEl) {
+      if (!props.reactivable && props.modelValue === item.id) {
+        return;
+      }
+      canChange(item.id).then((change) => {
+        if (!change) {
+          return;
+        }
+        const tab = state.data.find((itemOption) => itemOption.id === item.id);
+        if (tab && !tab.disabled) {
+          state.active = item.id;
+          emit("update:modelValue", tab.id);
+          if (props.type === "slider" && tabEl && tabsEle) {
+            this.offsetLeft = tabEl.getBoundingClientRect().left - this.tabsEle.nativeElement.getBoundingClientRect().left;
+            this.offsetWidth = tabEl.getBoundingClientRect().width;
+          }
+          emit("activeTabChange", tab.id);
+        }
+      });
+    };
+    const ulClass = [props.type];
+    props.cssClass && ulClass.push(props.cssClass);
+    props.vertical && ulClass.push("devui-nav-stacked");
+    onUpdated(() => {
+      if (props.type === "slider") {
+        setTimeout(() => {
+          const tabEle = tabsEle.value.querySelector("#" + props.modelValue + ".active");
+          if (tabEle) {
+            data.offsetLeft = tabEle.getBoundingClientRect().left - tabsEle.value.getBoundingClientRect().left;
+            data.offsetWidth = tabEle.getBoundingClientRect().width;
+          }
+        });
+      }
+    });
+    onBeforeMount(() => {
+      if (props.type !== "slider" && props.modelValue === void 0 && state.data.length > 0) {
+        activeClick(state.data[0]);
+      }
+    });
+    onMounted(() => {
+      if (props.type === "slider" && props.modelValue === void 0 && state.data.length > 0 && state.data[0]) {
+        activeClick(state.data[0].tabsEle.value.getElementById(state.data[0].tabId));
+      }
+    });
+    return () => {
+      return createVNode("div", null, [createVNode("ul", {
+        "ref": tabsEle,
+        "role": "tablist",
+        "class": `devui-nav devui-nav-${ulClass.join(" ")}`,
+        "id": "devuiTabs11"
+      }, [state.data.map((item, i) => {
+        return createVNode("li", {
+          "role": "presentation",
+          "onClick": () => {
+            activeClick(item);
+          },
+          "class": (props.modelValue === (item.id || item.tabId) ? "active" : "") + " " + (item.disabled ? "disabled" : ""),
+          "id": item.id || item.tabId
+        }, [createVNode("a", {
+          "role": "tab",
+          "data-toggle": item.id,
+          "aria-expanded": props.modelValue === (item.id || item.tabId)
+        }, [state.slots[i] ? state.slots[i]() : createVNode("span", null, [item.title])])]);
+      }), createVNode("div", {
+        "class": `devui-nav-${props.type}-animation`,
+        "style": {
+          left: data.offsetLeft + "px",
+          width: data.offsetWidth + "px"
+        }
+      }, null)]), slots.default()]);
+    };
+  }
+});
+var Tab = defineComponent({
+  name: "DTab",
+  props: {
+    title: {
+      default: null,
+      type: [String, Number]
+    },
+    id: {
+      default: null,
+      type: String
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, {
+    slots
+  }) {
+    const tabs2 = inject("tabs");
+    tabs2.state.slots.push(slots.dTabTitle);
+    tabs2.state.data.push(props);
+    return () => {
+      const {
+        id
+      } = props;
+      const content = tabs2.state.showContent && tabs2.state.active === id ? createVNode("div", {
+        "class": "devui-tab-content"
+      }, [createVNode("div", {
+        "role": "tabpanel",
+        "class": "devui-tab-pane in active"
+      }, [slots.default()])]) : null;
+      return content;
+    };
+  }
+});
+Tabs.install = function(app) {
+  app.component(Tabs.name, Tabs);
+  app.component(Tab.name, Tab);
+};
+const isObject$1 = (val) => val !== null && typeof val === "object";
+const isString = (val) => typeof val === "string";
+var NodeType;
+(function(NodeType2) {
+  NodeType2[NodeType2["ELEMENT_NODE"] = 1] = "ELEMENT_NODE";
+  NodeType2[NodeType2["ATTRIBUTE_NODE"] = 2] = "ATTRIBUTE_NODE";
+  NodeType2[NodeType2["TEXT_NODE"] = 3] = "TEXT_NODE";
+  NodeType2[NodeType2["CDATA_SECTION_NODE"] = 4] = "CDATA_SECTION_NODE";
+  NodeType2[NodeType2["ENTITY_REFERENCE_NODE"] = 5] = "ENTITY_REFERENCE_NODE";
+  NodeType2[NodeType2["COMMENT_NODE"] = 6] = "COMMENT_NODE";
+  NodeType2[NodeType2["PROCESSING_INSTRUCTION_NODE"] = 7] = "PROCESSING_INSTRUCTION_NODE";
+  NodeType2[NodeType2["DOCUMENT_NODE"] = 9] = "DOCUMENT_NODE";
+})(NodeType || (NodeType = {}));
+class DOMUtils {
+  static isWindow(val) {
+    return val === window;
+  }
+  static addEventListener(element, event, handler, options = false) {
+    if (element && event && handler) {
+      element.addEventListener(event, handler, options);
+    }
+  }
+  static removeEventListener(element, event, handler, options = false) {
+    if (element && event && handler) {
+      element.removeEventListener(event, handler, options);
+    }
+  }
+  static triggerDragEvent(element, options) {
+    let isDragging = false;
+    const moveFn = function(event) {
+      var _a;
+      (_a = options.drag) == null ? void 0 : _a.call(options, event);
+    };
+    const upFn = (event) => {
+      var _a;
+      DOMUtils.removeEventListener(document, "mousemove", moveFn);
+      DOMUtils.removeEventListener(document, "mouseup", upFn);
+      DOMUtils.removeEventListener(document, "touchmove", moveFn);
+      DOMUtils.removeEventListener(document, "touchend", upFn);
+      document.onselectstart = null;
+      document.ondragstart = null;
+      isDragging = false;
+      (_a = options.end) == null ? void 0 : _a.call(options, event);
+    };
+    const downFn = (event) => {
+      var _a;
+      if (isDragging)
+        return;
+      document.onselectstart = () => false;
+      document.ondragstart = () => false;
+      DOMUtils.addEventListener(document, "mousemove", moveFn);
+      DOMUtils.addEventListener(document, "mouseup", upFn);
+      DOMUtils.addEventListener(document, "touchmove", moveFn);
+      DOMUtils.addEventListener(document, "touchend", upFn);
+      isDragging = true;
+      (_a = options.start) == null ? void 0 : _a.call(options, event);
+    };
+    DOMUtils.addEventListener(element, "mousedown", downFn);
+    DOMUtils.addEventListener(element, "touchstart", downFn);
+    return;
+  }
+  static getBoundingClientRect(element) {
+    if (element && isObject$1(element) && element.nodeType === 1) {
+      return element.getBoundingClientRect();
+    }
+    return null;
+  }
+  static hasClass(element, className) {
+    if (element && isObject$1(element) && isString(className) && element.nodeType === 1) {
+      return element.classList.contains(className.trim());
+    }
+    return false;
+  }
+  static addClass(element, className) {
+    if (element && isObject$1(element) && isString(className) && element.nodeType === 1) {
+      className = className.trim();
+      if (!DOMUtils.hasClass(element, className)) {
+        const cl = element.className;
+        element.className = cl ? cl + " " + className : className;
+      }
+    }
+  }
+  static removeClass(element, className) {
+    if (element && isObject$1(element) && isString(className) && element.nodeType === 1 && typeof element.className === "string") {
+      className = className.trim();
+      const classes = element.className.trim().split(" ");
+      for (let i = classes.length - 1; i >= 0; i--) {
+        classes[i] = classes[i].trim();
+        if (!classes[i] || classes[i] === className) {
+          classes.splice(i, 1);
+        }
+      }
+      element.className = classes.join(" ");
+    }
+  }
+  static toggleClass(element, className, force) {
+    if (element && isObject$1(element) && isString(className) && element.nodeType === 1) {
+      element.classList.toggle(className, force);
+    }
+  }
+  static replaceClass(element, oldClassName, newClassName) {
+    if (element && isObject$1(element) && isString(oldClassName) && isString(newClassName) && element.nodeType === 1) {
+      oldClassName = oldClassName.trim();
+      newClassName = newClassName.trim();
+      DOMUtils.removeClass(element, oldClassName);
+      DOMUtils.addClass(element, newClassName);
+    }
+  }
+  static getScrollTop(el) {
+    const top = "scrollTop" in el ? el.scrollTop : el.pageYOffset;
+    return Math.max(top, 0);
+  }
+  static setScrollTop(el, value) {
+    if ("scrollTop" in el) {
+      el.scrollTop = value;
+    } else {
+      el.scrollTo(el.scrollX, value);
+    }
+  }
+  static getRootScrollTop() {
+    return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+  }
+  static setRootScrollTop(value) {
+    DOMUtils.setScrollTop(window, value);
+    DOMUtils.setScrollTop(document.body, value);
+  }
+  static getElementTop(el, scroller) {
+    if (DOMUtils.isWindow(el)) {
+      return 0;
+    }
+    const scrollTop = scroller ? DOMUtils.getScrollTop(scroller) : DOMUtils.getRootScrollTop();
+    return el.getBoundingClientRect().top + scrollTop;
+  }
+  static getVisibleHeight(el) {
+    if (DOMUtils.isWindow(el)) {
+      return el.innerHeight;
+    }
+    return el.getBoundingClientRect().height;
+  }
+  static isHidden(el) {
+    if (!el) {
+      return false;
+    }
+    const style = window.getComputedStyle(el);
+    const hidden = style.display === "none";
+    const parentHidden = el.offsetParent === null && style.position !== "fixed";
+    return hidden || parentHidden;
+  }
+  static triggerEvent(el, type4) {
+    if ("createEvent" in document) {
+      const e = document.createEvent("HTMLEvents");
+      e.initEvent(type4, false, true);
+      el.dispatchEvent(e);
+    }
+  }
+  static calcAngle(element, event) {
+    const rect = element.getBoundingClientRect();
+    const originX = rect.left + rect.width / 2;
+    const originY = rect.top + rect.height / 2;
+    const x = Math.abs(originX - event.clientX);
+    const y = Math.abs(originY - event.clientY);
+    const z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+    const cos = y / z;
+    const rad = Math.acos(cos);
+    let angle = Math.floor(180 / (Math.PI / rad));
+    if (event.clientX > originX && event.clientY > originY) {
+      angle = 180 - angle;
+    }
+    if (event.clientX == originX && event.clientY > originY) {
+      angle = 180;
+    }
+    if (event.clientX > originX && event.clientY == originY) {
+      angle = 90;
+    }
+    if (event.clientX < originX && event.clientY > originY) {
+      angle = 180 + angle;
+    }
+    if (event.clientX < originX && event.clientY == originY) {
+      angle = 270;
+    }
+    if (event.clientX < originX && event.clientY < originY) {
+      angle = 360 - angle;
+    }
+    return angle;
+  }
+  static querySelector(selectors, parentElement) {
+    if (parentElement) {
+      return parentElement.querySelector(selectors);
+    }
+    return document.querySelector(selectors);
+  }
+}
+function padEnd(str, length, char = "0") {
+  return str + char.repeat(Math.max(0, length - str.length));
+}
+function chunk(str, size = 1) {
+  const chunked = [];
+  let index2 = 0;
+  while (index2 < str.length) {
+    chunked.push(str.substr(index2, size));
+    index2 += size;
+  }
+  return chunked;
+}
+const clamp = (value, min, max) => {
+  return min < max ? value < min ? min : value > max ? max : value : value < max ? max : value > min ? min : value;
+};
+function keepDecimal(value, digits = 0) {
+  const COUNT_VALUE = 10 ** digits;
+  return Math.round(value * COUNT_VALUE) / COUNT_VALUE;
+}
+function has(obj, key) {
+  return key.every((k) => obj.hasOwnProperty(k));
+}
+function HSVAtoRGBA(hsva) {
+  const { h, s, v, a } = hsva;
+  const f = (n) => {
+    const k = (n + h / 60) % 6;
+    return v - v * s * Math.max(Math.min(k, 4 - k, 1), 0);
+  };
+  const rgb = [f(5), f(3), f(1)].map((v2) => Math.round(v2 * 255));
+  return { r: rgb[0], g: rgb[1], b: rgb[2], a };
+}
+function RGBAtoHSVA(rgba) {
+  if (!rgba)
+    return { h: 0, s: 1, v: 1, a: 1 };
+  const r = rgba.r / 255;
+  const g = rgba.g / 255;
+  const b = rgba.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  if (max !== min) {
+    if (max === r) {
+      h = 60 * (0 + (g - b) / (max - min));
+    } else if (max === g) {
+      h = 60 * (2 + (b - r) / (max - min));
+    } else if (max === b) {
+      h = 60 * (4 + (r - g) / (max - min));
+    }
+  }
+  if (h < 0)
+    h = h + 360;
+  const s = max === 0 ? 0 : (max - min) / max;
+  const hsv = [h, s, max];
+  return { h: Math.round(hsv[0]), s: hsv[1], v: hsv[2], a: rgba.a };
+}
+function HSVAtoHSLA(hsva) {
+  const { h, s, v, a } = hsva;
+  const l = v - v * s / 2;
+  const sprime = l === 1 || l === 0 ? 0 : (v - l) / Math.min(l, 1 - l);
+  return { h: Math.round(h), s: sprime, l, a };
+}
+function HSLAtoHSVA(hsl) {
+  const { h, s, l, a } = hsl;
+  const v = l + s * Math.min(l, 1 - l);
+  const sprime = v === 0 ? 0 : 2 - 2 * l / v;
+  return { h: Math.round(h), s: sprime, v, a };
+}
+function RGBAtoCSS(rgba) {
+  return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
+}
+function RGBtoCSS(rgba) {
+  return RGBAtoCSS(__spreadProps(__spreadValues({}, rgba), { a: 1 }));
+}
+function RGBAtoHex(rgba) {
+  const toHex = (v) => {
+    const h = Math.round(v).toString(16);
+    return ("00".substring(0, 2 - h.length) + h).toUpperCase();
+  };
+  return `#${[toHex(rgba.r), toHex(rgba.g), toHex(rgba.b), toHex(Math.round(rgba.a * 255))].join("")}`;
+}
+function HexToRGBA(hex2) {
+  const rgba = chunk(hex2.slice(1), 2).map((c) => parseInt(c, 16));
+  return {
+    r: rgba[0],
+    g: rgba[1],
+    b: rgba[2],
+    a: Math.round(rgba[3] / 255 * 100) / 100
+  };
+}
+function HexToHSVA(hex2) {
+  const rgb = HexToRGBA(hex2);
+  return RGBAtoHSVA(rgb);
+}
+function HSVAtoHex(hsva) {
+  return RGBAtoHex(HSVAtoRGBA(hsva));
+}
+function parseHex(hex2) {
+  if (hex2.startsWith("#")) {
+    hex2 = hex2.slice(1);
+  }
+  hex2 = hex2.replace(/([^0-9a-f])/gi, "F");
+  if (hex2.length === 3 || hex2.length === 4) {
+    hex2 = hex2.split("").map((x) => x + x).join("");
+  }
+  if (hex2.length === 6) {
+    hex2 = padEnd(hex2, 8, "F");
+  } else {
+    hex2 = padEnd(padEnd(hex2, 6), 8, "F");
+  }
+  return `#${hex2}`.toUpperCase().substring(0, 9);
+}
+function fromHSVA(hsva) {
+  hsva = __spreadValues({}, hsva);
+  const hexa = HSVAtoHex(hsva);
+  const hsla = HSVAtoHSLA(hsva);
+  const rgba = HSVAtoRGBA(hsva);
+  return {
+    alpha: hsva.a,
+    hex: hexa.substring(0, 7),
+    hexa,
+    hsla,
+    hsva,
+    hue: hsva.h,
+    rgba
+  };
+}
+function fromRGBA(rgba) {
+  const hsva = RGBAtoHSVA(rgba);
+  const hexa = RGBAtoHex(rgba);
+  const hsla = HSVAtoHSLA(hsva);
+  const hsv = { h: hsva.h, s: hsva.s, v: hsva.v };
+  const hsl = { h: hsla.h, s: hsla.s, l: hsla.l };
+  return {
+    alpha: hsva.a,
+    hex: hexa.substring(0, 7),
+    hexa,
+    hsla,
+    hsva,
+    hsv,
+    hsl,
+    hue: hsva.h,
+    rgba
+  };
+}
+function fromHexa(hexa) {
+  const hsva = HexToHSVA(hexa);
+  const hsla = HSVAtoHSLA(hsva);
+  const rgba = HSVAtoRGBA(hsva);
+  return {
+    alpha: hsva.a,
+    hex: hexa.substring(0, 7),
+    hexa,
+    hsla,
+    hsva,
+    hue: hsva.h,
+    rgba
+  };
+}
+function fromHSLA(hsla) {
+  const hsva = HSLAtoHSVA(hsla);
+  const hexa = HSVAtoHex(hsva);
+  const rgba = HSVAtoRGBA(hsva);
+  return {
+    alpha: hsva.a,
+    hex: hexa.substring(0, 7),
+    hexa,
+    hsla,
+    hsva,
+    hue: hsva.h,
+    rgba
+  };
+}
+function fromHex(hex2) {
+  return fromHexa(parseHex(hex2));
+}
+function parseColor(color2, oldColor) {
+  if (!color2)
+    return fromRGBA({ r: 0, g: 0, b: 0, a: 1 });
+  if (typeof color2 === "string") {
+    if (color2.indexOf("#") !== -1)
+      ;
+    else if (color2.indexOf("hsl") !== -1) {
+      let alpha = null;
+      const parts = color2.replace(/hsla|hsl|\(|\)/gm, "").split(/\s|,/g).filter((val) => val !== "").map((val) => parseFloat(val));
+      if (parts.length === 4) {
+        alpha = parts[3];
+      } else if (parts.length === 3) {
+        alpha = 1;
+      }
+      return fromHSLA({ h: parts[0], s: parts[1], l: parts[2], a: alpha });
+    } else if (color2.indexOf("rgb") !== -1) {
+      let alpha = null;
+      const parts = color2.replace(/rgba|rgb|\(|\)/gm, "").split(/\s|,/g).filter((val) => val !== "").map((val) => parseFloat(val));
+      if (parts.length === 4) {
+        alpha = parts[3];
+      } else if (parts.length === 3) {
+        alpha = 1;
+      }
+      return fromRGBA({ r: parts[0], g: parts[1], b: parts[2], a: alpha });
+    } else if (color2.indexOf("hsv") !== -1) {
+      let alpha = null;
+      const parts = color2.replace(/hsva|hsv|\(|\)/gm, "").split(/\s|,/g).filter((val) => val !== "").map((val) => parseFloat(val));
+      if (parts.length === 4) {
+        alpha = parts[3];
+      } else if (parts.length === 3) {
+        alpha = 1;
+      }
+      return fromHSVA({ h: parts[0], s: parts[1], v: parts[2], a: alpha });
+    }
+    if (color2 === "transparent")
+      return fromHexa("#00000000");
+    const hex2 = parseHex(color2);
+    if (oldColor && hex2 === oldColor.hexa) {
+      return oldColor;
+    } else {
+      return fromHexa(hex2);
+    }
+  }
+  if (typeof color2 === "object") {
+    if (color2.hasOwnProperty("alpha"))
+      return color2;
+    const a = color2.hasOwnProperty("a") ? parseFloat(color2.a) : 1;
+    if (has(color2, ["r", "g", "b"])) {
+      if (oldColor && color2 === oldColor.rgba)
+        return oldColor;
+      else
+        return fromRGBA(__spreadProps(__spreadValues({}, color2), { a }));
+    } else if (has(color2, ["h", "s", "l"])) {
+      if (oldColor && color2 === oldColor.hsla)
+        return oldColor;
+      else
+        return fromHSLA(__spreadProps(__spreadValues({}, color2), { a }));
+    } else if (has(color2, ["h", "s", "v"])) {
+      if (oldColor && color2 === oldColor.hsva)
+        return oldColor;
+      else
+        return fromHSVA(__spreadProps(__spreadValues({}, color2), { a }));
+    }
+  }
+  return fromRGBA({ r: 255, g: 0, b: 0, a: 1 });
+}
+function stripAlpha(color2, stripAlpha2) {
+  if (stripAlpha2) {
+    const _a = color2, { a } = _a, rest = __objRest(_a, ["a"]);
+    return rest;
+  }
+  return color2;
+}
+function extractColor(color2, input, mode, showAlpha) {
+  const hue = keepDecimal(color2.hsla.h, 2);
+  const hslSaturation = keepDecimal(color2.hsla.s, 2);
+  const lightness = keepDecimal(color2.hsla.l, 2);
+  const red = keepDecimal(color2.rgba.r);
+  const green = keepDecimal(color2.rgba.g);
+  const blue = keepDecimal(color2.rgba.b);
+  const hsvSaturation = keepDecimal(color2.hsva.s, 2);
+  const value = keepDecimal(color2.hsva.v, 2);
+  if (input == null)
+    return color2;
+  function isShowAlpha(mode2) {
+    return showAlpha ? mode2 + "a" : mode2;
+  }
+  if (typeof input === "string") {
+    if (mode === "hex") {
+      return showAlpha ? color2.hexa : color2.hex;
+    } else if (mode === "hsl") {
+      return `${isShowAlpha(mode)}(${hue}, ${hslSaturation}, ${lightness}${showAlpha ? ", " + color2.alpha : ""})`;
+    } else if (mode === "rgb") {
+      return `${isShowAlpha(mode)}(${red}, ${green}, ${blue}${showAlpha ? ", " + color2.alpha : ""})`;
+    } else if (mode === "hsv") {
+      return `${isShowAlpha(mode)}(${hue}, ${hsvSaturation}, ${value}${showAlpha ? ", " + color2.alpha : ""})`;
+    }
+    return input.length === 7 ? color2.hex : color2.hexa;
+  }
+  if (typeof input === "object") {
+    const shouldStrip = typeof input.a === "number" && input.a === 0 ? !!input.a : !input.a;
+    if (has(input, ["r", "g", "b"]))
+      return stripAlpha(color2.rgba, shouldStrip);
+    else if (has(input, ["h", "s", "l"]))
+      return stripAlpha(color2.hsla, shouldStrip);
+    else if (has(input, ["h", "s", "v"]))
+      return stripAlpha(color2.hsva, shouldStrip);
+  }
+}
+const colorPickerPaletteProps = {
+  modelValue: {
+    type: Object,
+    default: () => fromRGBA({ r: 255, g: 0, b: 0, a: 1 })
+  },
+  height: {
+    type: Number,
+    default: 200
+  }
+};
+var colorPalette$1 = "";
+var colorPalette = defineComponent({
+  name: "ColorPallete",
+  props: colorPickerPaletteProps,
+  emits: ["update:modelValue", "changeTextColor"],
+  setup(props, ctx) {
+    const DEFAULT_TRANSITION = {
+      transition: "all 0.3s ease"
+    };
+    const dotSizeInject = inject("provideData");
+    const clickTransfrom = ref(DEFAULT_TRANSITION);
+    const paletteElement = ref();
+    const canvasElement = ref();
+    const handlerElement = ref();
+    const paletteInstance = getCurrentInstance();
+    const cursorTop = ref(0);
+    const cursorLeft = ref(0);
+    const getDotStyle = computed(() => {
+      return {
+        width: `${dotSizeInject.dotSize}px`,
+        height: `${dotSizeInject.dotSize}px`,
+        transform: `translate(-${dotSizeInject.dotSize / 2}px,  -${dotSizeInject.dotSize / 2}px)`
+      };
+    });
+    const getCursorStyle = computed(() => {
+      return __spreadValues({
+        top: cursorTop.value + "px",
+        left: cursorLeft.value + "px"
+      }, clickTransfrom.value);
+    });
+    function renderCanvas() {
+      const canvas = canvasElement.value.getContext("2d");
+      const parentWidth = paletteElement.value.offsetWidth;
+      canvasElement.value.width = parentWidth;
+      canvasElement.value.height = props.height;
+      const saturationGradient = canvas.createLinearGradient(0, 0, parentWidth, 0);
+      saturationGradient.addColorStop(0, "hsla(0, 0%, 100%, 1)");
+      saturationGradient.addColorStop(1, `hsla(${props.modelValue.hue}, 100%, 50%, 1)`);
+      canvas.fillStyle = saturationGradient;
+      canvas.fillRect(0, 0, parentWidth, props.height);
+      const valueGradient = canvas.createLinearGradient(0, 0, 0, props.height);
+      valueGradient.addColorStop(0, "hsla(0, 0%, 100%, 0)");
+      valueGradient.addColorStop(1, "hsla(0, 0%, 0%, 1)");
+      canvas.fillStyle = valueGradient;
+      canvas.fillRect(0, 0, parentWidth, props.height);
+    }
+    function clickPalette(event) {
+      const target = event.target;
+      if (target !== paletteElement.value) {
+        handleDrag(event);
+      }
+    }
+    function updatePosition() {
+      var _a, _b;
+      if (paletteInstance) {
+        const parentWidth = paletteElement.value.offsetWidth;
+        cursorLeft.value = Number((_a = props.modelValue) == null ? void 0 : _a.hsva.s) * parentWidth;
+        cursorTop.value = (1 - Number((_b = props.modelValue) == null ? void 0 : _b.hsva.v)) * props.height;
+      }
+    }
+    function handleDrag(event) {
+      const parentWidth = paletteElement.value.offsetWidth;
+      if (paletteInstance) {
+        const el = canvasElement.value;
+        const rect = el == null ? void 0 : el.getBoundingClientRect();
+        let left = event.clientX - rect.left;
+        let top = event.clientY - rect.top;
+        left = clamp(left, 0, parentWidth);
+        top = clamp(top, 0, props.height);
+        cursorLeft.value = left;
+        cursorTop.value = top;
+        const isChangeTextColor = computed(() => {
+          if (left > rect.width / 2 || top > rect.height / 2) {
+            return true;
+          } else {
+            return false;
+          }
+        });
+        ctx.emit("update:modelValue", fromHSVA({
+          h: props.modelValue.hue,
+          s: clamp(event.clientX - rect.left, 0, rect.width) / rect.width,
+          v: 1 - clamp(event.clientY - rect.top, 0, rect.height) / rect.height,
+          a: props.modelValue.alpha
+        }));
+        ctx.emit("changeTextColor", isChangeTextColor.value);
+      }
+    }
+    onMounted(() => {
+      renderCanvas();
+      if (paletteInstance && paletteInstance.vnode.el && handlerElement.value) {
+        DOMUtils.triggerDragEvent(paletteInstance.vnode.el, {
+          drag: (event) => {
+            clickTransfrom.value = null;
+            handleDrag(event);
+          },
+          end: (event) => {
+            clickTransfrom.value = DEFAULT_TRANSITION;
+            handleDrag(event);
+          }
+        });
+        updatePosition();
+      }
+    });
+    watch(() => props.modelValue, () => {
+      updatePosition();
+    });
+    ctx.expose({
+      renderCanvas
+    });
+    return () => {
+      return createVNode("div", {
+        "class": "devui-color-picker-palette",
+        "ref": paletteElement,
+        "onClick": clickPalette
+      }, [createVNode("canvas", {
+        "ref": canvasElement
+      }, null), createVNode("div", {
+        "class": "devui-color-picker-palette-handler",
+        "style": getCursorStyle.value
+      }, [createVNode("div", {
+        "ref": handlerElement,
+        "style": getDotStyle.value
+      }, null)])]);
+    };
+  }
+});
+const colorPickerHueSliderProps = {
+  color: {
+    type: Object
+  },
+  modelValue: {
+    type: Object
+  },
+  width: {
+    type: Number,
+    default: 300
+  },
+  height: {
+    type: Number,
+    default: 15
+  }
+};
+var colorHueSlider$1 = "";
+var colorHueSlider = defineComponent({
+  name: "ColorHueSlider",
+  props: colorPickerHueSliderProps,
+  emits: ["update:modelValue"],
+  setup(props, ctx) {
+    const DEFAULT_TRANSITION = {
+      transition: "all 0.3s ease"
+    };
+    const barElement = ref(null);
+    const cursorElement = ref(null);
+    const clickTransfrom = ref(DEFAULT_TRANSITION);
+    const getCursorLeft = () => {
+      if (barElement.value && cursorElement.value) {
+        const rect = barElement.value.getBoundingClientRect();
+        const offsetWidth = cursorElement.value.offsetWidth;
+        if (props.modelValue.hue === 360) {
+          return rect.width - offsetWidth / 2;
+        }
+        return props.modelValue.hue % 360 * (rect.width - offsetWidth) / 360 + offsetWidth / 2;
+      }
+      return 0;
+    };
+    const getCursorStyle = computed(() => {
+      const left = getCursorLeft();
+      return __spreadValues({
+        left: left + "px",
+        top: 0
+      }, clickTransfrom.value);
+    });
+    const onClickSider = (event) => {
+      const target = event.target;
+      if (target !== barElement.value) {
+        onMoveBar(event);
+      }
+    };
+    const onMoveBar = (event) => {
+      event.stopPropagation();
+      if (barElement.value && cursorElement.value) {
+        const rect = barElement.value.getBoundingClientRect();
+        const offsetWidth = cursorElement.value.offsetWidth;
+        let left = event.clientX - rect.left;
+        left = Math.min(left, rect.width - offsetWidth / 2);
+        left = Math.max(offsetWidth / 2, left);
+        const hue = Math.round((left - offsetWidth / 2) / (rect.width - offsetWidth) * 360);
+        ctx.emit("update:modelValue", fromHSVA({
+          h: hue,
+          s: props.modelValue.hsva.s,
+          v: props.modelValue.hsva.v,
+          a: props.modelValue.hsva.a
+        }));
+      }
+    };
+    onMounted(() => {
+      const dragConfig = {
+        drag: (event) => {
+          clickTransfrom.value = null;
+          onMoveBar(event);
+        },
+        end: (event) => {
+          clickTransfrom.value = DEFAULT_TRANSITION;
+          onMoveBar(event);
+        }
+      };
+      if (barElement.value && cursorElement.value) {
+        DOMUtils.triggerDragEvent(barElement.value, dragConfig);
+      }
+    });
+    return () => {
+      return createVNode("div", {
+        "class": "devui-color-picker-hue-slider"
+      }, [createVNode("div", {
+        "ref": barElement,
+        "class": "devui-color-picker-hue-slider__bar",
+        "onClick": onClickSider
+      }, [createVNode("div", {
+        "class": "devui-color-picker-hue-slider__bar-pointer",
+        "ref": cursorElement,
+        "style": getCursorStyle.value
+      }, [createVNode("div", {
+        "class": "devui-color-picker-hue-slider__bar-handle"
+      }, null)])])]);
+    };
+  }
+});
+const colorPickerAlphaSliderProps = {
+  color: {
+    type: Object
+  },
+  modelValue: {
+    type: Object
+  },
+  rgba: {
+    type: Object,
+    default: null
+  },
+  height: {
+    type: Number,
+    default: 15
+  },
+  width: {
+    type: Number,
+    default: 300
+  }
+};
+var colorAlphaSlider$1 = "";
+var colorAlphaSlider = defineComponent({
+  name: "ColorAlphaSlider",
+  props: colorPickerAlphaSliderProps,
+  emits: ["update:modelValue"],
+  setup(props, ctx) {
+    const DEFAULT_TRANSITION = {
+      transition: "all 0.3s ease"
+    };
+    const clickTransfrom = ref(DEFAULT_TRANSITION);
+    const barElement = ref(null);
+    const cursorElement = ref(null);
+    const onClickSider = (event) => {
+      const target = event.target;
+      if (target !== barElement.value) {
+        onMoveBar(event);
+      }
+    };
+    const onMoveBar = (event) => {
+      event.stopPropagation();
+      if (barElement.value && cursorElement.value) {
+        const rect = barElement.value.getBoundingClientRect();
+        const offsetWidth = cursorElement.value.offsetWidth;
+        let left = event.clientX - rect.left;
+        left = Math.max(offsetWidth / 2, left);
+        left = Math.min(left, rect.width - offsetWidth / 2);
+        const alpha = Math.round((left - offsetWidth / 2) / (rect.width - offsetWidth) * 100);
+        ctx.emit("update:modelValue", fromHSVA(__spreadProps(__spreadValues({}, props.modelValue.hsva), {
+          a: alpha / 100
+        })));
+      }
+    };
+    const getBackgroundStyle = computed(() => {
+      return {
+        background: `linear-gradient(to right, transparent , ${RGBtoCSS(props.modelValue.rgba)})`
+      };
+    });
+    const getCursorLeft = computed(() => {
+      if (barElement.value && cursorElement.value) {
+        const alpha = props.modelValue.rgba.a;
+        const rect = barElement.value.getBoundingClientRect();
+        const offsetWidth = cursorElement.value.offsetWidth;
+        return Math.round(alpha * (rect.width - offsetWidth) + offsetWidth / 2);
+      }
+      return 0;
+    });
+    const getCursorStyle = computed(() => {
+      const left = getCursorLeft.value;
+      return __spreadValues({
+        left: left + "px",
+        top: 0
+      }, clickTransfrom.value);
+    });
+    onMounted(() => {
+      const dragConfig = {
+        drag: (event) => {
+          clickTransfrom.value = null;
+          onMoveBar(event);
+        },
+        end: (event) => {
+          clickTransfrom.value = DEFAULT_TRANSITION;
+          onMoveBar(event);
+        }
+      };
+      if (barElement.value && cursorElement.value) {
+        DOMUtils.triggerDragEvent(barElement.value, dragConfig);
+      }
+    });
+    const alphaClass = computed(() => {
+      return ["devui-color-picker-alpha-slider", "transparent"];
+    });
+    return () => {
+      return createVNode("div", {
+        "class": alphaClass.value
+      }, [createVNode("div", {
+        "ref": barElement,
+        "class": "devui-color-picker-alpha-slider__bar",
+        "style": getBackgroundStyle.value,
+        "onClick": onClickSider
+      }, [createVNode("div", {
+        "class": ["devui-color-picker-alpha-slider__bar-pointer"],
+        "ref": cursorElement,
+        "style": getCursorStyle.value
+      }, [createVNode("div", {
+        "class": "devui-color-picker-alpha-slider__bar-handle"
+      }, null)])])]);
+    };
+  }
+});
+const colorPickerEditProps = {
+  showAlpha: {
+    type: Boolean,
+    default: false
+  },
+  mode: {
+    type: String
+  },
+  color: {
+    type: Object
+  }
+};
+var colorEdit$1 = "";
+function _extends() {
+  _extends = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
+}
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf2(o2) {
+    return o2.__proto__ || Object.getPrototypeOf(o2);
+  };
+  return _getPrototypeOf(o);
+}
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf2(o2, p2) {
+    o2.__proto__ = p2;
+    return o2;
+  };
+  return _setPrototypeOf(o, p);
+}
+function _isNativeReflectConstruct() {
+  if (typeof Reflect === "undefined" || !Reflect.construct)
+    return false;
+  if (Reflect.construct.sham)
+    return false;
+  if (typeof Proxy === "function")
+    return true;
+  try {
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {
+    }));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+function _construct(Parent, args, Class) {
+  if (_isNativeReflectConstruct()) {
+    _construct = Reflect.construct;
+  } else {
+    _construct = function _construct2(Parent2, args2, Class2) {
+      var a = [null];
+      a.push.apply(a, args2);
+      var Constructor = Function.bind.apply(Parent2, a);
+      var instance = new Constructor();
+      if (Class2)
+        _setPrototypeOf(instance, Class2.prototype);
+      return instance;
+    };
+  }
+  return _construct.apply(null, arguments);
+}
+function _isNativeFunction(fn) {
+  return Function.toString.call(fn).indexOf("[native code]") !== -1;
+}
+function _wrapNativeSuper(Class) {
+  var _cache = typeof Map === "function" ? new Map() : void 0;
+  _wrapNativeSuper = function _wrapNativeSuper2(Class2) {
+    if (Class2 === null || !_isNativeFunction(Class2))
+      return Class2;
+    if (typeof Class2 !== "function") {
+      throw new TypeError("Super expression must either be null or a function");
+    }
+    if (typeof _cache !== "undefined") {
+      if (_cache.has(Class2))
+        return _cache.get(Class2);
+      _cache.set(Class2, Wrapper);
+    }
+    function Wrapper() {
+      return _construct(Class2, arguments, _getPrototypeOf(this).constructor);
+    }
+    Wrapper.prototype = Object.create(Class2.prototype, {
+      constructor: {
+        value: Wrapper,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    });
+    return _setPrototypeOf(Wrapper, Class2);
+  };
+  return _wrapNativeSuper(Class);
+}
+var formatRegExp = /%[sdj%]/g;
+var warning = function warning2() {
+};
+if (typeof process !== "undefined" && process.env && false) {
+  warning = function warning3(type4, errors) {
+    if (typeof console !== "undefined" && console.warn && typeof ASYNC_VALIDATOR_NO_WARNING === "undefined") {
+      if (errors.every(function(e) {
+        return typeof e === "string";
+      })) {
+        console.warn(type4, errors);
+      }
+    }
+  };
+}
+function convertFieldsError(errors) {
+  if (!errors || !errors.length)
+    return null;
+  var fields = {};
+  errors.forEach(function(error) {
+    var field = error.field;
+    fields[field] = fields[field] || [];
+    fields[field].push(error);
+  });
+  return fields;
+}
+function format(template) {
+  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    args[_key - 1] = arguments[_key];
+  }
+  var i = 0;
+  var len = args.length;
+  if (typeof template === "function") {
+    return template.apply(null, args);
+  }
+  if (typeof template === "string") {
+    var str = template.replace(formatRegExp, function(x) {
+      if (x === "%%") {
+        return "%";
+      }
+      if (i >= len) {
+        return x;
+      }
+      switch (x) {
+        case "%s":
+          return String(args[i++]);
+        case "%d":
+          return Number(args[i++]);
+        case "%j":
+          try {
+            return JSON.stringify(args[i++]);
+          } catch (_) {
+            return "[Circular]";
+          }
+          break;
+        default:
+          return x;
+      }
+    });
+    return str;
+  }
+  return template;
+}
+function isNativeStringType(type4) {
+  return type4 === "string" || type4 === "url" || type4 === "hex" || type4 === "email" || type4 === "date" || type4 === "pattern";
+}
+function isEmptyValue(value, type4) {
+  if (value === void 0 || value === null) {
+    return true;
+  }
+  if (type4 === "array" && Array.isArray(value) && !value.length) {
+    return true;
+  }
+  if (isNativeStringType(type4) && typeof value === "string" && !value) {
+    return true;
+  }
+  return false;
+}
+function asyncParallelArray(arr, func, callback) {
+  var results = [];
+  var total = 0;
+  var arrLength = arr.length;
+  function count(errors) {
+    results.push.apply(results, errors || []);
+    total++;
+    if (total === arrLength) {
+      callback(results);
+    }
+  }
+  arr.forEach(function(a) {
+    func(a, count);
+  });
+}
+function asyncSerialArray(arr, func, callback) {
+  var index2 = 0;
+  var arrLength = arr.length;
+  function next(errors) {
+    if (errors && errors.length) {
+      callback(errors);
+      return;
+    }
+    var original = index2;
+    index2 = index2 + 1;
+    if (original < arrLength) {
+      func(arr[original], next);
+    } else {
+      callback([]);
+    }
+  }
+  next([]);
+}
+function flattenObjArr(objArr) {
+  var ret = [];
+  Object.keys(objArr).forEach(function(k) {
+    ret.push.apply(ret, objArr[k] || []);
+  });
+  return ret;
+}
+var AsyncValidationError = /* @__PURE__ */ function(_Error) {
+  _inheritsLoose(AsyncValidationError2, _Error);
+  function AsyncValidationError2(errors, fields) {
+    var _this;
+    _this = _Error.call(this, "Async Validation Error") || this;
+    _this.errors = errors;
+    _this.fields = fields;
+    return _this;
+  }
+  return AsyncValidationError2;
+}(/* @__PURE__ */ _wrapNativeSuper(Error));
+function asyncMap(objArr, option, func, callback, source) {
+  if (option.first) {
+    var _pending = new Promise(function(resolve, reject) {
+      var next = function next2(errors) {
+        callback(errors);
+        return errors.length ? reject(new AsyncValidationError(errors, convertFieldsError(errors))) : resolve(source);
+      };
+      var flattenArr = flattenObjArr(objArr);
+      asyncSerialArray(flattenArr, func, next);
+    });
+    _pending["catch"](function(e) {
+      return e;
+    });
+    return _pending;
+  }
+  var firstFields = option.firstFields === true ? Object.keys(objArr) : option.firstFields || [];
+  var objArrKeys = Object.keys(objArr);
+  var objArrLength = objArrKeys.length;
+  var total = 0;
+  var results = [];
+  var pending = new Promise(function(resolve, reject) {
+    var next = function next2(errors) {
+      results.push.apply(results, errors);
+      total++;
+      if (total === objArrLength) {
+        callback(results);
+        return results.length ? reject(new AsyncValidationError(results, convertFieldsError(results))) : resolve(source);
+      }
+    };
+    if (!objArrKeys.length) {
+      callback(results);
+      resolve(source);
+    }
+    objArrKeys.forEach(function(key) {
+      var arr = objArr[key];
+      if (firstFields.indexOf(key) !== -1) {
+        asyncSerialArray(arr, func, next);
+      } else {
+        asyncParallelArray(arr, func, next);
+      }
+    });
+  });
+  pending["catch"](function(e) {
+    return e;
+  });
+  return pending;
+}
+function isErrorObj(obj) {
+  return !!(obj && obj.message !== void 0);
+}
+function getValue(value, path) {
+  var v = value;
+  for (var i = 0; i < path.length; i++) {
+    if (v == void 0) {
+      return v;
+    }
+    v = v[path[i]];
+  }
+  return v;
+}
+function complementError(rule, source) {
+  return function(oe) {
+    var fieldValue;
+    if (rule.fullFields) {
+      fieldValue = getValue(source, rule.fullFields);
+    } else {
+      fieldValue = source[oe.field || rule.fullField];
+    }
+    if (isErrorObj(oe)) {
+      oe.field = oe.field || rule.fullField;
+      oe.fieldValue = fieldValue;
+      return oe;
+    }
+    return {
+      message: typeof oe === "function" ? oe() : oe,
+      fieldValue,
+      field: oe.field || rule.fullField
+    };
+  };
+}
+function deepMerge(target, source) {
+  if (source) {
+    for (var s in source) {
+      if (source.hasOwnProperty(s)) {
+        var value = source[s];
+        if (typeof value === "object" && typeof target[s] === "object") {
+          target[s] = _extends({}, target[s], value);
+        } else {
+          target[s] = value;
+        }
+      }
+    }
+  }
+  return target;
+}
+var required$1 = function required(rule, value, source, errors, options, type4) {
+  if (rule.required && (!source.hasOwnProperty(rule.field) || isEmptyValue(value, type4 || rule.type))) {
+    errors.push(format(options.messages.required, rule.fullField));
+  }
+};
+var whitespace = function whitespace2(rule, value, source, errors, options) {
+  if (/^\s+$/.test(value) || value === "") {
+    errors.push(format(options.messages.whitespace, rule.fullField));
+  }
+};
+var pattern$2 = {
+  email: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+\.)+[a-zA-Z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]{2,}))$/,
+  url: new RegExp("^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$", "i"),
+  hex: /^#?([a-f0-9]{6}|[a-f0-9]{3})$/i
+};
+var types = {
+  integer: function integer(value) {
+    return types.number(value) && parseInt(value, 10) === value;
+  },
+  "float": function float(value) {
+    return types.number(value) && !types.integer(value);
+  },
+  array: function array(value) {
+    return Array.isArray(value);
+  },
+  regexp: function regexp(value) {
+    if (value instanceof RegExp) {
+      return true;
+    }
+    try {
+      return !!new RegExp(value);
+    } catch (e) {
+      return false;
+    }
+  },
+  date: function date(value) {
+    return typeof value.getTime === "function" && typeof value.getMonth === "function" && typeof value.getYear === "function" && !isNaN(value.getTime());
+  },
+  number: function number(value) {
+    if (isNaN(value)) {
+      return false;
+    }
+    return typeof value === "number";
+  },
+  object: function object(value) {
+    return typeof value === "object" && !types.array(value);
+  },
+  method: function method(value) {
+    return typeof value === "function";
+  },
+  email: function email(value) {
+    return typeof value === "string" && value.length <= 320 && !!value.match(pattern$2.email);
+  },
+  url: function url(value) {
+    return typeof value === "string" && value.length <= 2048 && !!value.match(pattern$2.url);
+  },
+  hex: function hex(value) {
+    return typeof value === "string" && !!value.match(pattern$2.hex);
+  }
+};
+var type$1 = function type(rule, value, source, errors, options) {
+  if (rule.required && value === void 0) {
+    required$1(rule, value, source, errors, options);
+    return;
+  }
+  var custom = ["integer", "float", "array", "regexp", "object", "method", "email", "number", "date", "url", "hex"];
+  var ruleType = rule.type;
+  if (custom.indexOf(ruleType) > -1) {
+    if (!types[ruleType](value)) {
+      errors.push(format(options.messages.types[ruleType], rule.fullField, rule.type));
+    }
+  } else if (ruleType && typeof value !== rule.type) {
+    errors.push(format(options.messages.types[ruleType], rule.fullField, rule.type));
+  }
+};
+var range = function range2(rule, value, source, errors, options) {
+  var len = typeof rule.len === "number";
+  var min = typeof rule.min === "number";
+  var max = typeof rule.max === "number";
+  var spRegexp = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
+  var val = value;
+  var key = null;
+  var num = typeof value === "number";
+  var str = typeof value === "string";
+  var arr = Array.isArray(value);
+  if (num) {
+    key = "number";
+  } else if (str) {
+    key = "string";
+  } else if (arr) {
+    key = "array";
+  }
+  if (!key) {
+    return false;
+  }
+  if (arr) {
+    val = value.length;
+  }
+  if (str) {
+    val = value.replace(spRegexp, "_").length;
+  }
+  if (len) {
+    if (val !== rule.len) {
+      errors.push(format(options.messages[key].len, rule.fullField, rule.len));
+    }
+  } else if (min && !max && val < rule.min) {
+    errors.push(format(options.messages[key].min, rule.fullField, rule.min));
+  } else if (max && !min && val > rule.max) {
+    errors.push(format(options.messages[key].max, rule.fullField, rule.max));
+  } else if (min && max && (val < rule.min || val > rule.max)) {
+    errors.push(format(options.messages[key].range, rule.fullField, rule.min, rule.max));
+  }
+};
+var ENUM$1 = "enum";
+var enumerable$1 = function enumerable(rule, value, source, errors, options) {
+  rule[ENUM$1] = Array.isArray(rule[ENUM$1]) ? rule[ENUM$1] : [];
+  if (rule[ENUM$1].indexOf(value) === -1) {
+    errors.push(format(options.messages[ENUM$1], rule.fullField, rule[ENUM$1].join(", ")));
+  }
+};
+var pattern$1 = function pattern(rule, value, source, errors, options) {
+  if (rule.pattern) {
+    if (rule.pattern instanceof RegExp) {
+      rule.pattern.lastIndex = 0;
+      if (!rule.pattern.test(value)) {
+        errors.push(format(options.messages.pattern.mismatch, rule.fullField, value, rule.pattern));
+      }
+    } else if (typeof rule.pattern === "string") {
+      var _pattern = new RegExp(rule.pattern);
+      if (!_pattern.test(value)) {
+        errors.push(format(options.messages.pattern.mismatch, rule.fullField, value, rule.pattern));
+      }
+    }
+  }
+};
+var rules = {
+  required: required$1,
+  whitespace,
+  type: type$1,
+  range,
+  "enum": enumerable$1,
+  pattern: pattern$1
+};
+var string = function string2(rule, value, callback, source, options) {
+  var errors = [];
+  var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+  if (validate) {
+    if (isEmptyValue(value, "string") && !rule.required) {
+      return callback();
+    }
+    rules.required(rule, value, source, errors, options, "string");
+    if (!isEmptyValue(value, "string")) {
+      rules.type(rule, value, source, errors, options);
+      rules.range(rule, value, source, errors, options);
+      rules.pattern(rule, value, source, errors, options);
+      if (rule.whitespace === true) {
+        rules.whitespace(rule, value, source, errors, options);
+      }
+    }
+  }
+  callback(errors);
+};
+var method2 = function method3(rule, value, callback, source, options) {
+  var errors = [];
+  var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+  if (validate) {
+    if (isEmptyValue(value) && !rule.required) {
+      return callback();
+    }
+    rules.required(rule, value, source, errors, options);
+    if (value !== void 0) {
+      rules.type(rule, value, source, errors, options);
+    }
+  }
+  callback(errors);
+};
+var number2 = function number3(rule, value, callback, source, options) {
+  var errors = [];
+  var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+  if (validate) {
+    if (value === "") {
+      value = void 0;
+    }
+    if (isEmptyValue(value) && !rule.required) {
+      return callback();
+    }
+    rules.required(rule, value, source, errors, options);
+    if (value !== void 0) {
+      rules.type(rule, value, source, errors, options);
+      rules.range(rule, value, source, errors, options);
+    }
+  }
+  callback(errors);
+};
+var _boolean = function _boolean2(rule, value, callback, source, options) {
+  var errors = [];
+  var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+  if (validate) {
+    if (isEmptyValue(value) && !rule.required) {
+      return callback();
+    }
+    rules.required(rule, value, source, errors, options);
+    if (value !== void 0) {
+      rules.type(rule, value, source, errors, options);
+    }
+  }
+  callback(errors);
+};
+var regexp2 = function regexp3(rule, value, callback, source, options) {
+  var errors = [];
+  var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+  if (validate) {
+    if (isEmptyValue(value) && !rule.required) {
+      return callback();
+    }
+    rules.required(rule, value, source, errors, options);
+    if (!isEmptyValue(value)) {
+      rules.type(rule, value, source, errors, options);
+    }
+  }
+  callback(errors);
+};
+var integer2 = function integer3(rule, value, callback, source, options) {
+  var errors = [];
+  var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+  if (validate) {
+    if (isEmptyValue(value) && !rule.required) {
+      return callback();
+    }
+    rules.required(rule, value, source, errors, options);
+    if (value !== void 0) {
+      rules.type(rule, value, source, errors, options);
+      rules.range(rule, value, source, errors, options);
+    }
+  }
+  callback(errors);
+};
+var floatFn = function floatFn2(rule, value, callback, source, options) {
+  var errors = [];
+  var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+  if (validate) {
+    if (isEmptyValue(value) && !rule.required) {
+      return callback();
+    }
+    rules.required(rule, value, source, errors, options);
+    if (value !== void 0) {
+      rules.type(rule, value, source, errors, options);
+      rules.range(rule, value, source, errors, options);
+    }
+  }
+  callback(errors);
+};
+var array2 = function array3(rule, value, callback, source, options) {
+  var errors = [];
+  var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+  if (validate) {
+    if ((value === void 0 || value === null) && !rule.required) {
+      return callback();
+    }
+    rules.required(rule, value, source, errors, options, "array");
+    if (value !== void 0 && value !== null) {
+      rules.type(rule, value, source, errors, options);
+      rules.range(rule, value, source, errors, options);
+    }
+  }
+  callback(errors);
+};
+var object2 = function object3(rule, value, callback, source, options) {
+  var errors = [];
+  var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+  if (validate) {
+    if (isEmptyValue(value) && !rule.required) {
+      return callback();
+    }
+    rules.required(rule, value, source, errors, options);
+    if (value !== void 0) {
+      rules.type(rule, value, source, errors, options);
+    }
+  }
+  callback(errors);
+};
+var ENUM = "enum";
+var enumerable2 = function enumerable3(rule, value, callback, source, options) {
+  var errors = [];
+  var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+  if (validate) {
+    if (isEmptyValue(value) && !rule.required) {
+      return callback();
+    }
+    rules.required(rule, value, source, errors, options);
+    if (value !== void 0) {
+      rules[ENUM](rule, value, source, errors, options);
+    }
+  }
+  callback(errors);
+};
+var pattern2 = function pattern3(rule, value, callback, source, options) {
+  var errors = [];
+  var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+  if (validate) {
+    if (isEmptyValue(value, "string") && !rule.required) {
+      return callback();
+    }
+    rules.required(rule, value, source, errors, options);
+    if (!isEmptyValue(value, "string")) {
+      rules.pattern(rule, value, source, errors, options);
+    }
+  }
+  callback(errors);
+};
+var date2 = function date3(rule, value, callback, source, options) {
+  var errors = [];
+  var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+  if (validate) {
+    if (isEmptyValue(value, "date") && !rule.required) {
+      return callback();
+    }
+    rules.required(rule, value, source, errors, options);
+    if (!isEmptyValue(value, "date")) {
+      var dateObject;
+      if (value instanceof Date) {
+        dateObject = value;
+      } else {
+        dateObject = new Date(value);
+      }
+      rules.type(rule, dateObject, source, errors, options);
+      if (dateObject) {
+        rules.range(rule, dateObject.getTime(), source, errors, options);
+      }
+    }
+  }
+  callback(errors);
+};
+var required2 = function required3(rule, value, callback, source, options) {
+  var errors = [];
+  var type4 = Array.isArray(value) ? "array" : typeof value;
+  rules.required(rule, value, source, errors, options, type4);
+  callback(errors);
+};
+var type2 = function type3(rule, value, callback, source, options) {
+  var ruleType = rule.type;
+  var errors = [];
+  var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+  if (validate) {
+    if (isEmptyValue(value, ruleType) && !rule.required) {
+      return callback();
+    }
+    rules.required(rule, value, source, errors, options, ruleType);
+    if (!isEmptyValue(value, ruleType)) {
+      rules.type(rule, value, source, errors, options);
+    }
+  }
+  callback(errors);
+};
+var any = function any2(rule, value, callback, source, options) {
+  var errors = [];
+  var validate = rule.required || !rule.required && source.hasOwnProperty(rule.field);
+  if (validate) {
+    if (isEmptyValue(value) && !rule.required) {
+      return callback();
+    }
+    rules.required(rule, value, source, errors, options);
+  }
+  callback(errors);
+};
+var validators = {
+  string,
+  method: method2,
+  number: number2,
+  "boolean": _boolean,
+  regexp: regexp2,
+  integer: integer2,
+  "float": floatFn,
+  array: array2,
+  object: object2,
+  "enum": enumerable2,
+  pattern: pattern2,
+  date: date2,
+  url: type2,
+  hex: type2,
+  email: type2,
+  required: required2,
+  any
+};
+function newMessages() {
+  return {
+    "default": "Validation error on field %s",
+    required: "%s is required",
+    "enum": "%s must be one of %s",
+    whitespace: "%s cannot be empty",
+    date: {
+      format: "%s date %s is invalid for format %s",
+      parse: "%s date could not be parsed, %s is invalid ",
+      invalid: "%s date %s is invalid"
+    },
+    types: {
+      string: "%s is not a %s",
+      method: "%s is not a %s (function)",
+      array: "%s is not an %s",
+      object: "%s is not an %s",
+      number: "%s is not a %s",
+      date: "%s is not a %s",
+      "boolean": "%s is not a %s",
+      integer: "%s is not an %s",
+      "float": "%s is not a %s",
+      regexp: "%s is not a valid %s",
+      email: "%s is not a valid %s",
+      url: "%s is not a valid %s",
+      hex: "%s is not a valid %s"
+    },
+    string: {
+      len: "%s must be exactly %s characters",
+      min: "%s must be at least %s characters",
+      max: "%s cannot be longer than %s characters",
+      range: "%s must be between %s and %s characters"
+    },
+    number: {
+      len: "%s must equal %s",
+      min: "%s cannot be less than %s",
+      max: "%s cannot be greater than %s",
+      range: "%s must be between %s and %s"
+    },
+    array: {
+      len: "%s must be exactly %s in length",
+      min: "%s cannot be less than %s in length",
+      max: "%s cannot be greater than %s in length",
+      range: "%s must be between %s and %s in length"
+    },
+    pattern: {
+      mismatch: "%s value %s does not match pattern %s"
+    },
+    clone: function clone() {
+      var cloned = JSON.parse(JSON.stringify(this));
+      cloned.clone = this.clone;
+      return cloned;
+    }
+  };
+}
+var messages = newMessages();
+var Schema = /* @__PURE__ */ function() {
+  function Schema2(descriptor) {
+    this.rules = null;
+    this._messages = messages;
+    this.define(descriptor);
+  }
+  var _proto = Schema2.prototype;
+  _proto.define = function define(rules2) {
+    var _this = this;
+    if (!rules2) {
+      throw new Error("Cannot configure a schema with no rules");
+    }
+    if (typeof rules2 !== "object" || Array.isArray(rules2)) {
+      throw new Error("Rules must be an object");
+    }
+    this.rules = {};
+    Object.keys(rules2).forEach(function(name) {
+      var item = rules2[name];
+      _this.rules[name] = Array.isArray(item) ? item : [item];
+    });
+  };
+  _proto.messages = function messages2(_messages) {
+    if (_messages) {
+      this._messages = deepMerge(newMessages(), _messages);
+    }
+    return this._messages;
+  };
+  _proto.validate = function validate(source_, o, oc) {
+    var _this2 = this;
+    if (o === void 0) {
+      o = {};
+    }
+    if (oc === void 0) {
+      oc = function oc2() {
+      };
+    }
+    var source = source_;
+    var options = o;
+    var callback = oc;
+    if (typeof options === "function") {
+      callback = options;
+      options = {};
+    }
+    if (!this.rules || Object.keys(this.rules).length === 0) {
+      if (callback) {
+        callback(null, source);
+      }
+      return Promise.resolve(source);
+    }
+    function complete(results) {
+      var errors = [];
+      var fields = {};
+      function add(e) {
+        if (Array.isArray(e)) {
+          var _errors;
+          errors = (_errors = errors).concat.apply(_errors, e);
+        } else {
+          errors.push(e);
+        }
+      }
+      for (var i = 0; i < results.length; i++) {
+        add(results[i]);
+      }
+      if (!errors.length) {
+        callback(null, source);
+      } else {
+        fields = convertFieldsError(errors);
+        callback(errors, fields);
+      }
+    }
+    if (options.messages) {
+      var messages$1 = this.messages();
+      if (messages$1 === messages) {
+        messages$1 = newMessages();
+      }
+      deepMerge(messages$1, options.messages);
+      options.messages = messages$1;
+    } else {
+      options.messages = this.messages();
+    }
+    var series = {};
+    var keys = options.keys || Object.keys(this.rules);
+    keys.forEach(function(z) {
+      var arr = _this2.rules[z];
+      var value = source[z];
+      arr.forEach(function(r) {
+        var rule = r;
+        if (typeof rule.transform === "function") {
+          if (source === source_) {
+            source = _extends({}, source);
+          }
+          value = source[z] = rule.transform(value);
+        }
+        if (typeof rule === "function") {
+          rule = {
+            validator: rule
+          };
+        } else {
+          rule = _extends({}, rule);
+        }
+        rule.validator = _this2.getValidationMethod(rule);
+        if (!rule.validator) {
+          return;
+        }
+        rule.field = z;
+        rule.fullField = rule.fullField || z;
+        rule.type = _this2.getType(rule);
+        series[z] = series[z] || [];
+        series[z].push({
+          rule,
+          value,
+          source,
+          field: z
+        });
+      });
+    });
+    var errorFields = {};
+    return asyncMap(series, options, function(data, doIt) {
+      var rule = data.rule;
+      var deep = (rule.type === "object" || rule.type === "array") && (typeof rule.fields === "object" || typeof rule.defaultField === "object");
+      deep = deep && (rule.required || !rule.required && data.value);
+      rule.field = data.field;
+      function addFullField(key, schema) {
+        return _extends({}, schema, {
+          fullField: rule.fullField + "." + key,
+          fullFields: rule.fullFields ? [].concat(rule.fullFields, [key]) : [key]
+        });
+      }
+      function cb(e) {
+        if (e === void 0) {
+          e = [];
+        }
+        var errorList = Array.isArray(e) ? e : [e];
+        if (!options.suppressWarning && errorList.length) {
+          Schema2.warning("async-validator:", errorList);
+        }
+        if (errorList.length && rule.message !== void 0) {
+          errorList = [].concat(rule.message);
+        }
+        var filledErrors = errorList.map(complementError(rule, source));
+        if (options.first && filledErrors.length) {
+          errorFields[rule.field] = 1;
+          return doIt(filledErrors);
+        }
+        if (!deep) {
+          doIt(filledErrors);
+        } else {
+          if (rule.required && !data.value) {
+            if (rule.message !== void 0) {
+              filledErrors = [].concat(rule.message).map(complementError(rule, source));
+            } else if (options.error) {
+              filledErrors = [options.error(rule, format(options.messages.required, rule.field))];
+            }
+            return doIt(filledErrors);
+          }
+          var fieldsSchema = {};
+          if (rule.defaultField) {
+            Object.keys(data.value).map(function(key) {
+              fieldsSchema[key] = rule.defaultField;
+            });
+          }
+          fieldsSchema = _extends({}, fieldsSchema, data.rule.fields);
+          var paredFieldsSchema = {};
+          Object.keys(fieldsSchema).forEach(function(field) {
+            var fieldSchema = fieldsSchema[field];
+            var fieldSchemaList = Array.isArray(fieldSchema) ? fieldSchema : [fieldSchema];
+            paredFieldsSchema[field] = fieldSchemaList.map(addFullField.bind(null, field));
+          });
+          var schema = new Schema2(paredFieldsSchema);
+          schema.messages(options.messages);
+          if (data.rule.options) {
+            data.rule.options.messages = options.messages;
+            data.rule.options.error = options.error;
+          }
+          schema.validate(data.value, data.rule.options || options, function(errs) {
+            var finalErrors = [];
+            if (filledErrors && filledErrors.length) {
+              finalErrors.push.apply(finalErrors, filledErrors);
+            }
+            if (errs && errs.length) {
+              finalErrors.push.apply(finalErrors, errs);
+            }
+            doIt(finalErrors.length ? finalErrors : null);
+          });
+        }
+      }
+      var res;
+      if (rule.asyncValidator) {
+        res = rule.asyncValidator(rule, data.value, cb, data.source, options);
+      } else if (rule.validator) {
+        res = rule.validator(rule, data.value, cb, data.source, options);
+        if (res === true) {
+          cb();
+        } else if (res === false) {
+          cb(typeof rule.message === "function" ? rule.message(rule.fullField || rule.field) : rule.message || (rule.fullField || rule.field) + " fails");
+        } else if (res instanceof Array) {
+          cb(res);
+        } else if (res instanceof Error) {
+          cb(res.message);
+        }
+      }
+      if (res && res.then) {
+        res.then(function() {
+          return cb();
+        }, function(e) {
+          return cb(e);
+        });
+      }
+    }, function(results) {
+      complete(results);
+    }, source);
+  };
+  _proto.getType = function getType(rule) {
+    if (rule.type === void 0 && rule.pattern instanceof RegExp) {
+      rule.type = "pattern";
+    }
+    if (typeof rule.validator !== "function" && rule.type && !validators.hasOwnProperty(rule.type)) {
+      throw new Error(format("Unknown rule type %s", rule.type));
+    }
+    return rule.type || "string";
+  };
+  _proto.getValidationMethod = function getValidationMethod(rule) {
+    if (typeof rule.validator === "function") {
+      return rule.validator;
+    }
+    var keys = Object.keys(rule);
+    var messageIndex = keys.indexOf("message");
+    if (messageIndex !== -1) {
+      keys.splice(messageIndex, 1);
+    }
+    if (keys.length === 1 && keys[0] === "required") {
+      return validators.required;
+    }
+    return validators[this.getType(rule)] || void 0;
+  };
+  return Schema2;
+}();
+Schema.register = function register(type4, validator) {
+  if (typeof validator !== "function") {
+    throw new Error("Cannot register a validator by type, validator is not a function");
+  }
+  validators[type4] = validator;
+};
+Schema.warning = warning;
+Schema.messages = messages;
+Schema.validators = validators;
+const DEFAUTL_MODE = "rgb";
+const MODE_SUPPORT = ["rgb", "hex", "hsl", "hsv"];
+const colorRules = {
+  alpha: [{
+    type: "number",
+    required: true,
+    min: 0,
+    max: 1
+  }],
+  hex: [{
+    type: "string",
+    pattern: /^#[0-9a-fA-F]{6}/
+  }],
+  hexa: [{
+    type: "string",
+    pattern: /^#[0-9a-fA-F]{6,8}/
+  }],
+  rgba: {
+    type: "object",
+    required: true,
+    fields: {
+      r: {
+        type: "number",
+        required: true,
+        min: 0,
+        max: 255
+      },
+      g: {
+        type: "number",
+        required: true,
+        min: 0,
+        max: 255
+      },
+      b: {
+        type: "number",
+        required: true,
+        min: 0,
+        max: 255
+      },
+      a: {
+        type: "number",
+        required: true,
+        min: 0,
+        max: 1
+      }
+    }
+  },
+  hsla: {
+    type: "object",
+    required: true,
+    fields: {
+      h: {
+        type: "number",
+        required: true,
+        min: 0,
+        max: 360
+      },
+      s: {
+        type: "number",
+        required: true,
+        min: 0,
+        max: 1
+      },
+      l: {
+        type: "number",
+        required: true,
+        min: 0,
+        max: 1
+      },
+      a: {
+        type: "number",
+        required: true,
+        min: 0,
+        max: 1
+      }
+    }
+  },
+  hsva: {
+    type: "object",
+    required: true,
+    fields: {
+      h: {
+        type: "number",
+        required: true,
+        min: 0,
+        max: 360
+      },
+      s: {
+        type: "number",
+        required: true,
+        min: 0,
+        max: 1
+      },
+      v: {
+        type: "number",
+        required: true,
+        min: 0,
+        max: 1
+      },
+      a: {
+        type: "number",
+        required: true,
+        min: 0,
+        max: 1
+      }
+    }
+  }
+};
+var colorEdit = defineComponent({
+  name: "ColorEdit",
+  props: colorPickerEditProps,
+  emits: ["changeTextModeColor", "update:modelValue"],
+  setup(props, {
+    emit
+  }) {
+    const isShowAlpha = inject("provideData");
+    const modelValue = computed(() => {
+      var _a;
+      return `${(_a = props.mode) != null ? _a : DEFAUTL_MODE}${isShowAlpha.showAlpha ? "a" : ""}`;
+    });
+    const colorValue = ref(props.color);
+    const modelValueType = computed(() => {
+      var _a;
+      return ((_a = props.mode) != null ? _a : DEFAUTL_MODE) === "hex" ? "string" : "number";
+    });
+    function getValidColor(color2) {
+      const validator = new Schema(colorRules);
+      return new Promise((resolve, reject) => {
+        validator.validate(color2, (errors) => {
+          errors && console.warn("\u8272\u503C\u6821\u9A8C\u5F02\u5E38:", errors);
+          errors ? reject() : resolve(color2);
+        });
+      });
+    }
+    function onChangeModel() {
+      const currentIndex = MODE_SUPPORT.findIndex((x) => x === props.mode);
+      const mode = MODE_SUPPORT[(currentIndex + 1) % MODE_SUPPORT.length];
+      emit("changeTextModeColor", mode);
+    }
+    function renderStringValue() {
+      const key = modelValue.value;
+      const value = colorValue.value[key];
+      const getConvertColor = (v) => {
+        const from = isShowAlpha.showAlpha ? fromHexa : fromHex;
+        const color2 = from(v);
+        return getValidColor(color2);
+      };
+      const updateValue = async (event) => {
+        const target = event.target;
+        getConvertColor(target.value).then((color2) => colorValue.value = color2).catch(() => target.value = value);
+      };
+      return createVNode("div", {
+        "class": "devui-color-picker-edit-input string-input flex"
+      }, [createVNode("div", {
+        "class": "devui-color-picker-edit-input-wrapper"
+      }, [createVNode("input", {
+        "value": value,
+        "onChange": updateValue,
+        "class": "devui-color-picker-edit-input-value"
+      }, null)])]);
+    }
+    function renderNumberValue() {
+      const scaleKeys = ["s", "v", "l"];
+      const percentKeys = ["a"];
+      const key = modelValue.value;
+      const value = colorValue.value[key.replace(/a?$/, "a")];
+      const getConvertColor = (model) => {
+        const {
+          from
+        } = [{
+          mode: ["rgb", "rgba"],
+          from: fromRGBA
+        }, {
+          mode: ["hsv", "hsva"],
+          from: fromHSVA
+        }, {
+          mode: ["hsl", "hsla"],
+          from: fromHSLA
+        }].find((x) => x.mode.includes(key));
+        const color2 = from(isShowAlpha.showAlpha ? model : __spreadProps(__spreadValues({}, model), {
+          a: 1
+        }));
+        return getValidColor(color2);
+      };
+      const updateValue = (k) => async (event) => {
+        const target = event.target;
+        getConvertColor(__spreadProps(__spreadValues({}, value), {
+          [k]: parseValue(k, target.value)
+        })).then((color2) => colorValue.value = color2).catch(() => target.value = formatValue(k, value[k]));
+      };
+      function formatValue(k, v) {
+        switch (true) {
+          case scaleKeys.includes(k):
+            return (v * 100).toFixed();
+          case percentKeys.includes(k):
+            return `${Math.round(v * 100)}%`;
+          default:
+            return v.toString();
+        }
+      }
+      function parseValue(k, v) {
+        switch (true) {
+          case scaleKeys.includes(k):
+            return parseFloat((parseInt(v) / 100).toFixed(2));
+          case percentKeys.includes(k):
+            return parseFloat((parseInt(v.replace(/%$/, "")) / 100).toFixed(2));
+          default:
+            return Number(v);
+        }
+      }
+      function onKeyChangeValue() {
+        return (e) => {
+          const target = e.target;
+          const changeValue = {
+            ArrowUp: 1,
+            ArrowDown: -1
+          }[e.code];
+          if (changeValue !== void 0) {
+            e.preventDefault();
+            const [v] = target.value.match(/\d+/g);
+            const newValue = (parseInt(v) + changeValue).toString();
+            target.value = target.value.replace(/\d+/g, newValue);
+            target.dispatchEvent(new CustomEvent("change"));
+          }
+        };
+      }
+      return createVNode("div", {
+        "class": "devui-color-picker-edit-input number-input flex"
+      }, [key.split("").map((k) => createVNode("div", {
+        "class": "devui-color-picker-edit-input-wrapper"
+      }, [createVNode("input", {
+        "onKeydown": onKeyChangeValue(),
+        "class": "devui-color-picker-edit-input-value",
+        "value": formatValue(k, value[k]),
+        "onChange": updateValue(k)
+      }, null)]))]);
+    }
+    function renderValueInput() {
+      switch (modelValueType.value) {
+        case "string":
+          return renderStringValue();
+        case "number":
+          return renderNumberValue();
+      }
+    }
+    return () => createVNode("div", {
+      "class": "devui-color-picker-edit flex"
+    }, [createVNode("div", {
+      "class": "devui-color-picker-edit-name",
+      "onClick": onChangeModel
+    }, [modelValue.value.toUpperCase()]), renderValueInput()]);
+  }
+});
+const colorPickerBasicColorProps = {
+  color: {
+    type: Object
+  }
+};
+var colorBasic$1 = "";
+const color = [
+  "#ffffff",
+  "#ffd7d5",
+  "#ffdaa9",
+  "#fffed5",
+  "#d4fa00",
+  "#73fcd6",
+  "#a5c8ff",
+  "#ffacd5",
+  "#ff7faa",
+  "#d6d6d6",
+  "#ffacaa",
+  "#ffb995",
+  "#fffb00",
+  "#73fa79",
+  "#00fcff",
+  "#78acfe",
+  "#d84fa9",
+  "#ff4f79",
+  "#b2b2b2",
+  "#d7aba9",
+  "#ff6827",
+  "#ffda51",
+  "#00d100",
+  "#00d5ff",
+  "#0080ff",
+  "#ac39ff",
+  "#ff2941",
+  "#888888",
+  "#7a4442",
+  "#ff4c00",
+  "#ffa900",
+  "#3da742",
+  "#3daad6",
+  "#0052ff",
+  "#7a4fd6",
+  "#d92142",
+  "#000000",
+  "#7b0c00",
+  "#ff4c41",
+  "#d6a841",
+  "#407600",
+  "#007aaa",
+  "#021eaa",
+  "#797baa",
+  "#ab1942"
+];
+var colorBasic = defineComponent({
+  name: "ColorBasic",
+  props: colorPickerBasicColorProps,
+  setup(props) {
+    var _a;
+    const swatchesInject = inject("provideData");
+    const currentColor = ref(props.color);
+    function changeBasicColor(hex2) {
+      currentColor.value = fromHex(hex2);
+    }
+    const swatches = ref(Object.values((_a = swatchesInject.swatches) != null ? _a : []));
+    return () => {
+      return createVNode("div", {
+        "class": "devui-color-picker-basic flex"
+      }, [(swatches.value.length !== 0 ? swatches.value : color).map((hex2) => createVNode("div", {
+        "onClick": () => changeBasicColor(hex2),
+        "class": ["devui-color-picker-basic-div"],
+        "style": {
+          backgroundColor: hex2
+        }
+      }, null))]);
+    };
+  }
+});
+var colorPickerPanel = "";
+const colorPickerHistoryProps = {
+  color: {
+    type: Object
+  }
+};
+var Icon = defineComponent({
+  name: "DIcon",
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    size: {
+      type: String,
+      default: "inherit"
+    },
+    color: {
+      type: String,
+      default: "inherit"
+    },
+    classPrefix: {
+      type: String,
+      default: "icon"
+    }
+  },
+  setup(props) {
+    return __spreadValues({}, props);
+  },
+  render() {
+    const {
+      name,
+      size,
+      color: color2,
+      classPrefix
+    } = this;
+    return /^((https?):)?\/\//.test(name) ? createVNode("img", {
+      "src": name,
+      "alt": name.split("/")[name.split("/").length - 1],
+      "style": {
+        width: size,
+        verticalAlign: "text-bottom"
+      }
+    }, null) : createVNode("i", {
+      "class": `${classPrefix} ${classPrefix}-${name}`,
+      "style": {
+        fontSize: size,
+        color: color2
+      }
+    }, null);
+  }
+});
+Icon.install = function(app) {
+  app.component(Icon.name, Icon);
+};
+var colorHistory$1 = "";
+var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
+var freeGlobal$1 = freeGlobal;
+var freeSelf = typeof self == "object" && self && self.Object === Object && self;
+var root = freeGlobal$1 || freeSelf || Function("return this")();
+var root$1 = root;
+var Symbol$1 = root$1.Symbol;
+var Symbol$2 = Symbol$1;
+var objectProto$1 = Object.prototype;
+var hasOwnProperty = objectProto$1.hasOwnProperty;
+var nativeObjectToString$1 = objectProto$1.toString;
+var symToStringTag$1 = Symbol$2 ? Symbol$2.toStringTag : void 0;
+function getRawTag(value) {
+  var isOwn = hasOwnProperty.call(value, symToStringTag$1), tag = value[symToStringTag$1];
+  try {
+    value[symToStringTag$1] = void 0;
+    var unmasked = true;
+  } catch (e) {
+  }
+  var result = nativeObjectToString$1.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag$1] = tag;
+    } else {
+      delete value[symToStringTag$1];
+    }
+  }
+  return result;
+}
+var objectProto = Object.prototype;
+var nativeObjectToString = objectProto.toString;
+function objectToString(value) {
+  return nativeObjectToString.call(value);
+}
+var nullTag = "[object Null]", undefinedTag = "[object Undefined]";
+var symToStringTag = Symbol$2 ? Symbol$2.toStringTag : void 0;
+function baseGetTag(value) {
+  if (value == null) {
+    return value === void 0 ? undefinedTag : nullTag;
+  }
+  return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
+}
+function isObjectLike(value) {
+  return value != null && typeof value == "object";
+}
+var symbolTag = "[object Symbol]";
+function isSymbol(value) {
+  return typeof value == "symbol" || isObjectLike(value) && baseGetTag(value) == symbolTag;
+}
+var reWhitespace = /\s/;
+function trimmedEndIndex(string3) {
+  var index2 = string3.length;
+  while (index2-- && reWhitespace.test(string3.charAt(index2))) {
+  }
+  return index2;
+}
+var reTrimStart = /^\s+/;
+function baseTrim(string3) {
+  return string3 ? string3.slice(0, trimmedEndIndex(string3) + 1).replace(reTrimStart, "") : string3;
+}
+function isObject(value) {
+  var type4 = typeof value;
+  return value != null && (type4 == "object" || type4 == "function");
+}
+var NAN = 0 / 0;
+var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+var reIsBinary = /^0b[01]+$/i;
+var reIsOctal = /^0o[0-7]+$/i;
+var freeParseInt = parseInt;
+function toNumber(value) {
+  if (typeof value == "number") {
+    return value;
+  }
+  if (isSymbol(value)) {
+    return NAN;
+  }
+  if (isObject(value)) {
+    var other = typeof value.valueOf == "function" ? value.valueOf() : value;
+    value = isObject(other) ? other + "" : other;
+  }
+  if (typeof value != "string") {
+    return value === 0 ? value : +value;
+  }
+  value = baseTrim(value);
+  var isBinary = reIsBinary.test(value);
+  return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
+}
+var now = function() {
+  return root$1.Date.now();
+};
+var now$1 = now;
+var FUNC_ERROR_TEXT = "Expected a function";
+var nativeMax = Math.max, nativeMin = Math.min;
+function debounce(func, wait, options) {
+  var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
+  if (typeof func != "function") {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  wait = toNumber(wait) || 0;
+  if (isObject(options)) {
+    leading = !!options.leading;
+    maxing = "maxWait" in options;
+    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+    trailing = "trailing" in options ? !!options.trailing : trailing;
+  }
+  function invokeFunc(time) {
+    var args = lastArgs, thisArg = lastThis;
+    lastArgs = lastThis = void 0;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+  function leadingEdge(time) {
+    lastInvokeTime = time;
+    timerId = setTimeout(timerExpired, wait);
+    return leading ? invokeFunc(time) : result;
+  }
+  function remainingWait(time) {
+    var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime, timeWaiting = wait - timeSinceLastCall;
+    return maxing ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
+  }
+  function shouldInvoke(time) {
+    var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime;
+    return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
+  }
+  function timerExpired() {
+    var time = now$1();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+  function trailingEdge(time) {
+    timerId = void 0;
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = void 0;
+    return result;
+  }
+  function cancel() {
+    if (timerId !== void 0) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = void 0;
+  }
+  function flush() {
+    return timerId === void 0 ? result : trailingEdge(now$1());
+  }
+  function debounced() {
+    var time = now$1(), isInvoking = shouldInvoke(time);
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time;
+    if (isInvoking) {
+      if (timerId === void 0) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        clearTimeout(timerId);
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === void 0) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+const STORAGE_KEY = "STORAGE_COLOR_PICKER_HISTORY_KEY";
+const MAX_HISOTRY_COUNT = 8;
+function useStore(v, {
+  storage
+} = {}) {
+  const getDefaultValue = () => {
+    if (storage) {
+      return JSON.parse(localStorage.getItem(STORAGE_KEY)) || v;
+    } else {
+      return v;
+    }
+  };
+  const store = ref(getDefaultValue());
+  watch(store, (value) => {
+    if (storage) {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(value));
+    }
+  });
+  return store;
+}
+var colorHistory = defineComponent({
+  name: "ColorEdit",
+  components: {
+    Icon
+  },
+  props: colorPickerHistoryProps,
+  emits: ["update:color"],
+  setup(props) {
+    const alphaInject = inject("provideData");
+    const history = useStore([], {
+      storage: true
+    });
+    const color2 = ref(props.color);
+    const updateHistory = debounce((value) => {
+      const index2 = history.value.findIndex((x) => x === value.hexa || x.endsWith("00") && value.alpha === 0);
+      if (index2 >= 0) {
+        history.value.splice(index2, 1);
+      }
+      history.value = [alphaInject.showAlpha ? value.hexa : value.hex, ...history.value].slice(0, MAX_HISOTRY_COUNT);
+    }, 100);
+    watch(props.color, (value) => {
+      updateHistory(value);
+    });
+    function onChangeColor(value) {
+      color2.value = fromHexa(value);
+    }
+    return () => createVNode("div", {
+      "class": "devui-color-picker-history flex flex-wrap"
+    }, [history.value.map((hexa) => createVNode("div", {
+      "onClick": () => onChangeColor(hexa),
+      "class": ["devui-color-picker-history_color-box", hexa.endsWith("00") ? "transparent" : ""],
+      "style": {
+        backgroundColor: hexa
+      }
+    }, null))]);
+  }
+});
+var colorPanel = defineComponent({
+  name: "ColorPanel",
+  components: {
+    colorPalette,
+    colorHueSlider,
+    colorAlphaSlider,
+    colorEdit,
+    colorBasic,
+    Tabs,
+    colorHistory
+  },
+  props: colorPickerProps,
+  emits: ["update:modelValue", "changeTextColor", "changeTiggerColor", "changePaletteColor", "changeTextModeType"],
+  setup(props, {
+    emit
+  }) {
+    const injectData = inject("provideData");
+    const paletteElement = ref(null);
+    const showAlpha = injectData.showAlpha;
+    const tab = ref("basic");
+    function changeTextColor(isChange) {
+      emit("changeTextColor", isChange);
+    }
+    function changeTextModeColor(currentType) {
+      emit("changeTextModeType", currentType);
+    }
+    const paletteColorMap = ref(props.modelValue);
+    watch(() => paletteColorMap.value, (newValue) => {
+      emit("update:modelValue", newValue);
+      emit("changePaletteColor", newValue);
+      nextTick(() => {
+        paletteElement.value && paletteElement.value.renderCanvas();
+      });
+    });
+    return () => {
+      return createVNode("div", {
+        "class": "devui-color-picker-panel"
+      }, [createVNode(resolveComponent("d-tabs"), {
+        "type": "tabs",
+        "modelValue": tab.value,
+        "onUpdate:modelValue": ($event) => tab.value = $event
+      }, {
+        default: () => [createVNode(resolveComponent("d-tab"), {
+          "id": "basic",
+          "title": "\u57FA\u7840\u9762\u677F",
+          "tabId": "basic"
+        }, {
+          default: () => [createVNode(resolveComponent("color-basic"), {
+            "color": paletteColorMap
+          }, null)]
+        }), createVNode(resolveComponent("d-tab"), {
+          "id": "palette",
+          "title": "\u9AD8\u7EA7\u9762\u677F",
+          "tabId": "palette"
+        }, {
+          default: () => [createVNode(resolveComponent("color-palette"), {
+            "ref": paletteElement,
+            "modelValue": paletteColorMap.value,
+            "onUpdate:modelValue": ($event) => paletteColorMap.value = $event,
+            "onChangeTextColor": changeTextColor
+          }, null)]
+        })]
+      }), createVNode(resolveComponent("color-hue-slider"), {
+        "modelValue": paletteColorMap.value,
+        "onUpdate:modelValue": ($event) => paletteColorMap.value = $event
+      }, null), showAlpha ? createVNode(resolveComponent("color-alpha-slider"), {
+        "modelValue": paletteColorMap.value,
+        "onUpdate:modelValue": ($event) => paletteColorMap.value = $event
+      }, null) : null, createVNode(colorEdit, {
+        "show-alpha": props.showAlpha,
+        "mode": props.mode,
+        "color": paletteColorMap,
+        "onChangeTextModeColor": changeTextModeColor
+      }, null), injectData.showHistory ? createVNode(colorHistory, {
+        "color": paletteColorMap
+      }, null) : null]);
+    };
+  }
+});
+var colorPicker = "";
+var ColorPicker = defineComponent({
+  name: "DColorPicker",
+  components: {
+    colorPanel
+  },
+  props: colorPickerProps$1,
+  emits: ["update:modelValue"],
+  setup(props, {
+    emit
+  }) {
+    var _a;
+    const DEFAUTL_MODE2 = "rgb";
+    const provideData = {
+      showAlpha: useReactive(() => props.showAlpha),
+      swatches: useReactive(() => props.swatches),
+      dotSize: useReactive(() => props.dotSize),
+      showHistory: useReactive(() => props.showHistory)
+    };
+    provide("provideData", readonly(provideData));
+    const initialColor = ref(null);
+    const colorCubeRef = ref();
+    const pickerRef = ref();
+    const containerRef = ref();
+    const left = ref(0);
+    const top = ref(0);
+    const isChangeTextColor = ref(true);
+    const showColorPicker = ref(false);
+    const formItemText = ref(`${(_a = props.mode) != null ? _a : DEFAUTL_MODE2}`);
+    const mode = ref(unref(props.mode));
+    onMounted(() => {
+      window.addEventListener("resize", resize);
+      window.addEventListener("click", isExhibition);
+    });
+    const colorPickerPostion = computed(() => {
+      if (colorCubeRef.value) {
+        return {
+          transform: `translate(${left.value}px, ${top.value}px)`
+        };
+      }
+      return null;
+    });
+    const tiggerColor = computed(() => {
+      const currentColor = initialColor.value.rgba;
+      const trigger = __spreadProps(__spreadValues({}, currentColor), {
+        a: props.showAlpha ? currentColor.a : 1
+      });
+      return {
+        backgroundColor: `${RGBAtoCSS(trigger)}`
+      };
+    });
+    const formItemValue = computed(() => {
+      return extractColor(initialColor.value, "", formItemText.value, props.showAlpha);
+    });
+    const textColor = computed(() => {
+      return changeColorValue(initialColor.value, 0.5);
+    });
+    function changeTextColor(value) {
+      isChangeTextColor.value = value;
+    }
+    function changePaletteColor(colorMap) {
+      updateUserColor(colorMap);
+    }
+    function changeTextModeType(type4) {
+      mode.value = type4;
+      formItemText.value = type4;
+    }
+    watch(() => showColorPicker.value, (newValue) => {
+      var _a2;
+      const textPalette = (_a2 = colorCubeRef.value) == null ? void 0 : _a2.getBoundingClientRect();
+      newValue && nextTick(() => {
+        pickerRef.value.style.transform = `translate(${textPalette.left + "px"}, ${textPalette.top + window.scrollY + textPalette.height + "px"})`;
+      });
+    });
+    watch(() => props.modelValue, (newValue) => {
+      updateUserColor(parseColor(newValue, initialColor.value));
+    }, {
+      immediate: true
+    });
+    function updateUserColor(color2) {
+      initialColor.value = color2;
+      const value = extractColor(initialColor.value, props.modelValue, mode.value, props.showAlpha);
+      emit("update:modelValue", value);
+    }
+    function resize() {
+      return colorPickerResize(colorCubeRef, top, left);
+    }
+    function isExhibition(event) {
+      return isExhibitionColorPicker(event, colorCubeRef, pickerRef, showColorPicker);
+    }
+    return () => {
+      return createVNode("div", {
+        "class": "devui-color-picker",
+        "ref": colorCubeRef
+      }, [createVNode("div", {
+        "class": "devui-color-picker-container"
+      }, [createVNode("div", {
+        "class": "devui-color-picker-container-wrap"
+      }, [createVNode("div", {
+        "class": "devui-color-picker-container-wrap-current-color",
+        "style": tiggerColor.value
+      }, null), createVNode("div", {
+        "class": ["devui-color-picker-container-wrap-transparent", "devui-color-picker-container-wrap-current-color-transparent"]
+      }, null), createVNode("div", {
+        "class": "devui-color-picker-color-value"
+      }, [createVNode("p", {
+        "style": textColor.value
+      }, [formItemValue.value])])])]), createVNode(Teleport, {
+        "to": "body"
+      }, {
+        default: () => [createVNode(Transition, {
+          "name": "color-picker-transition"
+        }, {
+          default: () => [showColorPicker.value ? createVNode("div", {
+            "ref": pickerRef,
+            "style": colorPickerPostion.value,
+            "class": ["devui-color-picker-position"]
+          }, [createVNode(resolveComponent("color-panel"), {
+            "modelValue": initialColor.value,
+            "onUpdate:modelValue": ($event) => initialColor.value = $event,
+            "ref": containerRef,
+            "mode": mode.value,
+            "onChangeTextColor": changeTextColor,
+            "onChangePaletteColor": changePaletteColor,
+            "onChangeTextModeType": changeTextModeType
+          }, null)]) : null]
+        })]
+      })]);
+    };
+  }
+});
+ColorPicker.install = function(app) {
+  app.component(ColorPicker.name, ColorPicker);
+};
+var index = {
+  title: "ColorPicker \u989C\u8272\u9009\u62E9\u5668",
+  category: "\u6570\u636E\u5F55\u5165",
+  status: "80%",
+  install(app) {
+    app.use(ColorPicker);
+  }
+};
+export { ColorPicker, index as default };