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

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

"use strict";const d=require("./NeonSearch.cjs.js"),o=require("vue"),c=require("../../../_virtual/_plugin-vue_export-helper.cjs.js"),p={class:"neon-search__wrapper"},m={class:"no-style neon-search__options"},u=["id","onClick","onMouseover"],h={class:"neon-search__option-container"},b={class:"neon-search__option-label"};function k(e,l,v,y,C,g){const r=o.resolveComponent("neon-icon"),s=o.resolveComponent("neon-chip"),i=o.resolveComponent("neon-input"),t=o.resolveComponent("neon-dropdown");return o.openBlock(),o.createElementBlock("div",p,[o.createVNode(t,o.mergeProps({ref:"dropdown",modelValue:e.open,"onUpdate:modelValue":l[2]||(l[2]=n=>e.open=n),"aria-activedescendant":e.multiple&&Array.isArray(e.modelValue)?e.modelValue[0]&&e.modelValue[0].key:e.modelValue,"aria-multiselectable":e.multiple,class:[[`neon-search--${e.color}`,{"neon-search--multiple":e.multiple,"neon-search--disabled":e.disabled,"neon-search--empty":e.computedOptions.length===0}],"neon-search"],color:e.color,disabled:e.disabled,placement:e.dropdownPlacement,size:e.size,role:"listbox"},e.sanitizedAttributes,{onDropdownPlacement:e.onPlacement}),{"dropdown-button":o.withCtx(()=>[o.createElementVNode("div",{ref:"dropdownButton",class:o.normalizeClass([[`neon-search__container--${e.size}`,`neon-search__container--${e.color}`,{"neon-search__container--disabled":e.disabled}],"neon-search__container"])},[o.createVNode(r,{disabled:e.disabled,class:"neon-search__search-icon",color:"low-contrast",name:"search"},null,8,["disabled"]),e.multiple&&Array.isArray(e.modelValue)?(o.openBlock(!0),o.createElementBlock(o.Fragment,{key:0},o.renderList(e.modelValue,(n,a)=>(o.openBlock(),o.createBlock(s,{id:n.key,key:n.key,class:o.normalizeClass({"neon-chip--last-chip":a===e.modelValue.length-1}),color:n.chipColor,disabled:e.disabled,label:n.label,size:e.size,action:"remove","aria-selected":"true",role:"option",onClose:_=>e.removeSelected(n)},null,8,["id","class","color","disabled","label","size","onClose"]))),128)):o.createCommentVNode("",!0),o.createVNode(i,o.mergeProps({disabled:e.disabled,modelValue:e.filter,placeholder:e.placeholder,size:e.size,class:"neon-search__input"},e.sanitizedAttributes,{onFocus:l[0]||(l[0]=n=>e.showOptions()),"onUpdate:modelValue":e.onFilterChange,onIconClick:l[1]||(l[1]=n=>e.onFilterChange(""))}),null,16,["disabled","modelValue","placeholder","size","onUpdate:modelValue"])],2)]),default:o.withCtx(()=>[o.createElementVNode("ul",m,[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(e.computedOptions,n=>(o.openBlock(),o.createElementBlock("li",{id:n.key,key:n.key,class:o.normalizeClass([[{"neon-search__option--separator-before":n.separatorBefore,"neon-search__option--highlighted":n.key===e.highlightedKey},`neon-search__option--${e.size}`],"neon-search__option"]),"aria-selected":"false",role:"option",onClick:a=>e.clickOption(n),onMouseover:a=>e.changeHighlighted(n.key)},[o.createElementVNode("div",h,[o.renderSlot(e.$slots,"option",{option:n},()=>[n.icon?(o.openBlock(),o.createBlock(r,{key:0,name:n.icon,class:"neon-search__option-icon"},null,8,["name"])):o.createCommentVNode("",!0),o.createElementVNode("span",b,o.toDisplayString(n.label),1)])])],42,u))),128))])]),_:3},16,["modelValue","aria-activedescendant","aria-multiselectable","class","color","disabled","placement","size","onDropdownPlacement"])])}const V=c(d,[["render",k]]);module.exports=V;
//# sourceMappingURL=NeonSearch.vue.cjs.js.map