@aotearoan/neon/dist/components/navigation/menu/NeonMenu.cjs.js

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

"use strict";const r=require("vue"),x=require("../link/NeonLink.vue.cjs.js"),E=require("../dropdown-menu/NeonDropdownMenu.vue.cjs.js"),W=require("../../../common/enums/NeonFunctionalColor.cjs.js"),z=require("../../../common/enums/NeonSize.cjs.js"),C=require("../../presentation/icon/NeonIcon.vue.cjs.js"),L=require("vue-router"),F=r.defineComponent({name:"NeonMenu",components:{NeonDropdownMenu:E,NeonLink:x,NeonIcon:C},props:{menu:{type:Array,required:!0},color:{type:String,default:W.NeonFunctionalColor.Brand},size:{type:String,default:z.NeonSize.Large},priorityMenuEnabled:{type:Boolean,default:!0}},emits:["click"],setup(a,{emit:w}){const d=L.useRoute(),f=r.ref(null),v=r.ref(null),o=r.ref(null),u=r.ref([]),y=r.ref([]),l=r.ref([]),h=n=>{const t=window.getComputedStyle(n),e=parseFloat(t.marginLeft||"0")+parseFloat(t.marginRight||"0");return Math.ceil(n.offsetWidth+e)},M=(n,t)=>({key:n,element:t,width:h(t)}),k=()=>{const n=a.menu.map((t,e)=>v.value&&M(t.key,v.value[e])||null);u.value=n.filter(t=>t!==null)},b=n=>n&&(d==null?void 0:d.path.indexOf(n))>=0,q=n=>{w("click",n)},N=(n,t,e)=>{if(e.map(i=>i.width).reduce((i,s)=>i?i+s:0)<=n-t)return e.map(i=>i.key);let m=n-t,c=[];for(let i=0;i<e.length;i=i+1){const s=e[i];if(m<s.width){i===1&&(c=c.filter(S=>S!==e[0].key));break}m=m-s.width,c.push(s.key)}return c},p=async()=>{await r.nextTick();const n=f.value&&h(f.value)||0,t=o.value&&h(o.value)||0;l.value=N(n,t,u.value),y.value=a.menu.filter(e=>l.value.indexOf(e.key)<0).flatMap(e=>[{...e,isGroup:e.children&&e.children.length>0},...(e.children||[]).map(g=>({...g,grouped:!0}))]),u.value.forEach(e=>{e.element.hidden=l.value.indexOf(e.key)<0}),o.value&&(o.value.hidden=u.value.length===l.value.length)};return r.onMounted(async()=>{a.priorityMenuEnabled&&(await r.nextTick(),k(),await p(),window.addEventListener("resize",p))}),r.onUnmounted(()=>{a.priorityMenuEnabled&&window.removeEventListener("resize",p)}),{menuWrapper:f,menuItem:v,menuItems:u,responsiveButton:o,responsiveMenuItems:y,visible:l,onClick:q,routeMatches:b}}});module.exports=F;
//# sourceMappingURL=NeonMenu.cjs.js.map