Skip to content

Commit 8a552dd

Browse files
author
Damian Dulisz
committed
Rework for events support
* Fixed tests * Added `id` props to identify where from the events originate. Defaults to null. It is $emited as 2nd argument. * Removed redundant code after removing support for two-way binding.
1 parent 133b06d commit 8a552dd

File tree

3 files changed

+63
-52
lines changed

3 files changed

+63
-52
lines changed

‎docs/assets/base/_typo.sass

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,25 @@ $header-line-height: 1.2
55
$header-color: $secondary-color
66

77
$header-h1-family: $global-font
8-
$header-h1-size-ratio-lg: 3.75 // 48px
8+
$header-h1-size-ratio-lg: 2.5 // 48px
99
$header-h1-size-ratio-md: 2.5 // 40px
1010
$header-h1-size-ratio-sm: 2 // 32px
1111
$header-h1-weight: $global-font-weight-bold
1212

1313
$header-h2-family: $global-font
14-
$header-h2-size-ratio-lg: 2.25 // 36px
15-
$header-h2-size-ratio-md: 2 // 32px
14+
$header-h2-size-ratio-lg: 1.8 // 36px
15+
$header-h2-size-ratio-md: 1.8 // 32px
1616
$header-h2-size-ratio-sm: 1.625 // 26px
1717
$header-h2-weight: $global-font-weight-bold
1818

1919
$header-h3-family: $global-font-secondary
20-
$header-h3-size-ratio-lg: 1.75 // 28px
20+
$header-h3-size-ratio-lg: 1.5 // 28px
2121
$header-h3-size-ratio-md: 1.5 // 24px
2222
$header-h3-size-ratio-sm: 1.375 // 22px
2323
$header-h3-weight: $global-font-weight-bold
2424

2525
$header-h4-family: $global-font
26-
$header-h4-size-ratio-sm: 1.5
26+
$header-h4-size-ratio-sm: 1.375
2727
$header-h4-size-ratio-md: 1.375
2828
$header-h4-size-ratio-lg: 1.125
2929
$header-h4-weight: $global-font-weight-light

‎src/multiselectMixin.js

