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