@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
3 lines (2 loc) • 2.62 kB
JavaScript
"use strict";const n=require("vue"),p=require("../../../common/enums/NeonDropdownPlacement.cjs.js"),v=require("../../../common/utils/NeonDropdownPlacementUtils.cjs.js"),w=require("../../../common/utils/NeonClosableUtils.cjs.js"),y=require("../../../common/enums/NeonSize.cjs.js"),N=require("../../../common/enums/NeonFunctionalColor.cjs.js"),S=require("../../../common/enums/NeonDropdownStyle.cjs.js"),g=require("../badge/NeonBadge.vue.cjs.js"),C=require("../../user-input/button/NeonButton.vue.cjs.js"),b=require("../expansion-indicator/NeonExpansionIndicator.vue.cjs.js"),q=n.defineComponent({name:"NeonDropdown",components:{NeonBadge:g,NeonButton:C,NeonExpansionIndicator:b},props:{id:{type:String},modelValue:{type:Boolean,required:!0},label:{type:String,default:null},image:{type:String,default:null},imageAlt:{type:String,default:null},icon:{type:String,default:null},indicator:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},size:{type:String,default:y.NeonSize.Medium},color:{type:String,default:N.NeonFunctionalColor.LowContrast},alternateColor:{type:String,default:null},dropdownStyle:{type:String,default:S.NeonDropdownStyle.SolidButton},placement:{type:String,default:p.NeonDropdownPlacement.BottomLeft},placementContainer:{type:Object,default:null},openOnHover:{type:Boolean,default:!1}},emits:["update:modelValue","dropdown-placement","blur","focus","button-ref"],setup(e,{emit:o}){const r=n.ref(null),l=n.ref(null),a=n.ref(e.placement),u=n.ref(null),d=()=>{o("update:modelValue",!1)},c=()=>{e.modelValue&&d()},t=()=>{if(e.modelValue&&r.value&&l.value){const i=a.value;a.value=v.NeonDropdownPlacementUtils.calculatePlacement(r.value,l.value,e.placement,e.placementContainer),i!==a.value&&o("dropdown-placement",a.value)}},s=()=>{!e.disabled&&!e.openOnHover&&(o("update:modelValue",!e.modelValue),setTimeout(t))},m=()=>{o("blur")},f=()=>{o("focus")};return n.onMounted(()=>{!e.openOnHover&&l.value&&(u.value=new w.NeonClosableUtils(l.value,c)),window.addEventListener("resize",t,{passive:!0}),window.addEventListener("scroll",t,{passive:!0}),e.placementContainer&&e.placementContainer.addEventListener("scroll",t,{passive:!0})}),n.onUnmounted(()=>{e.openOnHover||u.value&&u.value.destroy(),window.removeEventListener("resize",t),window.removeEventListener("scroll",t),e.placementContainer&&e.placementContainer.removeEventListener("scroll",t)}),n.watch(()=>r.value,i=>o("button-ref",i),{immediate:!0}),{dropdownButton:r,dropdownContent:l,dropdownPlacement:a,closableUtils:u,onClose:d,close:c,toggleOpen:s,onBlur:m,onFocus:f}}});module.exports=q;
//# sourceMappingURL=NeonDropdown.cjs.js.map