vxe-pc-ui 4.16.6 → 4.16.7

package/lib/index.umd.js

@@ -4657,7 +4657,7 @@ function checkDynamic() {
 const {
   log: log_log
 } = VxeUI;
-const uiVersion = `ui v${"4.16.6"}`;
+const uiVersion = `ui v${"4.16.7"}`;
 function createComponentLog(name) {
   const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
   const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -4675,7 +4675,7 @@ const errLog = log_log.create('error', uiVersion);
 
 
 
-const ui_version = "4.16.6";
+const ui_version = "4.16.7";
 VxeUI.uiVersion = ui_version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -5171,8 +5171,8 @@ setIcon({
   BUTTON_LOADING: iconPrefix + 'spinner roll',
   BUTTON_TOOLTIP_ICON: iconPrefix + 'question-circle-fill',
   // menu
-  MENU_ITEM_EXPAND_OPEN: iconPrefix + 'arrow-down rotate180',
-  MENU_ITEM_EXPAND_CLOSE: iconPrefix + 'arrow-down',
+  MENU_ITEM_EXPAND_OPEN: iconPrefix + 'arrow-right rotate90',
+  MENU_ITEM_EXPAND_CLOSE: iconPrefix + 'arrow-right',
   // select
   SELECT_LOADED: iconPrefix + 'spinner roll',
   SELECT_OPEN: iconPrefix + 'caret-down rotate180',
@@ -36139,6 +36139,23 @@ const {
   getConfig: menu_getConfig,
   getIcon: menu_getIcon
 } = VxeUI;
+function menu_createInternalData() {
+  return {
+    menuEffectMaps: {}
+  };
+}
+function menu_createReactData() {
+  return {
+    initialized: false,
+    isEnterCollapse: false,
+    collapseStyle: {},
+    collapseZindex: 0,
+    activeName: '',
+    menuList: [],
+    itemHeight: 1
+  };
+}
+let nemuUniqueKey = 100000000;
 /* harmony default export */ var menu = (defineVxeComponent({
   name: 'VxeMenu',
   props: {
@@ -36177,15 +36194,8 @@ const {
     const {
       computeSize
     } = useSize(props);
-    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({
-      initialized: !!props.collapsed,
-      isEnterCollapse: false,
-      collapseStyle: {},
-      collapseZindex: 0,
-      activeName: props.modelValue,
-      menuList: [],
-      itemHeight: 1
-    });
+    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)(menu_createReactData());
+    const internalData = menu_createInternalData();
     const refMaps = {
       refElem
     };
@@ -36268,6 +36278,7 @@ const {
           ...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,
@@ -36337,12 +36348,20 @@ const {
         accordion
       } = props;
       const {
+        menuEffectMaps
+      } = internalData;
+      const {
+        itemId,
         hasChild,
         isExpand
       } = item;
+      const expanded = !isExpand;
       if (hasChild) {
         evnt.stopPropagation();
         evnt.preventDefault();
+        if (menuEffectMaps[itemId]) {
+          clearTimeout(menuEffectMaps[itemId]);
+        }
         if (accordion) {
           itemList.forEach(obj => {
             if (obj !== item) {
@@ -36350,7 +36369,32 @@ const {
             }
           });
         }
-        item.isExpand = !isExpand;
+        item.isExpand = expanded;
+        const el = refElem.value;
+        if (el) {
+          const nemuEl = el.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 => {
@@ -36513,6 +36557,7 @@ const {
     };
     const renderDefaultChildren = (item, itemList) => {
       const {
+        itemId,
         itemKey,
         level,
         hasChild,
@@ -36537,7 +36582,8 @@ const {
           'is--exact-active': isExactActive,
           'is--active': isActive,
           'is--expand': (!isCollapsed || isEnterCollapse) && isExpand
-        }]
+        }],
+        'data-menu-id': itemId
       }, [routerLink ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)('router-link'), {
         class: 'vxe-menu--item-link',
         to: routerLink,
@@ -36563,6 +36609,7 @@ const {
     };
     const renderCollapseChildren = (item, itemList) => {
       const {
+        itemId,
         itemKey,
         level,
         hasChild,
@@ -36581,7 +36628,8 @@ const {
         class: ['vxe-menu--item-wrapper', `vxe-menu--item-level${level}`, {
           'is--exact-active': isExactActive,
           'is--active': isActive
-        }]
+        }],
+        'data-menu-id': itemId
       }, [routerLink ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveComponent)('router-link'), {
         class: 'vxe-menu--item-link',
         to: routerLink,
@@ -36688,7 +36736,6 @@ const {
       updateCollapseStyle();
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
-      globalEvents.off($xeMenu, 'resize');
       const collapseEl = refCollapseElem.value;
       if (collapseEl) {
         const parentNode = collapseEl.parentNode;
@@ -36696,7 +36743,12 @@ const {
           parentNode.removeChild(collapseEl);
         }
       }
+      globalEvents.off($xeMenu, 'resize');
+      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(reactData, menu_createReactData());
+      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(internalData, menu_createInternalData());
     });
+    reactData.initialized = !!props.collapsed;
+    reactData.activeName = props.modelValue;
     updateMenuConfig();
     updateActiveMenu(true);
     $xeMenu.renderVN = renderVN;