vxe-pc-ui 3.3.43 → 3.3.44

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

@@ -7,15 +7,96 @@ 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/src/button"));
+var _input = _interopRequireDefault(require("../../input/src/input"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = (0, _comp.defineVxeComponent)({
+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 _default2 = exports.default = (0, _comp.defineVxeComponent)({
   name: 'VxeColorPicker',
-  props: {},
+  mixins: [_ui.globalMixins.sizeMixin],
+  model: {
+    prop: 'value',
+    event: 'modelValue'
+  },
+  props: {
+    value: String,
+    placeholder: String,
+    clearable: Boolean,
+    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;
+      }
+    },
+    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
+    }
+  },
   data: function data() {
     var xID = _xeUtils.default.uniqueId();
     var reactData = {
       initialized: false,
       selectColor: '',
+      panelColor: '',
+      hexValue: '',
+      rValue: 0,
+      gValue: 0,
+      bValue: 0,
+      aValue: 0,
       panelIndex: 0,
       panelStyle: {},
       panelPlacement: null,
@@ -23,11 +104,96 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       isAniVisible: false,
       isActivated: false
     };
+    var internalData = {
+      hpTimeout: undefined
+    };
     return {
       xID: xID,
-      reactData: reactData
+      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)().iconPicker.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 [];
+    },
+    computeValueType: function computeValueType() {
+      var $xeColorPicker = this;
+      var props = $xeColorPicker;
+      var type = props.type;
+      if (type === 'rgb' || type === 'rgba') {
+        return 'rgb';
+      }
+      return 'hex';
+    },
+    computeIsRgb: function computeIsRgb() {
+      var $xeColorPicker = this;
+      var valueType = $xeColorPicker.computeValueType;
+      return valueType === 'rgb';
+    }
+  }),
   methods: {
     //
     // Method
@@ -47,18 +213,795 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         $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();
+    },
+    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;
+      return $xeColorPicker.$nextTick().then(function () {
+        var placement = props.placement;
+        var panelIndex = reactData.panelIndex;
+        var el = $xeColorPicker.$refs.refElem;
+        var panelElem = $xeColorPicker.$refs.refOptionPanel;
+        var btnTransfer = $xeColorPicker.computeBtnTransfer;
+        if (panelElem && el) {
+          var targetHeight = el.offsetHeight;
+          var targetWidth = el.offsetWidth;
+          var panelHeight = panelElem.offsetHeight;
+          var panelWidth = panelElem.offsetWidth;
+          var marginSize = 5;
+          var panelStyle = {
+            zIndex: panelIndex
+          };
+          var _getAbsolutePos = (0, _dom.getAbsolutePos)(el),
+            boundingTop = _getAbsolutePos.boundingTop,
+            boundingLeft = _getAbsolutePos.boundingLeft,
+            visibleHeight = _getAbsolutePos.visibleHeight,
+            visibleWidth = _getAbsolutePos.visibleWidth;
+          var panelPlacement = 'bottom';
+          if (btnTransfer) {
+            var left = boundingLeft;
+            var top = boundingTop + targetHeight;
+            if (placement === 'top') {
+              panelPlacement = 'top';
+              top = boundingTop - panelHeight;
+            } else if (!placement) {
+              // 如果下面不够放，则向上
+              if (top + panelHeight + marginSize > visibleHeight) {
+                panelPlacement = 'top';
+                top = boundingTop - panelHeight;
+              }
+              // 如果上面不够放，则向下（优先）
+              if (top < marginSize) {
+                panelPlacement = 'bottom';
+                top = boundingTop + targetHeight;
+              }
+            }
+            // 如果溢出右边
+            if (left + panelWidth + marginSize > visibleWidth) {
+              left -= left + panelWidth + marginSize - visibleWidth;
+            }
+            // 如果溢出左边
+            if (left < marginSize) {
+              left = marginSize;
+            }
+            Object.assign(panelStyle, {
+              left: "".concat(left, "px"),
+              top: "".concat(top, "px"),
+              minWidth: "".concat(targetWidth, "px")
+            });
+          } else {
+            if (placement === 'top') {
+              panelPlacement = 'top';
+              panelStyle.bottom = "".concat(targetHeight, "px");
+            } else if (!placement) {
+              // 如果下面不够放，则向上
+              if (boundingTop + targetHeight + panelHeight > visibleHeight) {
+                // 如果上面不够放，则向下（优先）
+                if (boundingTop - targetHeight - panelHeight > marginSize) {
+                  panelPlacement = 'top';
+                  panelStyle.bottom = "".concat(targetHeight, "px");
+                }
+              }
+            }
+          }
+          reactData.panelStyle = panelStyle;
+          reactData.panelPlacement = panelPlacement;
+          return $xeColorPicker.$nextTick();
+        }
+      });
+    },
+    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 = window.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);
+    },
+    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 selectColor = reactData.selectColor;
+      $xeColorPicker.changeEvent(evnt, selectColor);
+      $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);
+    },
+    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);
+      }
+    },
+    handleSelectColorMousedownEvent: function handleSelectColorMousedownEvent(evnt) {
+      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 colorPanelRect = colorPanelEl.getBoundingClientRect();
+        var offsetTop = evnt.clientY - colorPanelRect.y;
+        var offsetLeft = evnt.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 / colorPanelEl.clientWidth, 1 - offsetTop / colorPanelEl.clientHeight);
+            reactData.selectColor = (0, _util.toRgb)(ragRest.r, ragRest.g, ragRest.b, showAlpha ? aValue : null);
+            $xeColorPicker.handlePanelColor(offsetLeft, offsetTop);
+            $xeColorPicker.updateModelColor();
+          }
+        }
+      }
+    },
+    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;
+      $xeColorPicker.hideOptionPanel();
+    },
     //
     // 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;
