diff --git a/README.md b/README.md index f0db51ab..9b3dfade 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,13 @@ Probably the most complete *selecting* solution for Vue.js 2.0, without jQuery. * \> 99% test coverage * Fully configurable (see props list below) +## Breaking changes: +* Instead of Vue.partial for custom option templates you can use a custom render function. +* The `:key` props has changed to `:track-by`, due to conflicts with Vue 2.0. +* Support for `v-model` +* `@update` has changed to `@input` to also work with v-model +* `:selected` has changed to `:value` for the same reason + ## Install & basic usage ``` bash @@ -65,8 +72,6 @@ export default { ## Roadmap: * Grouping -* Support for partials -* Examples of custom components / templates ready to use in project ## Examples in jade-lang/pug-lang @@ -330,6 +335,16 @@ props: { */ id: { default: null + }, + /** + * Limits the options displayed in the dropdown + * to the first X options. + * @default 1000 + * @type {Integer} + */ + optionsLimit: { + type: Number, + default: 1000 } } diff --git a/docs/main.js b/docs/main.js index 6f421365..e77e309c 100644 --- a/docs/main.js +++ b/docs/main.js @@ -5,6 +5,12 @@ require('./docs.scss') import countries from './data/countries.json' import Multiselect from '../src/Multiselect' +let moreCountries = [] +for (var i = 0; i < 100; i++) { + moreCountries = moreCountries.concat(countries) +} +console.log(moreCountries.length) + function throttle (callback, limit) { var wait = false return function () { @@ -47,7 +53,7 @@ new Vue({ taggingSelected: [], searchable: true, placeholder: 'Select props', - countries: [], + countries: moreCountries, selectedCountries: [], actions: ['alert', 'console.log', 'scrollTop'], action: null, @@ -71,17 +77,7 @@ new Vue({ }, methods: { asyncFind (query) { - if (query.length === 0) { - this.countries = [] - } else { - this.isLoading = true - setTimeout(() => { - this.countries = countries.filter((element, index, array) => { - return element.name.toLowerCase().includes(query.toLowerCase()) - }) - this.isLoading = false - }, 1000) - } + this.countries = moreCountries.filter(country => country.name.toLowerCase().includes(query.toLowerCase())) }, onTagging (newTag) { this.source.push({ name: newTag, language: newTag }) diff --git a/docs/partials/examples/_ajax-search.jade b/docs/partials/examples/_ajax-search.jade index e3ccce76..8567da12 100644 --- a/docs/partials/examples/_ajax-search.jade +++ b/docs/partials/examples/_ajax-search.jade @@ -8,13 +8,14 @@ p.typo__p .grid__column.grid__unit--md-5 label.typo__label Async multiselect multiselect( + v-model="selectedCountries", :options="countries", - :value="selectedCountries", :multiple="multiple", :searchable="searchable", :clear-on-select="false", :close-on-select="false", :loading="isLoading", + :options-limit="300", id="ajax", @search-change="asyncFind", label="name" @@ -40,7 +41,6 @@ p.typo__p :close-on-select="false", :loading="isLoading", id="ajax", - @search-change="asyncFind", label="name" track-by="code" placeholder="Type to search" diff --git a/lib/multiselectMixin.js b/lib/multiselectMixin.js index 240f4251..bb4a2173 100644 --- a/lib/multiselectMixin.js +++ b/lib/multiselectMixin.js @@ -187,6 +187,16 @@ module.exports = { */ id: { default: null + }, + /** + * Limits the options displayed in the dropdown + * to the first X options. + * @default 1000 + * @type {Integer} + */ + optionsLimit: { + type: Number, + default: 1000 } }, created () { @@ -206,7 +216,7 @@ module.exports = { if (this.taggable && search.length && !this.isExistingOption(search)) { options.unshift({ isTag: true, label: search }) } - return options + return options.slice(0, this.optionsLimit) }, valueKeys () { if (this.trackBy) { diff --git a/lib/vue-multiselect.min.js b/lib/vue-multiselect.min.js index dafa35f1..0393a270 100644 --- a/lib/vue-multiselect.min.js +++ b/lib/vue-multiselect.min.js @@ -1,2 +1,2 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueMultiselect=e():t.VueMultiselect=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var r=n[i]={exports:{},id:i,loaded:!1};return t[i].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var n={};return e.m=t,e.c=n,e.p="/",e(0)}([function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0}),e.deepClone=e.pointerMixin=e.multiselectMixin=e.Multiselect=void 0;var r=n(80),o=i(r),s=n(28),l=i(s),a=n(29),u=i(a),c=n(30),f=i(c);e["default"]=o["default"],e.Multiselect=o["default"],e.multiselectMixin=l["default"],e.pointerMixin=u["default"],e.deepClone=f["default"]},function(t,e){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e,n){var i=n(56),r=n(15);t.exports=function(t){return i(r(t))}},function(t,e,n){t.exports=!n(9)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,e,n){var i=n(6),r=n(13);t.exports=n(4)?function(t,e,n){return i.f(t,e,r(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e,n){var i=n(11),r=n(34),o=n(25),s=Object.defineProperty;e.f=n(4)?Object.defineProperty:function(t,e,n){if(i(t),e=o(e,!0),i(n),r)try{return s(t,e,n)}catch(l){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},function(t,e,n){var i=n(23)("wks"),r=n(14),o=n(1).Symbol,s="function"==typeof o,l=t.exports=function(t){return i[t]||(i[t]=s&&o[t]||(s?o:r)("Symbol."+t))};l.store=i},function(t,e){var n=t.exports={version:"2.4.0"};"number"==typeof __e&&(__e=n)},function(t,e){t.exports=function(t){try{return!!t()}catch(e){return!0}}},function(t,e,n){var i=n(39),r=n(16);t.exports=Object.keys||function(t){return i(t,r)}},function(t,e,n){var i=n(12);t.exports=function(t){if(!i(t))throw TypeError(t+" is not an object!");return t}},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e){var n=0,i=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+i).toString(36))}},function(t,e){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on "+t);return t}},function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,e,n){var i=n(1),r=n(8),o=n(53),s=n(5),l="prototype",a=function(t,e,n){var u,c,f,p=t&a.F,d=t&a.G,h=t&a.S,m=t&a.P,g=t&a.B,v=t&a.W,b=d?r:r[e]||(r[e]={}),y=b[l],_=d?i:h?i[e]:(i[e]||{})[l];d&&(n=e);for(u in n)c=!p&&_&&void 0!==_[u],c&&u in b||(f=c?_[u]:n[u],b[u]=d&&"function"!=typeof _[u]?n[u]:g&&c?o(f,i):v&&_[u]==f?function(t){var e=function(e,n,i){if(this instanceof t){switch(arguments.length){case 0:return new t;case 1:return new t(e);case 2:return new t(e,n)}return new t(e,n,i)}return t.apply(this,arguments)};return e[l]=t[l],e}(f):m&&"function"==typeof f?o(Function.call,f):f,m&&((b.virtual||(b.virtual={}))[u]=f,t&a.R&&y&&!y[u]&&s(y,u,f)))};a.F=1,a.G=2,a.S=4,a.P=8,a.B=16,a.W=32,a.U=64,a.R=128,t.exports=a},function(t,e){t.exports={}},function(t,e){t.exports=!0},function(t,e){e.f={}.propertyIsEnumerable},function(t,e,n){var i=n(6).f,r=n(2),o=n(7)("toStringTag");t.exports=function(t,e,n){t&&!r(t=n?t:t.prototype,o)&&i(t,o,{configurable:!0,value:e})}},function(t,e,n){var i=n(23)("keys"),r=n(14);t.exports=function(t){return i[t]||(i[t]=r(t))}},function(t,e,n){var i=n(1),r="__core-js_shared__",o=i[r]||(i[r]={});t.exports=function(t){return o[t]||(o[t]={})}},function(t,e){var n=Math.ceil,i=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?i:n)(t)}},function(t,e,n){var i=n(12);t.exports=function(t,e){if(!i(t))return t;var n,r;if(e&&"function"==typeof(n=t.toString)&&!i(r=n.call(t)))return r;if("function"==typeof(n=t.valueOf)&&!i(r=n.call(t)))return r;if(!e&&"function"==typeof(n=t.toString)&&!i(r=n.call(t)))return r;throw TypeError("Can't convert object to primitive value")}},function(t,e,n){var i=n(1),r=n(8),o=n(19),s=n(27),l=n(6).f;t.exports=function(t){var e=r.Symbol||(r.Symbol=o?{}:i.Symbol||{});"_"==t.charAt(0)||t in e||l(e,t,{value:s.f(t)})}},function(t,e,n){e.f=n(7)},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}function r(t,e){if(!t)return!1;var n=t.toString().toLowerCase();return-1!==n.indexOf(e)}var o=n(31),s=i(o),l=n(30),a=i(l);t.exports={data:function(){return{search:"",isOpen:!1,internalValue:this.value||0===this.value?(0,a["default"])(this.value):this.multiple?[]:null}},props:{localSearch:{type:Boolean,"default":!0},options:{type:Array,required:!0},multiple:{type:Boolean,"default":!1},value:{type:null,"default":null},trackBy:{type:String},label:{type:String},searchable:{type:Boolean,"default":!0},clearOnSelect:{type:Boolean,"default":!0},hideSelected:{type:Boolean,"default":!1},placeholder:{type:String,"default":"Select option"},maxHeight:{type:Number,"default":300},allowEmpty:{type:Boolean,"default":!0},resetAfter:{type:Boolean,"default":!1},closeOnSelect:{type:Boolean,"default":!0},customLabel:{type:Function,"default":function(t,e){return e?t[e]:t}},taggable:{type:Boolean,"default":!1},tagPlaceholder:{type:String,"default":"Press enter to create a tag"},max:{type:Number},id:{"default":null}},created:function(){this.searchable&&this.adjustSearch()},computed:{filteredOptions:function(){var t=this,e=this.search||"",n=this.hideSelected?this.options.filter(this.isNotSelected):this.options;return this.localSearch&&(n=this.label?n.filter(function(e){return r(e[t.label],t.search)}):n.filter(function(e){return r(e,t.search)})),this.taggable&&e.length&&!this.isExistingOption(e)&&n.unshift({isTag:!0,label:e}),n},valueKeys:function(){var t=this;return this.trackBy?this.multiple?this.internalValue.map(function(e){return e[t.trackBy]}):this.internalValue[this.trackBy]:this.internalValue},optionKeys:function(){var t=this;return this.label?this.options.map(function(e){return e[t.label].toString().toLowerCase()}):this.options.map(function(t){return t.toString().toLowerCase()})},currentOptionLabel:function(){return this.getOptionLabel(this.internalValue)}},watch:{internalValue:function(){this.resetAfter&&(this.internalValue=null,this.search=""),this.adjustSearch()},search:function(){this.search!==this.currentOptionLabel&&this.$emit("search-change",this.search,this.id)},value:function(){this.internalValue=(0,a["default"])(this.value)}},methods:{updateSearch:function(t){this.search=t.trim().toLowerCase()},isExistingOption:function(t){return this.options?this.optionKeys.indexOf(t)>-1:!1},isSelected:function(t){if(!this.internalValue)return!1;var e=this.trackBy?t[this.trackBy]:t;return this.multiple?this.valueKeys.indexOf(e)>-1:this.valueKeys===e},isNotSelected:function(t){return!this.isSelected(t)},getOptionLabel:function(t){return t||0===t?t.isTag?t.label:this.customLabel(t,this.label)+"":""},select:function(t){if(!this.max||!this.multiple||this.internalValue.length!==this.max)if(t.isTag)this.$emit("tag",t.label,this.id),this.search="";else{if(this.multiple){if(this.isSelected(t))return void this.removeElement(t);this.internalValue.push(t)}else{var e=this.isSelected(t);if(e&&!this.allowEmpty)return;this.internalValue=e?null:t}this.$emit("select",(0,a["default"])(t),this.id),this.$emit("input",(0,a["default"])(this.internalValue),this.id),this.closeOnSelect&&this.deactivate()}},removeElement:function(t){if(this.allowEmpty||!(this.internalValue.length<=1)){var e=this.multiple&&"object"===("undefined"==typeof t?"undefined":(0,s["default"])(t))?this.valueKeys.indexOf(t[this.trackBy]):this.valueKeys.indexOf(t);this.internalValue.splice(e,1),this.$emit("remove",(0,a["default"])(t),this.id),this.$emit("input",(0,a["default"])(this.internalValue),this.id)}},removeLastElement:function(){0===this.search.length&&Array.isArray(this.internalValue)&&this.removeElement(this.internalValue[this.internalValue.length-1])},activate:function(){this.isOpen||(this.isOpen=!0,this.searchable?(this.search="",this.$refs.search.focus()):this.$el.focus(),this.$emit("open",this.id))},deactivate:function(){this.isOpen&&(this.isOpen=!1,this.searchable?(this.$refs.search.blur(),this.adjustSearch()):this.$el.blur(),this.$emit("close",(0,a["default"])(this.internalValue),this.id))},adjustSearch:function(){this.searchable&&this.clearOnSelect&&(this.search=this.multiple?"":this.currentOptionLabel)},toggle:function(){this.isOpen?this.deactivate():this.activate()}}}},function(t,e){"use strict";t.exports={data:function(){return{pointer:0,visibleElements:this.maxHeight/40}},props:{showPointer:{type:Boolean,"default":!0}},computed:{pointerPosition:function(){return 40*this.pointer}},watch:{filteredOptions:function(){this.pointerAdjust()}},methods:{optionHighlight:function(t,e){return{"multiselect__option--highlight":t===this.pointer&&this.showPointer,"multiselect__option--selected":this.isSelected(e)}},addPointerElement:function(){this.filteredOptions.length>0&&this.select(this.filteredOptions[this.pointer]),this.pointerReset()},pointerForward:function(){this.pointer0&&(this.pointer--,this.$refs.list.scrollTop>=this.pointerPosition&&(this.$refs.list.scrollTop=this.pointerPosition))},pointerReset:function(){this.closeOnSelect&&(this.pointer=0,this.$refs.list&&(this.$refs.list.scrollTop=0))},pointerAdjust:function(){this.pointer>=this.filteredOptions.length-1&&(this.pointer=this.filteredOptions.length?this.filteredOptions.length-1:0)},pointerSet:function(t){this.pointer=t}}}},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}var r=n(44),o=i(r),s=n(31),l=i(s),a=function u(t){if(Array.isArray(t))return t.map(u);if(t&&"object"===("undefined"==typeof t?"undefined":(0,l["default"])(t))){for(var e={},n=(0,o["default"])(t),i=0,r=n.length;r>i;i++){var s=n[i];e[s]=u(t[s])}return e}return t};t.exports=a},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}e.__esModule=!0;var r=n(46),o=i(r),s=n(45),l=i(s),a="function"==typeof l["default"]&&"symbol"==typeof o["default"]?function(t){return typeof t}:function(t){return t&&"function"==typeof l["default"]&&t.constructor===l["default"]?"symbol":typeof t};e["default"]="function"==typeof l["default"]&&"symbol"===a(o["default"])?function(t){return"undefined"==typeof t?"undefined":a(t)}:function(t){return t&&"function"==typeof l["default"]&&t.constructor===l["default"]?"symbol":"undefined"==typeof t?"undefined":a(t)}},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e,n){var i=n(12),r=n(1).document,o=i(r)&&i(r.createElement);t.exports=function(t){return o?r.createElement(t):{}}},function(t,e,n){t.exports=!n(4)&&!n(9)(function(){return 7!=Object.defineProperty(n(33)("div"),"a",{get:function(){return 7}}).a})},function(t,e,n){"use strict";var i=n(19),r=n(17),o=n(40),s=n(5),l=n(2),a=n(18),u=n(58),c=n(21),f=n(65),p=n(7)("iterator"),d=!([].keys&&"next"in[].keys()),h="@@iterator",m="keys",g="values",v=function(){return this};t.exports=function(t,e,n,b,y,_,x){u(n,e,b);var w,O,S,k=function(t){if(!d&&t in E)return E[t];switch(t){case m:return function(){return new n(this,t)};case g:return function(){return new n(this,t)}}return function(){return new n(this,t)}},j=e+" Iterator",P=y==g,C=!1,E=t.prototype,L=E[p]||E[h]||y&&E[y],M=L||k(y),T=y?P?k("entries"):M:void 0,A="Array"==e?E.entries||L:L;if(A&&(S=f(A.call(new t)),S!==Object.prototype&&(c(S,j,!0),i||l(S,p)||s(S,p,v))),P&&L&&L.name!==g&&(C=!0,M=function(){return L.call(this)}),i&&!x||!d&&!C&&E[p]||s(E,p,M),a[e]=M,a[j]=v,y)if(w={values:P?M:k(g),keys:_?M:k(m),entries:T},x)for(O in w)O in E||o(E,O,w[O]);else r(r.P+r.F*(d||C),e,w);return w}},function(t,e,n){var i=n(11),r=n(62),o=n(16),s=n(22)("IE_PROTO"),l=function(){},a="prototype",u=function(){var t,e=n(33)("iframe"),i=o.length,r=">";for(e.style.display="none",n(55).appendChild(e),e.src="javascript:",t=e.contentWindow.document,t.open(),t.write("