Skip to content

Commit f5e3e25

Browse files
sagalbotsagalbot
committed
fixes:
- change currentSelection to mutableValue - change currentOptions to mutableOptions - change showLoading to mutableLoading - add default onChange function that emits an input event - allows the use of v-model syntax on the component - since spies on props throw warnings because they are now immutable, refactor tests so spies aren't required todo: - update docs - 1 failing test from inject-loader issue
1 parent 4a7614e commit f5e3e25

File tree

7 files changed

+199
-143
lines changed

7 files changed

+199
-143
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ node_modules
33
npm-debug.log
44
.idea
55
test/unit/coverage
6-
.coveralls.yml
6+
.coveralls.yml
7+
.flowconfig

‎build/webpack.base.conf.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ module.exports = {
1919
'src': path.resolve(__dirname, '../src'),
2020
'assets': path.resolve(__dirname, '../docs/assets'),
2121
'mixins': path.resolve(__dirname, '../src/mixins'),
22-
'components': path.resolve(__dirname, '../docs/components'),
23-
'vue$': 'vue/dist/vue.js'
22+
'components': path.resolve(__dirname, '../src/components'),
23+
'vue$': 'vue/dist/vue.common.js',
2424
}
2525
},
2626
resolveLoader: {

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-select",
3-
"version": "1.3.3",
3+
"version": "2.0.0-alpha",
44
"description": "A native Vue.js component that provides similar functionality to Select2 without the overhead of jQuery.",
55
"author": "Jeff Sagal <sagalbot@gmail.com>",
66
"private": false,
@@ -62,7 +62,7 @@
6262
"vue": "^2.0.3",
6363
"vue-hot-reload-api": "^1.2.0",
6464
"vue-html-loader": "^1.2.3",
65-
"vue-loader": "^9.6.0",
65+
"vue-loader": "^9.9.5",
6666
"vue-resource": "^1.0.3",
6767
"vue-style-loader": "^1.0.0",
6868
"vuex": "^0.6.3",

‎src/components/Select.vue

Lines changed: 96 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@
202202
<i ref="openIndicator" role="presentation" class="open-indicator"></i>
203203

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

@@ -237,7 +237,7 @@
237237
/**
238238
* Contains the currently selected value. Very similar to a
239239
* `value` attribute on an <input>. You can listen for changes
240-
* using 'change' event using v-on
240+
* using 'change' event using v-on
241241
* @type {Object||String||null}
242242
*/
243243
value: {
@@ -349,8 +349,12 @@
349349
* @type {Function}
350350
* @default {null}
351351
*/
352-
onChange: Function,
353-
352+
onChange: {
353+
type: Function,
354+
default: function(val) {
355+
this.$emit('input', val)
356+
}
357+
},
354358
355359
/**
356360
* Enable/disable creating options from searchInput.
@@ -378,7 +382,7 @@
378382
createOption: {
379383
type: Function,
380384
default: function (newOption) {
381-
if (typeof this.currentOptions[0] === 'object') {
385+
if (typeof this.mutableOptions[0] === 'object') {
382386
return {[this.label]: newOption}
383387
}
384388
return newOption
@@ -399,45 +403,80 @@
399403
return {
400404
search: '',
401405
open: false,
402-
currentSelection: null,
403-
currentOptions: [],
404-
showLoading: false
406+
mutableValue: null,
407+
mutableOptions: [],
408+
mutableLoading: false
405409
}
406410
},
407411
408412
watch: {
409-
value(val, old) {
410-
this.currentSelection = val
413+
/**
414+
* When the value prop changes, update
415+
* the internal mutableValue.
416+
* @param {mixed} val
417+
* @return {void}
418+
*/
419+
value(val) {
420+
this.mutableValue = val
411421
},
412-
currentSelection(val, old) {
422+
423+
/**
424+
* Maybe run the onChange callback.
425+
* @param {string|object} val
426+
* @param {string|object} old
427+
* @return {void}
428+
*/
429+
mutableValue(val, old) {
413430
if (this.multiple) {
414431
this.onChange ? this.onChange(val) : null
415-
this.$emit('change', val)
416432
} else {
417-
if(val !== old) {
418-
this.onChange? this.onChange(val) : null
419-
this.$emit('change', val)
420-
}
433+
this.onChange && val !== old ? this.onChange(val) : null
421434
}
422435
},
436+
437+
/**
438+
* When options change, update
439+
* the internal mutableOptions.
440+
* @param {array} val
441+
* @return {void}
442+
*/
423443
options(val) {
424-
this.currentOptions = val
444+
this.mutableOptions = val
425445
},
426-
currentOptions() {
446+
447+
/**
448+
* Maybe reset the mutableValue
449+
* when mutableOptions change.
450+
* @return {[type]} [description]
451+
*/
452+
mutableOptions() {
427453
if (!this.taggable && this.resetOnOptionsChange) {
428-
this.currentSelection = this.multiple ? [] : null
454+
this.mutableValue = this.multiple ? [] : null
429455
}
430456
},
431-
multiple(val) {
432-
this.currentSelection = val ? [] : null
457+
458+
/**
459+
* Always reset the mutableValue when
460+
* the multiple prop changes.
461+
* @param {Boolean} val
462+
* @return {void}
463+
*/
464+
multiple(val) {
465+
this.mutableValue = val ? [] : null
433466
}
434467
},
435468
469+
created() {
470+
this.mutableValue = this.value
471+
this.mutableOptions = this.options.slice(0)
472+
this.mutableLoading = this.loading
473+
},
474+
436475
methods: {
437476
438477
/**
439478
* Select a given option.
440-
* @param {Object||String} option
479+
* @param {Object|String} option
441480
* @return {void}
442481
*/
443482
select(option) {
@@ -448,19 +487,18 @@
448487
option = this.createOption(option)
449488
450489
if (this.pushTags) {
451-
console.log("adding " + option +" to "+ this.currentOptions)
452-
this.currentOptions.push(option)
490+
this.mutableOptions.push(option)
453491
}
454492
}
455493
456494
if (this.multiple) {
457-
if (!this.currentSelection) {
458-
this.currentSelection = [option]
495+
if (!this.mutableValue) {
496+
this.mutableValue = [option]
459497
} else {
460-
this.currentSelection.push(option)
498+
this.mutableValue.push(option)
461499
}
462500
} else {
463-
this.currentSelection = option
501+
this.mutableValue = option
464502
}
465503
}
466504
@@ -469,27 +507,27 @@
469507
470508
/**
471509
* De-select a given option.
472-
* @param {Object||String} option
510+
* @param {Object|String} option
473511
* @return {void}
474512
*/
475513
deselect(option) {
476514
if (this.multiple) {
477515
let ref = -1
478-
this.currentSelection.forEach((val) => {
516+
this.mutableValue.forEach((val) => {
479517
if (val === option || typeof val === 'object' && val[this.label] === option[this.label]) {
480518
ref = val
481519
}
482520
})
483-
var index = this.currentSelection.indexOf(ref)
484-
this.currentSelection.splice(index, 1)
521+
var index = this.mutableValue.indexOf(ref)
522+
this.mutableValue.splice(index, 1)
485523
} else {
486-
this.currentSelection = null
524+
this.mutableValue = null
487525
}
488526
},
489527
490528
/**
491529
* Called from this.select after each selection.
492-
* @param {Object||String} option
530+
* @param {Object|String} option
493531
* @return {void}
494532
*/
495533
onAfterSelect(option) {
@@ -521,13 +559,13 @@
521559
522560
/**
523561
* Check if the given option is currently selected.
524-
* @param {Object||String} option
525-
* @return {Boolean} True when selected || False otherwise
562+
* @param {Object|String} option
563+
* @return {Boolean} True when selected | False otherwise
526564
*/
527565
isOptionSelected(option) {
528-
if (this.multiple && this.currentSelection) {
566+
if (this.multiple && this.mutableValue) {
529567
let selected = false
530-
this.currentSelection.forEach(opt => {
568+
this.mutableValue.forEach(opt => {
531569
if (typeof opt === 'object' && opt[this.label] === option[this.label]) {
532570
selected = true
533571
} else if (opt === option) {
@@ -537,7 +575,7 @@
537575
return selected
538576
}
539577
540-
return this.currentSelection === option
578+
return this.mutableValue === option
541579
},
542580
543581
/**
@@ -559,22 +597,22 @@
559597
* @return {this.value}
560598
*/
561599
maybeDeleteValue() {
562-
if (!this.$refs.search.value.length && this.currentSelection) {
563-
return this.multiple ? this.currentSelection.pop() : this.currentSelection = null
600+
if (!this.$refs.search.value.length && this.mutableValue) {
601+
return this.multiple ? this.mutableValue.pop() : this.mutableValue = null
564602
}
565603
},
566604
567605
/**
568606
* Determine if an option exists
569-
* within this.currentOptions array.
607+
* within this.mutableOptions array.
570608
*
571609
* @param {Object || String} option
572610
* @return {boolean}
573611
*/
574612
optionExists(option) {
575613
let exists = false
576614
577-
this.currentOptions.forEach(opt => {
615+
this.mutableOptions.forEach(opt => {
578616
if (typeof opt === 'object' && opt[this.label] === option) {
579617
exists = true
580618
} else if (opt === option) {
@@ -596,7 +634,7 @@
596634
return {
597635
open: this.open,
598636
searchable: this.searchable,
599-
loading: this.showLoading
637+
loading: this.mutableLoading
600638
}
601639
},
602640
@@ -620,7 +658,13 @@
620658
* @return {array}
621659
*/
622660
filteredOptions() {
623-
let options = this.$options.filters.filterBy?this.$options.filters.filterBy(this.currentOptions, this.search):this.currentOptions
661+
662+
let options = this.mutableOptions.filter((option) => {
663+
if( typeof option === 'object' ) {
664+
return option[this.label].indexOf(this.search) > -1
665+
}
666+
return option.indexOf(this.search) > -1
667+
})
624668
if (this.taggable && this.search.length && !this.optionExists(this.search)) {
625669
options.unshift(this.search)
626670
}
@@ -632,11 +676,11 @@
632676
* @return {Boolean}
633677
*/
634678
isValueEmpty() {
635-
if (this.currentSelection) {
636-
if (typeof this.currentSelection === 'object') {
637-
return !Object.keys(this.currentSelection).length
679+
if (this.mutableValue) {
680+
if (typeof this.mutableValue === 'object') {
681+
return !Object.keys(this.mutableValue).length
638682
}
639-
return !this.currentSelection.length
683+
return !this.mutableValue.length
640684
}
641685
642686
return true;
@@ -648,19 +692,14 @@
648692
*/
649693
valueAsArray() {
650694
if (this.multiple) {
651-
return this.currentSelection
652-
} else if (this.currentSelection) {
653-
return [this.currentSelection]
695+
return this.mutableValue
696+
} else if (this.mutableValue) {
697+
return [this.mutableValue]
654698
}
655699
656700
return []
657701
}
658702
},
659-
created: function() {
660-
this.currentSelection = this.value
661-
this.currentOptions = this.options.slice(0)
662-
this.showLoading = this.loading
663-
}
664703
665704
}
666705
</script>

‎src/dev.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
import Vue from 'vue'
2-
import vSelect from '../src/components/Select.vue'
2+
import vSelect from './components/Select.vue'
3+
import countries from '../old_docs/data/advanced.js'
34

45
Vue.component('v-select', vSelect)
56

67
Vue.config.devtools = true
78

89
/* eslint-disable no-new */
910
new Vue({
10-
el: 'body'
11+
el: '#app',
12+
data: {
13+
placeholder: "placeholder",
14+
value: null,
15+
options: countries
16+
}
1117
})

‎src/mixins/ajax.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,4 +64,4 @@ module.exports = {
6464
return this.showLoading = toggle
6565
}
6666
}
67-
}
67+
}

0 commit comments

Comments
 (0)