2.0-beta.9

Author: Damian Dulisz

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
   }
 }
 

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 })

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"

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) {

lib/vue-multiselect.min.js

@@ -1,6 +1,6 @@
 {
   "name": "vue-multiselect",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0-beta.9",
   "description": "Multiselect component for vue.js",
   "author": "Damian Dulisz <[email protected]>",
   "private": false,

package.json

@@ -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) {

src/multiselectMixin.js

@@ -1983,6 +1983,31 @@ describe('Multiselect.vue', () => {
       expect(comp.filteredOptions).to.deep.equal([10, 20, 30])
       expect(comp.filteredOptions.length).to.equal(3)
     })
+
+    it('should return only as many options as set in the :options-limit prop.', () => {
+      const vm = new Vue({
+        render (h) {
+          return h(Multiselect, {
+            props: {
+              value: this.value,
+              options: this.source,
+              multiple: true,
+              optionsLimit: 2
+            }
+          })
+        },
+        components: { Multiselect },
+        data: {
+          value: [],
+          source: ['test', 'production', 'testing']
+        }
+      }).$mount()
+      expect(vm.$children[0].filteredOptions).to.deep.equal(['test', 'production'])
+      expect(vm.$children[0].filteredOptions.length).to.equal(2)
+      vm.$children[0].search = 'test'
+      expect(vm.$children[0].filteredOptions).to.deep.equal(['test', 'testing'])
+      expect(vm.$children[0].filteredOptions.length).to.equal(2)
+    })
   })
 
   describe('#onTag', () => {