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

component

Browse Source 
- switch to `v-if` (#98)
- update array string filter to be case-insensitve

testing
- update karma to hide output from skipped tests
- skip scroll down test until http://github.com/vuejs/vue-loader/issues/434 is resolved

build
- add dev.html to be used as entry point for development
This commit is contained in:
Jeff Sagal
2017-01-24 22:23:15 -08:00
parent f5e3e25dc0
commit b096555b68
6 changed files with 178 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
build/webpack.dev.conf.js
+1 -1
View File
@@ -27,7 +27,7 @@ module.exports = merge(baseWebpackConfig, {
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
template: 'dev.html',
inject: true
})
]
dev.html
+29
View File
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue Select Dev</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"> -->
<style>
html,body,#app {
height: 100vh;
}
#app {
display: flex;
align-items: center;
justify-content: center;
}
.select {
width: 25em;
}
</style>
</head>
<body>
<div id="app">
<v-select class="select" multiple taggable v-model="value" :options="options"></v-select>
<!-- <v-select class="select" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select> -->
<!-- <v-select class="select" multiple push-tags></v-select> -->
</div>
</body>
</html>
src/components/Select.vue
+21 -8
View File
@@ -176,7 +176,7 @@
<span class="selected-tag" v-for="option in valueAsArray" v-bind:key="option.index">
{{ getOptionLabel(option) }}
<button v-if="multiple" @click="select(option)" type="button" class="close">
<button v-if="multiple" @click="deselect(option)" type="button" class="close">
<span aria-hidden="true">&times;</span>
</button>
</span>
@@ -199,14 +199,14 @@
:style="{ width: isValueEmpty ? '100%' : 'auto' }"
>
<i ref="openIndicator" role="presentation" class="open-indicator"></i>
<i v-if="!noDrop" ref="openIndicator" role="presentation" class="open-indicator"></i>
<slot name="spinner">
<div class="spinner" v-show="mutableLoading">Loading...</div>
</slot>
</div>
<ul ref="dropdownMenu" v-show="open" :transition="transition" class="dropdown-menu" :style="{ 'max-height': maxHeight }">
<ul ref="dropdownMenu" v-if="dropdownOpen" :transition="transition" class="dropdown-menu" :style="{ 'max-height': maxHeight }">
<li v-for="(option, index) in filteredOptions" v-bind:key="index" :class="{ active: isOptionSelected(option), highlight: index === typeAheadPointer }" @mouseover="typeAheadPointer = index">
<a @mousedown.prevent="select(option)">
{{ getOptionLabel(option) }}
@@ -397,6 +397,11 @@
type: Boolean,
default: false
},
noDrop: {
type: Boolean,
default: false
}
},
data() {
@@ -481,7 +486,7 @@
*/
select(option) {
if (this.isOptionSelected(option)) {
this.deselect(option)
this.taggable ? null : this.deselect(option)
} else {
if (this.taggable && !this.optionExists(option)) {
option = this.createOption(option)
@@ -632,12 +637,21 @@
*/
dropdownClasses() {
return {
open: this.open,
open: this.dropdownOpen,
searchable: this.searchable,
loading: this.mutableLoading
}
},
/**
* Return the current state of the
* dropdown menu.
* @return {Boolean} True if open
*/
dropdownOpen() {
return this.noDrop ? false : this.open
},
/**
* Return the placeholder string if it's set
* & there is no value selected.
@@ -658,12 +672,11 @@
* @return {array}
*/
filteredOptions() {
let options = this.mutableOptions.filter((option) => {
if( typeof option === 'object' ) {
return option[this.label].indexOf(this.search) > -1
return option[this.label].toLowerCase().indexOf(this.search.toLowerCase()) > -1
}
return option.indexOf(this.search) > -1
return option.toLowerCase().indexOf(this.search.toLowerCase()) > -1
})
if (this.taggable && this.search.length && !this.optionExists(this.search)) {
options.unshift(this.search)
src/mixins/pointerScroll.js
+11 -7
View File
@@ -1,3 +1,5 @@
// flow
module.exports = {
watch: {
typeAheadPointer() {
@@ -30,8 +32,10 @@ module.exports = {
*/
pixelsToPointerTop() {
let pixelsToPointerTop = 0
for (let i = 0; i < this.typeAheadPointer; i++) {
pixelsToPointerTop += this.$refs.dropdownMenu.children[i].offsetHeight
if( this.$refs.dropdownMenu ) {
for (let i = 0; i < this.typeAheadPointer; i++) {
pixelsToPointerTop += this.$refs.dropdownMenu.children[i].offsetHeight
}
}
return pixelsToPointerTop
},
@@ -50,7 +54,7 @@ module.exports = {
* @returns {number}
*/
pointerHeight() {
let element = this.$refs.dropdownMenu.children[this.typeAheadPointer]
let element = this.$refs.dropdownMenu ? this.$refs.dropdownMenu.children[this.typeAheadPointer] : false
return element ? element.offsetHeight : 0
},
@@ -60,8 +64,8 @@ module.exports = {
*/
viewport() {
return {
top: this.$refs.dropdownMenu.scrollTop,
bottom: this.$refs.dropdownMenu.offsetHeight + this.$refs.dropdownMenu.scrollTop
top: this.$refs.dropdownMenu ? this.$refs.dropdownMenu.scrollTop: 0,
bottom: this.$refs.dropdownMenu ? this.$refs.dropdownMenu.offsetHeight + this.$refs.dropdownMenu.scrollTop : 0
}
},
@@ -71,7 +75,7 @@ module.exports = {
* @returns {*}
*/
scrollTo(position) {
return this.$refs.dropdownMenu.scrollTop = position
return this.$refs.dropdownMenu ? this.$refs.dropdownMenu.scrollTop = position : null
},
}
}
}
test/unit/karma.conf.js
+3
View File
@@ -64,6 +64,9 @@ module.exports = function (config) {
webpackMiddleware: {
noInfo: true
},
specReporter: {
suppressSkipped: true
},
coverageReporter: {
dir: './coverage',
reporters: [
test/unit/specs/Select.spec.js
+113 -26
View File
@@ -1,15 +1,15 @@
// flow
/* global describe, it, expect */
import Vue from 'vue'
import vSelect from 'src/components/Select.vue'
// import vSelect from '../../../dist/vue-select'
import pointerScroll from 'src/mixins/pointerScroll.js'
Vue.component('v-select', vSelect)
// http://vue-loader.vuejs.org/en/workflow/testing-with-mocks.html
const Mock = require('!!vue?inject!src/components/Select.vue')
Vue.component('v-select', vSelect)
/**
* Simulate a DOM event.
* @param target
@@ -25,6 +25,13 @@ function trigger(target, event, process) {
return e
}
/**
* Simulate a Mouse event.
* @param target
* @param event
* @param process
* @returns {Event}
*/
function triggerMouse(target, event, process) {
var e = document.createEvent('MouseEvent')
e.initEvent('event', true, true)
@@ -33,6 +40,13 @@ function triggerMouse(target, event, process) {
return e
}
/**
* Simulate a Focus event.
* @param target
* @param event
* @param process
* @returns {Event}
*/
function triggerFocusEvent(target, event, process) {
var e = document.createEvent('FocusEvent')
e.initEvent('event', true, true)
@@ -256,6 +270,35 @@ describe('Select.vue', () => {
})
})
describe('Filtering Options', () => {
it('should filter an array of strings', () => {
const vm = new Vue({
template: `<div><v-select ref="select" :options="['foo','bar','baz']" v-model="value"></v-select></div>`,
data: {value: 'foo'}
}).$mount()
vm.$refs.select.search = 'ba'
expect(vm.$refs.select.filteredOptions).toEqual(['bar','baz'])
})
it('should filter without case-sensitivity', () => {
const vm = new Vue({
template: `<div><v-select ref="select" :options="['Foo','Bar','Baz']" v-model="value"></v-select></div>`,
data: {value: 'foo'}
}).$mount()
vm.$refs.select.search = 'ba'
expect(vm.$refs.select.filteredOptions).toEqual(['Bar','Baz'])
})
it('can filter an array of objects based on the objects label key', () => {
const vm = new Vue({
template: `<div><v-select ref="select" :options="[{label: 'Foo', value: 'foo'}, {label: 'Bar', value: 'bar'}, {label: 'Baz', value: 'baz'}]" v-model="value"></v-select></div>`,
data: {value: 'foo'}
}).$mount()
vm.$refs.select.search = 'ba'
expect(JSON.stringify(vm.$refs.select.filteredOptions)).toEqual(JSON.stringify([{label: 'Bar', value: 'bar'}, {label: 'Baz', value: 'baz'}]))
})
})
describe('Toggling Dropdown', () => {
it('should open the dropdown when the el is clicked', (done) => {
const vm = new Vue({
@@ -481,23 +524,26 @@ describe('Select.vue', () => {
expect(vm.$children[0].scrollTo).toHaveBeenCalledWith(1)
})
it('should scroll down if the pointer is below the current viewport bounds', () => {
/**
* @link https://github.com/vuejs/vue-loader/issues/434
* @todo vue-loader/inject-loader fails when used twice in the same file,
* so the mock here is abastracted to a separate file.
*/
xit('should scroll down if the pointer is below the current viewport bounds', () => {
let methods = Object.assign(pointerScroll.methods, {
pixelsToPointerBottom() {
return 2
},
viewport() {
return {top: 0, bottom: 1}
}
})
let mock = Mock({
'../mixins/pointerScroll': {methods}
pixelsToPointerBottom() {
return 2
},
viewport() {
return {top: 0, bottom: 1}
}
})
const vm = new Vue({
template: `<div><v-select :options="['one', 'two', 'three']"></v-select></div>`,
components: {
'v-select': mock
'v-select': Mock({
'../mixins/pointerScroll': {methods}
})
},
}).$mount()
@@ -510,19 +556,23 @@ describe('Select.vue', () => {
describe('Measuring pixel distances', () => {
it('should calculate pointerHeight as the offsetHeight of the pointer element if it exists', () => {
const vm = new Vue({
template: '<div><v-select :options="[\'one\', \'two\', \'three\']""></v-select></div>',
components: {vSelect},
template: `<div><v-select :options="['one', 'two', 'three']"></v-select></div>`,
}).$mount()
// Fresh instances start with the pointer at -1
vm.$children[0].typeAheadPointer = -1
expect(vm.$children[0].pointerHeight()).toEqual(0)
// dropdown must be open for $refs to exist
vm.$children[0].open = true
vm.$children[0].typeAheadPointer = 100
expect(vm.$children[0].pointerHeight()).toEqual(0)
Vue.nextTick(() => {
// Fresh instances start with the pointer at -1
vm.$children[0].typeAheadPointer = -1
expect(vm.$children[0].pointerHeight()).toEqual(0)
vm.$children[0].typeAheadPointer = 1
expect(vm.$children[0].pointerHeight()).toEqual(vm.$children[0].$refs.dropdownMenu.children[1].offsetHeight)
vm.$children[0].typeAheadPointer = 100
expect(vm.$children[0].pointerHeight()).toEqual(0)
vm.$children[0].typeAheadPointer = 1
expect(vm.$children[0].pointerHeight()).toEqual(vm.$children[0].$refs.dropdownMenu.children[1].offsetHeight)
})
})
})
})
@@ -727,7 +777,6 @@ describe('Select.vue', () => {
let two = 'two'
const vm = new Vue({
template: '<div><v-select :options="options" :value="value" :multiple="true" taggable></v-select></div>',
components: {vSelect},
data: {
value: null,
options: ['one', two]
@@ -747,7 +796,6 @@ describe('Select.vue', () => {
let two = {label: 'two'}
const vm = new Vue({
template: '<div><v-select :options="options" taggable></v-select></div>',
components: {vSelect},
data: {
options: [{label: 'one'}, two]
}
@@ -780,6 +828,45 @@ describe('Select.vue', () => {
done()
})
})
it('should not allow duplicate tags when using string options', (done) => {
const vm = new Vue({
template: `<div><v-select ref="select" taggable multiple></v-select></div>`,
}).$mount()
vm.$refs.select.search = 'one'
searchSubmit(vm)
Vue.nextTick(() => {
expect(vm.$refs.select.mutableValue).toEqual(['one'])
expect(vm.$refs.select.search).toEqual('')
vm.$refs.select.search = 'one'
searchSubmit(vm)
Vue.nextTick(() => {
expect(vm.$refs.select.mutableValue).toEqual(['one'])
expect(vm.$refs.select.search).toEqual('')
done()
})
})
})
it('should not allow duplicate tags when using object options', (done) => {
const vm = new Vue({
template: `<div><v-select ref="select" taggable multiple></v-select></div>`,
}).$mount()
vm.$refs.select.search = 'one'
searchSubmit(vm)
Vue.nextTick(() => {
expect(vm.$refs.select.mutableValue).toEqual(['one'])
expect(vm.$refs.select.search).toEqual('')
vm.$refs.select.search = 'one'
searchSubmit(vm)
Vue.nextTick(() => {
expect(vm.$refs.select.mutableValue).toEqual(['one'])
expect(vm.$refs.select.search).toEqual('')
done()
})
})
})
})
describe('Asynchronous Loading', () => {