Add multi choice list support and fix single choice list

single choice list now
- uses raw radio input instead of the one from ODS because it's broken
- implements default value selection if no value is set

ui/components/settings/SettingBoolean.vue

@@ -8,6 +8,10 @@
 export default {
   name: 'SettingBoolean',
   props: {
+    bundle: {
+      type: Object,
+      required: true
+    },
     setting: {
       type: Object,
       required: true

ui/components/settings/SettingMultiChoice.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <oc-button :id="buttonElementId" class="uk-width-expand">
+      <span v-if="selectedOptions !== null && selectedOptions.length > 0">
+        {{ selectedOptionsDisplayValues }}
+      </span>
+      <span v-else>
+        {{ setting.placeholder || $gettext('Please select') }}
+      </span>
+    </oc-button>
+    <oc-drop
+      :drop-id="dropElementId"
+      :toggle="`#${buttonElementId}`"
+      mode="click"
+      :options="{ offset: 0, delayHide: 0, flip: false }"
+      >
+      <ul class="uk-list">
+        <li
+          v-for="(option, index) in setting.multiChoiceValue.options"
+          :key="getOptionElementId(index)"
+        >
+          <label :for="getOptionElementId(index)">
+            <input
+              :id="getOptionElementId(index)"
+              type="checkbox"
+              class="oc-checkbox"
+              :value="option"
+              v-model="selectedOptions"
+              @input="onSelectedOption"
+            />
+            {{ option.displayValue }}
+          </label>
+        </li>
+      </ul>
+    </oc-drop>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SettingMultiChoice',
+  props: {
+    bundle: {
+      type: Object,
+      required: true
+    },
+    setting: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      selectedOptions: null
+    }
+  },
+  computed: {
+    selectedOptionsDisplayValues() {
+      return Array.from(this.selectedOptions).map(option => option.displayValue).join(', ')
+    },
+    dropElementId() {
+      return `multi-choice-drop-${this.bundle.key}-${this.setting.key}`
+    },
+    buttonElementId() {
+      return `multi-choice-toggle-${this.bundle.key}-${this.setting.key}`
+    },
+  },
+  methods: {
+    getOptionElementId(index) {
+      return `${this.bundle.key}-${this.setting.key}-${index}`
+    },
+    onSelectedOption() {
+      // TODO: propagate selection to parent
+      // TODO: show a spinner while the request for saving the value is running!
+    }
+  },
+  mounted() {
+    this.selectedOptions = null
+    // TODO: load the settings value of the authenticated user and set it in `selectedOptions`
+    // if not set, yet, apply defaults from settings bundle definition
+    if (this.selectedOptions === null) {
+      this.selectedOptions = this.setting.multiChoiceValue.options.filter(option => option.default)
+    }
+  }
+}
+</script>

ui/components/settings/SettingNumber.vue

@@ -25,6 +25,10 @@
 export default {
   name: 'SettingNumber',
   props: {
+    bundle: {
+      type: Object,
+      required: true
+    },
     setting: {
       type: Object,
       required: true

ui/components/settings/SettingSingleChoice.vue

@@ -9,15 +9,27 @@
       </span>
     </oc-button>
     <oc-drop
-      close-on-click
       :drop-id="dropElementId"
       :toggle="`#${buttonElementId}`"
       mode="click"
       :options="{ offset: 0, delayHide: 0, flip: false }"
       >
       <ul class="uk-list">
-        <li v-for="(option, index) in setting.singleChoiceValue.options" :key="`${setting.key}-${index}`">
-          <oc-radio :label="option.displayValue" :value="selectedOption" @input="setSelectedOption(option)" />
+        <li
+          v-for="(option, index) in setting.singleChoiceValue.options"
+          :key="getOptionElementId(index)"
+        >
+          <label :for="getOptionElementId(index)">
+            <input
+              :id="getOptionElementId(index)"
+              type="radio"
+              class="oc-radiobutton"
+              v-model="selectedOption"
+              :value="option"
+              @input="onSelectedOption"
+            />
+            {{ option.displayValue }}
+          </label>
         </li>
       </ul>
     </oc-drop>
@@ -28,6 +40,10 @@
 export default {
   name: 'SettingSingleChoice',
   props: {
+    bundle: {
+      type: Object,
+      required: true
+    },
     setting: {
       type: Object,
       required: true
@@ -40,21 +56,31 @@ export default {
   },
   computed: {
     dropElementId() {
-      return `single-choice-drop-${this.setting.key}`
+      return `single-choice-drop-${this.bundle.key}-${this.setting.key}`
     },
     buttonElementId() {
-      return `single-choice-toggle-${this.setting.key}`
+      return `single-choice-toggle-${this.bundle.key}-${this.setting.key}`
     },
   },
   methods: {
-    setSelectedOption(option) {
-      this.selectedOption = option
+    getOptionElementId(index) {
+      return `${this.bundle.key}-${this.setting.key}-${index}`
+    },
+    onSelectedOption() {
       // TODO: propagate selection to parent
       // TODO: show a spinner while the request for saving the value is running!
     }
   },
   mounted() {
-    // TODO: load the settings value of the authenticated user and set it in `selected`
+    this.selectedOption = null
+    // TODO: load the settings value of the authenticated user and set it in `selectedOption`
+    // if not set, yet, apply default from settings bundle definition
+    if (this.selectedOption === null) {
+      const defaults = this.setting.singleChoiceValue.options.filter(option => option.default)
+      if (defaults.length === 1) {
+        this.selectedOption = defaults[0]
+      }
+    }
   }
 }
 </script>

ui/components/settings/SettingString.vue

@@ -23,6 +23,10 @@
 export default {
   name: 'SettingString',
   props: {
+    bundle: {
+      type: Object,
+      required: true
+    },
     setting: {
       type: Object,
       required: true

ui/components/settings/SettingUnknown.vue

@@ -8,6 +8,10 @@
 export default {
   name: 'SettingUnknown',
   props: {
+    bundle: {
+      type: Object,
+      required: true
+    },
     setting: {
       type: Object,
       required: true