├── .babelrc
├── .gitignore
├── CHANGELOG.md
├── README.md
├── dist
    ├── vue-simple-search-dropdown.js
    └── vue-simple-search-dropdown.min.js
├── docs
    └── index.html
├── package.json
├── src
    ├── Dropdown.vue
    └── plugin.js
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "stage-2"],
3 |   "plugins": ["transform-runtime"],
4 |   "comments": false
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .idea
3 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ## :scroll: Changelog
2 | 
3 | ### :passenger_ship: 1.0.1
4 | - `Fix` Dropdown was was not showing after hitting tab
5 | - `New` Scrolling over options, max number of items, and name
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-simple-search-dropdown
 2 | 
 3 | A Vue component for a simple searchable dropdown.
 4 | 
 5 | No external library is used in this dropdown.
 6 | 
 7 | ### Demo
 8 | 
 9 | Demo here: [https://romainsimon.github.io/vue-simple-search-dropdown/](https://romainsimon.github.io/vue-simple-search-dropdown/)
10 | 
11 | ## Installation
12 | 
13 | ```js
14 | npm install vue-simple-search-dropdown
15 | ```
16 | 
17 | ### Browser
18 | 
19 | Include the script file, then install the component with `Vue.use(Dropdown);` e.g.:
20 | 
21 | ```html
22 | <script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
23 | <script type="text/javascript" src="node_modules/vue-simple-search-dropdown/dist/vue-simple-search-dropdown.min.js"></script>
24 | <script type="text/javascript">
25 |   Vue.use(Dropdown);
26 | </script>
27 | ```
28 | 
29 | ### Module
30 | 
31 | ```js
32 | import Dropdown from 'vue-simple-search-dropdown';
33 | ```
34 | 
35 | ## Usage
36 | 
37 | Once installed, it can be used in a template as simply as:
38 | 
39 | ```html
40 | <Dropdown
41 |     :options="[{ id: 1, name: 'Option 1'}, { id: 2, name: 'Option 2'}]"
42 |     v-on:selected="validateSelection"
43 |     v-on:filter="getDropdownValues"
44 |     :disabled="false"
45 |     name="zipcode"
46 |     :maxItem="10"
47 |     placeholder="Please select an option">
48 | </Dropdown>
49 | ```
50 | 
51 | ### Options
52 | 
53 | - `options` (required): An array of options with `id` and `name`
54 | - `placeholder` (optional): A placeholder 
55 | - `disabled` (optional): true/false
56 | - `name` (optional): An input name | default: `dropdown`
57 | - `maxItem` (optional): Max item to show | default: `6`
58 | 
59 | ### Events
60 | 
61 | These events are returned from the dropdown and can be catch with `v-on`
62 | - `selected`: An option is selected by click in the dropdown
63 | - `filter`: A filter has been applied by typing in the input field
64 | 
65 | Tips: Using `v-on:filter`, you can repopulate the dropdown with new `options` corresponding to the search by making an API call
66 | 


--------------------------------------------------------------------------------
/dist/vue-simple-search-dropdown.js:
--------------------------------------------------------------------------------
1 | (function t(e,r){if(typeof exports==="object"&&typeof module==="object")module.exports=r();else if(typeof define==="function"&&define.amd)define("vue-simple-search-dropdown",[],r);else if(typeof exports==="object")exports["vue-simple-search-dropdown"]=r();else e["vue-simple-search-dropdown"]=r()})(window,function(){return function(t){var e={};function r(n){if(e[n]){return e[n].exports}var o=e[n]={i:n,l:false,exports:{}};t[n].call(o.exports,o,o.exports,r);o.l=true;return o.exports}r.m=t;r.c=e;r.d=function(t,e,n){if(!r.o(t,e)){Object.defineProperty(t,e,{enumerable:true,get:n})}};r.r=function(t){if(typeof Symbol!=="undefined"&&Symbol.toStringTag){Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})}Object.defineProperty(t,"__esModule",{value:true})};r.t=function(t,e){if(e&1)t=r(t);if(e&8)return t;if(e&4&&typeof t==="object"&&t&&t.__esModule)return t;var n=Object.create(null);r.r(n);Object.defineProperty(n,"default",{enumerable:true,value:t});if(e&2&&typeof t!="string")for(var o in t)r.d(n,o,function(e){return t[e]}.bind(null,o));return n};r.n=function(t){var e=t&&t.__esModule?function e(){return t["default"]}:function e(){return t};r.d(e,"a",e);return e};r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)};r.p="";return r(r.s=62)}([function(t,e,r){var n=r(21)("wks");var o=r(20);var i=r(1).Symbol;var a=typeof i=="function";var u=t.exports=function(t){return n[t]||(n[t]=a&&i[t]||(a?i:o)("Symbol."+t))};u.store=n},function(t,e){var r=t.exports=typeof window!="undefined"&&window.Math==Math?window:typeof self!="undefined"&&self.Math==Math?self:Function("return this")();if(typeof __g=="number")__g=r},function(t,e,r){var n=r(14);var o=r(22);t.exports=r(4)?function(t,e,r){return n.f(t,e,o(1,r))}:function(t,e,r){t[e]=r;return t}},function(t,e){var r={}.hasOwnProperty;t.exports=function(t,e){return r.call(t,e)}},function(t,e,r){t.exports=!r(24)(function(){return Object.defineProperty({},"a",{get:function(){return 7}}).a!=7})},function(t,e,r){var n=r(13);t.exports=function(t){if(!n(t))throw TypeError(t+" is not an object!");return t}},function(t,e){var r=t.exports={version:"2.5.7"};if(typeof __e=="number")__e=r},function(t,e){t.exports={}},function(t,e,r){var n=r(31);if(typeof n==="string")n=[[t.i,n,""]];if(n.locals)t.exports=n.locals;var o=r(29).default;var i=o("0bcda724",n,false,{});if(false){}},function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:true});var n=r(61);var o=i(n);function i(t){return t&&t.__esModule?t:{default:t}}e.default={name:"Dropdown",template:"Dropdown",props:{options:{type:Array,required:true,default:[],note:"Options of dropdown. An array of options with id and name"},placeholder:{type:String,required:false,default:"Please select an option",note:"Placeholder of dropdown"},disabled:{type:Boolean,required:false,default:false,note:"Disable the dropdown"}},data:function t(){return{selected:{},optionsShown:false,searchFilter:""}},created:function t(){this.$emit("selected",this.selected)},computed:{filteredOptions:function t(){var e=[];var r=new RegExp(this.searchFilter,"ig");var n=true;var i=false;var a=undefined;try{for(var u=(0,o.default)(this.options),s;!(n=(s=u.next()).done);n=true){var f=s.value;if(this.searchFilter.length<1||f.name.match(r)){if(e.length<6)e.push(f)}}}catch(t){i=true;a=t}finally{try{if(!n&&u.return){u.return()}}finally{if(i){throw a}}}return e}},methods:{selectOption:function t(e){this.selected=e;this.optionsShown=false;this.searchFilter=this.selected.name;this.$emit("selected",this.selected)},showOptions:function t(){if(!this.disabled){this.searchFilter="";this.optionsShown=true}},exit:function t(){if(!this.selected.id){this.selected={};this.searchFilter=""}else{this.searchFilter=this.selected.name}this.$emit("selected",this.selected);this.optionsShown=false},keyMonitor:function t(e){if(e.key==="Enter"&&this.filteredOptions[0])this.selectOption(this.filteredOptions[0])}},watch:{searchFilter:function t(){if(this.filteredOptions.length===0){this.selected={}}else{this.selected=this.filteredOptions[0]}this.$emit("filter",this.searchFilter)}}}},function(t,e,r){"use strict";r.r(e);var n=r(9);var o=r.n(n);for(var i in n)if(i!=="default")(function(t){r.d(e,t,function(){return n[t]})})(i);e["default"]=o.a},function(t,e,r){var n=r(21)("keys");var o=r(20);t.exports=function(t){return n[t]||(n[t]=o(t))}},function(t,e){var r=Math.ceil;var n=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?n:r)(t)}},function(t,e){t.exports=function(t){return typeof t==="object"?t!==null:typeof t==="function"}},function(t,e,r){var n=r(5);var o=r(51);var i=r(50);var a=Object.defineProperty;e.f=r(4)?Object.defineProperty:function t(e,r,u){n(e);r=i(r,true);n(u);if(o)try{return a(e,r,u)}catch(t){}if("get"in u||"set"in u)throw TypeError("Accessors not supported!");if("value"in u)e[r]=u.value;return e}},function(t,e){t.exports=function(t){if(t==undefined)throw TypeError("Can't call method on  "+t);return t}},function(t,e,r){var n=r(55);var o=r(15);t.exports=function(t){return n(o(t))}},function(t,e,r){"use strict";var n=function(){var t=this;var e=t.$createElement;var r=t._self._c||e;return t.options?r("div",{staticClass:"dropdown"},[r("input",{directives:[{name:"model",rawName:"v-model",value:t.searchFilter,expression:"searchFilter"}],staticClass:"dropdown-input",attrs:{disabled:t.disabled,placeholder:t.placeholder},domProps:{value:t.searchFilter},on:{click:function(e){t.showOptions()},blur:function(e){t.exit()},keyup:t.keyMonitor,input:function(e){if(e.target.composing){return}t.searchFilter=e.target.value}}}),t._v(" "),r("div",{directives:[{name:"show",rawName:"v-show",value:t.optionsShown,expression:"optionsShown"}],staticClass:"dropdown-content"},t._l(t.filteredOptions,function(e){return r("div",{staticClass:"dropdown-item",on:{mousedown:function(r){t.selectOption(e)}}},[t._v("\n        "+t._s(e.name||e.id||"-")+"\n    ")])}))]):t._e()};var o=[];n._withStripped=true;r.d(e,"a",function(){return n});r.d(e,"b",function(){return o})},function(t,e,r){var n=r(14).f;var o=r(3);var i=r(0)("toStringTag");t.exports=function(t,e,r){if(t&&!o(t=r?t:t.prototype,i))n(t,i,{configurable:true,value:e})}},function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,e){var r=0;var n=Math.random();t.exports=function(t){return"Symbol(".concat(t===undefined?"":t,")_",(++r+n).toString(36))}},function(t,e,r){var n=r(6);var o=r(1);var i="__core-js_shared__";var a=o[i]||(o[i]={});(t.exports=function(t,e){return a[t]||(a[t]=e!==undefined?e:{})})("versions",[]).push({version:n.version,mode:r(25)?"pure":"global",copyright:"© 2018 Denis Pushkarev (zloirock.ru)"})},function(t,e){t.exports=function(t,e){return{enumerable:!(t&1),configurable:!(t&2),writable:!(t&4),value:e}}},function(t,e,r){var n=r(13);var o=r(1).document;var i=n(o)&&n(o.createElement);t.exports=function(t){return i?o.createElement(t):{}}},function(t,e){t.exports=function(t){try{return!!t()}catch(t){return true}}},function(t,e){t.exports=true},function(t,e,r){"use strict";var n=r(25);var o=r(54);var i=r(49);var a=r(2);var u=r(7);var s=r(48);var f=r(18);var c=r(39);var l=r(0)("iterator");var v=!([].keys&&"next"in[].keys());var d="@@iterator";var p="keys";var h="values";var y=function(){return this};t.exports=function(t,e,r,m,g,x,b){s(r,e,m);var w=function(t){if(!v&&t in j)return j[t];switch(t){case p:return function e(){return new r(this,t)};case h:return function e(){return new r(this,t)}}return function e(){return new r(this,t)}};var _=e+" Iterator";var S=g==h;var O=false;var j=t.prototype;var C=j[l]||j[d]||g&&j[g];var M=C||w(g);var T=g?!S?M:w("entries"):undefined;var L=e=="Array"?j.entries||C:C;var k,P,E;if(L){E=c(L.call(new t));if(E!==Object.prototype&&E.next){f(E,_,true);if(!n&&typeof E[l]!="function")a(E,l,y)}}if(S&&C&&C.name!==h){O=true;M=function t(){return C.call(this)}}if((!n||b)&&(v||O||!j[l])){a(j,l,M)}u[e]=M;u[_]=y;if(g){k={values:S?M:w(h),keys:x?M:w(p),entries:T};if(b)for(P in k){if(!(P in j))i(j,P,k[P])}else o(o.P+o.F*(v||O),e,k)}return k}},function(t,e){var r={}.toString;t.exports=function(t){return r.call(t).slice(8,-1)}},function(t,e,r){"use strict";r.d(e,"a",function(){return n});function n(t,e,r,n,o,i,a,u){var s=typeof t==="function"?t.options:t;if(e){s.render=e;s.staticRenderFns=r;s._compiled=true}if(n){s.functional=true}if(i){s._scopeId="data-v-"+i}var f;if(a){f=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext;if(!t&&typeof __VUE_SSR_CONTEXT__!=="undefined"){t=__VUE_SSR_CONTEXT__}if(o){o.call(this,t)}if(t&&t._registeredComponents){t._registeredComponents.add(a)}};s._ssrRegister=f}else if(o){f=u?function(){o.call(this,this.$root.$options.shadowRoot)}:o}if(f){if(s.functional){s._injectStyles=f;var c=s.render;s.render=function t(e,r){f.call(r);return c(e,r)}}else{var l=s.beforeCreate;s.beforeCreate=l?[].concat(l,f):[f]}}return{exports:t,options:s}}},function(t,e,r){"use strict";r.r(e);function n(t,e){var r=[];var n={};for(var o=0;o<e.length;o++){var i=e[o];var a=i[0];var u=i[1];var s=i[2];var f=i[3];var c={id:t+":"+o,css:u,media:s,sourceMap:f};if(!n[a]){r.push(n[a]={id:a,parts:[c]})}else{n[a].parts.push(c)}}return r}r.d(e,"default",function(){return p});var o=typeof document!=="undefined";if(typeof DEBUG!=="undefined"&&DEBUG){if(!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 i={};var a=o&&(document.head||document.getElementsByTagName("head")[0]);var u=null;var s=0;var f=false;var c=function(){};var l=null;var v="data-vue-ssr-id";var d=typeof navigator!=="undefined"&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function p(t,e,r,o){f=r;l=o||{};var a=n(t,e);h(a);return function e(r){var o=[];for(var u=0;u<a.length;u++){var s=a[u];var f=i[s.id];f.refs--;o.push(f)}if(r){a=n(t,r);h(a)}else{a=[]}for(var u=0;u<o.length;u++){var f=o[u];if(f.refs===0){for(var c=0;c<f.parts.length;c++){f.parts[c]()}delete i[f.id]}}}}function h(t){for(var e=0;e<t.length;e++){var r=t[e];var n=i[r.id];if(n){n.refs++;for(var o=0;o<n.parts.length;o++){n.parts[o](r.parts[o])}for(;o<r.parts.length;o++){n.parts.push(m(r.parts[o]))}if(n.parts.length>r.parts.length){n.parts.length=r.parts.length}}else{var a=[];for(var o=0;o<r.parts.length;o++){a.push(m(r.parts[o]))}i[r.id]={id:r.id,refs:1,parts:a}}}}function y(){var t=document.createElement("style");t.type="text/css";a.appendChild(t);return t}function m(t){var e,r;var n=document.querySelector("style["+v+'~="'+t.id+'"]');if(n){if(f){return c}else{n.parentNode.removeChild(n)}}if(d){var o=s++;n=u||(u=y());e=x.bind(null,n,o,false);r=x.bind(null,n,o,true)}else{n=y();e=b.bind(null,n);r=function(){n.parentNode.removeChild(n)}}e(t);return function n(o){if(o){if(o.css===t.css&&o.media===t.media&&o.sourceMap===t.sourceMap){return}e(t=o)}else{r()}}}var g=function(){var t=[];return function(e,r){t[e]=r;return t.filter(Boolean).join("\n")}}();function x(t,e,r,n){var o=r?"":n.css;if(t.styleSheet){t.styleSheet.cssText=g(e,o)}else{var i=document.createTextNode(o);var a=t.childNodes;if(a[e])t.removeChild(a[e]);if(a.length){t.insertBefore(i,a[e])}else{t.appendChild(i)}}}function b(t,e){var r=e.css;var n=e.media;var o=e.sourceMap;if(n){t.setAttribute("media",n)}if(l.ssrId){t.setAttribute(v,e.id)}if(o){r+="\n/*# sourceURL="+o.sources[0]+" */";r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"}if(t.styleSheet){t.styleSheet.cssText=r}else{while(t.firstChild){t.removeChild(t.firstChild)}t.appendChild(document.createTextNode(r))}}},function(t,e){t.exports=function(t){var e=[];e.toString=function e(){return this.map(function(e){var n=r(e,t);if(e[2]){return"@media "+e[2]+"{"+n+"}"}else{return n}}).join("")};e.i=function(t,r){if(typeof t==="string")t=[[null,t,""]];var n={};for(var o=0;o<this.length;o++){var i=this[o][0];if(typeof i==="number")n[i]=true}for(o=0;o<t.length;o++){var a=t[o];if(typeof a[0]!=="number"||!n[a[0]]){if(r&&!a[2]){a[2]=r}else if(r){a[2]="("+a[2]+") and ("+r+")"}e.push(a)}}};return e};function r(t,e){var r=t[1]||"";var o=t[3];if(!o){return r}if(e&&typeof btoa==="function"){var i=n(o);var a=o.sources.map(function(t){return"/*# sourceURL="+o.sourceRoot+t+" */"});return[r].concat(a).concat([i]).join("\n")}return[r].join("\n")}function n(t){var e=btoa(unescape(encodeURIComponent(JSON.stringify(t))));var r="sourceMappingURL=data:application/json;charset=utf-8;base64,"+e;return"/*# "+r+" */"}},function(t,e,r){e=t.exports=r(30)(false);e.push([t.i,"\n.dropdown[data-v-4e520537] {\n  position: relative;\n  display: block;\n  margin: auto;\n}\n.dropdown .dropdown-input[data-v-4e520537] {\n    background: #fff;\n    cursor: pointer;\n    border: 1px solid #e7ecf5;\n    border-radius: 3px;\n    color: #333;\n    display: block;\n    font-size: .8em;\n    padding: 6px;\n    min-width: 250px;\n    max-width: 250px;\n}\n.dropdown .dropdown-input[data-v-4e520537]:hover {\n      background: #f8f8fa;\n}\n.dropdown .dropdown-content[data-v-4e520537] {\n    position: absolute;\n    background-color: #fff;\n    min-width: 248px;\n    max-width: 248px;\n    border: 1px solid #e7ecf5;\n    box-shadow: 0px -8px 34px 0px rgba(0, 0, 0, 0.05);\n    z-index: 1;\n}\n.dropdown .dropdown-content .dropdown-item[data-v-4e520537] {\n      color: black;\n      font-size: .7em;\n      line-height: 1em;\n      padding: 8px;\n      text-decoration: none;\n      display: block;\n      cursor: pointer;\n}\n.dropdown .dropdown-content .dropdown-item[data-v-4e520537]:hover {\n        background-color: #e7ecf5;\n}\n.dropdown .dropdown:hover .dropdowncontent[data-v-4e520537] {\n    display: block;\n}\n",""])},function(t,e,r){"use strict";var n=r(8);var o=r.n(n);var i=o.a},function(t,e,r){var n=r(27);var o=r(0)("toStringTag");var i=n(function(){return arguments}())=="Arguments";var a=function(t,e){try{return t[e]}catch(t){}};t.exports=function(t){var e,r,u;return t===undefined?"Undefined":t===null?"Null":typeof(r=a(e=Object(t),o))=="string"?r:i?n(e):(u=n(e))=="Object"&&typeof e.callee=="function"?"Arguments":u}},function(t,e,r){var n=r(33);var o=r(0)("iterator");var i=r(7);t.exports=r(6).getIteratorMethod=function(t){if(t!=undefined)return t[o]||t["@@iterator"]||i[n(t)]}},function(t,e,r){var n=r(5);var o=r(34);t.exports=r(6).getIterator=function(t){var e=o(t);if(typeof e!="function")throw TypeError(t+" is not iterable!");return n(e.call(t))}},function(t,e,r){var n=r(12);var o=r(15);t.exports=function(t){return function(e,r){var i=String(o(e));var a=n(r);var u=i.length;var s,f;if(a<0||a>=u)return t?"":undefined;s=i.charCodeAt(a);return s<55296||s>56319||a+1===u||(f=i.charCodeAt(a+1))<56320||f>57343?t?i.charAt(a):s:t?i.slice(a,a+2):(s-55296<<10)+(f-56320)+65536}}},function(t,e,r){"use strict";var n=r(36)(true);r(26)(String,"String",function(t){this._t=String(t);this._i=0},function(){var t=this._t;var e=this._i;var r;if(e>=t.length)return{value:undefined,done:true};r=n(t,e);this._i+=r.length;return{value:r,done:false}})},function(t,e,r){var n=r(15);t.exports=function(t){return Object(n(t))}},function(t,e,r){var n=r(3);var o=r(38);var i=r(11)("IE_PROTO");var a=Object.prototype;t.exports=Object.getPrototypeOf||function(t){t=o(t);if(n(t,i))return t[i];if(typeof t.constructor=="function"&&t instanceof t.constructor){return t.constructor.prototype}return t instanceof Object?a:null}},function(t,e,r){var n=r(1).document;t.exports=n&&n.documentElement},function(t,e,r){var n=r(12);var o=Math.max;var i=Math.min;t.exports=function(t,e){t=n(t);return t<0?o(t+e,0):i(t,e)}},function(t,e,r){var n=r(12);var o=Math.min;t.exports=function(t){return t>0?o(n(t),9007199254740991):0}},function(t,e,r){var n=r(16);var o=r(42);var i=r(41);t.exports=function(t){return function(e,r,a){var u=n(e);var s=o(u.length);var f=i(a,s);var c;if(t&&r!=r)while(s>f){c=u[f++];if(c!=c)return true}else for(;s>f;f++)if(t||f in u){if(u[f]===r)return t||f||0}return!t&&-1}}},function(t,e,r){var n=r(3);var o=r(16);var i=r(43)(false);var a=r(11)("IE_PROTO");t.exports=function(t,e){var r=o(t);var u=0;var s=[];var f;for(f in r)if(f!=a)n(r,f)&&s.push(f);while(e.length>u)if(n(r,f=e[u++])){~i(s,f)||s.push(f)}return s}},function(t,e,r){var n=r(44);var o=r(19);t.exports=Object.keys||function t(e){return n(e,o)}},function(t,e,r){var n=r(14);var o=r(5);var i=r(45);t.exports=r(4)?Object.defineProperties:function t(e,r){o(e);var a=i(r);var u=a.length;var s=0;var f;while(u>s)n.f(e,f=a[s++],r[f]);return e}},function(t,e,r){var n=r(5);var o=r(46);var i=r(19);var a=r(11)("IE_PROTO");var u=function(){};var s="prototype";var f=function(){var t=r(23)("iframe");var e=i.length;var n="<";var o=">";var a;t.style.display="none";r(40).appendChild(t);t.src="javascript:";a=t.contentWindow.document;a.open();a.write(n+"script"+o+"document.F=Object"+n+"/script"+o);a.close();f=a.F;while(e--)delete f[s][i[e]];return f()};t.exports=Object.create||function t(e,r){var i;if(e!==null){u[s]=n(e);i=new u;u[s]=null;i[a]=e}else i=f();return r===undefined?i:o(i,r)}},function(t,e,r){"use strict";var n=r(47);var o=r(22);var i=r(18);var a={};r(2)(a,r(0)("iterator"),function(){return this});t.exports=function(t,e,r){t.prototype=n(a,{next:o(1,r)});i(t,e+" Iterator")}},function(t,e,r){t.exports=r(2)},function(t,e,r){var n=r(13);t.exports=function(t,e){if(!n(t))return t;var r,o;if(e&&typeof(r=t.toString)=="function"&&!n(o=r.call(t)))return o;if(typeof(r=t.valueOf)=="function"&&!n(o=r.call(t)))return o;if(!e&&typeof(r=t.toString)=="function"&&!n(o=r.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,e,r){t.exports=!r(4)&&!r(24)(function(){return Object.defineProperty(r(23)("div"),"a",{get:function(){return 7}}).a!=7})},function(t,e){t.exports=function(t){if(typeof t!="function")throw TypeError(t+" is not a function!");return t}},function(t,e,r){var n=r(52);t.exports=function(t,e,r){n(t);if(e===undefined)return t;switch(r){case 1:return function(r){return t.call(e,r)};case 2:return function(r,n){return t.call(e,r,n)};case 3:return function(r,n,o){return t.call(e,r,n,o)}}return function(){return t.apply(e,arguments)}}},function(t,e,r){var n=r(1);var o=r(6);var i=r(53);var a=r(2);var u=r(3);var s="prototype";var f=function(t,e,r){var c=t&f.F;var l=t&f.G;var v=t&f.S;var d=t&f.P;var p=t&f.B;var h=t&f.W;var y=l?o:o[e]||(o[e]={});var m=y[s];var g=l?n:v?n[e]:(n[e]||{})[s];var x,b,w;if(l)r=e;for(x in r){b=!c&&g&&g[x]!==undefined;if(b&&u(y,x))continue;w=b?g[x]:r[x];y[x]=l&&typeof g[x]!="function"?r[x]:p&&b?i(w,n):h&&g[x]==w?function(t){var e=function(e,r,n){if(this instanceof t){switch(arguments.length){case 0:return new t;case 1:return new t(e);case 2:return new t(e,r)}return new t(e,r,n)}return t.apply(this,arguments)};e[s]=t[s];return e}(w):d&&typeof w=="function"?i(Function.call,w):w;if(d){(y.virtual||(y.virtual={}))[x]=w;if(t&f.R&&m&&!m[x])a(m,x,w)}}};f.F=1;f.G=2;f.S=4;f.P=8;f.B=16;f.W=32;f.U=64;f.R=128;t.exports=f},function(t,e,r){var n=r(27);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return n(t)=="String"?t.split(""):Object(t)}},function(t,e){t.exports=function(t,e){return{value:e,done:!!t}}},function(t,e){t.exports=function(){}},function(t,e,r){"use strict";var n=r(57);var o=r(56);var i=r(7);var a=r(16);t.exports=r(26)(Array,"Array",function(t,e){this._t=a(t);this._i=0;this._k=e},function(){var t=this._t;var e=this._k;var r=this._i++;if(!t||r>=t.length){this._t=undefined;return o(1)}if(e=="keys")return o(0,r);if(e=="values")return o(0,t[r]);return o(0,[r,t[r]])},"values");i.Arguments=i.Array;n("keys");n("values");n("entries")},function(t,e,r){r(58);var n=r(1);var o=r(2);var i=r(7);var a=r(0)("toStringTag");var u=("CSSRuleList,CSSStyleDeclaration,CSSValueList,ClientRectList,DOMRectList,DOMStringList,"+"DOMTokenList,DataTransferItemList,FileList,HTMLAllCollection,HTMLCollection,HTMLFormElement,HTMLSelectElement,"+"MediaList,MimeTypeArray,NamedNodeMap,NodeList,PaintRequestList,Plugin,PluginArray,SVGLengthList,SVGNumberList,"+"SVGPathSegList,SVGPointList,SVGStringList,SVGTransformList,SourceBufferList,StyleSheetList,TextTrackCueList,"+"TextTrackList,TouchList").split(",");for(var s=0;s<u.length;s++){var f=u[s];var c=n[f];var l=c&&c.prototype;if(l&&!l[a])o(l,a,f);i[f]=i.Array}},function(t,e,r){r(59);r(37);t.exports=r(35)},function(t,e,r){t.exports={default:r(60),__esModule:true}},function(t,e,r){"use strict";r.r(e);var n=r(17);var o=r(10);for(var i in o)if(i!=="default")(function(t){r.d(e,t,function(){return o[t]})})(i);var a=r(32);var u=r(28);var s=Object(u["a"])(o["default"],n["a"],n["b"],false,null,"4e520537",null);if(false){var f}s.options.__file="src\\Dropdown.vue";e["default"]=s.exports}])});


--------------------------------------------------------------------------------
/dist/vue-simple-search-dropdown.min.js:
--------------------------------------------------------------------------------
1 | window["Dropdown"]=function(t){var e={};function r(n){if(e[n]){return e[n].exports}var o=e[n]={i:n,l:false,exports:{}};t[n].call(o.exports,o,o.exports,r);o.l=true;return o.exports}r.m=t;r.c=e;r.d=function(t,e,n){if(!r.o(t,e)){Object.defineProperty(t,e,{enumerable:true,get:n})}};r.r=function(t){if(typeof Symbol!=="undefined"&&Symbol.toStringTag){Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})}Object.defineProperty(t,"__esModule",{value:true})};r.t=function(t,e){if(e&1)t=r(t);if(e&8)return t;if(e&4&&typeof t==="object"&&t&&t.__esModule)return t;var n=Object.create(null);r.r(n);Object.defineProperty(n,"default",{enumerable:true,value:t});if(e&2&&typeof t!="string")for(var o in t)r.d(n,o,function(e){return t[e]}.bind(null,o));return n};r.n=function(t){var e=t&&t.__esModule?function e(){return t["default"]}:function e(){return t};r.d(e,"a",e);return e};r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)};r.p="";return r(r.s=63)}([function(t,e,r){var n=r(21)("wks");var o=r(20);var i=r(1).Symbol;var a=typeof i=="function";var u=t.exports=function(t){return n[t]||(n[t]=a&&i[t]||(a?i:o)("Symbol."+t))};u.store=n},function(t,e){var r=t.exports=typeof window!="undefined"&&window.Math==Math?window:typeof self!="undefined"&&self.Math==Math?self:Function("return this")();if(typeof __g=="number")__g=r},function(t,e,r){var n=r(14);var o=r(22);t.exports=r(4)?function(t,e,r){return n.f(t,e,o(1,r))}:function(t,e,r){t[e]=r;return t}},function(t,e){var r={}.hasOwnProperty;t.exports=function(t,e){return r.call(t,e)}},function(t,e,r){t.exports=!r(24)(function(){return Object.defineProperty({},"a",{get:function(){return 7}}).a!=7})},function(t,e,r){var n=r(13);t.exports=function(t){if(!n(t))throw TypeError(t+" is not an object!");return t}},function(t,e){var r=t.exports={version:"2.5.7"};if(typeof __e=="number")__e=r},function(t,e){t.exports={}},function(t,e,r){var n=r(31);if(typeof n==="string")n=[[t.i,n,""]];if(n.locals)t.exports=n.locals;var o=r(29).default;var i=o("0bcda724",n,false,{});if(false){}},function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:true});var n=r(61);var o=i(n);function i(t){return t&&t.__esModule?t:{default:t}}e.default={name:"Dropdown",template:"Dropdown",props:{options:{type:Array,required:true,default:[],note:"Options of dropdown. An array of options with id and name"},placeholder:{type:String,required:false,default:"Please select an option",note:"Placeholder of dropdown"},disabled:{type:Boolean,required:false,default:false,note:"Disable the dropdown"}},data:function t(){return{selected:{},optionsShown:false,searchFilter:""}},created:function t(){this.$emit("selected",this.selected)},computed:{filteredOptions:function t(){var e=[];var r=new RegExp(this.searchFilter,"ig");var n=true;var i=false;var a=undefined;try{for(var u=(0,o.default)(this.options),s;!(n=(s=u.next()).done);n=true){var f=s.value;if(this.searchFilter.length<1||f.name.match(r)){if(e.length<6)e.push(f)}}}catch(t){i=true;a=t}finally{try{if(!n&&u.return){u.return()}}finally{if(i){throw a}}}return e}},methods:{selectOption:function t(e){this.selected=e;this.optionsShown=false;this.searchFilter=this.selected.name;this.$emit("selected",this.selected)},showOptions:function t(){if(!this.disabled){this.searchFilter="";this.optionsShown=true}},exit:function t(){if(!this.selected.id){this.selected={};this.searchFilter=""}else{this.searchFilter=this.selected.name}this.$emit("selected",this.selected);this.optionsShown=false},keyMonitor:function t(e){if(e.key==="Enter"&&this.filteredOptions[0])this.selectOption(this.filteredOptions[0])}},watch:{searchFilter:function t(){if(this.filteredOptions.length===0){this.selected={}}else{this.selected=this.filteredOptions[0]}this.$emit("filter",this.searchFilter)}}}},function(t,e,r){"use strict";r.r(e);var n=r(9);var o=r.n(n);for(var i in n)if(i!=="default")(function(t){r.d(e,t,function(){return n[t]})})(i);e["default"]=o.a},function(t,e,r){var n=r(21)("keys");var o=r(20);t.exports=function(t){return n[t]||(n[t]=o(t))}},function(t,e){var r=Math.ceil;var n=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?n:r)(t)}},function(t,e){t.exports=function(t){return typeof t==="object"?t!==null:typeof t==="function"}},function(t,e,r){var n=r(5);var o=r(51);var i=r(50);var a=Object.defineProperty;e.f=r(4)?Object.defineProperty:function t(e,r,u){n(e);r=i(r,true);n(u);if(o)try{return a(e,r,u)}catch(t){}if("get"in u||"set"in u)throw TypeError("Accessors not supported!");if("value"in u)e[r]=u.value;return e}},function(t,e){t.exports=function(t){if(t==undefined)throw TypeError("Can't call method on  "+t);return t}},function(t,e,r){var n=r(55);var o=r(15);t.exports=function(t){return n(o(t))}},function(t,e,r){"use strict";var n=function(){var t=this;var e=t.$createElement;var r=t._self._c||e;return t.options?r("div",{staticClass:"dropdown"},[r("input",{directives:[{name:"model",rawName:"v-model",value:t.searchFilter,expression:"searchFilter"}],staticClass:"dropdown-input",attrs:{disabled:t.disabled,placeholder:t.placeholder},domProps:{value:t.searchFilter},on:{click:function(e){t.showOptions()},blur:function(e){t.exit()},keyup:t.keyMonitor,input:function(e){if(e.target.composing){return}t.searchFilter=e.target.value}}}),t._v(" "),r("div",{directives:[{name:"show",rawName:"v-show",value:t.optionsShown,expression:"optionsShown"}],staticClass:"dropdown-content"},t._l(t.filteredOptions,function(e){return r("div",{staticClass:"dropdown-item",on:{mousedown:function(r){t.selectOption(e)}}},[t._v("\n        "+t._s(e.name||e.id||"-")+"\n    ")])}))]):t._e()};var o=[];n._withStripped=true;r.d(e,"a",function(){return n});r.d(e,"b",function(){return o})},function(t,e,r){var n=r(14).f;var o=r(3);var i=r(0)("toStringTag");t.exports=function(t,e,r){if(t&&!o(t=r?t:t.prototype,i))n(t,i,{configurable:true,value:e})}},function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,e){var r=0;var n=Math.random();t.exports=function(t){return"Symbol(".concat(t===undefined?"":t,")_",(++r+n).toString(36))}},function(t,e,r){var n=r(6);var o=r(1);var i="__core-js_shared__";var a=o[i]||(o[i]={});(t.exports=function(t,e){return a[t]||(a[t]=e!==undefined?e:{})})("versions",[]).push({version:n.version,mode:r(25)?"pure":"global",copyright:"© 2018 Denis Pushkarev (zloirock.ru)"})},function(t,e){t.exports=function(t,e){return{enumerable:!(t&1),configurable:!(t&2),writable:!(t&4),value:e}}},function(t,e,r){var n=r(13);var o=r(1).document;var i=n(o)&&n(o.createElement);t.exports=function(t){return i?o.createElement(t):{}}},function(t,e){t.exports=function(t){try{return!!t()}catch(t){return true}}},function(t,e){t.exports=true},function(t,e,r){"use strict";var n=r(25);var o=r(54);var i=r(49);var a=r(2);var u=r(7);var s=r(48);var f=r(18);var c=r(39);var l=r(0)("iterator");var v=!([].keys&&"next"in[].keys());var d="@@iterator";var p="keys";var h="values";var y=function(){return this};t.exports=function(t,e,r,m,g,x,w){s(r,e,m);var b=function(t){if(!v&&t in j)return j[t];switch(t){case p:return function e(){return new r(this,t)};case h:return function e(){return new r(this,t)}}return function e(){return new r(this,t)}};var _=e+" Iterator";var S=g==h;var O=false;var j=t.prototype;var M=j[l]||j[d]||g&&j[g];var C=M||b(g);var T=g?!S?C:b("entries"):undefined;var L=e=="Array"?j.entries||M:M;var k,P,E;if(L){E=c(L.call(new t));if(E!==Object.prototype&&E.next){f(E,_,true);if(!n&&typeof E[l]!="function")a(E,l,y)}}if(S&&M&&M.name!==h){O=true;C=function t(){return M.call(this)}}if((!n||w)&&(v||O||!j[l])){a(j,l,C)}u[e]=C;u[_]=y;if(g){k={values:S?C:b(h),keys:x?C:b(p),entries:T};if(w)for(P in k){if(!(P in j))i(j,P,k[P])}else o(o.P+o.F*(v||O),e,k)}return k}},function(t,e){var r={}.toString;t.exports=function(t){return r.call(t).slice(8,-1)}},function(t,e,r){"use strict";r.d(e,"a",function(){return n});function n(t,e,r,n,o,i,a,u){var s=typeof t==="function"?t.options:t;if(e){s.render=e;s.staticRenderFns=r;s._compiled=true}if(n){s.functional=true}if(i){s._scopeId="data-v-"+i}var f;if(a){f=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext;if(!t&&typeof __VUE_SSR_CONTEXT__!=="undefined"){t=__VUE_SSR_CONTEXT__}if(o){o.call(this,t)}if(t&&t._registeredComponents){t._registeredComponents.add(a)}};s._ssrRegister=f}else if(o){f=u?function(){o.call(this,this.$root.$options.shadowRoot)}:o}if(f){if(s.functional){s._injectStyles=f;var c=s.render;s.render=function t(e,r){f.call(r);return c(e,r)}}else{var l=s.beforeCreate;s.beforeCreate=l?[].concat(l,f):[f]}}return{exports:t,options:s}}},function(t,e,r){"use strict";r.r(e);function n(t,e){var r=[];var n={};for(var o=0;o<e.length;o++){var i=e[o];var a=i[0];var u=i[1];var s=i[2];var f=i[3];var c={id:t+":"+o,css:u,media:s,sourceMap:f};if(!n[a]){r.push(n[a]={id:a,parts:[c]})}else{n[a].parts.push(c)}}return r}r.d(e,"default",function(){return p});var o=typeof document!=="undefined";if(typeof DEBUG!=="undefined"&&DEBUG){if(!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 i={};var a=o&&(document.head||document.getElementsByTagName("head")[0]);var u=null;var s=0;var f=false;var c=function(){};var l=null;var v="data-vue-ssr-id";var d=typeof navigator!=="undefined"&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function p(t,e,r,o){f=r;l=o||{};var a=n(t,e);h(a);return function e(r){var o=[];for(var u=0;u<a.length;u++){var s=a[u];var f=i[s.id];f.refs--;o.push(f)}if(r){a=n(t,r);h(a)}else{a=[]}for(var u=0;u<o.length;u++){var f=o[u];if(f.refs===0){for(var c=0;c<f.parts.length;c++){f.parts[c]()}delete i[f.id]}}}}function h(t){for(var e=0;e<t.length;e++){var r=t[e];var n=i[r.id];if(n){n.refs++;for(var o=0;o<n.parts.length;o++){n.parts[o](r.parts[o])}for(;o<r.parts.length;o++){n.parts.push(m(r.parts[o]))}if(n.parts.length>r.parts.length){n.parts.length=r.parts.length}}else{var a=[];for(var o=0;o<r.parts.length;o++){a.push(m(r.parts[o]))}i[r.id]={id:r.id,refs:1,parts:a}}}}function y(){var t=document.createElement("style");t.type="text/css";a.appendChild(t);return t}function m(t){var e,r;var n=document.querySelector("style["+v+'~="'+t.id+'"]');if(n){if(f){return c}else{n.parentNode.removeChild(n)}}if(d){var o=s++;n=u||(u=y());e=x.bind(null,n,o,false);r=x.bind(null,n,o,true)}else{n=y();e=w.bind(null,n);r=function(){n.parentNode.removeChild(n)}}e(t);return function n(o){if(o){if(o.css===t.css&&o.media===t.media&&o.sourceMap===t.sourceMap){return}e(t=o)}else{r()}}}var g=function(){var t=[];return function(e,r){t[e]=r;return t.filter(Boolean).join("\n")}}();function x(t,e,r,n){var o=r?"":n.css;if(t.styleSheet){t.styleSheet.cssText=g(e,o)}else{var i=document.createTextNode(o);var a=t.childNodes;if(a[e])t.removeChild(a[e]);if(a.length){t.insertBefore(i,a[e])}else{t.appendChild(i)}}}function w(t,e){var r=e.css;var n=e.media;var o=e.sourceMap;if(n){t.setAttribute("media",n)}if(l.ssrId){t.setAttribute(v,e.id)}if(o){r+="\n/*# sourceURL="+o.sources[0]+" */";r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"}if(t.styleSheet){t.styleSheet.cssText=r}else{while(t.firstChild){t.removeChild(t.firstChild)}t.appendChild(document.createTextNode(r))}}},function(t,e){t.exports=function(t){var e=[];e.toString=function e(){return this.map(function(e){var n=r(e,t);if(e[2]){return"@media "+e[2]+"{"+n+"}"}else{return n}}).join("")};e.i=function(t,r){if(typeof t==="string")t=[[null,t,""]];var n={};for(var o=0;o<this.length;o++){var i=this[o][0];if(typeof i==="number")n[i]=true}for(o=0;o<t.length;o++){var a=t[o];if(typeof a[0]!=="number"||!n[a[0]]){if(r&&!a[2]){a[2]=r}else if(r){a[2]="("+a[2]+") and ("+r+")"}e.push(a)}}};return e};function r(t,e){var r=t[1]||"";var o=t[3];if(!o){return r}if(e&&typeof btoa==="function"){var i=n(o);var a=o.sources.map(function(t){return"/*# sourceURL="+o.sourceRoot+t+" */"});return[r].concat(a).concat([i]).join("\n")}return[r].join("\n")}function n(t){var e=btoa(unescape(encodeURIComponent(JSON.stringify(t))));var r="sourceMappingURL=data:application/json;charset=utf-8;base64,"+e;return"/*# "+r+" */"}},function(t,e,r){e=t.exports=r(30)(false);e.push([t.i,"\n.dropdown[data-v-4e520537] {\n  position: relative;\n  display: block;\n  margin: auto;\n}\n.dropdown .dropdown-input[data-v-4e520537] {\n    background: #fff;\n    cursor: pointer;\n    border: 1px solid #e7ecf5;\n    border-radius: 3px;\n    color: #333;\n    display: block;\n    font-size: .8em;\n    padding: 6px;\n    min-width: 250px;\n    max-width: 250px;\n}\n.dropdown .dropdown-input[data-v-4e520537]:hover {\n      background: #f8f8fa;\n}\n.dropdown .dropdown-content[data-v-4e520537] {\n    position: absolute;\n    background-color: #fff;\n    min-width: 248px;\n    max-width: 248px;\n    border: 1px solid #e7ecf5;\n    box-shadow: 0px -8px 34px 0px rgba(0, 0, 0, 0.05);\n    z-index: 1;\n}\n.dropdown .dropdown-content .dropdown-item[data-v-4e520537] {\n      color: black;\n      font-size: .7em;\n      line-height: 1em;\n      padding: 8px;\n      text-decoration: none;\n      display: block;\n      cursor: pointer;\n}\n.dropdown .dropdown-content .dropdown-item[data-v-4e520537]:hover {\n        background-color: #e7ecf5;\n}\n.dropdown .dropdown:hover .dropdowncontent[data-v-4e520537] {\n    display: block;\n}\n",""])},function(t,e,r){"use strict";var n=r(8);var o=r.n(n);var i=o.a},function(t,e,r){var n=r(27);var o=r(0)("toStringTag");var i=n(function(){return arguments}())=="Arguments";var a=function(t,e){try{return t[e]}catch(t){}};t.exports=function(t){var e,r,u;return t===undefined?"Undefined":t===null?"Null":typeof(r=a(e=Object(t),o))=="string"?r:i?n(e):(u=n(e))=="Object"&&typeof e.callee=="function"?"Arguments":u}},function(t,e,r){var n=r(33);var o=r(0)("iterator");var i=r(7);t.exports=r(6).getIteratorMethod=function(t){if(t!=undefined)return t[o]||t["@@iterator"]||i[n(t)]}},function(t,e,r){var n=r(5);var o=r(34);t.exports=r(6).getIterator=function(t){var e=o(t);if(typeof e!="function")throw TypeError(t+" is not iterable!");return n(e.call(t))}},function(t,e,r){var n=r(12);var o=r(15);t.exports=function(t){return function(e,r){var i=String(o(e));var a=n(r);var u=i.length;var s,f;if(a<0||a>=u)return t?"":undefined;s=i.charCodeAt(a);return s<55296||s>56319||a+1===u||(f=i.charCodeAt(a+1))<56320||f>57343?t?i.charAt(a):s:t?i.slice(a,a+2):(s-55296<<10)+(f-56320)+65536}}},function(t,e,r){"use strict";var n=r(36)(true);r(26)(String,"String",function(t){this._t=String(t);this._i=0},function(){var t=this._t;var e=this._i;var r;if(e>=t.length)return{value:undefined,done:true};r=n(t,e);this._i+=r.length;return{value:r,done:false}})},function(t,e,r){var n=r(15);t.exports=function(t){return Object(n(t))}},function(t,e,r){var n=r(3);var o=r(38);var i=r(11)("IE_PROTO");var a=Object.prototype;t.exports=Object.getPrototypeOf||function(t){t=o(t);if(n(t,i))return t[i];if(typeof t.constructor=="function"&&t instanceof t.constructor){return t.constructor.prototype}return t instanceof Object?a:null}},function(t,e,r){var n=r(1).document;t.exports=n&&n.documentElement},function(t,e,r){var n=r(12);var o=Math.max;var i=Math.min;t.exports=function(t,e){t=n(t);return t<0?o(t+e,0):i(t,e)}},function(t,e,r){var n=r(12);var o=Math.min;t.exports=function(t){return t>0?o(n(t),9007199254740991):0}},function(t,e,r){var n=r(16);var o=r(42);var i=r(41);t.exports=function(t){return function(e,r,a){var u=n(e);var s=o(u.length);var f=i(a,s);var c;if(t&&r!=r)while(s>f){c=u[f++];if(c!=c)return true}else for(;s>f;f++)if(t||f in u){if(u[f]===r)return t||f||0}return!t&&-1}}},function(t,e,r){var n=r(3);var o=r(16);var i=r(43)(false);var a=r(11)("IE_PROTO");t.exports=function(t,e){var r=o(t);var u=0;var s=[];var f;for(f in r)if(f!=a)n(r,f)&&s.push(f);while(e.length>u)if(n(r,f=e[u++])){~i(s,f)||s.push(f)}return s}},function(t,e,r){var n=r(44);var o=r(19);t.exports=Object.keys||function t(e){return n(e,o)}},function(t,e,r){var n=r(14);var o=r(5);var i=r(45);t.exports=r(4)?Object.defineProperties:function t(e,r){o(e);var a=i(r);var u=a.length;var s=0;var f;while(u>s)n.f(e,f=a[s++],r[f]);return e}},function(t,e,r){var n=r(5);var o=r(46);var i=r(19);var a=r(11)("IE_PROTO");var u=function(){};var s="prototype";var f=function(){var t=r(23)("iframe");var e=i.length;var n="<";var o=">";var a;t.style.display="none";r(40).appendChild(t);t.src="javascript:";a=t.contentWindow.document;a.open();a.write(n+"script"+o+"document.F=Object"+n+"/script"+o);a.close();f=a.F;while(e--)delete f[s][i[e]];return f()};t.exports=Object.create||function t(e,r){var i;if(e!==null){u[s]=n(e);i=new u;u[s]=null;i[a]=e}else i=f();return r===undefined?i:o(i,r)}},function(t,e,r){"use strict";var n=r(47);var o=r(22);var i=r(18);var a={};r(2)(a,r(0)("iterator"),function(){return this});t.exports=function(t,e,r){t.prototype=n(a,{next:o(1,r)});i(t,e+" Iterator")}},function(t,e,r){t.exports=r(2)},function(t,e,r){var n=r(13);t.exports=function(t,e){if(!n(t))return t;var r,o;if(e&&typeof(r=t.toString)=="function"&&!n(o=r.call(t)))return o;if(typeof(r=t.valueOf)=="function"&&!n(o=r.call(t)))return o;if(!e&&typeof(r=t.toString)=="function"&&!n(o=r.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,e,r){t.exports=!r(4)&&!r(24)(function(){return Object.defineProperty(r(23)("div"),"a",{get:function(){return 7}}).a!=7})},function(t,e){t.exports=function(t){if(typeof t!="function")throw TypeError(t+" is not a function!");return t}},function(t,e,r){var n=r(52);t.exports=function(t,e,r){n(t);if(e===undefined)return t;switch(r){case 1:return function(r){return t.call(e,r)};case 2:return function(r,n){return t.call(e,r,n)};case 3:return function(r,n,o){return t.call(e,r,n,o)}}return function(){return t.apply(e,arguments)}}},function(t,e,r){var n=r(1);var o=r(6);var i=r(53);var a=r(2);var u=r(3);var s="prototype";var f=function(t,e,r){var c=t&f.F;var l=t&f.G;var v=t&f.S;var d=t&f.P;var p=t&f.B;var h=t&f.W;var y=l?o:o[e]||(o[e]={});var m=y[s];var g=l?n:v?n[e]:(n[e]||{})[s];var x,w,b;if(l)r=e;for(x in r){w=!c&&g&&g[x]!==undefined;if(w&&u(y,x))continue;b=w?g[x]:r[x];y[x]=l&&typeof g[x]!="function"?r[x]:p&&w?i(b,n):h&&g[x]==b?function(t){var e=function(e,r,n){if(this instanceof t){switch(arguments.length){case 0:return new t;case 1:return new t(e);case 2:return new t(e,r)}return new t(e,r,n)}return t.apply(this,arguments)};e[s]=t[s];return e}(b):d&&typeof b=="function"?i(Function.call,b):b;if(d){(y.virtual||(y.virtual={}))[x]=b;if(t&f.R&&m&&!m[x])a(m,x,b)}}};f.F=1;f.G=2;f.S=4;f.P=8;f.B=16;f.W=32;f.U=64;f.R=128;t.exports=f},function(t,e,r){var n=r(27);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return n(t)=="String"?t.split(""):Object(t)}},function(t,e){t.exports=function(t,e){return{value:e,done:!!t}}},function(t,e){t.exports=function(){}},function(t,e,r){"use strict";var n=r(57);var o=r(56);var i=r(7);var a=r(16);t.exports=r(26)(Array,"Array",function(t,e){this._t=a(t);this._i=0;this._k=e},function(){var t=this._t;var e=this._k;var r=this._i++;if(!t||r>=t.length){this._t=undefined;return o(1)}if(e=="keys")return o(0,r);if(e=="values")return o(0,t[r]);return o(0,[r,t[r]])},"values");i.Arguments=i.Array;n("keys");n("values");n("entries")},function(t,e,r){r(58);var n=r(1);var o=r(2);var i=r(7);var a=r(0)("toStringTag");var u=("CSSRuleList,CSSStyleDeclaration,CSSValueList,ClientRectList,DOMRectList,DOMStringList,"+"DOMTokenList,DataTransferItemList,FileList,HTMLAllCollection,HTMLCollection,HTMLFormElement,HTMLSelectElement,"+"MediaList,MimeTypeArray,NamedNodeMap,NodeList,PaintRequestList,Plugin,PluginArray,SVGLengthList,SVGNumberList,"+"SVGPathSegList,SVGPointList,SVGStringList,SVGTransformList,SourceBufferList,StyleSheetList,TextTrackCueList,"+"TextTrackList,TouchList").split(",");for(var s=0;s<u.length;s++){var f=u[s];var c=n[f];var l=c&&c.prototype;if(l&&!l[a])o(l,a,f);i[f]=i.Array}},function(t,e,r){r(59);r(37);t.exports=r(35)},function(t,e,r){t.exports={default:r(60),__esModule:true}},function(t,e,r){"use strict";r.r(e);var n=r(17);var o=r(10);for(var i in o)if(i!=="default")(function(t){r.d(e,t,function(){return o[t]})})(i);var a=r(32);var u=r(28);var s=Object(u["a"])(o["default"],n["a"],n["b"],false,null,"4e520537",null);if(false){var f}s.options.__file="src\\Dropdown.vue";e["default"]=s.exports},function(t,e,r){"use strict";var n=r(62);var o=i(n);function i(t){return t&&t.__esModule?t:{default:t}}t.exports={install:function t(e,r){e.component("Dropdown",o.default)}}}]);


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <title>Vue.js search dropdown component - example</title>
 4 |     <script type="text/javascript" src="https://unpkg.com/vue@latest"></script>
 5 |     <script type="text/javascript" src="https://unpkg.com/vue-simple-search-dropdown@latest/dist/vue-simple-search-dropdown.min.js"></script>
 6 |     <style type="text/css">
 7 |       body {
 8 |         font-family: Arial, Helvetica, sans-serif;
 9 |         line-height: 3em;
10 |       }
11 |       h1 {
12 |         font-weight: 100;
13 |         font-size: 1.5em;
14 |       }
15 |       p {
16 |         font-size: .8em;
17 |         color: #ccc;
18 |       }
19 |     </style>
20 |   </head>
21 |   <body>
22 |     <div id="app">
23 |       <h1>Vue.js search dropdown component - example</h1>
24 |       <p>Type "Unicorn" and press enter : </p>
25 |       <Dropdown
26 |         :options="options"
27 |         v-on:selected="validateSelection"
28 |         v-on:filter="getDropdownValues"
29 |         :disabled="false"
30 |         placeholder="Please select an animal">
31 |       </Dropdown>
32 |       <p>Selected animal: {{ selected.name || 'none' }}</p>
33 |       <br />
34 |       <p>Please see documentation here: <a href="https://github.com/romainsimon/vue-simple-search-dropdown">https://github.com/romainsimon/vue-simple-search-dropdown</a></p>
35 |     </div>
36 |     <script type="text/javascript">
37 |       Vue.use(Dropdown);
38 |       new Vue({
39 |         el: '#app',
40 |         data () {
41 |           return {
42 |             options: [
43 |               { name: 'Cat', id: 'cat' },
44 |               { name: 'Dog', id: 'dog' },
45 |               { name: 'Elephant', id: 'elephant' },
46 |               { name: 'Girafe', id: 'girafe' },
47 |               { name: 'Snake', id: 'snake' },
48 |               { name: 'Spider', id: 'spider' },
49 |               { name: 'Unicorn', id: 'unicorn' }              
50 |             ],
51 |             selected: { name: null, id: null }
52 |           }
53 |         },
54 |         methods: {
55 |           validateSelection(selection) {
56 |             this.selected = selection;
57 |             console.log(selection.name+' has been selected');
58 |           },
59 |           getDropdownValues(keyword) {
60 |             console.log('You could refresh options by querying the API with '+keyword);
61 |           }
62 |         }
63 |       });
64 |     </script>
65 |   </body>
66 | </html>
67 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-simple-search-dropdown",
 3 |   "version": "1.0.1",
 4 |   "description": "A Vue.js simple dropdown component with search",
 5 |   "main": "dist/vue-simple-search-dropdown.js",
 6 |   "scripts": {
 7 |     "build": "rimraf ./dist && webpack --config ./webpack.config.js"
 8 |   },
 9 |   "author": "Romain Simon <contact@romainsimon.net>",
10 |   "license": "MIT",
11 |   "dependencies": {},
12 |   "keywords": [
13 |     "vue",
14 |     "vuejs",
15 |     "dropdown"
16 |   ],
17 |   "repository": {
18 |     "type": "git",
19 |     "url": "git+https://github.com/romainsimon/vue-simple-search-dropdown"
20 |   },
21 |   "devDependencies": {
22 |     "babel-core": "^6.26.3",
23 |     "babel-loader": "^7.1.4",
24 |     "babel-plugin-transform-runtime": "^6.23.0",
25 |     "babel-preset-es2015": "^6.24.1",
26 |     "babel-preset-stage-2": "^6.24.1",
27 |     "babel-runtime": "^6.26.0",
28 |     "css-loader": "^0.28.11",
29 |     "extract-text-webpack-plugin": "^3.0.2",
30 |     "node-sass": "^4.9.0",
31 |     "rimraf": "^2.6.2",
32 |     "sass-loader": "^7.0.3",
33 |     "uglifyjs-webpack-plugin": "^1.2.5",
34 |     "vue": "^2.5.16",
35 |     "vue-html-loader": "^1.2.4",
36 |     "vue-loader": "^15.2.4",
37 |     "vue-style-loader": "^4.1.0",
38 |     "vue-template-compiler": "^2.5.16",
39 |     "webpack": "^4.11.1",
40 |     "webpack-cli": "^3.0.3",
41 |     "webpack-merge": "^4.1.2"
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/Dropdown.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="dropdown" v-if="options">
  3 | 
  4 |     <!-- Dropdown Input -->
  5 |     <input class="dropdown-input"
  6 |       :name="name"
  7 |       @focus="showOptions()"
  8 |       @blur="exit()"
  9 |       @keyup="keyMonitor"
 10 |       v-model="searchFilter"
 11 |       :disabled="disabled"
 12 |       :placeholder="placeholder" />
 13 | 
 14 |     <!-- Dropdown Menu -->
 15 |     <div class="dropdown-content"
 16 |       v-show="optionsShown">
 17 |       <div
 18 |         class="dropdown-item"
 19 |         @mousedown="selectOption(option)"
 20 |         v-for="(option, index) in filteredOptions"
 21 |         :key="index">
 22 |           {{ option.name || option.id || '-' }}
 23 |       </div>
 24 |     </div>
 25 |   </div>
 26 | </template>
 27 | 
 28 | <script>
 29 |   export default {
 30 |     name: 'Dropdown',
 31 |     template: 'Dropdown',
 32 |     props: {
 33 |       name: {
 34 |         type: String,
 35 |         required: false,
 36 |         default: 'dropdown',
 37 |         note: 'Input name'
 38 |       },
 39 |       options: {
 40 |         type: Array,
 41 |         required: true,
 42 |         default: [],
 43 |         note: 'Options of dropdown. An array of options with id and name',
 44 |       },
 45 |       placeholder: {
 46 |         type: String,
 47 |         required: false,
 48 |         default: 'Please select an option',
 49 |         note: 'Placeholder of dropdown'
 50 |       },
 51 |       disabled: {
 52 |         type: Boolean,
 53 |         required: false,
 54 |         default: false,
 55 |         note: 'Disable the dropdown'
 56 |       },
 57 |       maxItem: {
 58 |         type: Number,
 59 |         required: false,
 60 |         default: 6,
 61 |         note: 'Max items showing'
 62 |       }
 63 |     },
 64 |     data() {
 65 |       return {
 66 |         selected: {},
 67 |         optionsShown: false,
 68 |         searchFilter: ''
 69 |       }
 70 |     },
 71 |     created() {
 72 |       this.$emit('selected', this.selected);
 73 |     },
 74 |     computed: {
 75 |       filteredOptions() {
 76 |         const filtered = [];
 77 |         const regOption = new RegExp(this.searchFilter, 'ig');
 78 |         for (const option of this.options) {
 79 |           if (this.searchFilter.length < 1 || option.name.match(regOption)){
 80 |             if (filtered.length < this.maxItem) filtered.push(option);
 81 |           }
 82 |         }
 83 |         return filtered;
 84 |       }
 85 |     },
 86 |     methods: {
 87 |       selectOption(option) {
 88 |         this.selected = option;
 89 |         this.optionsShown = false;
 90 |         this.searchFilter = this.selected.name;
 91 |         this.$emit('selected', this.selected);
 92 |       },
 93 |       showOptions(){
 94 |         if (!this.disabled) {
 95 |           this.searchFilter = '';
 96 |           this.optionsShown = true;
 97 |         }
 98 |       },
 99 |       exit() {
100 |         if (!this.selected.id) {
101 |           this.selected = {};
102 |           this.searchFilter = '';
103 |         } else {
104 |           this.searchFilter = this.selected.name;
105 |         }
106 |         this.$emit('selected', this.selected);
107 |         this.optionsShown = false;
108 |       },
109 |       // Selecting when pressing Enter
110 |       keyMonitor: function(event) {
111 |         if (event.key === "Enter" && this.filteredOptions[0])
112 |           this.selectOption(this.filteredOptions[0]);
113 |       }
114 |     },
115 |     watch: {
116 |       searchFilter() {
117 |         if (this.filteredOptions.length === 0) {
118 |           this.selected = {};
119 |         } else {
120 |           this.selected = this.filteredOptions[0];
121 |         }
122 |         this.$emit('filter', this.searchFilter);
123 |       }
124 |     }
125 |   };
126 | </script>
127 | 
128 | 
129 | <style lang="scss" scoped>
130 |   .dropdown {
131 |     position: relative;
132 |     display: block;
133 |     margin: auto;
134 |     .dropdown-input {
135 |       background: #fff;
136 |       cursor: pointer;
137 |       border: 1px solid #e7ecf5;
138 |       border-radius: 3px;
139 |       color: #333;
140 |       display: block;
141 |       font-size: .8em;
142 |       padding: 6px;
143 |       min-width: 250px;
144 |       max-width: 250px;
145 |       &:hover {
146 |         background: #f8f8fa;
147 |       }
148 |     }
149 |     .dropdown-content {
150 |       position: absolute;
151 |       background-color: #fff;
152 |       min-width: 248px;
153 |       max-width: 248px;
154 |       max-height: 248px;
155 |       border: 1px solid #e7ecf5;
156 |       box-shadow: 0px -8px 34px 0px rgba(0,0,0,0.05);
157 |       overflow: auto;
158 |       z-index: 1;
159 |       .dropdown-item {
160 |         color: black;
161 |         font-size: .7em;
162 |         line-height: 1em;
163 |         padding: 8px;
164 |         text-decoration: none;
165 |         display: block;
166 |         cursor: pointer;
167 |         &:hover {
168 |           background-color: #e7ecf5;
169 |         }
170 |       }
171 |     }
172 |     .dropdown:hover .dropdowncontent {
173 |       display: block;
174 |     }
175 |   }
176 | </style>
177 | 


--------------------------------------------------------------------------------
/src/plugin.js:
--------------------------------------------------------------------------------
1 | import Dropdown from './Dropdown.vue';
2 | 
3 | module.exports = {
4 |   install: function (Vue, options) {
5 |     Vue.component('Dropdown', Dropdown);
6 |   }
7 | };
8 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
 3 | const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
 4 | const VueLoader = require('vue-loader');
 5 | const merge = require('webpack-merge');
 6 | const path = require('path');
 7 | 
 8 | const config = {
 9 |   output: {
10 |     path: path.resolve(__dirname + '/dist/'),
11 |   },
12 |   module: {
13 |     rules: [
14 |       {
15 |         test: /\.js$/,
16 |         loader: 'babel-loader',
17 |         include: __dirname,
18 |         exclude: /node_modules/
19 |       },
20 |       {
21 |         test: /\.vue$/,
22 |         loader: 'vue-loader',
23 |         options: {
24 |           rules: {
25 |             scss: ExtractTextPlugin.extract({
26 |               use: 'css-loader!sass-loader',
27 |               fallback: 'vue-style-loader'
28 |             }),
29 |             sass: ExtractTextPlugin.extract({
30 |               use: 'sass-loader',
31 |               fallback: 'vue-style-loader'
32 |             })
33 |           }
34 |         },
35 |       },
36 |       {
37 |         test: /\.scss$/,
38 |         use: [
39 |           'vue-style-loader',
40 |           'css-loader',
41 |           'sass-loader'
42 |         ]
43 |       }
44 |     ]
45 |   },
46 |   optimization: {
47 |     minimizer: [
48 |       new UglifyJSPlugin({
49 |         uglifyOptions: {
50 |           compress: false,
51 |           ecma: 6,
52 |           mangle: true
53 |         },
54 |         sourceMap: true
55 |       })
56 |     ]
57 |   },
58 |   plugins: [
59 |     new VueLoader.VueLoaderPlugin()
60 |   ]
61 | };
62 | 
63 | module.exports = [
64 |   merge(config, {
65 |     entry: path.resolve(__dirname + '/src/plugin.js'),
66 |     output: {
67 |       filename: 'vue-simple-search-dropdown.min.js',
68 |       libraryTarget: 'window',
69 |       library: 'Dropdown',
70 |     }
71 |   }),
72 |   merge(config, {
73 |     entry: path.resolve(__dirname + '/src/Dropdown.vue'),
74 |     output: {
75 |       filename: 'vue-simple-search-dropdown.js',
76 |       libraryTarget: 'umd',
77 |       library: 'vue-simple-search-dropdown',
78 |       umdNamedDefine: true
79 |     }
80 |   })
81 | ];
82 | 


--------------------------------------------------------------------------------