mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-22 10:30:34 +03:00
Code Activity

add filter prop allowing full customization of filtering

Browse Source
This commit is contained in:
Jeff
2018-01-12 18:23:46 -08:00
parent 47750233ba
commit aca7b5a248
6 changed files with 5915 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dev.html
+24 -18
View File
@@ -29,27 +29,33 @@
<body> <body>
<div id="app"> <div id="app">
<v-select placeholder="default" :options="options"></v-select> <!--<v-select placeholder="default" label="title" :options="fuseSearchOptions" :filter-function="fuse"></v-select>-->
<v-select placeholder="default, RTL" :options="options" dir="rtl"></v-select> <v-select label="title" :options="fuseSearchOptions" :filter="fuse">
<v-select placeholder="multiple" multiple :options="options"></v-select>
<v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>
<v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>
<v-select placeholder="multiple, closeOnSelect=true" multiple :options="['cat', 'dog', 'bear']"></v-select>
<v-select placeholder="multiple, closeOnSelect=false" multiple :close-on-select="false" :options="['cat', 'dog', 'bear']"></v-select>
<v-select placeholder="unsearchable" :options="options" :searchable="false"></v-select>
<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"> <template slot="option" scope="option">
<img :src='"https://www.kidlink.org/icons/f0-" + option.value.toLowerCase() + ".gif"'/> <strong>{{ option.title }}</strong><br>
{{option.label}} ({{option.value}}) <em>{{ option.author.firstName }} {{ option.author.lastName }}</em>
</template> </template>
</v-select> </v-select>
<v-select disabled placeholder="disabled" value="disabled"></v-select> <!--<v-select placeholder="default, RTL" :options="options" dir="rtl"></v-select>-->
<v-select disabled multiple placeholder="disabled" :value="['disabled', 'multiple']"></v-select> <!--<v-select placeholder="multiple" multiple :options="options"></v-select>-->
<!--<v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>-->
<!--<v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>-->
<!--<v-select placeholder="multiple, closeOnSelect=true" multiple :options="['cat', 'dog', 'bear']"></v-select>-->
<!--<v-select placeholder="multiple, closeOnSelect=false" multiple :close-on-select="false" :options="['cat', 'dog', 'bear']"></v-select>-->
<!--<v-select placeholder="unsearchable" :options="options" :searchable="false"></v-select>-->
<!--<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 disabled placeholder="disabled" value="disabled"></v-select>-->
<!--<v-select disabled multiple placeholder="disabled" :value="['disabled', 'multiple']"></v-select>-->
</div> </div>
</body> </body>
package.json
+1
View File
@@ -36,6 +36,7 @@
"extract-text-webpack-plugin": "^1.0.1", "extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.4", "file-loader": "^0.8.4",
"function-bind": "^1.0.2", "function-bind": "^1.0.2",
"fuse.js": "^3.2.0",
"gh-pages": "^0.11.0", "gh-pages": "^0.11.0",
"highlight.js": "^9.9.0", "highlight.js": "^9.9.0",
"html-loader": "^0.4.4", "html-loader": "^0.4.4",
src/components/Select.vue
+15 -8
View File
@@ -499,6 +499,19 @@
} }
}, },
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 * An optional callback function that is called each time the selected
* value(s) change. When integrating with Vuex, use this callback to trigger * value(s) change. When integrating with Vuex, use this callback to trigger
@@ -916,14 +929,8 @@
* @return {array} * @return {array}
*/ */
filteredOptions() { filteredOptions() {
let options = this.mutableOptions.filter((option) => { let options = this.search.length ? this.filter(this) : this.mutableOptions;
let label = this.getOptionLabel(option) if (this.taggable && !this.optionExists(this.search)) {
if (typeof label === 'number') {
label = label.toString()
}
return this.filterFunction(option, label, this.search)
})
if (this.taggable && this.search.length && !this.optionExists(this.search)) {
options.unshift(this.search) options.unshift(this.search)
} }
return options return options
src/dev.js
+14 -6
View File
@@ -1,8 +1,10 @@
import Vue from 'vue' import Vue from 'vue'
import Fuse from 'fuse.js'
import resource from 'vue-resource'
import vSelect from './components/Select.vue' import vSelect from './components/Select.vue'
import countries from 'docs/data/advanced.js' import countries from 'docs/data/advanced.js'
import debounce from 'lodash/debounce' import debounce from 'lodash/debounce'
import resource from 'vue-resource' import fuseSearchOptions from './fuseSearchOptions'
Vue.use(resource) Vue.use(resource)
@@ -17,18 +19,24 @@ new Vue({
placeholder: "placeholder", placeholder: "placeholder",
value: null, value: null,
options: countries, options: countries,
ajaxRes: [] ajaxRes: [],
fuseSearchOptions
}, },
methods: { methods: {
search(search, loading) { search(search, loading) {
loading(true) loading(true);
this.getRepositories(search, loading, this) this.getRepositories(search, loading, this)
}, },
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;
loading(false) loading(false)
}) })
}, 250) }, 250),
fuse({mutableOptions, search}) {
return new Fuse(mutableOptions, {
keys: ['title', 'author.firstName', 'author.lastName'],
}).search(search);
}
} }
}) });
src/fuseSearchOptions.js
+163
View File
@@ -0,0 +1,163 @@
export default [
{
title: "Old Man's War",
author: {
firstName: "John",
lastName: "Scalzi"
}
},
{
title: "The Lock Artist",
author: {
firstName: "Steve",
lastName: "Hamilton"
}
},
{
title: "HTML5",
author: {
firstName: "Remy",
lastName: "Sharp"
}
},
{
title: "Right Ho Jeeves",
author: {
firstName: "P.D",
lastName: "Woodhouse"
}
},
{
title: "The Code of the Wooster",
author: {
firstName: "P.D",
lastName: "Woodhouse"
}
},
{
title: "Thank You Jeeves",
author: {
firstName: "P.D",
lastName: "Woodhouse"
}
},
{
title: "The DaVinci Code",
author: {
firstName: "Dan",
lastName: "Brown"
}
},
{
title: "Angels & Demons",
author: {
firstName: "Dan",
lastName: "Brown"
}
},
{
title: "The Silmarillion",
author: {
firstName: "J.R.R",
lastName: "Tolkien"
}
},
{
title: "Syrup",
author: {
firstName: "Max",
lastName: "Barry"
}
},
{
title: "The Lost Symbol",
author: {
firstName: "Dan",
lastName: "Brown"
}
},
{
title: "The Book of Lies",
author: {
firstName: "Brad",
lastName: "Meltzer"
}
},
{
title: "Lamb",
author: {
firstName: "Christopher",
lastName: "Moore"
}
},
{
title: "Fool",
author: {
firstName: "Christopher",
lastName: "Moore"
}
},
{
title: "Incompetence",
author: {
firstName: "Rob",
lastName: "Grant"
}
},
{
title: "Fat",
author: {
firstName: "Rob",
lastName: "Grant"
}
},
{
title: "Colony",
author: {
firstName: "Rob",
lastName: "Grant"
}
},
{
title: "Backwards, Red Dwarf",
author: {
firstName: "Rob",
lastName: "Grant"
}
},
{
title: "The Grand Design",
author: {
firstName: "Stephen",
lastName: "Hawking"
}
},
{
title: "The Book of Samson",
author: {
firstName: "David",
lastName: "Maine"
}
},
{
title: "The Preservationist",
author: {
firstName: "David",
lastName: "Maine"
}
},
{
title: "Fallen",
author: {
firstName: "David",
lastName: "Maine"
}
},
{
title: "Monster 1959",
author: {
firstName: "David",
lastName: "Maine"
}
}
]
yarn.lock
+5698
View File
File diff suppressed because it is too large Load Diff