Skip to content

Commit 23355ea

Browse files
author
Rajesh Akkineni
committed
Some more changes.
changed from actualValue to currentSelection
1 parent b01f1b2 commit 23355ea

File tree

4 files changed

+98
-58
lines changed

4 files changed

+98
-58
lines changed

‎README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,14 @@ From there you can use as normal. Here's an [example on JSBin](http://jsbin.com/
164164
default: 'label'
165165
},
166166

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,
167175

168176
/**
169177
* Enable/disable creating options from searchInput.

‎old_docs/components/Params.vue

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,16 @@
7878
label: {
7979
type: String,
8080
default: 'label'
81+
},
82+
83+
/**
84+
* An optional callback function that is called each time the selected
85+
* value(s) change. When integrating with Vuex, use this callback to trigger
86+
* an action, rather than using :value.sync to retreive the selected value.
87+
* @type {Function}
88+
* @default {null}
89+
*/
90+
onChange: Function
8191
}
8292

8393
}

‎src/components/Select.vue

Lines changed: 55 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -342,6 +342,16 @@
342342
}
343343
},
344344
345+
/**
346+
* An optional callback function that is called each time the selected
347+
* value(s) change. When integrating with Vuex, use this callback to trigger
348+
* an action, rather than using :value.sync to retreive the selected value.
349+
* @type {Function}
350+
* @default {null}
351+
*/
352+
onChange: Function,
353+
354+
345355
/**
346356
* Enable/disable creating options from searchInput.
347357
* @type {Boolean}
@@ -368,7 +378,7 @@
368378
createOption: {
369379
type: Function,
370380
default: function (newOption) {
371-
if (typeof this.actualOptions[0] === 'object') {
381+
if (typeof this.currentOptions[0] === 'object') {
372382
return {[this.label]: newOption}
373383
}
374384
return newOption
@@ -389,27 +399,38 @@
389399
return {
390400
search: '',
391401
open: false,
392-
actualValue: null,
393-
actualOptions: [],
402+
currentSelection: null,
403+
currentOptions: [],
394404
showLoading: false
395405
}
396406
},
397407
398408
watch: {
399-
actualValue(val, old) {
409+
value(val, old) {
410+
this.currentSelection = val
411+
},
412+
currentSelection(val, old) {
400413
if (this.multiple) {
414+
this.onChange ? this.onChange(val) : null
401415
this.$emit('change', val)
402416
} else {
403417
if(val !== old) {
418+
this.onChange? this.onChange(val) : null
404419
this.$emit('change', val)
405420
}
406421
}
407422
},
408-
actualOptions() {
423+
options(val) {
424+
this.currentOptions = val
425+
},
426+
currentOptions() {
409427
if (!this.taggable && this.resetOnOptionsChange) {
410-
this.actualValue = this.multiple ? [] : null
428+
this.currentSelection = this.multiple ? [] : null
411429
}
412-
}
430+
},
431+
multiple(val) {
432+
this.currentSelection = val ? [] : null
433+
}
413434
},
414435
415436
methods: {
@@ -427,18 +448,19 @@
427448
option = this.createOption(option)
428449
429450
if (this.pushTags) {
430-
this.actualOptions.push(option)
451+
console.log("adding " + option +" to "+ this.currentOptions)
452+
this.currentOptions.push(option)
431453
}
432454
}
433455
434456
if (this.multiple) {
435-
if (!this.actualValue) {
436-
this.actualValue = [option]
457+
if (!this.currentSelection) {
458+
this.currentSelection = [option]
437459
} else {
438-
this.actualValue.push(option)
460+
this.currentSelection.push(option)
439461
}
440462
} else {
441-
this.actualValue = option
463+
this.currentSelection = option
442464
}
443465
}
444466
@@ -453,15 +475,15 @@
453475
deselect(option) {
454476
if (this.multiple) {
455477
let ref = -1
456-
this.actualValue.forEach((val) => {
478+
this.currentSelection.forEach((val) => {
457479
if (val === option || typeof val === 'object' && val[this.label] === option[this.label]) {
458480
ref = val
459481
}
460482
})
461-
var index = this.actualValue.indexOf(ref)
462-
this.actualValue.splice(index, 1)
483+
var index = this.currentSelection.indexOf(ref)
484+
this.currentSelection.splice(index, 1)
463485
} else {
464-
this.actualValue = null
486+
this.currentSelection = null
465487
}
466488
},
467489
@@ -503,9 +525,9 @@
503525
* @return {Boolean} True when selected || False otherwise
504526
*/
505527
isOptionSelected(option) {
506-
if (this.multiple && this.actualValue) {
528+
if (this.multiple && this.currentSelection) {
507529
let selected = false
508-
this.actualValue.forEach(opt => {
530+
this.currentSelection.forEach(opt => {
509531
if (typeof opt === 'object' && opt[this.label] === option[this.label]) {
510532
selected = true
511533
} else if (opt === option) {
@@ -515,7 +537,7 @@
515537
return selected
516538
}
517539
518-
return this.actualValue === option
540+
return this.currentSelection === option
519541
},
520542
521543
/**
@@ -537,22 +559,22 @@
537559
* @return {this.value}
538560
*/
539561
maybeDeleteValue() {
540-
if (!this.$refs.search.value.length && this.actualValue) {
541-
return this.multiple ? this.actualValue.pop() : this.actualValue = null
562+
if (!this.$refs.search.value.length && this.currentSelection) {
563+
return this.multiple ? this.currentSelection.pop() : this.currentSelection = null
542564
}
543565
},
544566
545567
/**
546568
* Determine if an option exists
547-
* within this.actualOptions array.
569+
* within this.currentOptions array.
548570
*
549571
* @param {Object || String} option
550572
* @return {boolean}
551573
*/
552574
optionExists(option) {
553575
let exists = false
554576
555-
this.actualOptions.forEach(opt => {
577+
this.currentOptions.forEach(opt => {
556578
if (typeof opt === 'object' && opt[this.label] === option) {
557579
exists = true
558580
} else if (opt === option) {
@@ -598,7 +620,7 @@
598620
* @return {array}
599621
*/
600622
filteredOptions() {
601-
let options = this.$options.filters.filterBy?this.$options.filters.filterBy(this.actualOptions, this.search):this.actualOptions
623+
let options = this.$options.filters.filterBy?this.$options.filters.filterBy(this.currentOptions, this.search):this.currentOptions
602624
if (this.taggable && this.search.length && !this.optionExists(this.search)) {
603625
options.unshift(this.search)
604626
}
@@ -610,11 +632,11 @@
610632
* @return {Boolean}
611633
*/
612634
isValueEmpty() {
613-
if (this.actualValue) {
614-
if (typeof this.actualValue === 'object') {
615-
return !Object.keys(this.actualValue).length
635+
if (this.currentSelection) {
636+
if (typeof this.currentSelection === 'object') {
637+
return !Object.keys(this.currentSelection).length
616638
}
617-
return !this.actualValue.length
639+
return !this.currentSelection.length
618640
}
619641
620642
return true;
@@ -626,17 +648,17 @@
626648
*/
627649
valueAsArray() {
628650
if (this.multiple) {
629-
return this.actualValue
630-
} else if (this.actualValue) {
631-
return [this.actualValue]
651+
return this.currentSelection
652+
} else if (this.currentSelection) {
653+
return [this.currentSelection]
632654
}
633655
634656
return []
635657
}
636658
},
637659
created: function() {
638-
this.actualValue = this.value
639-
this.actualOptions = this.options.slice(0)
660+
this.currentSelection = this.value
661+
this.currentOptions = this.options.slice(0)
640662
this.showLoading = this.loading
641663
}
642664

0 commit comments

Comments
 (0)