/
Select.vue
76 lines (66 loc) · 1.71 KB
/
Select.vue
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
<template>
<b-dropdown
:toggle-class="'btn-light tsd-dropdown-toggle'"
:menu-class="'tsd-dropdown-menu'"
>
<template v-slot:button-content>
<div class="tsd-dropdown-selected-title">{{ selected_title }} <i v-if="selected.iconClass" :class="selected.iconClass"></i></div>
</template>
<b-dropdown-item
v-for="option in options"
:key="option.value"
:active="value == option.value"
@click="onOptionClicked(option)"
>{{ option.title }} <i v-if="option.iconClass" :class="option.iconClass"></i></b-dropdown-item>
</b-dropdown>
</template>
<script>
export default {
name: 'Select',
props: ['options', 'value'],
methods: {
onOptionClicked(option) {
this.$emit('input', option.value)
}
},
computed: {
selected() {
if (this.options) {
return this.options.find((option) => option.value == this.value)
}
return null
},
selected_title() {
let cur = this.selected
return cur.selected_title || cur.title
}
}
}
</script>
<style lang="sass" scoped>
@use "~main/theme"
// bootstrap-select has this default
$tsd-dropdown-with: 220px
::v-deep .tsd-dropdown-menu
width: $tsd-dropdown-with
::v-deep .tsd-dropdown-toggle.btn-light
text-align: left
width: $tsd-dropdown-with
color: white
background-color: rgb(var(--color-primary))
border-radius: 0px
border: none
box-shadow: none
&:hover
color: white
background-color: rgb(var(--color-primary))
&[aria-expanded="true"], &:focus
color: white !important
background-color: rgb(var(--color-primary)) !important
// border: none !important
&:after
margin-left: 0px
::v-deep .tsd-dropdown-selected-title
width: 99%
float: left
</style>