mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-05-23 03:54:04 +03:00
Code Activity

- add filter function prop

Browse Source 
- rename `filterFunction` to `filterComparator`
- add dev example using fuse.js
- update jsdocs
- update tests
This commit is contained in:
Jeff
2018-01-12 22:39:04 -08:00
parent 81a99536f7
commit 21ec385718
4 changed files with 73 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dev.html
+7 -3
View File
@@ -40,17 +40,21 @@
<v-select placeholder="search github.." label="full_name" @search="search" :options="ajaxRes"></v-select>
<v-select placeholder="custom option template" :options="options" multiple>
<template slot="selected-option" scope="option">
<img :src='"https://www.kidlink.org/icons/f0-" + option.value.toLowerCase() + ".gif"'/>
{{option.label}}
</template>
<template slot="option" scope="option">
<img :src='"https://www.kidlink.org/icons/f0-" + option.value.toLowerCase() + ".gif"'/>
{{option.label}} ({{option.value}})
</template>
</v-select>
<v-select placeholder="disabled" disabled value="disabled"></v-select>
<v-select placeholder="disabled multiple" disabled multiple :value="['disabled', 'multiple']"></v-select>
<v-select placeholder="disabled multiple" disabled multiple :value="['disabled', 'multiple']"></v-select>
<v-select placeholder="filterable=false, @search=searchPeople" label="first_name" :filterable="false" @search="searchPeople" :options="people"></v-select>
<v-select placeholder="filtering with fuse.js" label="title" :options="fuseSearchOptions" :filter="fuseSearch">
<template slot="option" scope="option">
<strong>{{ option.title }}</strong><br>
<em>{{ `${option.author.firstName} ${option.author.lastName}` }}</em>
</template>
</v-select>
</div>
</body>
src/components/Select.vue
+43 -30
View File
@@ -522,34 +522,6 @@
}
},
/**
* Callback to filter the search result the label text.
* @type {Function}
* @param {Object || String} option
* @param {String} label
* @param {String} search
* @return {Boolean}
*/
filterFunction: {
type: Function,
default(option, label, search) {
return (label || '').toLowerCase().indexOf(search.toLowerCase()) > -1
}
},
filter: {
"type": Function,
default(vm) {
return vm.mutableOptions.filter((option) => {
let label = vm.getOptionLabel(option)
if (typeof label === 'number') {
label = label.toString()
}
return this.filterFunction(option, label, vm.search)
});
}
},
/**
* An optional callback function that is called each time the selected
* value(s) change. When integrating with Vuex, use this callback to trigger
@@ -603,6 +575,44 @@
default: true
},
/**
* Callback to determine if the provided option
* should match the current search text.
* @type {Function}
* @param {Object || String} option
* @param {String} label
* @param {String} search
* @return {Boolean}
*/
filterComparator: {
type: Function,
default(option, label, search) {
return (label || '').toLowerCase().indexOf(search.toLowerCase()) > -1
}
},
/**
* Callback to filter results when
* search text is provided.
* @type {Function}
* @param {Array} list of options
* @param {String} search text
* @param {Object} vSelect instance
* @return {Boolean}
*/
filter: {
"type": Function,
default(options, search) {
return options.filter((option) => {
let label = this.getOptionLabel(option)
if (typeof label === 'number') {
label = label.toString()
}
return this.filterComparator(option, label, search)
});
}
},
/**
* User defined function for adding Options
* @type {Function}
@@ -995,8 +1005,11 @@
* @return {array}
*/
filteredOptions() {
let options = this.search.length ? this.filter(this) : this.mutableOptions;
if (this.taggable && !this.optionExists(this.search)) {
if (!this.filterable && !this.taggable) {
return this.mutableOptions.slice()
}
let options = this.search.length ? this.filter(this.mutableOptions, this.search, this) : this.mutableOptions;
if (this.taggable && this.search.length && !this.optionExists(this.search)) {
options.unshift(this.search)
}
return options
src/dev.js
+4 -3
View File
@@ -1,9 +1,9 @@
import Vue from 'vue'
import Fuse from 'fuse.js'
import debounce from 'lodash/debounce'
import resource from 'vue-resource'
import vSelect from './components/Select.vue'
import countries from 'docs/data/advanced.js'
import debounce from 'lodash/debounce'
import fuseSearchOptions from './fuseSearchOptions'
Vue.use(resource)
@@ -20,6 +20,7 @@ new Vue({
value: null,
options: countries,
ajaxRes: [],
people: [],
fuseSearchOptions
},
methods: {
@@ -43,8 +44,8 @@ new Vue({
loading(false)
})
}, 250),
fuse({mutableOptions, search}) {
return new Fuse(mutableOptions, {
fuseSearch(options, search) {
return new Fuse(options, {
keys: ['title', 'author.firstName', 'author.lastName'],
}).search(search);
}
test/unit/specs/Select.spec.js
+19 -1
View File
@@ -322,7 +322,7 @@ describe('Select.vue', () => {
expect(JSON.stringify(vm.$refs.select.filteredOptions)).toEqual(JSON.stringify([{label: 'Bar', value: 'bar'}, {label: 'Baz', value: 'baz'}]))
})
it('can use a custom filterFunction passed via props', ()=>{
it('can determine if a given option should match the current search text', () => {
const vm = new Vue({
template: `<div><v-select ref="select" :filterFunction="customFn" :options="[{label: 'Aoo', value: 'foo'}, {label: 'Bar', value: 'bar'}, {label: 'Baz', value: 'baz'}]" v-model="value"></v-select></div>`,
data: {value: 'foo'},
@@ -333,6 +333,23 @@ describe('Select.vue', () => {
vm.$refs.select.search = 'a'
expect(JSON.stringify(vm.$refs.select.filteredOptions)).toEqual(JSON.stringify([{label: 'Aoo', value: 'foo'}]))
})
it('can use a custom filtering method', () => {
const vm = new Vue({
template: `<div><v-select ref="select" :filter="customFn" :options="options" v-model="value"></v-select></div>`,
data: {
options: ['foo','bar','baz'],
value: 'foo'
},
methods:{
customFn(options, search, vm) {
return options.filter(option => option.indexOf(search) > 0)
}
}
}).$mount()
vm.$refs.select.search = 'a'
expect(JSON.stringify(vm.$refs.select.filteredOptions)).toEqual(JSON.stringify(['bar','baz']))
})
})
describe('Toggling Dropdown', () => {
@@ -780,6 +797,7 @@ describe('Select.vue', () => {
const vm = new Vue({
template: '<div><v-select :options="[{}]"></v-select></div>',
}).$mount()
vm.$children[0].open = true
Vue.nextTick(() => {
expect(console.warn).toHaveBeenCalledWith(
'[vue-select warn]: Label key "option.label" does not exist in options object {}.' +