vxe-pc-ui 3.16.0 → 3.16.1

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

@@ -0,0 +1,1183 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _comp = require("../../ui/src/comp");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ui = require("../../ui");
+var _dom = require("../../ui/src/dom");
+var _utils = require("../../ui/src/utils");
+var _util = require("./util");
+var _button = _interopRequireDefault(require("../../button"));
+var _input = _interopRequireDefault(require("../../input"));
+var _numberInput = _interopRequireDefault(require("../../number-input"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var WinEyeDropper = typeof window !== 'undefined' ? window.EyeDropper : null;
+var typeList = [{
+  label: 'HEX',
+  value: 'hex'
+}, {
+  label: 'RGB',
+  value: 'rgb'
+}];
+var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
+  name: 'VxeColorPicker',
+  mixins: [_ui.globalMixins.sizeMixin],
+  model: {
+    prop: 'value',
+    event: 'modelValue'
+  },
+  props: {
+    value: String,
+    placeholder: String,
+    clearable: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().colorPicker.clearable;
+      }
+    },
+    type: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().colorPicker.type;
+      }
+    },
+    size: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().colorPicker.size || (0, _ui.getConfig)().size;
+      }
+    },
+    className: [String, Function],
+    popupClassName: [String, Function],
+    colors: {
+      type: Array,
+      default: function _default() {
+        return _xeUtils.default.clone((0, _ui.getConfig)().colorPicker.colors, true) || [];
+      }
+    },
+    showAlpha: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().colorPicker.showAlpha;
+      }
+    },
+    showEyeDropper: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().colorPicker.showEyeDropper;
+      }
+    },
+    showColorExtractor: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().colorPicker.showColorExtractor;
+      }
+    },
+    showQuick: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().colorPicker.showQuick;
+      }
+    },
+    readonly: {
+      type: Boolean,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: null
+    },
+    clickToCopy: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().colorPicker.clickToCopy;
+      }
+    },
+    placement: String,
+    transfer: {
+      type: Boolean,
+      default: null
+    },
+    popupConfig: Object
+  },
+  inject: {
+    $xeModal: {
+      default: null
+    },
+    $xeDrawer: {
+      default: null
+    },
+    $xeTable: {
+      default: null
+    },
+    $xeForm: {
+      default: null
+    },
+    formItemInfo: {
+      from: 'xeFormItemInfo',
+      default: null
+    }
+  },
+  provide: function provide() {
+    var $xeColorPicker = this;
+    return {
+      $xeColorPicker: $xeColorPicker
+    };
+  },
+  data: function data() {
+    var xID = _xeUtils.default.uniqueId();
+    var reactData = {
+      initialized: false,
+      selectTyle: 'hex',
+      selectColor: '',
+      showTypePopup: false,
+      panelColor: '',
+      hexValue: '',
+      rValue: 0,
+      gValue: 0,
+      bValue: 0,
+      aValue: 0,
+      panelIndex: 0,
+      panelStyle: {},
+      panelPlacement: null,
+      visiblePanel: false,
+      isAniVisible: false,
+      isActivated: false
+    };
+    var internalData = {
+      hpTimeout: undefined
+    };
+    return {
+      xID: xID,
+      reactData: reactData,
+      internalData: internalData
+    };
+  },
+  computed: Object.assign(Object.assign({}, {}), {
+    computeFormReadonly: function computeFormReadonly() {
+      var $xeColorPicker = this;
+      var props = $xeColorPicker;
+      var $xeForm = $xeColorPicker.$xeForm;
+      var readonly = props.readonly;
+      if (readonly === null) {
+        if ($xeForm) {
+          return $xeForm.readonly;
+        }
+        return false;
+      }
+      return readonly;
+    },
+    computeIsDisabled: function computeIsDisabled() {
+      var $xeColorPicker = this;
+      var props = $xeColorPicker;
+      var $xeForm = $xeColorPicker.$xeForm;
+      var disabled = props.disabled;
+      if (disabled === null) {
+        if ($xeForm) {
+          return $xeForm.disabled;
+        }
+        return false;
+      }
+      return disabled;
+    },
+    computeBtnTransfer: function computeBtnTransfer() {
+      var $xeColorPicker = this;
+      var props = $xeColorPicker;
+      var $xeTable = $xeColorPicker.$xeTable;
+      var $xeModal = $xeColorPicker.$xeModal;
+      var $xeDrawer = $xeColorPicker.$xeDrawer;
+      var $xeForm = $xeColorPicker.$xeForm;
+      var transfer = props.transfer;
+      if (transfer === null) {
+        var globalTransfer = (0, _ui.getConfig)().colorPicker.transfer;
+        if (_xeUtils.default.isBoolean(globalTransfer)) {
+          return globalTransfer;
+        }
+        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+          return true;
+        }
+      }
+      return transfer;
+    },
+    computeColorList: function computeColorList() {
+      var $xeColorPicker = this;
+      var props = $xeColorPicker;
+      var colors = props.colors;
+      if (colors) {
+        return colors.map(function (item) {
+          if (_xeUtils.default.isString(item)) {
+            return {
+              label: item,
+              value: item
+            };
+          }
+          return {
+            label: _xeUtils.default.eqNull(item.label) ? item.value : item.label,
+            value: item.value
+          };
+        });
+      }
+      return [];
+    },
+    computePopupOpts: function computePopupOpts() {
+      var $xeColorPicker = this;
+      var props = $xeColorPicker;
+      return Object.assign({}, (0, _ui.getConfig)().colorPicker.popupConfig, props.popupConfig);
+    },
+    computeIsRgb: function computeIsRgb() {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      var selectTyle = reactData.selectTyle;
+      return selectTyle === 'rgb';
+    },
+    computeSelectTypeItem: function computeSelectTypeItem() {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      var selectTyle = reactData.selectTyle;
+      return typeList.find(function (item) {
+        return item.value === selectTyle;
+      });
+    }
+  }),
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xeColorPicker = this;
+      $xeColorPicker.$emit(type, (0, _ui.createEvent)(evnt, {
+        $colorPicker: $xeColorPicker
+      }, params));
+    },
+    emitModel: function emitModel(value) {
+      var $xeColorPicker = this;
+      var _events = $xeColorPicker._events;
+      if (_events && _events.modelValue) {
+        $xeColorPicker.$emit('modelValue', value);
+      } else {
+        $xeColorPicker.$emit('model-value', value);
+      }
+    },
+    updateMode: function updateMode() {
+      var $xeColorPicker = this;
+      var props = $xeColorPicker;
+      var reactData = $xeColorPicker.reactData;
+      var value = props.value;
+      reactData.selectColor = _xeUtils.default.toValueString(value);
+      $xeColorPicker.updateModelColor();
+    },
+    updateType: function updateType() {
+      var $xeColorPicker = this;
+      var props = $xeColorPicker;
+      var reactData = $xeColorPicker.reactData;
+      var type = props.type;
+      var selectTyle = 'hex';
+      if (type === 'rgb' || type === 'rgba') {
+        selectTyle = 'rgb';
+      }
+      reactData.selectTyle = selectTyle;
+      $xeColorPicker.updateMode();
+    },
+    updateModelColor: function updateModelColor() {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      var selectColor = reactData.selectColor,
+        isAniVisible = reactData.isAniVisible;
+      var isRgb = $xeColorPicker.computeIsRgb;
+      var hueSliderEl = $xeColorPicker.$refs.refHueSliderElem;
+      var alphaSliderEl = $xeColorPicker.$refs.refAlphaSliderElem;
+      var colorRest = (0, _util.parseColor)(selectColor);
+      reactData.hexValue = colorRest.hex;
+      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') {
+            var rgbRest = (0, _util.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 = (0, _util.rgbToHex)(colorRest);
+          }
+        }
+      }
+      if (isAniVisible) {
+        var hsvRest = colorRest.type === 'hex' ? (0, _util.hexToHsv)(colorRest.hex) : (0, _util.rgbToHsv)(colorRest);
+        var colorPanelEl = $xeColorPicker.$refs.refColorPanelElem;
+        if (hsvRest) {
+          if (colorPanelEl) {
+            var offsetTop = colorPanelEl.clientHeight * (1 - hsvRest.v);
+            var offsetLeft = colorPanelEl.clientWidth * hsvRest.s;
+            $xeColorPicker.handlePanelColor(offsetLeft, offsetTop);
+          }
+          if (hueSliderEl) {
+            $xeColorPicker.handleHueColor(_xeUtils.default.ceil((1 - hsvRest.h / 360) * hueSliderEl.clientWidth));
+          }
+        }
+        if (alphaSliderEl) {
+          $xeColorPicker.handleAlphaColor(alphaSliderEl.clientWidth * colorRest.a);
+        }
+      }
+    },
+    updateZindex: function updateZindex() {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      if (reactData.panelIndex < (0, _utils.getLastZIndex)()) {
+        reactData.panelIndex = (0, _utils.nextZIndex)();
+      }
+    },
+    updatePlacement: function updatePlacement() {
+      var $xeColorPicker = this;
+      var props = $xeColorPicker;
+      var reactData = $xeColorPicker.reactData;
+      var placement = props.placement;
+      var panelIndex = reactData.panelIndex;
+      var targetElem = $xeColorPicker.$refs.refElem;
+      var panelElem = $xeColorPicker.$refs.refOptionPanel;
+      var btnTransfer = $xeColorPicker.computeBtnTransfer;
+      var popupOpts = $xeColorPicker.computePopupOpts;
+      var handleStyle = function handleStyle() {
+        var ppObj = (0, _dom.updatePanelPlacement)(targetElem, panelElem, {
+          placement: popupOpts.placement || placement,
+          defaultPlacement: popupOpts.defaultPlacement,
+          teleportTo: btnTransfer
+        });
+        var panelStyle = Object.assign(ppObj.style, {
+          zIndex: panelIndex
+        });
+        reactData.panelStyle = panelStyle;
+        reactData.panelPlacement = ppObj.placement;
+      };
+      handleStyle();
+      return $xeColorPicker.$nextTick().then(handleStyle);
+    },
+    showOptionPanel: function showOptionPanel() {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      var internalData = $xeColorPicker.internalData;
+      var hpTimeout = internalData.hpTimeout;
+      var isDisabled = $xeColorPicker.computeIsDisabled;
+      if (!isDisabled) {
+        if (hpTimeout) {
+          clearTimeout(hpTimeout);
+          internalData.hpTimeout = undefined;
+        }
+        var btnTransfer = $xeColorPicker.computeBtnTransfer;
+        var panelElem = $xeColorPicker.$refs.refOptionPanel;
+        if (!reactData.initialized) {
+          reactData.initialized = true;
+          if (btnTransfer) {
+            if (panelElem) {
+              document.body.appendChild(panelElem);
+            }
+          }
+        }
+        reactData.isActivated = true;
+        reactData.isAniVisible = true;
+        setTimeout(function () {
+          $xeColorPicker.updateModelColor();
+          reactData.visiblePanel = true;
+        }, 10);
+        $xeColorPicker.updateZindex();
+        $xeColorPicker.updatePlacement();
+      }
+    },
+    hideOptionPanel: function hideOptionPanel() {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      var internalData = $xeColorPicker.internalData;
+      reactData.visiblePanel = false;
+      internalData.hpTimeout = setTimeout(function () {
+        reactData.isAniVisible = false;
+      }, 350);
+    },
+    changeEvent: function changeEvent(evnt, value) {
+      var $xeColorPicker = this;
+      var props = $xeColorPicker;
+      var reactData = $xeColorPicker.reactData;
+      var $xeForm = $xeColorPicker.$xeForm;
+      var formItemInfo = $xeColorPicker.formItemInfo;
+      reactData.selectColor = value;
+      if (value !== props.value) {
+        $xeColorPicker.emitModel(value);
+        $xeColorPicker.dispatchEvent('change', {
+          value: value
+        }, evnt);
+        // 自动更新校验状态
+        if ($xeForm && formItemInfo) {
+          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+        }
+      }
+    },
+    clearValueEvent: function clearValueEvent(evnt, selectValue) {
+      var $xeColorPicker = this;
+      $xeColorPicker.changeEvent(evnt, selectValue);
+      $xeColorPicker.dispatchEvent('clear', {
+        value: selectValue
+      }, evnt);
+    },
+    focusEvent: function focusEvent() {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      var isDisabled = $xeColorPicker.computeIsDisabled;
+      if (!isDisabled) {
+        if (!reactData.visiblePanel) {
+          $xeColorPicker.showOptionPanel();
+        }
+      }
+    },
+    blurEvent: function blurEvent() {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      reactData.isActivated = false;
+    },
+    clearEvent: function clearEvent(evnt) {
+      var $xeColorPicker = this;
+      $xeColorPicker.clearValueEvent(evnt, null);
+      $xeColorPicker.hideOptionPanel();
+    },
+    confirmEvent: function confirmEvent(evnt) {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      var selectTyle = reactData.selectTyle,
+        selectColor = reactData.selectColor,
+        hexValue = reactData.hexValue;
+      var value = selectTyle === 'hex' ? hexValue : selectColor;
+      $xeColorPicker.changeEvent(evnt, value);
+      $xeColorPicker.hideOptionPanel();
+    },
+    togglePanelEvent: function togglePanelEvent(evnt) {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      evnt.preventDefault();
+      if (reactData.visiblePanel) {
+        $xeColorPicker.hideOptionPanel();
+      } else {
+        $xeColorPicker.showOptionPanel();
+      }
+    },
+    clickEvent: function clickEvent(evnt) {
+      var $xeColorPicker = this;
+      $xeColorPicker.togglePanelEvent(evnt);
+      $xeColorPicker.dispatchEvent('click', {}, evnt);
+    },
+    handlePanelClickEvent: function handlePanelClickEvent() {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      reactData.showTypePopup = false;
+    },
+    toggleTypeVisibleEvent: function toggleTypeVisibleEvent(evnt) {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      evnt.stopPropagation();
+      reactData.showTypePopup = !reactData.showTypePopup;
+    },
+    handleChangeType: function handleChangeType(type) {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      var selectTyle = reactData.selectTyle;
+      if (type !== selectTyle) {
+        reactData.selectTyle = type;
+        $xeColorPicker.updateModelColor();
+      }
+      reactData.showTypePopup = false;
+    },
+    handleHueColor: function handleHueColor(offsetLeft) {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      var hueSliderEl = $xeColorPicker.$refs.refHueSliderElem;
+      var hueSliderBtnEl = $xeColorPicker.$refs.refHueSliderBtnElem;
+      if (hueSliderEl && hueSliderBtnEl) {
+        if (offsetLeft < 0) {
+          offsetLeft = 0;
+        }
+        var barWidth = _xeUtils.default.toInteger(hueSliderEl.clientWidth);
+        var itemNum = 255;
+        var countNum = itemNum * 6;
+        var offsetX = _xeUtils.default.ceil(countNum / barWidth * offsetLeft);
+        var offsetNum = offsetX % itemNum;
+        var rNum = 0;
+        var gNum = 0;
+        var 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 = (0, _util.toRgb)(rNum, gNum, bNum);
+        hueSliderBtnEl.style.left = (0, _dom.toCssUnit)(offsetLeft);
+      }
+    },
+    handleHueBarEvent: function handleHueBarEvent(evnt) {
+      var $xeColorPicker = this;
+      var hueSliderEl = $xeColorPicker.$refs.refHueSliderElem;
+      var hueSliderBtnEl = $xeColorPicker.$refs.refHueSliderBtnElem;
+      if (hueSliderEl && hueSliderBtnEl) {
+        var hueSliderRect = hueSliderEl.getBoundingClientRect();
+        var barWidth = _xeUtils.default.toInteger(hueSliderEl.clientWidth);
+        var offsetLeft = _xeUtils.default.ceil(Math.min(barWidth - 1, Math.max(1, evnt.clientX - hueSliderRect.x)));
+        $xeColorPicker.handleHueColor(offsetLeft);
+      }
+    },
+    handleHueSliderMousedownEvent: function handleHueSliderMousedownEvent(evnt) {
+      var $xeColorPicker = this;
+      evnt.preventDefault();
+      document.onmousemove = function (evnt) {
+        evnt.preventDefault();
+        $xeColorPicker.handleHueBarEvent(evnt);
+      };
+      document.onmouseup = function (evnt) {
+        document.onmousemove = null;
+        document.onmouseup = null;
+        $xeColorPicker.handleHueBarEvent(evnt);
+      };
+    },
+    handleAlphaColor: function handleAlphaColor(offsetLeft) {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      var selectColor = reactData.selectColor;
+      var alphaSliderEl = $xeColorPicker.$refs.refAlphaSliderElem;
+      var alphaSliderBtnEl = $xeColorPicker.$refs.refAlphaSliderBtnElem;
+      if (alphaSliderEl && alphaSliderBtnEl) {
+        var alphaSliderRect = alphaSliderEl.getBoundingClientRect();
+        var barWidth = alphaSliderRect.width;
+        if (offsetLeft < 0) {
+          offsetLeft = 0;
+        }
+        if (offsetLeft > barWidth) {
+          offsetLeft = barWidth;
+        }
+        var alpha = _xeUtils.default.ceil(100 / barWidth * offsetLeft / 100, 2);
+        reactData.aValue = alpha;
+        alphaSliderBtnEl.style.left = (0, _dom.toCssUnit)(offsetLeft);
+        reactData.selectColor = (0, _util.updateColorAlpha)(selectColor, alpha);
+      }
+    },
+    handleAlphaBarEvent: function handleAlphaBarEvent(evnt) {
+      var $xeColorPicker = this;
+      var alphaSliderEl = $xeColorPicker.$refs.refAlphaSliderElem;
+      var alphaSliderBtnEl = $xeColorPicker.$refs.refAlphaSliderBtnElem;
+      if (alphaSliderEl && alphaSliderBtnEl) {
+        var alphaSliderRect = alphaSliderEl.getBoundingClientRect();
+        var barWidth = alphaSliderRect.width;
+        var offsetLeft = Math.min(barWidth, Math.max(0, evnt.clientX - alphaSliderRect.x));
+        $xeColorPicker.handleAlphaColor(offsetLeft);
+        $xeColorPicker.updateModelColor();
+      }
+    },
+    handleAlphaSliderMousedownEvent: function handleAlphaSliderMousedownEvent(evnt) {
+      var $xeColorPicker = this;
+      evnt.preventDefault();
+      document.onmousemove = function (evnt) {
+        evnt.preventDefault();
+        $xeColorPicker.handleAlphaBarEvent(evnt);
+      };
+      document.onmouseup = function (evnt) {
+        document.onmousemove = null;
+        document.onmouseup = null;
+        $xeColorPicker.handleAlphaBarEvent(evnt);
+      };
+    },
+    handleInputRgbEvent: function handleInputRgbEvent() {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      var rValue = reactData.rValue,
+        gValue = reactData.gValue,
+        bValue = reactData.bValue,
+        aValue = reactData.aValue;
+      reactData.selectColor = (0, _util.toRgb)(rValue, gValue, bValue, aValue);
+      $xeColorPicker.updateModelColor();
+    },
+    handleInputAlphaEvent: function handleInputAlphaEvent() {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      var aValue = reactData.aValue;
+      var alphaSliderEl = $xeColorPicker.$refs.refAlphaSliderElem;
+      var alphaSliderBtnEl = $xeColorPicker.$refs.refAlphaSliderBtnElem;
+      if (alphaSliderEl && alphaSliderBtnEl) {
+        var alphaSliderRect = alphaSliderEl.getBoundingClientRect();
+        var barWidth = alphaSliderRect.width;
+        var offsetLeft = barWidth * aValue;
+        $xeColorPicker.handleAlphaColor(offsetLeft);
+      }
+    },
+    handleQuickEvent: function handleQuickEvent(evnt, item) {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      var value = item.value;
+      reactData.selectColor = value;
+      $xeColorPicker.updateModelColor();
+    },
+    handlePanelColor: function handlePanelColor(offsetLeft, offsetTop) {
+      var $xeColorPicker = this;
+      var colorActiveEl = $xeColorPicker.$refs.refColorActiveElem;
+      if (colorActiveEl) {
+        colorActiveEl.style.top = (0, _dom.toCssUnit)(offsetTop);
+        colorActiveEl.style.left = (0, _dom.toCssUnit)(offsetLeft);
+      }
+    },
+    handleEyeDropperEvent: function handleEyeDropperEvent() {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      if (WinEyeDropper) {
+        try {
+          var eyeDropper = new WinEyeDropper();
+          eyeDropper.open().then(function (rest) {
+            if (rest && rest.sRGBHex) {
+              reactData.selectColor = rest.sRGBHex;
+              $xeColorPicker.updateModelColor();
+            }
+          }).catch(function () {});
+        } catch (e) {}
+      }
+    },
+    handleSelectColorByXY: function handleSelectColorByXY(clientX, clientY) {
+      var $xeColorPicker = this;
+      var props = $xeColorPicker;
+      var reactData = $xeColorPicker.reactData;
+      var showAlpha = props.showAlpha;
+      var panelColor = reactData.panelColor,
+        aValue = reactData.aValue;
+      var colorPanelEl = $xeColorPicker.$refs.refColorPanelElem;
+      var colorActiveEl = $xeColorPicker.$refs.refColorActiveElem;
+      if (colorPanelEl && colorActiveEl) {
+        var clientWidth = colorPanelEl.clientWidth,
+          clientHeight = colorPanelEl.clientHeight;
+        var colorPanelRect = colorPanelEl.getBoundingClientRect();
+        var offsetTop = Math.min(clientHeight, Math.max(0, clientY - colorPanelRect.y));
+        var offsetLeft = Math.min(clientWidth, Math.max(0, clientX - colorPanelRect.x));
+        var colorRest = (0, _util.parseColor)(panelColor);
+        if (colorRest) {
+          var hsvRest = colorRest.type === 'hex' ? (0, _util.hexToHsv)(colorRest.hex) : (0, _util.rgbToHsv)(colorRest);
+          if (hsvRest) {
+            var ragRest = (0, _util.hsvToRgb)(hsvRest.h, offsetLeft / clientWidth, 1 - offsetTop / clientHeight);
+            reactData.selectColor = (0, _util.toRgb)(ragRest.r, ragRest.g, ragRest.b, showAlpha ? aValue : null);
+            $xeColorPicker.handlePanelColor(offsetLeft, offsetTop);
+          }
+        }
+        $xeColorPicker.updateModelColor();
+      }
+    },
+    handleSelectColorMousedownEvent: function handleSelectColorMousedownEvent(evnt) {
+      var $xeColorPicker = this;
+      evnt.stopPropagation();
+      evnt.preventDefault();
+      $xeColorPicker.handleSelectColorByXY(evnt.clientX, evnt.clientY);
+      document.onmousemove = function (evnt) {
+        $xeColorPicker.handleSelectColorByXY(evnt.clientX, evnt.clientY);
+      };
+      document.onmouseup = function () {
+        document.onmousemove = null;
+        document.onmouseup = null;
+      };
+    },
+    handleCopyColorEvent: function handleCopyColorEvent() {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      var selectColor = reactData.selectColor;
+      if (selectColor) {
+        if (_ui.VxeUI.clipboard.copy(selectColor)) {
+          if (_ui.VxeUI.modal) {
+            _ui.VxeUI.modal.message({
+              content: (0, _ui.getI18n)('vxe.colorPicker.copySuccess', [selectColor]),
+              status: 'success'
+            });
+          }
+        }
+      }
+    },
+    handleGlobalMousewheelEvent: function handleGlobalMousewheelEvent(evnt) {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      var isDisabled = $xeColorPicker.computeIsDisabled;
+      if (!isDisabled) {
+        if (visiblePanel) {
+          var panelElem = $xeColorPicker.$refs.refOptionPanel;
+          if ((0, _dom.getEventTargetNode)(evnt, panelElem).flag) {
+            $xeColorPicker.updatePlacement();
+          } else {
+            $xeColorPicker.hideOptionPanel();
+          }
+        }
+      }
+    },
+    handleGlobalMousedownEvent: function handleGlobalMousedownEvent(evnt) {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      var isDisabled = $xeColorPicker.computeIsDisabled;
+      if (!isDisabled) {
+        var el = $xeColorPicker.$refs.refElem;
+        var panelElem = $xeColorPicker.$refs.refOptionPanel;
+        reactData.isActivated = (0, _dom.getEventTargetNode)(evnt, el).flag || (0, _dom.getEventTargetNode)(evnt, panelElem).flag;
+        if (visiblePanel && !reactData.isActivated) {
+          $xeColorPicker.hideOptionPanel();
+        }
+      }
+    },
+    handleGlobalBlurEvent: function handleGlobalBlurEvent() {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      var visiblePanel = reactData.visiblePanel,
+        isActivated = reactData.isActivated;
+      if (visiblePanel) {
+        $xeColorPicker.hideOptionPanel();
+      }
+      if (isActivated) {
+        reactData.isActivated = false;
+      }
+      if (visiblePanel || isActivated) {
+        var targetElem = $xeColorPicker.$refs.refInputTarget;
+        if (targetElem) {
+          targetElem.blur();
+        }
+      }
+    },
+    handleGlobalResizeEvent: function handleGlobalResizeEvent() {
+      var $xeColorPicker = this;
+      var reactData = $xeColorPicker.reactData;
+      var visiblePanel = reactData.visiblePanel;
+      if (visiblePanel) {
+        $xeColorPicker.updatePlacement();
+      }
+    },
+    //
+    // Render
+    //
+    renderColorWrapper: function renderColorWrapper(h) {
+      var $xeColorPicker = this;
+      var props = $xeColorPicker;
+      var reactData = $xeColorPicker.reactData;
+      var showColorExtractor = props.showColorExtractor;
+      var panelColor = reactData.panelColor;
+      if (showColorExtractor) {
+        return h('div', {
+          ref: 'refColorPanelElem',
+          class: 'vxe-color-picker--color-wrapper',
+          on: {
+            mousedown: $xeColorPicker.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'
+        })]);
+      }
+      return (0, _ui.renderEmptyElement)($xeColorPicker);
+    },
+    renderColorBar: function renderColorBar(h) {
+      var $xeColorPicker = this;
+      var props = $xeColorPicker;
+      var reactData = $xeColorPicker.reactData;
+      var showAlpha = props.showAlpha,
+        clickToCopy = props.clickToCopy,
+        showEyeDropper = props.showEyeDropper;
+      var selectTyle = reactData.selectTyle,
+        showTypePopup = reactData.showTypePopup,
+        hexValue = reactData.hexValue,
+        rValue = reactData.rValue,
+        gValue = reactData.gValue,
+        bValue = reactData.bValue,
+        aValue = reactData.aValue,
+        selectColor = reactData.selectColor,
+        panelColor = reactData.panelColor;
+      var isRgb = $xeColorPicker.computeIsRgb;
+      var selectTypeItem = $xeColorPicker.computeSelectTypeItem;
+      return h('div', {
+        class: 'vxe-color-picker--bar-wrapper'
+      }, [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',
+        on: {
+          click: $xeColorPicker.handleEyeDropperEvent
+        }
+      }, [h('i', {
+        class: (0, _ui.getIcon)().COLOR_PICKER_EYE_DROPPER
+      })])]) : (0, _ui.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',
+        on: {
+          click: $xeColorPicker.handleCopyColorEvent
+        }
+      }, [h('i', {
+        class: (0, _ui.getIcon)().COLOR_PICKER_COLOR_COPY
+      })])] : [])])]), h('div', {
+        class: 'vxe-color-picker--slider-handle'
+      }, [h('div', {
+        ref: 'refHueSliderElem',
+        class: 'vxe-color-picker--bar-hue-slider',
+        on: {
+          click: $xeColorPicker.handleHueBarEvent
+        }
+      }, [h('div', {
+        ref: 'refHueSliderBtnElem',
+        class: 'vxe-color-picker--bar-hue-btn',
+        on: {
+          mousedown: $xeColorPicker.handleHueSliderMousedownEvent
+        }
+      })]), showAlpha ? h('div', {
+        ref: 'refAlphaSliderElem',
+        class: 'vxe-color-picker--bar-alpha-slider',
+        on: {
+          click: $xeColorPicker.handleAlphaBarEvent
+        }
+      }, [h('div', {
+        class: 'vxe-color-picker--bar-alpha-bg',
+        style: {
+          background: "linear-gradient(to right, rgba(0, 0, 0, 0), ".concat(panelColor, ")")
+        }
+      }), h('div', {
+        ref: 'refAlphaSliderBtnElem',
+        class: 'vxe-color-picker--bar-alpha-btn',
+        on: {
+          mousedown: $xeColorPicker.handleAlphaSliderMousedownEvent
+        }
+      })]) : (0, _ui.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',
+        on: {
+          click: $xeColorPicker.toggleTypeVisibleEvent
+        }
+      }, [h('span', "".concat(selectTypeItem ? selectTypeItem.label : selectTyle)), h('span', {
+        class: 'vxe-color-picker--type-icon'
+      }, [h('i', {
+        class: showTypePopup ? (0, _ui.getIcon)().COLOR_PICKER_TPTY_OPEN : (0, _ui.getIcon)().COLOR_PICKER_TPTY_CLOSE
+      })])]), h('div', {
+        class: ['vxe-color-picker--type-popup', {
+          'is--visible': showTypePopup
+        }]
+      }, typeList.map(function (item) {
+        return h('div', {
+          class: 'vxe-color-picker--type-item',
+          on: {
+            click: function click(evnt) {
+              evnt.stopPropagation();
+              $xeColorPicker.handleChangeType(item.value);
+            }
+          }
+        }, item.label);
+      }))]), h('div', {
+        class: "vxe-color-picker--".concat(selectTyle, "-wrapper")
+      }, isRgb ? [h('div', {
+        class: 'vxe-color-picker--input-wrapper'
+      }, [h(_numberInput.default, {
+        props: {
+          type: 'integer',
+          size: 'mini',
+          align: 'center',
+          min: 0,
+          max: 255,
+          maxLength: 3,
+          placeholder: '',
+          value: rValue,
+          controlConfig: {
+            showButton: false
+          }
+        },
+        on: {
+          'modelValue': function modelValue(val) {
+            reactData.rValue = val;
+          },
+          change: $xeColorPicker.handleInputRgbEvent
+        }
+      }), h(_numberInput.default, {
+        props: {
+          type: 'integer',
+          size: 'mini',
+          align: 'center',
+          min: 0,
+          max: 255,
+          maxLength: 3,
+          placeholder: '',
+          value: gValue,
+          controlConfig: {
+            showButton: false
+          }
+        },
+        on: {
+          'modelValue': function modelValue(val) {
+            reactData.gValue = val;
+          },
+          change: $xeColorPicker.handleInputRgbEvent
+        }
+      }), h(_numberInput.default, {
+        props: {
+          type: 'integer',
+          size: 'mini',
+          align: 'center',
+          min: 0,
+          max: 255,
+          maxLength: 3,
+          placeholder: '',
+          value: bValue,
+          controlConfig: {
+            showButton: false
+          }
+        },
+        on: {
+          'modelValue': function modelValue(val) {
+            reactData.bValue = val;
+          },
+          change: $xeColorPicker.handleInputRgbEvent
+        }
+      }), h(_numberInput.default, {
+        props: {
+          type: 'number',
+          size: 'mini',
+          align: 'center',
+          min: 0,
+          max: 1,
+          step: 0.01,
+          maxLength: 4,
+          placeholder: '',
+          value: aValue,
+          controlConfig: {
+            showButton: false
+          }
+        },
+        on: {
+          'modelValue': function modelValue(val) {
+            reactData.aValue = val;
+          },
+          change: $xeColorPicker.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(_input.default, {
+        props: {
+          type: 'text',
+          size: 'mini',
+          align: 'center',
+          maxLength: 9,
+          placeholder: '',
+          value: hexValue
+        },
+        on: {
+          'modelValue': function modelValue(val) {
+            reactData.hexValue = val;
+          },
+          change: function change() {
+            var colorRest = (0, _util.parseColor)(reactData.hexValue);
+            if (colorRest) {
+              if (colorRest.value) {
+                reactData.selectColor = colorRest.value;
+                $xeColorPicker.updateModelColor();
+              }
+            }
+          }
+        }
+      })]), h('div', {
+        class: 'vxe-color-picker--input-title'
+      }, (0, _ui.getI18n)('vxe.colorPicker.hex'))])])]);
+    },
+    renderQuickWrapper: function renderQuickWrapper(h) {
+      var $xeColorPicker = this;
+      var props = $xeColorPicker;
+      var showQuick = props.showQuick;
+      var colorList = $xeColorPicker.computeColorList;
+      if (showQuick && colorList.length) {
+        return h('div', {
+          class: 'vxe-color-picker--quick-wrapper'
+        }, colorList.map(function (item, i) {
+          return h('div', {
+            key: i,
+            class: 'vxe-color-picker--quick-item',
+            attrs: {
+              title: item.label || ''
+            },
+            style: {
+              backgroundColor: item.value
+            },
+            on: {
+              click: function click(evnt) {
+                $xeColorPicker.handleQuickEvent(evnt, item);
+              }
+            }
+          });
+        }));
+      }
+      return (0, _ui.renderEmptyElement)($xeColorPicker);
+    },
+    renderVN: function renderVN(h) {
+      var $xeColorPicker = this;
+      var props = $xeColorPicker;
+      var reactData = $xeColorPicker.reactData;
+      var className = props.className,
+        popupClassName = props.popupClassName,
+        clearable = props.clearable,
+        value = props.value;
+      var initialized = reactData.initialized,
+        isActivated = reactData.isActivated,
+        isAniVisible = reactData.isAniVisible,
+        visiblePanel = reactData.visiblePanel;
+      var vSize = $xeColorPicker.computeSize;
+      var isDisabled = $xeColorPicker.computeIsDisabled;
+      var btnTransfer = $xeColorPicker.computeBtnTransfer;
+      var formReadonly = $xeColorPicker.computeFormReadonly;
+      if (formReadonly) {
+        return h('div', {
+          ref: 'refElem',
+          class: ['vxe-color-picker--readonly', className]
+        }, [h('div', {
+          class: 'vxe-color-picker--readonly-color',
+          style: {
+            backgroundColor: value
+          }
+        })]);
+      }
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-color-picker', className ? _xeUtils.default.isFunction(className) ? className({
+          $colorPicker: $xeColorPicker
+        }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--selected', !!value), 'is--visible', visiblePanel), 'is--disabled', isDisabled), 'is--active', isActivated)]
+      }, [h('input', {
+        ref: 'refInputTarget',
+        class: 'vxe-color-picker--input',
+        on: {
+          focus: $xeColorPicker.focusEvent,
+          blur: $xeColorPicker.blurEvent
+        }
+      }), h('div', {
+        class: 'vxe-color-picker--inner',
+        on: {
+          click: $xeColorPicker.clickEvent
+        }
+      }, [h('div', {
+        class: 'vxe-color-picker--inner-color',
+        style: {
+          backgroundColor: value
+        }
+      })]), h('div', {
+        ref: 'refOptionPanel',
+        class: ['vxe-table--ignore-clear vxe-color-picker--panel', popupClassName ? _xeUtils.default.isFunction(popupClassName) ? popupClassName({
+          $colorPicker: $xeColorPicker
+        }) : popupClassName : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--transfer', btnTransfer), 'ani--leave', isAniVisible), 'ani--enter', visiblePanel)],
+        attrs: {
+          placement: reactData.panelPlacement
+        },
+        style: reactData.panelStyle
+      }, [initialized && (visiblePanel || isAniVisible) ? h('div', {
+        class: 'vxe-color-picker--panel-wrapper',
+        on: {
+          click: $xeColorPicker.handlePanelClickEvent
+        }
+      }, [$xeColorPicker.renderColorWrapper(h), $xeColorPicker.renderColorBar(h), $xeColorPicker.renderQuickWrapper(h), h('div', {
+        class: 'vxe-color-picker--footer-wrapper'
+      }, [clearable ? h(_button.default, {
+        props: {
+          content: (0, _ui.getI18n)('vxe.colorPicker.clear'),
+          size: 'mini'
+        },
+        on: {
+          click: $xeColorPicker.clearEvent
+        }
+      }) : (0, _ui.renderEmptyElement)($xeColorPicker), h(_button.default, {
+        props: {
+          content: (0, _ui.getI18n)('vxe.colorPicker.confirm'),
+          size: 'mini',
+          status: 'primary'
+        },
+        on: {
+          click: $xeColorPicker.confirmEvent
+        }
+      })])]) : (0, _ui.renderEmptyElement)($xeColorPicker)])]);
+    }
+  },
+  watch: {
+    value: function value() {
+      var $xeColorPicker = this;
+      $xeColorPicker.updateMode();
+    },
+    type: function type() {
+      var $xeColorPicker = this;
+      $xeColorPicker.updateType();
+    }
+  },
+  created: function created() {
+    var $xeColorPicker = this;
+    var props = $xeColorPicker;
+    var reactData = $xeColorPicker.reactData;
+    reactData.selectColor = "".concat(props.value || '');
+    $xeColorPicker.updateType();
+    _ui.globalEvents.on($xeColorPicker, 'mousewheel', $xeColorPicker.handleGlobalMousewheelEvent);
+    _ui.globalEvents.on($xeColorPicker, 'mousedown', $xeColorPicker.handleGlobalMousedownEvent);
+    _ui.globalEvents.on($xeColorPicker, 'blur', $xeColorPicker.handleGlobalBlurEvent);
+    _ui.globalEvents.on($xeColorPicker, 'resize', $xeColorPicker.handleGlobalResizeEvent);
+  },
+  beforeDestroy: function beforeDestroy() {
+    var $xeColorPicker = this;
+    var panelElem = $xeColorPicker.$refs.refOptionPanel;
+    if (panelElem && panelElem.parentNode) {
+      panelElem.parentNode.removeChild(panelElem);
+    }
+    _ui.globalEvents.off($xeColorPicker, 'mousewheel');
+    _ui.globalEvents.off($xeColorPicker, 'mousedown');
+    _ui.globalEvents.off($xeColorPicker, 'blur');
+    _ui.globalEvents.off($xeColorPicker, 'resize');
+  },
+  render: function render(h) {
+    return this.renderVN(h);
+  }
+});
+/* define-vxe-component end */