Skip to content

Commit 52e555e

Browse files
author
Rajesh Akkineni
committed
Fixed more issues for vue2.0 & updated tests
1 parent ee42339 commit 52e555e

File tree

6 files changed

+139
-162
lines changed

6 files changed

+139
-162
lines changed

‎README.md

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -77,13 +77,11 @@ From there you can use as normal. Here's an [example on JSBin](http://jsbin.com/
7777
## Parameters
7878
```javascript
7979
/**
80-
* Contains the currently selected value. Very similar to a
81-
* `value` attribute on an <input>. In most cases, you'll want
82-
* to set this as a two-way binding, using :value.sync. However,
83-
* this will not work with Vuex, in which case you'll need to use
84-
* the onChange callback property.
85-
* @type {Object||String||null}
86-
*/
80+
* Contains the currently selected value. Very similar to a
81+
* `value` attribute on an <input>. You can listen for changes
82+
* using 'change' event using v-on
83+
* @type {Object||String||null}
84+
*/
8785
value: {
8886
default: null
8987
},
@@ -166,14 +164,6 @@ From there you can use as normal. Here's an [example on JSBin](http://jsbin.com/
166164
default: 'label'
167165
},
168166

169-
/**
170-
* An optional callback function that is called each time the selected
171-
* value(s) change. When integrating with Vuex, use this callback to trigger
172-
* an action, rather than using :value.sync to retreive the selected value.
173-
* @type {Function}
174-
* @default {null}
175-
*/
176-
onChange: Function,
177167

178168
/**
179169
* Enable/disable creating options from searchInput.

‎docs/components/Examples.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -100,10 +100,10 @@
100100
</article>
101101

102102
<article class="doc-row" id="ex-vuex">
103-
<h3 class="page-header">On-Change Callback <small>Vuex Compatibility</small></h3>
103+
<h3 class="page-header">Change Event <small>Vuex Compatibility</small></h3>
104104
<div class="row">
105105
<div class="col-md-6">
106-
<p>vue-select provides an <code>onChange</code> property that accepts a callback function. This function is passed the currently selected value(s) as it's only parameter.</p>
106+
<p>vue-select provides an <code>change</code> event. This function is passed the currently selected value(s) as it's only parameter.</p>
107107
<p>This is very useful when integrating with Vuex, as it will allow your to trigger an action to update your vuex state object. Choose a callback and see it in action.</p>
108108

109109
<div class="form-inline">
@@ -122,7 +122,7 @@
122122
</div>
123123

124124
<div class="col-md-6">
125-
<pre><v-code lang="markup">&#x3C;v-select on-change=&#x22;consoleCallback&#x22; :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code></pre>
125+
<pre><v-code lang="markup">&#x3C;v-select v-on:change=&#x22;consoleCallback&#x22; :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code></pre>
126126
<pre><v-code lang="javascript">methods: {
127127
consoleCallback(val) {
128128
console.dir(JSON.stringify(val))

‎docs/components/Params.vue

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,13 @@
22
<h2 class="page-header">Parameters</h2>
33
<pre v-pre><code class="language-javascript">props: {
44

5-
/**
5+
/**
66
* Contains the currently selected value. Very similar to a
7-
* `value` attribute on an &amp;lt;input&amp;gt;. In most cases, you'll want
8-
* to set this as a two-way binding, using :value.sync. However,
9-
* this will not work with Vuex, in which case you'll need to use
10-
* the onChange callback property.
7+
* `value` attribute on an <input>. You can listen for changes
8+
* using 'change' event using v-on
119
* @type {Object||String||null}
1210
*/
13-
value: {
11+
value: {
1412
default: null
1513
},
1614

@@ -80,16 +78,8 @@
8078
label: {
8179
type: String,
8280
default: 'label'
83-
},
84-
85-
/**
86-
* An optional callback function that is called each time the selected
87-
* value(s) change. When integrating with Vuex, use this callback to trigger
88-
* an action, rather than using :value.sync to retreive the selected value.
89-
* @type {Function}
90-
* @default {null}
91-
*/
92-
onChange: Function
81+
}
82+
9383
}
9484
</code></pre>
9585
</template>

‎src/components/Select.vue

Lines changed: 48 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@
174174
<div class="dropdown v-select" :class="dropdownClasses">
175175
<div ref="toggle" @mousedown.prevent="toggleDropdown" class="dropdown-toggle clearfix" type="button">
176176

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

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

204204
<slot name="spinner">
205-
<div class="spinner" v-show="loading">Loading...</div>
205+
<div class="spinner" v-show="showLoading">Loading...</div>
206206
</slot>
207207
</div>
208208

209-
<ul ref="dropdown-menu" v-show="open" :transition="transition" class="dropdown-menu" :style="{ 'max-height': maxHeight }">
209+
<ul ref="dropdownMenu" v-show="open" :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) }}
@@ -236,10 +236,8 @@
236236
props: {
237237
/**
238238
* Contains the currently selected value. Very similar to a
239-
* `value` attribute on an <input>. In most cases, you'll want
240-
* to set this as a two-way binding, using :value.sync. However,
241-
* this will not work with Vuex, in which case you'll need to use
242-
* the onChange callback property.
239+
* `value` attribute on an <input>. You can listen for changes
240+
* using 'change' event using v-on
243241
* @type {Object||String||null}
244242
*/
245243
value: {
@@ -344,15 +342,6 @@
344342
}
345343
},
346344
347-
/**
348-
* An optional callback function that is called each time the selected
349-
* value(s) change. When integrating with Vuex, use this callback to trigger
350-
* an action, rather than using :value.sync to retreive the selected value.
351-
* @type {Function}
352-
* @default {null}
353-
*/
354-
onChange: Function,
355-
356345
/**
357346
* Enable/disable creating options from searchInput.
358347
* @type {Boolean}
@@ -379,7 +368,7 @@
379368
createOption: {
380369
type: Function,
381370
default: function (newOption) {
382-
if (typeof this.options[0] === 'object') {
371+
if (typeof this.actualOptions[0] === 'object') {
383372
return {[this.label]: newOption}
384373
}
385374
return newOption
@@ -399,25 +388,27 @@
399388
data() {
400389
return {
401390
search: '',
402-
open: false
391+
open: false,
392+
actualValue: null,
393+
actualOptions: [],
394+
showLoading: false
403395
}
404396
},
405397
406398
watch: {
407-
value(val, old) {
399+
actualValue(val, old) {
408400
if (this.multiple) {
409-
this.onChange ? this.onChange(val) : null
401+
this.$emit('change', val)
410402
} else {
411-
this.onChange && val !== old ? this.onChange(val) : null
403+
if(val !== old) {
404+
this.$emit('change', val)
405+
}
412406
}
413407
},
414-
options() {
408+
actualOptions() {
415409
if (!this.taggable && this.resetOnOptionsChange) {
416-
this.$set('value', this.multiple ? [] : null)
410+
this.actualValue = this.multiple ? [] : null
417411
}
418-
},
419-
multiple(val) {
420-
this.$set('value', val ? [] : null)
421412
}
422413
},
423414
@@ -436,18 +427,18 @@
436427
option = this.createOption(option)
437428
438429
if (this.pushTags) {
439-
this.options.push(option)
430+
this.actualOptions.push(option)
440431
}
441432
}
442433
443434
if (this.multiple) {
444-
if (!this.value) {
445-
this.$set('value', [option])
435+
if (!this.actualValue) {
436+
this.actualValue = [option]
446437
} else {
447-
this.value.push(option)
438+
this.actualValue.push(option)
448439
}
449440
} else {
450-
this.value = option
441+
this.actualValue = option
451442
}
452443
}
453444
@@ -462,15 +453,15 @@
462453
deselect(option) {
463454
if (this.multiple) {
464455
let ref = -1
465-
this.value.forEach((val) => {
456+
this.actualValue.forEach((val) => {
466457
if (val === option || typeof val === 'object' && val[this.label] === option[this.label]) {
467458
ref = val
468459
}
469460
})
470-
var index = this.value.indexOf(ref)
471-
this.value.splice(index, 1)
461+
var index = this.actualValue.indexOf(ref)
462+
this.actualValue.splice(index, 1)
472463
} else {
473-
this.value = null
464+
this.actualValue = null
474465
}
475466
},
476467
@@ -512,9 +503,9 @@
512503
* @return {Boolean} True when selected || False otherwise
513504
*/
514505
isOptionSelected(option) {
515-
if (this.multiple && this.value) {
506+
if (this.multiple && this.actualValue) {
516507
let selected = false
517-
this.value.forEach(opt => {
508+
this.actualValue.forEach(opt => {
518509
if (typeof opt === 'object' && opt[this.label] === option[this.label]) {
519510
selected = true
520511
} else if (opt === option) {
@@ -524,7 +515,7 @@
524515
return selected
525516
}
526517
527-
return this.value === option
518+
return this.actualValue === option
528519
},
529520
530521
/**
@@ -546,22 +537,22 @@
546537
* @return {this.value}
547538
*/
548539
maybeDeleteValue() {
549-
if (!this.$refs.search.value.length && this.value) {
550-
return this.multiple ? this.value.pop() : this.$set('value', null)
540+
if (!this.$refs.search.value.length && this.actualValue) {
541+
return this.multiple ? this.actualValue.pop() : this.actualValue = null
551542
}
552543
},
553544
554545
/**
555546
* Determine if an option exists
556-
* within this.options array.
547+
* within this.actualOptions array.
557548
*
558549
* @param {Object || String} option
559550
* @return {boolean}
560551
*/
561552
optionExists(option) {
562553
let exists = false
563554
564-
this.options.forEach(opt => {
555+
this.actualOptions.forEach(opt => {
565556
if (typeof opt === 'object' && opt[this.label] === option) {
566557
exists = true
567558
} else if (opt === option) {
@@ -583,7 +574,7 @@
583574
return {
584575
open: this.open,
585576
searchable: this.searchable,
586-
loading: this.loading
577+
loading: this.showLoading
587578
}
588579
},
589580
@@ -607,7 +598,7 @@
607598
* @return {array}
608599
*/
609600
filteredOptions() {
610-
let options = this.$options.filters.filterBy?this.$options.filters.filterBy(this.options, this.search):this.options
601+
let options = this.$options.filters.filterBy?this.$options.filters.filterBy(this.actualOptions, this.search):this.actualOptions
611602
if (this.taggable && this.search.length && !this.optionExists(this.search)) {
612603
options.unshift(this.search)
613604
}
@@ -619,11 +610,11 @@
619610
* @return {Boolean}
620611
*/
621612
isValueEmpty() {
622-
if (this.value) {
623-
if (typeof this.value === 'object') {
624-
return !Object.keys(this.value).length
613+
if (this.actualValue) {
614+
if (typeof this.actualValue === 'object') {
615+
return !Object.keys(this.actualValue).length
625616
}
626-
return !this.value.length
617+
return !this.actualValue.length
627618
}
628619
629620
return true;
@@ -635,13 +626,18 @@
635626
*/
636627
valueAsArray() {
637628
if (this.multiple) {
638-
return this.value
639-
} else if (this.value) {
640-
return [this.value]
629+
return this.actualValue
630+
} else if (this.actualValue) {
631+
return [this.actualValue]
641632
}
642633
643634
return []
644635
}
636+
},
637+
created: function() {
638+
this.actualValue = this.value
639+
this.actualOptions = this.options.slice(0)
640+
this.showLoading = this.loading
645641
}
646642
647643
}

‎src/mixins/ajax.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,9 @@ module.exports = {
5959
*/
6060
toggleLoading(toggle = null) {
6161
if (toggle == null) {
62-
return this.loading = !this.loading
62+
return this.showLoading = !this.showLoading
6363
}
64-
return this.loading = toggle
64+
return this.showLoading = toggle
6565
}
6666
}
6767
}

0 commit comments

Comments
 (0)