vxe-pc-ui 3.16.6 → 3.16.8

package/es/menu/src/menu.js

@@ -8,6 +8,23 @@ import { createComponentLog } from '../../ui/src/log';
 import VxeLoadingComponent from '../../loading';
 const { errLog } = createComponentLog('menu');
 const { menus, getConfig, getIcon } = VxeUI;
+function createInternalData() {
+    return {
+        menuEffectMaps: {}
+    };
+}
+function createReactData() {
+    return {
+        initialized: false,
+        isEnterCollapse: false,
+        collapseStyle: {},
+        collapseZindex: 0,
+        activeName: '',
+        menuList: [],
+        itemHeight: 1
+    };
+}
+let nemuUniqueKey = 100000000;
 export default {
     name: 'VxeMenu',
     mixins: [
@@ -43,19 +60,8 @@ export default {
         }
     },
     data() {
-        const reactData = {
-            initialized: false,
-            isEnterCollapse: false,
-            collapseStyle: {},
-            collapseZindex: 0,
-            activeName: null,
-            menuList: [],
-            itemHeight: 1
-        };
-        return {
-            xID: XEUtils.uniqueId(),
-            reactData
-        };
+        const reactData = createReactData();
+        return Object.assign(Object.assign({}, {}), { xID: XEUtils.uniqueId(), reactData });
     },
     computed: Object.assign(Object.assign({}, {}), { computeMenuOpts() {
             const $xeMenu = this;
@@ -162,7 +168,7 @@ export default {
             const reactData = $xeMenu.reactData;
             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, 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 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 });
                 return objItem;
             }, { children: 'children', mapChildren: 'childList' });
         },
