Skip to content

Commit 4a7614e

Browse files
sagalbotsagalbot
authored
Merge pull request sagalbot#101 from akkinenirajesh/master
More changes for Vue2.0
2 parents ef80a94 + 23355ea commit 4a7614e

File tree

6 files changed

+161
-144
lines changed

6 files changed

+161
-144
lines changed

‎README.md

Lines changed: 13 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,14 @@ 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,
167+
/**
168+
* An optional callback function that is called each time the selected
169+
* value(s) change. When integrating with Vuex, use this callback to trigger
170+
* an action, rather than using :value.sync to retreive the selected value.
171+
* @type {Function}
172+
* @default {null}
173+
*/
174+
onChange: Function,
177175

178176
/**
179177
* Enable/disable creating options from searchInput.

‎old_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))

‎old_docs/components/Params.vue

Lines changed: 6 additions & 6 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

@@ -90,6 +88,8 @@
9088
* @default {null}
9189
*/
9290
onChange: Function
91+
}
92+
9393
}
9494
</code></pre>
9595
</template>

‎src/components/Select.vue

Lines changed: 59 additions & 41 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: {
@@ -352,6 +350,7 @@
352350
* @default {null}
353351
*/
354352
onChange: Function,
353+
355354
356355
/**
357356
* Enable/disable creating options from searchInput.
@@ -379,7 +378,7 @@
379378
createOption: {
380379
type: Function,
381380
default: function (newOption) {
382-
if (typeof this.options[0] === 'object') {
381+
if (typeof this.currentOptions[0] === 'object') {
383382
return {[this.label]: newOption}
384383
}
385384
return newOption
@@ -399,26 +398,39 @@
399398
data() {
400399
return {
401400
search: '',
402-
open: false
401+
open: false,
402+
currentSelection: null,
403+
currentOptions: [],
404+
showLoading: false
403405
}
404406
},
405407
406408
watch: {
407409
value(val, old) {
410+
this.currentSelection = val
411+
},
412+
currentSelection(val, old) {
408413
if (this.multiple) {
409414
this.onChange ? this.onChange(val) : null
415+
this.$emit('change', val)
410416
} else {
411-
this.onChange && val !== old ? this.onChange(val) : null
417+
if(val !== old) {
418+
this.onChange? this.onChange(val) : null
419+
this.$emit('change', val)
420+
}
412421
}
413422
},
414-
options() {
423+
options(val) {
424+
this.currentOptions = val
425+
},
426+
currentOptions() {
415427
if (!this.taggable && this.resetOnOptionsChange) {
416-
this.$set('value', this.multiple ? [] : null)
428+
this.currentSelection = this.multiple ? [] : null
417429
}
418430
},
419-
multiple(val) {
420-
this.$set('value', val ? [] : null)
421-
}
431+
multiple(val) {
432+
this.currentSelection = val ? [] : null
433+
}
422434
},
423435
424436
methods: {
@@ -436,18 +448,19 @@
436448
option = this.createOption(option)
437449
438450
if (this.pushTags) {
439-
this.options.push(option)
451+
console.log("adding " + option +" to "+ this.currentOptions)
452+
this.currentOptions.push(option)
440453
}
441454
}
442455
443456
if (this.multiple) {
444-
if (!this.value) {
445-
this.$set('value', [option])
457+
if (!this.currentSelection) {
458+
this.currentSelection = [option]
446459
} else {
447-
this.value.push(option)
460+
this.currentSelection.push(option)
448461
}
449462
} else {
450-
this.value = option
463+
this.currentSelection = option
451464
}
452465
}
453466
@@ -462,15 +475,15 @@
462475
deselect(option) {
463476
if (this.multiple) {
464477
let ref = -1
465-
this.value.forEach((val) => {
478+
this.currentSelection.forEach((val) => {
466479
if (val === option || typeof val === 'object' && val[this.label] === option[this.label]) {
467480
ref = val
468481
}
469482
})
470-
var index = this.value.indexOf(ref)
471-
this.value.splice(index, 1)
483+
var index = this.currentSelection.indexOf(ref)
484+
this.currentSelection.splice(index, 1)
472485
} else {
473-
this.value = null
486+
this.currentSelection = null
474487
}
475488
},
476489
@@ -512,9 +525,9 @@
512525
* @return {Boolean} True when selected || False otherwise
513526
*/
514527
isOptionSelected(option) {
515-
if (this.multiple && this.value) {
528+
if (this.multiple && this.currentSelection) {
516529
let selected = false
517-
this.value.forEach(opt => {
530+
this.currentSelection.forEach(opt => {
518531
if (typeof opt === 'object' && opt[this.label] === option[this.label]) {
519532
selected = true
520533
} else if (opt === option) {
@@ -524,7 +537,7 @@
524537
return selected
525538
}
526539
527-
return this.value === option
540+
return this.currentSelection === option
528541
},
529542
530543
/**
@@ -546,22 +559,22 @@
546559
* @return {this.value}
547560
*/
548561
maybeDeleteValue() {
549-
if (!this.$refs.search.value.length && this.value) {
550-
return this.multiple ? this.value.pop() : this.$set('value', null)
562+
if (!this.$refs.search.value.length && this.currentSelection) {
563+
return this.multiple ? this.currentSelection.pop() : this.currentSelection = null
551564
}
552565
},
553566
554567
/**
555568
* Determine if an option exists
556-
* within this.options array.
569+
* within this.currentOptions array.
557570
*
558571
* @param {Object || String} option
559572
* @return {boolean}
560573
*/
561574
optionExists(option) {
562575
let exists = false
563576
564-
this.options.forEach(opt => {
577+
this.currentOptions.forEach(opt => {
565578
if (typeof opt === 'object' && opt[this.label] === option) {
566579
exists = true
567580
} else if (opt === option) {
@@ -583,7 +596,7 @@
583596
return {
584597
open: this.open,
585598
searchable: this.searchable,
586-
loading: this.loading
599+
loading: this.showLoading
587600
}
588601
},
589602
@@ -607,7 +620,7 @@
607620
* @return {array}
608621
*/
609622
filteredOptions() {
610-
let options = this.$options.filters.filterBy?this.$options.filters.filterBy(this.options, this.search):this.options
623+
let options = this.$options.filters.filterBy?this.$options.filters.filterBy(this.currentOptions, this.search):this.currentOptions
611624
if (this.taggable && this.search.length && !this.optionExists(this.search)) {
612625
options.unshift(this.search)
613626
}
@@ -619,11 +632,11 @@
619632
* @return {Boolean}
620633
*/
621634
isValueEmpty() {
622-
if (this.value) {
623-
if (typeof this.value === 'object') {
624-
return !Object.keys(this.value).length
635+
if (this.currentSelection) {
636+
if (typeof this.currentSelection === 'object') {
637+
return !Object.keys(this.currentSelection).length
625638
}
626-
return !this.value.length
639+
return !this.currentSelection.length
627640
}
628641
629642
return true;
@@ -635,13 +648,18 @@
635648
*/
636649
valueAsArray() {
637650
if (this.multiple) {
638-
return this.value
639-
} else if (this.value) {
640-
return [this.value]
651+
return this.currentSelection
652+
} else if (this.currentSelection) {
653+
return [this.currentSelection]
641654
}
642655
643656
return []
644657
}
658+
},
659+
created: function() {
660+
this.currentSelection = this.value
661+
this.currentOptions = this.options.slice(0)
662+
this.showLoading = this.loading
645663
}
646664
647665
}

‎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)