mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-01 05:54:03 +03:00
Merge pull request #100 from akkinenirajesh/master
Added support for Vue2.0
This commit is contained in:
Jeff
@@ -19,7 +19,8 @@ module.exports = {
|
||||
'src': path.resolve(__dirname, '../src'),
|
||||
'assets': path.resolve(__dirname, '../docs/assets'),
|
||||
'mixins': path.resolve(__dirname, '../src/mixins'),
|
||||
'components': path.resolve(__dirname, '../docs/components')
|
||||
'components': path.resolve(__dirname, '../docs/components'),
|
||||
'vue$': 'vue/dist/vue.js'
|
||||
}
|
||||
},
|
||||
resolveLoader: {
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
+4
-4
@@ -59,11 +59,11 @@
|
||||
"sass-loader": "^3.2.0",
|
||||
"shelljs": "^0.7.0",
|
||||
"url-loader": "^0.5.7",
|
||||
"vue": "^1.0.24",
|
||||
"vue": "^2.0.3",
|
||||
"vue-hot-reload-api": "^1.2.0",
|
||||
"vue-html-loader": "^1.0.0",
|
||||
"vue-loader": "^8.3.0",
|
||||
"vue-resource": "^0.8.0",
|
||||
"vue-html-loader": "^1.2.3",
|
||||
"vue-loader": "^9.6.0",
|
||||
"vue-resource": "^1.0.3",
|
||||
"vue-style-loader": "^1.0.0",
|
||||
"vuex": "^0.6.3",
|
||||
"webpack": "^1.12.2",
|
||||
|
||||
+24
-22
@@ -172,12 +172,9 @@
|
||||
|
||||
<template>
|
||||
<div class="dropdown v-select" :class="dropdownClasses">
|
||||
<div v-el:toggle @mousedown.prevent="toggleDropdown" class="dropdown-toggle clearfix" type="button">
|
||||
<span class="form-control" v-if="!searchable && isValueEmpty">
|
||||
{{ placeholder }}
|
||||
</span>
|
||||
<div ref="toggle" @mousedown.prevent="toggleDropdown" class="dropdown-toggle clearfix" type="button">
|
||||
|
||||
<span class="selected-tag" v-for="option in valueAsArray" track-by="$index">
|
||||
<span class="selected-tag" v-for="option in valueAsArray" v-bind:key="index">
|
||||
{{ getOptionLabel(option) }}
|
||||
<button v-if="multiple" @click="select(option)" type="button" class="close">
|
||||
<span aria-hidden="true">×</span>
|
||||
@@ -185,10 +182,9 @@
|
||||
</span>
|
||||
|
||||
<input
|
||||
v-el:search
|
||||
ref="search"
|
||||
:debounce="debounce"
|
||||
v-model="search"
|
||||
v-show="searchable"
|
||||
@keydown.delete="maybeDeleteValue"
|
||||
@keyup.esc="onEscape"
|
||||
@keydown.up.prevent="typeAheadUp"
|
||||
@@ -199,26 +195,31 @@
|
||||
type="search"
|
||||
class="form-control"
|
||||
:placeholder="searchPlaceholder"
|
||||
:readonly="!searchable"
|
||||
:style="{ width: isValueEmpty ? '100%' : 'auto' }"
|
||||
>
|
||||
|
||||
<i v-el:open-indicator role="presentation" class="open-indicator"></i>
|
||||
<i ref="open-indicator" role="presentation" class="open-indicator"></i>
|
||||
|
||||
<slot name="spinner">
|
||||
<div class="spinner" v-show="loading">Loading...</div>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<ul v-el:dropdown-menu v-show="open" :transition="transition" class="dropdown-menu" :style="{ 'max-height': maxHeight }">
|
||||
<li v-for="option in filteredOptions" track-by="$index" :class="{ active: isOptionSelected(option), highlight: $index === typeAheadPointer }" @mouseover="typeAheadPointer = $index">
|
||||
<ul ref="dropdown-menu" v-show="open" :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) }}
|
||||
</a>
|
||||
</li>
|
||||
<li transition="fade" v-if="!filteredOptions.length" class="divider"></li>
|
||||
<li transition="fade" v-if="!filteredOptions.length" class="text-center">
|
||||
<slot name="no-options">Sorry, no matching options.</slot>
|
||||
</li>
|
||||
<transition name="fade">
|
||||
<li v-if="!filteredOptions.length" class="divider"></li>
|
||||
</transition>
|
||||
<transition name="fade">
|
||||
<li v-if="!filteredOptions.length" class="text-center">
|
||||
<slot name="no-options">Sorry, no matching options.</slot>
|
||||
</li>
|
||||
</transition>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
@@ -466,7 +467,8 @@
|
||||
ref = val
|
||||
}
|
||||
})
|
||||
this.value.$remove(ref)
|
||||
var index = this.value.indexOf(ref)
|
||||
this.value.splice(index, 1)
|
||||
} else {
|
||||
this.value = null
|
||||
}
|
||||
@@ -480,7 +482,7 @@
|
||||
onAfterSelect(option) {
|
||||
if (!this.multiple) {
|
||||
this.open = !this.open
|
||||
this.$els.search.blur()
|
||||
this.$refs.search.blur()
|
||||
}
|
||||
|
||||
if (this.clearSearchOnSelect) {
|
||||
@@ -494,12 +496,12 @@
|
||||
* @return {void}
|
||||
*/
|
||||
toggleDropdown(e) {
|
||||
if (e.target === this.$els.openIndicator || e.target === this.$els.search || e.target === this.$els.toggle || e.target === this.$el) {
|
||||
if (e.target === this.$refs.openIndicator || e.target === this.$refs.search || e.target === this.$refs.toggle || e.target === this.$el) {
|
||||
if (this.open) {
|
||||
this.$els.search.blur() // dropdown will close on blur
|
||||
this.$refs.search.blur() // dropdown will close on blur
|
||||
} else {
|
||||
this.open = true
|
||||
this.$els.search.focus()
|
||||
this.$refs.search.focus()
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -532,7 +534,7 @@
|
||||
*/
|
||||
onEscape() {
|
||||
if (!this.search.length) {
|
||||
this.$els.search.blur()
|
||||
this.$refs.search.blur()
|
||||
} else {
|
||||
this.search = ''
|
||||
}
|
||||
@@ -544,7 +546,7 @@
|
||||
* @return {this.value}
|
||||
*/
|
||||
maybeDeleteValue() {
|
||||
if (!this.$els.search.value.length && this.value) {
|
||||
if (!this.$refs.search.value.length && this.value) {
|
||||
return this.multiple ? this.value.pop() : this.$set('value', null)
|
||||
}
|
||||
},
|
||||
@@ -605,7 +607,7 @@
|
||||
* @return {array}
|
||||
*/
|
||||
filteredOptions() {
|
||||
let options = this.$options.filters.filterBy(this.options, this.search)
|
||||
let options = this.$options.filters.filterBy?this.$options.filters.filterBy(this.options, this.search):this.options
|
||||
if (this.taggable && this.search.length && !this.optionExists(this.search)) {
|
||||
options.unshift(this.search)
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@ import vSelect from '../src/components/Select.vue'
|
||||
|
||||
Vue.component('v-select', vSelect)
|
||||
|
||||
Vue.config.debug = true
|
||||
Vue.config.devtools = true
|
||||
|
||||
/* eslint-disable no-new */
|
||||
|
||||
+1
-1
@@ -23,7 +23,7 @@ module.exports = {
|
||||
*/
|
||||
onSearch: {
|
||||
type: Function,
|
||||
default: false
|
||||
default: function(search, loading){}
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@@ -31,7 +31,7 @@ module.exports = {
|
||||
pixelsToPointerTop() {
|
||||
let pixelsToPointerTop = 0
|
||||
for (let i = 0; i < this.typeAheadPointer; i++) {
|
||||
pixelsToPointerTop += this.$els.dropdownMenu.children[i].offsetHeight
|
||||
pixelsToPointerTop += this.$refs.dropdownMenu.children[i].offsetHeight
|
||||
}
|
||||
return pixelsToPointerTop
|
||||
},
|
||||
@@ -50,7 +50,7 @@ module.exports = {
|
||||
* @returns {number}
|
||||
*/
|
||||
pointerHeight() {
|
||||
let element = this.$els.dropdownMenu.children[this.typeAheadPointer]
|
||||
let element = this.$refs.dropdownMenu.children[this.typeAheadPointer]
|
||||
return element ? element.offsetHeight : 0
|
||||
},
|
||||
|
||||
@@ -60,8 +60,8 @@ module.exports = {
|
||||
*/
|
||||
viewport() {
|
||||
return {
|
||||
top: this.$els.dropdownMenu.scrollTop,
|
||||
bottom: this.$els.dropdownMenu.offsetHeight + this.$els.dropdownMenu.scrollTop
|
||||
top: this.$refs.dropdownMenu.scrollTop,
|
||||
bottom: this.$refs.dropdownMenu.offsetHeight + this.$refs.dropdownMenu.scrollTop
|
||||
}
|
||||
},
|
||||
|
||||
@@ -71,7 +71,7 @@ module.exports = {
|
||||
* @returns {*}
|
||||
*/
|
||||
scrollTo(position) {
|
||||
return this.$els.dropdownMenu.scrollTop = position
|
||||
return this.$refs.dropdownMenu.scrollTop = position
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -131,22 +131,22 @@ describe('Select.vue', () => {
|
||||
var select = vm.$children[0]
|
||||
expect(select.isValueEmpty).toEqual(true)
|
||||
|
||||
select.$set('value', ['one'])
|
||||
select.select(['one'])
|
||||
expect(select.isValueEmpty).toEqual(false)
|
||||
|
||||
select.$set('value', [{l: 'f'}])
|
||||
select.select([{l: 'f'}])
|
||||
expect(select.isValueEmpty).toEqual(false)
|
||||
|
||||
select.$set('value', 'one')
|
||||
select.select('one')
|
||||
expect(select.isValueEmpty).toEqual(false)
|
||||
|
||||
select.$set('value', {label: 'foo', value: 'foo'})
|
||||
select.select({label: 'foo', value: 'foo'})
|
||||
expect(select.isValueEmpty).toEqual(false)
|
||||
|
||||
select.$set('value', '')
|
||||
select.select('')
|
||||
expect(select.isValueEmpty).toEqual(true)
|
||||
|
||||
select.$set('value', null)
|
||||
select.select(null)
|
||||
expect(select.isValueEmpty).toEqual(true)
|
||||
})
|
||||
|
||||
@@ -896,4 +896,4 @@ describe('Select.vue', () => {
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user