Lines changed: 36 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,10 @@ module.exports = {
195195
async: {
196196
type: Boolean,
197197
default: false
198+
},
199+
id: {
200+
type: String,
201+
default: null
198202
}
199203
},
200204
created () {
@@ -236,9 +240,6 @@ module.exports = {
236240
},
237241
watch: {
238242
'value' () {
239-
if (JSON.stringify(this.value) !== JSON.stringify(this.selected)) {
240-
this.$emit('change', deepClone(this.value))
241-
}
242243
if (this.resetAfter) {
243244
this.$set('value', null)
244245
this.$set('search', null)
@@ -249,7 +250,7 @@ module.exports = {
249250
}
250251
},
251252
'search' () {
252-
this.$emit('search-change', this.search)
253+
this.$emit('search-change', this.search, this.id)
253254
if (this.async) {
254255
this.loading = true
255256
}
@@ -258,9 +259,7 @@ module.exports = {
258259
this.async && (this.loading = false)
259260
},
260261
'selected' (newVal, oldVal) {
261-
if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
262-
this.value = deepClone(this.selected)
263-
}
262+
this.value = deepClone(this.selected)
264263
}
265264
},
266265
methods: {
@@ -336,30 +335,32 @@ module.exports = {
336335
select (option) {
337336
if (this.max && this.multiple && this.value.length === this.max) return
338337
if (option.isTag) {
339-
this.$emit('tag', option.label)
338+
this.$emit('tag', option.label, this.id)
340339
this.search = ''
341340
} else {
342341
if (this.multiple) {
343342
if (!this.isNotSelected(option)) {
344-
this.$emit('remove', deepClone(option))
345343
this.removeElement(option)
346344
} else {
347-
this.$emit('select', deepClone(option))
348345
this.value.push(option)
349346
if (this.clearOnSelect) { this.search = '' }
347+
this.$emit('select', deepClone(option), this.id)
348+
this.$emit('change', deepClone(this.value), this.id)
350349
}
351350
} else {
352-
this.$emit('select', deepClone(option))
353-
this.$set('value',
354-
!this.isNotSelected(option) && this.allowEmpty
355-
? null
356-
: option
357-
)
358-
if (this.closeOnSelect) {
359-
this.searchable
360-
? this.$els.search.blur()
361-
: this.$el.blur()
362-
}
351+
const isSelected = this.isSelected(option)
352+
353+
if (isSelected && !this.allowEmpty) return
354+
355+
this.value = isSelected ? null : option
356+
357+
if (this.closeOnSelect) this.deactivate()
358+
// this.searchable
359+
// ? this.$els.search.blur()
360+
// : this.$el.blur()
361+
// }
362+
this.$emit('select', deepClone(option), this.id)
363+
this.$emit('change', deepClone(this.value), this.id)
363364
}
364365
}
365366
},
@@ -380,6 +381,8 @@ module.exports = {
380381
} else {
381382
this.value.$remove(option)
382383
}
384+
this.$emit('remove', deepClone(option), this.id)
385+
this.$emit('change', deepClone(this.value), this.id)
383386
}
384387
},
385388
/**
@@ -417,18 +420,18 @@ module.exports = {
417420
*/
418421
deactivate () {
419422
/* istanbul ignore else */
420-
if (this.isOpen) {
421-
this.isOpen = false
422-
this.touched = true
423-
/* istanbul ignore else */
424-
if (this.searchable) {
425-
this.$els.search.blur()
426-
this.search = this.multiple
427-
? ''
428-
: this.getOptionLabel(this.value)
429-
} else {
430-
this.$el.blur()
431-
}
423+
if (!this.isOpen) return
424+
425+
this.isOpen = false
426+
this.touched = true
427+
/* istanbul ignore else */
428+
if (this.searchable) {
429+
this.$els.search.blur()
430+
this.search = this.multiple
431+
? ''
432+
: this.getOptionLabel(this.value)
433+
} else {
434+
this.$el.blur()
432435
}
433436
},
434437
/**

‎test/unit/specs/Multiselect.spec.js

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -509,7 +509,7 @@ describe('Multiselect.vue', () => {
509509
describe('#watch:options', () => {
510510
it('sets loading to FALSE after options update', (done) => {
511511
const vm = new Vue({
512-
template: '<multiselect :selected="sel" :options="source" label="id" key="id" :searchable="true" :multiple="false" :on-search-change="onSearch"></multiselect>',
512+
template: '<multiselect :selected="sel" :options="source" label="id" key="id" :searchable="true" :multiple="false" @search-change="onSearch" :async="true"></multiselect>',
513513
components: { Multiselect },
514514
data: {
515515
sel: { id: '2' },
@@ -534,7 +534,7 @@ describe('Multiselect.vue', () => {
534534
describe('#watch:selected', () => {
535535
it('updates multiselect private value when parent selected changes to a different value than private value', (done) => {
536536
const vm = new Vue({
537-
template: '<multiselect :selected="sel" :options="source" label="id" key="id" :searchable="false" :on-change="addMore" :multiple="false"></multiselect>',
537+
template: '<multiselect :selected="sel" :options="source" label="id" key="id" :searchable="false" @change="addMore" :multiple="false"></multiselect>',
538538
components: { Multiselect },
539539
data: {
540540
sel: { id: '2' },
@@ -557,7 +557,7 @@ describe('Multiselect.vue', () => {
557557
describe('#watch:value', () => {
558558
it('calls onChange(option) callback when onChange prop is set', (done) => {
559559
const vm = new Vue({
560-
template: '<multiselect :selected="value" :options="source" label="id" key="id" :searchable="false" :on-change="afterSelect"></multiselect>',
560+
template: '<multiselect :selected="value" :options="source" label="id" key="id" :searchable="false" @change="afterSelect"></multiselect>',
561561
components: { Multiselect },
562562
data: {
563563
value: null,
@@ -579,7 +579,7 @@ describe('Multiselect.vue', () => {
579579
})
580580
})
581581

582-
it('changes the selected value when NO onChange prop is set', (done) => {
582+
it('not changing changes the selected value with no @change event listener', (done) => {
583583
const vm = new Vue({
584584
template: '<multiselect :selected.sync="value" :options="source" label="id" key="id" :searchable="false"></multiselect>',
585585
components: { Multiselect },
@@ -591,9 +591,9 @@ describe('Multiselect.vue', () => {
591591
}).$mount()
592592
vm.$children[0].select(vm.$children[0].options[0])
593593
Vue.nextTick(function () {
594-
expect(vm.$children[0].selected).to.deep.equal({ id: '1' })
594+
expect(vm.$children[0].selected).to.deep.equal(null)
595595
expect(vm.newValue).to.deep.equal(null)
596-
expect(vm.value).to.deep.equal({ id: '1' })
596+
expect(vm.value).to.deep.equal(null)
597597
done()
598598
})
599599
})
@@ -638,7 +638,7 @@ describe('Multiselect.vue', () => {
638638
describe('#watch:search', () => {
639639
it('calls onSearchChange(searchQuery) callback when onSearchChange prop is set', (done) => {
640640
const vm = new Vue({
641-
template: '<multiselect :selected="value" :options="source" label="id" key="id" :searchable="true" :on-search-change="afterSearch" :clear-on-select="false"></multiselect>',
641+
template: '<multiselect :selected="value" :options="source" label="id" key="id" :searchable="true" @search-change="afterSearch" :clear-on-select="false"></multiselect>',
642642
components: { Multiselect },
643643
data: {
644644
value: null,
@@ -659,7 +659,7 @@ describe('Multiselect.vue', () => {
659659
})
660660
it('sets loading status to TRUE until the options change', (done) => {
661661
const vm = new Vue({
662-
template: '<multiselect :selected="value" :options="source" label="id" key="id" :searchable="true" :on-search-change="afterSearch"></multiselect>',
662+
template: '<multiselect :selected="value" :options="source" label="id" key="id" :searchable="true" @search-change="afterSearch" :async="true"></multiselect>',
663663
components: { Multiselect },
664664
data: {
665665
value: null,
@@ -1070,19 +1070,27 @@ describe('Multiselect.vue', () => {
10701070
describe('#onTag', () => {
10711071
it('should should push to value and options with default settings and :taggable is TRUE', () => {
10721072
const vm = new Vue({
1073-
template: '<multiselect :selected="value" :searchable="true" :options="source" :multiple="true" :taggable="true"></multiselect>',
1073+
template: '<multiselect :selected="value" :searchable="true" :options="source" :multiple="true" :taggable="true" @tag="addTag"></multiselect>',
10741074
components: { Multiselect },
1075-
data: {
1076-
value: ['1'],
1077-
source: ['1', '2', '3']
1075+
data () {
1076+
return {
1077+
value: ['1'],
1078+
source: ['1', '2', '3']
1079+
}
1080+
},
1081+
methods: {
1082+
addTag (newTag) {
1083+
this.source.push(newTag)
1084+
this.value.push(newTag)
1085+
}
10781086
}
10791087
}).$mount()
10801088
vm.$children[0].search = 'test'
10811089
vm.$children[0].select(vm.$children[0].filteredOptions[0])
10821090
expect(vm.$children[0].options.length).to.equal(4)
10831091
expect(vm.$children[0].options).to.deep.equal(['1', '2', '3', 'test'])
1084-
expect(vm.$children[0].value.length).to.equal(2)
1085-
expect(vm.$children[0].value).to.deep.equal(['1', 'test'])
1092+
expect(vm.$children[0].selected.length).to.equal(2)
1093+
expect(vm.$children[0].selected).to.deep.equal(['1', 'test'])
10861094
})
10871095
})
10881096

0 commit comments

Comments
 (0)