Merge pull request #120 from JsSucks/settings
Change dropdown/radio structure
This commit is contained in:
commit
0eddaf86eb
|
@ -191,7 +191,7 @@ export default class ThemeManager extends ContentManager {
|
|||
}
|
||||
|
||||
if (type === 'dropdown' || type === 'radio') {
|
||||
return `$${name}: ${setting.options.find(opt => opt.value === value).text};`;
|
||||
return `$${name}: ${setting.options.find(opt => opt.id === value).value};`;
|
||||
}
|
||||
|
||||
if (typeof value === 'boolean' || typeof value === 'number') {
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
</span>
|
||||
</div>
|
||||
<div class="bd-dropdown-options bd-flex bd-flex-col" ref="options" v-if="active">
|
||||
<div class="bd-dropdown-option" v-for="option in setting.options" :class="{'bd-dropdown-option-selected': setting.value === option.value}" @click="selectOption(option)">{{option.text}}</div>
|
||||
<div class="bd-dropdown-option" v-for="option in setting.options" :class="{'bd-dropdown-option-selected': setting.value === option.id}" @click="selectOption(option)">{{option.text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -37,13 +37,13 @@
|
|||
},
|
||||
methods: {
|
||||
getOptionText(value) {
|
||||
let matching = this.setting.options.filter(opt => opt.value == value);
|
||||
let matching = this.setting.options.filter(opt => opt.id === value);
|
||||
if (matching.length == 0) return "";
|
||||
else return matching[0].text;
|
||||
},
|
||||
selectOption(option) {
|
||||
this.active = false;
|
||||
this.change(this.setting.id, option.value);
|
||||
this.change(this.setting.id, option.id);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="bd-form-radio-group">
|
||||
<label class="bd-radio" v-for="option in setting.options" :class="{'bd-radio-selected': setting.value === option.value}" @click="selectOption(option)">
|
||||
<label class="bd-radio" v-for="option in setting.options" :class="{'bd-radio-selected': setting.value === option.id}" @click="selectOption(option)">
|
||||
<div class="bd-radio-control-wrap">
|
||||
<svg class="bd-radio-control" name="Checkmark" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><polyline stroke="#3e82e5" stroke-width="2" points="3.5 9.5 7 13 15 5"></polyline></g></svg>
|
||||
</div>
|
||||
|
@ -30,7 +30,7 @@
|
|||
props: ['setting', 'change'],
|
||||
methods: {
|
||||
selectOption(option) {
|
||||
this.change(this.setting.id, option.value);
|
||||
this.change(this.setting.id, option.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -33,11 +33,11 @@
|
|||
"text": "Dropdown Test Setting",
|
||||
"hint": "Dropdown Test Setting Hint",
|
||||
"options": [
|
||||
{"value": "opt1", "text": "Option 1"},
|
||||
{"value": "opt2", "text": "Option 2"},
|
||||
{"value": "opt3", "text": "Option 3"},
|
||||
{"value": "opt4", "text": "Option 4"},
|
||||
{"value": "opt5", "text": "Option 5"}
|
||||
{"id": "opt1", "value": "opt1", "text": "Option 1"},
|
||||
{"id": "opt2", "value": "opt2", "text": "Option 2"},
|
||||
{"id": "opt3", "value": "opt3", "text": "Option 3"},
|
||||
{"id": "opt4", "value": "opt4", "text": "Option 4"},
|
||||
{"id": "opt5", "value": "opt5", "text": "Option 5"}
|
||||
]
|
||||
},
|
||||
{
|
||||
|
@ -47,11 +47,11 @@
|
|||
"text": "Radio Test Setting",
|
||||
"hint": "Radio Test Setting Hint",
|
||||
"options": [
|
||||
{"value": "opt1", "text": "Option 1"},
|
||||
{"value": "opt2", "text": "Option 2"},
|
||||
{"value": "opt3", "text": "Option 3"},
|
||||
{"value": "opt4", "text": "Option 4"},
|
||||
{"value": "opt5", "text": "Option 5"}
|
||||
{"id": "opt1", "value": "opt1", "text": "Option 1"},
|
||||
{"id": "opt2", "value": "opt2", "text": "Option 2"},
|
||||
{"id": "opt3", "value": "opt3", "text": "Option 3"},
|
||||
{"id": "opt4", "value": "opt4", "text": "Option 4"},
|
||||
{"id": "opt5", "value": "opt5", "text": "Option 5"}
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
@ -43,28 +43,28 @@
|
|||
"id": "avatarRadius",
|
||||
"type": "dropdown",
|
||||
"value": "opt1",
|
||||
"text": "Dropdown Test Setting",
|
||||
"text": "Avatar border radius",
|
||||
"hint": "Dropdown Test Setting Hint",
|
||||
"options": [
|
||||
{
|
||||
"value": "opt1",
|
||||
"text": "8px"
|
||||
"id": "opt1",
|
||||
"text": "small",
|
||||
"value": "8px"
|
||||
},
|
||||
{
|
||||
"value": "opt2",
|
||||
"text": "12px"
|
||||
"id": "opt2",
|
||||
"text": "medium",
|
||||
"value": "12px"
|
||||
},
|
||||
{
|
||||
"value": "opt3",
|
||||
"text": "16px"
|
||||
"id": "opt3",
|
||||
"text": "high",
|
||||
"value": "16px"
|
||||
},
|
||||
{
|
||||
"value": "opt4",
|
||||
"text": "20px"
|
||||
},
|
||||
{
|
||||
"value": "opt5",
|
||||
"text": "30px"
|
||||
"id": "opt4",
|
||||
"text": "ultra",
|
||||
"value": "20px"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -76,24 +76,29 @@
|
|||
"hint": "Radio Test Setting Hint",
|
||||
"options": [
|
||||
{
|
||||
"value": "opt1",
|
||||
"text": "red"
|
||||
"id": "opt1",
|
||||
"text": "red",
|
||||
"value": "red"
|
||||
},
|
||||
{
|
||||
"value": "opt2",
|
||||
"text": "green"
|
||||
"id": "opt2",
|
||||
"text": "green",
|
||||
"value": "green"
|
||||
},
|
||||
{
|
||||
"value": "opt3",
|
||||
"text": "blue"
|
||||
"id": "opt3",
|
||||
"text": "blue",
|
||||
"value": "blue"
|
||||
},
|
||||
{
|
||||
"value": "opt4",
|
||||
"text": "orange"
|
||||
"id": "opt4",
|
||||
"text": "orange",
|
||||
"value": "orange"
|
||||
},
|
||||
{
|
||||
"value": "opt5",
|
||||
"text": "white"
|
||||
"id": "opt5",
|
||||
"text": "white",
|
||||
"value": "white"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue