@aotearoan/neon/dist/components/navigation/dropdown-menu/NeonDropdownMenu.cjs.js

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

"use strict";const n=require("vue"),q=require("../../../common/enums/NeonSize.cjs.js"),D=require("../../../common/enums/NeonFunctionalColor.cjs.js"),S=require("../../presentation/dropdown/NeonDropdown.vue.cjs.js"),s=require("../../../common/enums/NeonDropdownPlacement.cjs.js"),P=require("../../../common/utils/NeonScrollUtils.cjs.js"),B=require("../../presentation/icon/NeonIcon.vue.cjs.js"),I=require("../link/NeonLink.vue.cjs.js"),L=n.defineComponent({name:"NeonDropdownMenu",components:{NeonDropdown:S,NeonIcon:B,NeonLink:I},props:{model:{type:Array,required:!0},size:{type:String,default:q.NeonSize.Medium},color:{type:String,default:D.NeonFunctionalColor.LowContrast},disabled:{type:Boolean,default:!1},openOnHover:{type:Boolean,default:!1}},emits:["click","button-ref"],setup(t,{emit:d}){const h=n.useAttrs(),f=n.ref(null),m=n.ref(null),v=n.ref([]),a=n.ref(!1),c=n.ref(null),l=n.ref(-1),y=e=>{c.value=e,l.value=t.model.findIndex(o=>o.key===e)},g=e=>{m.value=e},N=()=>{switch(m.value){case s.NeonDropdownPlacement.TopLeft:case s.NeonDropdownPlacement.TopRight:case s.NeonDropdownPlacement.LeftBottom:case s.NeonDropdownPlacement.RightBottom:return!0}return!1},p=()=>{var o;const e=(o=f.value)==null?void 0:o.querySelector(".neon-dropdown-menu__item--highlighted");P.NeonScrollUtils.scrollIntoView(e)},u=(e,o)=>{const r=l.value+e;r>=0&&r<=t.model.length-1&&(l.value=r,c.value=t.model[l.value].key,o.preventDefault(),setTimeout(p))},i=e=>{if(!t.disabled&&a.value)switch(e.code){case"ArrowUp":case"ArrowDown":{const o=N()?-1:1;e.code==="ArrowUp"?u(-1*o,e):u(1*o,e)}break;case"Enter":case"Space":t.model[l.value]&&!t.model[l.value].disabled&&(w(t.model[l.value]),e.preventDefault());break;case"Tab":!e.ctrlKey&&!e.metaKey&&!e.altKey&&(a.value=!1);break;case"Escape":a.value=!1;break}},w=e=>{var o;if(!e.disabled){if(e.href){const r=(o=v.value[l.value])==null?void 0:o.firstElementChild;r&&r.click()}else d("click",e);a.value=!1}},k=()=>{t.openOnHover&&(a.value=!0)},b=()=>{t.openOnHover&&(a.value=!1)};return n.onMounted(()=>{document.addEventListener("keydown",i)}),n.onUnmounted(()=>{document.removeEventListener("keydown",i)}),n.watch(()=>a.value,e=>{e&&(c.value=t.model[0].key,l.value=0)}),{dropdown:f,items:v,open:a,highlightedKey:c,highlightedIndex:l,attrs:h,emit:d,changeHighlighted:y,keyboardHandler:i,onBlur:b,onFocus:k,clickItem:w,navigateBy:u,onPlacement:g}}});module.exports=L;
//# sourceMappingURL=NeonDropdownMenu.cjs.js.map