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

A vue based PC component library

"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()}});