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