String and List option

src/BasicConfig.vue

@@ -2,10 +2,13 @@
 import { computed } from 'vue'
 import { NAlert, 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 ListOption from './option/ListOption.vue'
 import GroupOption from './option/GroupOption.vue'
 import UnknownOption from './option/UnknownOption.vue'
 import { isMobile } from './util'
@@ -29,7 +32,12 @@ function toComponent(child: { Type: string, Children: any[] | null }) {
       return EnumOption
     case 'Key':
       return KeyOption
+    case 'String':
+      return StringOption
     default: {
+      if (child.Type.startsWith('List|')) {
+        return ListOption
+      }
       if (child.Children) {
         return GroupOption
       }
@@ -51,8 +59,14 @@ function toComponent(child: { Type: string, Children: any[] | null }) {
     <NFormItem
       v-for="child in config.Children"
       :key="`${path}/${child.Option}`"
-      :label="child.Description"
     >
+      <template #label>
+        {{ child.Description }}
+        <TooltipButton
+          v-if="child.Tooltip"
+          :text="child.Tooltip"
+        />
+      </template>
       <component
         :is="toComponent(child)"
         :config="child"

src/TooltipButton.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { NButton, NTooltip } from 'naive-ui'
+
+defineProps<{
+  text: string
+}>()
+</script>
+
+<template>
+  <NTooltip trigger="hover">
+    <template #trigger>
+      <NButton
+        secondary
+        circle
+        size="tiny"
+      >
+        ?
+      </NButton>
+    </template>
+    {{ text }}
+  </NTooltip>
+</template>

src/UpButton.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { NButton, NIcon } from 'naive-ui'
+import UpIcon from './UpIcon.vue'
+</script>
+
+<template>
+  <NButton quaternary>
+    <template #icon>
+      <NIcon>
+        <UpIcon />
+      </NIcon>
+    </template>
+  </NButton>
+</template>

src/UpIcon.vue

@@ -0,0 +1,9 @@
+<script lang="ts">
+export default {
+  name: 'IcBaselineArrowUpward',
+}
+</script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8z" /></svg>
+</template>

src/option/ListOption.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+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'
+
+const props = defineProps<{
+  config: {
+    Type: string
+  }
+  value: { [key: string]: string }
+  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] })
+}
+
+function remove(index: number) {
+  const { length } = Object.keys(props.value)
+  const value: { [key: string]: string } = {}
+  for (let i = 0; i < index; ++i) {
+    value[i] = props.value[i]
+  }
+  for (let i = index; i < length - 1; ++i) {
+    value[i] = props.value[i + 1]
+  }
+  props.onUpdate(value)
+}
+
+function add(index: number) {
+  const { length } = Object.keys(props.value)
+  const value: { [key: string]: string } = {}
+  for (let i = 0; i < index; ++i) {
+    value[i] = props.value[i]
+  }
+  value[index] = ''
+  for (let i = index; i < length; ++i) {
+    value[i + 1] = props.value[i]
+  }
+  props.onUpdate(value)
+}
+</script>
+
+<template>
+  <NList style="width: 100%; padding: 0 12px">
+    <NListItem
+      v-for="[i, item] of Object.entries(value)"
+      :key="i"
+    >
+      <component
+        :is="toComponent(config.Type)"
+        :value="item"
+        @update="v => onUpdate({ ...value, [i]: v })"
+      />
+      <template #suffix>
+        <NButtonGroup>
+          <UpButton
+            :disabled="Number(i) === 0"
+            size="small"
+            @click="move(Number(i))"
+          />
+          <MinusButton
+            size="small"
+            @click="remove(Number(i))"
+          />
+          <PlusButton
+            size="small"
+            @click="add(Number(i))"
+          />
+        </NButtonGroup>
+      </template>
+    </NListItem>
+    <NListItem>
+      <div style="width: 100%" />
+      <template #suffix>
+        <PlusButton
+          size="small"
+          @click="add(Object.keys(value).length)"
+        />
+      </template>
+    </NListItem>
+  </NList>
+</template>

src/option/StringOption.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { NInput } from 'naive-ui'
+
+defineProps<{
+  value: string
+  onUpdate: (value: string) => void
+}>()
+</script>
+
+<template>
+  <NInput
+    :value="value"
+    @update:value="onUpdate"
+  />
+</template>