vxe-pc-ui 4.16.6 → 4.16.8

package/lib/menu/src/menu.js

@@ -22,6 +22,23 @@ const {
   getConfig,
   getIcon
 } = _ui.VxeUI;
+function createInternalData() {
+  return {
+    menuEffectMaps: {}
+  };
+}
+function createReactData() {
+  return {
+    initialized: false,
+    isEnterCollapse: false,
+    collapseStyle: {},
+    collapseZindex: 0,
+    activeName: '',
+    menuList: [],
+    itemHeight: 1
+  };
+}
+let nemuUniqueKey = 100000000;
 var _default = exports.default = (0, _comp.defineVxeComponent)({
   name: 'VxeMenu',
   props: {
@@ -60,15 +77,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const {
       computeSize
     } = (0, _ui.useSize)(props);
-    const reactData = (0, _vue.reactive)({
-      initialized: !!props.collapsed,
-      isEnterCollapse: false,
-      collapseStyle: {},
-      collapseZindex: 0,
-      activeName: props.modelValue,
-      menuList: [],
-      itemHeight: 1
-    });
+    const reactData = (0, _vue.reactive)(createReactData());
+    const internalData = createInternalData();
     const refMaps = {
       refElem
     };
@@ -150,6 +160,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         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,
@@ -219,12 +230,21 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         accordion
       } = props;
       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) {
@@ -232,7 +252,32 @@ var _default = exports.default = (0, _comp.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 => {
@@ -395,6 +440,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     };
     const renderDefaultChildren = (item, itemList) => {
       const {
+        itemId,
         itemKey,
         level,
         hasChild,
@@ -419,7 +465,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           'is--exact-active': isExactActive,
           'is--active': isActive,
           'is--expand': (!isCollapsed || isEnterCollapse) && isExpand
-        }]
+        }],
+        'data-menu-id': itemId
       }, [routerLink ? (0, _vue.h)((0, _vue.resolveComponent)('router-link'), {
         class: 'vxe-menu--item-link',
         to: routerLink,
@@ -445,6 +492,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     };
     const renderCollapseChildren = (item, itemList) => {
       const {
+        itemId,
         itemKey,
         level,
         hasChild,
@@ -463,7 +511,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         class: ['vxe-menu--item-wrapper', `vxe-menu--item-level${level}`, {
           'is--exact-active': isExactActive,
           'is--active': isActive
-        }]
+        }],
+        'data-menu-id': itemId
       }, [routerLink ? (0, _vue.h)((0, _vue.resolveComponent)('router-link'), {
         class: 'vxe-menu--item-link',
         to: routerLink,
@@ -569,7 +618,6 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       updateCollapseStyle();
     });
     (0, _vue.onBeforeUnmount)(() => {
-      _ui.globalEvents.off($xeMenu, 'resize');
       const collapseEl = refCollapseElem.value;
       if (collapseEl) {
         const parentNode = collapseEl.parentNode;
@@ -577,7 +625,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           parentNode.removeChild(collapseEl);
         }
       }
+      _ui.globalEvents.off($xeMenu, 'resize');
+      _xeUtils.default.assign(reactData, createReactData());
+      _xeUtils.default.assign(internalData, createInternalData());
     });
+    reactData.initialized = !!props.collapsed;
+    reactData.activeName = props.modelValue;
     updateMenuConfig();
     updateActiveMenu(true);
     $xeMenu.renderVN = renderVN;

package/lib/menu/src/menu.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_vn=require("../../ui/src/vn"),_log=require("../../ui/src/log"),_loading=_interopRequireDefault(require("../../loading"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let errLog=(0,_log.createComponentLog)("menu").errLog,{menus,getConfig,getIcon}=_ui.VxeUI;var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeMenu",props:{modelValue:[String,Number],expandAll:Boolean,accordion:{type:Boolean,default:()=>getConfig().menu.accordion},collapsed:{type:Boolean,default:null},collapseFixed:Boolean,loading:Boolean,options:{type:Array,default:()=>[]},size:{type:String,default:()=>getConfig().menu.size||getConfig().size},menuConfig:Object},emits:["update:modelValue","click","option-menu","menu-click"],setup(r,e){let{emit:n,slots:c}=e;var i=_xeUtils.default.uniqueId();let t=(0,_vue.inject)("$xeLayoutAside",null),v=(0,_vue.ref)(),d=(0,_vue.ref)(),m=(0,_ui.useSize)(r).computeSize,p=(0,_vue.reactive)({initialized:!!r.collapsed,isEnterCollapse:!1,collapseStyle:{},collapseZindex:0,activeName:r.modelValue,menuList:[],itemHeight:1}),l={refElem:v},o=(0,_vue.computed)(()=>Object.assign({},getConfig().menu.menuConfig,r.menuConfig)),_=(0,_vue.computed)(()=>{var e=r.collapsed;return _xeUtils.default.isBoolean(e)?e:!!t&&!!t.props.collapsed}),s=(0,_vue.computed)(()=>{let e="";return e=t?t.props.collapseWidth||"":e}),u=(0,_vue.computed)(()=>{let e="";return e=t?t.props.width||"":e}),a={computeSize:m},x={xID:i,props:r,context:e,reactData:p,getRefMaps:()=>l,getComputeMaps:()=>a},h=e=>""+(e.title||e.name),g=s=>{let u=p.activeName;_xeUtils.default.eachTree(p.menuList,(e,i,t,n,l,o)=>{e.itemKey===u?(o.forEach(e=>{e.isActive=!0,s&&(e.isExpand=!0)}),e.isExactActive=!0):(e.isExactActive=!1,e.isActive=!1)},{children:"childList"})},C=()=>{let{options:e,expandAll:o}=r;p.menuList=_xeUtils.default.mapTree(e,(e,i,t,n,l)=>Object.assign(Object.assign({},e),{parentKey:l?l.name||n.slice(0,n.length-1).join(","):"",level:n.length,itemKey:e.name||n.join(","),isExactActive:!1,isActive:!1,isExpand:_xeUtils.default.isBoolean(e.expanded)?e.expanded:!!o,hasChild:e.children&&0<e.children.length}),{children:"children",mapChildren:"childList"})},f=()=>{var e=r.collapseFixed;e&&(0,_vue.nextTick)(()=>{var e,i=p.isEnterCollapse,t=_.value,n=u.value,l=s.value,o=v.value;o&&(e=o.getBoundingClientRect(),o=o.parentNode,p.collapseStyle=t?{top:(0,_dom.toCssUnit)(e.top),left:(0,_dom.toCssUnit)(e.left),height:(0,_dom.toCssUnit)(o.clientHeight),width:i?n?(0,_dom.toCssUnit)(n):"":l?(0,_dom.toCssUnit)(l):"",zIndex:p.collapseZindex}:{})})},E=()=>{var e=r.collapseFixed;e&&(e=p.initialized,_.value&&!e&&(p.initialized=!0,(0,_vue.nextTick)(()=>{var e=d.value;e&&document.body.appendChild(e)})),p.isEnterCollapse=!1,p.collapseZindex<(0,_utils.getLastZIndex)()&&(p.collapseZindex=(0,_utils.nextZIndex)()),f())},y=(e,i,t)=>{var n=r.accordion,{hasChild:l,isExpand:o}=i;l&&(e.stopPropagation(),e.preventDefault(),n&&t.forEach(e=>{e!==i&&(e.isExpand=!1)}),i.isExpand=!o)},k=e=>{p.activeName=e,n("update:modelValue",e)},M=(n,l)=>{var e=r.menuConfig,i=o.value;(e?(0,_utils.isEnableConf)(i):i.enabled)&&({options:e,visibleMethod:i}=i,i&&!i({$menu:x,options:e,currentMenu:l})||_ui.VxeUI.contextMenu&&_ui.VxeUI.contextMenu.openByEvent(n,{options:e,events:{optionClick(e){var i=e.option,t=menus.get(i.code),t=t?t.menuMenuMethod:null,i={menu:i,currentMenu:l,$event:n,$menu:x};t&&t(i,n),N("menu-click",i,e.$event)}}})),N("option-menu",{currentMenu:l},n)},U=(e,i,t)=>{var{itemKey:n,routerLink:l,hasChild:o}=i,l=(!l&&o?y(e,i,t):(k(n),V()),{currentMenu:i,menu:i});N("click",l,e)},b=()=>{var e=p.collapseStyle,i=u.value;p.collapseStyle=Object.assign({},e,{width:i?(0,_dom.toCssUnit)(i):""}),p.isEnterCollapse=!0},L=()=>{var e=p.isEnterCollapse;e||b()},V=()=>{var e=p.collapseStyle,i=v.value;p.collapseStyle=Object.assign({},e,{width:i?(0,_dom.toCssUnit)(i.offsetWidth):""}),p.isEnterCollapse=!1},A=(e,i)=>e&&(_xeUtils.default.isString(e)&&(e=c[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(i)):[],N=(e,i,t)=>{n(e,(0,_ui.createEvent)(t,{$menu:x},i))};i={dispatchEvent:N};Object.assign(x,i,{});let z=(i,t)=>{var{icon:e,isExpand:n,hasChild:l}=i,o=i.slots||{},s=o.default||c.option,u=o.title||c.optionTitle||c["option-title"],o=o.icon||c.optionIcon||c["option-icon"],a=h(i),r=_.value,r={currentMenu:i,collapsed:r,option:i};return[s?(0,_ui.renderEmptyElement)(x):(0,_vue.h)("div",{class:"vxe-menu--item-link-icon"},o?A(o,r):e?[(0,_vue.h)("i",{class:e})]:[]),s?(0,_vue.h)("div",{class:"vxe-menu--item-custom-title"},A(s,r)):(0,_vue.h)("div",{class:"vxe-menu--item-link-title",title:a},u?A(u,r):a),l?(0,_vue.h)("div",{class:"vxe-menu--item-link-collapse",onClick(e){y(e,i,t)}},[(0,_vue.h)("i",{class:n?getIcon().MENU_ITEM_EXPAND_OPEN:getIcon().MENU_ITEM_EXPAND_CLOSE})]):(0,_ui.renderEmptyElement)(x)]},I=(i,t)=>{let{itemKey:e,level:n,hasChild:l,isActive:o,isExactActive:s,isExpand:u,routerLink:a,childList:r}=i;var c=p.isEnterCollapse,v=_.value;return i.permissionCode&&!_ui.permission.checkVisible(i.permissionCode)?(0,_ui.renderEmptyElement)(x):(0,_vue.h)("div",{key:e,class:["vxe-menu--item-wrapper","vxe-menu--item-level"+n,{"is--exact-active":s,"is--active":o,"is--expand":(!v||c)&&u}]},[a?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),{class:"vxe-menu--item-link",to:a,onContextmenu(e){M(e,i)},onClick(e){U(e,i,t)}},{default:()=>z(i,t)}):(0,_vue.h)("div",{class:"vxe-menu--item-link",onContextmenu(e){M(e,i)},onClick(e){U(e,i,t)}},z(i,t)),l?(0,_vue.h)("div",{class:"vxe-menu--item-group"},r.map(e=>I(e,r))):(0,_ui.renderEmptyElement)(x)])};let S=(0,_vue.ref)(0);return(0,_vue.watch)(()=>r.options?r.options.length:-1,()=>{S.value++}),(0,_vue.watch)(()=>r.options,()=>{S.value++}),(0,_vue.watch)(S,()=>{C(),g(!0)}),(0,_vue.watch)(()=>r.modelValue,e=>{p.activeName=e}),(0,_vue.watch)(()=>p.activeName,()=>{g(!0)}),(0,_vue.watch)(_,()=>{E()}),(0,_vue.onMounted)(()=>{var e=r.menuConfig,i=_ui.VxeUI.getComponent("VxeContextMenu");e&&!i&&errLog("vxe.error.reqComp",["vxe-context-menu"]),_ui.globalEvents.on(x,"resize",f),f()}),(0,_vue.onBeforeUnmount)(()=>{_ui.globalEvents.off(x,"resize");var e,i=d.value;i&&(e=i.parentNode)&&e.removeChild(i)}),C(),g(!0),x.renderVN=()=>{var{loading:e,collapseFixed:i}=r;let{initialized:t,menuList:n,collapseStyle:l,isEnterCollapse:o}=p;var s=m.value;let u=_.value,a={};return i&&(a={onMouseenter:b,onMouseover:L,onMouseleave:V}),(0,_vue.h)("div",{ref:v,class:["vxe-menu",{["size--"+s]:s,"is--collapsed":u,"is--loading":e}]},[(0,_vue.h)("div",{class:"vxe-menu--item-list"},n.map(e=>(u?(i,t)=>{let{itemKey:e,level:n,hasChild:l,isActive:o,isExactActive:s,routerLink:u,childList:a}=i;return i.permissionCode&&!_ui.permission.checkVisible(i.permissionCode)?(0,_ui.renderEmptyElement)(x):(0,_vue.h)("div",{key:e,class:["vxe-menu--item-wrapper","vxe-menu--item-level"+n,{"is--exact-active":s,"is--active":o}]},[u?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),{class:"vxe-menu--item-link",to:u,onContextmenu(e){M(e,i)},onClick(e){U(e,i,t)}},{default:()=>z(i,t)}):(0,_vue.h)("div",{class:"vxe-menu--item-link",onContextmenu(e){M(e,i)},onClick(e){U(e,i,t)}},z(i,t)),l?(0,_vue.h)("div",{class:"vxe-menu--item-group"},a.map(e=>I(e,a))):(0,_ui.renderEmptyElement)(x)])}:I)(e,n))),t?(0,_vue.h)("div",Object.assign({ref:d,class:["vxe-menu--collapse-wrapper",{["size--"+s]:s,"is--collapsed":u,"is--enter":o,"is--loading":e}],style:l},a),[u?(0,_vue.h)("div",{class:"vxe-menu--item-list"},n.map(e=>I(e,n))):(0,_ui.renderEmptyElement)(x)]):(0,_ui.renderEmptyElement)(x),(0,_vue.h)(_loading.default,{class:"vxe-list-view--loading",modelValue:e})])},x},render(){return this.renderVN()}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_vn=require("../../ui/src/vn"),_log=require("../../ui/src/log"),_loading=_interopRequireDefault(require("../../loading"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let errLog=(0,_log.createComponentLog)("menu").errLog,{menus,getConfig,getIcon}=_ui.VxeUI;function createInternalData(){return{menuEffectMaps:{}}}function createReactData(){return{initialized:!1,isEnterCollapse:!1,collapseStyle:{},collapseZindex:0,activeName:"",menuList:[],itemHeight:1}}let nemuUniqueKey=1e8;var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeMenu",props:{modelValue:[String,Number],expandAll:Boolean,accordion:{type:Boolean,default:()=>getConfig().menu.accordion},collapsed:{type:Boolean,default:null},collapseFixed:Boolean,loading:Boolean,options:{type:Array,default:()=>[]},size:{type:String,default:()=>getConfig().menu.size||getConfig().size},menuConfig:Object},emits:["update:modelValue","click","option-menu","menu-click"],setup(c,e){let{emit:n,slots:d}=e;var t=_xeUtils.default.uniqueId();let i=(0,_vue.inject)("$xeLayoutAside",null),m=(0,_vue.ref)(),v=(0,_vue.ref)(),r=(0,_ui.useSize)(c).computeSize,p=(0,_vue.reactive)(createReactData()),_=createInternalData(),l={refElem:m},a=(0,_vue.computed)(()=>Object.assign({},getConfig().menu.menuConfig,c.menuConfig)),x=(0,_vue.computed)(()=>{var e=c.collapsed;return _xeUtils.default.isBoolean(e)?e:!!i&&!!i.props.collapsed}),o=(0,_vue.computed)(()=>{let e="";return e=i?i.props.collapseWidth||"":e}),u=(0,_vue.computed)(()=>{let e="";return e=i?i.props.width||"":e}),s={computeSize:r},h={xID:t,props:c,context:e,reactData:p,getRefMaps:()=>l,getComputeMaps:()=>s},g=e=>""+(e.title||e.name),f=o=>{let u=p.activeName;_xeUtils.default.eachTree(p.menuList,(e,t,i,n,l,a)=>{e.itemKey===u?(a.forEach(e=>{e.isActive=!0,o&&(e.isExpand=!0)}),e.isExactActive=!0):(e.isExactActive=!1,e.isActive=!1)},{children:"childList"})},C=()=>{let{options:e,expandAll:a}=c;p.menuList=_xeUtils.default.mapTree(e,(e,t,i,n,l)=>Object.assign(Object.assign({},e),{parentKey:l?l.name||n.slice(0,n.length-1).join(","):"",level:n.length,itemId:++nemuUniqueKey,itemKey:e.name||n.join(","),isExactActive:!1,isActive:!1,isExpand:_xeUtils.default.isBoolean(e.expanded)?e.expanded:!!a,hasChild:e.children&&0<e.children.length}),{children:"children",mapChildren:"childList"})},E=()=>{var e=c.collapseFixed;e&&(0,_vue.nextTick)(()=>{var e,t=p.isEnterCollapse,i=x.value,n=u.value,l=o.value,a=m.value;a&&(e=a.getBoundingClientRect(),a=a.parentNode,p.collapseStyle=i?{top:(0,_dom.toCssUnit)(e.top),left:(0,_dom.toCssUnit)(e.left),height:(0,_dom.toCssUnit)(a.clientHeight),width:t?n?(0,_dom.toCssUnit)(n):"":l?(0,_dom.toCssUnit)(l):"",zIndex:p.collapseZindex}:{})})},y=()=>{var e=c.collapseFixed;e&&(e=p.initialized,x.value&&!e&&(p.initialized=!0,(0,_vue.nextTick)(()=>{var e=v.value;e&&document.body.appendChild(e)})),p.isEnterCollapse=!1,p.collapseZindex<(0,_utils.getLastZIndex)()&&(p.collapseZindex=(0,_utils.nextZIndex)()),E())},k=(t,i,e)=>{var n=c.accordion;let l=_.menuEffectMaps,{itemId:a,hasChild:o,isExpand:u}=i;var s=x.value,r=!u;if(o){t.stopPropagation(),t.preventDefault(),l[a]&&clearTimeout(l[a]),n&&e.forEach(e=>{e!==i&&(e.isExpand=!1)}),i.isExpand=r;t=(s?v:m).value;if(t){n=t.querySelector(`.vxe-menu--item-wrapper[data-menu-id="${a}"]`);let e=n?n.querySelector(".vxe-menu--item-group"):null;e&&(r?(e.style.height="0",e.setAttribute("data-effect","y"),requestAnimationFrame(()=>{e.style.height=e.scrollHeight+"px"})):(e.style.height=e.scrollHeight+"px",e.setAttribute("data-effect","y"),requestAnimationFrame(()=>{e.style.height="0"})),l[a]=setTimeout(()=>{delete l[a],e.removeAttribute("data-effect"),e.style.height=""},350))}}},M=e=>{p.activeName=e,n("update:modelValue",e)},U=(n,l)=>{var e=c.menuConfig,t=a.value;(e?(0,_utils.isEnableConf)(t):t.enabled)&&({options:e,visibleMethod:t}=t,t&&!t({$menu:h,options:e,currentMenu:l})||_ui.VxeUI.contextMenu&&_ui.VxeUI.contextMenu.openByEvent(n,{options:e,events:{optionClick(e){var t=e.option,i=menus.get(t.code),i=i?i.menuMenuMethod:null,t={menu:t,currentMenu:l,$event:n,$menu:h};i&&i(t,n),V("menu-click",t,e.$event)}}})),V("option-menu",{currentMenu:l},n)},I=(e,t,i)=>{var{itemKey:n,routerLink:l,hasChild:a}=t,l=(!l&&a?k(e,t,i):(M(n),q()),{currentMenu:t,menu:t});V("click",l,e)},b=()=>{var e=p.collapseStyle,t=u.value;p.collapseStyle=Object.assign({},e,{width:t?(0,_dom.toCssUnit)(t):""}),p.isEnterCollapse=!0},A=()=>{var e=p.isEnterCollapse;e||b()},q=()=>{var e=p.collapseStyle,t=m.value;p.collapseStyle=Object.assign({},e,{width:t?(0,_dom.toCssUnit)(t.offsetWidth):""}),p.isEnterCollapse=!1},L=(e,t)=>e&&(_xeUtils.default.isString(e)&&(e=d[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[],V=(e,t,i)=>{n(e,(0,_ui.createEvent)(i,{$menu:h},t))};t={dispatchEvent:V};Object.assign(h,t,{});let N=(t,i)=>{var{icon:e,isExpand:n,hasChild:l}=t,a=t.slots||{},o=a.default||d.option,u=a.title||d.optionTitle||d["option-title"],a=a.icon||d.optionIcon||d["option-icon"],s=g(t),r=x.value,r={currentMenu:t,collapsed:r,option:t};return[o?(0,_ui.renderEmptyElement)(h):(0,_vue.h)("div",{class:"vxe-menu--item-link-icon"},a?L(a,r):e?[(0,_vue.h)("i",{class:e})]:[]),o?(0,_vue.h)("div",{class:"vxe-menu--item-custom-title"},L(o,r)):(0,_vue.h)("div",{class:"vxe-menu--item-link-title",title:s},u?L(u,r):s),l?(0,_vue.h)("div",{class:"vxe-menu--item-link-collapse",onClick(e){k(e,t,i)}},[(0,_vue.h)("i",{class:n?getIcon().MENU_ITEM_EXPAND_OPEN:getIcon().MENU_ITEM_EXPAND_CLOSE})]):(0,_ui.renderEmptyElement)(h)]},S=(t,i)=>{let{itemId:e,itemKey:n,level:l,hasChild:a,isActive:o,isExactActive:u,isExpand:s,routerLink:r,childList:c}=t;var d=p.isEnterCollapse,m=x.value;return t.permissionCode&&!_ui.permission.checkVisible(t.permissionCode)?(0,_ui.renderEmptyElement)(h):(0,_vue.h)("div",{key:n,class:["vxe-menu--item-wrapper","vxe-menu--item-level"+l,{"is--exact-active":u,"is--active":o,"is--expand":(!m||d)&&s}],"data-menu-id":e},[r?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),{class:"vxe-menu--item-link",to:r,onContextmenu(e){U(e,t)},onClick(e){I(e,t,i)}},{default:()=>N(t,i)}):(0,_vue.h)("div",{class:"vxe-menu--item-link",onContextmenu(e){U(e,t)},onClick(e){I(e,t,i)}},N(t,i)),a?(0,_vue.h)("div",{class:"vxe-menu--item-group"},c.map(e=>S(e,c))):(0,_ui.renderEmptyElement)(h)])};let z=(0,_vue.ref)(0);return(0,_vue.watch)(()=>c.options?c.options.length:-1,()=>{z.value++}),(0,_vue.watch)(()=>c.options,()=>{z.value++}),(0,_vue.watch)(z,()=>{C(),f(!0)}),(0,_vue.watch)(()=>c.modelValue,e=>{p.activeName=e}),(0,_vue.watch)(()=>p.activeName,()=>{f(!0)}),(0,_vue.watch)(x,()=>{y()}),(0,_vue.onMounted)(()=>{var e=c.menuConfig,t=_ui.VxeUI.getComponent("VxeContextMenu");e&&!t&&errLog("vxe.error.reqComp",["vxe-context-menu"]),_ui.globalEvents.on(h,"resize",E),E()}),(0,_vue.onBeforeUnmount)(()=>{var e,t=v.value;t&&(e=t.parentNode)&&e.removeChild(t),_ui.globalEvents.off(h,"resize"),_xeUtils.default.assign(p,createReactData()),_xeUtils.default.assign(_,createInternalData())}),p.initialized=!!c.collapsed,p.activeName=c.modelValue,C(),f(!0),h.renderVN=()=>{var{loading:e,collapseFixed:t}=c;let{initialized:i,menuList:n,collapseStyle:l,isEnterCollapse:a}=p;var o=r.value;let u=x.value,s={};return t&&(s={onMouseenter:b,onMouseover:A,onMouseleave:q}),(0,_vue.h)("div",{ref:m,class:["vxe-menu",{["size--"+o]:o,"is--collapsed":u,"is--loading":e}]},[(0,_vue.h)("div",{class:"vxe-menu--item-list"},n.map(e=>(u?(t,i)=>{let{itemId:e,itemKey:n,level:l,hasChild:a,isActive:o,isExactActive:u,routerLink:s,childList:r}=t;return t.permissionCode&&!_ui.permission.checkVisible(t.permissionCode)?(0,_ui.renderEmptyElement)(h):(0,_vue.h)("div",{key:n,class:["vxe-menu--item-wrapper","vxe-menu--item-level"+l,{"is--exact-active":u,"is--active":o}],"data-menu-id":e},[s?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),{class:"vxe-menu--item-link",to:s,onContextmenu(e){U(e,t)},onClick(e){I(e,t,i)}},{default:()=>N(t,i)}):(0,_vue.h)("div",{class:"vxe-menu--item-link",onContextmenu(e){U(e,t)},onClick(e){I(e,t,i)}},N(t,i)),a?(0,_vue.h)("div",{class:"vxe-menu--item-group"},r.map(e=>S(e,r))):(0,_ui.renderEmptyElement)(h)])}:S)(e,n))),i?(0,_vue.h)("div",Object.assign({ref:v,class:["vxe-menu--collapse-wrapper",{["size--"+o]:o,"is--collapsed":u,"is--enter":a,"is--loading":e}],style:l},s),[u?(0,_vue.h)("div",{class:"vxe-menu--item-list"},n.map(e=>S(e,n))):(0,_ui.renderEmptyElement)(h)]):(0,_ui.renderEmptyElement)(h),(0,_vue.h)(_loading.default,{class:"vxe-list-view--loading",modelValue:e})])},h},render(){return this.renderVN()}});

package/lib/menu/style/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/lib/menu/style/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}