vxe-pc-ui 4.20.34 → 4.20.35

package/es/color-picker/src/color-picker.js

@@ -9,1188 +9,1191 @@ import VxeButtonComponent from "../../button";
 import VxeInputComponent from "../../input";
 import VxeNumberInputComponent from "../../number-input";
 const { getIcon, getConfig, getI18n, globalEvents, createEvent, useFns, renderEmptyElement } = VxeUI;
-var color_picker_default = defineVxeComponent({
-  name: "VxeColorPicker",
-  props: {
-    modelValue: String,
-    placeholder: String,
-    clearable: {
-      type: Boolean,
-      default: () => getConfig().colorPicker.clearable
+var color_picker_default = (
+  /* define-vxe-component start */
+  defineVxeComponent({
+    name: "VxeColorPicker",
+    props: {
+      modelValue: String,
+      placeholder: String,
+      clearable: {
+        type: Boolean,
+        default: () => getConfig().colorPicker.clearable
+      },
+      type: {
+        type: String,
+        default: () => getConfig().colorPicker.type
+      },
+      width: [Number, String],
+      size: {
+        type: String,
+        default: () => getConfig().colorPicker.size || getConfig().size
+      },
+      className: [String, Function],
+      popupClassName: [String, Function],
+      colors: {
+        type: Array,
+        default: () => XEUtils.clone(getConfig().colorPicker.colors, true) || []
+      },
+      showAlpha: {
+        type: Boolean,
+        default: () => getConfig().colorPicker.showAlpha
+      },
+      showEyeDropper: {
+        type: Boolean,
+        default: () => getConfig().colorPicker.showEyeDropper
+      },
+      showColorExtractor: {
+        type: Boolean,
+        default: () => getConfig().colorPicker.showColorExtractor
+      },
+      showQuick: {
+        type: Boolean,
+        default: () => getConfig().colorPicker.showQuick
+      },
+      readonly: {
+        type: Boolean,
+        default: null
+      },
+      disabled: {
+        type: Boolean,
+        default: null
+      },
+      clickToCopy: {
+        type: Boolean,
+        default: () => getConfig().colorPicker.clickToCopy
+      },
+      defaultColor: {
+        type: String,
+        default: () => getConfig().colorPicker.defaultColor
+      },
+      /**
+       * 已废弃，请使用 popupConfig.placement
+       * @deprecated
+       */
+      placement: String,
+      /**
+       * 已废弃，请使用 popupConfig.transfer
+       * @deprecated
+       */
+      transfer: {
+        type: Boolean,
+        default: null
+      },
+      popupConfig: Object
     },
-    type: {
-      type: String,
-      default: () => getConfig().colorPicker.type
-    },
-    width: [Number, String],
-    size: {
-      type: String,
-      default: () => getConfig().colorPicker.size || getConfig().size
-    },
-    className: [String, Function],
-    popupClassName: [String, Function],
-    colors: {
-      type: Array,
-      default: () => XEUtils.clone(getConfig().colorPicker.colors, true) || []
-    },
-    showAlpha: {
-      type: Boolean,
-      default: () => getConfig().colorPicker.showAlpha
-    },
-    showEyeDropper: {
-      type: Boolean,
-      default: () => getConfig().colorPicker.showEyeDropper
-    },
-    showColorExtractor: {
-      type: Boolean,
-      default: () => getConfig().colorPicker.showColorExtractor
-    },
-    showQuick: {
-      type: Boolean,
-      default: () => getConfig().colorPicker.showQuick
-    },
-    readonly: {
-      type: Boolean,
-      default: null
-    },
-    disabled: {
-      type: Boolean,
-      default: null
-    },
-    clickToCopy: {
-      type: Boolean,
-      default: () => getConfig().colorPicker.clickToCopy
-    },
-    defaultColor: {
-      type: String,
-      default: () => getConfig().colorPicker.defaultColor
-    },
-    /**
-     * 已废弃，请使用 popupConfig.placement
-     * @deprecated
-     */
-    placement: String,
-    /**
-     * 已废弃，请使用 popupConfig.transfer
-     * @deprecated
-     */
-    transfer: {
-      type: Boolean,
-      default: null
-    },
-    popupConfig: Object
-  },
-  emits: ["update:modelValue", "change", "clear", "click"],
-  setup(props, context) {
-    const { emit } = context;
-    const $xeModal = inject("$xeModal", null);
-    const $xeDrawer = inject("$xeDrawer", null);
-    const $xeTable = inject("$xeTable", null);
-    const $xeCard = inject("$xeCard", null);
-    const $xeForm = inject("$xeForm", null);
-    const formItemInfo = inject("xeFormItemInfo", null);
-    const WinEyeDropper = typeof window !== "undefined" ? window.EyeDropper : null;
-    const xID = XEUtils.uniqueId();
-    const { computeSize } = useFns.useSize(props);
-    const refElem = ref();
-    const refInputTarget = ref();
-    const refOptionPanel = ref();
-    const refHueSliderElem = ref();
-    const refHueSliderBtnElem = ref();
-    const refAlphaSliderElem = ref();
-    const refAlphaSliderBtnElem = ref();
-    const refColorPanelElem = ref();
-    const refColorActiveElem = ref();
-    const reactData = reactive({
-      initialized: false,
-      selectTyle: "hex",
-      selectColor: `${props.modelValue || ""}`,
-      showTypePopup: false,
-      panelColor: "",
-      hexValue: "",
-      rValue: 0,
-      gValue: 0,
-      bValue: 0,
-      aValue: 0,
-      panelIndex: 0,
-      panelStyle: {},
-      panelPlacement: null,
-      visiblePanel: false,
-      isAniVisible: false,
-      isActivated: false
-    });
-    const typeList = [
-      { label: "HEX", value: "hex" },
-      { label: "RGB", value: "rgb" }
-    ];
-    const internalData = {
-      // hpTimeout: undefined
-    };
-    const computeFormReadonly = computed(() => {
-      const { readonly } = props;
-      if (readonly === null) {
-        if ($xeForm) {
-          return $xeForm.props.readonly;
-        }
-        return false;
-      }
-      return readonly;
-    });
-    const computeIsDisabled = computed(() => {
-      const { disabled } = props;
-      if (disabled === null) {
-        if ($xeForm) {
-          return $xeForm.props.disabled;
+    emits: ["update:modelValue", "change", "clear", "click"],
+    setup(props, context) {
+      const { emit } = context;
+      const $xeModal = inject("$xeModal", null);
+      const $xeDrawer = inject("$xeDrawer", null);
+      const $xeTable = inject("$xeTable", null);
+      const $xeCard = inject("$xeCard", null);
+      const $xeForm = inject("$xeForm", null);
+      const formItemInfo = inject("xeFormItemInfo", null);
+      const WinEyeDropper = typeof window !== "undefined" ? window.EyeDropper : null;
+      const xID = XEUtils.uniqueId();
+      const { computeSize } = useFns.useSize(props);
+      const refElem = ref();
+      const refInputTarget = ref();
+      const refOptionPanel = ref();
+      const refHueSliderElem = ref();
+      const refHueSliderBtnElem = ref();
+      const refAlphaSliderElem = ref();
+      const refAlphaSliderBtnElem = ref();
+      const refColorPanelElem = ref();
+      const refColorActiveElem = ref();
+      const reactData = reactive({
+        initialized: false,
+        selectTyle: "hex",
+        selectColor: `${props.modelValue || ""}`,
+        showTypePopup: false,
+        panelColor: "",
+        hexValue: "",
+        rValue: 0,
+        gValue: 0,
+        bValue: 0,
+        aValue: 0,
+        panelIndex: 0,
+        panelStyle: {},
+        panelPlacement: null,
+        visiblePanel: false,
+        isAniVisible: false,
+        isActivated: false
+      });
+      const typeList = [
+        { label: "HEX", value: "hex" },
+        { label: "RGB", value: "rgb" }
+      ];
+      const internalData = {
+        // hpTimeout: undefined
+      };
+      const computeFormReadonly = computed(() => {
+        const { readonly } = props;
+        if (readonly === null) {
+          if ($xeForm) {
+            return $xeForm.props.readonly;
+          }
+          return false;
         }
-        return false;
-      }
-      return disabled;
-    });
-    const computeBtnTransfer = computed(() => {
-      const { transfer } = props;
-      if (transfer === null) {
-        const globalTransfer = getConfig().colorPicker.transfer;
-        if (XEUtils.isBoolean(globalTransfer)) {
-          return globalTransfer;
+        return readonly;
+      });
+      const computeIsDisabled = computed(() => {
+        const { disabled } = props;
+        if (disabled === null) {
+          if ($xeForm) {
+            return $xeForm.props.disabled;
+          }
+          return false;
         }
-        if ($xeTable || $xeModal || $xeDrawer || $xeCard || $xeForm) {
-          return true;
+        return disabled;
+      });
+      const computeBtnTransfer = computed(() => {
+        const { transfer } = props;
+        if (transfer === null) {
+          const globalTransfer = getConfig().colorPicker.transfer;
+          if (XEUtils.isBoolean(globalTransfer)) {
+            return globalTransfer;
+          }
+          if ($xeTable || $xeModal || $xeDrawer || $xeCard || $xeForm) {
+            return true;
+          }
         }
-      }
-      return transfer;
-    });
-    const computeColorList = computed(() => {
-      const { colors } = props;
-      if (colors) {
-        return colors.map((item) => {
-          if (XEUtils.isString(item)) {
+        return transfer;
+      });
+      const computeColorList = computed(() => {
+        const { colors } = props;
+        if (colors) {
+          return colors.map((item) => {
+            if (XEUtils.isString(item)) {
+              return {
+                label: item,
+                value: item
+              };
+            }
             return {
-              label: item,
-              value: item
+              label: XEUtils.eqNull(item.label) ? item.value : item.label,
+              value: item.value
             };
-          }
-          return {
-            label: XEUtils.eqNull(item.label) ? item.value : item.label,
-            value: item.value
-          };
-        });
-      }
-      return [];
-    });
-    const computeCurrStyle = computed(() => {
-      const { width } = props;
-      const stys = {};
-      if (width) {
-        stys.width = toCssUnit(width);
-      }
-      return stys;
-    });
-    const computePopupOpts = computed(() => {
-      return Object.assign({}, getConfig().colorPicker.popupConfig, props.popupConfig);
-    });
-    const computeIsRgb = computed(() => {
-      const { selectTyle } = reactData;
-      return selectTyle === "rgb";
-    });
-    const computeSelectTypeItem = computed(() => {
-      const { selectTyle } = reactData;
-      return typeList.find((item) => item.value === selectTyle);
-    });
-    const refMaps = {
-      refElem
-    };
-    const computeMaps = {};
-    const $xeColorPicker = {
-      xID,
-      props,
-      context,
-      reactData,
-      getRefMaps: () => refMaps,
-      getComputeMaps: () => computeMaps
-    };
-    const emitModel = (value) => {
-      emit("update:modelValue", value);
-    };
-    const updateMode = () => {
-      const { modelValue } = props;
-      reactData.selectColor = XEUtils.toValueString(modelValue);
-      updateModelColor();
-    };
-    const updateType = () => {
-      const { type } = props;
-      let selectTyle = "hex";
-      if (type === "rgb" || type === "rgba") {
-        selectTyle = "rgb";
-      }
-      reactData.selectTyle = selectTyle;
-      updateMode();
-    };
-    const updateModelColor = () => {
-      const { defaultColor } = props;
-      const { selectColor, isAniVisible } = reactData;
-      const isRgb = computeIsRgb.value;
-      const hueSliderEl = refHueSliderElem.value;
-      const alphaSliderEl = refAlphaSliderElem.value;
-      const colorRest = parseValColor(selectColor || defaultColor);
-      reactData.hexValue = "";
-      reactData.rValue = 0;
-      reactData.gValue = 0;
-      reactData.bValue = 0;
-      reactData.aValue = 1;
-      if (colorRest) {
-        if (colorRest.type === "hex") {
-          reactData.hexValue = colorRest.hex;
-        } else {
-          reactData.rValue = colorRest.r;
-          reactData.gValue = colorRest.g;
-          reactData.bValue = colorRest.b;
-          reactData.aValue = colorRest.a;
+          });
         }
-        if (colorRest.value) {
-          if (isRgb) {
-            if (colorRest.type === "hex") {
-              const rgbRest = hexToRgb(colorRest.hex);
-              if (rgbRest) {
-                reactData.rValue = rgbRest.r;
-                reactData.gValue = rgbRest.g;
-                reactData.bValue = rgbRest.b;
-                reactData.aValue = rgbRest.a;
-              }
-            }
+        return [];
+      });
+      const computeCurrStyle = computed(() => {
+        const { width } = props;
+        const stys = {};
+        if (width) {
+          stys.width = toCssUnit(width);
+        }
+        return stys;
+      });
+      const computePopupOpts = computed(() => {
+        return Object.assign({}, getConfig().colorPicker.popupConfig, props.popupConfig);
+      });
+      const computeIsRgb = computed(() => {
+        const { selectTyle } = reactData;
+        return selectTyle === "rgb";
+      });
+      const computeSelectTypeItem = computed(() => {
+        const { selectTyle } = reactData;
+        return typeList.find((item) => item.value === selectTyle);
+      });
+      const refMaps = {
+        refElem
+      };
+      const computeMaps = {};
+      const $xeColorPicker = {
+        xID,
+        props,
+        context,
+        reactData,
+        getRefMaps: () => refMaps,
+        getComputeMaps: () => computeMaps
+      };
+      const emitModel = (value) => {
+        emit("update:modelValue", value);
+      };
+      const updateMode = () => {
+        const { modelValue } = props;
+        reactData.selectColor = XEUtils.toValueString(modelValue);
+        updateModelColor();
+      };
+      const updateType = () => {
+        const { type } = props;
+        let selectTyle = "hex";
+        if (type === "rgb" || type === "rgba") {
+          selectTyle = "rgb";
+        }
+        reactData.selectTyle = selectTyle;
+        updateMode();
+      };
+      const updateModelColor = () => {
+        const { defaultColor } = props;
+        const { selectColor, isAniVisible } = reactData;
+        const isRgb = computeIsRgb.value;
+        const hueSliderEl = refHueSliderElem.value;
+        const alphaSliderEl = refAlphaSliderElem.value;
+        const colorRest = parseValColor(selectColor || defaultColor);
+        reactData.hexValue = "";
+        reactData.rValue = 0;
+        reactData.gValue = 0;
+        reactData.bValue = 0;
+        reactData.aValue = 1;
+        if (colorRest) {
+          if (colorRest.type === "hex") {
+            reactData.hexValue = colorRest.hex;
           } else {
-            if (colorRest.type !== "hex") {
-              reactData.hexValue = rgbToHexVal(colorRest.r, colorRest.g, colorRest.b, colorRest.a);
+            reactData.rValue = colorRest.r;
+            reactData.gValue = colorRest.g;
+            reactData.bValue = colorRest.b;
+            reactData.aValue = colorRest.a;
+          }
+          if (colorRest.value) {
+            if (isRgb) {
+              if (colorRest.type === "hex") {
+                const rgbRest = hexToRgb(colorRest.hex);
+                if (rgbRest) {
+                  reactData.rValue = rgbRest.r;
+                  reactData.gValue = rgbRest.g;
+                  reactData.bValue = rgbRest.b;
+                  reactData.aValue = rgbRest.a;
+                }
+              }
+            } else {
+              if (colorRest.type !== "hex") {
+                reactData.hexValue = rgbToHexVal(colorRest.r, colorRest.g, colorRest.b, colorRest.a);
+              }
             }
           }
         }
-      }
-      if (isAniVisible) {
-        const hsvRest = colorRest ? colorRest.type === "hex" ? hexToHsv(colorRest.hex) : rgbToHsv(colorRest) : null;
-        const colorPanelEl = refColorPanelElem.value;
-        if (hsvRest) {
-          if (colorPanelEl) {
-            const offsetTop = colorPanelEl.clientHeight * (1 - hsvRest.v);
-            const offsetLeft = colorPanelEl.clientWidth * hsvRest.s;
-            handlePanelColor(offsetLeft, offsetTop);
+        if (isAniVisible) {
+          const hsvRest = colorRest ? colorRest.type === "hex" ? hexToHsv(colorRest.hex) : rgbToHsv(colorRest) : null;
+          const colorPanelEl = refColorPanelElem.value;
+          if (hsvRest) {
+            if (colorPanelEl) {
+              const offsetTop = colorPanelEl.clientHeight * (1 - hsvRest.v);
+              const offsetLeft = colorPanelEl.clientWidth * hsvRest.s;
+              handlePanelColor(offsetLeft, offsetTop);
+            }
+            if (hueSliderEl) {
+              handleHueColor(XEUtils.ceil((1 - hsvRest.h / 360) * hueSliderEl.clientWidth) - 1);
+            }
           }
-          if (hueSliderEl) {
-            handleHueColor(XEUtils.ceil((1 - hsvRest.h / 360) * hueSliderEl.clientWidth) - 1);
+          if (alphaSliderEl) {
+            handleAlphaColor(alphaSliderEl.clientWidth * reactData.aValue);
           }
         }
-        if (alphaSliderEl) {
-          handleAlphaColor(alphaSliderEl.clientWidth * reactData.aValue);
+      };
+      const updateZindex = () => {
+        if (reactData.panelIndex < getLastZIndex()) {
+          reactData.panelIndex = nextZIndex();
         }
-      }
-    };
-    const updateZindex = () => {
-      if (reactData.panelIndex < getLastZIndex()) {
-        reactData.panelIndex = nextZIndex();
-      }
-    };
-    const updatePlacement = () => {
-      const { placement } = props;
-      const { panelIndex } = reactData;
-      const targetElem = refElem.value;
-      const panelElem = refOptionPanel.value;
-      const btnTransfer = computeBtnTransfer.value;
-      const popupOpts = computePopupOpts.value;
-      const handleStyle = () => {
-        const ppObj = updatePanelPlacement(targetElem, panelElem, {
-          placement: popupOpts.placement || placement,
-          defaultPlacement: popupOpts.defaultPlacement,
-          appendTo: popupOpts.appendTo,
-          teleportTo: btnTransfer
-        });
-        const panelStyle = Object.assign(ppObj.style, {
-          zIndex: panelIndex
-        });
-        reactData.panelStyle = panelStyle;
-        reactData.panelPlacement = ppObj.placement;
       };
-      handleStyle();
-      return nextTick().then(handleStyle);
-    };
-    const showOptionPanel = () => {
-      const { hpTimeout } = internalData;
-      const isDisabled = computeIsDisabled.value;
-      if (!isDisabled) {
-        if (hpTimeout) {
-          clearTimeout(hpTimeout);
-          internalData.hpTimeout = void 0;
+      const updatePlacement = () => {
+        const { placement } = props;
+        const { panelIndex } = reactData;
+        const targetElem = refElem.value;
+        const panelElem = refOptionPanel.value;
+        const btnTransfer = computeBtnTransfer.value;
+        const popupOpts = computePopupOpts.value;
+        const handleStyle = () => {
+          const ppObj = updatePanelPlacement(targetElem, panelElem, {
+            placement: popupOpts.placement || placement,
+            defaultPlacement: popupOpts.defaultPlacement,
+            appendTo: popupOpts.appendTo,
+            teleportTo: btnTransfer
+          });
+          const panelStyle = Object.assign(ppObj.style, {
+            zIndex: panelIndex
+          });
+          reactData.panelStyle = panelStyle;
+          reactData.panelPlacement = ppObj.placement;
+        };
+        handleStyle();
+        return nextTick().then(handleStyle);
+      };
+      const showOptionPanel = () => {
+        const { hpTimeout } = internalData;
+        const isDisabled = computeIsDisabled.value;
+        if (!isDisabled) {
+          if (hpTimeout) {
+            clearTimeout(hpTimeout);
+            internalData.hpTimeout = void 0;
+          }
+          if (!reactData.initialized) {
+            reactData.initialized = true;
+          }
+          reactData.isActivated = true;
+          reactData.isAniVisible = true;
+          setTimeout(() => {
+            updateModelColor();
+            reactData.visiblePanel = true;
+          }, 10);
+          updateZindex();
+          updatePlacement();
         }
-        if (!reactData.initialized) {
-          reactData.initialized = true;
+      };
+      const hideOptionPanel = () => {
+        reactData.visiblePanel = false;
+        internalData.hpTimeout = setTimeout(() => {
+          reactData.isAniVisible = false;
+        }, 350);
+      };
+      const changeEvent = (evnt, value) => {
+        reactData.selectColor = value;
+        if (value !== props.modelValue) {
+          emitModel(value);
+          dispatchEvent("change", { value }, evnt);
+          if ($xeForm && formItemInfo) {
+            $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+          }
         }
-        reactData.isActivated = true;
-        reactData.isAniVisible = true;
-        setTimeout(() => {
-          updateModelColor();
-          reactData.visiblePanel = true;
-        }, 10);
-        updateZindex();
-        updatePlacement();
-      }
-    };
-    const hideOptionPanel = () => {
-      reactData.visiblePanel = false;
-      internalData.hpTimeout = setTimeout(() => {
-        reactData.isAniVisible = false;
-      }, 350);
-    };
-    const changeEvent = (evnt, value) => {
-      reactData.selectColor = value;
-      if (value !== props.modelValue) {
-        emitModel(value);
-        dispatchEvent("change", { value }, evnt);
-        if ($xeForm && formItemInfo) {
-          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+      };
+      const clearValueEvent = (evnt, selectValue) => {
+        changeEvent(evnt, selectValue);
+        dispatchEvent("clear", { value: selectValue }, evnt);
+      };
+      const focusEvent = () => {
+        const isDisabled = computeIsDisabled.value;
+        if (!isDisabled) {
+          if (!reactData.visiblePanel) {
+            showOptionPanel();
+          }
         }
-      }
-    };
-    const clearValueEvent = (evnt, selectValue) => {
-      changeEvent(evnt, selectValue);
-      dispatchEvent("clear", { value: selectValue }, evnt);
-    };
-    const focusEvent = () => {
-      const isDisabled = computeIsDisabled.value;
-      if (!isDisabled) {
-        if (!reactData.visiblePanel) {
+      };
+      const blurEvent = () => {
+        reactData.isActivated = false;
+      };
+      const clearEvent = (evnt) => {
+        clearValueEvent(evnt, null);
+        hideOptionPanel();
+      };
+      const confirmEvent = (evnt) => {
+        const { selectTyle, selectColor, hexValue } = reactData;
+        const value = selectTyle === "hex" ? hexValue : selectColor;
+        changeEvent(evnt, value);
+        hideOptionPanel();
+      };
+      const togglePanelEvent = (evnt) => {
+        evnt.preventDefault();
+        if (reactData.visiblePanel) {
+          hideOptionPanel();
+        } else {
           showOptionPanel();
         }
-      }
-    };
-    const blurEvent = () => {
-      reactData.isActivated = false;
-    };
-    const clearEvent = (evnt) => {
-      clearValueEvent(evnt, null);
-      hideOptionPanel();
-    };
-    const confirmEvent = (evnt) => {
-      const { selectTyle, selectColor, hexValue } = reactData;
-      const value = selectTyle === "hex" ? hexValue : selectColor;
-      changeEvent(evnt, value);
-      hideOptionPanel();
-    };
-    const togglePanelEvent = (evnt) => {
-      evnt.preventDefault();
-      if (reactData.visiblePanel) {
-        hideOptionPanel();
-      } else {
-        showOptionPanel();
-      }
-    };
-    const clickEvent = (evnt) => {
-      togglePanelEvent(evnt);
-      dispatchEvent("click", {}, evnt);
-    };
-    const handlePanelClickEvent = () => {
-      reactData.showTypePopup = false;
-    };
-    const toggleTypeVisibleEvent = (evnt) => {
-      evnt.stopPropagation();
-      reactData.showTypePopup = !reactData.showTypePopup;
-    };
-    const handleChangeType = (type) => {
-      const { selectTyle } = reactData;
-      if (type !== selectTyle) {
-        reactData.selectTyle = type;
-        updateModelColor();
-      }
-      reactData.showTypePopup = false;
-    };
-    const handleHueColor = (offsetLeft) => {
-      const hueSliderEl = refHueSliderElem.value;
-      const hueSliderBtnEl = refHueSliderBtnElem.value;
-      if (hueSliderEl && hueSliderBtnEl) {
-        if (offsetLeft < 0) {
-          offsetLeft = 0;
+      };
+      const clickEvent = (evnt) => {
+        togglePanelEvent(evnt);
+        dispatchEvent("click", {}, evnt);
+      };
+      const handlePanelClickEvent = () => {
+        reactData.showTypePopup = false;
+      };
+      const toggleTypeVisibleEvent = (evnt) => {
+        evnt.stopPropagation();
+        reactData.showTypePopup = !reactData.showTypePopup;
+      };
+      const handleChangeType = (type) => {
+        const { selectTyle } = reactData;
+        if (type !== selectTyle) {
+          reactData.selectTyle = type;
+          updateModelColor();
+        }
+        reactData.showTypePopup = false;
+      };
+      const handleHueColor = (offsetLeft) => {
+        const hueSliderEl = refHueSliderElem.value;
+        const hueSliderBtnEl = refHueSliderBtnElem.value;
+        if (hueSliderEl && hueSliderBtnEl) {
+          if (offsetLeft < 0) {
+            offsetLeft = 0;
+          }
+          const barWidth = XEUtils.toInteger(hueSliderEl.clientWidth);
+          const itemNum = 255;
+          const countNum = itemNum * 6;
+          const offsetX = XEUtils.ceil(countNum / barWidth * offsetLeft);
+          const offsetNum = offsetX % itemNum;
+          let rNum = 0;
+          let gNum = 0;
+          let bNum = 0;
+          switch (Math.ceil(offsetX / itemNum)) {
+            case 1:
+              rNum = itemNum;
+              bNum = offsetNum;
+              break;
+            case 2:
+              rNum = itemNum - offsetNum;
+              bNum = itemNum;
+              break;
+            case 3:
+              gNum = offsetNum;
+              bNum = itemNum;
+              break;
+            case 4:
+              gNum = itemNum;
+              bNum = itemNum - offsetNum;
+              break;
+            case 5:
+              rNum = offsetNum;
+              gNum = itemNum;
+              break;
+            case 6:
+              rNum = itemNum;
+              gNum = itemNum - offsetNum;
+              break;
+          }
+          reactData.panelColor = toValRgb(rNum, gNum, bNum);
+          hueSliderBtnEl.style.left = toCssUnit(offsetLeft);
         }
-        const barWidth = XEUtils.toInteger(hueSliderEl.clientWidth);
-        const itemNum = 255;
-        const countNum = itemNum * 6;
-        const offsetX = XEUtils.ceil(countNum / barWidth * offsetLeft);
-        const offsetNum = offsetX % itemNum;
-        let rNum = 0;
-        let gNum = 0;
-        let bNum = 0;
-        switch (Math.ceil(offsetX / itemNum)) {
-          case 1:
-            rNum = itemNum;
-            bNum = offsetNum;
-            break;
-          case 2:
-            rNum = itemNum - offsetNum;
-            bNum = itemNum;
-            break;
-          case 3:
-            gNum = offsetNum;
-            bNum = itemNum;
-            break;
-          case 4:
-            gNum = itemNum;
-            bNum = itemNum - offsetNum;
-            break;
-          case 5:
-            rNum = offsetNum;
-            gNum = itemNum;
-            break;
-          case 6:
-            rNum = itemNum;
-            gNum = itemNum - offsetNum;
-            break;
+      };
+      const handleHueBarEvent = (evnt) => {
+        const hueSliderEl = refHueSliderElem.value;
+        const hueSliderBtnEl = refHueSliderBtnElem.value;
+        if (hueSliderEl && hueSliderBtnEl) {
+          const hueSliderRect = hueSliderEl.getBoundingClientRect();
+          const barWidth = XEUtils.toInteger(hueSliderEl.clientWidth);
+          const offsetLeft = XEUtils.ceil(Math.min(barWidth - 1, Math.max(1, evnt.clientX - hueSliderRect.x)));
+          handleHueColor(offsetLeft);
         }
-        reactData.panelColor = toValRgb(rNum, gNum, bNum);
-        hueSliderBtnEl.style.left = toCssUnit(offsetLeft);
-      }
-    };
-    const handleHueBarEvent = (evnt) => {
-      const hueSliderEl = refHueSliderElem.value;
-      const hueSliderBtnEl = refHueSliderBtnElem.value;
-      if (hueSliderEl && hueSliderBtnEl) {
-        const hueSliderRect = hueSliderEl.getBoundingClientRect();
-        const barWidth = XEUtils.toInteger(hueSliderEl.clientWidth);
-        const offsetLeft = XEUtils.ceil(Math.min(barWidth - 1, Math.max(1, evnt.clientX - hueSliderRect.x)));
-        handleHueColor(offsetLeft);
-      }
-    };
-    const handleHueSliderMousedownEvent = (evnt) => {
-      evnt.preventDefault();
-      document.onmousemove = (evnt2) => {
-        evnt2.preventDefault();
-        handleHueBarEvent(evnt2);
       };
-      document.onmouseup = (evnt2) => {
-        document.onmousemove = null;
-        document.onmouseup = null;
-        handleHueBarEvent(evnt2);
+      const handleHueSliderMousedownEvent = (evnt) => {
+        evnt.preventDefault();
+        document.onmousemove = (evnt2) => {
+          evnt2.preventDefault();
+          handleHueBarEvent(evnt2);
+        };
+        document.onmouseup = (evnt2) => {
+          document.onmousemove = null;
+          document.onmouseup = null;
+          handleHueBarEvent(evnt2);
+        };
       };
-    };
-    const handleAlphaColor = (offsetLeft) => {
-      const { selectColor } = reactData;
-      const alphaSliderEl = refAlphaSliderElem.value;
-      const alphaSliderBtnEl = refAlphaSliderBtnElem.value;
-      if (alphaSliderEl && alphaSliderBtnEl) {
-        const alphaSliderRect = alphaSliderEl.getBoundingClientRect();
-        const barWidth = alphaSliderRect.width;
-        if (offsetLeft < 0) {
-          offsetLeft = 0;
+      const handleAlphaColor = (offsetLeft) => {
+        const { selectColor } = reactData;
+        const alphaSliderEl = refAlphaSliderElem.value;
+        const alphaSliderBtnEl = refAlphaSliderBtnElem.value;
+        if (alphaSliderEl && alphaSliderBtnEl) {
+          const alphaSliderRect = alphaSliderEl.getBoundingClientRect();
+          const barWidth = alphaSliderRect.width;
+          if (offsetLeft < 0) {
+            offsetLeft = 0;
+          }
+          if (offsetLeft > barWidth) {
+            offsetLeft = barWidth;
+          }
+          const alpha = XEUtils.ceil(100 / barWidth * offsetLeft / 100, 2);
+          reactData.aValue = alpha;
+          alphaSliderBtnEl.style.left = toCssUnit(offsetLeft);
+          reactData.selectColor = selectColor ? updateColorAlpha(selectColor, alpha) : "";
         }
-        if (offsetLeft > barWidth) {
-          offsetLeft = barWidth;
+      };
+      const handleAlphaBarEvent = (evnt) => {
+        const alphaSliderEl = refAlphaSliderElem.value;
+        const alphaSliderBtnEl = refAlphaSliderBtnElem.value;
+        if (alphaSliderEl && alphaSliderBtnEl) {
+          const alphaSliderRect = alphaSliderEl.getBoundingClientRect();
+          const barWidth = alphaSliderRect.width;
+          const offsetLeft = Math.min(barWidth, Math.max(0, evnt.clientX - alphaSliderRect.x));
+          handleAlphaColor(offsetLeft);
+          updateModelColor();
         }
-        const alpha = XEUtils.ceil(100 / barWidth * offsetLeft / 100, 2);
-        reactData.aValue = alpha;
-        alphaSliderBtnEl.style.left = toCssUnit(offsetLeft);
-        reactData.selectColor = selectColor ? updateColorAlpha(selectColor, alpha) : "";
-      }
-    };
-    const handleAlphaBarEvent = (evnt) => {
-      const alphaSliderEl = refAlphaSliderElem.value;
-      const alphaSliderBtnEl = refAlphaSliderBtnElem.value;
-      if (alphaSliderEl && alphaSliderBtnEl) {
-        const alphaSliderRect = alphaSliderEl.getBoundingClientRect();
-        const barWidth = alphaSliderRect.width;
-        const offsetLeft = Math.min(barWidth, Math.max(0, evnt.clientX - alphaSliderRect.x));
-        handleAlphaColor(offsetLeft);
+      };
+      const handleAlphaSliderMousedownEvent = (evnt) => {
+        evnt.preventDefault();
+        document.onmousemove = (evnt2) => {
+          evnt2.preventDefault();
+          handleAlphaBarEvent(evnt2);
+        };
+        document.onmouseup = (evnt2) => {
+          document.onmousemove = null;
+          document.onmouseup = null;
+          handleAlphaBarEvent(evnt2);
+        };
+      };
+      const handleInputRgbEvent = () => {
+        const { rValue, gValue, bValue, aValue } = reactData;
+        reactData.selectColor = toValRgb(rValue, gValue, bValue, aValue);
         updateModelColor();
-      }
-    };
-    const handleAlphaSliderMousedownEvent = (evnt) => {
-      evnt.preventDefault();
-      document.onmousemove = (evnt2) => {
-        evnt2.preventDefault();
-        handleAlphaBarEvent(evnt2);
       };
-      document.onmouseup = (evnt2) => {
-        document.onmousemove = null;
-        document.onmouseup = null;
-        handleAlphaBarEvent(evnt2);
+      const handleInputAlphaEvent = () => {
+        const { aValue } = reactData;
+        const alphaSliderEl = refAlphaSliderElem.value;
+        const alphaSliderBtnEl = refAlphaSliderBtnElem.value;
+        if (alphaSliderEl && alphaSliderBtnEl) {
+          const alphaSliderRect = alphaSliderEl.getBoundingClientRect();
+          const barWidth = alphaSliderRect.width;
+          const offsetLeft = barWidth * aValue;
+          handleAlphaColor(offsetLeft);
+        }
+      };
+      const handleQuickEvent = (evnt, item) => {
+        const value = item.value;
+        reactData.selectColor = value;
+        updateModelColor();
       };
-    };
-    const handleInputRgbEvent = () => {
-      const { rValue, gValue, bValue, aValue } = reactData;
-      reactData.selectColor = toValRgb(rValue, gValue, bValue, aValue);
-      updateModelColor();
-    };
-    const handleInputAlphaEvent = () => {
-      const { aValue } = reactData;
-      const alphaSliderEl = refAlphaSliderElem.value;
-      const alphaSliderBtnEl = refAlphaSliderBtnElem.value;
-      if (alphaSliderEl && alphaSliderBtnEl) {
-        const alphaSliderRect = alphaSliderEl.getBoundingClientRect();
-        const barWidth = alphaSliderRect.width;
-        const offsetLeft = barWidth * aValue;
-        handleAlphaColor(offsetLeft);
-      }
-    };
-    const handleQuickEvent = (evnt, item) => {
-      const value = item.value;
-      reactData.selectColor = value;
-      updateModelColor();
-    };
-    const handlePanelColor = (offsetLeft, offsetTop) => {
-      const colorActiveEl = refColorActiveElem.value;
-      if (colorActiveEl) {
-        colorActiveEl.style.top = toCssUnit(offsetTop);
-        colorActiveEl.style.left = toCssUnit(offsetLeft);
-      }
-    };
-    const handleEyeDropperEvent = () => {
-      if (WinEyeDropper) {
-        try {
-          const eyeDropper = new WinEyeDropper();
-          eyeDropper.open().then((rest) => {
-            if (rest && rest.sRGBHex) {
-              reactData.selectColor = rest.sRGBHex;
+      const handlePanelColor = (offsetLeft, offsetTop) => {
+        const colorActiveEl = refColorActiveElem.value;
+        if (colorActiveEl) {
+          colorActiveEl.style.top = toCssUnit(offsetTop);
+          colorActiveEl.style.left = toCssUnit(offsetLeft);
+        }
+      };
+      const handleEyeDropperEvent = () => {
+        if (WinEyeDropper) {
+          try {
+            const eyeDropper = new WinEyeDropper();
+            eyeDropper.open().then((rest) => {
+              if (rest && rest.sRGBHex) {
+                reactData.selectColor = rest.sRGBHex;
+                updateModelColor();
+              }
+            }).catch(() => {
+            });
+          } catch (e) {
+          }
+        }
+      };
+      const handleSelectColorByXY = (clientX, clientY) => {
+        const { showAlpha } = props;
+        const { panelColor, aValue } = reactData;
+        const colorPanelEl = refColorPanelElem.value;
+        const colorActiveEl = refColorActiveElem.value;
+        if (colorPanelEl && colorActiveEl) {
+          const { clientWidth, clientHeight } = colorPanelEl;
+          const colorPanelRect = colorPanelEl.getBoundingClientRect();
+          const offsetTop = Math.min(clientHeight, Math.max(0, clientY - colorPanelRect.y));
+          const offsetLeft = Math.min(clientWidth, Math.max(0, clientX - colorPanelRect.x));
+          const colorRest = parseValColor(panelColor);
+          if (colorRest) {
+            const hsvRest = colorRest.type === "hex" ? hexToHsv(colorRest.hex) : rgbToHsv(colorRest);
+            if (hsvRest) {
+              const ragRest = hsvToRgb(hsvRest.h, offsetLeft / clientWidth, 1 - offsetTop / clientHeight);
+              reactData.selectColor = toValRgb(ragRest.r, ragRest.g, ragRest.b, showAlpha ? aValue : null);
               updateModelColor();
             }
-          }).catch(() => {
-          });
-        } catch (e) {
-        }
-      }
-    };
-    const handleSelectColorByXY = (clientX, clientY) => {
-      const { showAlpha } = props;
-      const { panelColor, aValue } = reactData;
-      const colorPanelEl = refColorPanelElem.value;
-      const colorActiveEl = refColorActiveElem.value;
-      if (colorPanelEl && colorActiveEl) {
-        const { clientWidth, clientHeight } = colorPanelEl;
-        const colorPanelRect = colorPanelEl.getBoundingClientRect();
-        const offsetTop = Math.min(clientHeight, Math.max(0, clientY - colorPanelRect.y));
-        const offsetLeft = Math.min(clientWidth, Math.max(0, clientX - colorPanelRect.x));
-        const colorRest = parseValColor(panelColor);
-        if (colorRest) {
-          const hsvRest = colorRest.type === "hex" ? hexToHsv(colorRest.hex) : rgbToHsv(colorRest);
-          if (hsvRest) {
-            const ragRest = hsvToRgb(hsvRest.h, offsetLeft / clientWidth, 1 - offsetTop / clientHeight);
-            reactData.selectColor = toValRgb(ragRest.r, ragRest.g, ragRest.b, showAlpha ? aValue : null);
-            updateModelColor();
           }
+          handlePanelColor(offsetLeft, offsetTop);
         }
-        handlePanelColor(offsetLeft, offsetTop);
-      }
-    };
-    const handleSelectColorMousedownEvent = (evnt) => {
-      evnt.stopPropagation();
-      evnt.preventDefault();
-      handleSelectColorByXY(evnt.clientX, evnt.clientY);
-      document.onmousemove = (evnt2) => {
-        handleSelectColorByXY(evnt2.clientX, evnt2.clientY);
       };
-      document.onmouseup = () => {
-        document.onmousemove = null;
-        document.onmouseup = null;
+      const handleSelectColorMousedownEvent = (evnt) => {
+        evnt.stopPropagation();
+        evnt.preventDefault();
+        handleSelectColorByXY(evnt.clientX, evnt.clientY);
+        document.onmousemove = (evnt2) => {
+          handleSelectColorByXY(evnt2.clientX, evnt2.clientY);
+        };
+        document.onmouseup = () => {
+          document.onmousemove = null;
+          document.onmouseup = null;
+        };
       };
-    };
-    const handleCopyColorEvent = () => {
-      const { selectColor } = reactData;
-      if (selectColor) {
-        if (VxeUI.clipboard.copy(selectColor)) {
-          if (VxeUI.modal) {
-            VxeUI.modal.message({
-              content: getI18n("vxe.colorPicker.copySuccess", [selectColor]),
-              status: "success"
-            });
+      const handleCopyColorEvent = () => {
+        const { selectColor } = reactData;
+        if (selectColor) {
+          if (VxeUI.clipboard.copy(selectColor)) {
+            if (VxeUI.modal) {
+              VxeUI.modal.message({
+                content: getI18n("vxe.colorPicker.copySuccess", [selectColor]),
+                status: "success"
+              });
+            }
           }
         }
-      }
-    };
-    const handleGlobalMousedownEvent = (evnt) => {
-      const { visiblePanel } = reactData;
-      const isDisabled = computeIsDisabled.value;
-      if (!isDisabled) {
-        const el = refElem.value;
-        const panelElem = refOptionPanel.value;
-        reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag;
-        if (visiblePanel && !reactData.isActivated) {
+      };
+      const handleGlobalMousedownEvent = (evnt) => {
+        const { visiblePanel } = reactData;
+        const isDisabled = computeIsDisabled.value;
+        if (!isDisabled) {
+          const el = refElem.value;
+          const panelElem = refOptionPanel.value;
+          reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag;
+          if (visiblePanel && !reactData.isActivated) {
+            hideOptionPanel();
+          }
+        }
+      };
+      const handleGlobalBlurEvent = () => {
+        const { visiblePanel, isActivated } = reactData;
+        if (visiblePanel) {
           hideOptionPanel();
         }
-      }
-    };
-    const handleGlobalBlurEvent = () => {
-      const { visiblePanel, isActivated } = reactData;
-      if (visiblePanel) {
-        hideOptionPanel();
-      }
-      if (isActivated) {
-        reactData.isActivated = false;
-      }
-      if (visiblePanel || isActivated) {
-        const targetElem = refInputTarget.value;
-        if (targetElem) {
-          targetElem.blur();
+        if (isActivated) {
+          reactData.isActivated = false;
+        }
+        if (visiblePanel || isActivated) {
+          const targetElem = refInputTarget.value;
+          if (targetElem) {
+            targetElem.blur();
+          }
+        }
+      };
+      const handleGlobalResizeEvent = () => {
+        const { visiblePanel } = reactData;
+        if (visiblePanel) {
+          updatePlacement();
+        }
+      };
+      const handleGlobalScrollEvent = () => {
+        const { visiblePanel } = reactData;
+        if (visiblePanel) {
+          updatePlacement();
+        }
+      };
+      const dispatchEvent = (type, params, evnt) => {
+        emit(type, createEvent(evnt, { $colorPicker: $xeColorPicker }, params));
+      };
+      const colorPickerMethods = {
+        dispatchEvent
+      };
+      const colorPickerPrivateMethods = {};
+      Object.assign($xeColorPicker, colorPickerMethods, colorPickerPrivateMethods);
+      const renderColorWrapper = () => {
+        const { showColorExtractor } = props;
+        const { panelColor } = reactData;
+        if (showColorExtractor) {
+          return h(
+            "div",
+            {
+              ref: refColorPanelElem,
+              class: "vxe-color-picker--color-wrapper",
+              onMousedown: handleSelectColorMousedownEvent
+            },
+            [
+              h("div", {
+                class: "vxe-color-picker--color-bg",
+                style: {
+                  backgroundColor: panelColor
+                }
+              }),
+              h("div", {
+                class: "vxe-color-picker--white-bg"
+              }),
+              h("div", {
+                class: "vxe-color-picker--black-bg"
+              }),
+              h("div", {
+                ref: refColorActiveElem,
+                class: "vxe-color-picker--color-active"
+              })
+            ]
+          );
         }
-      }
-    };
-    const handleGlobalResizeEvent = () => {
-      const { visiblePanel } = reactData;
-      if (visiblePanel) {
-        updatePlacement();
-      }
-    };
-    const handleGlobalScrollEvent = () => {
-      const { visiblePanel } = reactData;
-      if (visiblePanel) {
-        updatePlacement();
-      }
-    };
-    const dispatchEvent = (type, params, evnt) => {
-      emit(type, createEvent(evnt, { $colorPicker: $xeColorPicker }, params));
-    };
-    const colorPickerMethods = {
-      dispatchEvent
-    };
-    const colorPickerPrivateMethods = {};
-    Object.assign($xeColorPicker, colorPickerMethods, colorPickerPrivateMethods);
-    const renderColorWrapper = () => {
-      const { showColorExtractor } = props;
-      const { panelColor } = reactData;
-      if (showColorExtractor) {
+        return renderEmptyElement($xeColorPicker);
+      };
+      const renderColorBar = () => {
+        const { showAlpha, clickToCopy, showEyeDropper } = props;
+        const { selectTyle, showTypePopup, hexValue, rValue, gValue, bValue, aValue, selectColor, panelColor } = reactData;
+        const isRgb = computeIsRgb.value;
+        const selectTypeItem = computeSelectTypeItem.value;
         return h(
           "div",
           {
-            ref: refColorPanelElem,
-            class: "vxe-color-picker--color-wrapper",
-            onMousedown: handleSelectColorMousedownEvent
+            class: "vxe-color-picker--bar-wrapper"
           },
           [
-            h("div", {
-              class: "vxe-color-picker--color-bg",
-              style: {
-                backgroundColor: panelColor
-              }
-            }),
-            h("div", {
-              class: "vxe-color-picker--white-bg"
-            }),
-            h("div", {
-              class: "vxe-color-picker--black-bg"
-            }),
-            h("div", {
-              ref: refColorActiveElem,
-              class: "vxe-color-picker--color-active"
-            })
+            h(
+              "div",
+              {
+                class: "vxe-color-picker--slider-wrapper"
+              },
+              [
+                showEyeDropper && WinEyeDropper ? h(
+                  "div",
+                  {
+                    class: "vxe-color-picker--color-dropper"
+                  },
+                  [
+                    h(
+                      "span",
+                      {
+                        class: "vxe-color-picker--color-dropper-btn",
+                        onClick: handleEyeDropperEvent
+                      },
+                      [
+                        h("i", {
+                          class: getIcon().COLOR_PICKER_EYE_DROPPER
+                        })
+                      ]
+                    )
+                  ]
+                ) : renderEmptyElement($xeColorPicker),
+                h(
+                  "div",
+                  {
+                    class: "vxe-color-picker--slider-preview"
+                  },
+                  [
+                    h(
+                      "div",
+                      {
+                        class: "vxe-color-picker--preview-btn"
+                      },
+                      [
+                        h(
+                          "div",
+                          {
+                            class: "vxe-color-picker--preview-color",
+                            style: {
+                              backgroundColor: selectColor
+                            }
+                          },
+                          clickToCopy ? [
+                            h(
+                              "span",
+                              {
+                                class: "vxe-color-picker--preview-copy-btn",
+                                onClick: handleCopyColorEvent
+                              },
+                              [
+                                h("i", {
+                                  class: getIcon().COLOR_PICKER_COLOR_COPY
+                                })
+                              ]
+                            )
+                          ] : []
+                        )
+                      ]
+                    )
+                  ]
+                ),
+                h(
+                  "div",
+                  {
+                    class: "vxe-color-picker--slider-handle"
+                  },
+                  [
+                    h(
+                      "div",
+                      {
+                        ref: refHueSliderElem,
+                        class: "vxe-color-picker--bar-hue-slider",
+                        onClick: handleHueBarEvent
+                      },
+                      [
+                        h("div", {
+                          ref: refHueSliderBtnElem,
+                          class: "vxe-color-picker--bar-hue-btn",
+                          onMousedown: handleHueSliderMousedownEvent
+                        })
+                      ]
+                    ),
+                    showAlpha ? h(
+                      "div",
+                      {
+                        ref: refAlphaSliderElem,
+                        class: "vxe-color-picker--bar-alpha-slider",
+                        onClick: handleAlphaBarEvent
+                      },
+                      [
+                        h("div", {
+                          class: "vxe-color-picker--bar-alpha-bg",
+                          style: {
+                            background: `linear-gradient(to right, rgba(0, 0, 0, 0), ${panelColor})`
+                          }
+                        }),
+                        h("div", {
+                          ref: refAlphaSliderBtnElem,
+                          class: "vxe-color-picker--bar-alpha-btn",
+                          onMousedown: handleAlphaSliderMousedownEvent
+                        })
+                      ]
+                    ) : renderEmptyElement($xeColorPicker)
+                  ]
+                )
+              ]
+            ),
+            h(
+              "div",
+              {
+                class: "vxe-color-picker--custom-wrapper"
+              },
+              [
+                h(
+                  "div",
+                  {
+                    class: "vxe-color-picker--type-switch"
+                  },
+                  [
+                    h(
+                      "div",
+                      {
+                        class: "vxe-color-picker--type-label",
+                        onClick: toggleTypeVisibleEvent
+                      },
+                      [
+                        h("span", `${selectTypeItem ? selectTypeItem.label : selectTyle}`),
+                        h(
+                          "span",
+                          {
+                            class: "vxe-color-picker--type-icon"
+                          },
+                          [
+                            h("i", {
+                              class: showTypePopup ? getIcon().COLOR_PICKER_TPTY_OPEN : getIcon().COLOR_PICKER_TPTY_CLOSE
+                            })
+                          ]
+                        )
+                      ]
+                    ),
+                    h(
+                      "div",
+                      {
+                        class: [
+                          "vxe-color-picker--type-popup",
+                          {
+                            "is--visible": showTypePopup
+                          }
+                        ]
+                      },
+                      typeList.map((item) => {
+                        return h(
+                          "div",
+                          {
+                            class: "vxe-color-picker--type-item",
+                            onClick(evnt) {
+                              evnt.stopPropagation();
+                              handleChangeType(item.value);
+                            }
+                          },
+                          item.label
+                        );
+                      })
+                    )
+                  ]
+                ),
+                h(
+                  "div",
+                  {
+                    class: `vxe-color-picker--${selectTyle}-wrapper`
+                  },
+                  isRgb ? [
+                    h(
+                      "div",
+                      {
+                        class: "vxe-color-picker--input-wrapper"
+                      },
+                      [
+                        h(VxeNumberInputComponent, {
+                          type: "integer",
+                          size: "mini",
+                          align: "center",
+                          min: 0,
+                          max: 255,
+                          maxLength: 3,
+                          placeholder: "",
+                          modelValue: rValue,
+                          controlConfig: {
+                            showButton: false
+                          },
+                          "onUpdate:modelValue"(val) {
+                            reactData.rValue = val;
+                          },
+                          onChange: handleInputRgbEvent
+                        }),
+                        h(VxeNumberInputComponent, {
+                          type: "integer",
+                          size: "mini",
+                          align: "center",
+                          min: 0,
+                          max: 255,
+                          maxLength: 3,
+                          placeholder: "",
+                          modelValue: gValue,
+                          controlConfig: {
+                            showButton: false
+                          },
+                          "onUpdate:modelValue"(val) {
+                            reactData.gValue = val;
+                          },
+                          onChange: handleInputRgbEvent
+                        }),
+                        h(VxeNumberInputComponent, {
+                          type: "integer",
+                          size: "mini",
+                          align: "center",
+                          min: 0,
+                          max: 255,
+                          maxLength: 3,
+                          placeholder: "",
+                          modelValue: bValue,
+                          controlConfig: {
+                            showButton: false
+                          },
+                          "onUpdate:modelValue"(val) {
+                            reactData.bValue = val;
+                          },
+                          onChange: handleInputRgbEvent
+                        }),
+                        h(VxeNumberInputComponent, {
+                          type: "number",
+                          size: "mini",
+                          align: "center",
+                          min: 0,
+                          max: 1,
+                          step: 0.01,
+                          maxLength: 4,
+                          placeholder: "",
+                          modelValue: aValue,
+                          controlConfig: {
+                            showButton: false
+                          },
+                          "onUpdate:modelValue"(val) {
+                            reactData.aValue = val;
+                          },
+                          onChange: handleInputAlphaEvent
+                        })
+                      ]
+                    ),
+                    h(
+                      "div",
+                      {
+                        class: "vxe-color-picker--input-title"
+                      },
+                      [h("span", "R"), h("span", "G"), h("span", "B"), h("span", "A")]
+                    )
+                  ] : [
+                    h(
+                      "div",
+                      {
+                        class: "vxe-color-picker--input-wrapper"
+                      },
+                      [
+                        h(VxeInputComponent, {
+                          type: "text",
+                          size: "mini",
+                          align: "center",
+                          maxLength: 9,
+                          placeholder: "",
+                          modelValue: hexValue,
+                          "onUpdate:modelValue"(val) {
+                            reactData.hexValue = val;
+                          },
+                          onChange() {
+                            const colorRest = parseValColor(reactData.hexValue);
+                            if (colorRest) {
+                              if (colorRest.value) {
+                                reactData.selectColor = colorRest.value;
+                                updateModelColor();
+                              }
+                            }
+                          }
+                        })
+                      ]
+                    ),
+                    h(
+                      "div",
+                      {
+                        class: "vxe-color-picker--input-title"
+                      },
+                      getI18n("vxe.colorPicker.hex")
+                    )
+                  ]
+                )
+              ]
+            )
           ]
         );
-      }
-      return renderEmptyElement($xeColorPicker);
-    };
-    const renderColorBar = () => {
-      const { showAlpha, clickToCopy, showEyeDropper } = props;
-      const { selectTyle, showTypePopup, hexValue, rValue, gValue, bValue, aValue, selectColor, panelColor } = reactData;
-      const isRgb = computeIsRgb.value;
-      const selectTypeItem = computeSelectTypeItem.value;
-      return h(
-        "div",
-        {
-          class: "vxe-color-picker--bar-wrapper"
-        },
-        [
-          h(
+      };
+      const renderQuickWrapper = () => {
+        const { showQuick } = props;
+        const colorList = computeColorList.value;
+        if (showQuick && colorList.length) {
+          return h(
             "div",
             {
-              class: "vxe-color-picker--slider-wrapper"
+              class: "vxe-color-picker--quick-wrapper"
             },
-            [
-              showEyeDropper && WinEyeDropper ? h(
-                "div",
-                {
-                  class: "vxe-color-picker--color-dropper"
-                },
-                [
-                  h(
-                    "span",
-                    {
-                      class: "vxe-color-picker--color-dropper-btn",
-                      onClick: handleEyeDropperEvent
-                    },
-                    [
-                      h("i", {
-                        class: getIcon().COLOR_PICKER_EYE_DROPPER
-                      })
-                    ]
-                  )
-                ]
-              ) : renderEmptyElement($xeColorPicker),
-              h(
-                "div",
-                {
-                  class: "vxe-color-picker--slider-preview"
-                },
-                [
-                  h(
-                    "div",
-                    {
-                      class: "vxe-color-picker--preview-btn"
-                    },
-                    [
-                      h(
-                        "div",
-                        {
-                          class: "vxe-color-picker--preview-color",
-                          style: {
-                            backgroundColor: selectColor
-                          }
-                        },
-                        clickToCopy ? [
-                          h(
-                            "span",
-                            {
-                              class: "vxe-color-picker--preview-copy-btn",
-                              onClick: handleCopyColorEvent
-                            },
-                            [
-                              h("i", {
-                                class: getIcon().COLOR_PICKER_COLOR_COPY
-                              })
-                            ]
-                          )
-                        ] : []
-                      )
-                    ]
-                  )
-                ]
-              ),
-              h(
-                "div",
-                {
-                  class: "vxe-color-picker--slider-handle"
+            colorList.map((item, i) => {
+              return h("div", {
+                key: i,
+                class: "vxe-color-picker--quick-item",
+                title: item.label || "",
+                style: {
+                  backgroundColor: item.value
                 },
-                [
-                  h(
-                    "div",
-                    {
-                      ref: refHueSliderElem,
-                      class: "vxe-color-picker--bar-hue-slider",
-                      onClick: handleHueBarEvent
-                    },
-                    [
-                      h("div", {
-                        ref: refHueSliderBtnElem,
-                        class: "vxe-color-picker--bar-hue-btn",
-                        onMousedown: handleHueSliderMousedownEvent
-                      })
-                    ]
-                  ),
-                  showAlpha ? h(
-                    "div",
-                    {
-                      ref: refAlphaSliderElem,
-                      class: "vxe-color-picker--bar-alpha-slider",
-                      onClick: handleAlphaBarEvent
-                    },
-                    [
-                      h("div", {
-                        class: "vxe-color-picker--bar-alpha-bg",
-                        style: {
-                          background: `linear-gradient(to right, rgba(0, 0, 0, 0), ${panelColor})`
-                        }
-                      }),
-                      h("div", {
-                        ref: refAlphaSliderBtnElem,
-                        class: "vxe-color-picker--bar-alpha-btn",
-                        onMousedown: handleAlphaSliderMousedownEvent
-                      })
-                    ]
-                  ) : renderEmptyElement($xeColorPicker)
-                ]
-              )
-            ]
-          ),
-          h(
+                onClick(evnt) {
+                  handleQuickEvent(evnt, item);
+                }
+              });
+            })
+          );
+        }
+        return renderEmptyElement($xeColorPicker);
+      };
+      const renderVN = () => {
+        const { className, popupClassName, clearable, modelValue } = props;
+        const { initialized, isActivated, isAniVisible, visiblePanel } = reactData;
+        const vSize = computeSize.value;
+        const isDisabled = computeIsDisabled.value;
+        const btnTransfer = computeBtnTransfer.value;
+        const formReadonly = computeFormReadonly.value;
+        if (formReadonly) {
+          return h(
             "div",
             {
-              class: "vxe-color-picker--custom-wrapper"
+              ref: refElem,
+              class: [
+                "vxe-color-picker--readonly",
+                className,
+                {
+                  [`size--${vSize}`]: vSize
+                }
+              ]
             },
             [
-              h(
-                "div",
-                {
-                  class: "vxe-color-picker--type-switch"
-                },
-                [
-                  h(
-                    "div",
-                    {
-                      class: "vxe-color-picker--type-label",
-                      onClick: toggleTypeVisibleEvent
-                    },
-                    [
-                      h("span", `${selectTypeItem ? selectTypeItem.label : selectTyle}`),
-                      h(
-                        "span",
-                        {
-                          class: "vxe-color-picker--type-icon"
-                        },
-                        [
-                          h("i", {
-                            class: showTypePopup ? getIcon().COLOR_PICKER_TPTY_OPEN : getIcon().COLOR_PICKER_TPTY_CLOSE
-                          })
-                        ]
-                      )
-                    ]
-                  ),
-                  h(
-                    "div",
-                    {
-                      class: [
-                        "vxe-color-picker--type-popup",
-                        {
-                          "is--visible": showTypePopup
-                        }
-                      ]
-                    },
-                    typeList.map((item) => {
-                      return h(
-                        "div",
-                        {
-                          class: "vxe-color-picker--type-item",
-                          onClick(evnt) {
-                            evnt.stopPropagation();
-                            handleChangeType(item.value);
-                          }
-                        },
-                        item.label
-                      );
-                    })
-                  )
-                ]
-              ),
-              h(
-                "div",
-                {
-                  class: `vxe-color-picker--${selectTyle}-wrapper`
-                },
-                isRgb ? [
-                  h(
-                    "div",
-                    {
-                      class: "vxe-color-picker--input-wrapper"
-                    },
-                    [
-                      h(VxeNumberInputComponent, {
-                        type: "integer",
-                        size: "mini",
-                        align: "center",
-                        min: 0,
-                        max: 255,
-                        maxLength: 3,
-                        placeholder: "",
-                        modelValue: rValue,
-                        controlConfig: {
-                          showButton: false
-                        },
-                        "onUpdate:modelValue"(val) {
-                          reactData.rValue = val;
-                        },
-                        onChange: handleInputRgbEvent
-                      }),
-                      h(VxeNumberInputComponent, {
-                        type: "integer",
-                        size: "mini",
-                        align: "center",
-                        min: 0,
-                        max: 255,
-                        maxLength: 3,
-                        placeholder: "",
-                        modelValue: gValue,
-                        controlConfig: {
-                          showButton: false
-                        },
-                        "onUpdate:modelValue"(val) {
-                          reactData.gValue = val;
-                        },
-                        onChange: handleInputRgbEvent
-                      }),
-                      h(VxeNumberInputComponent, {
-                        type: "integer",
-                        size: "mini",
-                        align: "center",
-                        min: 0,
-                        max: 255,
-                        maxLength: 3,
-                        placeholder: "",
-                        modelValue: bValue,
-                        controlConfig: {
-                          showButton: false
-                        },
-                        "onUpdate:modelValue"(val) {
-                          reactData.bValue = val;
-                        },
-                        onChange: handleInputRgbEvent
-                      }),
-                      h(VxeNumberInputComponent, {
-                        type: "number",
-                        size: "mini",
-                        align: "center",
-                        min: 0,
-                        max: 1,
-                        step: 0.01,
-                        maxLength: 4,
-                        placeholder: "",
-                        modelValue: aValue,
-                        controlConfig: {
-                          showButton: false
-                        },
-                        "onUpdate:modelValue"(val) {
-                          reactData.aValue = val;
-                        },
-                        onChange: handleInputAlphaEvent
-                      })
-                    ]
-                  ),
-                  h(
-                    "div",
-                    {
-                      class: "vxe-color-picker--input-title"
-                    },
-                    [h("span", "R"), h("span", "G"), h("span", "B"), h("span", "A")]
-                  )
-                ] : [
-                  h(
-                    "div",
-                    {
-                      class: "vxe-color-picker--input-wrapper"
-                    },
-                    [
-                      h(VxeInputComponent, {
-                        type: "text",
-                        size: "mini",
-                        align: "center",
-                        maxLength: 9,
-                        placeholder: "",
-                        modelValue: hexValue,
-                        "onUpdate:modelValue"(val) {
-                          reactData.hexValue = val;
-                        },
-                        onChange() {
-                          const colorRest = parseValColor(reactData.hexValue);
-                          if (colorRest) {
-                            if (colorRest.value) {
-                              reactData.selectColor = colorRest.value;
-                              updateModelColor();
-                            }
-                          }
-                        }
-                      })
-                    ]
-                  ),
-                  h(
-                    "div",
-                    {
-                      class: "vxe-color-picker--input-title"
-                    },
-                    getI18n("vxe.colorPicker.hex")
-                  )
-                ]
-              )
+              h("div", {
+                class: [
+                  "vxe-color-picker--readonly-color",
+                  {
+                    "is--empty": !modelValue
+                  }
+                ],
+                style: modelValue ? {
+                  backgroundColor: modelValue
+                } : void 0
+              })
             ]
-          )
-        ]
-      );
-    };
-    const renderQuickWrapper = () => {
-      const { showQuick } = props;
-      const colorList = computeColorList.value;
-      if (showQuick && colorList.length) {
-        return h(
-          "div",
-          {
-            class: "vxe-color-picker--quick-wrapper"
-          },
-          colorList.map((item, i) => {
-            return h("div", {
-              key: i,
-              class: "vxe-color-picker--quick-item",
-              title: item.label || "",
-              style: {
-                backgroundColor: item.value
-              },
-              onClick(evnt) {
-                handleQuickEvent(evnt, item);
-              }
-            });
-          })
-        );
-      }
-      return renderEmptyElement($xeColorPicker);
-    };
-    const renderVN = () => {
-      const { className, popupClassName, clearable, modelValue } = props;
-      const { initialized, isActivated, isAniVisible, visiblePanel } = reactData;
-      const vSize = computeSize.value;
-      const isDisabled = computeIsDisabled.value;
-      const btnTransfer = computeBtnTransfer.value;
-      const formReadonly = computeFormReadonly.value;
-      if (formReadonly) {
+          );
+        }
+        const currStyle = computeCurrStyle.value;
+        const popupOpts = computePopupOpts.value;
+        const { appendTo } = popupOpts;
         return h(
           "div",
           {
             ref: refElem,
             class: [
-              "vxe-color-picker--readonly",
-              className,
+              "vxe-color-picker",
+              className ? XEUtils.isFunction(className) ? className({ $colorPicker: $xeColorPicker }) : className : "",
               {
-                [`size--${vSize}`]: vSize
+                [`size--${vSize}`]: vSize,
+                "is--selected": !!modelValue,
+                "is--visible": visiblePanel,
+                "is--disabled": isDisabled,
+                "is--active": isActivated
               }
-            ]
+            ],
+            style: currStyle
           },
           [
-            h("div", {
-              class: [
-                "vxe-color-picker--readonly-color",
-                {
-                  "is--empty": !modelValue
-                }
-              ],
-              style: modelValue ? {
-                backgroundColor: modelValue
-              } : void 0
-            })
+            h("input", {
+              ref: refInputTarget,
+              class: "vxe-color-picker--input",
+              onFocus: focusEvent,
+              onBlur: blurEvent
+            }),
+            h(
+              "div",
+              {
+                class: "vxe-color-picker--inner",
+                onClick: clickEvent
+              },
+              [
+                h("div", {
+                  class: "vxe-color-picker--inner-color",
+                  style: {
+                    backgroundColor: modelValue
+                  }
+                })
+              ]
+            ),
+            h(
+              Teleport,
+              {
+                to: getPopupContainer(appendTo),
+                disabled: btnTransfer ? !initialized : true
+              },
+              [
+                h(
+                  "div",
+                  {
+                    ref: refOptionPanel,
+                    class: [
+                      "vxe-table--ignore-clear vxe-color-picker--panel",
+                      popupClassName ? XEUtils.isFunction(popupClassName) ? popupClassName({ $colorPicker: $xeColorPicker }) : popupClassName : "",
+                      {
+                        [`size--${vSize}`]: vSize,
+                        "is--transfer": btnTransfer,
+                        "ani--leave": isAniVisible,
+                        "ani--enter": visiblePanel
+                      }
+                    ],
+                    placement: reactData.panelPlacement,
+                    style: reactData.panelStyle
+                  },
+                  [
+                    initialized && (visiblePanel || isAniVisible) ? h(
+                      "div",
+                      {
+                        class: "vxe-color-picker--panel-wrapper",
+                        onClick: handlePanelClickEvent
+                      },
+                      [
+                        renderColorWrapper(),
+                        renderColorBar(),
+                        renderQuickWrapper(),
+                        h(
+                          "div",
+                          {
+                            class: "vxe-color-picker--footer-wrapper"
+                          },
+                          [
+                            clearable ? h(VxeButtonComponent, {
+                              content: getI18n("vxe.colorPicker.clear"),
+                              size: "mini",
+                              onClick: clearEvent
+                            }) : renderEmptyElement($xeColorPicker),
+                            h(VxeButtonComponent, {
+                              content: getI18n("vxe.colorPicker.confirm"),
+                              size: "mini",
+                              status: "primary",
+                              onClick: confirmEvent
+                            })
+                          ]
+                        )
+                      ]
+                    ) : renderEmptyElement($xeColorPicker)
+                  ]
+                )
+              ]
+            )
           ]
         );
-      }
-      const currStyle = computeCurrStyle.value;
-      const popupOpts = computePopupOpts.value;
-      const { appendTo } = popupOpts;
-      return h(
-        "div",
-        {
-          ref: refElem,
-          class: [
-            "vxe-color-picker",
-            className ? XEUtils.isFunction(className) ? className({ $colorPicker: $xeColorPicker }) : className : "",
-            {
-              [`size--${vSize}`]: vSize,
-              "is--selected": !!modelValue,
-              "is--visible": visiblePanel,
-              "is--disabled": isDisabled,
-              "is--active": isActivated
-            }
-          ],
-          style: currStyle
-        },
-        [
-          h("input", {
-            ref: refInputTarget,
-            class: "vxe-color-picker--input",
-            onFocus: focusEvent,
-            onBlur: blurEvent
-          }),
-          h(
-            "div",
-            {
-              class: "vxe-color-picker--inner",
-              onClick: clickEvent
-            },
-            [
-              h("div", {
-                class: "vxe-color-picker--inner-color",
-                style: {
-                  backgroundColor: modelValue
-                }
-              })
-            ]
-          ),
-          h(
-            Teleport,
-            {
-              to: getPopupContainer(appendTo),
-              disabled: btnTransfer ? !initialized : true
-            },
-            [
-              h(
-                "div",
-                {
-                  ref: refOptionPanel,
-                  class: [
-                    "vxe-table--ignore-clear vxe-color-picker--panel",
-                    popupClassName ? XEUtils.isFunction(popupClassName) ? popupClassName({ $colorPicker: $xeColorPicker }) : popupClassName : "",
-                    {
-                      [`size--${vSize}`]: vSize,
-                      "is--transfer": btnTransfer,
-                      "ani--leave": isAniVisible,
-                      "ani--enter": visiblePanel
-                    }
-                  ],
-                  placement: reactData.panelPlacement,
-                  style: reactData.panelStyle
-                },
-                [
-                  initialized && (visiblePanel || isAniVisible) ? h(
-                    "div",
-                    {
-                      class: "vxe-color-picker--panel-wrapper",
-                      onClick: handlePanelClickEvent
-                    },
-                    [
-                      renderColorWrapper(),
-                      renderColorBar(),
-                      renderQuickWrapper(),
-                      h(
-                        "div",
-                        {
-                          class: "vxe-color-picker--footer-wrapper"
-                        },
-                        [
-                          clearable ? h(VxeButtonComponent, {
-                            content: getI18n("vxe.colorPicker.clear"),
-                            size: "mini",
-                            onClick: clearEvent
-                          }) : renderEmptyElement($xeColorPicker),
-                          h(VxeButtonComponent, {
-                            content: getI18n("vxe.colorPicker.confirm"),
-                            size: "mini",
-                            status: "primary",
-                            onClick: confirmEvent
-                          })
-                        ]
-                      )
-                    ]
-                  ) : renderEmptyElement($xeColorPicker)
-                ]
-              )
-            ]
-          )
-        ]
+      };
+      watch(
+        () => props.modelValue,
+        () => {
+          updateMode();
+        }
       );
-    };
-    watch(
-      () => props.modelValue,
-      () => {
-        updateMode();
-      }
-    );
-    watch(
-      () => props.type,
-      () => {
-        updateType();
-      }
-    );
-    onMounted(() => {
-      globalEvents.on($xeColorPicker, "mousedown", handleGlobalMousedownEvent);
-      globalEvents.on($xeColorPicker, "blur", handleGlobalBlurEvent);
-      globalEvents.on($xeColorPicker, "resize", handleGlobalResizeEvent);
-      globalEvents.on($xeColorPicker, "scroll", handleGlobalScrollEvent);
-    });
-    onUnmounted(() => {
-      globalEvents.off($xeColorPicker, "mousedown");
-      globalEvents.off($xeColorPicker, "blur");
-      globalEvents.off($xeColorPicker, "resize");
-      globalEvents.off($xeColorPicker, "scroll");
-    });
-    updateType();
-    provide("$xeColorPicker", $xeColorPicker);
-    $xeColorPicker.renderVN = renderVN;
-    return $xeColorPicker;
-  },
-  render() {
-    return this.renderVN();
-  }
-});
+      watch(
+        () => props.type,
+        () => {
+          updateType();
+        }
+      );
+      onMounted(() => {
+        globalEvents.on($xeColorPicker, "mousedown", handleGlobalMousedownEvent);
+        globalEvents.on($xeColorPicker, "blur", handleGlobalBlurEvent);
+        globalEvents.on($xeColorPicker, "resize", handleGlobalResizeEvent);
+        globalEvents.on($xeColorPicker, "scroll", handleGlobalScrollEvent);
+      });
+      onUnmounted(() => {
+        globalEvents.off($xeColorPicker, "mousedown");
+        globalEvents.off($xeColorPicker, "blur");
+        globalEvents.off($xeColorPicker, "resize");
+        globalEvents.off($xeColorPicker, "scroll");
+      });
+      updateType();
+      provide("$xeColorPicker", $xeColorPicker);
+      $xeColorPicker.renderVN = renderVN;
+      return $xeColorPicker;
+    },
+    render() {
+      return this.renderVN();
+    }
+  })
+);
 export {
   color_picker_default as default
 };