@aotearoan/neon/dist/components/user-input/search/NeonSearch.cjs.js

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

"use strict";const o=require("vue"),A=require("../../../common/enums/NeonSize.cjs.js"),C=require("../../../common/enums/NeonFunctionalColor.cjs.js"),L=require("../../presentation/dropdown/NeonDropdown.vue.cjs.js"),x=require("../../presentation/icon/NeonIcon.vue.cjs.js"),B=require("../input/NeonInput.vue.cjs.js"),V=require("../chip/NeonChip.vue.cjs.js"),i=require("../../../common/enums/NeonDropdownPlacement.cjs.js"),z=require("../../../common/utils/NeonScrollUtils.cjs.js"),O=o.defineComponent({name:"NeonSearch",components:{NeonChip:V,NeonDropdown:L,NeonIcon:x,NeonInput:B},props:{modelValue:{type:[String,Array],required:!0},placeholder:{type:String,required:!0},options:{type:Array,required:!0},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},size:{type:String,default:A.NeonSize.Medium},color:{type:String,default:C.NeonFunctionalColor.LowContrast},placement:{type:String,default:i.NeonDropdownPlacement.BottomLeft}},emits:["update:modelValue","filter-changed"],setup(n,{emit:f}){const w=o.useAttrs(),p=o.ref(null),u=o.ref(n.placement),r=o.ref(!1),c=o.ref(null),l=o.ref(-1),d=o.ref("");o.watch(()=>r.value,e=>{e&&n.options.length>0&&(c.value=n.options[0].key,l.value=0)});const N=()=>{switch(u.value){case i.NeonDropdownPlacement.TopLeft:case i.NeonDropdownPlacement.TopRight:case i.NeonDropdownPlacement.LeftBottom:case i.NeonDropdownPlacement.RightBottom:return!0}return!1},k=()=>{var t;const e=(t=p.value)==null?void 0:t.querySelector(".neon-search__option--highlighted");z.NeonScrollUtils.scrollIntoView(e)},h=(e,t)=>{const a=l.value+e;a>=0&&a<=n.options.length-1&&(l.value=a,c.value=n.options[l.value].key,t.preventDefault(),setTimeout(k))},s=e=>{f("update:modelValue",e)},g=e=>{n.multiple||s(""),d.value=e,f("filter-changed",e)},y=e=>{if(n.multiple){const t=n.modelValue.map(m=>m),a=t.findIndex(m=>m.key===e.key);a>=0?t.splice(a,1):t.push(e),s(t)}else s(e.key);g(n.multiple?"":e.label.toString())},v=e=>{if(r.value)switch(e.code){case"ArrowUp":case"ArrowDown":{const t=N()?-1:1;e.code==="ArrowUp"?h(-1*t,e):h(1*t,e)}break;case"Enter":case"Space":e.target.classList.contains("neon-search__input")||(y(n.options[l.value]),e.preventDefault());break;case"Tab":!e.ctrlKey&&!e.metaKey&&!e.altKey&&(r.value=!1);break}},S=e=>{u.value=e};o.onMounted(()=>{document.addEventListener("keydown",v)}),o.onUnmounted(()=>{document.removeEventListener("keydown",v)});const q=o.computed(()=>{const{onFilterChanged:e,...t}=w;return t}),D=e=>{c.value=e,l.value=n.options.findIndex(t=>t.key===e)},b=()=>r.value=!0,I=e=>s(n.modelValue.filter(t=>t.key!==e.key)),P=o.computed(()=>n.multiple?n.options:n.options.filter(e=>e.label!==d.value));return{dropdown:p,open:r,highlightedKey:c,filter:d,sanitizedAttributes:q,computedOptions:P,dropdownPlacement:u,onPlacement:S,onFilterChange:g,clickOption:y,changeHighlighted:D,showOptions:b,removeSelected:I}}});module.exports=O;
//# sourceMappingURL=NeonSearch.cjs.js.map