vxe-pc-ui 4.16.9 → 4.16.11

package/dist/all.esm.js

@@ -81,7 +81,7 @@ function checkDynamic() {
 }
 
 const { log } = VxeUI;
-const uiVersion = `ui v${"4.16.9"}`;
+const uiVersion = `ui v${"4.16.11"}`;
 function createComponentLog(name) {
     const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -95,7 +95,7 @@ function createComponentLog(name) {
 const warnLog$h = log.create('warn', uiVersion);
 log.create('error', uiVersion);
 
-const version = "4.16.9";
+const version = "4.16.11";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -866,7 +866,7 @@ var zhCN = {
             expError: '导出失败',
             expFilename: '导出_{0}',
             expOriginFilename: '导出_源_{0}',
-            customTitle: '列设置',
+            customTitle: '个性化设置',
             customAll: '全部',
             customConfirm: '确认',
             customClose: '关闭',
@@ -950,7 +950,7 @@ var zhCN = {
             search: '搜索'
         },
         custom: {
-            cstmTitle: '列设置',
+            cstmTitle: '个性化设置',
             cstmRestore: '恢复默认',
             cstmCancel: '取消',
             cstmConfirm: '确定',
@@ -1076,7 +1076,7 @@ var zhCN = {
             refresh: '刷新',
             zoomIn: '全屏',
             zoomOut: '还原',
-            custom: '列设置',
+            custom: '个性化设置',
             customAll: '全部',
             customConfirm: '确认',
             customRestore: '重置',
@@ -27918,22 +27918,20 @@ var VxeLayoutAsideComponent = defineVxeComponent({
         const computeCollapseOpts = computed(() => {
             return Object.assign({}, getConfig$3().layoutAside.collapseConfig, props.collapseConfig);
         });
-        const computeWrapperWidth = computed(() => {
-            const { width, collapsed, collapseWidth } = props;
-            if (collapsed) {
-                if (collapseWidth) {
-                    return toCssUnit(collapseWidth);
-                }
+        const computeVarStyle = computed(() => {
+            const { width, collapseWidth } = props;
+            const stys = {};
+            if (collapseWidth) {
+                stys['--vxe-ui-layout-aside-collapse-width'] = toCssUnit(collapseWidth);
             }
-            else {
-                if (width) {
-                    return toCssUnit(width);
-                }
+            if (width) {
+                stys['--vxe-ui-layout-aside-default-width'] = toCssUnit(width);
             }
-            return '';
+            return stys;
         });
         const computeMaps = {
-            computeSize
+            computeSize,
+            computeVarStyle
         };
         const $xeLayoutAside = {
             xID,
@@ -27952,8 +27950,8 @@ var VxeLayoutAsideComponent = defineVxeComponent({
         const layoutAsidePrivateMethods = {};
         Object.assign($xeLayoutAside, layoutAsideMethods, layoutAsidePrivateMethods);
         const renderVN = () => {
-            const { width, collapsed, loading, padding } = props;
-            const wrapperWidth = computeWrapperWidth.value;
+            const { collapsed, loading, padding } = props;
+            const varStyle = computeVarStyle.value;
             const vSize = computeSize.value;
             const collapseOpts = computeCollapseOpts.value;
             const defaultSlot = slots.default;
@@ -27963,15 +27961,10 @@ var VxeLayoutAsideComponent = defineVxeComponent({
                         [`size--${vSize}`]: vSize,
                         'is--animat': collapseOpts.animation !== false,
                         'is--padding': padding,
-                        'is--default-width': !width,
                         'is--collapse': collapsed,
                         'is--loading': loading
                     }],
-                style: wrapperWidth
-                    ? {
-                        width: wrapperWidth
-                    }
-                    : null
+                style: varStyle
             }, [
                 h('div', {
                     class: 'vxe-layout-aside--inner'
@@ -28451,6 +28444,10 @@ const { errLog: errLog$9 } = createComponentLog('menu');
 const { menus: menus$1, getConfig: getConfig$1, getIcon: getIcon$1 } = VxeUI;
 function createInternalData$8() {
     return {
+        lastActiveTime: 0,
+        menuInitMaps: {},
+        menuCacheMaps: {},
+        menuKeyMaps: {},
         menuEffectMaps: {}
     };
 }
@@ -28471,10 +28468,19 @@ var VxeMenuComponent = defineVxeComponent({
     props: {
         modelValue: [String, Number],
         expandAll: Boolean,
+        expandKeys: Array,
         accordion: {
             type: Boolean,
             default: () => getConfig$1().menu.accordion
         },
+        border: {
+            type: [Boolean, String],
+            default: () => getConfig$1().menu.border
+        },
+        optionProps: {
+            type: Object,
+            default: () => getConfig$1().menu.optionProps
+        },
         collapsed: {
             type: Boolean,
             default: null
@@ -28512,6 +28518,36 @@ var VxeMenuComponent = defineVxeComponent({
         const computeMenuOpts = computed(() => {
             return Object.assign({}, getConfig$1().menu.menuConfig, props.menuConfig);
         });
+        const computePropsOpts = computed(() => {
+            return Object.assign({}, getConfig$1().menu.optionProps, props.optionProps);
+        });
+        const computeTitleField = computed(() => {
+            const propsOpts = computePropsOpts.value;
+            return propsOpts.title || 'title';
+        });
+        const computeKeyField = computed(() => {
+            const propsOpts = computePropsOpts.value;
+            return propsOpts.name || 'name';
+        });
+        const computeChildrenField = computed(() => {
+            const propsOpts = computePropsOpts.value;
+            return propsOpts.children || 'children';
+        });
+        const computeLinkUrlField = computed(() => {
+            const propsOpts = computePropsOpts.value;
+            return propsOpts.linkUrl || 'href';
+        });
+        const computeRouterLinkField = computed(() => {
+            const propsOpts = computePropsOpts.value;
+            return propsOpts.routerLink || 'routerLink';
+        });
+        const computeCurrBorder = computed(() => {
+            const { border } = props;
+            if (border) {
+                return border === true ? 'first-group' : border;
+            }
+            return '';
+        });
         const computeIsCollapsed = computed(() => {
             const { collapsed } = props;
             if (XEUtils.isBoolean(collapsed)) {
@@ -28522,19 +28558,13 @@ var VxeMenuComponent = defineVxeComponent({
             }
             return false;
         });
-        const computeCollapseWidth = computed(() => {
-            let collapseWidth = '';
-            if ($xeLayoutAside) {
-                collapseWidth = $xeLayoutAside.props.collapseWidth || '';
-            }
-            return collapseWidth;
-        });
-        const computeCollapseEnterWidth = computed(() => {
-            let width = '';
+        const computeVarStyle = computed(() => {
             if ($xeLayoutAside) {
-                width = $xeLayoutAside.props.width || '';
+                const { computeVarStyle: asideComputeVarStyle } = $xeLayoutAside.getComputeMaps();
+                const asideVarStyle = asideComputeVarStyle.value;
+                return asideVarStyle;
             }
-            return width;
+            return {};
         });
         const computeMaps = {
             computeSize
@@ -28544,6 +28574,7 @@ var VxeMenuComponent = defineVxeComponent({
             props,
             context,
             reactData,
+            internalData,
             getRefMaps: () => refMaps,
             getComputeMaps: () => computeMaps
         };
@@ -28557,12 +28588,14 @@ var VxeMenuComponent = defineVxeComponent({
         };
         const updateActiveMenu = (isDefExpand) => {
             const { activeName } = reactData;
-            XEUtils.eachTree(reactData.menuList, (item, index, items, path, parent, nodes) => {
+            const { menuInitMaps } = internalData;
+            XEUtils.eachTree(reactData.menuList, (item, index, items, path, parentItem, nodes) => {
                 if (item.itemKey === activeName) {
                     nodes.forEach(obj => {
                         obj.isActive = true;
                         {
                             obj.isExpand = true;
+                            menuInitMaps[obj.itemId] = true;
                         }
                     });
                     item.isExactActive = true;
@@ -28574,20 +28607,67 @@ var VxeMenuComponent = defineVxeComponent({
             }, { children: 'childList' });
         };
         const updateMenuConfig = () => {
-            const { options, expandAll } = props;
-            reactData.menuList = XEUtils.mapTree(options, (item, index, items, path, parent) => {
-                const objItem = Object.assign(Object.assign({}, item), { parentKey: parent ? (parent.name || path.slice(0, path.length - 1).join(',')) : '', level: path.length, itemId: ++nemuUniqueKey, itemKey: item.name || path.join(','), isExactActive: false, isActive: false, isExpand: XEUtils.isBoolean(item.expanded) ? item.expanded : !!expandAll, hasChild: item.children && item.children.length > 0 });
+            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.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.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$9('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) {
                 nextTick(() => {
-                    const { isEnterCollapse } = reactData;
                     const isCollapsed = computeIsCollapsed.value;
-                    const collapseEnterWidth = computeCollapseEnterWidth.value;
-                    const collapseWidth = computeCollapseWidth.value;
                     const el = refElem.value;
                     if (el) {
                         const clientRect = el.getBoundingClientRect();
@@ -28597,7 +28677,6 @@ var VxeMenuComponent = defineVxeComponent({
                                 top: toCssUnit(clientRect.top),
                                 left: toCssUnit(clientRect.left),
                                 height: toCssUnit(parentNode.clientHeight),
-                                width: isEnterCollapse ? (collapseEnterWidth ? toCssUnit(collapseEnterWidth) : '') : (collapseWidth ? toCssUnit(collapseWidth) : ''),
                                 zIndex: reactData.collapseZindex
                             }
                             : {};
@@ -28613,12 +28692,6 @@ var VxeMenuComponent = defineVxeComponent({
                 if (isCollapsed) {
                     if (!initialized) {
                         reactData.initialized = true;
-                        nextTick(() => {
-                            const collapseEl = refCollapseElem.value;
-                            if (collapseEl) {
-                                document.body.appendChild(collapseEl);
-                            }
-                        });
                     }
                 }
                 reactData.isEnterCollapse = false;
@@ -28628,7 +28701,7 @@ var VxeMenuComponent = defineVxeComponent({
         };
         const handleClickIconCollapse = (evnt, item, itemList) => {
             const { accordion } = props;
-            const { menuEffectMaps } = internalData;
+            const { menuEffectMaps, menuInitMaps } = internalData;
             const { itemId, hasChild, isExpand } = item;
             const isCollapsed = computeIsCollapsed.value;
             const expanded = !isExpand;
@@ -28646,6 +28719,7 @@ var VxeMenuComponent = defineVxeComponent({
                     });
                 }
                 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}"]`);
@@ -28683,7 +28757,7 @@ var VxeMenuComponent = defineVxeComponent({
             const menuOpts = computeMenuOpts.value;
             if (menuConfig ? isEnableConf(menuOpts) : menuOpts.enabled) {
                 const { options, visibleMethod } = menuOpts;
-                if (!visibleMethod || visibleMethod({ $menu: $xeMenu, options, currentMenu: item })) {
+                if (!visibleMethod || visibleMethod({ $menu: $xeMenu, options, currentMenu: item, currentOption: item.itemConf })) {
                     if (VxeUI.contextMenu) {
                         VxeUI.contextMenu.openByEvent(evnt, {
                             options,
@@ -28692,7 +28766,7 @@ var VxeMenuComponent = defineVxeComponent({
                                     const { option } = eventParams;
                                     const gMenuOpts = menus$1.get(option.code);
                                     const mmMethod = gMenuOpts ? gMenuOpts.menuMenuMethod : null;
-                                    const params = { menu: option, currentMenu: item, $event: evnt, $menu: $xeMenu };
+                                    const params = { menu: option, currentMenu: item, currentOption: item.itemConf, $event: evnt, $menu: $xeMenu };
                                     if (mmMethod) {
                                         mmMethod(params, evnt);
                                     }
@@ -28706,10 +28780,11 @@ var VxeMenuComponent = defineVxeComponent({
             dispatchEvent('option-menu', { currentMenu: item }, evnt);
         };
         const handleClickMenu = (evnt, item, itemList) => {
-            const { itemKey, routerLink, hasChild } = item;
-            if (routerLink) {
+            const { itemKey, linkUrl, routerLink, hasChild } = item;
+            if (linkUrl || routerLink) {
                 emitModel(itemKey);
-                handleMenuMouseleave();
+                reactData.isEnterCollapse = false;
+                internalData.lastActiveTime = Date.now();
             }
             else {
                 if (hasChild) {
@@ -28717,36 +28792,26 @@ var VxeMenuComponent = defineVxeComponent({
                 }
                 else {
                     emitModel(itemKey);
-                    handleMenuMouseleave();
+                    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 { collapseStyle } = reactData;
-            const collapseEnterWidth = computeCollapseEnterWidth.value;
-            reactData.collapseStyle = Object.assign({}, collapseStyle, {
-                width: collapseEnterWidth ? toCssUnit(collapseEnterWidth) : ''
-            });
-            reactData.isEnterCollapse = true;
-        };
-        const handleMenuMouseover = () => {
-            const { isEnterCollapse } = reactData;
-            if (!isEnterCollapse) {
-                handleMenuMouseenter();
+            const { lastActiveTime } = internalData;
+            if (lastActiveTime < Date.now() - 500) {
+                reactData.isEnterCollapse = true;
             }
         };
         const handleMenuMouseleave = () => {
-            const { collapseStyle } = reactData;
-            const el = refElem.value;
-            reactData.collapseStyle = Object.assign({}, collapseStyle, {
-                width: el ? toCssUnit(el.offsetWidth) : ''
-            });
             reactData.isEnterCollapse = false;
         };
         const callSlot = (slotFunc, params) => {
@@ -28763,8 +28828,69 @@ var VxeMenuComponent = defineVxeComponent({
         const dispatchEvent = (type, params, evnt) => {
             emit(type, 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) {
+                scrollToView(nemuEl);
+                return true;
+            }
+            return false;
+        };
         const menuMethods = {
-            dispatchEvent
+            dispatchEvent,
+            setExpandByMenuKey(menuKeys, expanded) {
+                const { menuKeyMaps, menuInitMaps } = internalData;
+                if (menuKeys) {
+                    if (!XEUtils.isArray(menuKeys)) {
+                        menuKeys = [menuKeys];
+                    }
+                    menuKeys.forEach(mKey => {
+                        const menuItem = menuKeyMaps[mKey];
+                        if (menuItem) {
+                            if (expanded) {
+                                menuInitMaps[menuItem.itemId] = true;
+                            }
+                            menuItem.isExpand = !!expanded;
+                        }
+                    });
+                }
+                return nextTick();
+            },
+            clearAllExpandMenu() {
+                const { menuList } = reactData;
+                XEUtils.eachTree(menuList, (item) => {
+                    item.isExpand = false;
+                }, { children: 'childList' });
+                internalData.menuInitMaps = {};
+                return nextTick();
+            },
+            scrollToMenuKey(menuKey) {
+                const { menuKeyMaps } = internalData;
+                const menuItem = menuKeyMaps[menuKey];
+                if (!menuItem) {
+                    return nextTick();
+                }
+                const { itemId } = menuItem;
+                if (handleScrollToView(itemId)) {
+                    return nextTick();
+                }
+                return nextTick().then(() => {
+                    handleScrollToView(itemId);
+                });
+            },
+            scrollToActiveMenu() {
+                const { activeName } = reactData;
+                if (activeName) {
+                    return $xeMenu.scrollToMenuKey(activeName);
+                }
+                return nextTick().then(() => {
+                    const { activeName } = reactData;
+                    if (activeName) {
+                        return $xeMenu.scrollToMenuKey(activeName);
+                    }
+                });
+            }
         };
         const menuPrivateMethods = {};
         Object.assign($xeMenu, menuMethods, menuPrivateMethods);
@@ -28778,9 +28904,9 @@ var VxeMenuComponent = defineVxeComponent({
             const isCollapsed = computeIsCollapsed.value;
             const params = {
                 currentMenu: item,
-                collapsed: isCollapsed,
-                // 已废弃
-                option: item
+                currentOption: item.itemConf,
+                option: item.itemConf,
+                collapsed: isCollapsed
             };
             return [
                 optionSlot
@@ -28817,89 +28943,79 @@ var VxeMenuComponent = defineVxeComponent({
             ];
         };
         const renderDefaultChildren = (item, itemList) => {
-            const { itemId, itemKey, level, hasChild, isActive, isExactActive, isExpand, routerLink, childList } = item;
+            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 (!permission.checkVisible(item.permissionCode)) {
                     return renderEmptyElement($xeMenu);
                 }
             }
+            const isExpandChild = (!isCollapsed || isEnterCollapse) && isExpand;
+            const linkOns = {
+                onContextmenu(evnt) {
+                    handleContextmenuEvent(evnt, item);
+                },
+                onClick(evnt) {
+                    handleClickMenu(evnt, item, itemList);
+                }
+            };
             return 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': (!isCollapsed || isEnterCollapse) && isExpand
+                        'is--expand': isExpandChild
                     }],
                 'data-menu-id': itemId
             }, [
-                routerLink
-                    ? h(resolveComponent('router-link'), {
-                        class: 'vxe-menu--item-link',
-                        to: routerLink,
-                        onContextmenu(evnt) {
-                            handleContextmenuEvent(evnt, item);
-                        },
-                        onClick(evnt) {
-                            handleClickMenu(evnt, item, itemList);
-                        }
-                    }, {
-                        default: () => renderMenuTitle(item, itemList)
-                    })
-                    : h('div', {
-                        class: 'vxe-menu--item-link',
-                        onContextmenu(evnt) {
-                            handleContextmenuEvent(evnt, item);
-                        },
-                        onClick(evnt) {
-                            handleClickMenu(evnt, item, itemList);
-                        }
-                    }, renderMenuTitle(item, itemList)),
+                linkUrl
+                    ? h('a', Object.assign({ class: 'vxe-menu--item-link is--link', href: linkUrl, target: linkTarget }, linkOns), renderMenuTitle(item, itemList))
+                    : (routerLink
+                        ? h(resolveComponent('router-link'), Object.assign({ class: 'vxe-menu--item-link is--router', to: routerLink, target: linkTarget }, linkOns), {
+                            default: () => renderMenuTitle(item, itemList)
+                        })
+                        : h('div', Object.assign({ class: 'vxe-menu--item-link is--default' }, linkOns), renderMenuTitle(item, itemList))),
                 hasChild
                     ? h('div', {
                         class: 'vxe-menu--item-group'
-                    }, childList.map(child => renderDefaultChildren(child, childList)))
+                    }, isExpandChild || menuInitMaps[itemId] ? childList.map(child => renderDefaultChildren(child, childList)) : [])
                     : renderEmptyElement($xeMenu)
             ]);
         };
         const renderCollapseChildren = (item, itemList) => {
-            const { itemId, itemKey, level, hasChild, isActive, isExactActive, routerLink, childList } = item;
+            const { itemId, itemKey, level, hasChild, isActive, isExactActive, routerLink, linkUrl, linkTarget, childList } = item;
             if (item.permissionCode) {
                 if (!permission.checkVisible(item.permissionCode)) {
                     return renderEmptyElement($xeMenu);
                 }
             }
+            const linkOns = {
+                onContextmenu(evnt) {
+                    handleContextmenuEvent(evnt, item);
+                },
+                onClick(evnt) {
+                    handleClickMenu(evnt, item, itemList);
+                }
+            };
             return 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
             }, [
-                routerLink
-                    ? h(resolveComponent('router-link'), {
-                        class: 'vxe-menu--item-link',
-                        to: routerLink,
-                        onContextmenu(evnt) {
-                            handleContextmenuEvent(evnt, item);
-                        },
-                        onClick(evnt) {
-                            handleClickMenu(evnt, item, itemList);
-                        }
-                    }, {
-                        default: () => renderMenuTitle(item, itemList)
-                    })
-                    : h('div', {
-                        class: 'vxe-menu--item-link',
-                        onContextmenu(evnt) {
-                            handleContextmenuEvent(evnt, item);
-                        },
-                        onClick(evnt) {
-                            handleClickMenu(evnt, item, itemList);
-                        }
-                    }, renderMenuTitle(item, itemList)),
+                linkUrl
+                    ? h('a', Object.assign({ class: 'vxe-menu--item-link is--link', href: linkUrl, target: linkTarget }, linkOns), renderMenuTitle(item, itemList))
+                    : (routerLink
+                        ? h(resolveComponent('router-link'), Object.assign({ class: 'vxe-menu--item-link is--router', to: routerLink, target: linkTarget }, linkOns), {
+                            default: () => renderMenuTitle(item, itemList)
+                        })
+                        : h('div', Object.assign({ class: 'vxe-menu--item-link is--default' }, linkOns), renderMenuTitle(item, itemList))),
                 hasChild
                     ? h('div', {
                         class: 'vxe-menu--item-group'
@@ -28912,39 +29028,67 @@ var VxeMenuComponent = defineVxeComponent({
             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,
-                    onMouseover: handleMenuMouseover,
                     onMouseleave: handleMenuMouseleave
                 };
             }
+            const stParams = { collapsed: isCollapsed };
             return h('div', {
                 ref: refElem,
                 class: ['vxe-menu', {
+                        [`border--${currBorder}`]: currBorder,
                         [`size--${vSize}`]: vSize,
                         'is--collapsed': isCollapsed,
                         'is--loading': loading
                     }]
             }, [
+                headerSlot
+                    ? h('div', {
+                        class: 'vxe-menu--header'
+                    }, headerSlot(stParams))
+                    : renderEmptyElement($xeMenu),
                 h('div', {
-                    class: 'vxe-menu--item-list'
+                    class: 'vxe-menu--body'
                 }, menuList.map(child => isCollapsed ? renderCollapseChildren(child, menuList) : renderDefaultChildren(child, menuList))),
-                initialized
-                    ? h('div', Object.assign({ ref: refCollapseElem, class: ['vxe-menu--collapse-wrapper', {
+                footerSlot
+                    ? h('div', {
+                        class: 'vxe-menu--footer'
+                    }, footerSlot(stParams))
+                    : renderEmptyElement($xeMenu),
+                h(Teleport, {
+                    to: 'body',
+                    disabled: !initialized
+                }, [
+                    h('div', Object.assign({ ref: refCollapseElem, class: ['vxe-menu--collapse-wrapper', {
                                 [`size--${vSize}`]: vSize,
                                 'is--collapsed': isCollapsed,
                                 'is--enter': isEnterCollapse,
                                 'is--loading': loading
-                            }], style: collapseStyle }, ons), [
-                        isCollapsed
-                            ? h('div', {
-                                class: 'vxe-menu--item-list'
-                            }, menuList.map(child => renderDefaultChildren(child, menuList)))
-                            : renderEmptyElement($xeMenu)
-                    ])
-                    : renderEmptyElement($xeMenu),
+                            }], style: Object.assign({}, varStyle, collapseStyle) }, ons), isCollapsed
+                        ? [
+                            headerSlot
+                                ? h('div', {
+                                    class: 'vxe-menu--header'
+                                }, headerSlot(stParams))
+                                : renderEmptyElement($xeMenu),
+                            h('div', {
+                                class: 'vxe-menu--body'
+                            }, menuList.map(child => renderDefaultChildren(child, menuList))),
+                            footerSlot
+                                ? h('div', {
+                                    class: 'vxe-menu--footer'
+                                }, footerSlot(stParams))
+                                : renderEmptyElement($xeMenu)
+                        ]
+                        : [])
+                ]),
                 /**
                  * 加载中
                  */
@@ -28984,13 +29128,6 @@ var VxeMenuComponent = defineVxeComponent({
             updateCollapseStyle();
         });
         onBeforeUnmount(() => {
-            const collapseEl = refCollapseElem.value;
-            if (collapseEl) {
-                const parentNode = collapseEl.parentNode;
-                if (parentNode) {
-                    parentNode.removeChild(collapseEl);
-                }
-            }
             globalEvents.off($xeMenu, 'resize');
             XEUtils.assign(reactData, createReactData$9());
             XEUtils.assign(internalData, createInternalData$8());
@@ -29333,13 +29470,13 @@ var VxeModalComponent = defineVxeComponent({
                 let posTop = '';
                 let posLeft = '';
                 if (left && !leftCenter) {
-                    posLeft = isNaN(left) ? left : `${left}px`;
+                    posLeft = toCssUnit(left);
                 }
                 else {
                     posLeft = `${Math.max(marginSize, clientVisibleWidth / 2 - boxElem.offsetWidth / 2)}px`;
                 }
                 if (top && !topCenter) {
-                    posTop = isNaN(top) ? top : `${top}px`;
+                    posTop = toCssUnit(top);
                 }
                 else {
                     posTop = `${Math.max(marginSize, clientVisibleHeight / 2 - boxElem.offsetHeight / 2)}px`;
@@ -44252,7 +44389,7 @@ var VxeTreeSelectComponent = defineVxeComponent({
             });
         });
         const computePropsOpts = computed(() => {
-            return props.optionProps || {};
+            return Object.assign({}, getConfig$3().treeSelect.optionProps, props.optionProps);
         });
         const computeNodeKeyField = computed(() => {
             const treeOpts = computeTreeOpts.value;