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