@stanislav-ernst/vue-bootstrap-select
Version:
A Vue.js 3 version of bootstrap select.
2 lines (1 loc) • 6.13 kB
JavaScript
(function(t,r){typeof exports=="object"&&typeof module<"u"?module.exports=r(require("vue")):typeof define=="function"&&define.amd?define(["vue"],r):(t=typeof globalThis<"u"?globalThis:t||self,t.VueBootstrapSelect=r(t.Vue))})(this,function(t){"use strict";const r=function(){return document.ontouchstart!==null?"click":"touchstart"},a="__vue_click_away__",p=function(e,i,s){f(e);let d=s.context,o=i.value,l=!1;setTimeout(function(){l=!0},0),e[a]=function(h){if((!e||!e.contains(h.target))&&o&&l&&typeof o=="function")return o.call(d,h)},document.addEventListener(r(),e[a],!1)},f=function(e){document.removeEventListener(r(),e[a],!1),delete e[a]},u={directives:{ClickAway:{mounted:p,updated:function(e,i,s){i.value!==i.oldValue&&p(e,i,s)},unmounted:f}}},y=(e,i)=>{const s=e.__vccOpts||e;for(const[d,o]of i)s[d]=o;return s},w={name:"VueBootstrapSelect",mixins:[u],props:{disabled:{type:Boolean,default:!1},disabledProp:{type:String,default:"disabled"},labelTitle:{type:String,default:"Nothing selected"},labelNotFound:{type:String,default:"No results matched"},labelSearchPlaceholder:{type:String,default:"Search"},options:{type:Array,default:()=>[]},searchable:{type:Boolean,default:!1},showDefaultOption:{type:Boolean,default:!1},textProp:{type:String,default:"text"},descriptionProp:{type:Array,default:()=>["description"]},modelValue:{type:[Object,String,Number],default:null},valueProp:{type:String,default:"value"}},data(){return{show:!1,selectedValue:null,searchValue:"",typeAheadPointer:-1}},computed:{title(){return this.selectedValue?this.getOptionLabel(this.selectedValue):this.labelTitle},filteredOptions(){return this.searchable&&this.searchValue.length>0?this.options.filter(e=>typeof e=="object"?e[this.textProp].toLowerCase().indexOf(this.searchValue.toLowerCase())!==-1:e.toLowerCase().indexOf(this.searchValue.toLowerCase())!==-1):this.options},reversedOptions(){return[...this.filteredOptions].reverse()},lastOptionIndex(){return this.filteredOptions.length-1}},watch:{modelValue:{immediate:!0,handler(e){const i=this.options.findIndex(s=>this.isEqualOption(s,e));this.onSelect(e,i)}}},methods:{onSelect(e,i){e&&!e[this.disabledProp]?(this.selectedValue=e,this.typeAheadPointer=i,this.hideDropdown(),this.$emit("update:modelValue",e,e[this.valueProp],i)):e===null&&(this.selectedValue=null)},onEscape(){this.hideDropdown()},typeAheadUp(){if(this.show||(this.show=!0),this.typeAheadPointer>0){const e=this.typeAheadPointer-1,i=this.filteredOptions[e];i&&i[this.disabledProp]||!1?(this.typeAheadPointer--,this.typeAheadUp()):this.typeAheadPointer--}else{const e=this.reversedOptions.findIndex(i=>i[this.disabledProp]!==!0);this.typeAheadPointer=this.lastOptionIndex-e}},typeAheadDown(){if(this.show||(this.show=!0),this.typeAheadPointer<this.lastOptionIndex){const e=this.typeAheadPointer+1,i=this.filteredOptions[e];i&&i[this.disabledProp]||!1?(this.typeAheadPointer++,this.typeAheadDown()):this.typeAheadPointer++}else{const e=this.filteredOptions.findIndex(i=>i[this.disabledProp]!==!0);this.typeAheadPointer=e}},typeAheadSelect(){this.filteredOptions[this.typeAheadPointer]&&this.onSelect(this.filteredOptions[this.typeAheadPointer],this.typeAheadPointer)},hideDropdown(){this.show=!1,this.searchValue=""},getOptionLabel(e){return typeof e=="object"?e[this.textProp]:e},getOptionDescriptionLabel(e){if(typeof e=="object"){let i="";return this.descriptionProp.forEach(function(s){e[s]&&(i===""?i=e[s]:i=i+" - "+e[s])}),"- "+i}return""},isSelectedOption(e,i){return this.typeAheadPointer===-1&&this.selectedValue?this.isEqualOption(e,this.selectedValue):this.typeAheadPointer===i},isEqualOption(e,i){return e&&i&&typeof e=="object"&&typeof i=="object"?e[this.textProp]===i[this.textProp]&&e[this.valueProp]===i[this.valueProp]:e===i},toggle(){this.disabled||(this.show=!this.show)}}},m={class:"v-dropdown-container"},b={class:"v-bs-searchbox"},P=["placeholder"],V={key:0,class:"v-dropdown-item disabled default-option"},O=["onClick"],S={class:"text-muted"};function A(e,i,s,d,o,l){const h=t.resolveDirective("click-away");return t.withDirectives((t.openBlock(),t.createElementBlock("div",{onKeyup:i[2]||(i[2]=t.withKeys((...n)=>l.onEscape&&l.onEscape(...n),["esc"])),onKeydown:[i[3]||(i[3]=t.withKeys(t.withModifiers((...n)=>l.typeAheadUp&&l.typeAheadUp(...n),["prevent"]),["up"])),i[4]||(i[4]=t.withKeys(t.withModifiers((...n)=>l.typeAheadDown&&l.typeAheadDown(...n),["prevent"]),["down"])),i[5]||(i[5]=t.withKeys(t.withModifiers((...n)=>l.typeAheadSelect&&l.typeAheadSelect(...n),["prevent"]),["enter"]))],class:t.normalizeClass(["v-select",{disabled:s.disabled}])},[t.createElementVNode("button",{onClick:i[0]||(i[0]=(...n)=>l.toggle&&l.toggle(...n)),type:"button",class:"v-select-toggle"},[t.createElementVNode("div",null,t.toDisplayString(l.title),1),i[6]||(i[6]=t.createElementVNode("div",{class:"arrow-down"},null,-1))]),t.withDirectives(t.createElementVNode("div",m,[t.withDirectives(t.createElementVNode("div",b,[t.withDirectives(t.createElementVNode("input",{placeholder:s.labelSearchPlaceholder,class:"form-control",type:"text","onUpdate:modelValue":i[1]||(i[1]=n=>o.searchValue=n),autofocus:""},null,8,P),[[t.vModelText,o.searchValue]])],512),[[t.vShow,s.searchable]]),t.createElementVNode("ul",null,[t.withDirectives(t.createElementVNode("li",{class:"v-dropdown-item"},t.toDisplayString(s.labelNotFound)+' "'+t.toDisplayString(o.searchValue)+'" ',513),[[t.vShow,s.searchable&&l.filteredOptions.length===0]]),s.showDefaultOption?(t.openBlock(),t.createElementBlock("li",V,t.toDisplayString(s.labelTitle),1)):t.createCommentVNode("",!0),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(l.filteredOptions,(n,c)=>(t.openBlock(),t.createElementBlock("li",{key:`v-select-${c}`,class:t.normalizeClass(["v-dropdown-item",{selected:l.isSelectedOption(n,c),disabled:n[s.disabledProp]}]),onClick:E=>l.onSelect(n,c)},[t.createTextVNode(t.toDisplayString(l.getOptionLabel(n))+" ",1),t.createElementVNode("span",S,t.toDisplayString(l.getOptionDescriptionLabel(n)),1)],10,O))),128))])],512),[[t.vShow,o.show]])],34)),[[h,l.hideDropdown]])}return y(w,[["render",A],["__scopeId","data-v-dd5f839b"]])});