EnumOption

Author: eagleoflqj

src/BasicConfig.vue

@@ -4,6 +4,7 @@ import { NAlert, NForm, NFormItem } from 'naive-ui'
 import type { Config } from 'fcitx5-js'
 import IntegerOption from './option/IntegerOption.vue'
 import BooleanOption from './option/BooleanOption.vue'
+import EnumOption from './option/EnumOption.vue'
 import UnknownOption from './option/UnknownOption.vue'
 import { isMobile } from './util'
 
@@ -20,6 +21,8 @@ function toComponent(type: string) {
       return IntegerOption
     case 'Boolean':
       return BooleanOption
+    case 'Enum':
+      return EnumOption
     default:
       return UnknownOption
   }

src/option/EnumOption.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { NSelect } from 'naive-ui'
+
+const props = defineProps<{
+  config: {
+    Enum: { [key: string]: string }
+    EnumI18n: { [key: string]: string }
+  }
+  value: string
+  onUpdate: (value: string) => void
+}>()
+
+const options = computed(() => Object.entries(props.config.Enum).map(([key, value]) => ({
+  label: props.config.EnumI18n[key],
+  value,
+})))
+</script>
+
+<template>
+  <NSelect
+    :value="value"
+    :options="options"
+    @update:value="v => onUpdate(v)"
+  />
+</template>