vxe-pc-ui 3.16.0 → 3.16.2

package/lib/context-menu/src/context-menu.js

@@ -0,0 +1,682 @@
+"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 _utils = require("../../ui/src/utils");
+var _dom = require("../../ui/src/dom");
+var _vn = require("../../ui/src/vn");
+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); }
+function createInternalData() {
+  return {
+    // leaveTime: null
+  };
+}
+function createReactData() {
+  return {
+    visible: false,
+    activeOption: null,
+    activeChildOption: null,
+    popupStyle: {
+      top: '',
+      left: '',
+      zIndex: 0
+    },
+    childOffsetX: 0
+  };
+}
+function hasChildMenu(item) {
+  var children = item.children;
+  return children && children.some(function (child) {
+    return child.visible !== false;
+  });
+}
+function hasValidItem(item) {
+  return !item.loading && !item.disabled && item.visible !== false;
+}
+function findNextFirstItem(allFirstList, firstItem) {
+  for (var i = 0; i < allFirstList.length; i++) {
+    var item = allFirstList[i];
+    if (firstItem === item) {
+      var nextItem = allFirstList[i + 1];
+      if (nextItem) {
+        return nextItem;
+      }
+    }
+  }
+  return _xeUtils.default.first(allFirstList);
+}
+function findPrevFirstItem(allFirstList, firstItem) {
+  for (var i = 0; i < allFirstList.length; i++) {
+    var item = allFirstList[i];
+    if (firstItem === item) {
+      if (i > 0) {
+        return allFirstList[i - 1];
+      }
+    }
+  }
+  return _xeUtils.default.last(allFirstList);
+}
+function findFirstChildItem(firstItem) {
+  var children = firstItem.children;
+  if (children) {
+    for (var i = 0; i < children.length; i++) {
+      var item = children[i];
+      if (hasValidItem(item)) {
+        return item;
+      }
+    }
+  }
+  return null;
+}
+function findPrevChildItem(firstItem, childItem) {
+  var children = firstItem.children;
+  var prevValidItem = null;
+  if (children) {
+    for (var i = 0; i < children.length; i++) {
+      var item = children[i];
+      if (childItem === item) {
+        break;
+      }
+      if (hasValidItem(item)) {
+        prevValidItem = item;
+      }
+    }
+    if (!prevValidItem) {
+      for (var len = children.length - 1; len >= 0; len--) {
+        var _item = children[len];
+        if (hasValidItem(_item)) {
+          return _item;
+        }
+      }
+    }
+  }
+  return prevValidItem;
+}
+function findNextChildItem(firstItem, childItem) {
+  var children = firstItem.children;
+  var firstValidItem = null;
+  if (children) {
+    var isMetch = false;
+    for (var i = 0; i < children.length; i++) {
+      var item = children[i];
+      if (!firstValidItem) {
+        if (hasValidItem(item)) {
+          firstValidItem = item;
+        }
+      }
+      if (isMetch) {
+        if (hasValidItem(item)) {
+          return item;
+        }
+      } else {
+        isMetch = childItem === item;
+      }
+    }
+  }
+  return firstValidItem;
+}
+function openMenu($xeContextMenu) {
+  var props = $xeContextMenu;
+  var reactData = $xeContextMenu.reactData;
+  var modelValue = props.value;
+  var visible = reactData.visible;
+  var value = true;
+  reactData.visible = value;
+  $xeContextMenu.handleLocate();
+  $xeContextMenu.updateZindex();
+  if (modelValue !== value) {
+    $xeContextMenu.emitModel(value);
+    $xeContextMenu.dispatchEvent('change', {
+      value: value
+    }, null);
+  }
+  if (visible !== value) {
+    $xeContextMenu.dispatchEvent('show', {
+      visible: value
+    }, null);
+  }
+  return $xeContextMenu.$nextTick().then(function () {
+    $xeContextMenu.updateLocate();
+  });
+}
+function closeMenu($xeContextMenu) {
+  var props = $xeContextMenu;
+  var reactData = $xeContextMenu.reactData;
+  var modelValue = props.value;
+  var visible = reactData.visible;
+  var value = false;
+  reactData.visible = value;
+  if (modelValue !== value) {
+    $xeContextMenu.emitModel(value);
+    $xeContextMenu.dispatchEvent('change', {
+      value: value
+    }, null);
+  }
+  if (visible !== value) {
+    $xeContextMenu.dispatchEvent('hide', {
+      visible: value
+    }, null);
+  }
+  return $xeContextMenu.$nextTick();
+}
+var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
+  name: 'VxeContextMenu',
+  mixins: [_ui.globalMixins.sizeMixin],
+  props: {
+    value: Boolean,
+    className: String,
+    size: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().contextMenu.size || (0, _ui.getConfig)().size;
+      }
+    },
+    options: Array,
+    x: [Number, String],
+    y: [Number, String],
+    autoLocate: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().contextMenu.autoLocate;
+      }
+    },
+    zIndex: [Number, String],
+    position: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().contextMenu.position;
+      }
+    },
+    destroyOnClose: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().contextMenu.destroyOnClose;
+      }
+    },
+    transfer: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().contextMenu.transfer;
+      }
+    }
+  },
+  data: function data() {
+    var reactData = createReactData();
+    return Object.assign(Object.assign({}, {}), {
+      xID: _xeUtils.default.uniqueId(),
+      reactData: reactData
+    });
+  },
+  computed: Object.assign(Object.assign({}, {}), {
+    computeMenuGroups: function computeMenuGroups() {
+      var $xeContextMenu = this;
+      var props = $xeContextMenu;
+      var options = props.options;
+      return options || [];
+    },
+    computeAllFirstMenuList: function computeAllFirstMenuList() {
+      var $xeContextMenu = this;
+      var menuGroups = $xeContextMenu.computeMenuGroups;
+      var firstList = [];
+      for (var i = 0; i < menuGroups.length; i++) {
+        var list = menuGroups[i];
+        for (var j = 0; j < list.length; j++) {
+          var firstItem = list[j];
+          if (hasValidItem(firstItem)) {
+            firstList.push(firstItem);
+          }
+        }
+      }
+      return firstList;
+    },
+    computeTopAndLeft: function computeTopAndLeft() {
+      var $xeContextMenu = this;
+      var props = $xeContextMenu;
+      var x = props.x,
+        y = props.y;
+      return "".concat(x).concat(y);
+    }
+  }),
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xeContextMenu = this;
+      $xeContextMenu.$emit(type, (0, _ui.createEvent)(evnt, {
+        $contextMenu: $xeContextMenu
+      }, params));
+    },
+    emitModel: function emitModel(value) {
+      var $xeContextMenu = this;
+      var _events = $xeContextMenu._events;
+      $xeContextMenu.$emit('input', value);
+      if (_events && _events.modelValue) {
+        $xeContextMenu.$emit('modelValue', value);
+      } else {
+        $xeContextMenu.$emit('model-value', value);
+      }
+    },
+    open: function open() {
+      var $xeContextMenu = this;
+      return openMenu($xeContextMenu);
+    },
+    close: function close() {
+      var $xeContextMenu = this;
+      return closeMenu($xeContextMenu);
+    },
+    handleLocate: function handleLocate() {
+      var $xeContextMenu = this;
+      var props = $xeContextMenu;
+      var reactData = $xeContextMenu.reactData;
+      var x = props.x,
+        y = props.y;
+      var popupStyle = reactData.popupStyle;
+      popupStyle.left = (0, _dom.toCssUnit)(x || 0);
+      popupStyle.top = (0, _dom.toCssUnit)(y || 0);
+      $xeContextMenu.updateLocate();
+    },
+    updateZindex: function updateZindex() {
+      var $xeContextMenu = this;
+      var props = $xeContextMenu;
+      var reactData = $xeContextMenu.reactData;
+      var zIndex = props.zIndex,
+        transfer = props.transfer;
+      var popupStyle = reactData.popupStyle;
+      var menuZIndex = popupStyle.zIndex;
+      if (zIndex) {
+        popupStyle.zIndex = _xeUtils.default.toNumber(zIndex);
+      } else {
+        if (menuZIndex < (0, _utils.getLastZIndex)()) {
+          popupStyle.zIndex = transfer ? (0, _utils.nextSubZIndex)() : (0, _utils.nextZIndex)();
+        }
+      }
+    },
+    updateLocate: function updateLocate() {
+      var $xeContextMenu = this;
+      var props = $xeContextMenu;
+      var reactData = $xeContextMenu.reactData;
+      var autoLocate = props.autoLocate,
+        position = props.position;
+      var popupStyle = reactData.popupStyle;
+      if (autoLocate) {
+        var wrapperEl = $xeContextMenu.$refs.refElem;
+        if (wrapperEl) {
+          var _getDomNode = (0, _dom.getDomNode)(),
+            visibleWidth = _getDomNode.visibleWidth,
+            visibleHeight = _getDomNode.visibleHeight;
+          var wrapperStyle = getComputedStyle(wrapperEl);
+          var offsetTop = _xeUtils.default.toNumber(wrapperStyle.top);
+          var offsetLeft = _xeUtils.default.toNumber(wrapperStyle.left);
+          var wrapperWidth = wrapperEl.offsetWidth;
+          var wrapperHeight = wrapperEl.offsetHeight;
+          if (position === 'absolute') {
+            //
+          } else {
+            if (offsetTop + wrapperHeight > visibleHeight) {
+              popupStyle.top = "".concat(Math.max(0, offsetTop - wrapperHeight), "px");
+            }
+            if (offsetLeft + wrapperWidth > visibleWidth) {
+              popupStyle.left = "".concat(Math.max(0, offsetLeft - wrapperWidth), "px");
+            }
+          }
+        }
+      }
+      $xeContextMenu.updateChildLocate();
+    },
+    updateChildLocate: function updateChildLocate() {
+      var $xeContextMenu = this;
+      var reactData = $xeContextMenu.reactData;
+      var wrapperEl = $xeContextMenu.$refs.refElem;
+      if (wrapperEl) {
+        var _getDomNode2 = (0, _dom.getDomNode)(),
+          visibleWidth = _getDomNode2.visibleWidth;
+        var owSize = 4;
+        var handleStyle = function handleStyle() {
+          var wrapperStyle = getComputedStyle(wrapperEl);
+          var offsetLeft = _xeUtils.default.toNumber(wrapperStyle.left);
+          var wrapperWidth = wrapperEl.offsetWidth;
+          var childEl = wrapperEl.querySelector('.vxe-context-menu--children-wrapper');
+          var childWidth = childEl ? childEl.offsetWidth : wrapperWidth;
+          if (offsetLeft + wrapperWidth > visibleWidth - childWidth) {
+            // 往左
+            reactData.childOffsetX = -childWidth + owSize;
+          } else {
+            // 往右
+            reactData.childOffsetX = wrapperWidth - owSize;
+          }
+        };
+        handleStyle();
+        $xeContextMenu.$nextTick(function () {
+          handleStyle();
+        });
+      }
+    },
+    handleVisible: function handleVisible() {
+      var $xeContextMenu = this;
+      var props = $xeContextMenu;
+      var modelValue = props.value;
+      if (modelValue) {
+        openMenu($xeContextMenu);
+      } else {
+        closeMenu($xeContextMenu);
+      }
+    },
+    handleItemClickEvent: function handleItemClickEvent(evnt, item) {
+      var $xeContextMenu = this;
+      evnt.preventDefault();
+      evnt.stopPropagation();
+      if (!item.disabled && !item.loading && !hasChildMenu(item)) {
+        $xeContextMenu.dispatchEvent('option-click', {
+          option: item
+        }, evnt);
+        closeMenu($xeContextMenu);
+      }
+    },
+    handleItemMouseenterEvent: function handleItemMouseenterEvent(evnt, item, parentitem) {
+      var $xeContextMenu = this;
+      var reactData = $xeContextMenu.reactData;
+      var internalData = $xeContextMenu.internalData;
+      var leaveTime = internalData.leaveTime;
+      if (leaveTime) {
+        clearTimeout(leaveTime);
+      }
+      reactData.activeOption = parentitem || item;
+      if (parentitem) {
+        reactData.activeOption = parentitem;
+        reactData.activeChildOption = item;
+      } else {
+        reactData.activeOption = item;
+        if (hasChildMenu(item)) {
+          reactData.activeChildOption = findFirstChildItem(item);
+          $xeContextMenu.$nextTick(function () {
+            $xeContextMenu.updateChildLocate();
+          });
+        } else {
+          reactData.activeChildOption = null;
+        }
+      }
+    },
+    handleItemMouseleaveEvent: function handleItemMouseleaveEvent() {
+      var $xeContextMenu = this;
+      var reactData = $xeContextMenu.reactData;
+      var internalData = $xeContextMenu.internalData;
+      var leaveTime = internalData.leaveTime;
+      if (leaveTime) {
+        clearTimeout(leaveTime);
+      }
+      internalData.leaveTime = setTimeout(function () {
+        internalData.leaveTime = null;
+        reactData.activeOption = null;
+        reactData.activeChildOption = null;
+      }, 300);
+    },
+    handleGlobalMousewheelEvent: function handleGlobalMousewheelEvent(evnt) {
+      var $xeContextMenu = this;
+      var reactData = $xeContextMenu.reactData;
+      var visible = reactData.visible;
+      if (visible) {
+        var el = $xeContextMenu.$refs.refElem;
+        if (!(0, _dom.getEventTargetNode)(evnt, el, '').flag) {
+          closeMenu($xeContextMenu);
+        }
+      }
+    },
+    handleGlobalKeydownEvent: function handleGlobalKeydownEvent(evnt) {
+      var $xeContextMenu = this;
+      var reactData = $xeContextMenu.reactData;
+      var visible = reactData.visible,
+        activeOption = reactData.activeOption,
+        activeChildOption = reactData.activeChildOption;
+      var allFirstMenuList = $xeContextMenu.computeAllFirstMenuList;
+      if (visible) {
+        var isLeftArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_LEFT);
+        var isUpArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_UP);
+        var isRightArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_RIGHT);
+        var isDwArrow = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ARROW_DOWN);
+        var isEnter = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ENTER);
+        var isEsc = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ESCAPE);
+        if (isEsc) {
+          closeMenu($xeContextMenu);
+          return;
+        }
+        // 回车选中
+        if (isEnter) {
+          if (activeOption || activeChildOption) {
+            evnt.preventDefault();
+            evnt.stopPropagation();
+            if (!activeChildOption && hasChildMenu(activeOption)) {
+              reactData.activeChildOption = findFirstChildItem(activeOption);
+              $xeContextMenu.updateChildLocate();
+              return;
+            }
+            $xeContextMenu.handleItemClickEvent(evnt, activeChildOption || activeOption);
+            return;
+          }
+        }
+        // 方向键操作
+        if (activeChildOption) {
+          if (isUpArrow) {
+            evnt.preventDefault();
+            reactData.activeChildOption = findPrevChildItem(activeOption, activeChildOption);
+            $xeContextMenu.updateChildLocate();
+          } else if (isDwArrow) {
+            evnt.preventDefault();
+            reactData.activeChildOption = findNextChildItem(activeOption, activeChildOption);
+            $xeContextMenu.updateChildLocate();
+          } else if (isLeftArrow) {
+            evnt.preventDefault();
+            reactData.activeChildOption = null;
+          }
+        } else if (activeOption) {
+          evnt.preventDefault();
+          if (isUpArrow) {
+            reactData.activeOption = findPrevFirstItem(allFirstMenuList, activeOption);
+          } else if (isDwArrow) {
+            reactData.activeOption = findNextFirstItem(allFirstMenuList, activeOption);
+          } else {
+            if (hasChildMenu(activeOption)) {
+              if (isRightArrow) {
+                reactData.activeChildOption = findFirstChildItem(activeOption);
+                $xeContextMenu.updateChildLocate();
+              }
+            }
+          }
+        } else {
+          evnt.preventDefault();
+          reactData.activeOption = _xeUtils.default.first(allFirstMenuList);
+        }
+      }
+    },
+    handleGlobalMousedownEvent: function handleGlobalMousedownEvent(evnt) {
+      var $xeContextMenu = this;
+      var reactData = $xeContextMenu.reactData;
+      var visible = reactData.visible;
+      if (visible) {
+        var el = $xeContextMenu.$refs.refElem;
+        if (!(0, _dom.getEventTargetNode)(evnt, el, '').flag) {
+          closeMenu($xeContextMenu);
+        }
+      }
+    },
+    handleGlobalBlurEvent: function handleGlobalBlurEvent() {
+      var $xeContextMenu = this;
+      var reactData = $xeContextMenu.reactData;
+      var visible = reactData.visible;
+      if (visible) {
+        closeMenu($xeContextMenu);
+      }
+    },
+    //
+    // Render
+    //
+    renderMenuItem: function renderMenuItem(h, item, parentItem, hasChildMenus) {
+      var $xeContextMenu = this;
+      var visible = item.visible,
+        disabled = item.disabled,
+        loading = item.loading;
+      if (visible === false) {
+        return (0, _ui.renderEmptyElement)($xeContextMenu);
+      }
+      var prefixOpts = Object.assign({}, item.prefixConfig);
+      var prefixIcon = prefixOpts.icon || item.prefixIcon;
+      var suffixOpts = Object.assign({}, item.suffixConfig);
+      var suffixIcon = suffixOpts.icon || item.suffixIcon;
+      var menuContent = loading ? (0, _ui.getI18n)('vxe.contextMenu.loadingText') : (0, _utils.getFuncText)(item.name);
+      return h('div', {
+        class: ['vxe-context-menu--item-inner', {
+          'is--disabled': disabled,
+          'is--loading': loading
+        }],
+        on: {
+          click: function click(evnt) {
+            $xeContextMenu.handleItemClickEvent(evnt, item);
+          },
+          mouseenter: function mouseenter(evnt) {
+            $xeContextMenu.handleItemMouseenterEvent(evnt, item, parentItem);
+          },
+          mouseleave: $xeContextMenu.handleItemMouseleaveEvent
+        }
+      }, [h('div', {
+        class: ['vxe-context-menu--item-prefix', prefixOpts.className || '']
+      }, loading ? [h('span', {
+        key: '1'
+      }, [h('i', {
+        class: (0, _ui.getIcon)().CONTEXT_MENU_OPTION_LOADING
+      })])] : [prefixIcon && _xeUtils.default.isFunction(prefixIcon) ? h('span', {
+        key: '2'
+      }, (0, _vn.getSlotVNs)(prefixIcon({}))) : h('span', {
+        key: '3'
+      }, [h('i', {
+        class: prefixIcon
+      })]), prefixOpts.content ? h('span', {
+        key: '4'
+      }, "".concat(prefixOpts.content || '')) : (0, _ui.renderEmptyElement)($xeContextMenu)]), h('div', {
+        class: 'vxe-context-menu--item-label'
+      }, menuContent), !loading && (suffixIcon || suffixOpts.content) ? h('div', {
+        class: ['vxe-context-menu--item-suffix', suffixOpts.className || '']
+      }, [suffixIcon && _xeUtils.default.isFunction(suffixIcon) ? h('span', {
+        key: '2'
+      }, (0, _vn.getSlotVNs)(suffixIcon({}))) : h('span', {
+        key: '3'
+      }, [h('i', {
+        class: suffixIcon
+      })]), suffixOpts.content ? h('span', {
+        key: '4'
+      }, "".concat(suffixOpts.content || '')) : (0, _ui.renderEmptyElement)($xeContextMenu)]) : (0, _ui.renderEmptyElement)($xeContextMenu), hasChildMenus ? h('div', {
+        class: 'vxe-context-menu--item-subicon'
+      }, [h('i', {
+        class: (0, _ui.getIcon)().CONTEXT_MENU_CHILDREN
+      })]) : (0, _ui.renderEmptyElement)($xeContextMenu)]);
+    },
+    renderMenus: function renderMenus(h) {
+      var $xeContextMenu = this;
+      var reactData = $xeContextMenu.reactData;
+      var activeOption = reactData.activeOption,
+        activeChildOption = reactData.activeChildOption,
+        childOffsetX = reactData.childOffsetX;
+      var menuGroups = $xeContextMenu.computeMenuGroups;
+      var mgVNs = [];
+      menuGroups.forEach(function (menuList, gIndex) {
+        var moVNs = [];
+        menuList.forEach(function (firstItem, i) {
+          var children = firstItem.children;
+          var hasChildMenus = children && children.some(function (child) {
+            return child.visible !== false;
+          });
+          var isActiveFirst = activeOption === firstItem;
+          var showChild = isActiveFirst && !!activeChildOption;
+          moVNs.push(h('div', {
+            key: "".concat(gIndex, "_").concat(i),
+            class: ['vxe-context-menu--item-wrapper vxe-context-menu--first-item', firstItem.className || '', {
+              'is--active': isActiveFirst,
+              'is--subactive': isActiveFirst && !!activeChildOption
+            }]
+          }, [hasChildMenus && showChild ? h('div', {
+            class: 'vxe-context-menu--children-wrapper',
+            style: {
+              transform: "translate(".concat(childOffsetX, "px, -2px)")
+            }
+          }, children.map(function (twoItem) {
+            return h('div', {
+              class: ['vxe-context-menu--item-wrapper vxe-context-menu--child-item', twoItem.className || '', {
+                'is--active': activeChildOption === twoItem
+              }]
+            }, [$xeContextMenu.renderMenuItem(h, twoItem, firstItem)]);
+          })) : (0, _ui.renderEmptyElement)($xeContextMenu), $xeContextMenu.renderMenuItem(h, firstItem, null, hasChildMenus)]));
+        });
+        mgVNs.push(h('div', {
+          key: gIndex,
+          class: 'vxe-context-menu--group-wrapper'
+        }, moVNs));
+      });
+      return mgVNs;
+    },
+    renderVN: function renderVN(h) {
+      var $xeContextMenu = this;
+      var props = $xeContextMenu;
+      var reactData = $xeContextMenu.reactData;
+      var className = props.className,
+        position = props.position,
+        destroyOnClose = props.destroyOnClose;
+      var visible = reactData.visible,
+        popupStyle = reactData.popupStyle;
+      var vSize = $xeContextMenu.computeSize;
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-context-menu vxe-context-menu--wrapper', position === 'absolute' ? 'is--' + position : 'is--fixed', className || '', _defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--visible', visible)],
+        style: popupStyle
+      }, (destroyOnClose ? visible : true) ? $xeContextMenu.renderMenus(h) : []);
+    }
+  },
+  watch: {
+    value: function value() {
+      var $xeContextMenu = this;
+      $xeContextMenu.handleVisible();
+      $xeContextMenu.$nextTick(function () {
+        $xeContextMenu.updateLocate();
+      });
+    },
+    computeTopAndLeft: function computeTopAndLeft() {
+      var $xeContextMenu = this;
+      $xeContextMenu.handleLocate();
+    }
+  },
+  created: function created() {
+    var $xeContextMenu = this;
+    $xeContextMenu.internalData = createInternalData();
+    $xeContextMenu.handleVisible();
+    _ui.globalEvents.on($xeContextMenu, 'mousewheel', $xeContextMenu.handleGlobalMousewheelEvent);
+    _ui.globalEvents.on($xeContextMenu, 'keydown', $xeContextMenu.handleGlobalKeydownEvent);
+    _ui.globalEvents.on($xeContextMenu, 'mousedown', $xeContextMenu.handleGlobalMousedownEvent);
+    _ui.globalEvents.on($xeContextMenu, 'blur', $xeContextMenu.handleGlobalBlurEvent);
+  },
+  beforeDestroy: function beforeDestroy() {
+    var $xeContextMenu = this;
+    var reactData = $xeContextMenu.reactData;
+    var internalData = $xeContextMenu.internalData;
+    var leaveTime = internalData.leaveTime;
+    if (leaveTime) {
+      clearTimeout(leaveTime);
+    }
+    _ui.globalEvents.off($xeContextMenu, 'mousewheel');
+    _ui.globalEvents.off($xeContextMenu, 'keydown');
+    _ui.globalEvents.off($xeContextMenu, 'mousedown');
+    _ui.globalEvents.off($xeContextMenu, 'blur');
+    _xeUtils.default.assign(reactData, createReactData());
+    _xeUtils.default.assign(internalData, createInternalData());
+  },
+  render: function render(h) {
+    return this.renderVN(h);
+  }
+});
+/* define-vxe-component end */