vxe-pc-ui 4.7.13 → 4.7.14

package/lib/menu/src/menu.js

@@ -257,6 +257,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       });
       reactData.isEnterCollapse = true;
     };
+    const handleMenuMouseover = () => {
+      const {
+        isEnterCollapse
+      } = reactData;
+      if (!isEnterCollapse) {
+        handleMenuMouseenter();
+      }
+    };
     const handleMenuMouseleave = () => {
       const {
         collapseStyle
@@ -403,7 +411,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     };
     const renderVN = () => {
       const {
-        loading
+        loading,
+        collapseFixed
       } = props;
       const {
         initialized,
@@ -413,6 +422,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = reactData;
       const vSize = computeSize.value;
       const isCollapsed = computeIsCollapsed.value;
+      let ons = {};
+      if (collapseFixed) {
+        ons = {
+          onMouseenter: handleMenuMouseenter,
+          onMouseover: handleMenuMouseover,
+          onMouseleave: handleMenuMouseleave
+        };
+      }
       return (0, _vue.h)('div', {
         ref: refElem,
         class: ['vxe-menu', {
@@ -422,7 +439,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }]
       }, [(0, _vue.h)('div', {
         class: 'vxe-menu--item-list'
-      }, menuList.map(child => isCollapsed ? renderCollapseChildren(child, menuList) : renderDefaultChildren(child, menuList))), initialized ? (0, _vue.h)('div', {
+      }, menuList.map(child => isCollapsed ? renderCollapseChildren(child, menuList) : renderDefaultChildren(child, menuList))), initialized ? (0, _vue.h)('div', Object.assign({
         ref: refCollapseElem,
         class: ['vxe-menu--collapse-wrapper', {
           [`size--${vSize}`]: vSize,
@@ -430,10 +447,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           'is--enter': isEnterCollapse,
           'is--loading': loading
         }],
-        style: collapseStyle,
-        onMouseenter: handleMenuMouseenter,
-        onMouseleave: handleMenuMouseleave
-      }, [isCollapsed ? (0, _vue.h)('div', {
+        style: collapseStyle
+      }, ons), [isCollapsed ? (0, _vue.h)('div', {
         class: 'vxe-menu--item-list'
       }, menuList.map(child => renderDefaultChildren(child, menuList))) : (0, _ui.renderEmptyElement)($xeMenu)]) : (0, _ui.renderEmptyElement)($xeMenu),
       /**

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

@@ -1 +1 @@
-"use strict";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"),_loading=_interopRequireDefault(require("../../loading/src/loading"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeMenu",props:{modelValue:[String,Number],expandAll:Boolean,accordion:{type:Boolean,default:()=>(0,_ui.getConfig)().menu.accordion},collapsed:{type:Boolean,default:null},collapseFixed:Boolean,loading:Boolean,options:{type:Array,default:()=>[]},size:{type:String,default:()=>(0,_ui.getConfig)().menu.size||(0,_ui.getConfig)().size}},emits:["update:modelValue","click"],setup(o,e){const{emit:l,slots:u}=e;var i=_xeUtils.default.uniqueId();const t=(0,_vue.inject)("$xeLayoutAside",null),r=(0,_vue.ref)(),c=(0,_vue.ref)(),d=(0,_ui.useSize)(o)["computeSize"],v=(0,_vue.reactive)({initialized:!!o.collapsed,isEnterCollapse:!1,collapseStyle:{},collapseZindex:0,activeName:o.modelValue,menuList:[],itemHeight:1}),s={refElem:r},p=(0,_vue.computed)(()=>{var e=o["collapsed"];return _xeUtils.default.isBoolean(e)?e:!!t&&!!t.props.collapsed}),a=(0,_vue.computed)(()=>{let e="";return e=t?t.props.collapseWidth||"":e}),m=(0,_vue.computed)(()=>{let e="";return e=t?t.props.width||"":e}),n={computeSize:d},_={xID:i,props:o,context:e,reactData:v,getRefMaps:()=>s,getComputeMaps:()=>n},h=a=>{const o=v["activeName"];_xeUtils.default.eachTree(v.menuList,(e,i,t,l,s,n)=>{e.itemKey===o?(n.forEach(e=>{e.isActive=!0,a&&(e.isExpand=!0)}),e.isExactActive=!0):(e.isExactActive=!1,e.isActive=!1)},{children:"childList"})},x=()=>{const{options:e,expandAll:n}=o;v.menuList=_xeUtils.default.mapTree(e,(e,i,t,l,s)=>{return Object.assign(Object.assign({},e),{parentKey:s?s.name||l.slice(0,l.length-1).join(","):"",level:l.length,itemKey:e.name||l.join(","),isExactActive:!1,isActive:!1,isExpand:_xeUtils.default.isBoolean(e.expanded)?e.expanded:!!n,hasChild:e.children&&0<e.children.length})},{children:"children",mapChildren:"childList"})},E=()=>{var e=o["collapseFixed"];e&&(0,_vue.nextTick)(()=>{var e,i=v["isEnterCollapse"],t=p.value,l=m.value,s=a.value,n=r.value;n&&(e=n.getBoundingClientRect(),n=n.parentNode,v.collapseStyle=t?{top:(0,_dom.toCssUnit)(e.top),left:(0,_dom.toCssUnit)(e.left),height:(0,_dom.toCssUnit)(n.clientHeight),width:i?l?(0,_dom.toCssUnit)(l):"":s?(0,_dom.toCssUnit)(s):"",zIndex:v.collapseZindex}:{})})},f=()=>{var e=o["collapseFixed"];e&&(e=v["initialized"],p.value&&!e&&(v.initialized=!0,(0,_vue.nextTick)(()=>{var e=c.value;e&&document.body.appendChild(e)})),v.isEnterCollapse=!1,v.collapseZindex<(0,_utils.getLastZIndex)()&&(v.collapseZindex=(0,_utils.nextZIndex)()),E())},g=(e,i,t)=>{var l=o["accordion"],{hasChild:s,isExpand:n}=i;s&&(e.stopPropagation(),e.preventDefault(),l&&t.forEach(e=>{e!==i&&(e.isExpand=!1)}),i.isExpand=!n)},C=e=>{v.activeName=e,l("update:modelValue",e)},y=(e,i,t)=>{var{itemKey:l,routerLink:s,hasChild:n}=i;!s&&n?g(e,i,t):(C(l),U()),A("click",{menu:i},e)},k=()=>{var e=v["collapseStyle"],i=m.value;v.collapseStyle=Object.assign({},e,{width:i?(0,_dom.toCssUnit)(i):""}),v.isEnterCollapse=!0},U=()=>{var e=v["collapseStyle"],i=r.value;v.collapseStyle=Object.assign({},e,{width:i?(0,_dom.toCssUnit)(i.offsetWidth):""}),v.isEnterCollapse=!1},A=(e,i,t)=>{l(e,(0,_ui.createEvent)(t,{$menu:_},i))};i={dispatchEvent:A};Object.assign(_,i,{});const N=(i,t)=>{var{icon:e,isExpand:l,hasChild:s,slots:n}=i,n=n?n.default:u.option,a=""+((a=i).title||a.name),o=p.value;return[(0,_vue.h)("div",{class:"vxe-menu--item-link-icon"},e?[(0,_vue.h)("i",{class:e})]:[]),n?(0,_vue.h)("div",{class:"vxe-menu--item-custom-title"},(e={option:i,collapsed:o},(o=n)&&(_xeUtils.default.isString(o)&&(o=u[o]||null),_xeUtils.default.isFunction(o))?(0,_vn.getSlotVNs)(o(e)):[])):(0,_vue.h)("div",{class:"vxe-menu--item-link-title",title:a},a),s?(0,_vue.h)("div",{class:"vxe-menu--item-link-collapse",onClick(e){g(e,i,t)}},[(0,_vue.h)("i",{class:l?(0,_ui.getIcon)().MENU_ITEM_EXPAND_OPEN:(0,_ui.getIcon)().MENU_ITEM_EXPAND_CLOSE})]):(0,_ui.renderEmptyElement)(_)]},z=(i,t)=>{const{itemKey:e,level:l,hasChild:s,isActive:n,isExactActive:a,isExpand:o,routerLink:u,childList:r}=i;var c=v["isEnterCollapse"],d=p.value;return i.permissionCode&&!_ui.permission.checkVisible(i.permissionCode)?(0,_ui.renderEmptyElement)(_):(0,_vue.h)("div",{key:e,class:["vxe-menu--item-wrapper","vxe-menu--item-level"+l,{"is--exact-active":a,"is--active":n,"is--expand":(!d||c)&&o}]},[u?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),{class:"vxe-menu--item-link",to:u,onClick(e){y(e,i,t)}},{default:()=>N(i,t)}):(0,_vue.h)("div",{class:"vxe-menu--item-link",onClick(e){y(e,i,t)}},N(i,t)),s?(0,_vue.h)("div",{class:"vxe-menu--item-group"},r.map(e=>z(e,r))):(0,_ui.renderEmptyElement)(_)])};const S=(0,_vue.ref)(0);return(0,_vue.watch)(()=>o.options?o.options.length:-1,()=>{S.value++}),(0,_vue.watch)(()=>o.options,()=>{S.value++}),(0,_vue.watch)(S,()=>{x(),h(!0)}),(0,_vue.watch)(()=>o.modelValue,e=>{v.activeName=e}),(0,_vue.watch)(()=>v.activeName,()=>{h(!0)}),(0,_vue.watch)(p,()=>{f()}),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(_,"resize",E),E()}),(0,_vue.onBeforeUnmount)(()=>{_ui.globalEvents.off(_,"resize");var e,i=c.value;i&&(e=i.parentNode)&&e.removeChild(i)}),x(),h(!0),_.renderVN=()=>{var e=o["loading"];const{initialized:i,menuList:t,collapseStyle:l,isEnterCollapse:s}=v;var n=d.value;const a=p.value;return(0,_vue.h)("div",{ref:r,class:["vxe-menu",{["size--"+n]:n,"is--collapsed":a,"is--loading":e}]},[(0,_vue.h)("div",{class:"vxe-menu--item-list"},t.map(e=>(a?(i,t)=>{const{itemKey:e,level:l,hasChild:s,isActive:n,isExactActive:a,routerLink:o,childList:u}=i;return i.permissionCode&&!_ui.permission.checkVisible(i.permissionCode)?(0,_ui.renderEmptyElement)(_):(0,_vue.h)("div",{key:e,class:["vxe-menu--item-wrapper","vxe-menu--item-level"+l,{"is--exact-active":a,"is--active":n}]},[o?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),{class:"vxe-menu--item-link",to:o,onClick(e){y(e,i,t)}},{default:()=>N(i,t)}):(0,_vue.h)("div",{class:"vxe-menu--item-link",onClick(e){y(e,i,t)}},N(i,t)),s?(0,_vue.h)("div",{class:"vxe-menu--item-group"},u.map(e=>z(e,u))):(0,_ui.renderEmptyElement)(_)])}:z)(e,t))),i?(0,_vue.h)("div",{ref:c,class:["vxe-menu--collapse-wrapper",{["size--"+n]:n,"is--collapsed":a,"is--enter":s,"is--loading":e}],style:l,onMouseenter:k,onMouseleave:U},[a?(0,_vue.h)("div",{class:"vxe-menu--item-list"},t.map(e=>z(e,t))):(0,_ui.renderEmptyElement)(_)]):(0,_ui.renderEmptyElement)(_),(0,_vue.h)(_loading.default,{class:"vxe-list-view--loading",modelValue:e})])},_},render(){return this.renderVN()}});
+"use strict";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"),_loading=_interopRequireDefault(require("../../loading/src/loading"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeMenu",props:{modelValue:[String,Number],expandAll:Boolean,accordion:{type:Boolean,default:()=>(0,_ui.getConfig)().menu.accordion},collapsed:{type:Boolean,default:null},collapseFixed:Boolean,loading:Boolean,options:{type:Array,default:()=>[]},size:{type:String,default:()=>(0,_ui.getConfig)().menu.size||(0,_ui.getConfig)().size}},emits:["update:modelValue","click"],setup(r,e){const{emit:l,slots:u}=e;var i=_xeUtils.default.uniqueId();const t=(0,_vue.inject)("$xeLayoutAside",null),c=(0,_vue.ref)(),d=(0,_vue.ref)(),v=(0,_ui.useSize)(r)["computeSize"],p=(0,_vue.reactive)({initialized:!!r.collapsed,isEnterCollapse:!1,collapseStyle:{},collapseZindex:0,activeName:r.modelValue,menuList:[],itemHeight:1}),s={refElem:c},m=(0,_vue.computed)(()=>{var e=r["collapsed"];return _xeUtils.default.isBoolean(e)?e:!!t&&!!t.props.collapsed}),a=(0,_vue.computed)(()=>{let e="";return e=t?t.props.collapseWidth||"":e}),o=(0,_vue.computed)(()=>{let e="";return e=t?t.props.width||"":e}),n={computeSize:v},_={xID:i,props:r,context:e,reactData:p,getRefMaps:()=>s,getComputeMaps:()=>n},h=a=>{const o=p["activeName"];_xeUtils.default.eachTree(p.menuList,(e,i,t,l,s,n)=>{e.itemKey===o?(n.forEach(e=>{e.isActive=!0,a&&(e.isExpand=!0)}),e.isExactActive=!0):(e.isExactActive=!1,e.isActive=!1)},{children:"childList"})},x=()=>{const{options:e,expandAll:n}=r;p.menuList=_xeUtils.default.mapTree(e,(e,i,t,l,s)=>{return Object.assign(Object.assign({},e),{parentKey:s?s.name||l.slice(0,l.length-1).join(","):"",level:l.length,itemKey:e.name||l.join(","),isExactActive:!1,isActive:!1,isExpand:_xeUtils.default.isBoolean(e.expanded)?e.expanded:!!n,hasChild:e.children&&0<e.children.length})},{children:"children",mapChildren:"childList"})},E=()=>{var e=r["collapseFixed"];e&&(0,_vue.nextTick)(()=>{var e,i=p["isEnterCollapse"],t=m.value,l=o.value,s=a.value,n=c.value;n&&(e=n.getBoundingClientRect(),n=n.parentNode,p.collapseStyle=t?{top:(0,_dom.toCssUnit)(e.top),left:(0,_dom.toCssUnit)(e.left),height:(0,_dom.toCssUnit)(n.clientHeight),width:i?l?(0,_dom.toCssUnit)(l):"":s?(0,_dom.toCssUnit)(s):"",zIndex:p.collapseZindex}:{})})},f=()=>{var e=r["collapseFixed"];e&&(e=p["initialized"],m.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)()),E())},g=(e,i,t)=>{var l=r["accordion"],{hasChild:s,isExpand:n}=i;s&&(e.stopPropagation(),e.preventDefault(),l&&t.forEach(e=>{e!==i&&(e.isExpand=!1)}),i.isExpand=!n)},C=e=>{p.activeName=e,l("update:modelValue",e)},y=(e,i,t)=>{var{itemKey:l,routerLink:s,hasChild:n}=i;!s&&n?g(e,i,t):(C(l),A()),N("click",{menu:i},e)},k=()=>{var e=p["collapseStyle"],i=o.value;p.collapseStyle=Object.assign({},e,{width:i?(0,_dom.toCssUnit)(i):""}),p.isEnterCollapse=!0},U=()=>{var e=p["isEnterCollapse"];e||k()},A=()=>{var e=p["collapseStyle"],i=c.value;p.collapseStyle=Object.assign({},e,{width:i?(0,_dom.toCssUnit)(i.offsetWidth):""}),p.isEnterCollapse=!1},N=(e,i,t)=>{l(e,(0,_ui.createEvent)(t,{$menu:_},i))};i={dispatchEvent:N};Object.assign(_,i,{});const z=(i,t)=>{var{icon:e,isExpand:l,hasChild:s,slots:n}=i,n=n?n.default:u.option,a=""+((a=i).title||a.name),o=m.value;return[(0,_vue.h)("div",{class:"vxe-menu--item-link-icon"},e?[(0,_vue.h)("i",{class:e})]:[]),n?(0,_vue.h)("div",{class:"vxe-menu--item-custom-title"},(e={option:i,collapsed:o},(o=n)&&(_xeUtils.default.isString(o)&&(o=u[o]||null),_xeUtils.default.isFunction(o))?(0,_vn.getSlotVNs)(o(e)):[])):(0,_vue.h)("div",{class:"vxe-menu--item-link-title",title:a},a),s?(0,_vue.h)("div",{class:"vxe-menu--item-link-collapse",onClick(e){g(e,i,t)}},[(0,_vue.h)("i",{class:l?(0,_ui.getIcon)().MENU_ITEM_EXPAND_OPEN:(0,_ui.getIcon)().MENU_ITEM_EXPAND_CLOSE})]):(0,_ui.renderEmptyElement)(_)]},S=(i,t)=>{const{itemKey:e,level:l,hasChild:s,isActive:n,isExactActive:a,isExpand:o,routerLink:u,childList:r}=i;var c=p["isEnterCollapse"],d=m.value;return i.permissionCode&&!_ui.permission.checkVisible(i.permissionCode)?(0,_ui.renderEmptyElement)(_):(0,_vue.h)("div",{key:e,class:["vxe-menu--item-wrapper","vxe-menu--item-level"+l,{"is--exact-active":a,"is--active":n,"is--expand":(!d||c)&&o}]},[u?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),{class:"vxe-menu--item-link",to:u,onClick(e){y(e,i,t)}},{default:()=>z(i,t)}):(0,_vue.h)("div",{class:"vxe-menu--item-link",onClick(e){y(e,i,t)}},z(i,t)),s?(0,_vue.h)("div",{class:"vxe-menu--item-group"},r.map(e=>S(e,r))):(0,_ui.renderEmptyElement)(_)])};const w=(0,_vue.ref)(0);return(0,_vue.watch)(()=>r.options?r.options.length:-1,()=>{w.value++}),(0,_vue.watch)(()=>r.options,()=>{w.value++}),(0,_vue.watch)(w,()=>{x(),h(!0)}),(0,_vue.watch)(()=>r.modelValue,e=>{p.activeName=e}),(0,_vue.watch)(()=>p.activeName,()=>{h(!0)}),(0,_vue.watch)(m,()=>{f()}),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(_,"resize",E),E()}),(0,_vue.onBeforeUnmount)(()=>{_ui.globalEvents.off(_,"resize");var e,i=d.value;i&&(e=i.parentNode)&&e.removeChild(i)}),x(),h(!0),_.renderVN=()=>{var{loading:e,collapseFixed:i}=r;const{initialized:t,menuList:l,collapseStyle:s,isEnterCollapse:n}=p;var a=v.value;const o=m.value;let u={};return i&&(u={onMouseenter:k,onMouseover:U,onMouseleave:A}),(0,_vue.h)("div",{ref:c,class:["vxe-menu",{["size--"+a]:a,"is--collapsed":o,"is--loading":e}]},[(0,_vue.h)("div",{class:"vxe-menu--item-list"},l.map(e=>(o?(i,t)=>{const{itemKey:e,level:l,hasChild:s,isActive:n,isExactActive:a,routerLink:o,childList:u}=i;return i.permissionCode&&!_ui.permission.checkVisible(i.permissionCode)?(0,_ui.renderEmptyElement)(_):(0,_vue.h)("div",{key:e,class:["vxe-menu--item-wrapper","vxe-menu--item-level"+l,{"is--exact-active":a,"is--active":n}]},[o?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),{class:"vxe-menu--item-link",to:o,onClick(e){y(e,i,t)}},{default:()=>z(i,t)}):(0,_vue.h)("div",{class:"vxe-menu--item-link",onClick(e){y(e,i,t)}},z(i,t)),s?(0,_vue.h)("div",{class:"vxe-menu--item-group"},u.map(e=>S(e,u))):(0,_ui.renderEmptyElement)(_)])}:S)(e,l))),t?(0,_vue.h)("div",Object.assign({ref:d,class:["vxe-menu--collapse-wrapper",{["size--"+a]:a,"is--collapsed":o,"is--enter":n,"is--loading":e}],style:s},u),[o?(0,_vue.h)("div",{class:"vxe-menu--item-list"},l.map(e=>S(e,l))):(0,_ui.renderEmptyElement)(_)]):(0,_ui.renderEmptyElement)(_),(0,_vue.h)(_loading.default,{class:"vxe-list-view--loading",modelValue:e})])},_},render(){return this.renderVN()}});