Skip to content

Commit 9167cf3

Browse files
author
Damian Dulisz
committed
Update /lib
1 parent 57163f1 commit 9167cf3

File tree

5 files changed

+58
-46
lines changed

5 files changed

+58
-46
lines changed

‎lib/Multiselect.vue

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div
33
tabindex="0"
4-
:class="{ 'multiselect--active': isOpen }"
4+
:class="{ 'multiselect--active': isOpen, 'multiselect--disabled': disabled }"
55
@focus="activate()"
66
@blur="searchable ? false : deactivate()"
77
@keydown.self.down.prevent="pointerForward()"
@@ -38,6 +38,7 @@
3838
v-el:search
3939
v-if="searchable"
4040
v-model="search"
41+
:disabled="disabled"
4142
@focus.prevent="activate()"
4243
@blur.prevent="deactivate()"
4344
@keyup.esc="deactivate()"
@@ -49,7 +50,7 @@
4950
<span
5051
v-if="!searchable && !multiple"
5152
class="multiselect__single"
52-
v-text="getOptionLabel(value) ? getOptionLabel(value) : placeholder">
53+
v-text="currentOptionLabel || placeholder">
5354
</span>
5455
</div>
5556
<ul
@@ -133,7 +134,7 @@
133134
default: true
134135
},
135136
/**
136-
* Label to look for in option Object
137+
* Limit the display of selected options. The rest will be hidden within the limitText string.
137138
* @default 'label'
138139
* @type {String}
139140
*/
@@ -160,6 +161,15 @@
160161
loading: {
161162
type: Boolean,
162163
default: false
164+
},
165+
/**
166+
* Disables the multiselect if true.
167+
* @default false
168+
* @type {Boolean}
169+
*/
170+
disabled: {
171+
type: Boolean,
172+
default: false
163173
}
164174
},
165175
computed: {
@@ -179,6 +189,10 @@
179189
</script>
180190

181191
<style>
192+
fieldset[disabled] .multiselect {
193+
pointer-events: none;
194+
}
195+
182196
.multiselect__spinner {
183197
position: absolute;
184198
right: 1px;
@@ -250,6 +264,11 @@
250264
outline: none;
251265
}
252266
267+
.multiselect--disabled {
268+
pointer-events: none;
269+
opacity: 0.6;
270+
}
271+
253272
.multiselect--active {
254273
z-index: 50;
255274
}

‎lib/multiselectMixin.js

Lines changed: 22 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ module.exports = {
55
return {
66
search: '',
77
isOpen: false,
8-
value: []
8+
value: this.selected ? deepClone(this.selected) : this.multiple ? [] : null
99
}
1010
},
1111
props: {
@@ -29,15 +29,13 @@ module.exports = {
2929
default: false
3030
},
3131
/**
32-
* Required. Presets the selected options. Add `.sync` to
32+
* Presets the selected options. Add `.sync` to
3333
* update parent value. If this.onChange callback is present,
3434
* this will not update. In that case, the parent is responsible
3535
* for updating this value.
3636
* @type {Object||Array||String||Integer}
3737
*/
38-
selected: {
39-
required: true
40-
},
38+
selected: {},
4139
/**
4240
* Key to compare objects
4341
* @default 'id'
@@ -110,16 +108,6 @@ module.exports = {
110108
type: Boolean,
111109
default: true
112110
},
113-
/**
114-
* Value that indicates if the dropdown has been used.
115-
* Useful for validation.
116-
* @default false
117-
* @type {Boolean}
118-
*/
119-
touched: {
120-
type: Boolean,
121-
default: false
122-
},
123111
/**
124112
* Reset this.value, this.search, this.selected after this.value changes.
125113
* Useful if want to create a stateless dropdown, that fires the this.onChange
@@ -187,11 +175,6 @@ module.exports = {
187175
}
188176
},
189177
created () {
190-
if (!this.selected) {
191-
this.$set('value', this.multiple ? [] : null)
192-
} else {
193-
this.value = deepClone(this.selected)
194-
}
195178
if (this.searchable) this.adjustSearch()
196179
},
197180
computed: {
@@ -219,6 +202,9 @@ module.exports = {
219202
return this.label
220203
? this.options.map(element => element[this.label])
221204
: this.options
205+
},
206+
currentOptionLabel () {
207+
return this.getOptionLabel(this.value)
222208
}
223209
},
224210
watch: {
@@ -231,7 +217,10 @@ module.exports = {
231217
this.adjustSearch()
232218
},
233219
'search' () {
234-
this.$emit('search-change', this.search, this.id)
220+
/* istanbul ignore else */
221+
if (this.search !== this.currentOptionLabel) {
222+
this.$emit('search-change', this.search, this.id)
223+
}
235224
},
236225
'selected' (newVal, oldVal) {
237226
this.value = deepClone(this.selected)
@@ -376,16 +365,17 @@ module.exports = {
376365
*/
377366
activate () {
378367
/* istanbul ignore else */
379-
if (!this.isOpen) {
380-
this.isOpen = true
381-
/* istanbul ignore else */
382-
if (this.searchable) {
383-
this.search = ''
384-
this.$els.search.focus()
385-
} else {
386-
this.$el.focus()
387-
}
368+
if (this.isOpen) return
369+
370+
this.isOpen = true
371+
/* istanbul ignore else */
372+
if (this.searchable) {
373+
this.search = ''
374+
this.$els.search.focus()
375+
} else {
376+
this.$el.focus()
388377
}
378+
this.$emit('open', this.id)
389379
},
390380
/**
391381
* Closes the multiselect’s dropdown.
@@ -396,14 +386,14 @@ module.exports = {
396386
if (!this.isOpen) return
397387

398388
this.isOpen = false
399-
this.touched = true
400389
/* istanbul ignore else */
401390
if (this.searchable) {
402391
this.$els.search.blur()
403392
this.adjustSearch()
404393
} else {
405394
this.$el.blur()
406395
}
396+
this.$emit('close', deepClone(this.value), this.id)
407397
},
408398
/**
409399
* Adjusts the Search property to equal the correct value
@@ -414,7 +404,7 @@ module.exports = {
414404

415405
this.search = this.multiple
416406
? ''
417-
: this.getOptionLabel(this.value)
407+
: this.currentOptionLabel
418408
},
419409
/**
420410
* Call this.activate() or this.deactivate()

‎lib/pointerMixin.js

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
module.exports = {
22
data () {
33
return {
4-
pointer: 0
4+
pointer: 0,
5+
visibleElements: this.maxHeight / 40
56
}
67
},
78
props: {
@@ -15,6 +16,11 @@ module.exports = {
1516
default: true
1617
}
1718
},
19+
computed: {
20+
pointerPosition () {
21+
return this.pointer * 40
22+
}
23+
},
1824
watch: {
1925
'filteredOptions' () {
2026
this.pointerAdjust()
@@ -30,19 +36,16 @@ module.exports = {
3036
pointerForward () {
3137
if (this.pointer < this.filteredOptions.length - 1) {
3238
this.pointer++
33-
var pointerPosition = this.pointer * 40
34-
var visibleElements = this.maxHeight / 40
35-
if (this.$els.list.scrollTop <= pointerPosition - visibleElements * 40) {
36-
this.$els.list.scrollTop = pointerPosition - (visibleElements - 1) * 40
39+
if (this.$els.list.scrollTop <= this.pointerPosition - this.visibleElements * 40) {
40+
this.$els.list.scrollTop = this.pointerPosition - (this.visibleElements - 1) * 40
3741
}
3842
}
3943
},
4044
pointerBackward () {
4145
if (this.pointer > 0) {
4246
this.pointer--
43-
var pointerPosition = this.pointer * 40
44-
if (this.$els.list.scrollTop >= pointerPosition) {
45-
this.$els.list.scrollTop = pointerPosition
47+
if (this.$els.list.scrollTop >= this.pointerPosition) {
48+
this.$els.list.scrollTop = this.pointerPosition
4649
}
4750
}
4851
},

‎lib/vue-multiselect.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/vue-multiselect.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)