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