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

Merge pull request #100 from akkinenirajesh/master

Browse Source 
Added support for Vue2.0
This commit is contained in:
Jeff
2016-10-19 20:41:42 -07:00
committed by GitHub
parent e909c6c2e8 ee423394e3
commit ef80a9418d
9 changed files with 45 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
build/webpack.base.conf.js
+2 -1
View File
@@ -19,7 +19,8 @@ module.exports = {
'src': path.resolve(__dirname, '../src'), 'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../docs/assets'), 'assets': path.resolve(__dirname, '../docs/assets'),
'mixins': path.resolve(__dirname, '../src/mixins'), 'mixins': path.resolve(__dirname, '../src/mixins'),
'components': path.resolve(__dirname, '../docs/components') 'components': path.resolve(__dirname, '../docs/components'),
'vue$': 'vue/dist/vue.js'
} }
}, },
resolveLoader: { resolveLoader: {
dist/vue-select.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/vue-select.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
package.json
+4 -4
View File
@@ -59,11 +59,11 @@
"sass-loader": "^3.2.0", "sass-loader": "^3.2.0",
"shelljs": "^0.7.0", "shelljs": "^0.7.0",
"url-loader": "^0.5.7", "url-loader": "^0.5.7",
"vue": "^1.0.24", "vue": "^2.0.3",
"vue-hot-reload-api": "^1.2.0", "vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.0.0", "vue-html-loader": "^1.2.3",
"vue-loader": "^8.3.0", "vue-loader": "^9.6.0",
"vue-resource": "^0.8.0", "vue-resource": "^1.0.3",
"vue-style-loader": "^1.0.0", "vue-style-loader": "^1.0.0",
"vuex": "^0.6.3", "vuex": "^0.6.3",
"webpack": "^1.12.2", "webpack": "^1.12.2",
src/components/Select.vue
+24 -22
View File
@@ -172,12 +172,9 @@
<template> <template>
<div class="dropdown v-select" :class="dropdownClasses"> <div class="dropdown v-select" :class="dropdownClasses">
<div v-el:toggle @mousedown.prevent="toggleDropdown" class="dropdown-toggle clearfix" type="button"> <div ref="toggle" @mousedown.prevent="toggleDropdown" class="dropdown-toggle clearfix" type="button">
<span class="form-control" v-if="!searchable && isValueEmpty">
{{ placeholder }}
</span>
<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) }} {{ getOptionLabel(option) }}
<button v-if="multiple" @click="select(option)" type="button" class="close"> <button v-if="multiple" @click="select(option)" type="button" class="close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
@@ -185,10 +182,9 @@
</span> </span>
<input <input
v-el:search ref="search"
:debounce="debounce" :debounce="debounce"
v-model="search" v-model="search"
v-show="searchable"
@keydown.delete="maybeDeleteValue" @keydown.delete="maybeDeleteValue"
@keyup.esc="onEscape" @keyup.esc="onEscape"
@keydown.up.prevent="typeAheadUp" @keydown.up.prevent="typeAheadUp"
@@ -199,26 +195,31 @@
type="search" type="search"
class="form-control" class="form-control"
:placeholder="searchPlaceholder" :placeholder="searchPlaceholder"
:readonly="!searchable"
:style="{ width: isValueEmpty ? '100%' : 'auto' }" :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"> <slot name="spinner">
<div class="spinner" v-show="loading">Loading...</div> <div class="spinner" v-show="loading">Loading...</div>
</slot> </slot>
</div> </div>
<ul v-el:dropdown-menu v-show="open" :transition="transition" class="dropdown-menu" :style="{ 'max-height': maxHeight }"> <ul ref="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"> <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)"> <a @mousedown.prevent="select(option)">
{{ getOptionLabel(option) }} {{ getOptionLabel(option) }}
</a> </a>
</li> </li>
<li transition="fade" v-if="!filteredOptions.length" class="divider"></li> <transition name="fade">
<li transition="fade" v-if="!filteredOptions.length" class="text-center"> <li v-if="!filteredOptions.length" class="divider"></li>
<slot name="no-options">Sorry, no matching options.</slot> </transition>
</li> <transition name="fade">
<li v-if="!filteredOptions.length" class="text-center">
<slot name="no-options">Sorry, no matching options.</slot>
</li>
</transition>
</ul> </ul>
</div> </div>
</template> </template>
@@ -466,7 +467,8 @@
ref = val ref = val
} }
}) })
this.value.$remove(ref) var index = this.value.indexOf(ref)
this.value.splice(index, 1)
} else { } else {
this.value = null this.value = null
} }
@@ -480,7 +482,7 @@
onAfterSelect(option) { onAfterSelect(option) {
if (!this.multiple) { if (!this.multiple) {
this.open = !this.open this.open = !this.open
this.$els.search.blur() this.$refs.search.blur()
} }
if (this.clearSearchOnSelect) { if (this.clearSearchOnSelect) {
@@ -494,12 +496,12 @@
* @return {void} * @return {void}
*/ */
toggleDropdown(e) { 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) { if (this.open) {
this.$els.search.blur() // dropdown will close on blur this.$refs.search.blur() // dropdown will close on blur
} else { } else {
this.open = true this.open = true
this.$els.search.focus() this.$refs.search.focus()
} }
} }
}, },
@@ -532,7 +534,7 @@
*/ */
onEscape() { onEscape() {
if (!this.search.length) { if (!this.search.length) {
this.$els.search.blur() this.$refs.search.blur()
} else { } else {
this.search = '' this.search = ''
} }
@@ -544,7 +546,7 @@
* @return {this.value} * @return {this.value}
*/ */
maybeDeleteValue() { 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) return this.multiple ? this.value.pop() : this.$set('value', null)
} }
}, },
@@ -605,7 +607,7 @@
* @return {array} * @return {array}
*/ */
filteredOptions() { 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)) { if (this.taggable && this.search.length && !this.optionExists(this.search)) {
options.unshift(this.search) options.unshift(this.search)
} }
src/dev.js
-1
View File
@@ -3,7 +3,6 @@ import vSelect from '../src/components/Select.vue'
Vue.component('v-select', vSelect) Vue.component('v-select', vSelect)
Vue.config.debug = true
Vue.config.devtools = true Vue.config.devtools = true
/* eslint-disable no-new */ /* eslint-disable no-new */
src/mixins/ajax.js
+1 -1
View File
@@ -23,7 +23,7 @@ module.exports = {
*/ */
onSearch: { onSearch: {
type: Function, type: Function,
default: false default: function(search, loading){}
}, },
/** /**
src/mixins/pointerScroll.js
+5 -5
View File
@@ -31,7 +31,7 @@ module.exports = {
pixelsToPointerTop() { pixelsToPointerTop() {
let pixelsToPointerTop = 0 let pixelsToPointerTop = 0
for (let i = 0; i < this.typeAheadPointer; i++) { for (let i = 0; i < this.typeAheadPointer; i++) {
pixelsToPointerTop += this.$els.dropdownMenu.children[i].offsetHeight pixelsToPointerTop += this.$refs.dropdownMenu.children[i].offsetHeight
} }
return pixelsToPointerTop return pixelsToPointerTop
}, },
@@ -50,7 +50,7 @@ module.exports = {
* @returns {number} * @returns {number}
*/ */
pointerHeight() { pointerHeight() {
let element = this.$els.dropdownMenu.children[this.typeAheadPointer] let element = this.$refs.dropdownMenu.children[this.typeAheadPointer]
return element ? element.offsetHeight : 0 return element ? element.offsetHeight : 0
}, },
@@ -60,8 +60,8 @@ module.exports = {
*/ */
viewport() { viewport() {
return { return {
top: this.$els.dropdownMenu.scrollTop, top: this.$refs.dropdownMenu.scrollTop,
bottom: this.$els.dropdownMenu.offsetHeight + this.$els.dropdownMenu.scrollTop bottom: this.$refs.dropdownMenu.offsetHeight + this.$refs.dropdownMenu.scrollTop
} }
}, },
@@ -71,7 +71,7 @@ module.exports = {
* @returns {*} * @returns {*}
*/ */
scrollTo(position) { scrollTo(position) {
return this.$els.dropdownMenu.scrollTop = position return this.$refs.dropdownMenu.scrollTop = position
}, },
} }
} }
test/unit/specs/Select.spec.js
+6 -6
View File
@@ -131,22 +131,22 @@ describe('Select.vue', () => {
var select = vm.$children[0] var select = vm.$children[0]
expect(select.isValueEmpty).toEqual(true) expect(select.isValueEmpty).toEqual(true)
select.$set('value', ['one']) select.select(['one'])
expect(select.isValueEmpty).toEqual(false) expect(select.isValueEmpty).toEqual(false)
select.$set('value', [{l: 'f'}]) select.select([{l: 'f'}])
expect(select.isValueEmpty).toEqual(false) expect(select.isValueEmpty).toEqual(false)
select.$set('value', 'one') select.select('one')
expect(select.isValueEmpty).toEqual(false) expect(select.isValueEmpty).toEqual(false)
select.$set('value', {label: 'foo', value: 'foo'}) select.select({label: 'foo', value: 'foo'})
expect(select.isValueEmpty).toEqual(false) expect(select.isValueEmpty).toEqual(false)
select.$set('value', '') select.select('')
expect(select.isValueEmpty).toEqual(true) expect(select.isValueEmpty).toEqual(true)
select.$set('value', null) select.select(null)
expect(select.isValueEmpty).toEqual(true) expect(select.isValueEmpty).toEqual(true)
}) })