Skip to content

Commit b096555

Browse files
sagalbotsagalbot
committed
component
- switch to `v-if` (sagalbot#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
1 parent f5e3e25 commit b096555

File tree

6 files changed

+178
-42
lines changed

6 files changed

+178
-42
lines changed

‎build/webpack.dev.conf.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ module.exports = merge(baseWebpackConfig, {
2727
// https://github.com/ampedandwired/html-webpack-plugin
2828
new HtmlWebpackPlugin({
2929
filename: 'index.html',
30-
template: 'index.html',
30+
template: 'dev.html',
3131
inject: true
3232
})
3333
]

‎dev.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Vue Select Dev</title>
6+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
7+
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"> -->
8+
<style>
9+
html,body,#app {
10+
height: 100vh;
11+
}
12+
#app {
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
}
17+
.select {
18+
width: 25em;
19+
}
20+
</style>
21+
</head>
22+
<body>
23+
<div id="app">
24+
<v-select class="select" multiple taggable v-model="value" :options="options"></v-select>
25+
<!-- <v-select class="select" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select> -->
26+
<!-- <v-select class="select" multiple push-tags></v-select> -->
27+
</div>
28+
</body>
29+
</html>

‎src/components/Select.vue

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@
176176

177177
<span class="selected-tag" v-for="option in valueAsArray" v-bind:key="option.index">
178178
{{ getOptionLabel(option) }}
179-
<button v-if="multiple" @click="select(option)" type="button" class="close">
179+
<button v-if="multiple" @click="deselect(option)" type="button" class="close">
180180
<span aria-hidden="true">&times;</span>
181181
</button>
182182
</span>
@@ -199,14 +199,14 @@
199199
:style="{ width: isValueEmpty ? '100%' : 'auto' }"
200200
>
201201

202-
<i ref="openIndicator" role="presentation" class="open-indicator"></i>
202+
<i v-if="!noDrop" ref="openIndicator" role="presentation" class="open-indicator"></i>
203203

204204
<slot name="spinner">
205205
<div class="spinner" v-show="mutableLoading">Loading...</div>
206206
</slot>
207207
</div>
208208

209-
<ul ref="dropdownMenu" v-show="open" :transition="transition" class="dropdown-menu" :style="{ 'max-height': maxHeight }">
209+
<ul ref="dropdownMenu" v-if="dropdownOpen" :transition="transition" class="dropdown-menu" :style="{ 'max-height': maxHeight }">
210210
<li v-for="(option, index) in filteredOptions" v-bind:key="index" :class="{ active: isOptionSelected(option), highlight: index === typeAheadPointer }" @mouseover="typeAheadPointer = index">
211211
<a @mousedown.prevent="select(option)">
212212
{{ getOptionLabel(option) }}
@@ -397,6 +397,11 @@
397397
type: Boolean,
398398
default: false
399399
},
400+
401+
noDrop: {
402+
type: Boolean,
403+
default: false
404+
}
400405
},
401406
402407
data() {
@@ -481,7 +486,7 @@
481486
*/
482487
select(option) {
483488
if (this.isOptionSelected(option)) {
484-
this.deselect(option)
489+
this.taggable ? null : this.deselect(option)
485490
} else {
486491
if (this.taggable && !this.optionExists(option)) {
487492
option = this.createOption(option)
@@ -632,12 +637,21 @@
632637
*/
633638
dropdownClasses() {
634639
return {
635-
open: this.open,
640+
open: this.dropdownOpen,
636641
searchable: this.searchable,
637642
loading: this.mutableLoading
638643
}
639644
},
640645
646+
/**
647+
* Return the current state of the
648+
* dropdown menu.
649+
* @return {Boolean} True if open
650+
*/
651+
dropdownOpen() {
652+
return this.noDrop ? false : this.open
653+
},
654+
641655
/**
642656
* Return the placeholder string if it's set
643657
* & there is no value selected.
@@ -658,12 +672,11 @@
658672
* @return {array}
659673
*/
660674
filteredOptions() {
661-
662675
let options = this.mutableOptions.filter((option) => {
663676
if( typeof option === 'object' ) {
664-
return option[this.label].indexOf(this.search) > -1
677+
return option[this.label].toLowerCase().indexOf(this.search.toLowerCase()) > -1
665678
}
666-
return option.indexOf(this.search) > -1
679+
return option.toLowerCase().indexOf(this.search.toLowerCase()) > -1
667680
})
668681
if (this.taggable && this.search.length && !this.optionExists(this.search)) {
669682
options.unshift(this.search)

‎src/mixins/pointerScroll.js

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
// flow
2+
13
module.exports = {
24
watch: {
35
typeAheadPointer() {
@@ -30,8 +32,10 @@ module.exports = {
3032
*/
3133
pixelsToPointerTop() {
3234
let pixelsToPointerTop = 0
33-
for (let i = 0; i < this.typeAheadPointer; i++) {
34-
pixelsToPointerTop += this.$refs.dropdownMenu.children[i].offsetHeight
35+
if( this.$refs.dropdownMenu ) {
36+
for (let i = 0; i < this.typeAheadPointer; i++) {
37+
pixelsToPointerTop += this.$refs.dropdownMenu.children[i].offsetHeight
38+
}
3539
}
3640
return pixelsToPointerTop
3741
},
@@ -50,7 +54,7 @@ module.exports = {
5054
* @returns {number}
5155
*/
5256
pointerHeight() {
53-
let element = this.$refs.dropdownMenu.children[this.typeAheadPointer]
57+
let element = this.$refs.dropdownMenu ? this.$refs.dropdownMenu.children[this.typeAheadPointer] : false
5458
return element ? element.offsetHeight : 0
5559
},
5660

@@ -60,8 +64,8 @@ module.exports = {
6064
*/
6165
viewport() {
6266
return {
63-
top: this.$refs.dropdownMenu.scrollTop,
64-
bottom: this.$refs.dropdownMenu.offsetHeight + this.$refs.dropdownMenu.scrollTop
67+
top: this.$refs.dropdownMenu ? this.$refs.dropdownMenu.scrollTop: 0,
68+
bottom: this.$refs.dropdownMenu ? this.$refs.dropdownMenu.offsetHeight + this.$refs.dropdownMenu.scrollTop : 0
6569
}
6670
},
6771

@@ -71,7 +75,7 @@ module.exports = {
7175
* @returns {*}
7276
*/
7377
scrollTo(position) {
74-
return this.$refs.dropdownMenu.scrollTop = position
78+
return this.$refs.dropdownMenu ? this.$refs.dropdownMenu.scrollTop = position : null
7579
},
7680
}
77-
}
81+
}

‎test/unit/karma.conf.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,9 @@ module.exports = function (config) {
6464
webpackMiddleware: {
6565
noInfo: true
6666
},
67+
specReporter: {
68+
suppressSkipped: true
69+
},
6770
coverageReporter: {
6871
dir: './coverage',
6972
reporters: [

0 commit comments

Comments
 (0)