vxe-pc-ui 4.11.30 → 4.11.32

package/lib/index.umd.js

@@ -1909,6 +1909,8 @@ __webpack_require__.d(__webpack_exports__, {
   Collapse: function() { return /* reexport */ Collapse; },
   CollapsePane: function() { return /* reexport */ CollapsePane; },
   ColorPicker: function() { return /* reexport */ ColorPicker; },
+  ContextMenu: function() { return /* reexport */ ContextMenu; },
+  ContextMenuController: function() { return /* reexport */ ContextMenuController; },
   Countdown: function() { return /* reexport */ Countdown; },
   DatePanel: function() { return /* reexport */ DatePanel; },
   DatePicker: function() { return /* reexport */ DatePicker; },
@@ -2001,6 +2003,7 @@ __webpack_require__.d(__webpack_exports__, {
   VxeCollapse: function() { return /* reexport */ VxeCollapse; },
   VxeCollapsePane: function() { return /* reexport */ VxeCollapsePane; },
   VxeColorPicker: function() { return /* reexport */ VxeColorPicker; },
+  VxeContextMenu: function() { return /* reexport */ VxeContextMenu; },
   VxeCore: function() { return /* reexport */ VxeCore; },
   VxeCountdown: function() { return /* reexport */ VxeCountdown; },
   VxeDatePanel: function() { return /* reexport */ VxeDatePanel; },
@@ -2150,6 +2153,8 @@ __webpack_require__.d(components_namespaceObject, {
   Collapse: function() { return Collapse; },
   CollapsePane: function() { return CollapsePane; },
   ColorPicker: function() { return ColorPicker; },
+  ContextMenu: function() { return ContextMenu; },
+  ContextMenuController: function() { return ContextMenuController; },
   Countdown: function() { return Countdown; },
   DatePanel: function() { return DatePanel; },
   DatePicker: function() { return DatePicker; },
@@ -2242,6 +2247,7 @@ __webpack_require__.d(components_namespaceObject, {
   VxeCollapse: function() { return VxeCollapse; },
   VxeCollapsePane: function() { return VxeCollapsePane; },
   VxeColorPicker: function() { return VxeColorPicker; },
+  VxeContextMenu: function() { return VxeContextMenu; },
   VxeCore: function() { return VxeCore; },
   VxeCountdown: function() { return VxeCountdown; },
   VxeDatePanel: function() { return VxeDatePanel; },
@@ -3584,7 +3590,8 @@ const dynamicStore = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)(
   modals: [],
   drawers: [],
   globalLoading: null,
-  globalWatermark: null
+  globalWatermark: null,
+  globalContextMenu: null
 });
 /**
  * 动态组件
@@ -3595,20 +3602,49 @@ const VxeDynamics = defineVxeComponent({
     const VxeUIDrawerComponent = index_esm_VxeUI.getComponent('vxe-drawer');
     const VxeUILoadingComponent = index_esm_VxeUI.getComponent('vxe-loading');
     const VxeUIWatermarkComponent = index_esm_VxeUI.getComponent('vxe-watermark');
+    const VxeUIContextMenuComponent = index_esm_VxeUI.getComponent('vxe-context-menu');
     return () => {
       const {
         modals,
         drawers,
         globalWatermark,
-        globalLoading
+        globalLoading,
+        globalContextMenu
       } = dynamicStore;
+      let cmOpts = globalContextMenu;
+      if (globalContextMenu) {
+        const events = globalContextMenu.events || {};
+        const {
+          optionClick,
+          show,
+          hide
+        } = events;
+        cmOpts = Object.assign({}, globalContextMenu, {
+          onShow(params) {
+            if (show) {
+              show(params);
+            }
+          },
+          onHide(params) {
+            if (hide) {
+              hide(params);
+            }
+            dynamicStore.globalContextMenu = null;
+          },
+          onOptionClick(params) {
+            if (optionClick) {
+              optionClick(params);
+            }
+          }
+        });
+      }
       return [modals.length ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         key: 1,
         class: 'vxe-dynamics--modal'
       }, modals.map(item => (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUIModalComponent, item))) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(), drawers.length ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         key: 2,
         class: 'vxe-dynamics--drawer'
-      }, drawers.map(item => (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUIDrawerComponent, item))) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(), globalWatermark ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUIWatermarkComponent, globalWatermark) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(), globalLoading ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUILoadingComponent, globalLoading) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)()];
+      }, drawers.map(item => (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUIDrawerComponent, item))) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(), globalWatermark ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUIWatermarkComponent, globalWatermark) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(), globalLoading ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUILoadingComponent, globalLoading) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(), globalContextMenu ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUIContextMenuComponent, cmOpts) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)()];
     };
   }
 });
@@ -3623,14 +3659,14 @@ function checkDynamic() {
 }
 ;// CONCATENATED MODULE: ./packages/ui/src/log.ts
 
-const log_version = `ui v${"4.11.30"}`;
+const log_version = `ui v${"4.11.32"}`;
 const warnLog = log.create('warn', log_version);
 const errLog = log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
 
-const ui_version = "4.11.30";
+const ui_version = "4.11.32";
 index_esm_VxeUI.uiVersion = ui_version;
 index_esm_VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -3666,7 +3702,8 @@ setConfig({
     },
     suffixTooltip: {
       enterable: true
-    }
+    },
+    showDropdownIcon: true
   },
   buttonGroup: {},
   calendar: {
@@ -3699,6 +3736,7 @@ setConfig({
     }
   },
   collapsePane: {},
+  contextMenu: {},
   countdown: {},
   colorPicker: {
     type: 'rgb',
@@ -4255,7 +4293,10 @@ setIcon({
   SPLIT_LEFT_ACTION: iconPrefix + 'arrow-left',
   SPLIT_RIGHT_ACTION: iconPrefix + 'arrow-right',
   // backtop
-  BACKTOP_TOP: iconPrefix + 'top'
+  BACKTOP_TOP: iconPrefix + 'top',
+  // context-menu
+  CONTEXT_MENU_OPTION_LOADING: iconPrefix + 'spinner roll',
+  CONTEXT_MENU_CHILDREN: iconPrefix + 'arrow-right'
 });
 
 /* harmony default export */ var ui = ((/* unused pure expression or super */ null && (VxeUI)));
@@ -4368,7 +4409,7 @@ setIcon({
       allChecked: '全选',
       total: '{0} / {1}',
       search: '搜索',
-      loadingText: '加载中',
+      loadingText: '加载中...',
       emptyText: '暂无数据',
       maxSize: '最大可选择的数量不能超过 {0} 个',
       overSizeErr: '已超出最大可选数量 {0} 个，超出部分将被忽略！',
@@ -4801,6 +4842,9 @@ setIcon({
         ss: '秒'
       }
     },
+    contextMenu: {
+      loadingText: '加载中...'
+    },
     gantt: {
       tFullFormat: {
         year: '{yyyy}年',
@@ -6248,8 +6292,6 @@ function createReactData() {
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
       removeScrollEvent();
       external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(reactData, createReactData());
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onUnmounted)(() => {
       external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(internalData, createInternalData());
     });
     $xeBacktop.renderVN = renderVN;
@@ -7274,6 +7316,10 @@ const VxeButtonComponent = defineVxeComponent({
     prefixTooltip: Object,
     suffixTooltip: Object,
     options: Array,
+    showDropdownIcon: {
+      type: Boolean,
+      default: () => getConfig().button.showDropdownIcon
+    },
     /**
      * 在下拉面板关闭时销毁内容
      */
@@ -7298,6 +7344,7 @@ const VxeButtonComponent = defineVxeComponent({
     const $xeModal = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeModal', null);
     const $xeDrawer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeDrawer', null);
     const $xeTable = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeTable', null);
+    const $xeTree = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeTree', null);
     const $xeForm = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeForm', null);
     const $xeButtonGroup = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeButtonGroup', null);
     const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
@@ -7344,7 +7391,7 @@ const VxeButtonComponent = defineVxeComponent({
         if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(globalTransfer)) {
           return globalTransfer;
         }
-        if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+        if ($xeTable || $xeTree || $xeModal || $xeDrawer || $xeForm) {
           return true;
         }
       }
@@ -7778,7 +7825,8 @@ const VxeButtonComponent = defineVxeComponent({
         type,
         destroyOnClose,
         name,
-        loading
+        loading,
+        showDropdownIcon
       } = props;
       const {
         initialized,
@@ -7839,9 +7887,9 @@ const VxeButtonComponent = defineVxeComponent({
           ...btnOns
         }, {
           default() {
-            return renderContent().concat([(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+            return renderContent().concat(showDropdownIcon ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
               class: `vxe-button--dropdown-arrow ${getIcon().BUTTON_DROPDOWN}`
-            })]);
+            })] : []);
           }
         }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('button', {
           ref: refButton,
@@ -7861,9 +7909,9 @@ const VxeButtonComponent = defineVxeComponent({
           disabled: btnDisabled || loading,
           onClick: clickTargetEvent,
           ...btnOns
-        }, renderContent().concat([(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+        }, renderContent().concat(showDropdownIcon ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
           class: `vxe-button--dropdown-arrow ${getIcon().BUTTON_DROPDOWN}`
-        })])), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(external_commonjs_vue_commonjs2_vue_root_Vue_.Teleport, {
+        })] : [])), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(external_commonjs_vue_commonjs2_vue_root_Vue_.Teleport, {
           to: 'body',
           disabled: btnTransfer ? !initialized : true
         }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
@@ -17368,6 +17416,413 @@ dynamicApp.use(VxeColorPicker);
 index_esm_VxeUI.component(color_picker);
 const ColorPicker = VxeColorPicker;
 /* harmony default export */ var packages_color_picker = (VxeColorPicker);
+;// CONCATENATED MODULE: ./packages/context-menu/src/context-menu.ts
+
+
+
+
+
+
+
+
+function context_menu_createInternalData() {
+  return {};
+}
+function context_menu_createReactData() {
+  return {
+    visible: false,
+    activeOption: null,
+    activeChildOption: null,
+    popupStyle: {
+      top: '',
+      left: '',
+      zIndex: 0
+    },
+    childPos: ''
+  };
+}
+/* harmony default export */ var context_menu = (defineVxeComponent({
+  name: 'VxeContextMenu',
+  props: {
+    modelValue: Boolean,
+    className: String,
+    size: {
+      type: String,
+      default: () => getConfig().contextMenu.size || getConfig().size
+    },
+    options: Array,
+    x: [Number, String],
+    y: [Number, String],
+    zIndex: [Number, String],
+    position: {
+      type: String,
+      default: () => getConfig().contextMenu.position
+    },
+    destroyOnClose: {
+      type: Boolean,
+      default: () => getConfig().contextMenu.destroyOnClose
+    },
+    transfer: {
+      type: Boolean,
+      default: () => getConfig().contextMenu.transfer
+    }
+  },
+  emits: ['update:modelValue', 'option-click', 'change', 'show', 'hide'],
+  setup(props, context) {
+    const {
+      emit
+    } = context;
+    const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
+    const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const {
+      computeSize
+    } = useSize(props);
+    const internalData = context_menu_createInternalData();
+    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)(context_menu_createReactData());
+    const refMaps = {
+      refElem
+    };
+    const computeMenuGroups = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        options
+      } = props;
+      return options || [];
+    });
+    const computeTopAndLeft = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        x,
+        y
+      } = props;
+      return `${x}${y}`;
+    });
+    const computeMaps = {};
+    const $xeContextMenu = {
+      xID,
+      props,
+      context,
+      reactData,
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    };
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, createEvent(evnt, {
+        $contextMenu: $xeContextMenu
+      }, params));
+    };
+    const emitModel = value => {
+      emit('update:modelValue', value);
+    };
+    const open = () => {
+      const {
+        modelValue
+      } = props;
+      const {
+        visible
+      } = reactData;
+      const value = true;
+      reactData.visible = value;
+      updateLocate();
+      updateZindex();
+      if (modelValue !== value) {
+        emitModel(value);
+        dispatchEvent('change', {
+          value
+        }, null);
+      }
+      if (visible !== value) {
+        dispatchEvent('show', {
+          visible: value
+        }, null);
+      }
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+    };
+    const close = () => {
+      const {
+        modelValue
+      } = props;
+      const {
+        visible
+      } = reactData;
+      const value = false;
+      reactData.visible = value;
+      if (modelValue !== value) {
+        emitModel(value);
+        dispatchEvent('change', {
+          value
+        }, null);
+      }
+      if (visible !== value) {
+        dispatchEvent('hide', {
+          visible: value
+        }, null);
+      }
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+    };
+    const updateLocate = () => {
+      const {
+        x,
+        y
+      } = props;
+      const {
+        popupStyle
+      } = reactData;
+      popupStyle.left = toCssUnit(x || 0);
+      popupStyle.top = toCssUnit(y || 0);
+    };
+    const updateZindex = () => {
+      const {
+        zIndex,
+        transfer
+      } = props;
+      const {
+        popupStyle
+      } = reactData;
+      const menuZIndex = popupStyle.zIndex;
+      if (zIndex) {
+        popupStyle.zIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(zIndex);
+      } else {
+        if (menuZIndex < getLastZIndex()) {
+          popupStyle.zIndex = transfer ? nextSubZIndex() : nextZIndex();
+        }
+      }
+    };
+    const handleVisible = () => {
+      const {
+        modelValue
+      } = props;
+      if (modelValue) {
+        open();
+      } else {
+        close();
+      }
+    };
+    const tagMethods = {
+      dispatchEvent,
+      open,
+      close
+    };
+    const hasChildMenu = item => {
+      const {
+        children
+      } = item;
+      return children && children.some(child => child.visible !== false);
+    };
+    const handleItemClickEvent = (evnt, item) => {
+      if (!hasChildMenu(item)) {
+        dispatchEvent('option-click', {
+          option: item
+        }, evnt);
+        close();
+      }
+    };
+    const handleItemMouseenterEvent = (evnt, item, parentitem) => {
+      reactData.activeOption = parentitem || item;
+      reactData.activeChildOption = parentitem ? item : null;
+    };
+    const handleItemMouseleaveEvent = () => {
+      reactData.activeOption = null;
+      reactData.activeChildOption = null;
+    };
+    const handleGlobalMousedownEvent = evnt => {
+      const {
+        visible
+      } = reactData;
+      if (visible) {
+        const el = refElem.value;
+        if (!getEventTargetNode(evnt, el, '').flag) {
+          close();
+        }
+      }
+    };
+    const tagPrivateMethods = {};
+    Object.assign($xeContextMenu, tagMethods, tagPrivateMethods);
+    const renderMenuItem = (item, parentItem, hasChildMenus) => {
+      const {
+        visible,
+        disabled,
+        loading
+      } = item;
+      if (visible === false) {
+        return renderEmptyElement($xeContextMenu);
+      }
+      const prefixOpts = Object.assign({}, item.prefixConfig);
+      const prefixIcon = prefixOpts.icon || item.prefixIcon;
+      const suffixOpts = Object.assign({}, item.suffixConfig);
+      const suffixIcon = suffixOpts.icon || item.suffixIcon;
+      const menuContent = loading ? getI18n('vxe.contextMenu.loadingText') : getFuncText(item.name);
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: ['vxe-context-menu--item-inner', {
+          'is--disabled': disabled,
+          'is--loading': loading
+        }],
+        onClick(evnt) {
+          handleItemClickEvent(evnt, item);
+        },
+        onMouseenter(evnt) {
+          handleItemMouseenterEvent(evnt, item, parentItem);
+        },
+        onMouseleave: handleItemMouseleaveEvent
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: ['vxe-context-menu--item-prefix', prefixOpts.className || '']
+      }, loading ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+        key: '1'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+        class: getIcon().CONTEXT_MENU_OPTION_LOADING
+      })])] : [prefixIcon && external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(prefixIcon) ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+        key: '2'
+      }, vn_getSlotVNs(prefixIcon({}))) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+        key: '3'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+        class: prefixIcon
+      })]), prefixOpts.content ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+        key: '4'
+      }, `${prefixOpts.content || ''}`) : renderEmptyElement($xeContextMenu)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-context-menu--item-label'
+      }, menuContent), !loading && (suffixIcon || suffixOpts.content) ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: ['vxe-context-menu--item-suffix', suffixOpts.className || '']
+      }, [suffixIcon && external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(suffixIcon) ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+        key: '2'
+      }, vn_getSlotVNs(suffixIcon({}))) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+        key: '3'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+        class: suffixIcon
+      })]), suffixOpts.content ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+        key: '4'
+      }, `${suffixOpts.content || ''}`) : renderEmptyElement($xeContextMenu)]) : renderEmptyElement($xeContextMenu), hasChildMenus ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-context-menu--item-subicon'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+        class: getIcon().CONTEXT_MENU_CHILDREN
+      })]) : renderEmptyElement($xeContextMenu)]);
+    };
+    const renderMenus = () => {
+      const {
+        activeOption,
+        activeChildOption
+      } = reactData;
+      const menuGroups = computeMenuGroups.value;
+      const mgVNs = [];
+      menuGroups.forEach((menuList, gIndex) => {
+        const moVNs = [];
+        menuList.forEach((firstItem, i) => {
+          const {
+            children
+          } = firstItem;
+          const hasChildMenus = children && children.some(child => child.visible !== false);
+          moVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            key: `${gIndex}_${i}`,
+            class: ['vxe-context-menu--item-wrapper vxe-context-menu--first-item', firstItem.className || '', {
+              'is--active': activeOption === firstItem
+            }]
+          }, [hasChildMenus ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            class: 'vxe-context-menu--children-wrapper'
+          }, children.map(twoItem => {
+            return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+              class: ['vxe-context-menu--item-wrapper vxe-context-menu--child-item', twoItem.className || '', {
+                'is--active': activeChildOption === twoItem
+              }]
+            }, [renderMenuItem(twoItem, firstItem)]);
+          })) : renderEmptyElement($xeContextMenu), renderMenuItem(firstItem, null, hasChildMenus)]));
+        });
+        mgVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          key: gIndex,
+          class: 'vxe-context-menu--group-wrapper'
+        }, moVNs));
+      });
+      return mgVNs;
+    };
+    const renderVN = () => {
+      const {
+        className,
+        position,
+        destroyOnClose
+      } = props;
+      const {
+        visible,
+        popupStyle,
+        childPos
+      } = reactData;
+      const vSize = computeSize.value;
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refElem,
+        class: ['vxe-context-menu vxe-context-menu--wrapper', position === 'absolute' ? 'is--' + position : 'is--fixed', `cp--${childPos === 'left' ? childPos : 'right'}`, className || '', {
+          [`size--${vSize}`]: vSize,
+          'is--visible': visible
+        }],
+        style: popupStyle
+      }, (destroyOnClose ? visible : true) ? renderMenus() : []);
+    };
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeTopAndLeft, () => {
+      updateLocate();
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, () => {
+      handleVisible();
+    });
+    handleVisible();
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
+      globalEvents.on($xeContextMenu, 'mousedown', handleGlobalMousedownEvent);
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
+      globalEvents.off($xeContextMenu, 'mousedown');
+      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(reactData, context_menu_createReactData());
+      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(internalData, context_menu_createInternalData());
+    });
+    $xeContextMenu.renderVN = renderVN;
+    return $xeContextMenu;
+  },
+  render() {
+    return this.renderVN();
+  }
+}));
+;// CONCATENATED MODULE: ./packages/context-menu/index.ts
+
+
+
+const VxeContextMenu = Object.assign({}, context_menu, {
+  install(app) {
+    app.component(context_menu.name, context_menu);
+  }
+});
+function openMenu(opts, x, y) {
+  dynamicStore.globalContextMenu = {
+    modelValue: true,
+    options: opts.options,
+    className: opts.className,
+    size: opts.size,
+    zIndex: opts.zIndex,
+    x,
+    y,
+    position: 'fixed',
+    destroyOnClose: true,
+    transfer: false,
+    events: opts.events
+  };
+  checkDynamic();
+}
+const ContextMenuController = {
+  open(options) {
+    const opts = Object.assign({
+      x: 0,
+      y: 0
+    }, options);
+    openMenu(opts, opts.x, opts.y);
+  },
+  openByEvent(evnt, options) {
+    evnt.preventDefault();
+    evnt.stopPropagation();
+    const opts = Object.assign({}, options);
+    const x = evnt.clientX;
+    const y = evnt.clientY;
+    openMenu(opts, x, y);
+  },
+  close() {
+    dynamicStore.globalContextMenu = null;
+  }
+};
+dynamicApp.use(VxeContextMenu);
+index_esm_VxeUI.component(context_menu);
+index_esm_VxeUI.contextMenu = ContextMenuController;
+const ContextMenu = VxeContextMenu;
+/* harmony default export */ var packages_context_menu = (VxeContextMenu);
 ;// CONCATENATED MODULE: ./packages/text/src/text.ts
 
 
@@ -33897,10 +34352,17 @@ function parsePageStyle(val) {
     }
   };
 }
+function createCssLink(urls) {
+  if (urls) {
+    return urls.map(url => `<link rel="stylesheet" href="${url}">`).join('\n');
+  }
+  return '';
+}
 function createHtmlPage(opts, printHtml) {
   const {
     pageStyle,
-    customStyle
+    customStyle,
+    styleUrls
   } = opts;
   const pageStyObj = parsePageStyle(pageStyle);
   const headStyOpts = pageStyObj.header;
@@ -33908,7 +34370,7 @@ function createHtmlPage(opts, printHtml) {
   const footStyOpts = pageStyObj.header;
   const pnStyOpts = pageStyObj.pageNumber;
   const isPbMode = opts._pageBreaks || opts.pageBreaks && opts.pageBreaks.length;
-  return ['<!DOCTYPE html><html>', '<head>', '<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">', `<title>${opts.title || ''}</title>`, `<style media="print">@page{size:auto;${isPbMode ? 'margin: 0mm;' : ''}}</style>`, `<style>body{font-size:${pageStyObj.fontSize || '14px'};color:${pageStyObj.color || defaultFontColor};text-align:${pageStyObj.textAlign || 'left'};}</style>`, '<style>', '.vxe-print-slots{display:none;}', '.vxe-print-page-break.align--center{text-align:center;}', '.vxe-print-page-break.align--left{text-align:left;}', '.vxe-print-page-break.align--right{text-align:right;}', '.vxe-print-page-break{break-before:always;page-break-before:always;display:flex;flex-direction:column;height:100vh;overflow:hidden;}', '.vxe-print-page-break--body{display:flex;flex-direction:row;flex-grow:1;overflow:hidden;}', '.vxe-print-page-break--left,.vxe-print-page-break--right{flex-shrink:0;height:100%;}', `.vxe-print-page-break--left{width:${pageStyObj.marginLeft};}`, `.vxe-print-page-break--right{width:${pageStyObj.marginRight};}`, '.vxe-print-page-break--header,.vxe-print-page-break--footer{display:flex;justify-content:center;flex-direction:column;flex-shrink:0;width:100%;}', `.vxe-print-page-break--header{height:${headStyOpts.height || pageStyObj.marginTop};padding:0 ${pageStyObj.marginLeft} 0 ${pageStyObj.marginRight};text-align:${headStyOpts.textAlign || 'left'};}`, `.vxe-print-page-break--header-title{font-size:${titStyOpts.fontSize || '1.6em'};color:${titStyOpts.color || defaultFontColor};text-align:${opts.headerAlign || pnStyOpts.textAlign || 'center'};}`, `.vxe-print-page-break--footer{height:${footStyOpts.height || pageStyObj.marginBottom};padding:0 ${pageStyObj.marginLeft} 0 ${pageStyObj.marginRight};text-align:${footStyOpts.textAlign || 'left'};}`, '.vxe-print-page-break--content{flex-grow:1;overflow:hidden;}', `.vxe-print-page-break--footer-page-number{font-size:${pnStyOpts.fontSize || '1.2em'};color:${pnStyOpts.color || defaultFontColor};text-align:${opts.footerAlign || pnStyOpts.textAlign || 'center'};}`, '</style>', '<style>.vxe-table{white-space:pre;}</style>', `<style>${defaultHtmlStyle}</style>`, isPbMode ? '<style>body{margin:0;}</style>' : '', customStyle ? `<style>${customStyle}</style>` : '', '</head>', '<body>', `${printHtml}`, '</body>', '</html>'].join('');
+  return ['<!DOCTYPE html><html>', '<head>', '<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">', `<title>${opts.title || ''}</title>`, createCssLink(styleUrls), `<style media="print">@page{size:auto;${isPbMode ? 'margin: 0mm;' : ''}}</style>`, `<style>body{font-size:${pageStyObj.fontSize || '14px'};color:${pageStyObj.color || defaultFontColor};text-align:${pageStyObj.textAlign || 'left'};}</style>`, '<style>', '.vxe-print-slots{display:none;}', '.vxe-print-page-break.align--center{text-align:center;}', '.vxe-print-page-break.align--left{text-align:left;}', '.vxe-print-page-break.align--right{text-align:right;}', '.vxe-print-page-break{break-before:always;page-break-before:always;display:flex;flex-direction:column;height:100vh;overflow:hidden;}', '.vxe-print-page-break--body{display:flex;flex-direction:row;flex-grow:1;overflow:hidden;}', '.vxe-print-page-break--left,.vxe-print-page-break--right{flex-shrink:0;height:100%;}', `.vxe-print-page-break--left{width:${pageStyObj.marginLeft};}`, `.vxe-print-page-break--right{width:${pageStyObj.marginRight};}`, '.vxe-print-page-break--header,.vxe-print-page-break--footer{display:flex;justify-content:center;flex-direction:column;flex-shrink:0;width:100%;}', `.vxe-print-page-break--header{height:${headStyOpts.height || pageStyObj.marginTop};padding:0 ${pageStyObj.marginLeft} 0 ${pageStyObj.marginRight};text-align:${headStyOpts.textAlign || 'left'};}`, `.vxe-print-page-break--header-title{font-size:${titStyOpts.fontSize || '1.6em'};color:${titStyOpts.color || defaultFontColor};text-align:${opts.headerAlign || pnStyOpts.textAlign || 'center'};}`, `.vxe-print-page-break--footer{height:${footStyOpts.height || pageStyObj.marginBottom};padding:0 ${pageStyObj.marginLeft} 0 ${pageStyObj.marginRight};text-align:${footStyOpts.textAlign || 'left'};}`, '.vxe-print-page-break--content{flex-grow:1;overflow:hidden;}', `.vxe-print-page-break--footer-page-number{font-size:${pnStyOpts.fontSize || '1.2em'};color:${pnStyOpts.color || defaultFontColor};text-align:${opts.footerAlign || pnStyOpts.textAlign || 'center'};}`, '</style>', '<style>.vxe-table{white-space:pre;}</style>', `<style>${defaultHtmlStyle}</style>`, isPbMode ? '<style>body{margin:0;}</style>' : '', customStyle ? `<style>${customStyle}</style>` : '', '</head>', '<body>', `${printHtml}`, '</body>', '</html>'].join('');
 }
 function handlePrint(opts, printHtml = '') {
   const {
@@ -34157,6 +34619,10 @@ const PrintPageBreak = VxePrintPageBreak;
       type: String,
       default: () => getConfig().print.customStyle
     },
+    styleUrls: {
+      type: Array,
+      default: () => getConfig().print.styleUrls
+    },
     beforeMethod: Function
   },
   emits: [],
@@ -34190,8 +34656,45 @@ const PrintPageBreak = VxePrintPageBreak;
     const printMethods = {
       dispatchEvent,
       print() {
+        const {
+          align,
+          title,
+          headerAlign,
+          footerAlign,
+          showPageNumber,
+          customLayout,
+          pageBreaks,
+          content,
+          headerHtml,
+          footerHtml,
+          leftHtml,
+          rightHtml,
+          showAllPageTitle,
+          pageStyle,
+          customStyle,
+          styleUrls,
+          beforeMethod
+        } = props;
         const elem = refElem.value;
-        return printHtml(Object.assign({}, props, {
+        return printHtml(Object.assign({}, {
+          align,
+          title,
+          headerAlign,
+          footerAlign,
+          showPageNumber,
+          customLayout,
+          pageBreaks,
+          content,
+          headerHtml,
+          footerHtml,
+          leftHtml,
+          rightHtml,
+          showAllPageTitle,
+          pageStyle,
+          customStyle,
+          styleUrls,
+          beforeMethod
+        }, {
           _pageBreaks: !!reactData.staticPageBreaks.length,
           html: trimHtml(elem ? elem.outerHTML : '') || props.html || props.content || ''
         }));
@@ -41021,6 +41524,7 @@ function clearColAnimate(elem, clss) {
 
 
 
+
 /**
  * 生成节点的唯一主键
  */
@@ -41055,6 +41559,24 @@ function tree_createInternalData() {
     // hpTimeout: undefined
   };
 }
+function tree_createReactData() {
+  return {
+    parentHeight: 0,
+    customHeight: 0,
+    customMinHeight: 0,
+    customMaxHeight: 0,
+    currentNode: null,
+    scrollYLoad: false,
+    bodyHeight: 0,
+    topSpaceHeight: 0,
+    selectRadioKey: null,
+    treeList: [],
+    updateExpandedFlag: 1,
+    updateCheckboxFlag: 1,
+    dragNode: null,
+    dragTipText: ''
+  };
+}
 // let crossTreeDragNodeObj: {
 //   $oldTree: VxeTreeConstructor & VxeTreePrivateMethods
 //   $newTree: (VxeTreeConstructor & VxeTreePrivateMethods) | null
@@ -41153,6 +41675,7 @@ function tree_createInternalData() {
       default: () => getConfig().tree.drag
     },
     dragConfig: Object,
+    menuConfig: Object,
     showIcon: {
       type: Boolean,
       default: true
@@ -41177,7 +41700,7 @@ function tree_createInternalData() {
     },
     virtualYConfig: Object
   },
-  emits: ['update:modelValue', 'update:checkNodeKey', 'update:checkNodeKeys', 'node-click', 'node-dblclick', 'current-change', 'radio-change', 'checkbox-change', 'load-success', 'load-error', 'scroll', 'node-dragstart', 'node-dragover', 'node-dragend'],
+  emits: ['update:modelValue', 'update:checkNodeKey', 'update:checkNodeKeys', 'node-click', 'node-dblclick', 'current-change', 'radio-change', 'checkbox-change', 'load-success', 'load-error', 'scroll', 'node-dragstart', 'node-dragover', 'node-dragend', 'node-expand', 'node-menu', 'menu-click'],
   setup(props, context) {
     const {
       emit,
@@ -41195,23 +41718,8 @@ function tree_createInternalData() {
     const refDragNodeLineElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refDragTipElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const crossTreeDragNodeInfo = getCrossTreeDragNodeInfo();
-    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({
-      parentHeight: 0,
-      customHeight: 0,
-      customMinHeight: 0,
-      customMaxHeight: 0,
-      currentNode: null,
-      scrollYLoad: false,
-      bodyHeight: 0,
-      topSpaceHeight: 0,
-      selectRadioKey: enNodeValue(props.checkNodeKey),
-      treeList: [],
-      updateExpandedFlag: 1,
-      updateCheckboxFlag: 1,
-      dragNode: null,
-      dragTipText: ''
-    });
     const internalData = tree_createInternalData();
+    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)(tree_createReactData());
     const refMaps = {
       refElem
     };
@@ -41279,6 +41787,9 @@ function tree_createInternalData() {
     const computeDragOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, getConfig().tree.dragConfig, props.dragConfig);
     });
+    const computeMenuOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, getConfig().tree.menuConfig, props.menuConfig);
+    });
     const computeTreeStyle = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
         customHeight,
@@ -42048,6 +42559,45 @@ function tree_createInternalData() {
         node
       }, evnt);
     };
+    const handleContextmenuEvent = (evnt, node) => {
+      const {
+        menuConfig
+      } = props;
+      const isRowCurrent = computeIsRowCurrent.value;
+      const menuOpts = computeMenuOpts.value;
+      if (menuConfig ? isEnableConf(menuOpts) : menuOpts.enabled) {
+        const {
+          options,
+          visibleMethod
+        } = menuOpts;
+        if (!visibleMethod || visibleMethod({
+          $tree: $xeTree,
+          options,
+          node
+        })) {
+          if (isRowCurrent) {
+            changeCurrentEvent(evnt, node);
+          } else if (reactData.currentNode) {
+            reactData.currentNode = null;
+          }
+          if (index_esm_VxeUI.contextMenu) {
+            index_esm_VxeUI.contextMenu.openByEvent(evnt, {
+              options,
+              events: {
+                optionClick(eventParams) {
+                  dispatchEvent('menu-click', Object.assign({
+                    node
+                  }, eventParams), eventParams.$event);
+                }
+              }
+            });
+          }
+        }
+      }
+      dispatchEvent('node-menu', {
+        node
+      }, evnt);
+    };
     const handleAsyncTreeExpandChilds = node => {
       const checkboxOpts = computeCheckboxOpts.value;
       const {
@@ -43670,6 +44220,9 @@ function tree_createInternalData() {
         },
         onDblclick(evnt) {
           handleNodeDblclickEvent(evnt, node);
+        },
+        onContextmenu(evnt) {
+          handleContextmenuEvent(evnt, node);
         }
       };
       // 拖拽行事件
@@ -43846,7 +44399,7 @@ function tree_createInternalData() {
       /**
        * 加载中
        */
-      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(src_loading, {
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_loading, {
         class: 'vxe-tree--loading',
         modelValue: loading,
         icon: loadingOpts.icon,
@@ -43899,7 +44452,8 @@ function tree_createInternalData() {
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
       const {
         transform,
-        drag
+        drag,
+        menuConfig
       } = props;
       const dragOpts = computeDragOpts.value;
       if (drag && !transform) {
@@ -43908,6 +44462,10 @@ function tree_createInternalData() {
       if (dragOpts.isCrossTreeDrag) {
         errLog('vxe.error.notProp', ['drag-config.isCrossTreeDrag']);
       }
+      const VxeUIContextMenu = index_esm_VxeUI.getComponent('VxeContextMenu');
+      if (menuConfig && !VxeUIContextMenu) {
+        errLog('vxe.error.reqComp', ['vxe-context-menu']);
+      }
       if (props.autoResize) {
         const el = refElem.value;
         const parentEl = getParentElem();
@@ -43926,7 +44484,7 @@ function tree_createInternalData() {
       }
       globalEvents.on($xeTree, 'resize', handleGlobalResizeEvent);
     });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onUnmounted)(() => {
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
       const {
         resizeObserver
       } = internalData;
@@ -43934,10 +44492,13 @@ function tree_createInternalData() {
         resizeObserver.disconnect();
       }
       globalEvents.off($xeTree, 'resize');
+      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(reactData, tree_createReactData());
       external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(internalData, tree_createInternalData());
     });
+    reactData.selectRadioKey = enNodeValue(props.checkNodeKey);
     loadData(props.data || []);
     $xeTree.renderVN = renderVN;
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.provide)('$xeTree', $xeTree);
     return $xeTree;
   },
   render() {
@@ -47252,6 +47813,7 @@ const Watermark = VxeWatermark;
 
 
 
+
 
 
 const {
@@ -47260,7 +47822,7 @@ const {
   setTheme: components_setTheme,
   setConfig: components_setConfig
 } = index_esm_VxeUI;
-const components_components = [packages_alert, packages_anchor, packages_anchor_link, packages_avatar, packages_backtop, packages_badge, packages_breadcrumb, packages_breadcrumb_item, packages_button, packages_button_group, packages_calendar, packages_card, packages_carousel, packages_carousel_item, packages_cascader, packages_checkbox, checkbox_button, checkbox_group, packages_col, packages_collapse, packages_collapse_pane, packages_color_picker, packages_countdown, packages_date_panel, packages_date_picker, packages_date_range_picker, packages_drawer, packages_empty, packages_form, form_gather, packages_form_group, packages_form_item, packages_icon, packages_icon_picker, packages_image, image_group, image_preview, packages_input, packages_layout_aside, packages_layout_body, packages_layout_container, packages_layout_footer, packages_layout_header, packages_link, packages_list, packages_loading, packages_menu, packages_modal, packages_notice_bar, packages_number_input, packages_optgroup, packages_option, packages_pager, packages_password_input, print_page_break, packages_print, packages_pulldown, packages_radio, radio_button, radio_group, packages_rate, packages_result, packages_row, packages_segmented, packages_select, packages_splitter, packages_splitter_panel, split, split_pane, packages_slider, packages_steps, packages_switch, packages_tab_pane, packages_table_select, packages_tabs, packages_tag, packages_text_ellipsis, packages_text, packages_textarea, packages_timeline, packages_timeline_item, packages_tip, packages_tooltip, packages_tour, packages_tree, packages_tree_select, packages_upload, packages_watermark];
+const components_components = [packages_alert, packages_anchor, packages_anchor_link, packages_avatar, packages_backtop, packages_badge, packages_breadcrumb, packages_breadcrumb_item, packages_button, packages_button_group, packages_calendar, packages_card, packages_carousel, packages_carousel_item, packages_cascader, packages_checkbox, checkbox_button, checkbox_group, packages_col, packages_collapse, packages_collapse_pane, packages_color_picker, packages_context_menu, packages_countdown, packages_date_panel, packages_date_picker, packages_date_range_picker, packages_drawer, packages_empty, packages_form, form_gather, packages_form_group, packages_form_item, packages_icon, packages_icon_picker, packages_image, image_group, image_preview, packages_input, packages_layout_aside, packages_layout_body, packages_layout_container, packages_layout_footer, packages_layout_header, packages_link, packages_list, packages_loading, packages_menu, packages_modal, packages_notice_bar, packages_number_input, packages_optgroup, packages_option, packages_pager, packages_password_input, print_page_break, packages_print, packages_pulldown, packages_radio, radio_button, radio_group, packages_rate, packages_result, packages_row, packages_segmented, packages_select, packages_splitter, packages_splitter_panel, split, split_pane, packages_slider, packages_steps, packages_switch, packages_tab_pane, packages_table_select, packages_tabs, packages_tag, packages_text_ellipsis, packages_text, packages_textarea, packages_timeline, packages_timeline_item, packages_tip, packages_tooltip, packages_tour, packages_tree, packages_tree_select, packages_upload, packages_watermark];
 function install(app, options) {
   components_setConfig(options);
   components_components.forEach(component => app.use(component));
@@ -47366,6 +47928,7 @@ const readFile = readLocalFile;
 
 
 
+
 
 
 ;// CONCATENATED MODULE: ./index.ts