vxe-pc-ui 3.15.28 → 3.16.0

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

@@ -1,1183 +0,0 @@
-"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 */