vxe-pc-ui 4.16.6 → 4.16.8

package/es/menu/src/menu.js

@@ -9,6 +9,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 defineVxeComponent({
     name: 'VxeMenu',
     props: {
@@ -47,15 +64,8 @@ export default defineVxeComponent({
         const refElem = ref();
         const refCollapseElem = ref();
         const { computeSize } = useSize(props);
-        const reactData = reactive({
-            initialized: !!props.collapsed,
-            isEnterCollapse: false,
-            collapseStyle: {},
-            collapseZindex: 0,
-            activeName: props.modelValue,
-            menuList: [],
-            itemHeight: 1
-        });
+        const reactData = reactive(createReactData());
+        const internalData = createInternalData();
         const refMaps = {
             refElem
         };
@@ -126,7 +136,7 @@ export default defineVxeComponent({
         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, 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' });
         };
@@ -178,10 +188,16 @@ export default defineVxeComponent({
         };
         const handleClickIconCollapse = (evnt, item, itemList) => {
             const { accordion } = props;
-            const { hasChild, isExpand } = item;
+            const { menuEffectMaps } = internalData;
+            const { itemId, hasChild, isExpand } = item;
+            const isCollapsed = computeIsCollapsed.value;
+            const expanded = !isExpand;
             if (hasChild) {
                 evnt.stopPropagation();
                 evnt.preventDefault();
+                if (menuEffectMaps[itemId]) {
+                    clearTimeout(menuEffectMaps[itemId]);
+                }
                 if (accordion) {
                     itemList.forEach(obj => {
                         if (obj !== item) {
@@ -189,7 +205,33 @@ export default defineVxeComponent({
                         }
                     });
                 }
-                item.isExpand = !isExpand;
+                item.isExpand = expanded;
+                const wrapperEl = isCollapsed ? refCollapseElem.value : refElem.value;
+                if (wrapperEl) {
+                    const nemuEl = wrapperEl.querySelector(`.vxe-menu--item-wrapper[data-menu-id="${itemId}"]`);
+                    const groupEl = nemuEl ? nemuEl.querySelector('.vxe-menu--item-group') : null;
+                    if (groupEl) {
+                        if (expanded) {
+                            groupEl.style.height = '0';
+                            groupEl.setAttribute('data-effect', 'y');
+                            requestAnimationFrame(() => {
+                                groupEl.style.height = `${groupEl.scrollHeight}px`;
+                            });
+                        }
+                        else {
+                            groupEl.style.height = `${groupEl.scrollHeight}px`;
+                            groupEl.setAttribute('data-effect', 'y');
+                            requestAnimationFrame(() => {
+                                groupEl.style.height = '0';
+                            });
+                        }
+                        menuEffectMaps[itemId] = setTimeout(() => {
+                            delete menuEffectMaps[itemId];
+                            groupEl.removeAttribute('data-effect');
+                            groupEl.style.height = '';
+                        }, 350);
+                    }
+                }
             }
         };
         const emitModel = (value) => {
@@ -335,7 +377,7 @@ export default defineVxeComponent({
             ];
         };
         const renderDefaultChildren = (item, itemList) => {
-            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 = computeIsCollapsed.value;
             if (item.permissionCode) {
@@ -349,7 +391,8 @@ export default defineVxeComponent({
                         'is--exact-active': isExactActive,
                         'is--active': isActive,
                         'is--expand': (!isCollapsed || isEnterCollapse) && isExpand
-                    }]
+                    }],
+                'data-menu-id': itemId
             }, [
                 routerLink
                     ? h(resolveComponent('router-link'), {
@@ -381,7 +424,7 @@ export default defineVxeComponent({
             ]);
         };
         const renderCollapseChildren = (item, itemList) => {
-            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);
@@ -392,7 +435,8 @@ export default defineVxeComponent({
                 class: ['vxe-menu--item-wrapper', `vxe-menu--item-level${level}`, {
                         'is--exact-active': isExactActive,
                         'is--active': isActive
-                    }]
+                    }],
+                'data-menu-id': itemId
             }, [
                 routerLink
                     ? h(resolveComponent('router-link'), {
@@ -500,7 +544,6 @@ export default defineVxeComponent({
             updateCollapseStyle();
         });
         onBeforeUnmount(() => {
-            globalEvents.off($xeMenu, 'resize');
             const collapseEl = refCollapseElem.value;
             if (collapseEl) {
                 const parentNode = collapseEl.parentNode;
@@ -508,7 +551,12 @@ export default defineVxeComponent({
                     parentNode.removeChild(collapseEl);
                 }
             }
+            globalEvents.off($xeMenu, 'resize');
+            XEUtils.assign(reactData, createReactData());
+            XEUtils.assign(internalData, createInternalData());
         });
+        reactData.initialized = !!props.collapsed;
+        reactData.activeName = props.modelValue;
         updateMenuConfig();
         updateActiveMenu(true);
         $xeMenu.renderVN = renderVN;

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);
@@ -124,9 +129,11 @@
 }
 
 .vxe-menu--item-group {
-  max-height: 0;
+  height: 0;
   overflow: hidden;
-  transition: max-height 0.3s ease-in-out;
+}
+.vxe-menu--item-group[data-effect] {
+  transition: height 0.3s ease-in-out;
 }
 
 .vxe-menu--item-wrapper.is--active > .vxe-menu--item-link {
@@ -137,5 +144,5 @@
   background-color: var(--vxe-ui-base-active-background-color);
 }
 .vxe-menu--item-wrapper.is--expand > .vxe-menu--item-group {
-  max-height: 1000px;
+  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;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{max-height:0;overflow:hidden;transition:max-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{max-height:1000px}
+.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;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}