EntryOption; unify toComponent

Author: eagleoflqj

src/BasicConfig.vue

@@ -3,16 +3,7 @@ import { computed } from 'vue'
 import { NAlert, NDialogProvider, NForm, NFormItem } from 'naive-ui'
 import type { Config } from 'fcitx5-js'
 import TooltipButton from './TooltipButton.vue'
-import IntegerOption from './option/IntegerOption.vue'
-import BooleanOption from './option/BooleanOption.vue'
-import EnumOption from './option/EnumOption.vue'
-import KeyOption from './option/KeyOption.vue'
-import StringOption from './option/StringOption.vue'
-import ExternalOption from './option/ExternalOption.vue'
-import ListOption from './option/ListOption.vue'
-import GroupOption from './option/GroupOption.vue'
-import UnknownOption from './option/UnknownOption.vue'
-import { isMobile } from './util'
+import { isMobile, toComponent } from './util'
 
 defineProps<{
   path: string
@@ -22,32 +13,6 @@ defineProps<{
 }>()
 
 const labelPlacement = computed(() => isMobile.value ? 'top' : 'left')
-
-function toComponent(child: { Type: string, Children: any[] | null }) {
-  switch (child.Type) {
-    case 'Integer':
-      return IntegerOption
-    case 'Boolean':
-      return BooleanOption
-    case 'Enum':
-      return EnumOption
-    case 'Key':
-      return KeyOption
-    case 'String':
-      return StringOption
-    case 'External':
-      return ExternalOption
-    default: {
-      if (child.Type.startsWith('List|')) {
-        return ListOption
-      }
-      if (child.Children) {
-        return GroupOption
-      }
-      return UnknownOption
-    }
-  }
-}
 </script>
 
 <template>

src/option/EntryOption.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { NFlex } from 'naive-ui'
+import { toComponent } from '../util'
+
+defineProps<{
+  config: {
+    Children: {
+      Description: string
+      Option: string
+      Type: string
+    }[]
+  }
+  value: any
+  onUpdate: (value: any) => void
+}>()
+</script>
+
+<template>
+  <NFlex>
+    <component
+      :is="toComponent(child)"
+      v-for="child of config.Children"
+      :key="child.Option"
+      :placeholder="child.Description"
+      :config="child"
+      :value="value[child.Option]"
+      style="max-width: 200px"
+      @update="v => { console.log(v); onUpdate({ ...value, [child.Option]: v }) }"
+    />
+  </NFlex>
+</template>

src/option/ExternalOption.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { h, ref } from 'vue'
-import { useDialog } from 'naive-ui'
+import { NScrollbar, useDialog } from 'naive-ui'
 import GearButton from '../GearButton.vue'
 import BasicConfig from '../BasicConfig.vue'
 import FooterButtons from '../FooterButtons.vue'
@@ -26,14 +26,18 @@ function click() {
         form.value = extractValue(config, false)
         const instance = dialog.info({
           title: props.config.Description,
-          content: () => h(BasicConfig, {
+          content: () => h(NScrollbar, {
+            style: {
+              'max-height': 'calc(100vh - 200px)',
+            },
+          }, () => h(BasicConfig, {
             path: props.config.Option,
             config,
             value: form.value,
             onUpdate(v) {
               form.value = v
             },
-          }),
+          })),
           action: () => h(FooterButtons, {
             reset() {
               form.value = extractValue(config, true)
@@ -45,6 +49,12 @@ function click() {
               window.fcitx.setConfig(props.config.External, form.value)
             },
           }),
+          actionStyle: {
+            display: 'block', // separate 4 buttons
+          },
+          style: {
+            width: 'auto', // KeyOption overflows on Desktop
+          },
         })
       }
       else {

src/option/ListOption.vue

@@ -3,9 +3,7 @@ import { NButtonGroup, NList, NListItem } from 'naive-ui'
 import UpButton from '../UpButton.vue'
 import MinusButton from '../MinusButton.vue'
 import PlusButton from '../PlusButton.vue'
-import KeyOption from './KeyOption.vue'
-import StringOption from './StringOption.vue'
-import UnknownOption from './UnknownOption.vue'
+import { toComponent } from '../util'
 
 const props = defineProps<{
   config: {
@@ -15,17 +13,6 @@ const props = defineProps<{
   onUpdate: (value: { [key: string]: string }) => void
 }>()
 
-function toComponent(type: string) {
-  switch (type) {
-    case 'List|Key':
-      return KeyOption
-    case 'List|String':
-      return StringOption
-    default:
-      return UnknownOption
-  }
-}
-
 function move(index: number) {
   props.onUpdate({ ...props.value, [index - 1]: props.value[index], [index]: props.value[index - 1] })
 }
@@ -63,7 +50,8 @@ function add(index: number) {
       :key="i"
     >
       <component
-        :is="toComponent(config.Type)"
+        :is="toComponent({ Type: config.Type.slice('List|'.length) })"
+        :config="config"
         :value="item"
         @update="v => onUpdate({ ...value, [i]: v })"
       />

src/util.ts

@@ -1,6 +1,16 @@
 import { computed } from 'vue'
 import { useBreakpoint } from 'vooks'
 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 KeyOption from './option/KeyOption.vue'
+import StringOption from './option/StringOption.vue'
+import ExternalOption from './option/ExternalOption.vue'
+import ListOption from './option/ListOption.vue'
+import EntryOption from './option/EntryOption.vue'
+import GroupOption from './option/GroupOption.vue'
+import UnknownOption from './option/UnknownOption.vue'
 
 const breakpoint = useBreakpoint()
 export const isMobile = computed(() => breakpoint.value === 'xs' || breakpoint.value === 's')
@@ -18,3 +28,35 @@ export function extractValue(config: Config, reset: boolean) {
   }
   return value
 }
+
+export function toComponent(child: { Type: string, Children?: any[] | null } & { [key: string]: string }) {
+  switch (child.Type) {
+    case 'Integer':
+      return IntegerOption
+    case 'Boolean':
+      return BooleanOption
+    case 'Enum':
+      return EnumOption
+    case 'Key':
+      return KeyOption
+    case 'String':
+      if (child.IsEnum === 'True') {
+        return EnumOption
+      }
+      return StringOption
+    case 'External':
+      return ExternalOption
+    default: {
+      if (child.Type.startsWith('List|')) {
+        return ListOption
+      }
+      if (child.Type.startsWith('Entries')) {
+        return EntryOption
+      }
+      if (child.Children) {
+        return GroupOption
+      }
+      return UnknownOption
+    }
+  }
+}