vue-search-select
Version:
A Vue.js search select form component
2 lines (1 loc) • 14 kB
JavaScript
(function(a,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],s):(a=typeof globalThis<"u"?globalThis:a||self,s(a.VueSearchSelect={},a.Vue))})(this,function(a,s){"use strict";const D="",o={openOptions(e){e.$refs.input.focus(),e.showMenu=!0,e.mousedownState=!1},blurInput(e){e.mousedownState||(e.searchText="",e.closeOptions()),e.$emit("blur")},closeOptions(e){e.$refs.input.blur(),e.showMenu=!1},prevItem(e){const t=e.pointer-1,r=e.$el.offsetHeight*t;t>=0&&(e.pointer=t),e.$refs.menu.scrollTop=r},nextItem(e){const t=e.pointer+1,r=e.$el.offsetHeight*t;t<=e.filteredOptions.length-1&&(e.pointer=t);const u=e.$refs.menu.offsetHeight,l=Math.ceil((e.$refs.menu.scrollTop+e.$el.offsetHeight)/u),i=Math.ceil(r/u);l!==i&&(e.$refs.menu.scrollTop=(i-1)*e.$refs.menu.offsetHeight)},enterItem(e){const t=e.filteredOptions[e.pointer],r=t.disabled;t&&!r&&e.selectItem(t)},pointerSet(e,t){e.pointer=t},pointerAdjust(e){e.pointer>=e.filteredOptions.length-1&&(e.pointer=e.filteredOptions.length?e.filteredOptions.length-1:0)},mousedownItem(e){e.mousedownState=!0}};function x(e){return new RegExp(e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),"i")}const c={props:{id:{default:null},name:{type:String,default:""},isError:{type:Boolean,default:!1},customAttr:{type:Function,default:()=>""},isDisabled:{type:Boolean,default:!1},placeholder:{type:String,default:""},filterPredicate:{type:Function,default:(e,t)=>e.match(x(t))}}},f=(e,t)=>{const r=e.__vccOpts||e;for(const[u,l]of t)r[u]=l;return r},y={name:"ModelSelect",mixins:[c],emits:["blur","searchchange","update:modelValue"],props:{modelValue:{type:[String,Number,Object,Boolean]},customAttr:{type:Function,default:()=>""},options:{type:Array}},data(){return{showMenu:!1,searchText:"",mousedownState:!1,pointer:-1}},watch:{value(e){this.pointer=this.filteredOptions.findIndex(t=>t.value===this.optionValue(e))},filteredOptions(){this.pointerAdjust()},searchText(){this.$emit("searchchange",this.searchText)}},computed:{searchTextCustomAttr(){return this.selectedOption&&this.selectedOption.value?this.customAttr(this.selectedOption):""},inputText(){if(this.searchText)return"";{let e=this.placeholder;return this.selectedOption&&(e=this.selectedOption.text),e}},customAttrs(){try{if(Array.isArray(this.options))return this.options.map(e=>this.customAttr(e))}catch{}return[]},textClass(){return!this.selectedOption&&this.placeholder?"default":""},menuClass(){return{visible:this.showMenu,hidden:!this.showMenu}},menuStyle(){return{display:this.showMenu?"block":"none"}},filteredOptions(){return this.searchText?this.options.filter(e=>{try{return this.filterPredicate(e.text,this.searchText)}catch{return!0}}):this.options},selectedOption(){return this.options.find(e=>e.value===this.optionValue(this.modelValue))}},methods:{deleteTextOrItem(){!this.searchText&&this.modelValue&&(this.selectItem({}),this.openOptions())},openOptions(){o.openOptions(this)},blurInput(){o.blurInput(this)},closeOptions(){o.closeOptions(this)},prevItem(){o.prevItem(this)},nextItem(){o.nextItem(this)},enterItem(){o.enterItem(this)},pointerSet(e){o.pointerSet(this,e)},pointerAdjust(){o.pointerAdjust(this)},mousedownItem(){o.mousedownItem(this)},selectItem(e){this.searchText="",this.closeOptions(),typeof this.modelValue=="object"&&this.modelValue?this.$emit("update:modelValue",e):(this.$emit("update:modelValue",e.value),e.value!==void 0&&e.value===e.text&&(this.searchText=e.value))},optionValue(e){return typeof e=="object"&&e!==null?e.value:e}}},b=s.createElementVNode("i",{class:"dropdown icon"},null,-1),O=["disabled","tabindex","id","name","value"],w=["data-vss-custom-attr"],I=["data-vss-custom-attr","onClick","onMouseenter"];function g(e,t,r,u,l,i){return s.openBlock(),s.createElementBlock("div",{class:s.normalizeClass(["ui fluid search selection dropdown",{"active visible":l.showMenu,error:e.isError,disabled:e.isDisabled}]),onClick:t[11]||(t[11]=(...n)=>i.openOptions&&i.openOptions(...n)),onFocus:t[12]||(t[12]=(...n)=>i.openOptions&&i.openOptions(...n))},[b,s.createElementVNode("input",{class:"search",autocomplete:"off",disabled:e.isDisabled,tabindex:e.isDisabled?-1:0,id:e.id,name:e.name,value:l.searchText,onInput:t[0]||(t[0]=n=>l.searchText=n.target.value),ref:"input",onFocus:t[1]||(t[1]=s.withModifiers((...n)=>i.openOptions&&i.openOptions(...n),["prevent"])),onKeyup:[t[2]||(t[2]=s.withKeys((...n)=>i.closeOptions&&i.closeOptions(...n),["esc"])),t[7]||(t[7]=s.withKeys(s.withModifiers((...n)=>i.enterItem&&i.enterItem(...n),["prevent"]),["enter"]))],onBlur:t[3]||(t[3]=(...n)=>i.blurInput&&i.blurInput(...n)),onKeydown:[t[4]||(t[4]=s.withKeys((...n)=>i.prevItem&&i.prevItem(...n),["up"])),t[5]||(t[5]=s.withKeys((...n)=>i.nextItem&&i.nextItem(...n),["down"])),t[6]||(t[6]=s.withKeys(s.withModifiers(()=>{},["prevent"]),["enter"])),t[8]||(t[8]=s.withKeys((...n)=>i.deleteTextOrItem&&i.deleteTextOrItem(...n),["delete"]))]},null,40,O),s.createElementVNode("div",{class:s.normalizeClass(["text",i.textClass]),"data-vss-custom-attr":i.searchTextCustomAttr},s.toDisplayString(i.inputText),11,w),s.createElementVNode("div",{class:s.normalizeClass(["menu",i.menuClass]),ref:"menu",onMousedown:t[10]||(t[10]=s.withModifiers(()=>{},["prevent"])),style:s.normalizeStyle(i.menuStyle),tabindex:"-1"},[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(i.filteredOptions,(n,d)=>(s.openBlock(),s.createElementBlock("div",{key:d,class:s.normalizeClass(["item",{selected:n.selected||l.pointer===d,disabled:n.disabled}]),"data-vss-custom-attr":i.customAttrs[d]?i.customAttrs[d]:"",onClick:s.withModifiers(h=>i.selectItem(n),["stop"]),onMousedown:t[9]||(t[9]=(...h)=>i.mousedownItem&&i.mousedownItem(...h)),onMouseenter:h=>i.pointerSet(d)},[s.renderSlot(e.$slots,"default",{option:n,idx:d},()=>[s.createTextVNode(s.toDisplayString(n.text),1)])],42,I))),128))],38)],34)}const m=f(y,[["render",g]]),S={name:"ModelListSelect",mixins:[c],emits:["blur","searchchange","update:modelValue"],render:function(){return s.h(m,{id:this.id,name:this.name,options:this.options,modelValue:this.innerValue,isError:this.isError,isDisabled:this.isDisabled,placeholder:this.placeholder,filterPredicate:this.filterPredicate,onBlur:()=>this.$emit("blur"),"onUpdate:modelValue":this.onInput,onSearchchange:e=>this.$emit("searchchange",e)})},props:{modelValue:{type:[String,Number,Object,Boolean]},list:{type:Array},optionValue:{type:String},optionText:{type:String},customText:{type:Function},optionDisabled:{type:String}},computed:{options(){return this.list.map(e=>({value:e[this.optionValue],text:this.buildText(e),disabled:!!e[this.optionDisabled]}))},innerValue(){return this.modelValue?typeof this.modelValue=="object"?this.modelValue?{value:this.modelValue[this.optionValue],text:this.buildText(this.modelValue),disabled:!!this.modelValue[this.optionDisabled]}:{value:"",text:"",disabled:!1}:this.modelValue:this.modelValue}},methods:{buildText(e){return e[this.optionValue]!==void 0?this.customText?this.customText(e):e[this.optionText]:""},onInput(e){if(e===void 0)return this.$emit("update:modelValue","");if(Object.keys(e).length===0&&e.constructor===Object)this.$emit("update:modelValue",e);else if(typeof e=="object"){const t=this.list.find(r=>r[this.optionValue]===e.value);this.$emit("update:modelValue",t)}else this.$emit("update:modelValue",e)}},components:{ModelSelect:m}},T={name:"MultiSelect",mixins:[c],emits:["blur","searchchange","select"],props:{customAttr:{type:Function,default:()=>""},options:{type:Array},selectedOptions:{type:Array},cleanSearch:{type:Boolean,default:!0},hideSelectedOptions:{type:Boolean,default:!1}},data(){return{showMenu:!1,searchText:"",mousedownState:!1,pointer:-1}},watch:{selectedOptions(){this.pointer=-1},filteredOptions(){this.pointerAdjust()},searchText(){this.$emit("searchchange",this.searchText)}},computed:{inputText(){return this.searchText?"":this.placeholder},textClass(){return this.placeholder?"default":""},inputWidth(){return{width:(this.searchText.length+1)*8+20+"px"}},menuClass(){return{visible:this.showMenu,hidden:!this.showMenu}},menuStyle(){return{display:this.showMenu?"block":"none"}},nonSelectOptions(){return this.options.filter(e=>this.selectedOptions.findIndex(t=>t.value===e.value)===-1)},filteredOptions(){return this.searchText?this.nonSelectOptions.filter(e=>{try{return this.cleanSearch?this.filterPredicate(this.accentsTidy(e.text),this.searchText):this.filterPredicate(e.text,this.searchText)}catch{return!0}}):this.nonSelectOptions}},methods:{deleteTextOrLastItem(){!this.searchText&&this.selectedOptions.length>0&&this.deleteItem(this.selectedOptions[this.selectedOptions.length-1])},openOptions(){o.openOptions(this)},blurInput(){o.blurInput(this)},closeOptions(){o.closeOptions(this)},prevItem(){o.prevItem(this),this.openOptions()},nextItem(){o.nextItem(this),this.openOptions()},enterItem(){o.enterItem(this)},pointerSet(e){o.pointerSet(this,e)},pointerAdjust(){o.pointerAdjust(this)},mousedownItem(){o.mousedownItem(this)},selectItem(e){const t=this.selectedOptions.concat(e),r=t.filter((u,l)=>t.indexOf(u)===l);this.closeOptions(),this.searchText="",this.$emit("select",r,e,"insert")},deleteItem(e){const t=this.selectedOptions.filter(r=>r.value!==e.value);this.$emit("select",t,e,"delete")},accentsTidy(e){let t=e.toString().toLowerCase();return t=t.replace(new RegExp("[àáâãäå]","g"),"a"),t=t.replace(new RegExp("æ","g"),"ae"),t=t.replace(new RegExp("ç","g"),"c"),t=t.replace(new RegExp("[èéêë]","g"),"e"),t=t.replace(new RegExp("[ìíîï]","g"),"i"),t=t.replace(new RegExp("ñ","g"),"n"),t=t.replace(new RegExp("[òóôõö]","g"),"o"),t=t.replace(new RegExp("œ","g"),"oe"),t=t.replace(new RegExp("[ùúûü]","g"),"u"),t=t.replace(new RegExp("[ýÿ]","g"),"y"),t}}},V=s.createElementVNode("i",{class:"dropdown icon"},null,-1),M=["data-vss-custom-attr"],E=["onClick"],k=["disabled","tabindex","id","name"],C=["data-vss-custom-attr","onClick","onMouseenter"];function A(e,t,r,u,l,i){return s.openBlock(),s.createElementBlock("div",{class:s.normalizeClass(["ui fluid search dropdown selection multiple",{"active visible":l.showMenu,error:e.isError,disabled:e.isDisabled}]),onClick:t[11]||(t[11]=(...n)=>i.openOptions&&i.openOptions(...n)),onFocus:t[12]||(t[12]=(...n)=>i.openOptions&&i.openOptions(...n))},[V,r.hideSelectedOptions?s.createCommentVNode("",!0):(s.openBlock(!0),s.createElementBlock(s.Fragment,{key:0},s.renderList(r.selectedOptions,(n,d)=>(s.openBlock(),s.createElementBlock("a",{key:d,class:"ui label transition visible",style:{display:"inline-block !important"},"data-vss-custom-attr":r.customAttr(n)},[s.renderSlot(e.$slots,"selected",{option:n,idx:d},()=>[s.createTextVNode(s.toDisplayString(n.text),1),s.createElementVNode("i",{class:"delete icon",onClick:h=>i.deleteItem(n)},null,8,E)])],8,M))),128)),s.withDirectives(s.createElementVNode("input",{class:"search",autocomplete:"off",disabled:e.isDisabled,tabindex:e.isDisabled?-1:0,id:e.id,name:e.name,"onUpdate:modelValue":t[0]||(t[0]=n=>l.searchText=n),ref:"input",style:s.normalizeStyle(i.inputWidth),onFocus:t[1]||(t[1]=s.withModifiers((...n)=>i.openOptions&&i.openOptions(...n),["prevent"])),onKeyup:[t[2]||(t[2]=s.withKeys((...n)=>i.closeOptions&&i.closeOptions(...n),["esc"])),t[7]||(t[7]=s.withKeys(s.withModifiers((...n)=>i.enterItem&&i.enterItem(...n),["prevent"]),["enter"]))],onBlur:t[3]||(t[3]=(...n)=>i.blurInput&&i.blurInput(...n)),onKeydown:[t[4]||(t[4]=s.withKeys((...n)=>i.prevItem&&i.prevItem(...n),["up"])),t[5]||(t[5]=s.withKeys((...n)=>i.nextItem&&i.nextItem(...n),["down"])),t[6]||(t[6]=s.withKeys(s.withModifiers(()=>{},["prevent"]),["enter"])),t[8]||(t[8]=s.withKeys((...n)=>i.deleteTextOrLastItem&&i.deleteTextOrLastItem(...n),["delete"]))]},null,44,k),[[s.vModelText,l.searchText]]),s.createElementVNode("div",{class:s.normalizeClass(["text",i.textClass])},s.toDisplayString(i.inputText),3),s.createElementVNode("div",{class:s.normalizeClass(["menu",i.menuClass]),ref:"menu",onMousedown:t[10]||(t[10]=s.withModifiers(()=>{},["prevent"])),style:s.normalizeStyle(i.menuStyle),tabindex:"-1"},[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(i.filteredOptions,(n,d)=>(s.openBlock(),s.createElementBlock("div",{key:d,class:s.normalizeClass(["item",{selected:n.selected||l.pointer===d,disabled:n.disabled}]),"data-vss-custom-attr":r.customAttr(n),onClick:s.withModifiers(h=>i.selectItem(n),["stop"]),onMousedown:t[9]||(t[9]=(...h)=>i.mousedownItem&&i.mousedownItem(...h)),onMouseenter:h=>i.pointerSet(d)},[s.renderSlot(e.$slots,"default",{option:n,idx:d},()=>[s.createTextVNode(s.toDisplayString(n.text),1)])],42,C))),128))],38)],34)}const p=f(T,[["render",A]]),B={name:"MultiListSelect",mixins:[c],emits:["blur","searchchange","select"],render:function(){return s.h(p,{id:this.id,name:this.name,options:this.options,selectedOptions:this.items,isError:this.isError,isDisabled:this.isDisabled,placeholder:this.placeholder,filterPredicate:this.filterPredicate,onSelect:this.onSelect,onSearchchange:e=>this.$emit("searchchange",e)})},props:{list:{type:Array},optionValue:{type:String},optionText:{type:String},customText:{type:Function},selectedItems:{type:Array},optionDisabled:{type:String}},computed:{options(){return this.list.map(e=>({value:e[this.optionValue],text:this.buildText(e),disabled:!!e[this.optionDisabled]}))},items(){return this.selectedItems.map(e=>({value:e[this.optionValue],text:this.buildText(e),disabled:!!e[this.optionDisabled]}))}},methods:{buildText(e){return e[this.optionValue]!==void 0?this.customText?this.customText(e):e[this.optionText]:""},onSelect(e,t){if(Object.keys(t).length===0&&t.constructor===Object)this.$emit("select",e,t);else{const r=this.list.filter((l,i)=>e.find((n,d)=>l[this.optionValue]===n.value)),u=this.list.find(l=>l[this.optionValue]===t.value);this.$emit("select",r,u)}}},components:{MultiSelect:p}};a.ModelListSelect=S,a.ModelSelect=m,a.MultiListSelect=B,a.MultiSelect=p,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});