+      var hexValue = reactData.hexValue,
+        rValue = reactData.rValue,
+        gValue = reactData.gValue,
+        bValue = reactData.bValue,
+        aValue = reactData.aValue,
+        selectColor = reactData.selectColor,
+        panelColor = reactData.panelColor;
+      var valueType = $xeColorPicker.computeValueType;
+      var isRgb = $xeColorPicker.computeIsRgb;
+      return h('div', {
+        class: 'vxe-color-picker--bar-wrapper'
+      }, [h('div', {
+        class: 'vxe-color-picker--slider-wrapper'
+      }, [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_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--".concat(valueType, "-wrapper")
+      }, isRgb ? [h('div', {
+        class: 'vxe-color-picker--input-wrapper'
+      }, [h(_input.default, {
+        props: {
+          type: 'integer',
+          size: 'mini',
+          align: 'center',
+          min: 0,
+          max: 255,
+          maxLength: 3,
+          placeholder: '',
+          value: rValue
+        },
+        on: {
+          'modelValue': function modelValue(val) {
+            reactData.rValue = val;
+          },
+          change: $xeColorPicker.handleInputRgbEvent
+        }
+      }), h(_input.default, {
+        props: {
+          type: 'integer',
+          size: 'mini',
+          align: 'center',
+          min: 0,
+          max: 255,
+          maxLength: 3,
+          placeholder: '',
+          value: gValue
+        },
+        on: {
+          'modelValue': function modelValue(val) {
+            reactData.gValue = val;
+          },
+          change: $xeColorPicker.handleInputRgbEvent
+        }
+      }), h(_input.default, {
+        props: {
+          type: 'integer',
+          size: 'mini',
+          align: 'center',
+          min: 0,
+          max: 255,
+          maxLength: 3,
+          placeholder: '',
+          value: bValue
+        },
+        on: {
+          'modelValue': function modelValue(val) {
+            reactData.bValue = val;
+          },
+          change: $xeColorPicker.handleInputRgbEvent
+        }
+      }), h(_input.default, {
+        props: {
+          type: 'number',
+          size: 'mini',
+          align: 'center',
+          min: 0,
+          max: 1,
+          step: 0.01,
+          maxLength: 4,
+          placeholder: '',
+          value: aValue
+        },
+        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-title'
+      }, 'HEX'), 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();
+              }
+            }
+          }
+        }
+      })])])]);
+    },
+    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 slots = $xeColorPicker.$scopedSlots;
-      var defaultSlot = slots.default;
+      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]
+        }, 'x');
+      }
       return h('div', {
         ref: 'refElem',
-        class: 'vxe-color-picker'
-      }, defaultSlot ? defaultSlot({}) : []);
+        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('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'
+      }, [h('div', {
+        class: ''
+      }, [$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();
+    }
+  },
+  created: function created() {
+    var $xeColorPicker = this;
+    var props = $xeColorPicker;
+    var reactData = $xeColorPicker.reactData;
+    reactData.selectColor = props.value;
+    $xeColorPicker.updateMode();
+    _ui.globalEvents.on($xeColorPicker, 'mousewheel', $xeColorPicker.handleGlobalMousewheelEvent);
+    _ui.globalEvents.on($xeColorPicker, 'mousedown', $xeColorPicker.handleGlobalMousedownEvent);
+    _ui.globalEvents.on($xeColorPicker, 'blur', $xeColorPicker.handleGlobalBlurEvent);
+  },
+  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');
   },
   render: function render(h) {
     return this.renderVN(h);