vue-simple-multi-select - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/index.js

@@ -1,2 +0,2 @@
-import VueSingleSelect from './VueSingleSelect.vue';
-export default VueSingleSelect;
+import VueMultiSelect from './VueMultiSelect.vue';
+export default VueMultiSelect;

dist/vue-multi-select.js

@@ -1,1 +0,1 @@
-!function(t,e){for(var n in e)t[n]=e[n]}(window,function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(i,o,function(e){return t[e]}.bind(null,o));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(t,e,n){"use strict";var i=function(t,e,n,i,o,r,a,s){var d=typeof(t=t||{}).default;"object"!==d&&"function"!==d||(t=t.default);var l,f="function"==typeof t?t.options:t;if(e&&(f.render=e,f.staticRenderFns=n,f._compiled=!0),i&&(f.functional=!0),r&&(f._scopeId=r),a?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},f._ssrRegister=l):o&&(l=s?function(){o.call(this,this.$root.$options.shadowRoot)}:o),l)if(f.functional){f._injectStyles=l;var p=f.render;f.render=function(t,e){return l.call(e),p(t,e)}}else{var c=f.beforeCreate;f.beforeCreate=c?[].concat(c,l):[l]}return{exports:t,options:f}}({mixins:[{watch:{pointer(){this.maybeAdjustScroll()}},data:()=>({pointer:-1}),methods:{maybeAdjustScroll(){let t=this.pixelsToPointerTop(),e=this.pixelsToPointerBottom();return t<=this.viewport().top?this.scrollTo(t):e>=this.viewport().bottom?this.scrollTo(this.viewport().top+this.pointerHeight()):void 0},pixelsToPointerTop(){let t=0;if(!this.$refs.options)return 0;for(let e=0;e<this.pointer;e++)t+=this.$refs.options.children[e].offsetHeight;return t},pixelsToPointerBottom(){return this.pixelsToPointerTop()+this.pointerHeight()},pointerHeight(){let t=!!this.$refs.options&&this.$refs.options.children[this.pointer];return t?t.offsetHeight:0},viewport(){return{top:this.$refs.options?this.$refs.options.scrollTop:0,bottom:this.$refs.options?this.$refs.options.offsetHeight+this.$refs.options.scrollTop:0}},scrollTo(t){return this.$refs.options?this.$refs.options.scrollTop=t:null}}}],mounted(){document.addEventListener("click",this.handleClickOutside),document.addEventListener("keyup",this.handleClickOutside),this.searchText=this.initial},destroyed(){document.removeEventListener("keyup",this.handleClickOutside),document.removeEventListener("click",this.handleClickOutside)},watch:{searchText(t,e){t!==e&&(this.pointer=-1)},selectedOptions(t,e){this.$emit("input",t)}},data:()=>({selectedOptions:[],searchText:null,selectedOption:null,dropdownOpen:!1,closed:!1}),props:{value:{required:!0},classes:{type:Object,required:!1,default:()=>({active:"active",wrapper:"select-wrapper",required:"required",dropdown:"dropdown"})},name:{type:String,required:!1,default:()=>""},options:{type:Array,required:!1,default:()=>[]},optionLabel:{type:String,required:!1,default:()=>null},optionKey:{type:String,required:!1,default:()=>null},placeholder:{type:String,required:!1,default:()=>"Search Here"},maxHeight:{type:String,default:()=>"220px",required:!1},inputId:{type:String,default:()=>"multi-select",required:!1},initial:{type:String,required:!1,default:()=>null},required:{type:Boolean,required:!1,default:()=>!1},maxResults:{type:Number,required:!1,default:()=>30},tabindex:{type:String,required:!1,default:()=>""},getOptionDescription:{type:Function,default(t){return this.optionKey&&this.optionLabel?t[this.optionKey]+" "+t[this.optionLabel]:this.optionLabel?t[this.optionLabel]:this.optionKey?t[this.optionKey]:t}},getOptionValue:{type:Function,default(t){return this.optionKey?t[this.optionKey]:this.optionLabel?t[this.optionLabel]:t}}},computed:{isRequired(){return this.required?this.selectedOptions.length?"":"required":""}},methods:{seedSearchText(){null===this.searchText&&(this.searchText="")},setPossibleOption(){this.matchingOptions&&this.matchingOptions.length&&(-1===this.pointer&&(this.pointer=0),this.setOption(this.matchingOptions[this.pointer]))},setOption(t){this.selectedOption=t,this.selectedOptions.push(t),this.searchText=null,this.$nextTick(()=>{this.$refs.search.focus()})},removeOption(t){this.selectedOptions.splice(t,1),this.$nextTick(()=>{this.$refs.search.focus()})},setPointerIdx(t){this.pointer=t},closeOut(){this.searchText=null,this.closed=!0},movePointerDown(){this.matchingOptions&&(this.pointer>=this.matchingOptions.length-1||this.pointer++)},movePointerUp(){this.pointer>0&&this.pointer--},handleClickOutside(t){this.$el.contains(t.target)||this.closeOut()}},computed:{matchingOptions(){return null===this.searchText?null:this.optionLabel&&this.optionKey?this.options.filter(t=>this.selectedOptions.findIndex(e=>e[this.optionKey]===t[this.optionKey])<0).filter(t=>t[this.optionLabel].toString().toLowerCase().includes(this.searchText.toString().toLowerCase())||this.searchText.toString().toLowerCase().includes(t[this.optionKey].toString().toLowerCase())).slice(0,this.maxResults):this.optionLabel?this.options.filter(t=>this.selectedOptions.findIndex(e=>e[this.optionLabel]===t[this.optionLabel]<0)).filter(t=>t[this.optionLabel].toString().toLowerCase().includes(this.searchText.toString().toLowerCase())).slice(0,this.maxResults):this.optionKey?this.options.filter(t=>this.selectedOptions.findIndex(e=>e[this.optionKey]===t[this.optionKey]<0)).filter(t=>this.searchText.toString().toLowerCase().includes(t[this.optionKey].toString().toLowerCase())).slice(0,this.maxResults):this.options.filter(t=>this.selectedOptions.findIndex(e=>e===t<0)).filter(t=>t.toString().toLowerCase().includes(this.searchText.toString().toLowerCase())).slice(0,this.maxResults)}}},function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{ref:"vuesingleselect",staticClass:"multi-select-wrapper"},[n("select",{staticClass:"hidden",attrs:{multiple:"",name:t.name}},t._l(t.selectedOptions,function(e,i){return n("option",{key:i,domProps:{value:t.getOptionValue(e)}},[t._v("\n\t\t"+t._s(t.getOptionDescription(e))+"\n\t    ")])})),t._v(" "),n("div",{staticClass:"relative"},[n("div",{staticClass:"relative rounded border border-grey hover:border-blue"},[n("ul",{staticClass:"flex list-reset flex-wrap py-px pb-1 pr-1 m-0 text-black"},[t._l(t.selectedOptions,function(e,i){return n("li",{key:i,staticClass:"cursor-pointer border mt-1 ml-1 mb-0 justify-between content-center rounded bg-grey-lighter border-grey border p-1 tracking-tight text-sm leading-tight hover:bg-grey-lighter",on:{click:function(e){t.searchText=""}}},[n("span",{domProps:{textContent:t._s(t.getOptionDescription(e))}}),t._v(" "),n("span",{staticClass:"pl-2 text-grey-darker mt-px icons",on:{click:function(e){t.removeOption(i)}}},[n("svg",{staticClass:"text-sm w-3 h-3 fill-current",attrs:{"aria-hidden":"true",viewBox:"0 0 512 512"}},[n("path",{attrs:{d:"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"}})])])])}),t._v(" "),n("li",{staticClass:"mt-1 ml-1 mb-0 flex-1 w-full",staticStyle:{"min-width":"100px"}},[n("input",{directives:[{name:"model",rawName:"v-model",value:t.searchText,expression:"searchText"}],ref:"search",staticClass:"search-input box-size w-full p-1 inline mr-1 outline-none border-none leading-tight",attrs:{type:"text",placeholder:t.placeholder,autocomplete:"off",required:t.required},domProps:{value:t.searchText},on:{click:t.seedSearchText,keyup:[function(e){return"button"in e||!t._k(e.keyCode,"enter",13,e.key,"Enter")?t.setPossibleOption(e):null},function(e){return"button"in e||!t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"])?t.movePointerDown(e):null},function(e){return"button"in e||!t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"])?t.movePointerUp(e):null}],keydown:[function(e){return"button"in e||!t._k(e.keyCode,"tab",9,e.key,"Tab")?(e.stopPropagation(),t.closeOut(e)):null},function(e){if(!("button"in e)&&t._k(e.keyCode,"esc",27,e.key,"Escape"))return null;e.stopPropagation(),t.searchText=null}],input:function(e){e.target.composing||(t.searchText=e.target.value)}}})])],2)]),t._v(" "),n("ul",{directives:[{name:"show",rawName:"v-show",value:t.matchingOptions,expression:"matchingOptions"}],ref:"options",staticClass:"absolute w-full overflow-auto appearance-none mt-px  text-left list-reset",class:[t.classes.dropdown],staticStyle:{"z-index":"100"},style:{"max-height":t.maxHeight},attrs:{tabindex:"-1"}},t._l(t.matchingOptions,function(e,i){return n("li",{key:i,staticClass:"cursor-pointer outline-none",class:i===t.pointer?t.classes.active:"",attrs:{tabindex:"-1"},on:{blur:function(e){t.handleClickOutside(e)},mouseover:function(e){t.setPointerIdx(i)},keyup:[function(n){if(!("button"in n)&&t._k(n.keyCode,"enter",13,n.key,"Enter"))return null;t.setOption(e)},function(e){if(!("button"in e)&&t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"]))return null;t.movePointerUp()},function(e){if(!("button"in e)&&t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"]))return null;t.movePointerDown()}],click:function(n){n.preventDefault(),t.setOption(e)}}},[t._t("option",[t._v("\n                        "+t._s(t.getOptionDescription(e))+"\n                    ")],null,{option:e,idx:i})],2)}))])])},[],!1,function(t){n(3)},"data-v-538f9f64",null);e.a=i.exports},function(t,e,n){"use strict";n.r(e),function(t){n.d(e,"install",function(){return o});var i=n(0);function o(t){o.installed||(o.installed=!0,t.component("vue-multi-select",i.a))}const r={install:o};let a=null;"undefined"!=typeof window?a=window.Vue:void 0!==t&&(a=t.Vue),a&&a.use(r)}.call(this,n(2))},function(t,e){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(t){"object"==typeof window&&(n=window)}t.exports=n},function(t,e,n){var i=n(4);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);(0,n(6).default)("245a8247",i,!0,{})},function(t,e,n){(t.exports=n(5)(!1)).push([t.i,".list-reset[data-v-538f9f64]{list-style:none;padding:0}.overflow-auto[data-v-538f9f64]{overflow:auto}.appearance-none[data-v-538f9f64]{-webkit-appearance:none;-moz-appearance:none}.text-black[data-v-538f9f64]{color:#22292f}.text-grey-darkest[data-v-538f9f64]{color:#3d4852}.text-grey-darker[data-v-538f9f64]{color:#606f7b}.text-xs[data-v-538f9f64]{font-size:.75em}.tracking-tight[data-v-538f9f64]{letter-spacing:-.05em}.text-sm[data-v-538f9f64]{font-size:.875em}.inline[data-v-538f9f64]{display:inline}.inline-block[data-v-538f9f64]{display:inline-block}.block[data-v-538f9f64]{display:block}.flex[data-v-538f9f64]{display:flex}.flex-1[data-v-538f9f64]{flex:1}.flex-wrap[data-v-538f9f64]{flex-wrap:wrap}.justify-between[data-v-538f9f64]{justify-content:space-between}.content-center[data-v-538f9f64]{align-content:center}.border[data-v-538f9f64]{border-width:1px;border-style:solid}.border-none[data-v-538f9f64]{border:none}.hover\\:border-blue[data-v-538f9f64]:hover{border-color:#3490dc}.border-grey[data-v-538f9f64]{border-color:#b8c2cc}.border-grey-lighter[data-v-538f9f64]{border-color:#ced4da}.border-grey-light[data-v-538f9f64]{border-color:#dae1e7}.bg-grey-lighter[data-v-538f9f64]{background-color:#f1f5f8}.bg-white[data-v-538f9f64]{background-color:#fff}.pin-r[data-v-538f9f64]{right:0}.pin-y[data-v-538f9f64]{top:0;bottom:0}.absolute[data-v-538f9f64]{position:absolute}.relative[data-v-538f9f64]{position:relative}.items-center[data-v-538f9f64]{align-items:center}.p-0[data-v-538f9f64]{padding:0}.p-1[data-v-538f9f64]{padding:.25em}.pt-1[data-v-538f9f64]{padding-top:1px}.pl-1[data-v-538f9f64]{padding-left:.25em}.pl-2[data-v-538f9f64]{padding-left:.5em}.pr-1[data-v-538f9f64]{padding-right:.25em}.px-1[data-v-538f9f64]{padding-left:.25em;padding-right:.25em}.py-2[data-v-538f9f64]{padding-top:.25em;padding-bottom:.25em}.p-2[data-v-538f9f64]{padding:.5em}.py-px[data-v-538f9f64]{padding-top:1px;padding-bottom:1px}.py-1[data-v-538f9f64]{padding-top:.25em;padding-bottom:.25em}.py-2[data-v-538f9f64]{padding-top:.5em;padding-bottom:.5em}.px-2[data-v-538f9f64]{padding-left:.5em;padding-right:.5em}.pb-1[data-v-538f9f64]{padding-bottom:.25em}.m-0[data-v-538f9f64]{margin:0;margin-bottom:0!important}.m-1[data-v-538f9f64]{margin:.25em}.mx-1[data-v-538f9f64]{margin-left:.25em;margin-right:.25em}.mt-1[data-v-538f9f64]{margin-top:.25em}.mr-1[data-v-538f9f64]{margin-right:.25em}.ml-1[data-v-538f9f64]{margin-left:.25em}.mb-1[data-v-538f9f64]{margin-bottom:.25em}.m-px2[data-v-538f9f64]{margin:2px}.mt-px[data-v-538f9f64]{margin-top:1px}.mb-0[data-v-538f9f64]{margin-bottom:0}.leading-tight[data-v-538f9f64]{line-height:1.25}.leading-normal[data-v-538f9f64]{line-height:1.5}.text-left[data-v-538f9f64]{text-align:left}.w-full[data-v-538f9f64]{width:100%}.shadow[data-v-538f9f64]{-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.1);box-shadow:0 2px 4px 0 rgba(0,0,0,.1)}.w-1[data-v-538f9f64]{width:.25em}.w-2[data-v-538f9f64]{width:.5em}.w-3[data-v-538f9f64]{width:.75em}.w-4[data-v-538f9f64]{width:1em}.h-4[data-v-538f9f64]{height:1em}.h-1[data-v-538f9f64]{height:.25em}.h-2[data-v-538f9f64]{height:.5em}.h-3[data-v-538f9f64]{height:.75em}.fill-current[data-v-538f9f64]{fill:currentColor}.hover\\:no-underline[data-v-538f9f64]:hover{text-decoration:none}.hover\\:outline-none[data-v-538f9f64],.outline-none[data-v-538f9f64]{outline:0}.hover\\:bg-grey-lighter[data-v-538f9f64]:hover{background-color:#dae1e7}.shadow-md[data-v-538f9f64]{box-shadow:0 4px 8px 0 rgba(0,0,0,.12),0 2px 4px 0 rgba(0,0,0,.08)}.focus\\:shadow-outline[data-v-538f9f64]:focus{-webkit-box-shadow:0 0 0 3px rgba(52,144,220,.5);box-shadow:0 0 0 3px rgba(52,144,220,.5)}.rounded[data-v-538f9f64]{border-radius:.25em}.icons svg[data-v-538f9f64]{width:.75em;height:.75em}.required[data-v-538f9f64]{_color:#721c24;_background-color:#f8d7da;border-color:#f5c6cb}.cursor-pointer[data-v-538f9f64]{cursor:pointer}.dropdown[data-v-538f9f64]{-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.12),0 2px 4px 0 rgba(0,0,0,.08);box-shadow:0 4px 8px 0 rgba(0,0,0,.12),0 2px 4px 0 rgba(0,0,0,.08);background-color:#fff;color:#606f7b;border-radius:.25em;line-height:1.25;text-align:left;display:inline}.dropdown>li[data-v-538f9f64]{padding:.5em .75em}.active[data-v-538f9f64]{background-color:#dae1e7}.hidden[data-v-538f9f64]{display:none}.appearance-none[data-v-538f9f64]{appearance:none}input[data-v-538f9f64]{overflow:visible}.search-input[data-v-538f9f64]{_font-family:sans-serif;font-size:100%;_line-height:1.15;margin:0}.box-size[data-v-538f9f64],.select-wrapper[data-v-538f9f64]{box-sizing:border-box}",""])},function(t,e){t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var n=function(t,e){var n=t[1]||"",i=t[3];if(!i)return n;if(e&&"function"==typeof btoa){var o=function(t){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t))))+" */"}(i),r=i.sources.map(function(t){return"/*# sourceURL="+i.sourceRoot+t+" */"});return[n].concat(r).concat([o]).join("\n")}return[n].join("\n")}(e,t);return e[2]?"@media "+e[2]+"{"+n+"}":n}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var i={},o=0;o<this.length;o++){var r=this[o][0];"number"==typeof r&&(i[r]=!0)}for(o=0;o<t.length;o++){var a=t[o];"number"==typeof a[0]&&i[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),e.push(a))}},e}},function(t,e,n){"use strict";function i(t,e){for(var n=[],i={},o=0;o<e.length;o++){var r=e[o],a=r[0],s={id:t+":"+o,css:r[1],media:r[2],sourceMap:r[3]};i[a]?i[a].parts.push(s):n.push(i[a]={id:a,parts:[s]})}return n}n.r(e),n.d(e,"default",function(){return h});var o="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!o)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var r={},a=o&&(document.head||document.getElementsByTagName("head")[0]),s=null,d=0,l=!1,f=function(){},p=null,c="data-vue-ssr-id",u="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function h(t,e,n,o){l=n,p=o||{};var a=i(t,e);return v(a),function(e){for(var n=[],o=0;o<a.length;o++){var s=a[o];(d=r[s.id]).refs--,n.push(d)}e?v(a=i(t,e)):a=[];for(o=0;o<n.length;o++){var d;if(0===(d=n[o]).refs){for(var l=0;l<d.parts.length;l++)d.parts[l]();delete r[d.id]}}}}function v(t){for(var e=0;e<t.length;e++){var n=t[e],i=r[n.id];if(i){i.refs++;for(var o=0;o<i.parts.length;o++)i.parts[o](n.parts[o]);for(;o<n.parts.length;o++)i.parts.push(m(n.parts[o]));i.parts.length>n.parts.length&&(i.parts.length=n.parts.length)}else{var a=[];for(o=0;o<n.parts.length;o++)a.push(m(n.parts[o]));r[n.id]={id:n.id,refs:1,parts:a}}}}function g(){var t=document.createElement("style");return t.type="text/css",a.appendChild(t),t}function m(t){var e,n,i=document.querySelector("style["+c+'~="'+t.id+'"]');if(i){if(l)return f;i.parentNode.removeChild(i)}if(u){var o=d++;i=s||(s=g()),e=x.bind(null,i,o,!1),n=x.bind(null,i,o,!0)}else i=g(),e=function(t,e){var n=e.css,i=e.media,o=e.sourceMap;i&&t.setAttribute("media",i);p.ssrId&&t.setAttribute(c,e.id);o&&(n+="\n/*# sourceURL="+o.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");if(t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}.bind(null,i),n=function(){i.parentNode.removeChild(i)};return e(t),function(i){if(i){if(i.css===t.css&&i.media===t.media&&i.sourceMap===t.sourceMap)return;e(t=i)}else n()}}var b=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}();function x(t,e,n,i){var o=n?"":i.css;if(t.styleSheet)t.styleSheet.cssText=b(e,o);else{var r=document.createTextNode(o),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(r,a[e]):t.appendChild(r)}}}]));
+!function(e,t){for(var a in t)e[a]=t[a]}(window,function(e){var t={};function a(n){if(t[n])return t[n].exports;var i=t[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,a),i.l=!0,i.exports}return a.m=e,a.c=t,a.d=function(e,t,n){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)a.d(n,i,function(t){return e[t]}.bind(null,i));return n},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="",a(a.s=1)}([function(e,t,a){"use strict";var n=function(e,t,a,n,i,o,r,s){var l=typeof(e=e||{}).default;"object"!==l&&"function"!==l||(e=e.default);var d,c="function"==typeof e?e.options:e;if(t&&(c.render=t,c.staticRenderFns=a,c._compiled=!0),n&&(c.functional=!0),o&&(c._scopeId=o),r?(d=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),i&&i.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(r)},c._ssrRegister=d):i&&(d=s?function(){i.call(this,this.$root.$options.shadowRoot)}:i),d)if(c.functional){c._injectStyles=d;var p=c.render;c.render=function(e,t){return d.call(t),p(e,t)}}else{var u=c.beforeCreate;c.beforeCreate=u?[].concat(u,d):[d]}return{exports:e,options:c}}({mixins:[{watch:{pointer(){this.maybeAdjustScroll()}},data:()=>({pointer:-1}),methods:{maybeAdjustScroll(){let e=this.pixelsToPointerTop(),t=this.pixelsToPointerBottom();return e<=this.viewport().top?this.scrollTo(e):t>=this.viewport().bottom?this.scrollTo(this.viewport().top+this.pointerHeight()):void 0},pixelsToPointerTop(){let e=0;if(!this.$refs.options)return 0;for(let t=0;t<this.pointer;t++)e+=this.$refs.options.children[t].offsetHeight;return e},pixelsToPointerBottom(){return this.pixelsToPointerTop()+this.pointerHeight()},pointerHeight(){let e=!!this.$refs.options&&this.$refs.options.children[this.pointer];return e?e.offsetHeight:0},viewport(){return{top:this.$refs.options?this.$refs.options.scrollTop:0,bottom:this.$refs.options?this.$refs.options.offsetHeight+this.$refs.options.scrollTop:0}},scrollTo(e){return this.$refs.options?this.$refs.options.scrollTop=e:null}}}],mounted(){document.addEventListener("click",this.handleClickOutside),document.addEventListener("keyup",this.handleClickOutside),this.searchText=this.initial},destroyed(){document.removeEventListener("keyup",this.handleClickOutside),document.removeEventListener("click",this.handleClickOutside)},watch:{searchText(e,t){e!==t&&(this.pointer=-1)},selectedOptions(e,t){this.$emit("input",e)}},data:()=>({selectedOptions:[],searchText:null,selectedOption:null,dropdownOpen:!1,closed:!1}),props:{value:{required:!0},classes:{type:Object,required:!1,default:()=>({active:"active",wrapper:"multi-select-wrapper",searchWrapper:"search-wrapper",searchInput:"search-input",pill:"pill",required:"required",dropdown:"dropdown"})},name:{type:String,required:!1,default:()=>""},options:{type:Array,required:!1,default:()=>[]},optionLabel:{type:String,required:!1,default:()=>null},optionKey:{type:String,required:!1,default:()=>null},placeholder:{type:String,required:!1,default:()=>"Search Here"},maxHeight:{type:String,default:()=>"220px",required:!1},inputId:{type:String,default:()=>"multi-select",required:!1},initial:{type:String,required:!1,default:()=>null},required:{type:Boolean,required:!1,default:()=>!1},maxResults:{type:Number,required:!1,default:()=>30},tabindex:{type:String,required:!1,default:()=>""},keyboardDelete:{type:Boolean,required:!1,default:()=>!0},getOptionDescription:{type:Function,default(e){return this.optionKey&&this.optionLabel?e[this.optionKey]+" "+e[this.optionLabel]:this.optionLabel?e[this.optionLabel]:this.optionKey?e[this.optionKey]:e}},getOptionValue:{type:Function,default(e){return this.optionKey?e[this.optionKey]:this.optionLabel?e[this.optionLabel]:e}}},methods:{popSelectedOption(){this.keyboardDelete&&(null!==this.searchText?""===this.searchText&&(this.searchText=null):this.selectedOptions.pop())},seedSearchText(){null===this.searchText&&(this.searchText="")},setPossibleOption(){this.matchingOptions&&this.matchingOptions.length&&(-1===this.pointer&&(this.pointer=0),this.setOption(this.matchingOptions[this.pointer]))},setOption(e){this.selectedOption=e,this.selectedOptions.push(e),this.searchText=null,this.$nextTick(()=>{this.$refs.search.focus()})},removeOption(e){this.selectedOptions.splice(e,1),this.$nextTick(()=>{this.$refs.search.focus()})},setPointerIdx(e){this.pointer=e},closeOut(){this.searchText=null,this.closed=!0},movePointerDown(){this.matchingOptions&&(this.pointer>=this.matchingOptions.length-1||this.pointer++)},movePointerUp(){this.pointer>0&&this.pointer--},handleClickOutside(e){this.$el.contains(e.target)||this.closeOut()}},computed:{matchingOptions(){return null===this.searchText?null:this.optionLabel&&this.optionKey?this.options.filter(e=>this.selectedOptions.findIndex(t=>t[this.optionKey]===e[this.optionKey])<0).filter(e=>e[this.optionLabel].toString().toLowerCase().includes(this.searchText.toString().toLowerCase())||this.searchText.toString().toLowerCase().includes(e[this.optionKey].toString().toLowerCase())).slice(0,this.maxResults):this.optionLabel?this.options.filter(e=>this.selectedOptions.findIndex(t=>t[this.optionLabel]===e[this.optionLabel])<0).filter(e=>e[this.optionLabel].toString().toLowerCase().includes(this.searchText.toString().toLowerCase())).slice(0,this.maxResults):this.optionKey?this.options.filter(e=>this.selectedOptions.findIndex(t=>t[this.optionKey]===e[this.optionKey])<0).filter(e=>e[this.optionKey].toString().toLowerCase().includes(this.searchText.toString().toLowerCase())).slice(0,this.maxResults):this.options.filter(e=>this.selectedOptions.findIndex(t=>t===e)<0).filter(e=>e.toString().toLowerCase().includes(this.searchText.toString().toLowerCase())).slice(0,this.maxResults)},isRequired(){return this.required?this.selectedOptions.length?"":"required":""}}},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{ref:"vuesingleselect",class:[e.classes.wrapper]},[a("select",{staticClass:"hidden",attrs:{multiple:"",name:e.name}},e._l(e.selectedOptions,function(t,n){return a("option",{key:n,domProps:{value:e.getOptionValue(t)}},[e._v("\n            "+e._s(e.getOptionValue(t))+"\n        ")])})),e._v(" "),a("div",{staticClass:"relative text-left",class:[e.classes.searchWrapper]},[a("div",{staticClass:"rounded bordered border-grey hover:border-blue",class:[e.isRequired]},[a("ul",{staticClass:"flex list-reset flex-wrap py-px pb-1 pr-1 m-0 text-black"},[e._l(e.selectedOptions,function(t,n){return a("li",{key:n,staticClass:"cursor-pointer bordered mt-1 ml-1 mb-0 justify-between content-center rounded bg-grey-lighter border-grey p-1 tracking-tight leading-tight hover:bg-grey-lighter",class:[e.classes.pill],on:{click:e.seedSearchText}},[a("span",{staticClass:"text-sm",domProps:{textContent:e._s(e.getOptionDescription(t))}}),e._v(" "),a("span",{staticClass:"pl-2 text-grey-darker mt-px icons",on:{click:function(t){e.removeOption(n)}}},[a("svg",{staticClass:"text-sm w-3 h-3 fill-current",attrs:{"aria-hidden":"true",viewBox:"0 0 512 512"}},[a("path",{attrs:{d:"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"}})])])])}),e._v(" "),a("li",{staticClass:"mt-1 ml-1 mb-0 flex-1 w-full",staticStyle:{"min-width":"100px"}},[a("input",{directives:[{name:"model",rawName:"v-model",value:e.searchText,expression:"searchText"}],ref:"search",staticClass:"box-size w-full p-1 inline mr-1 outline-none border-none leading-tight",class:[e.classes.searchInput],attrs:{type:"text",autocomplete:"off",placeholder:e.placeholder,required:e.required},domProps:{value:e.searchText},on:{click:e.seedSearchText,keyup:[function(t){return"button"in t||!e._k(t.keyCode,"enter",13,t.key,"Enter")?e.setPossibleOption(t):null},function(t){return"button"in t||!e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?e.movePointerDown(t):null},function(t){return"button"in t||!e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?e.movePointerUp(t):null},function(t){return"button"in t||!e._k(t.keyCode,"delete",[8,46],t.key,["Backspace","Delete"])?e.popSelectedOption(t):null}],keydown:[function(t){return"button"in t||!e._k(t.keyCode,"tab",9,t.key,"Tab")?(t.stopPropagation(),e.closeOut(t)):null},function(t){if(!("button"in t)&&e._k(t.keyCode,"esc",27,t.key,"Escape"))return null;t.stopPropagation(),e.searchText=null}],input:function(t){t.target.composing||(e.searchText=t.target.value)}}})])],2)]),e._v(" "),a("ul",{directives:[{name:"show",rawName:"v-show",value:e.matchingOptions,expression:"matchingOptions"}],ref:"options",staticClass:"absolute w-full overflow-auto appearance-none mt-px text-left list-reset",class:[e.classes.dropdown],staticStyle:{"z-index":"100"},style:{"max-height":e.maxHeight},attrs:{tabindex:"-1"}},e._l(e.matchingOptions,function(t,n){return a("li",{key:n,staticClass:"cursor-pointer outline-none",class:n===e.pointer?e.classes.active:"",attrs:{tabindex:"-1"},on:{blur:function(t){e.handleClickOutside(t)},mouseover:function(t){e.setPointerIdx(n)},keyup:[function(a){if(!("button"in a)&&e._k(a.keyCode,"enter",13,a.key,"Enter"))return null;e.setOption(t)},function(t){if(!("button"in t)&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"]))return null;e.movePointerUp()},function(t){if(!("button"in t)&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"]))return null;e.movePointerDown()}],click:function(a){a.preventDefault(),e.setOption(t)}}},[e._t("option",[e._v("\n                    "+e._s(e.getOptionDescription(t))+"\n                ")],null,{option:t,idx:n})],2)}))])])},[],!1,function(e){a(3)},"data-v-6f46aca9",null);t.a=n.exports},function(e,t,a){"use strict";a.r(t),function(e){a.d(t,"install",function(){return i});var n=a(0);function i(e){i.installed||(i.installed=!0,e.component("vue-multi-select",n.a))}const o={install:i};let r=null;"undefined"!=typeof window?r=window.Vue:void 0!==e&&(r=e.Vue),r&&r.use(o)}.call(this,a(2))},function(e,t){var a;a=function(){return this}();try{a=a||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(a=window)}e.exports=a},function(e,t,a){var n=a(4);"string"==typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);(0,a(6).default)("2add8788",n,!0,{})},function(e,t,a){(e.exports=a(5)(!1)).push([e.i,".list-reset[data-v-6f46aca9]{list-style:none;padding:0}.overflow-auto[data-v-6f46aca9]{overflow:auto}.appearance-none[data-v-6f46aca9]{-webkit-appearance:none;-moz-appearance:none}.text-black[data-v-6f46aca9]{color:#22292f}.text-grey-darkest[data-v-6f46aca9]{color:#3d4852}.text-grey-darker[data-v-6f46aca9]{color:#606f7b}.text-xs[data-v-6f46aca9]{font-size:.75em}.tracking-tight[data-v-6f46aca9]{letter-spacing:-.05em}.text-sm[data-v-6f46aca9]{font-size:.875em}.inline[data-v-6f46aca9]{display:inline}.inline-block[data-v-6f46aca9]{display:inline-block}.block[data-v-6f46aca9]{display:block}.flex[data-v-6f46aca9]{display:flex}.flex-1[data-v-6f46aca9]{flex:1}.flex-wrap[data-v-6f46aca9]{flex-wrap:wrap}.justify-between[data-v-6f46aca9]{justify-content:space-between}.content-center[data-v-6f46aca9]{align-content:center}.bordered[data-v-6f46aca9]{border-width:1px;border-style:solid}.border-none[data-v-6f46aca9]{border:none}.hover\\:border-blue[data-v-6f46aca9]:hover{border-color:#3490dc}.border-grey[data-v-6f46aca9]{border-color:#b8c2cc}.border-grey-lighter[data-v-6f46aca9]{border-color:#ced4da}.border-grey-light[data-v-6f46aca9]{border-color:#dae1e7}.bg-grey-lighter[data-v-6f46aca9]{background-color:#f1f5f8}.bg-white[data-v-6f46aca9]{background-color:#fff}.pin-r[data-v-6f46aca9]{right:0}.pin-y[data-v-6f46aca9]{top:0;bottom:0}.absolute[data-v-6f46aca9]{position:absolute}.relative[data-v-6f46aca9]{position:relative}.items-center[data-v-6f46aca9]{align-items:center}.p-0[data-v-6f46aca9]{padding:0}.p-1[data-v-6f46aca9]{padding:.25em}.pt-1[data-v-6f46aca9]{padding-top:1px}.pl-1[data-v-6f46aca9]{padding-left:.25em}.pl-2[data-v-6f46aca9]{padding-left:.5em}.pr-1[data-v-6f46aca9]{padding-right:.25em}.px-1[data-v-6f46aca9]{padding-left:.25em;padding-right:.25em}.py-2[data-v-6f46aca9]{padding-top:.25em;padding-bottom:.25em}.p-2[data-v-6f46aca9]{padding:.5em}.py-px[data-v-6f46aca9]{padding-top:1px;padding-bottom:1px}.py-1[data-v-6f46aca9]{padding-top:.25em;padding-bottom:.25em}.py-2[data-v-6f46aca9]{padding-top:.5em;padding-bottom:.5em}.px-2[data-v-6f46aca9]{padding-left:.5em;padding-right:.5em}.pb-1[data-v-6f46aca9]{padding-bottom:.25em}.m-0[data-v-6f46aca9]{margin:0;margin-bottom:0!important}.m-1[data-v-6f46aca9]{margin:.25em}.mx-1[data-v-6f46aca9]{margin-left:.25em;margin-right:.25em}.mt-1[data-v-6f46aca9]{margin-top:.25em}.mr-1[data-v-6f46aca9]{margin-right:.25em}.ml-1[data-v-6f46aca9]{margin-left:.25em}.mb-1[data-v-6f46aca9]{margin-bottom:.25em}.m-px2[data-v-6f46aca9]{margin:2px}.mt-px[data-v-6f46aca9]{margin-top:1px}.mb-0[data-v-6f46aca9]{margin-bottom:0}.leading-tight[data-v-6f46aca9]{line-height:1.25}.leading-normal[data-v-6f46aca9]{line-height:1.5}.text-left[data-v-6f46aca9]{text-align:left}.w-full[data-v-6f46aca9]{width:100%}.shadow[data-v-6f46aca9]{-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.1);box-shadow:0 2px 4px 0 rgba(0,0,0,.1)}.w-1[data-v-6f46aca9]{width:.25em}.w-2[data-v-6f46aca9]{width:.5em}.w-3[data-v-6f46aca9]{width:.75em}.w-4[data-v-6f46aca9]{width:1em}.h-4[data-v-6f46aca9]{height:1em}.h-1[data-v-6f46aca9]{height:.25em}.h-2[data-v-6f46aca9]{height:.5em}.h-3[data-v-6f46aca9]{height:.75em}.fill-current[data-v-6f46aca9]{fill:currentColor}.hover\\:no-underline[data-v-6f46aca9]:hover{text-decoration:none}.hover\\:outline-none[data-v-6f46aca9],.outline-none[data-v-6f46aca9]{outline:0}.hover\\:bg-grey-lighter[data-v-6f46aca9]:hover{background-color:#dae1e7}.shadow-md[data-v-6f46aca9]{box-shadow:0 4px 8px 0 rgba(0,0,0,.12),0 2px 4px 0 rgba(0,0,0,.08)}.focus\\:shadow-outline[data-v-6f46aca9]:focus{-webkit-box-shadow:0 0 0 3px rgba(52,144,220,.5);box-shadow:0 0 0 3px rgba(52,144,220,.5)}.rounded[data-v-6f46aca9]{border-radius:.25em}.icons svg[data-v-6f46aca9]{width:.75em;height:.75em}.required[data-v-6f46aca9]{_color:#721c24;_background-color:#f8d7da;border-color:#f5c6cb}.cursor-pointer[data-v-6f46aca9]{cursor:pointer}.dropdown[data-v-6f46aca9]{-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.12),0 2px 4px 0 rgba(0,0,0,.08);box-shadow:0 4px 8px 0 rgba(0,0,0,.12),0 2px 4px 0 rgba(0,0,0,.08);background-color:#fff;color:#606f7b;border-radius:.25em;line-height:1.25;text-align:left;display:inline;width:99.8%}.dropdown>li[data-v-6f46aca9]{padding:.5em .75em}.active[data-v-6f46aca9]{background-color:#dae1e7}.hidden[data-v-6f46aca9]{display:none}.appearance-none[data-v-6f46aca9]{appearance:none}input[data-v-6f46aca9]{overflow:visible}.search-input[data-v-6f46aca9]{font-size:100%;margin:0}.box-size[data-v-6f46aca9],.select-wrapper[data-v-6f46aca9]{box-sizing:border-box}",""])},function(e,t){e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var a=function(e,t){var a=e[1]||"",n=e[3];if(!n)return a;if(t&&"function"==typeof btoa){var i=function(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}(n),o=n.sources.map(function(e){return"/*# sourceURL="+n.sourceRoot+e+" */"});return[a].concat(o).concat([i]).join("\n")}return[a].join("\n")}(t,e);return t[2]?"@media "+t[2]+"{"+a+"}":a}).join("")},t.i=function(e,a){"string"==typeof e&&(e=[[null,e,""]]);for(var n={},i=0;i<this.length;i++){var o=this[i][0];"number"==typeof o&&(n[o]=!0)}for(i=0;i<e.length;i++){var r=e[i];"number"==typeof r[0]&&n[r[0]]||(a&&!r[2]?r[2]=a:a&&(r[2]="("+r[2]+") and ("+a+")"),t.push(r))}},t}},function(e,t,a){"use strict";function n(e,t){for(var a=[],n={},i=0;i<t.length;i++){var o=t[i],r=o[0],s={id:e+":"+i,css:o[1],media:o[2],sourceMap:o[3]};n[r]?n[r].parts.push(s):a.push(n[r]={id:r,parts:[s]})}return a}a.r(t),a.d(t,"default",function(){return h});var i="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!i)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var o={},r=i&&(document.head||document.getElementsByTagName("head")[0]),s=null,l=0,d=!1,c=function(){},p=null,u="data-vue-ssr-id",f="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function h(e,t,a,i){d=a,p=i||{};var r=n(e,t);return v(r),function(t){for(var a=[],i=0;i<r.length;i++){var s=r[i];(l=o[s.id]).refs--,a.push(l)}t?v(r=n(e,t)):r=[];for(i=0;i<a.length;i++){var l;if(0===(l=a[i]).refs){for(var d=0;d<l.parts.length;d++)l.parts[d]();delete o[l.id]}}}}function v(e){for(var t=0;t<e.length;t++){var a=e[t],n=o[a.id];if(n){n.refs++;for(var i=0;i<n.parts.length;i++)n.parts[i](a.parts[i]);for(;i<a.parts.length;i++)n.parts.push(m(a.parts[i]));n.parts.length>a.parts.length&&(n.parts.length=a.parts.length)}else{var r=[];for(i=0;i<a.parts.length;i++)r.push(m(a.parts[i]));o[a.id]={id:a.id,refs:1,parts:r}}}}function g(){var e=document.createElement("style");return e.type="text/css",r.appendChild(e),e}function m(e){var t,a,n=document.querySelector("style["+u+'~="'+e.id+'"]');if(n){if(d)return c;n.parentNode.removeChild(n)}if(f){var i=l++;n=s||(s=g()),t=x.bind(null,n,i,!1),a=x.bind(null,n,i,!0)}else n=g(),t=function(e,t){var a=t.css,n=t.media,i=t.sourceMap;n&&e.setAttribute("media",n);p.ssrId&&e.setAttribute(u,t.id);i&&(a+="\n/*# sourceURL="+i.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */");if(e.styleSheet)e.styleSheet.cssText=a;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(a))}}.bind(null,n),a=function(){n.parentNode.removeChild(n)};return t(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap)return;t(e=n)}else a()}}var b=function(){var e=[];return function(t,a){return e[t]=a,e.filter(Boolean).join("\n")}}();function x(e,t,a,n){var i=a?"":n.css;if(e.styleSheet)e.styleSheet.cssText=b(t,i);else{var o=document.createTextNode(i),r=e.childNodes;r[t]&&e.removeChild(r[t]),r.length?e.insertBefore(o,r[t]):e.appendChild(o)}}}]));

package.json

 {
     "name": "vue-simple-multi-select",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "description": "multiple select autocomplete dropdown for vue",
@@ -5,0 +5,0 @@ "main": "dist/index",

README.md

@@ -1,2 +0,361 @@
-# vue-multi-select
-autocomplete multiple select component for vue
+# vue-simple-multi-select
+
+	A Vue component that makes long, unwieldy select boxes user friendly.
+
+## What it Does
+
+vue-simple-multi-select provides an elegant, user-friendly component to replace long, unwieldy multi select elements. 
+
+## How simple
+
+This simple:
+
+This **simple**
+
+```html
+<vue-multi-select
+	v-model="fruit" 
+	:options="['apple','cherry','banana','pear', 'tomato']"
+	></vue-multi-select>
+```
+
+<img style="width: 400px" src="https://raw.githubusercontent.com/robrogers3/vue-multi-select/master/vue-simple-multi-select.png">
+
+
+## What It Does Not Do
+
+Nope no regular selects. See vue-single-select for this.
+
+[Vue Single Select](https://www.npmjs.com/package/vue-single-select)
+
+No ajax loading.
+
+## Usage
+
+### Install and Use Via CDN
+
+```html
+<div id="app">
+    <lable>Choose a fruit!</lable>
+    <vue-multi-select
+	    v-model="fruit"
+	    :options="fruits"
+    ></vue-multi-select>
+</div>
+```
+
+```html
+<script src="https://unpkg.com/vue@latest"></script>
+<script src="https://unpkg.com/vue-simple-multi-select@latest"></script>
+<script>
+ new Vue({
+     el:"#app",
+     data: {
+         fruit: null,
+         fruits: ['peach','pear','apple','orange']
+     }
+ });
+</script>
+```
+
+### Install Via NPM
+
+```bash
+$ npm i vue-simple-multi-select
+```
+
+### Register it
+
+In your component:
+
+```javascript
+import VueMultiSelect from "vue-simple-multi-select";
+export default {
+components: {
+     VueMultiSelect
+  },
+  //...
+}
+```
+
+Globally:
+
+```javascript
+import VueMultiSelect from "vue-simple-multi-select";
+Vue.component('vue-multi-select', VuemultiSelect);
+```
+
+### Use It
+
+```html
+<vue-multi-select
+        v-model="fruit"
+        :options="['apple','banana','cherry','tomato']"
+        :required="true"
+></vue-multi-select>
+```
+
+### Use It Again
+
+```html
+<vue-multi-select
+        name="maybe"
+        placeholder="pick a post"
+        you-want-to-select-a-post="ok"
+        v-model="post"
+        out-of-all-these-posts="makes sense"
+        :options="posts"
+        a-post-has-an-id="good for search and display"
+        option-key="id"
+        the-post-has-a-title="make sure to show these"
+        option-label="title"
+></vue-multi-select>
+```
+
+### Use It Again
+
+```html
+<vue-multi-select
+        you-want-to-select-a-reply="yes"
+        v-model="reply"
+        out-of-all-these-replies="yep"
+        :options="replies"
+        a-reply-only-has-a-reply="sounds about right"
+        option-label="reply"
+        seed-an-initial-value="what's seed mean?"
+        initial="seed me"
+        you-only-want-20-options-to-show="is 20 enough?"
+        :max-results="20"
+></vue-multi-select>
+```
+
+### Dont like the Styling?
+
+You can override some of it. Like so:
+
+```html
+<vue-multi-select
+        id="selected-reply"
+        name="a_reply"
+        option-label="reply"
+        v-model="reply"
+        :options="replies"
+        you-like-huge-dropdowns="1000px is long!"
+        max-height="1000px"
+        :classes='{
+            active: "active",
+            wrapper: "multi-select-wrapper",
+            searchWrapper: "search-wrapper",
+            searchInput: "search-input",
+            pill: "pill",
+            required: "required",
+            dropdown: "dropdown"
+        }'
+></vue-multi-select>
+```
+
+Then all you need to do is provide some class definitions like so:
+
+```css
+.active {
+	background-color: pink;
+}
+.multi-select-wrapper {
+	display: block;
+	font-size: 16px;
+}
+.search-input {
+	color: black;
+}
+.pill {
+	padding: .5em;
+}
+```
+... and so on.
+
+**Note: Bootstrap 3 Users May want to increase the size of the icons.**
+
+If so do this: 
+```css
+.icons svg {
+    height: 1em;
+    width: 1em;
+}
+```
+### Kitchen Sink
+
+Meh, see props below.
+
+## Why vue-simple-multi-select is better
+
+1.  It handles custom label/value props for displaying options.
+
+    Other select components require you to conform to their format. Which often means data wrangling.
+
+2.  It's easier on the DOM.
+
+    Other components will load up all the options available in the select element. This can be heavy. vue-multi-select makes an executive decision that you probably will not want to scroll more than N options before you want to narrow things down a bit. You can change this, but the default is 30.
+
+3.  Snappy Event Handling
+
+    - up and down arrows for selecting options
+    - enter to select first match
+    - remembers selection on change
+    - hit the escape key to, well, escape
+    - hit delete to remove the last selection
+
+4.  Lightweight
+
+    - Why are the other packages so big and actually have dependencies?
+
+5. It works for regular 'POST backs' to the server.
+
+    If you are doing a regular post or just gathering the form data you don't need to do anything extra to provide a name and value for the selected option.
+
+6. Mine just looks nicer
+
+    A lot nicer!
+
+7. It's simple!!
+
+## Available Props
+
+```javascript
+     props: {
+         // This corresponds to v-model
+         value: {
+             required: true
+         },
+         // Use classes to override the look and feel
+         // Provide these 7 classes.
+         classes: {
+             type: Object,
+             required: false,
+             default: () => {
+                 return {
+                     active: 'active',
+                     wrapper: "multi-select-wrapper",
+                     searchWrapper: "search-wrapper",
+                     searchInput: "search-input",
+                     pill: "pill",
+                     required: "required",
+                     dropdown: "dropdown"
+                 };
+             }
+         },
+         // Give your input a name
+         // Good for posting forms
+         name: {
+             type: String,
+             required: false,
+             default: () => ""
+         },
+         // Your list of things for the select   
+         options: {
+             type: Array,
+             required: false,
+             default: () => []
+         },
+         // Tells vue-simple-multi-select what key to use
+         // for generating option labels
+         optionLabel: {
+             type: String,
+             required: false,
+             default: () => null
+         },
+         // Tells vue-multi-select the value
+         // you want populated in the select for the 
+         // input
+         optionKey: {
+             type: String,
+             required: false,
+             default: () => null
+         },
+         // Give your input an html element id
+         placeholder: {
+             type: String,
+             required: false,
+             default: () => "Search Here"
+         },
+         maxHeight: {
+             type: String,
+             default: () => "220px",
+             required: false
+         },
+         //Give the input an id
+         inputId: {
+             type: String,
+             default: () => "multi-select",
+             required: false
+         },
+         // Seed search text with initial value
+         initial: {
+             type: String,
+             required: false,
+             default: () => null
+         },
+         // Make it required
+         required: {
+             type: Boolean,
+             required: false,
+             default: () => false
+         },
+         // Max number of results to show.
+         maxResults: {
+             type: Number,
+             required: false,
+             default: () => 30
+         },
+         //Meh
+         tabindex: {
+             type: String,
+             required: false,
+             default: () => {
+                 return "";
+             }
+         },
+         // Remove previously selected options
+         // via the delete key
+         keyboardDelete: {
+             type: Boolean,
+             required: false,
+             default: () => {
+                 return true;
+             }
+         },
+         // Tell vue-multi-select what to display
+         // as the selected options
+         getOptionDescription: {
+             type: Function,
+             default(option) {
+                 if (this.optionKey && this.optionLabel) {
+                     return option[this.optionKey] + " " + option[this.optionLabel];
+                 }
+                 if (this.optionLabel) {
+                     return option[this.optionLabel];
+                 }
+                 if (this.optionKey) {
+                     return option[this.optionKey];
+                 }
+                 return option;
+             }
+         },
+         // Use this to actually give vue-multi-select
+         // the values for doing a POST
+         getOptionValue: {
+             type: Function,
+             default(option) {
+                 if (this.optionKey) {
+                     return option[this.optionKey];
+                 }
+
+                 if (this.optionLabel) {
+                     return option[this.optionLabel];
+                 }
+
+                 return option;
+             }
+         }
+     },
+```	 
+

wrapper.js

@@ -13,3 +13,3 @@ // Import vue component
 const plugin = {
-	install,
+	install
 };
@@ -16,0 +16,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

362

increased by11966.67%

Worsened metrics

Total package byte prevSize

270078

decreased by-16.29%

Number of package files

12

decreased by-25%

Lines of code

184

decreased by-64.62%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes