Skip to content

Commit

Permalink
2.0-beta.9
Browse files Browse the repository at this point in the history
  • Loading branch information
Damian Dulisz committed Oct 5, 2016
1 parent f3a1c4c commit f7b94f4
Show file tree
Hide file tree
Showing 8 changed files with 76 additions and 20 deletions.
19 changes: 17 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
}
}

Expand Down
20 changes: 8 additions & 12 deletions docs/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand Down Expand Up @@ -47,7 +53,7 @@ new Vue({
taggingSelected: [],
searchable: true,
placeholder: 'Select props',
countries: [],
countries: moreCountries,
selectedCountries: [],
actions: ['alert', 'console.log', 'scrollTop'],
action: null,
Expand All @@ -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 })
Expand Down
4 changes: 2 additions & 2 deletions docs/partials/examples/_ajax-search.jade
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down
12 changes: 11 additions & 1 deletion lib/multiselectMixin.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand All @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion lib/vue-multiselect.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
12 changes: 11 additions & 1 deletion src/multiselectMixin.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand All @@ -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) {
Expand Down
25 changes: 25 additions & 0 deletions test/unit/specs/Multiselect.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down

0 comments on commit f7b94f4

Please sign in to comment.