@aotearoan/neon/dist/components/user-input/select/NeonSelect.cjs.js

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

"use strict";const n=require("vue"),A=require("../../../model/common/size/NeonSize.cjs.js"),x=require("../../../model/common/color/NeonFunctionalColor.cjs.js"),B=require("../../presentation/dropdown/NeonDropdown.vue.cjs.js"),L=require("../../presentation/icon/NeonIcon.vue.cjs.js"),z=require("../switch/NeonSwitch.vue.cjs.js"),c=require("../../../model/presentation/dropdown/NeonDropdownPlacement.cjs.js"),C=require("../../../utils/common/dom/NeonScrollUtils.cjs.js"),K=require("../../../model/presentation/dropdown/NeonDropdownStyle.cjs.js"),U=n.defineComponent({name:"NeonSelect",components:{NeonDropdown:B,NeonIcon:L,NeonSwitch:z},props:{id:{type:String},placeholder:{type:String,required:!0},placeholderAsOption:{type:Boolean,default:!1},placeholderIcon:{type:String,required:!1},options:{type:Array,required:!1},groupedOptions:{type:Array,required:!1},modelValue:{type:[String,Array],required:!0},multiple:{type:Boolean,default:!1},multiselectPlaceholder:{type:String,required:!1},disabled:{type:Boolean,default:!1},size:{type:String,default:A.NeonSize.Medium},color:{type:String,default:x.NeonFunctionalColor.Primary},buttonStyle:{type:String,default:K.NeonDropdownStyle.Input},placement:{type:String,default:c.NeonDropdownPlacement.BottomLeft}},emits:["update:modelValue"],setup(t,{emit:v}){const w=n.useAttrs(),y=n.ref(null),i=n.ref(!1),p=n.ref(t.placement),d=n.ref(null),u=n.ref(-1),a=n.computed(()=>{var e;return t.options?t.options:t.groupedOptions?(e=t.groupedOptions)==null?void 0:e.flatMap(l=>l.options):[]}),S=()=>{if(!t.groupedOptions)switch(p.value){case c.NeonDropdownPlacement.TopLeft:case c.NeonDropdownPlacement.TopRight:case c.NeonDropdownPlacement.LeftBottom:case c.NeonDropdownPlacement.RightBottom:return!0}return!1},k=()=>{var l,o;const e=(o=(l=y.value)==null?void 0:l.dropdownContent)==null?void 0:o.querySelector(".neon-select__option--highlighted");e&&(e.focus(),C.NeonScrollUtils.scrollIntoView(e))},s=(e,l)=>{const o=u.value+e;o>=0&&o<=a.value.length-1&&(u.value=o,d.value=a.value[u.value].key,l==null||l.preventDefault(),setTimeout(k))},f=e=>{v("update:modelValue",e)},g=e=>{if(t.multiple){const l=[...t.modelValue],o=l.findIndex(m=>m===e.key);o>=0?l.splice(o,1):l.push(e.key),f(l)}else t.modelValue!==e.key&&(i.value=!1,f(e.key))},h=e=>{if(i.value)switch(e.code){case"ArrowUp":case"ArrowDown":{const l=S()?-1:1;e.code==="ArrowUp"?s(-1*l,e):s(1*l,e)}break;case"Enter":case"Space":a.value[u.value].disabled||(g(a.value[u.value]),e.preventDefault());break;case"Tab":!e.ctrlKey&&!e.metaKey&&!e.altKey&&(i.value=!1);break}},N=n.computed(()=>t.groupedOptions||[{group:"",options:t.options||[]}]),q=n.computed(()=>{const{...e}=w;return e}),V=n.computed(()=>{if(t.multiple&&t.modelValue.length>0){if(t.multiselectPlaceholder)return t.multiselectPlaceholder;if(t.modelValue.length>1)return`${t.modelValue.length} items selected`;{const e=a.value.find(l=>l.key===t.modelValue[0]);return(e==null?void 0:e.label)||""}}else if(t.modelValue){const e=a.value.find(l=>l.key===t.modelValue);if(e)return e.label}return t.placeholder}),b=n.computed(()=>!t.modelValue||t.modelValue.length===0),P=n.computed(()=>{if(t.modelValue){const e=a.value.find(l=>l.key===t.modelValue);if(e)return e.icon}return t.placeholderIcon}),D=e=>{const l=Array.from(e.target.options).filter(r=>r.selected).map(r=>r.value),o=a.value.filter(r=>l.indexOf(r.key)>=0),m=t.multiple?o.map(r=>r.key):o[0].key;f(m)},I=e=>{d.value=e,u.value=a.value.findIndex(l=>l.key===e)},O=e=>{p.value=e};return n.onMounted(()=>{document.addEventListener("keydown",h)}),n.onUnmounted(()=>{document.removeEventListener("keydown",h)}),n.watch(()=>i.value,e=>{e&&(d.value=a.value[0].key,u.value=0,s(u.value))}),{dropdown:y,open:i,highlightedKey:d,highlightedIndex:u,flattenedOptions:a,computedLabel:V,sanitizedAttributes:q,computedOptions:N,computedIcon:P,labelIsPlaceholder:b,clickOption:g,nativeSelectChange:D,changeHighlighted:I,onPlacement:O}}});module.exports=U;
//# sourceMappingURL=NeonSelect.cjs.js.map