@alfsnd/vue-bootstrap-select
Version:
A vue version of bootstrap select
2 lines (1 loc) • 14.8 kB
JavaScript
var VueBootstrapSelect=function(e,n){"use strict";function t(){var e=document.head||document.getElementsByTagName("head")[0],n=t.styles||(t.styles={}),o="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(t,A){if(!document.querySelector('style[data-vue-ssr-id~="'+t+'"]')){var r=o?A.media||"default":t,i=n[r]||(n[r]={ids:[],parts:[],element:void 0});if(!i.ids.includes(t)){var d=A.source,a=i.ids.length;if(i.ids.push(t),o&&(i.element=i.element||document.querySelector("style[data-group="+r+"]")),!i.element){var s=i.element=document.createElement("style");s.type="text/css",A.media&&s.setAttribute("media",A.media),o&&(s.setAttribute("data-group",r),s.setAttribute("data-next-index","0")),e.appendChild(s)}if(o&&(a=parseInt(i.element.getAttribute("data-next-index")),i.element.setAttribute("data-next-index",a+1)),i.element.styleSheet)i.parts.push(d),i.element.styleSheet.cssText=i.parts.filter(Boolean).join("\n");else{var l=document.createTextNode(d),c=i.element.childNodes;c[a]&&i.element.removeChild(c[a]),c.length?i.element.insertBefore(l,c[a]):i.element.appendChild(l)}}}}}function o(e){o.installed||(o.installed=!0,e.component("VueBootstrapSelect",d))}var A={name:"VSelect",mixins:[n.mixin],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:function(){return[]}},searchable:{type:Boolean,default:!1},showDefaultOption:{type:Boolean,default:!1},textProp:{type:String,default:"text"},value:{type:[Object,String,Number],default:null},valueProp:{type:String,default:"value"}},data:function(){return{show:!1,selectedValue:null,searchValue:"",typeAheadPointer:-1}},computed:{title:function(){return this.selectedValue?this.getOptionLabel(this.selectedValue):this.labelTitle},filteredOptions:function(){var e=this;return this.searchable&&this.searchValue.length>0?this.options.filter(function(n){return"object"==typeof n?-1!==n[e.textProp].toLowerCase().indexOf(e.searchValue.toLowerCase()):-1!==n.toLowerCase().indexOf(e.searchValue.toLowerCase())}):this.options},reversedOptions:function(){return[].concat(this.filteredOptions).reverse()},lastOptionIndex:function(){return this.filteredOptions.length-1}},watch:{value:{immediate:!0,handler:function(e){var n=this,t=this.options.findIndex(function(t){return n.isEqualOption(t,e)});this.onSelect(e,t)}}},methods:{onSelect:function(e,n){e&&!e[this.disabledProp]?(this.selectedValue=e,this.typeAheadPointer=n,this.hideDropdown(),this.$emit("input",e,e[this.valueProp],n)):null===e&&(this.selectedValue=null)},onEscape:function(){this.hideDropdown()},typeAheadUp:function(){var e=this;if(this.show||(this.show=!0),this.typeAheadPointer>0){var n=this.typeAheadPointer-1,t=this.filteredOptions[n];!!t&&(t[this.disabledProp]||!1)?(this.typeAheadPointer--,this.typeAheadUp()):this.typeAheadPointer--}else{var o=this.reversedOptions.findIndex(function(n){return!0!==n[e.disabledProp]});this.typeAheadPointer=this.lastOptionIndex-o}},typeAheadDown:function(){var e=this;if(this.show||(this.show=!0),this.typeAheadPointer<this.lastOptionIndex){var n=this.typeAheadPointer+1,t=this.filteredOptions[n];!!t&&(t[this.disabledProp]||!1)?(this.typeAheadPointer++,this.typeAheadDown()):this.typeAheadPointer++}else{var o=this.filteredOptions.findIndex(function(n){return!0!==n[e.disabledProp]});this.typeAheadPointer=o}},typeAheadSelect:function(){this.filteredOptions[this.typeAheadPointer]&&this.onSelect(this.filteredOptions[this.typeAheadPointer],this.typeAheadPointer)},hideDropdown:function(){this.show=!1,this.searchValue=""},getOptionLabel:function(e){return"object"==typeof e?e[this.textProp]:e},isSelectedOption:function(e,n){return-1===this.typeAheadPointer&&this.selectedValue?this.isEqualOption(e,this.selectedValue):this.typeAheadPointer===n},isEqualOption:function(e,n){return e&&n&&"object"==typeof e&&"object"==typeof n?e[this.textProp]===n[this.textProp]&&e[this.valueProp]===n[this.valueProp]:e===n},toggle:function(){this.disabled||(this.show=!this.show)}}},r=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{directives:[{name:"on-clickaway",rawName:"v-on-clickaway",value:e.hideDropdown,expression:"hideDropdown"}],staticClass:"v-select",class:{disabled:e.disabled},on:{keyup:function(n){return"keyCode"in n&&e._k(n.keyCode,"esc",27,n.key,["Esc","Escape"])?null:e.onEscape(n)},keydown:[function(n){return"keyCode"in n&&e._k(n.keyCode,"up",38,n.key,["Up","ArrowUp"])?null:(n.preventDefault(),e.typeAheadUp(n))},function(n){return"keyCode"in n&&e._k(n.keyCode,"down",40,n.key,["Down","ArrowDown"])?null:(n.preventDefault(),e.typeAheadDown(n))},function(n){return"keyCode"in n&&e._k(n.keyCode,"enter",13,n.key,"Enter")?null:(n.preventDefault(),e.typeAheadSelect(n))}]}},[t("button",{staticClass:"v-select-toggle",attrs:{type:"button"},on:{click:e.toggle}},[t("div",[e._v(e._s(e.title))]),e._v(" "),t("div",{staticClass:"arrow-down"})]),e._v(" "),t("div",{directives:[{name:"show",rawName:"v-show",value:e.show,expression:"show"}],staticClass:"v-dropdown-container"},[t("div",{directives:[{name:"show",rawName:"v-show",value:e.searchable,expression:"searchable"}],staticClass:"v-bs-searchbox"},[t("input",{directives:[{name:"model",rawName:"v-model",value:e.searchValue,expression:"searchValue"}],staticClass:"form-control",attrs:{placeholder:e.labelSearchPlaceholder,type:"text",autofocus:""},domProps:{value:e.searchValue},on:{input:function(n){n.target.composing||(e.searchValue=n.target.value)}}})]),e._v(" "),t("ul",[t("li",{directives:[{name:"show",rawName:"v-show",value:e.searchable&&0===e.filteredOptions.length,expression:"searchable && filteredOptions.length === 0"}],staticClass:"v-dropdown-item"},[e._v(e._s(e.labelNotFound)+' "'+e._s(e.searchValue)+'"')]),e._v(" "),e.showDefaultOption?t("li",{staticClass:"v-dropdown-item disabled default-option"},[e._v(e._s(e.labelTitle))]):e._e(),e._v(" "),e._l(e.filteredOptions,function(n,o){return t("li",{key:"v-select-"+o,staticClass:"v-dropdown-item",class:{selected:e.isSelectedOption(n,o),disabled:n[e.disabledProp]},on:{click:function(t){return e.onSelect(n,o)}}},[e._v(e._s(e.getOptionLabel(n)))])})],2)])])},i=[];r._withStripped=!0;var d=function(e,n,t,o,A,r,i,d){var a=("function"==typeof t?t.options:t)||{};a.__file="/Users/luissandoval/Documents/Me/Github/vue-bootstrap-select/src/vue-bootstrap-select.vue",a.render||(a.render=e.render,a.staticRenderFns=e.staticRenderFns,a._compiled=!0,A&&(a.functional=!0)),a._scopeId=o;var s;if(n&&(s=function(e){n.call(this,i(e))}),void 0!==s)if(a.functional){var l=a.render;a.render=function(e,n){return s.call(n),l(e,n)}}else{var c=a.beforeCreate;a.beforeCreate=c?[].concat(c,s):[s]}return a}({render:r,staticRenderFns:i},function(e){e&&e("data-v-138dff1d_0",{source:'\n*[data-v-138dff1d] {\n box-sizing: border-box;\n}\ninput[data-v-138dff1d] {\n width: 100%;\n}\nul[data-v-138dff1d] {\n font-size: 12px;\n color: #424242;\n text-align: left;\n list-style: none;\n background-color: #fff;\n background-clip: padding-box;\n padding: 0px;\n margin: 2px 0px 0px 0px;\n}\n.v-select[data-v-138dff1d] {\n position: relative;\n width: 100%;\n height: 30px;\n cursor: pointer;\n}\n.v-select.disabled[data-v-138dff1d] {\n cursor: not-allowed;\n}\n.v-select.disabled .v-select-toggle[data-v-138dff1d] {\n background-color: #f8f9fa;\n border-color: #f8f9fa;\n opacity: 0.65;\n cursor: not-allowed;\n}\n.v-select.disabled .v-select-toggle[data-v-138dff1d]:focus {\n outline: 0 !important;\n}\n.v-select-toggle[data-v-138dff1d] {\n display: flex;\n justify-content: space-between;\n user-select: none;\n padding: 0.375rem 0.75rem;\n color: #212529;\n background-color: #f8f9fa;\n border-color: #d3d9df;\n width: 100%;\n text-align: right;\n white-space: nowrap;\n border: 1px solid transparent;\n padding: 0.375rem 0.75rem;\n font-size: 12px;\n font-family: inherit, sans-serif;\n line-height: 1.5;\n border-radius: 0.25rem;\n transition: background-color, border-color, box-shadow, 0.15s ease-in-out;\n cursor: pointer;\n}\n.v-select-toggle[data-v-138dff1d]:hover {\n background-color: #e2e6ea;\n border-color: #dae0e5;\n}\n.arrow-down[data-v-138dff1d] {\n display: inline-block;\n width: 0;\n height: 0;\n margin-left: 0.255em;\n margin-top: 7px;\n vertical-align: 0.255em;\n content: "";\n border-top: 0.3em solid;\n border-right: 0.3em solid transparent;\n border-bottom: 0;\n border-left: 0.3em solid transparent;\n}\n.v-dropdown-container[data-v-138dff1d] {\n position: absolute;\n width: 100%;\n background: red;\n padding: 0.5rem 0;\n margin: 0.125rem 0 0;\n color: #212529;\n text-align: left;\n list-style: none;\n background-color: #fff;\n background-clip: padding-box;\n border-radius: 0.25rem;\n border: 1px solid rgba(0, 0, 0, 0.15);\n z-index: 1000;\n}\n.v-dropdown-item[data-v-138dff1d] {\n text-decoration: none;\n line-height: 25px;\n padding: 0.5rem 1.25rem;\n user-select: none;\n}\n.v-dropdown-item[data-v-138dff1d]:hover:not(.default-option) {\n background-color: #f8f9fa;\n}\n.v-dropdown-item.disabled[data-v-138dff1d] {\n color: #9a9b9b;\n}\n.v-dropdown-item.selected[data-v-138dff1d] {\n background-color: #007bff;\n color: #fff;\n}\n.v-dropdown-item.selected[data-v-138dff1d]:hover {\n background-color: #007bff;\n color: #fff;\n}\n.v-dropdown-item.disabled[data-v-138dff1d] {\n cursor: not-allowed;\n}\n.v-dropdown-item.disabled[data-v-138dff1d]:hover {\n background-color: #fff;\n}\n.v-bs-searchbox[data-v-138dff1d] {\n padding: 4px 8px;\n}\n.v-bs-searchbox .form-control[data-v-138dff1d] {\n display: block;\n width: 100%;\n padding: 0.375rem 0.75rem;\n font-size: 1rem;\n line-height: 1.5;\n color: #495057;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid #ced4da;\n border-radius: 0.25rem;\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n\n/*# sourceMappingURL=vue-bootstrap-select.vue.map */',map:{version:3,sources:["/Users/luissandoval/Documents/Me/Github/vue-bootstrap-select/src/vue-bootstrap-select.vue","vue-bootstrap-select.vue"],names:[],mappings:";AAqPA;EACA,uBAAA;CACA;AAEA;EACA,YAAA;CACA;AAEA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,iBAAA;EACA,uBAAA;EACA,6BAAA;EACA,aAAA;EACA,wBAAA;CACA;AAEA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,gBAAA;CAgBA;AApBA;IAOA,oBAAA;CAYA;AAnBA;MAUA,0BAAA;MACA,sBAAA;MACA,cAAA;MACA,oBAAA;CAKA;AAlBA;QAgBA,sBAAA;CACA;AAKA;EACA,cAAA;EACA,+BAAA;EACA,kBAAA;EACA,0BAAA;EACA,eAAA;EACA,0BAAA;EACA,sBAAA;EACA,YAAA;EACA,kBAAA;EACA,oBAAA;EACA,8BAAA;EACA,0BAAA;EACA,gBAAA;EACA,iCAAA;EACA,iBAAA;EACA,uBAAA;EACA,0EAAA;EACA,gBAAA;CAMA;AAxBA;IAqBA,0BAAA;IACA,sBAAA;CACA;AAGA;EACA,sBAAA;EACA,SAAA;EACA,UAAA;EACA,qBAAA;EACA,gBAAA;EACA,wBAAA;EACA,YAAA;EACA,wBAAA;EACA,sCAAA;EACA,iBAAA;EACA,qCAAA;CACA;AAEA;EACA,mBAAA;EACA,YAAA;EACA,gBAAA;EACA,kBAAA;EACA,qBAAA;EACA,eAAA;EACA,iBAAA;EACA,iBAAA;EACA,uBAAA;EACA,6BAAA;EACA,uBAAA;EACA,sCAAA;EACA,cAAA;CACA;AAEA;EACA,sBAAA;EACA,kBAAA;EACA,wBAAA;EACA,kBAAA;CA2BA;AA/BA;IAOA,0BAAA;CACA;AARA;IAWA,eAAA;CACA;AAZA;IAeA,0BAAA;IACA,YAAA;CAMA;AAtBA;MAmBA,0BAAA;MACA,YAAA;CACA;AArBA;IAyBA,oBAAA;CAKA;AA9BA;MA4BA,uBAAA;CACA;AAIA;EACA,iBAAA;CAeA;AAhBA;IAIA,eAAA;IACA,YAAA;IACA,0BAAA;IACA,gBAAA;IACA,iBAAA;IACA,eAAA;IACA,uBAAA;IACA,6BAAA;IACA,0BAAA;IACA,uBAAA;IACA,yEAAA;CACA;;ACjRA,oDAAoD",file:"vue-bootstrap-select.vue",sourcesContent:[null,'* {\n box-sizing: border-box; }\n\ninput {\n width: 100%; }\n\nul {\n font-size: 12px;\n color: #424242;\n text-align: left;\n list-style: none;\n background-color: #fff;\n background-clip: padding-box;\n padding: 0px;\n margin: 2px 0px 0px 0px; }\n\n.v-select {\n position: relative;\n width: 100%;\n height: 30px;\n cursor: pointer; }\n .v-select.disabled {\n cursor: not-allowed; }\n .v-select.disabled .v-select-toggle {\n background-color: #f8f9fa;\n border-color: #f8f9fa;\n opacity: 0.65;\n cursor: not-allowed; }\n .v-select.disabled .v-select-toggle:focus {\n outline: 0 !important; }\n\n.v-select-toggle {\n display: flex;\n justify-content: space-between;\n user-select: none;\n padding: 0.375rem 0.75rem;\n color: #212529;\n background-color: #f8f9fa;\n border-color: #d3d9df;\n width: 100%;\n text-align: right;\n white-space: nowrap;\n border: 1px solid transparent;\n padding: 0.375rem 0.75rem;\n font-size: 12px;\n font-family: inherit, sans-serif;\n line-height: 1.5;\n border-radius: 0.25rem;\n transition: background-color, border-color, box-shadow, 0.15s ease-in-out;\n cursor: pointer; }\n .v-select-toggle:hover {\n background-color: #e2e6ea;\n border-color: #dae0e5; }\n\n.arrow-down {\n display: inline-block;\n width: 0;\n height: 0;\n margin-left: 0.255em;\n margin-top: 7px;\n vertical-align: 0.255em;\n content: "";\n border-top: 0.3em solid;\n border-right: 0.3em solid transparent;\n border-bottom: 0;\n border-left: 0.3em solid transparent; }\n\n.v-dropdown-container {\n position: absolute;\n width: 100%;\n background: red;\n padding: 0.5rem 0;\n margin: 0.125rem 0 0;\n color: #212529;\n text-align: left;\n list-style: none;\n background-color: #fff;\n background-clip: padding-box;\n border-radius: 0.25rem;\n border: 1px solid rgba(0, 0, 0, 0.15);\n z-index: 1000; }\n\n.v-dropdown-item {\n text-decoration: none;\n line-height: 25px;\n padding: 0.5rem 1.25rem;\n user-select: none; }\n .v-dropdown-item:hover:not(.default-option) {\n background-color: #f8f9fa; }\n .v-dropdown-item.disabled {\n color: #9a9b9b; }\n .v-dropdown-item.selected {\n background-color: #007bff;\n color: #fff; }\n .v-dropdown-item.selected:hover {\n background-color: #007bff;\n color: #fff; }\n .v-dropdown-item.disabled {\n cursor: not-allowed; }\n .v-dropdown-item.disabled:hover {\n background-color: #fff; }\n\n.v-bs-searchbox {\n padding: 4px 8px; }\n .v-bs-searchbox .form-control {\n display: block;\n width: 100%;\n padding: 0.375rem 0.75rem;\n font-size: 1rem;\n line-height: 1.5;\n color: #495057;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid #ced4da;\n border-radius: 0.25rem;\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }\n\n/*# sourceMappingURL=vue-bootstrap-select.vue.map */']},media:void 0})},A,"data-v-138dff1d",!1,void 0,t,void 0),a={install:o},s=null;return"undefined"!=typeof window?s=window.Vue:"undefined"!=typeof global&&(s=global.Vue),s&&s.use(a),e.default=d,e}({},vueClickaway);