Add multi option radios

client/src/structs/settings/types/radio.js

@@ -52,6 +52,28 @@ export default class RadioSetting extends Setting {
         this.args.value = selected_option.id;
     }
 
+    /**
+     * Whether the user should be allowed to choose multiple options.
+     */
+    get multi() {
+        return this.args.multi;
+    }
+
+    /**
+     * The minimum number of options the user may select if a multi select group.
+     * This only restricts deselecting options when there is less or equal options selected than this, and does not ensure that this number of options are actually selected.
+     */
+    get min() {
+        return this.multi ? this.args.min || 0 : 1;
+    }
+
+    /**
+     * The maximum number of options the user may select if a multi select group.
+     */
+    get max() {
+        return this.multi ? this.args.max || 0 : 1;
+    }
+
     /**
      * Returns a representation of this setting's value in SCSS.
      * @return {String}

client/src/ui/components/bd/setting/Radio.vue

@@ -16,7 +16,7 @@
             </div>
             <div class="bd-hint">{{setting.hint}}</div>
         </div>
-        <RadioGroup :options="setting.options" v-model="setting.value" :disabled="setting.disabled" />
+        <RadioGroup :options="setting.options" v-model="setting.value" :multi="setting.multi" :min="setting.min" :max="setting.max" :disabled="setting.disabled" />
     </div>
 </template>
 

client/src/ui/components/common/RadioGroup.vue

@@ -10,7 +10,7 @@
 
 <template>
     <div class="bd-radio-group" :class="{'bd-disabled': disabled}">
-        <label class="bd-radio" v-for="option in options" :class="{'bd-radio-selected': value === option.value}" @click="$emit('input', option.value)">
+        <label class="bd-radio" v-for="option in options" :class="{'bd-radio-selected': isSelected(option.value)}" @click="toggleOption(option.value)">
             <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>
@@ -22,7 +22,32 @@
 </template>
 
 <script>
+    import { Utils } from 'common';
+
     export default {
-        props: ['options', 'value', 'disabled']
+        props: ['options', 'value', 'multi', 'min', 'max', 'disabled'],
+        methods: {
+            toggleOption(value) {
+                if (!this.multi)
+                    return this.$emit('input', value);
+
+                const values = this.value instanceof Array ? this.value : [this.value];
+
+                if (values.find(v => Utils.compare(v, value))) {
+                    if (this.min && (values.length - 1) <= this.min) return;
+                    this.$emit('input', values.filter(v => !Utils.compare(v, value)));
+                } else {
+                    if (this.max && values.length > this.max) return;
+                    this.$emit('input', values.concat([value]));
+                }
+            },
+            isSelected(value) {
+                if (!this.multi)
+                    return Utils.compare(this.value, value);
+
+                const values = this.value instanceof Array ? this.value : [this.value];
+                return values.find(v => Utils.compare(v, value));
+            }
+        }
     }
 </script>