"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
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 _vn = require("../../ui/src/vn");
var _log = require("../../ui/src/log");
var _loading = _interopRequireDefault(require("../../loading"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const {
  errLog
} = (0, _log.createComponentLog)('menu');
const {
  menus,
  getConfig,
  getIcon
} = _ui.VxeUI;
function createInternalData() {
  return {
    lastActiveTime: 0,
    menuInitMaps: {},
    menuCacheMaps: {},
    menuKeyMaps: {},
    menuEffectMaps: {}
  };
}
function createReactData() {
  return {
    initialized: false,
    isEnterCollapse: false,
    collapseStyle: {},
    collapseZindex: 0,
    activeName: '',
    menuList: [],
    itemHeight: 1
  };
}
let nemuUniqueKey = 100000000;
var _default = exports.default = (0, _comp.defineVxeComponent)({
  name: 'VxeMenu',
  props: {
    modelValue: [String, Number],
    expandAll: Boolean,
    expandKeys: Array,
    accordion: {
      type: Boolean,
      default: () => getConfig().menu.accordion
    },
    border: {
      type: [Boolean, String],
      default: () => getConfig().menu.border
    },
    optionProps: {
      type: Object,
      default: () => getConfig().menu.optionProps
    },
    collapsed: {
      type: Boolean,
      default: null
    },
    collapseFixed: Boolean,
    loading: Boolean,
    options: {
      type: Array,
      default: () => []
    },
    size: {
      type: String,
      default: () => getConfig().menu.size || getConfig().size
    },
    menuConfig: Object,
    appendTo: {
      type: [String, Function],
      default: () => getConfig().menu.appendTo
    }
  },
  emits: ['update:modelValue', 'click', 'option-menu', 'menu-click'],
  setup(props, context) {
    const {
      emit,
      slots
    } = context;
    const xID = _xeUtils.default.uniqueId();
    const $xeLayoutAside = (0, _vue.inject)('$xeLayoutAside', null);
    const refElem = (0, _vue.ref)();
    const refCollapseElem = (0, _vue.ref)();
    const {
      computeSize
    } = (0, _ui.useSize)(props);
    const reactData = (0, _vue.reactive)(createReactData());
    const internalData = createInternalData();
    const refMaps = {
      refElem
    };
    const computeMenuOpts = (0, _vue.computed)(() => {
      return Object.assign({}, getConfig().menu.menuConfig, props.menuConfig);
    });
    const computePropsOpts = (0, _vue.computed)(() => {
      return Object.assign({}, getConfig().menu.optionProps, props.optionProps);
    });
    const computeTitleField = (0, _vue.computed)(() => {
      const propsOpts = computePropsOpts.value;
      return propsOpts.title || 'title';
    });
    const computeKeyField = (0, _vue.computed)(() => {
      const propsOpts = computePropsOpts.value;
      return propsOpts.name || 'name';
    });
    const computeChildrenField = (0, _vue.computed)(() => {
      const propsOpts = computePropsOpts.value;
      return propsOpts.children || 'children';
    });
    const computeLinkUrlField = (0, _vue.computed)(() => {
      const propsOpts = computePropsOpts.value;
      return propsOpts.linkUrl || 'linkUrl';
    });
    const computeRouterLinkField = (0, _vue.computed)(() => {
      const propsOpts = computePropsOpts.value;
      return propsOpts.routerLink || 'routerLink';
    });
    const computeCurrBorder = (0, _vue.computed)(() => {
      const {
        border
      } = props;
      if (border) {
        return border === true ? 'first-group' : border;
      }
      return '';
    });
    const computeIsCollapsed = (0, _vue.computed)(() => {
      const {
        collapsed
      } = props;
      if (_xeUtils.default.isBoolean(collapsed)) {
        return collapsed;
      }
      if ($xeLayoutAside) {
        return !!$xeLayoutAside.props.collapsed;
      }
      return false;
    });
    const computeVarStyle = (0, _vue.computed)(() => {
      if ($xeLayoutAside) {
        const {
          computeVarStyle: asideComputeVarStyle
        } = $xeLayoutAside.getComputeMaps();
        const asideVarStyle = asideComputeVarStyle.value;
        return asideVarStyle;
      }
      return {};
    });
    const computeMaps = {
      computeSize
    };
    const $xeMenu = {
      xID,
      props,
      context,
      reactData,
      internalData,
      getRefMaps: () => refMaps,
      getComputeMaps: () => computeMaps
    };
    const getMenuTitle = item => {
      return `${item.title || item.name}`;
    };
    const updateZindex = () => {
      if (reactData.collapseZindex < (0, _utils.getLastZIndex)()) {
        reactData.collapseZindex = (0, _utils.nextZIndex)();
      }
    };
    const updateActiveMenu = isDefExpand => {
      const {
        activeName
      } = reactData;
      const {
        menuInitMaps
      } = internalData;
      _xeUtils.default.eachTree(reactData.menuList, (item, index, items, path, parentItem, nodes) => {
        if (item.itemKey === activeName) {
          nodes.forEach(obj => {
            obj.isActive = true;
            if (isDefExpand) {
              obj.isExpand = true;
              menuInitMaps[obj.itemId] = true;
            }
          });
          item.isExactActive = true;
        } else {
          item.isExactActive = false;
          item.isActive = false;
        }
      }, {
        children: 'childList'
      });
    };
    const updateMenuConfig = () => {
      const {
        options,
        expandAll,
        expandKeys
      } = props;
      const muInitMaps = {};
      const titleField = computeTitleField.value;
      const keyField = computeKeyField.value;
      const childrenField = computeChildrenField.value;
      const linkUrlField = computeLinkUrlField.value;
      const routerLinkField = computeRouterLinkField.value;
      const defaultExpandMaps = {};
      if (expandKeys) {
        expandKeys.forEach(key => {
          defaultExpandMaps[key] = true;
        });
      }
      const muCacheMaps = {};
      const muKeyMaps = {};
      reactData.menuList = _xeUtils.default.mapTree(options, (item, index, items, path, parentItem) => {
        const itemId = ++nemuUniqueKey;
        const itemKey = item[keyField] || path.join(',');
        const childList = item[childrenField];
        const hasChild = childList && childList.length > 0;
        const isExpand = hasChild ? _xeUtils.default.isBoolean(item.expanded) ? item.expanded : defaultExpandMaps[itemKey] || !!expandAll : false;
        if (isExpand) {
          muInitMaps[itemId] = true;
        }
        const objItem = {
          itemConf: item,
          title: item[titleField],
          name: item[keyField],
          icon: item.icon,
          linkUrl: item[linkUrlField],
          linkTarget: item.linkTarget,
          routerLink: item[routerLinkField],
          permissionCode: item.permissionCode,
          children: childList,
          slots: item.slots,
          parentKey: parentItem ? parentItem.name || path.slice(0, path.length - 1).join(',') : '',
          level: path.length,
          itemId,
          itemKey,
          isExactActive: false,
          isActive: false,
          isExpand,
          hasChild,
          childList: []
        };
        if (muKeyMaps[itemKey]) {
          errLog('vxe.error.repeatKey', [keyField, item[keyField]]);
        }
        muCacheMaps[itemId] = objItem;
        muKeyMaps[itemKey] = objItem;
        return objItem;
      }, {
        children: 'children',
        mapChildren: 'childList'
      });
      internalData.menuInitMaps = muInitMaps;
      internalData.menuCacheMaps = muCacheMaps;
      internalData.menuKeyMaps = muKeyMaps;
    };
    const updateCollapseStyle = () => {
      const {
        collapseFixed
      } = props;
      if (collapseFixed) {
        (0, _vue.nextTick)(() => {
          const isCollapsed = computeIsCollapsed.value;
          const el = refElem.value;
          if (el) {
            const clientRect = el.getBoundingClientRect();
            const parentNode = el.parentNode;
            reactData.collapseStyle = isCollapsed ? {
              top: (0, _dom.toCssUnit)(clientRect.top),
              left: (0, _dom.toCssUnit)(clientRect.left),
              height: (0, _dom.toCssUnit)(parentNode.clientHeight),
              zIndex: reactData.collapseZindex
            } : {};
          }
        });
      }
    };
    const handleCollapseMenu = () => {
      const {
        collapseFixed
      } = props;
      if (collapseFixed) {
        const {
          initialized
        } = reactData;
        const isCollapsed = computeIsCollapsed.value;
        if (isCollapsed) {
          if (!initialized) {
            reactData.initialized = true;
          }
        }
        reactData.isEnterCollapse = false;
        updateZindex();
        updateCollapseStyle();
      }
    };
    const handleClickIconCollapse = (evnt, item, itemList) => {
      const {
        accordion
      } = props;
      const {
        menuEffectMaps,
        menuInitMaps
      } = internalData;
      const {
        itemId,
        hasChild,
        isExpand
      } = item;
      const isCollapsed = computeIsCollapsed.value;
      const expanded = !isExpand;
      if (hasChild) {
        evnt.stopPropagation();
        evnt.preventDefault();
        if (menuEffectMaps[itemId]) {
          clearTimeout(menuEffectMaps[itemId]);
        }
        if (accordion) {
          itemList.forEach(obj => {
            if (obj !== item) {
              obj.isExpand = false;
            }
          });
        }
        item.isExpand = expanded;
        menuInitMaps[itemId] = true;
        const wrapperEl = isCollapsed ? refCollapseElem.value : refElem.value;
        if (wrapperEl) {
          const nemuEl = wrapperEl.querySelector(`.vxe-menu--item-wrapper[data-menu-id="${itemId}"]`);
          const groupEl = nemuEl ? nemuEl.querySelector('.vxe-menu--item-group') : null;
          if (groupEl) {
            if (expanded) {
              groupEl.style.height = '0';
              groupEl.setAttribute('data-effect', 'y');
              requestAnimationFrame(() => {
                groupEl.style.height = `${groupEl.scrollHeight}px`;
              });
            } else {
              groupEl.style.height = `${groupEl.scrollHeight}px`;
              groupEl.setAttribute('data-effect', 'y');
              requestAnimationFrame(() => {
                groupEl.style.height = '0';
              });
            }
            menuEffectMaps[itemId] = setTimeout(() => {
              delete menuEffectMaps[itemId];
              groupEl.removeAttribute('data-effect');
              groupEl.style.height = '';
            }, 350);
          }
        }
      }
    };
    const emitModel = value => {
      reactData.activeName = value;
      emit('update:modelValue', value);
    };
    const handleContextmenuEvent = (evnt, item) => {
      const {
        menuConfig
      } = props;
      const menuOpts = computeMenuOpts.value;
      if (menuConfig ? (0, _utils.isEnableConf)(menuOpts) : menuOpts.enabled) {
        const {
          options,
          visibleMethod
        } = menuOpts;
        if (!visibleMethod || visibleMethod({
          $menu: $xeMenu,
          options,
          currentMenu: item,
          currentOption: item.itemConf
        })) {
          if (_ui.VxeUI.contextMenu) {
            _ui.VxeUI.contextMenu.openByEvent(evnt, {
              options,
              events: {
                optionClick(eventParams) {
                  const {
                    option
                  } = eventParams;
                  const gMenuOpts = menus.get(option.code);
                  const mmMethod = gMenuOpts ? gMenuOpts.menuMenuMethod : null;
                  const params = {
                    menu: option,
                    currentMenu: item,
                    currentOption: item.itemConf,
                    $event: evnt,
                    $menu: $xeMenu
                  };
                  if (mmMethod) {
                    mmMethod(params, evnt);
                  }
                  dispatchEvent('menu-click', params, eventParams.$event);
                }
              }
            });
          }
        }
      }
      dispatchEvent('option-menu', {
        currentMenu: item
      }, evnt);
    };
    const handleClickMenu = (evnt, item, itemList) => {
      const {
        itemKey,
        linkUrl,
        routerLink,
        hasChild
      } = item;
      if (linkUrl || routerLink) {
        emitModel(itemKey);
        reactData.isEnterCollapse = false;
        internalData.lastActiveTime = Date.now();
      } else {
        if (hasChild) {
          handleClickIconCollapse(evnt, item, itemList);
        } else {
          emitModel(itemKey);
          reactData.isEnterCollapse = false;
          internalData.lastActiveTime = Date.now();
        }
      }
      const params = {
        currentMenu: item,
        currentOption: item.itemConf,
        option: item.itemConf,
        // 已废弃
        menu: item
      };
      dispatchEvent('click', params, evnt);
    };
    const handleMenuMouseenter = () => {
      const {
        lastActiveTime
      } = internalData;
      if (lastActiveTime < Date.now() - 500) {
        reactData.isEnterCollapse = true;
      }
    };
    const handleMenuMouseleave = () => {
      reactData.isEnterCollapse = false;
    };
    const callSlot = (slotFunc, params) => {
      if (slotFunc) {
        if (_xeUtils.default.isString(slotFunc)) {
          slotFunc = slots[slotFunc] || null;
        }
        if (_xeUtils.default.isFunction(slotFunc)) {
          return (0, _vn.getSlotVNs)(slotFunc(params));
        }
      }
      return [];
    };
    const dispatchEvent = (type, params, evnt) => {
      emit(type, (0, _ui.createEvent)(evnt, {
        $menu: $xeMenu
      }, params));
    };
    const handleScrollToView = itemId => {
      const wrapperEl = refElem.value;
      const nemuEl = wrapperEl ? wrapperEl.querySelector(`.vxe-menu--item-wrapper[data-menu-id="${itemId}"]`) : null;
      if (nemuEl) {
        (0, _dom.scrollToView)(nemuEl);
        return true;
      }
      return false;
    };
    const menuMethods = {
      dispatchEvent,
      setExpandByMenuKey(menuKeys, expanded) {
        const {
          menuKeyMaps,
          menuInitMaps
        } = internalData;
        if (menuKeys) {
          if (!_xeUtils.default.isArray(menuKeys)) {
            menuKeys = [menuKeys];
          }
          menuKeys.forEach(mKey => {
            const menuItem = menuKeyMaps[mKey];
            if (menuItem) {
              if (expanded) {
                menuInitMaps[menuItem.itemId] = true;
              }
              menuItem.isExpand = !!expanded;
            }
          });
        }
        return (0, _vue.nextTick)();
      },
      clearAllExpandMenu() {
        const {
          menuList
        } = reactData;
        _xeUtils.default.eachTree(menuList, item => {
          item.isExpand = false;
        }, {
          children: 'childList'
        });
        internalData.menuInitMaps = {};
        return (0, _vue.nextTick)();
      },
      scrollToMenuKey(menuKey) {
        const {
          menuKeyMaps
        } = internalData;
        const menuItem = menuKeyMaps[menuKey];
        if (!menuItem) {
          return (0, _vue.nextTick)();
        }
        const {
          itemId
        } = menuItem;
        if (handleScrollToView(itemId)) {
          return (0, _vue.nextTick)();
        }
        return (0, _vue.nextTick)().then(() => {
          handleScrollToView(itemId);
        });
      },
      scrollToActiveMenu() {
        const {
          activeName
        } = reactData;
        if (activeName) {
          return $xeMenu.scrollToMenuKey(activeName);
        }
        return (0, _vue.nextTick)().then(() => {
          const {
            activeName
          } = reactData;
          if (activeName) {
            return $xeMenu.scrollToMenuKey(activeName);
          }
        });
      }
    };
    const menuPrivateMethods = {};
    Object.assign($xeMenu, menuMethods, menuPrivateMethods);
    const renderMenuTitle = (item, itemList) => {
      const {
        icon,
        isExpand,
        hasChild
      } = item;
      const itemSlots = item.slots || {};
      const optionSlot = itemSlots.default || slots.option;
      const titleSlot = itemSlots.title || slots.optionTitle || slots['option-title'];
      const iconSlot = itemSlots.icon || slots.optionIcon || slots['option-icon'];
      const title = getMenuTitle(item);
      const isCollapsed = computeIsCollapsed.value;
      const params = {
        currentMenu: item,
        currentOption: item.itemConf,
        option: item.itemConf,
        collapsed: isCollapsed
      };
      return [optionSlot ? (0, _ui.renderEmptyElement)($xeMenu) : (0, _vue.h)('div', {
        class: 'vxe-menu--item-link-icon'
      }, iconSlot ? callSlot(iconSlot, params) : icon ? [(0, _vue.h)('i', {
        class: icon
      })] : []), optionSlot ? (0, _vue.h)('div', {
        class: 'vxe-menu--item-custom-title'
      }, callSlot(optionSlot, params)) : (0, _vue.h)('div', {
        class: 'vxe-menu--item-link-title',
        title
      }, titleSlot ? callSlot(titleSlot, params) : title), hasChild ? (0, _vue.h)('div', {
        class: 'vxe-menu--item-link-collapse',
        onClick(evnt) {
          handleClickIconCollapse(evnt, item, itemList);
        }
      }, [(0, _vue.h)('i', {
        class: isExpand ? getIcon().MENU_ITEM_EXPAND_OPEN : getIcon().MENU_ITEM_EXPAND_CLOSE
      })]) : (0, _ui.renderEmptyElement)($xeMenu)];
    };
    const renderDefaultChildren = (item, itemList) => {
      const {
        itemId,
        itemKey,
        level,
        hasChild,
        isActive,
        isExactActive,
        isExpand,
        linkUrl,
        routerLink,
        linkTarget,
        childList
      } = item;
      const {
        isEnterCollapse
      } = reactData;
      const {
        menuInitMaps
      } = internalData;
      const isCollapsed = computeIsCollapsed.value;
      if (item.permissionCode) {
        if (!_ui.permission.checkVisible(item.permissionCode)) {
          return (0, _ui.renderEmptyElement)($xeMenu);
        }
      }
      const isExpandChild = (!isCollapsed || isEnterCollapse) && isExpand;
      const linkOns = {
        onContextmenu(evnt) {
          handleContextmenuEvent(evnt, item);
        },
        onClick(evnt) {
          handleClickMenu(evnt, item, itemList);
        }
      };
      return (0, _vue.h)('div', {
        key: itemKey,
        class: ['vxe-menu--item-wrapper', `vxe-menu--item-level${level}`, {
          'has--child': hasChild,
          'is--exact-active': isExactActive,
          'is--active': isActive,
          'is--expand': isExpandChild
        }],
        'data-menu-id': itemId
      }, [linkUrl ? (0, _vue.h)('a', Object.assign({
        class: 'vxe-menu--item-link is--link',
        href: linkUrl,
        target: linkTarget
      }, linkOns), renderMenuTitle(item, itemList)) : routerLink ? (0, _vue.h)((0, _vue.resolveComponent)('router-link'), Object.assign({
        class: 'vxe-menu--item-link is--router',
        to: routerLink,
        target: linkTarget
      }, linkOns), {
        default: () => renderMenuTitle(item, itemList)
      }) : (0, _vue.h)('div', Object.assign({
        class: 'vxe-menu--item-link is--default'
      }, linkOns), renderMenuTitle(item, itemList)), hasChild ? (0, _vue.h)('div', {
        class: 'vxe-menu--item-group'
      }, isExpandChild || menuInitMaps[itemId] ? childList.map(child => renderDefaultChildren(child, childList)) : []) : (0, _ui.renderEmptyElement)($xeMenu)]);
    };
    const renderCollapseChildren = (item, itemList) => {
      const {
        itemId,
        itemKey,
        level,
        hasChild,
        isActive,
        isExactActive,
        routerLink,
        linkUrl,
        linkTarget,
        childList
      } = item;
      if (item.permissionCode) {
        if (!_ui.permission.checkVisible(item.permissionCode)) {
          return (0, _ui.renderEmptyElement)($xeMenu);
        }
      }
      const linkOns = {
        onContextmenu(evnt) {
          handleContextmenuEvent(evnt, item);
        },
        onClick(evnt) {
          handleClickMenu(evnt, item, itemList);
        }
      };
      return (0, _vue.h)('div', {
        key: itemKey,
        class: ['vxe-menu--item-wrapper', `vxe-menu--item-level${level}`, {
          'has--child': hasChild,
          'is--exact-active': isExactActive,
          'is--active': isActive
        }],
        'data-menu-id': itemId
      }, [linkUrl ? (0, _vue.h)('a', Object.assign({
        class: 'vxe-menu--item-link is--link',
        href: linkUrl,
        target: linkTarget
      }, linkOns), renderMenuTitle(item, itemList)) : routerLink ? (0, _vue.h)((0, _vue.resolveComponent)('router-link'), Object.assign({
        class: 'vxe-menu--item-link is--router',
        to: routerLink,
        target: linkTarget
      }, linkOns), {
        default: () => renderMenuTitle(item, itemList)
      }) : (0, _vue.h)('div', Object.assign({
        class: 'vxe-menu--item-link is--default'
      }, linkOns), renderMenuTitle(item, itemList)), hasChild ? (0, _vue.h)('div', {
        class: 'vxe-menu--item-group'
      }, childList.map(child => renderDefaultChildren(child, childList))) : (0, _ui.renderEmptyElement)($xeMenu)]);
    };
    const renderVN = () => {
      const {
        loading,
        collapseFixed,
        appendTo
      } = props;
      const {
        initialized,
        menuList,
        collapseStyle,
        isEnterCollapse
      } = reactData;
      const vSize = computeSize.value;
      const isCollapsed = computeIsCollapsed.value;
      const currBorder = computeCurrBorder.value;
      const varStyle = computeVarStyle.value;
      const headerSlot = slots.header;
      const footerSlot = slots.footer;
      let ons = {};
      if (collapseFixed) {
        ons = {
          onMouseenter: handleMenuMouseenter,
          onMouseleave: handleMenuMouseleave
        };
      }
      const stParams = {
        collapsed: isCollapsed
      };
      return (0, _vue.h)('div', {
        ref: refElem,
        class: ['vxe-menu', {
          [`border--${currBorder}`]: currBorder,
          [`size--${vSize}`]: vSize,
          'is--collapsed': isCollapsed,
          'is--loading': loading
        }]
      }, [headerSlot ? (0, _vue.h)('div', {
        class: 'vxe-menu--header'
      }, headerSlot(stParams)) : (0, _ui.renderEmptyElement)($xeMenu), (0, _vue.h)('div', {
        class: 'vxe-menu--body'
      }, menuList.map(child => isCollapsed ? renderCollapseChildren(child, menuList) : renderDefaultChildren(child, menuList))), footerSlot ? (0, _vue.h)('div', {
        class: 'vxe-menu--footer'
      }, footerSlot(stParams)) : (0, _ui.renderEmptyElement)($xeMenu), (0, _vue.h)(_vue.Teleport, {
        to: (0, _dom.getPopupContainer)(appendTo),
        disabled: !initialized
      }, [(0, _vue.h)('div', Object.assign({
        ref: refCollapseElem,
        class: ['vxe-menu--collapse-wrapper', {
          [`size--${vSize}`]: vSize,
          'is--collapsed': isCollapsed,
          'is--enter': isEnterCollapse,
          'is--loading': loading
        }],
        style: Object.assign({}, varStyle, collapseStyle)
      }, ons), isCollapsed ? [headerSlot ? (0, _vue.h)('div', {
        class: 'vxe-menu--header'
      }, headerSlot(stParams)) : (0, _ui.renderEmptyElement)($xeMenu), (0, _vue.h)('div', {
        class: 'vxe-menu--body'
      }, menuList.map(child => renderDefaultChildren(child, menuList))), footerSlot ? (0, _vue.h)('div', {
        class: 'vxe-menu--footer'
      }, footerSlot(stParams)) : (0, _ui.renderEmptyElement)($xeMenu)] : [])]),
      /**
       * 加载中
       */
      (0, _vue.h)(_loading.default, {
        class: 'vxe-list-view--loading',
        modelValue: loading
      })]);
    };
    const optFlag = (0, _vue.ref)(0);
    (0, _vue.watch)(() => props.options ? props.options.length : -1, () => {
      optFlag.value++;
    });
    (0, _vue.watch)(() => props.options, () => {
      optFlag.value++;
    });
    (0, _vue.watch)(optFlag, () => {
      updateMenuConfig();
      updateActiveMenu(true);
      (0, _vue.nextTick)(() => {
        $xeMenu.scrollToActiveMenu();
      });
    });
    (0, _vue.watch)(() => props.modelValue, val => {
      reactData.activeName = val;
    });
    (0, _vue.watch)(() => reactData.activeName, () => {
      updateActiveMenu(true);
    });
    (0, _vue.watch)(computeIsCollapsed, () => {
      handleCollapseMenu();
    });
    (0, _vue.onMounted)(() => {
      const {
        menuConfig
      } = props;
      const VxeUIContextMenu = _ui.VxeUI.getComponent('VxeContextMenu');
      if (menuConfig && !VxeUIContextMenu) {
        errLog('vxe.error.reqComp', ['vxe-context-menu']);
      }
      _ui.globalEvents.on($xeMenu, 'resize', updateCollapseStyle);
      updateCollapseStyle();
      (0, _vue.nextTick)(() => {
        $xeMenu.scrollToActiveMenu();
      });
    });
    (0, _vue.onBeforeUnmount)(() => {
      _ui.globalEvents.off($xeMenu, 'resize');
      _xeUtils.default.assign(reactData, createReactData());
      _xeUtils.default.assign(internalData, createInternalData());
    });
    reactData.initialized = !!props.collapsed;
    reactData.activeName = props.modelValue;
    updateMenuConfig();
    updateActiveMenu(true);
    $xeMenu.renderVN = renderVN;
    return $xeMenu;
  },
  render() {
    return this.renderVN();
  }
});