feat(settings): add setting type inference

Author: Sarmerer

src/modules/mindmap/components/modals/Settings/Setting.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="setting">
-    <BaseSelect
-      :value="setting.value"
-      :options="setting.options"
-      :reduce="(s) => s.value"
-      :label="(s) => s.label"
-      @input="change" />
+    <component :is="component" :setting="setting" @change="change" />
 
     <label class="setting__label" v-text="setting.label"></label>
   </div>
@@ -14,6 +9,9 @@
 <script>
 import { Mindmap } from '../../../types/mindmap'
 
+import Toggle from './Types/Toggle.vue'
+import Select from './Types/Select.vue'
+
 export default {
   props: {
     setting: {
@@ -22,6 +20,25 @@ export default {
     },
   },
 
+  components: {
+    Toggle,
+    Select,
+  },
+
+  computed: {
+    component() {
+      if (typeof this.setting.value === 'boolean') {
+        return Toggle
+      }
+
+      if (Array.isArray(this.setting.options)) {
+        return Select
+      }
+
+      return null
+    },
+  },
+
   methods: {
     change(value) {
       this.setting.set(value)
@@ -36,7 +53,6 @@ export default {
   justify-content: space-between;
   align-items: center;
   gap: 8px;
-  width: 100%;
 }
 
 .setting__label {

src/modules/mindmap/components/modals/Settings/Types/Select.vue

@@ -0,0 +1,21 @@
+<template>
+  <BaseSelect
+    :value="setting.value"
+    :options="setting.options"
+    :reduce="(s) => s.value"
+    :label="(s) => s.label"
+    @input="$emit('change', $event)" />
+</template>
+
+<script>
+import Setting from '../../../../types/setting'
+
+export default {
+  props: {
+    setting: {
+      type: Setting,
+      required: true,
+    },
+  },
+}
+</script>

src/modules/mindmap/components/modals/Settings/Types/Toggle.vue

@@ -0,0 +1,20 @@
+<template>
+  <BaseToggle
+    :value="setting.value"
+    :description="setting.description"
+    :disabled="setting.disabled"
+    @input="$emit('change', $event)" />
+</template>
+
+<script>
+import Setting from '../../../../types/setting'
+
+export default {
+  props: {
+    setting: {
+      type: Setting,
+      required: true,
+    },
+  },
+}
+</script>

src/modules/mindmap/components/modals/Settings/index.vue

@@ -49,13 +49,13 @@ export default {
 .settings {
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
+  justify-content: stretch;
+  gap: 16px;
   min-width: 250px;
 }
 
 .settings__title {
-  margin: 0 0 15px 0;
+  margin: 0 0 16px 0;
   font-weight: bold;
   font-size: 20px;
 }

src/modules/mindmap/types/setting.js

@@ -10,7 +10,7 @@ import { Mindmap } from './mindmap'
  * @property {string} label
  * @property {any} value
  * @property {string[]} [options]
- * @property {SettingRunner} changed
+ * @property {SettingRunner} [changed]
  */
 
 export default class Setting {
@@ -19,9 +19,9 @@ export default class Setting {
   constructor(mindmap, settingLike) {
     this.mindmap = mindmap
 
-    this.id = settingLike.id || ''
-    this.label = settingLike.label || ''
-    this.value = settingLike.value || null
+    this.id = settingLike.id
+    this.label = settingLike.label
+    this.value = settingLike.value
     this.options = settingLike.options || []
 
     this.#change = settingLike.changed || null

src/modules/mindmap/types/settings-manager.js

@@ -26,19 +26,24 @@ export default class SettingsManager {
 
     const setting = new Setting(this.mindmap, settingsLike)
     this.settings[setting.id] = setting
-    setting.changed()
   }
 
   get(key) {
     const setting = this.settings[key]
-    if (!setting) return
+    if (!setting) {
+      console.warn('trying to get unknown setting', key)
+      return null
+    }
 
     return setting.value
   }
 
   set(key, value) {
     const setting = this.settings[key]
-    if (!setting) return
+    if (!setting) {
+      console.warn('trying to set unknown setting', key)
+      return
+    }
 
     setting.value = value
     setting.changed()