@@ -221,11 +227,18 @@ export default {
         handleClickIconCollapse(evnt, item, itemList) {
             const $xeMenu = this;
             const props = $xeMenu;
+            const internalData = $xeMenu.internalData;
             const { accordion } = props;
-            const { hasChild, isExpand } = item;
+            const { menuEffectMaps } = internalData;
+            const { itemId, hasChild, isExpand } = item;
+            const isCollapsed = $xeMenu.computeIsCollapsed;
+            const expanded = !isExpand;
             if (hasChild) {
                 evnt.stopPropagation();
                 evnt.preventDefault();
+                if (menuEffectMaps[itemId]) {
+                    clearTimeout(menuEffectMaps[itemId]);
+                }
                 if (accordion) {
                     itemList.forEach(obj => {
                         if (obj !== item) {
@@ -233,7 +246,33 @@ export default {
                         }
                     });
                 }
-                item.isExpand = !isExpand;
+                item.isExpand = expanded;
+                const wrapperEl = isCollapsed ? $xeMenu.$refs.refCollapseElem : $xeMenu.$refs.refElem;
+                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);
+                    }
+                }
             }
         },
         handleContextmenuEvent(evnt, item) {
@@ -308,7 +347,7 @@ export default {
             const $xeMenu = this;
             const reactData = $xeMenu.reactData;
             const { collapseStyle } = reactData;
-            const el = this.$refs.refElem;
+            const el = $xeMenu.$refs.refElem;
             reactData.collapseStyle = Object.assign({}, collapseStyle, {
                 width: el ? toCssUnit(el.offsetWidth) : ''
             });
@@ -375,7 +414,7 @@ export default {
         renderDefaultChildren(h, item, itemList) {
             const $xeMenu = this;
             const reactData = $xeMenu.reactData;
-            const { itemKey, level, hasChild, isActive, isExactActive, isExpand, routerLink, childList } = item;
+            const { itemId, itemKey, level, hasChild, isActive, isExactActive, isExpand, routerLink, childList } = item;
             const { isEnterCollapse } = reactData;
             const isCollapsed = $xeMenu.computeIsCollapsed;
             if (item.permissionCode) {
@@ -389,7 +428,10 @@ export default {
                         'is--exact-active': isExactActive,
                         'is--active': isActive,
                         'is--expand': (!isCollapsed || isEnterCollapse) && isExpand
-                    }]
+                    }],
+                attrs: {
+                    'data-menu-id': itemId
+                }
             }, [
                 routerLink
                     ? h('router-link', {
@@ -427,7 +469,7 @@ export default {
         },
         renderCollapseChildren(h, item, itemList) {
             const $xeMenu = this;
-            const { itemKey, level, hasChild, isActive, isExactActive, routerLink, childList } = item;
+            const { itemId, itemKey, level, hasChild, isActive, isExactActive, routerLink, childList } = item;
             if (item.permissionCode) {
                 if (!permission.checkVisible(item.permissionCode)) {
                     return renderEmptyElement($xeMenu);
@@ -438,7 +480,10 @@ export default {
                 class: ['vxe-menu--item-wrapper', `vxe-menu--item-level${level}`, {
                         'is--exact-active': isExactActive,
                         'is--active': isActive
-                    }]
+                    }],
+                attrs: {
+                    'data-menu-id': itemId
+                }
             }, [
                 routerLink
                     ? h('router-link', {
@@ -552,6 +597,16 @@ export default {
             $xeMenu.handleCollapseMenu();
         }
     },
+    created() {
+        const $xeMenu = this;
+        const props = $xeMenu;
+        $xeMenu.internalData = createInternalData();
+        const reactData = $xeMenu.reactData;
+        reactData.initialized = !!props.collapsed;
+        reactData.activeName = props.value;
+        $xeMenu.updateMenuConfig();
+        $xeMenu.updateActiveMenu(true);
+    },
     mounted() {
         const $xeMenu = this;
         const props = $xeMenu;
@@ -560,12 +615,13 @@ export default {
         if (menuConfig && !VxeUIContextMenu) {
             errLog('vxe.error.reqComp', ['vxe-context-menu']);
         }
-        globalEvents.on($xeMenu, 'resize', $xeMenu.updateCollapseStyle);
         $xeMenu.updateCollapseStyle();
+        globalEvents.on($xeMenu, 'resize', $xeMenu.updateCollapseStyle);
     },
     beforeDestroy() {
         const $xeMenu = this;
-        globalEvents.off($xeMenu, 'resize');
+        const reactData = $xeMenu.reactData;
+        const internalData = $xeMenu.internalData;
         const collapseEl = $xeMenu.$refs.refCollapseElem;
         if (collapseEl) {
             const parentNode = collapseEl.parentNode;
@@ -573,15 +629,9 @@ export default {
                 parentNode.removeChild(collapseEl);
             }
         }
-    },
-    created() {
-        const $xeMenu = this;
-        const props = $xeMenu;
-        const reactData = $xeMenu.reactData;
-        reactData.initialized = !!props.collapsed;
-        reactData.activeName = props.value;
-        $xeMenu.updateMenuConfig();
-        $xeMenu.updateActiveMenu(true);
+        globalEvents.off($xeMenu, 'resize');
+        XEUtils.assign(reactData, createReactData());
+        XEUtils.assign(internalData, createInternalData());
     },
     render(h) {
         return this.renderVN(h);

package/es/menu/style.css

@@ -1,16 +1,20 @@
-.vxe-menu {
+.vxe-menu,
+.vxe-menu--collapse-wrapper {
   --vxe-ui-menu-current-font-size: var(--vxe-ui-font-size-default);
   --vxe-ui-menu-current-item-height: var(--vxe-ui-menu-item-height-default);
 }
-.vxe-menu.size--medium {
+.vxe-menu.size--medium,
+.vxe-menu--collapse-wrapper.size--medium {
   --vxe-ui-menu-current-font-size: var(--vxe-ui-font-size-medium);
   --vxe-ui-menu-current-item-height: var(--vxe-ui-menu-item-height-medium);
 }
-.vxe-menu.size--small {
+.vxe-menu.size--small,
+.vxe-menu--collapse-wrapper.size--small {
   --vxe-ui-menu-current-font-size: var(--vxe-ui-font-size-small);
   --vxe-ui-menu-current-item-height: var(--vxe-ui-menu-item-height-small);
 }
-.vxe-menu.size--mini {
+.vxe-menu.size--mini,
+.vxe-menu--collapse-wrapper.size--mini {
   --vxe-ui-menu-current-font-size: var(--vxe-ui-font-size-mini);
   --vxe-ui-menu-current-item-height: var(--vxe-ui-menu-item-height-mini);
 }
@@ -27,7 +31,8 @@
   min-height: 4em;
 }
 
-.vxe-menu {
+.vxe-menu,
+.vxe-menu--collapse-wrapper {
   font-size: var(--vxe-ui-menu-current-font-size);
   color: var(--vxe-ui-font-color);
   font-family: var(--vxe-ui-font-family);
@@ -125,7 +130,11 @@
 }
 
 .vxe-menu--item-group {
-  display: none;
+  height: 0;
+  overflow: hidden;
+}
+.vxe-menu--item-group[data-effect] {
+  transition: height 0.3s ease-in-out;
 }
 
 .vxe-menu--item-wrapper.is--active > .vxe-menu--item-link {
@@ -136,5 +145,5 @@
   background-color: var(--vxe-ui-base-active-background-color);
 }
 .vxe-menu--item-wrapper.is--expand > .vxe-menu--item-group {
-  display: block;
+  height: auto;
 }

package/es/menu/style.min.css

@@ -1 +1 @@
-.vxe-menu{--vxe-ui-menu-current-font-size:var(--vxe-ui-font-size-default);--vxe-ui-menu-current-item-height:var(--vxe-ui-menu-item-height-default)}.vxe-menu.size--medium{--vxe-ui-menu-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-menu-current-item-height:var(--vxe-ui-menu-item-height-medium)}.vxe-menu.size--small{--vxe-ui-menu-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-menu-current-item-height:var(--vxe-ui-menu-item-height-small)}.vxe-menu.size--mini{--vxe-ui-menu-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-menu-current-item-height:var(--vxe-ui-menu-item-height-mini)}.vxe-menu{position:relative}.vxe-menu.is--collapsed .vxe-menu--item-custom-title,.vxe-menu.is--collapsed .vxe-menu--item-link-collapse,.vxe-menu.is--collapsed .vxe-menu--item-link-title{display:none}.vxe-menu.is--loading{min-height:4em}.vxe-menu{font-size:var(--vxe-ui-menu-current-font-size);color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);background-color:var(--vxe-ui-layout-background-color)}.vxe-menu--collapse-wrapper{display:none;position:absolute;overflow:auto;background-color:var(--vxe-ui-layout-background-color)}.vxe-menu--collapse-wrapper.is--collapsed{display:block;transition:all .25s ease-in-out}.vxe-menu--collapse-wrapper:not(.is--enter) .vxe-menu--item-custom-title,.vxe-menu--collapse-wrapper:not(.is--enter) .vxe-menu--item-link-collapse,.vxe-menu--collapse-wrapper:not(.is--enter) .vxe-menu--item-link-title{display:none}.vxe-menu--collapse-wrapper.is--enter{box-shadow:var(--vxe-ui-menu-collapse-wrapper-box-shadow)}.vxe-menu--item-link{display:flex;flex-direction:row;align-items:center;height:var(--vxe-ui-menu-current-item-height);color:var(--vxe-ui-font-color);text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-menu--item-link:hover{background-color:var(--vxe-ui-base-hover-background-color)}.vxe-menu--item-custom-title,.vxe-menu--item-link,.vxe-menu--item-link-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-menu--item-link-icon{flex-shrink:0;width:var(--vxe-ui-menu-icon-width);text-align:center}.vxe-menu--item-custom-title,.vxe-menu--item-link-title{flex-grow:1;padding-left:.2em}.vxe-menu--item-link-collapse{flex-shrink:0;padding:.5em}.vxe-menu--item-link-collapse i{display:inline-block;font-size:.8em;transition:transform .25s ease-in-out}.vxe-menu--item-wrapper.vxe-menu--item-level1>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double)}.vxe-menu--item-wrapper.vxe-menu--item-level1>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 1)}.vxe-menu--item-wrapper.vxe-menu--item-level2>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 2)}.vxe-menu--item-wrapper.vxe-menu--item-level3>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 3)}.vxe-menu--item-wrapper.vxe-menu--item-level4>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 4)}.vxe-menu--item-wrapper.vxe-menu--item-level5>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 5)}.vxe-menu--item-wrapper.vxe-menu--item-level6>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 6)}.vxe-menu--item-wrapper.vxe-menu--item-level7>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 7)}.vxe-menu--item-group{display:none}.vxe-menu--item-wrapper.is--active>.vxe-menu--item-link{font-weight:700}.vxe-menu--item-wrapper.is--exact-active>.vxe-menu--item-link{color:var(--vxe-ui-font-primary-color);background-color:var(--vxe-ui-base-active-background-color)}.vxe-menu--item-wrapper.is--expand>.vxe-menu--item-group{display:block}
+.vxe-menu,.vxe-menu--collapse-wrapper{--vxe-ui-menu-current-font-size:var(--vxe-ui-font-size-default);--vxe-ui-menu-current-item-height:var(--vxe-ui-menu-item-height-default)}.vxe-menu--collapse-wrapper.size--medium,.vxe-menu.size--medium{--vxe-ui-menu-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-menu-current-item-height:var(--vxe-ui-menu-item-height-medium)}.vxe-menu--collapse-wrapper.size--small,.vxe-menu.size--small{--vxe-ui-menu-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-menu-current-item-height:var(--vxe-ui-menu-item-height-small)}.vxe-menu--collapse-wrapper.size--mini,.vxe-menu.size--mini{--vxe-ui-menu-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-menu-current-item-height:var(--vxe-ui-menu-item-height-mini)}.vxe-menu{position:relative}.vxe-menu.is--collapsed .vxe-menu--item-custom-title,.vxe-menu.is--collapsed .vxe-menu--item-link-collapse,.vxe-menu.is--collapsed .vxe-menu--item-link-title{display:none}.vxe-menu.is--loading{min-height:4em}.vxe-menu,.vxe-menu--collapse-wrapper{font-size:var(--vxe-ui-menu-current-font-size);color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);background-color:var(--vxe-ui-layout-background-color)}.vxe-menu--collapse-wrapper{display:none;position:absolute;overflow:auto;background-color:var(--vxe-ui-layout-background-color)}.vxe-menu--collapse-wrapper.is--collapsed{display:block;transition:all .25s ease-in-out}.vxe-menu--collapse-wrapper:not(.is--enter) .vxe-menu--item-custom-title,.vxe-menu--collapse-wrapper:not(.is--enter) .vxe-menu--item-link-collapse,.vxe-menu--collapse-wrapper:not(.is--enter) .vxe-menu--item-link-title{display:none}.vxe-menu--collapse-wrapper.is--enter{box-shadow:var(--vxe-ui-menu-collapse-wrapper-box-shadow)}.vxe-menu--item-link{display:flex;flex-direction:row;align-items:center;height:var(--vxe-ui-menu-current-item-height);color:var(--vxe-ui-font-color);text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-menu--item-link:hover{background-color:var(--vxe-ui-base-hover-background-color)}.vxe-menu--item-custom-title,.vxe-menu--item-link,.vxe-menu--item-link-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-menu--item-link-icon{flex-shrink:0;width:var(--vxe-ui-menu-icon-width);text-align:center}.vxe-menu--item-custom-title,.vxe-menu--item-link-title{flex-grow:1;padding-left:.2em}.vxe-menu--item-link-collapse{flex-shrink:0;padding:.5em}.vxe-menu--item-link-collapse i{display:inline-block;font-size:.8em;transition:transform .25s ease-in-out}.vxe-menu--item-wrapper.vxe-menu--item-level1>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double)}.vxe-menu--item-wrapper.vxe-menu--item-level1>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 1)}.vxe-menu--item-wrapper.vxe-menu--item-level2>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 2)}.vxe-menu--item-wrapper.vxe-menu--item-level3>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 3)}.vxe-menu--item-wrapper.vxe-menu--item-level4>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 4)}.vxe-menu--item-wrapper.vxe-menu--item-level5>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 5)}.vxe-menu--item-wrapper.vxe-menu--item-level6>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 6)}.vxe-menu--item-wrapper.vxe-menu--item-level7>.vxe-menu--item-link{padding:0 var(--vxe-ui-layout-padding-double) 0 calc(var(--vxe-ui-layout-padding-double) * 7)}.vxe-menu--item-group{height:0;overflow:hidden}.vxe-menu--item-group[data-effect]{transition:height .3s ease-in-out}.vxe-menu--item-wrapper.is--active>.vxe-menu--item-link{font-weight:700}.vxe-menu--item-wrapper.is--exact-active>.vxe-menu--item-link{color:var(--vxe-ui-font-primary-color);background-color:var(--vxe-ui-base-active-background-color)}.vxe-menu--item-wrapper.is--expand>.vxe-menu--item-group{height:auto}