dropdown-select.vue
4.27 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<template>
<div class="dropdown-select" :class="{open: show, dropdown: !dropup, dropup: dropup}">
<button
:id="id"
:class="['btn','dropdown',dropdownToggle,btnVariant,btnSize]"
role="button"
aria-haspopup="true"
aria-expanded="show"
@click.prevent="toggle($event)"
:disabled="disabled">
<span class="checked-items" v-html="displayItem"></span>
</button>
<ul class="dropdown-menu" :class="{'dropdown-menu-right' : position == 'right'}" aria-labelledby="dLabel">
<li v-for="item in list">
<button class="dropdown-item" :click.stop.prevent="select(item)">{{item.text}}</button>
</li>
</ul>
</div>
</template>
<script>
export default {
replace: true,
data() {
return {
show: false,
selected: false
};
},
computed: {
btnVariant() {
return !this.variant || this.variant === `default` ? `btn-secondary` : `btn-${this.variant}`;
},
btnSize() {
return !this.size || this.size === `default` ? `` : `btn-${this.size}`;
},
dropdownToggle() {
return this.caret ? 'dropdown-toggle' : '';
},
displayItem() {
// if zero show default message
if ((this.returnObject && this.model && !this.model.text) || (!this.returnObject && this.model && this.model.length === 0) || this.forceDefault) {
return this.defaultText;
}
// show selected item
if (this.returnObject && this.model && this.model.text) {
return this.model.text;
}
// show text that coresponds to the model value
if (!this.returnObject && this.model) {
let result = this.model || '';
this.list.forEach(function (item) {
if (item.value === this.model) {
result = item.text;
}
});
return result;
}
return '';
}
},
props: {
id: {
type: String
},
model: {
required: false
},
list: {
type: Array,
default: [],
required: true
},
caret: {
type: Boolean,
default: true
},
position: {
type: String,
default: 'left'
},
size: {
type: String,
default: ''
},
variant: {
type: String,
default: 'default'
},
defaultText: {
type: String,
default: 'Plase select one'
},
forceDefault: {
type: Boolean,
default: false
},
returnObject: {
type: Boolean,
default: false
},
dropup: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
}
},
methods: {
toggle(e) {
// hide an alert
this.show = !this.show;
// Dispatch an event from the current vm that propagates all the way up to its $root
if (this.show) {
this.$root.$emit('shown:dropdown', this.id);
e.stopPropagation();
} else {
this.$root.$emit('hidden::dropdown', this.id);
}
},
select(item) {
// we need to set empty model to make model watchers react to it
if (this.returnObject) {
this.model = item;
} else {
this.model = item.value;
}
this.show = false;
// Dispatch an event from the current vm that propagates all the way up to its $root
this.$root.$emit('selected::dropdown', this.id, this.model);
}
},
created() {
const hub = this.$root;
hub.$on('hide::dropdown', function () {
this.show = false;
});
},
mounted() {
}
};
</script>