Skip to content

Commit ef80a94

Browse files
sagalbotsagalbot
authored
Merge pull request sagalbot#100 from akkinenirajesh/master
Added support for Vue2.0
2 parents e909c6c + ee42339 commit ef80a94

File tree

9 files changed

+45
-43
lines changed

9 files changed

+45
-43
lines changed

‎build/webpack.base.conf.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ module.exports = {
1919
'src': path.resolve(__dirname, '../src'),
2020
'assets': path.resolve(__dirname, '../docs/assets'),
2121
'mixins': path.resolve(__dirname, '../src/mixins'),
22-
'components': path.resolve(__dirname, '../docs/components')
22+
'components': path.resolve(__dirname, '../docs/components'),
23+
'vue$': 'vue/dist/vue.js'
2324
}
2425
},
2526
resolveLoader: {

‎dist/vue-select.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-select.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,11 @@
5959
"sass-loader": "^3.2.0",
6060
"shelljs": "^0.7.0",
6161
"url-loader": "^0.5.7",
62-
"vue": "^1.0.24",
62+
"vue": "^2.0.3",
6363
"vue-hot-reload-api": "^1.2.0",
64-
"vue-html-loader": "^1.0.0",
65-
"vue-loader": "^8.3.0",
66-
"vue-resource": "^0.8.0",
64+
"vue-html-loader": "^1.2.3",
65+
"vue-loader": "^9.6.0",
66+
"vue-resource": "^1.0.3",
6767
"vue-style-loader": "^1.0.0",
6868
"vuex": "^0.6.3",
6969
"webpack": "^1.12.2",

‎src/components/Select.vue

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -172,23 +172,19 @@
172172

173173
<template>
174174
<div class="dropdown v-select" :class="dropdownClasses">
175-
<div v-el:toggle @mousedown.prevent="toggleDropdown" class="dropdown-toggle clearfix" type="button">
176-
<span class="form-control" v-if="!searchable && isValueEmpty">
177-
{{ placeholder }}
178-
</span>
175+
<div ref="toggle" @mousedown.prevent="toggleDropdown" class="dropdown-toggle clearfix" type="button">
179176

180-
<span class="selected-tag" v-for="option in valueAsArray" track-by="$index">
177+
<span class="selected-tag" v-for="option in valueAsArray" v-bind:key="index">
181178
{{ getOptionLabel(option) }}
182179
<button v-if="multiple" @click="select(option)" type="button" class="close">
183180
<span aria-hidden="true">&times;</span>
184181
</button>
185182
</span>
186183

187184
<input
188-
v-el:search
185+
ref="search"
189186
:debounce="debounce"
190187
v-model="search"
191-
v-show="searchable"
192188
@keydown.delete="maybeDeleteValue"
193189
@keyup.esc="onEscape"
194190
@keydown.up.prevent="typeAheadUp"
@@ -199,26 +195,31 @@
199195
type="search"
200196
class="form-control"
201197
:placeholder="searchPlaceholder"
198+
:readonly="!searchable"
202199
:style="{ width: isValueEmpty ? '100%' : 'auto' }"
203200
>
204201

205-
<i v-el:open-indicator role="presentation" class="open-indicator"></i>
202+
<i ref="open-indicator" role="presentation" class="open-indicator"></i>
206203

207204
<slot name="spinner">
208205
<div class="spinner" v-show="loading">Loading...</div>
209206
</slot>
210207
</div>
211208

212-
<ul v-el:dropdown-menu v-show="open" :transition="transition" class="dropdown-menu" :style="{ 'max-height': maxHeight }">
213-
<li v-for="option in filteredOptions" track-by="$index" :class="{ active: isOptionSelected(option), highlight: $index === typeAheadPointer }" @mouseover="typeAheadPointer = $index">
209+
<ul ref="dropdown-menu" v-show="open" :transition="transition" class="dropdown-menu" :style="{ 'max-height': maxHeight }">
210+
<li v-for="(option, index) in filteredOptions" v-bind:key="index" :class="{ active: isOptionSelected(option), highlight: index === typeAheadPointer }" @mouseover="typeAheadPointer = index">
214211
<a @mousedown.prevent="select(option)">
215212
{{ getOptionLabel(option) }}
216213
</a>
217214
</li>
218-
<li transition="fade" v-if="!filteredOptions.length" class="divider"></li>
219-
<li transition="fade" v-if="!filteredOptions.length" class="text-center">
220-
<slot name="no-options">Sorry, no matching options.</slot>
221-
</li>
215+
<transition name="fade">
216+
<li v-if="!filteredOptions.length" class="divider"></li>
217+
</transition>
218+
<transition name="fade">
219+
<li v-if="!filteredOptions.length" class="text-center">
220+
<slot name="no-options">Sorry, no matching options.</slot>
221+
</li>
222+
</transition>
222223
</ul>
223224
</div>
224225
</template>
@@ -466,7 +467,8 @@
466467
ref = val
467468
}
468469
})
469-
this.value.$remove(ref)
470+
var index = this.value.indexOf(ref)
471+
this.value.splice(index, 1)
470472
} else {
471473
this.value = null
472474
}
@@ -480,7 +482,7 @@
480482
onAfterSelect(option) {
481483
if (!this.multiple) {
482484
this.open = !this.open
483-
this.$els.search.blur()
485+
this.$refs.search.blur()
484486
}
485487
486488
if (this.clearSearchOnSelect) {
@@ -494,12 +496,12 @@
494496
* @return {void}
495497
*/
496498
toggleDropdown(e) {
497-
if (e.target === this.$els.openIndicator || e.target === this.$els.search || e.target === this.$els.toggle || e.target === this.$el) {
499+
if (e.target === this.$refs.openIndicator || e.target === this.$refs.search || e.target === this.$refs.toggle || e.target === this.$el) {
498500
if (this.open) {
499-
this.$els.search.blur() // dropdown will close on blur
501+
this.$refs.search.blur() // dropdown will close on blur
500502
} else {
501503
this.open = true
502-
this.$els.search.focus()
504+
this.$refs.search.focus()
503505
}
504506
}
505507
},
@@ -532,7 +534,7 @@
532534
*/
533535
onEscape() {
534536
if (!this.search.length) {
535-
this.$els.search.blur()
537+
this.$refs.search.blur()
536538
} else {
537539
this.search = ''
538540
}
@@ -544,7 +546,7 @@
544546
* @return {this.value}
545547
*/
546548
maybeDeleteValue() {
547-
if (!this.$els.search.value.length && this.value) {
549+
if (!this.$refs.search.value.length && this.value) {
548550
return this.multiple ? this.value.pop() : this.$set('value', null)
549551
}
550552
},
@@ -605,7 +607,7 @@
605607
* @return {array}
606608
*/
607609
filteredOptions() {
608-
let options = this.$options.filters.filterBy(this.options, this.search)
610+
let options = this.$options.filters.filterBy?this.$options.filters.filterBy(this.options, this.search):this.options
609611
if (this.taggable && this.search.length && !this.optionExists(this.search)) {
610612
options.unshift(this.search)
611613
}

‎src/dev.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import vSelect from '../src/components/Select.vue'
33

44
Vue.component('v-select', vSelect)
55

6-
Vue.config.debug = true
76
Vue.config.devtools = true
87

98
/* eslint-disable no-new */

‎src/mixins/ajax.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ module.exports = {
2323
*/
2424
onSearch: {
2525
type: Function,
26-
default: false
26+
default: function(search, loading){}
2727
},
2828

2929
/**

‎src/mixins/pointerScroll.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ module.exports = {
3131
pixelsToPointerTop() {
3232
let pixelsToPointerTop = 0
3333
for (let i = 0; i < this.typeAheadPointer; i++) {
34-
pixelsToPointerTop += this.$els.dropdownMenu.children[i].offsetHeight
34+
pixelsToPointerTop += this.$refs.dropdownMenu.children[i].offsetHeight
3535
}
3636
return pixelsToPointerTop
3737
},
@@ -50,7 +50,7 @@ module.exports = {
5050
* @returns {number}
5151
*/
5252
pointerHeight() {
53-
let element = this.$els.dropdownMenu.children[this.typeAheadPointer]
53+
let element = this.$refs.dropdownMenu.children[this.typeAheadPointer]
5454
return element ? element.offsetHeight : 0
5555
},
5656

@@ -60,8 +60,8 @@ module.exports = {
6060
*/
6161
viewport() {
6262
return {
63-
top: this.$els.dropdownMenu.scrollTop,
64-
bottom: this.$els.dropdownMenu.offsetHeight + this.$els.dropdownMenu.scrollTop
63+
top: this.$refs.dropdownMenu.scrollTop,
64+
bottom: this.$refs.dropdownMenu.offsetHeight + this.$refs.dropdownMenu.scrollTop
6565
}
6666
},
6767

@@ -71,7 +71,7 @@ module.exports = {
7171
* @returns {*}
7272
*/
7373
scrollTo(position) {
74-
return this.$els.dropdownMenu.scrollTop = position
74+
return this.$refs.dropdownMenu.scrollTop = position
7575
},
7676
}
7777
}

‎test/unit/specs/Select.spec.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -131,22 +131,22 @@ describe('Select.vue', () => {
131131
var select = vm.$children[0]
132132
expect(select.isValueEmpty).toEqual(true)
133133

134-
select.$set('value', ['one'])
134+
select.select(['one'])
135135
expect(select.isValueEmpty).toEqual(false)
136136

137-
select.$set('value', [{l: 'f'}])
137+
select.select([{l: 'f'}])
138138
expect(select.isValueEmpty).toEqual(false)
139139

140-
select.$set('value', 'one')
140+
select.select('one')
141141
expect(select.isValueEmpty).toEqual(false)
142142

143-
select.$set('value', {label: 'foo', value: 'foo'})
143+
select.select({label: 'foo', value: 'foo'})
144144
expect(select.isValueEmpty).toEqual(false)
145145

146-
select.$set('value', '')
146+
select.select('')
147147
expect(select.isValueEmpty).toEqual(true)
148148

149-
select.$set('value', null)
149+
select.select(null)
150150
expect(select.isValueEmpty).toEqual(true)
151151
})
152152

@@ -896,4 +896,4 @@ describe('Select.vue', () => {
896896
})
897897
})
898898
})
899-
})
899+
})

0 commit comments

Comments
 (0)