mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-19 09:50:33 +03:00
- add dev example
- rename `filterOptions` prop to `filterable` - update tests
This commit is contained in:
@@ -50,6 +50,7 @@
|
|||||||
</v-select>
|
</v-select>
|
||||||
<v-select disabled placeholder="disabled" value="disabled"></v-select>
|
<v-select disabled placeholder="disabled" value="disabled"></v-select>
|
||||||
<v-select disabled multiple placeholder="disabled" :value="['disabled', 'multiple']"></v-select>
|
<v-select disabled multiple placeholder="disabled" :value="['disabled', 'multiple']"></v-select>
|
||||||
|
<v-select placeholder="filterable=false, @search=searchPeople" label="first_name" :filterable="false" @search="searchPeople" :options="people"></v-select>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
@@ -526,7 +526,7 @@
|
|||||||
* with taggable.
|
* with taggable.
|
||||||
* @type {Boolean}
|
* @type {Boolean}
|
||||||
*/
|
*/
|
||||||
filterOptions: {
|
filterable: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
@@ -915,7 +915,7 @@
|
|||||||
* @return {array}
|
* @return {array}
|
||||||
*/
|
*/
|
||||||
filteredOptions() {
|
filteredOptions() {
|
||||||
if (!this.filterOptions && !this.taggable) {
|
if (!this.filterable && !this.taggable) {
|
||||||
return this.mutableOptions.slice()
|
return this.mutableOptions.slice()
|
||||||
}
|
}
|
||||||
let options = this.mutableOptions.filter((option) => {
|
let options = this.mutableOptions.filter((option) => {
|
||||||
|
|||||||
+12
-1
@@ -17,13 +17,24 @@ new Vue({
|
|||||||
placeholder: "placeholder",
|
placeholder: "placeholder",
|
||||||
value: null,
|
value: null,
|
||||||
options: countries,
|
options: countries,
|
||||||
ajaxRes: []
|
ajaxRes: [],
|
||||||
|
people: []
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
search(search, loading) {
|
search(search, loading) {
|
||||||
loading(true)
|
loading(true)
|
||||||
this.getRepositories(search, loading, this)
|
this.getRepositories(search, loading, this)
|
||||||
},
|
},
|
||||||
|
searchPeople(search, loading) {
|
||||||
|
loading(true)
|
||||||
|
this.getPeople(loading, this)
|
||||||
|
},
|
||||||
|
getPeople: debounce((loading, vm) => {
|
||||||
|
vm.$http.get(`https://reqres.in/api/users?per_page=10`).then(res => {
|
||||||
|
vm.people = res.data.data
|
||||||
|
loading(false)
|
||||||
|
})
|
||||||
|
}, 250),
|
||||||
getRepositories: debounce((search, loading, vm) => {
|
getRepositories: debounce((search, loading, vm) => {
|
||||||
vm.$http.get(`https://api.github.com/search/repositories?q=${search}`).then(res => {
|
vm.$http.get(`https://api.github.com/search/repositories?q=${search}`).then(res => {
|
||||||
vm.ajaxRes = res.data.items
|
vm.ajaxRes = res.data.items
|
||||||
|
|||||||
@@ -295,9 +295,9 @@ describe('Select.vue', () => {
|
|||||||
expect(vm.$refs.select.filteredOptions).toEqual(['bar','baz'])
|
expect(vm.$refs.select.filteredOptions).toEqual(['bar','baz'])
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should not filter the array of strings if filterOptions is false', () => {
|
it('should not filter the array of strings if filterable is false', () => {
|
||||||
const vm = new Vue({
|
const vm = new Vue({
|
||||||
template: `<div><v-select ref="select" :filter-options="false" :options="['foo','bar','baz']" v-model="value"></v-select></div>`,
|
template: `<div><v-select ref="select" :filterable="false" :options="['foo','bar','baz']" v-model="value"></v-select></div>`,
|
||||||
data: {value: 'foo'}
|
data: {value: 'foo'}
|
||||||
}).$mount()
|
}).$mount()
|
||||||
vm.$refs.select.search = 'ba'
|
vm.$refs.select.search = 'ba'
|
||||||
@@ -897,9 +897,9 @@ describe('Select.vue', () => {
|
|||||||
expect(vm.$children[0].mutableOptions).toEqual(['one', 'two', 'three'])
|
expect(vm.$children[0].mutableOptions).toEqual(['one', 'two', 'three'])
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should add a freshly created option/tag to the options list when pushTags is true and filterOptions is false', () => {
|
it('should add a freshly created option/tag to the options list when pushTags is true and filterable is false', () => {
|
||||||
const vm = new Vue({
|
const vm = new Vue({
|
||||||
template: '<div><v-select :options="options" push-tags :value="value" :filter-options="false" :multiple="true" :taggable="true"></v-select></div>',
|
template: '<div><v-select :options="options" push-tags :value="value" :filterable="false" :multiple="true" :taggable="true"></v-select></div>',
|
||||||
components: {vSelect},
|
components: {vSelect},
|
||||||
data: {
|
data: {
|
||||||
value: ['one'],
|
value: ['one'],
|
||||||
@@ -926,9 +926,9 @@ describe('Select.vue', () => {
|
|||||||
expect(vm.$children[0].mutableOptions).toEqual(['one', 'two'])
|
expect(vm.$children[0].mutableOptions).toEqual(['one', 'two'])
|
||||||
})
|
})
|
||||||
|
|
||||||
it('wont add a freshly created option/tag to the options list when pushTags is false and filterOptions is false', () => {
|
it('wont add a freshly created option/tag to the options list when pushTags is false and filterable is false', () => {
|
||||||
const vm = new Vue({
|
const vm = new Vue({
|
||||||
template: '<div><v-select :options="options" :value="value" :multiple="true" :filter-options="false" :taggable="true"></v-select></div>',
|
template: '<div><v-select :options="options" :value="value" :multiple="true" :filterable="false" :taggable="true"></v-select></div>',
|
||||||
components: {vSelect},
|
components: {vSelect},
|
||||||
data: {
|
data: {
|
||||||
value: ['one'],
|
value: ['one'],
|
||||||
@@ -985,7 +985,7 @@ describe('Select.vue', () => {
|
|||||||
it('should select an existing option if the search string matches an objects label from options when filter-options is false', (done) => {
|
it('should select an existing option if the search string matches an objects label from options when filter-options is false', (done) => {
|
||||||
let two = {label: 'two'}
|
let two = {label: 'two'}
|
||||||
const vm = new Vue({
|
const vm = new Vue({
|
||||||
template: '<div><v-select :options="options" taggable :filter-options="false"></v-select></div>',
|
template: '<div><v-select :options="options" taggable :filterable="false"></v-select></div>',
|
||||||
data: {
|
data: {
|
||||||
options: [{label: 'one'}, two]
|
options: [{label: 'one'}, two]
|
||||||
}
|
}
|
||||||
@@ -1020,9 +1020,9 @@ describe('Select.vue', () => {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should not reset the selected value when the options property changes when filterOptions is false', (done) => {
|
it('should not reset the selected value when the options property changes when filterable is false', (done) => {
|
||||||
const vm = new Vue({
|
const vm = new Vue({
|
||||||
template: '<div><v-select :options="options" :value="value" :multiple="true" :filter-options="false" taggable></v-select></div>',
|
template: '<div><v-select :options="options" :value="value" :multiple="true" :filterable="false" taggable></v-select></div>',
|
||||||
components: {vSelect},
|
components: {vSelect},
|
||||||
data: {
|
data: {
|
||||||
value: [{label: 'one'}],
|
value: [{label: 'one'}],
|
||||||
|
|||||||
Reference in New Issue
Block a user