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
|
<template>
<div class="setting">
<translate tag="label" for="badge-icon" say="SettingsBadgeIcon"/>
<select-field id="badge-icon" :options="options" v-model="model"/>
</div>
</template>
<script>
import SelectField from '@vue/Components/Form/SelectField';
import Translate from '@vue/Components/Translate';
export default {
components: {Translate, SelectField},
props: ['value'],
data() {
return {
model: this.mapValue(this.value)
};
},
computed: {
options() {
return {
auto : 'BadgeIconAuto',
light : 'BadgeIconLight',
medium : 'BadgeIconMedium',
dark : 'BadgeIconDark',
'new-light': 'BadgeIconNewLight',
'new' : 'BadgeIconNewMedium',
'new-dark' : 'BadgeIconNewDark'
};
}
},
methods: {
mapValue(value) {
if(!value) return 'auto';
if(value === 'passwords') return 'medium';
return value.substr(10);
},
mapModel(value) {
if(value === 'auto') return null;
if(value === 'medium') return 'passwords';
return `passwords-${value}`;
}
},
watch: {
value(value) {
this.model = this.mapValue(value);
},
model(value) {
this.$emit('input', this.mapModel(value));
}
}
};
</script>
|