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