vexip-ui/lib/components/menu/menu.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const n=require("vue");require("../menu-item/index.cjs");require("../menu-group/index.cjs");require("../overflow/index.cjs");require("../renderer/index.cjs");const d=require("@vexip-ui/config"),v=require("@vexip-ui/utils"),P=require("./menu-rest.cjs"),_=require("./props.cjs"),$=require("./symbol.cjs"),B=require("../renderer/renderer.cjs"),C=require("./menu-item.cjs"),D=require("./menu-group.cjs"),H=require("../overflow/overflow.cjs");function U(s){return typeof s=="function"||Object.prototype.toString.call(s)==="[object Object]"&&!n.isVNode(s)}const J=Object.freeze(["top","right","bottom","left","none"]),K=n.defineComponent({name:"Menu",props:_.menuProps,emits:["update:active"],setup(s,{slots:b,emit:T,expose:x}){const t=d.useProps("menu",s,{active:{default:null,static:!0},accordion:!1,markerType:{default:"right",validator:e=>J.includes(e)},reduced:!1,horizontal:!1,transfer:!1,trigger:"hover",groupType:{default:"collapse",validator:e=>["collapse","dropdown"].includes(e)},tooltipReverse:null,options:{default:()=>[],static:!0},router:null,manualRoute:!1,indent:null,arrow:null,slots:()=>({})}),u=d.useNameHelper("menu"),i=new Set,l=n.ref(t.active),f=n.ref(!1),m=n.ref(),z=n.ref(),g=n.computed(()=>t.horizontal&&(t.markerType==="left"||t.markerType==="right")?"bottom":!t.horizontal&&(t.markerType==="top"||t.markerType==="bottom")?"right":t.markerType??(t.horizontal?"bottom":"right")),k=n.computed(()=>[u.b(),u.bs("vars"),u.bm(`marker-${g.value}`),{[u.bm("inherit")]:t.inherit,[u.bm("reduced")]:f.value,[u.bm("dropdown")]:t.groupType==="dropdown",[u.bm("horizontal")]:t.horizontal}]),I=n.computed(()=>{const e={};return v.isDefined(t.indent)&&(e[u.cv("indent-width")]=typeof t.indent=="number"?`${t.indent}px`:t.indent),e}),y=n.computed(()=>{var r,o;if((r=t.options)!=null&&r.length)return t.options;const e=(o=t.router)==null?void 0:o.options.routes;return e!=null&&e.length?M(e):[]}),h=n.computed(()=>{var e;return(e=t.router)==null?void 0:e.currentRoute.value});n.provide($.MENU_STATE,n.reactive({currentActive:l,isReduced:f,horizontal:n.toRef(t,"horizontal"),accordion:n.toRef(t,"accordion"),groupType:n.toRef(t,"groupType"),tooltipReverse:n.toRef(t,"tooltipReverse"),transfer:n.toRef(t,"transfer"),trigger:n.toRef(t,"trigger"),markerType:g,arrow:n.toRef(t,"arrow"),handleSelect:V,handleExpand:F,increaseItem:S,decreaseItem:N,doForEachItem:A,renderItemArrow:L})),n.watch(()=>t.active,e=>{e!==l.value&&(l.value=e)}),n.watch(()=>t.reduced,e=>{t.horizontal||(e?w():G())}),n.watch(h,e=>{var r;!t.manualRoute&&e&&(l.value=((r=e.meta)==null?void 0:r.label)??e.path)}),n.onMounted(()=>{var e;if(n.nextTick(()=>{!t.horizontal&&t.reduced&&w()}),t.router&&!t.manualRoute&&!l.value){const r=h.value;r&&(l.value=((e=r.meta)==null?void 0:e.label)??h.value.path)}}),x({expandItemByLabel:j});function M(e){const r={label:"",children:[]},o=Array.from(e).map(a=>({parent:r,route:a}));for(;o.length;){const{parent:a,route:c}=o.shift(),p=c.meta||{};if(p.menu===!1)continue;const q={...p,route:c,label:p.label||c.path,name:p.name||c.name};a.children||(a.children=[]),a.children.push(q),c.children&&o.push(...c.children.map(O=>({parent:q,route:O})))}return r.children}function S(e){i.add(e)}function N(e){i.delete(e)}function A(e){for(const r of i)e(r)}function V(e,r,o){l.value!==e&&(l.value=e,T("update:active",e),d.emitEvent(t.onSelect,e,r),!t.manualRoute&&t.router&&o&&t.router.push(o))}function F(e,r,o){r?d.emitEvent(t.onExpand,e,o):d.emitEvent(t.onReduce,e,o)}function w(){if(t.horizontal)return;let e=null;for(const r of i)r.cachedExpanded=r.showGroup,!e&&r.showGroup&&(e=r),r.toggleGroupExpanded(!1);f.value=!0}function G(){if(!t.horizontal&&(f.value=!1,m.value)){const e=m.value,r=()=>{requestAnimationFrame(()=>{e.removeEventListener("transitionend",r);const o=Array.from(i).find(a=>a.label===l.value);requestAnimationFrame(()=>{requestAnimationFrame(()=>{for(const a of i)a.groupExpanded=a.cachedExpanded;if(o){let a=o.parentState;for(;a;)a.groupExpanded=!0,a=a.parentState}})})})};e.addEventListener("transitionend",r)}}function j(e){for(const r of i)r.label===e&&r.toggleGroupExpanded(!0,!0)}function L(e,r){return n.renderSlot(b,"arrow",{...e},()=>{let o;return[n.createVNode(B,{renderer:t.slots.arrow,data:e},U(o=r())?o:{default:()=>[o]})]})}function R(e){return n.createVNode(C,{label:e.label,icon:e.icon,"icon-props":e.iconProps,disabled:e.disabled,children:e.children,route:e.route,meta:e.meta},{default:()=>[e.name?v.callIfFunc(e.name):e.label]})}function E(){return y.value.map(e=>e.group?n.createVNode(D,{key:e.label,label:e.name?v.callIfFunc(e.name):e.label},{default:()=>{var r;return[(r=e.children)!=null&&r.length?e.children.map(R):null]}}):R(e))}return()=>n.createVNode("ul",{ref:m,class:k.value,role:"menu",tabindex:-1,style:I.value},[n.renderSlot(b,"default",{},()=>t.horizontal?[n.createVNode(H,{class:u.be("overflow"),inherit:!0,key:0},{default:E,counter:({count:e})=>n.createVNode(P,{ref:z,menus:y.value.slice(-e)},null)})]:E())])}});module.exports=K;
//# sourceMappingURL=menu.cjs.map