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