vxe-pc-ui/lib/menu/src/menu.min.js

A vue based PC component library

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{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),z("menu-click",i,e.$event)}}})),z("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),A()),{currentMenu:i,menu:i});z("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},V=()=>{var e=p.isEnterCollapse;e||b()},A=()=>{var e=p.collapseStyle,i=v.value;p.collapseStyle=Object.assign({},e,{width:i?(0,_dom.toCssUnit)(i.offsetWidth):""}),p.isEnterCollapse=!1},N=(e,i)=>e&&(_xeUtils.default.isString(e)&&(e=c[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(i)):[],z=(e,i,t)=>{n(e,(0,_ui.createEvent)(t,{$menu:x},i))};i={dispatchEvent:z};Object.assign(x,i,{});let I=(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?N(o,r):e?[(0,_vue.h)("i",{class:e})]:[]),s?(0,_vue.h)("div",{class:"vxe-menu--item-custom-title"},N(s,r)):(0,_vue.h)("div",{class:"vxe-menu--item-link-title",title:a},u?N(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)]},L=(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:()=>I(i,t)}):(0,_vue.h)("div",{class:"vxe-menu--item-link",onContextmenu(e){M(e,i)},onClick(e){U(e,i,t)}},I(i,t)),l?(0,_vue.h)("div",{class:"vxe-menu--item-group"},r.map(e=>L(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&&(0,_log.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:V,onMouseleave:A}),(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:()=>I(i,t)}):(0,_vue.h)("div",{class:"vxe-menu--item-link",onContextmenu(e){M(e,i)},onClick(e){U(e,i,t)}},I(i,t)),l?(0,_vue.h)("div",{class:"vxe-menu--item-group"},a.map(e=>L(e,a))):(0,_ui.renderEmptyElement)(x)])}:L)(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=>L(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()}});