Integer and Boolean option

package.json

@@ -18,6 +18,7 @@
     "naive-ui": "^2.39.0",
     "typescript": "^5.5.4",
     "vite": "^5.4.2",
+    "vooks": "^0.2.12",
     "vue": "^3.4.38",
     "vue-tsc": "^2.0.29"
   }

src/BasicConfig.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { computed, ref, watchEffect } from 'vue'
+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 UnknownOption from './option/UnknownOption.vue'
+import { isMobile } from './util'
+
+const props = defineProps<{
+  path: string
+  config: Config
+}>()
+
+const labelPlacement = computed(() => isMobile.value ? 'top' : 'left')
+
+function toComponent(type: string) {
+  switch (type) {
+    case 'Integer':
+      return IntegerOption
+    case 'Boolean':
+      return BooleanOption
+    default:
+      return UnknownOption
+  }
+}
+
+function extractValue(reset: boolean) {
+  const value: { [key: string]: any } = {}
+  if ('Children' in props.config) {
+    for (const child of props.config.Children) {
+      value[child.Option] = reset ? child.DefaultValue : child.Value
+    }
+  }
+  return value
+}
+
+const form = ref<{ [key: string]: any }>({})
+
+watchEffect(() => {
+  form.value = extractValue(false)
+})
+
+function reset() {
+  form.value = extractValue(true)
+}
+
+function get() {
+  return form.value
+}
+
+defineExpose({
+  reset,
+  get,
+})
+</script>
+
+<template>
+  <NAlert v-if="'ERROR' in config" title="Error" type="error">
+    {{ config.ERROR }}
+  </NAlert>
+  <NForm
+    v-else
+    :model="form"
+    :label-placement="labelPlacement"
+    label-width="200px"
+  >
+    <NFormItem
+      v-for="child in config.Children"
+      :key="`${path}/${child.Option}`"
+      :label="child.Description"
+    >
+      <component
+        :is="toComponent(child.Type)"
+        :config="child"
+        :value="form[child.Option]"
+        :on-update="(v) => { form[child.Option] = v }"
+      />
+    </NFormItem>
+  </NForm>
+</template>

src/InputMethodConfig.vue

@@ -4,6 +4,7 @@ import type { MenuOption } from 'naive-ui'
 import { NButton, NCheckbox, NCheckboxGroup, NFlex, NLayout, NLayoutFooter, NLayoutSider, NMenu } from 'naive-ui'
 import MinusButton from './MinusButton.vue'
 import PlusButton from './PlusButton.vue'
+import BasicConfig from './BasicConfig.vue'
 
 const languageName = new Intl.DisplayNames(navigator.language, { type: 'language' })
 </script>
@@ -15,9 +16,13 @@ const props = defineProps<{
     displayName: string
     name: string
   }[]
+  onClose: () => void
 }>()
 
 const selectedInputMethod = ref(props.inputMethod)
+const uri = computed(() => `fcitx://config/inputmethod/${selectedInputMethod.value}`)
+
+const config = computed(() => window.fcitx.getConfig(uri.value))
 
 const options = computed(() =>
   props.inputMethods.map(({ displayName, name }) => ({
@@ -128,6 +133,17 @@ const filteredLanguageOptions = computed(() => {
   }
   return languageOptions.value
 })
+
+const basicConfig = ref()
+
+function apply() {
+  window.fcitx.setConfig(uri.value, basicConfig.value.get())
+}
+
+function confirm() {
+  apply()
+  props.onClose()
+}
 </script>
 
 <template>
@@ -182,8 +198,11 @@ const filteredLanguageOptions = computed(() => {
         >
           Select a language from the left list
         </div>
-        <NLayout v-else position="absolute" style="bottom: 50px; padding: 16px 0 16px 16px">
-          <NCheckboxGroup v-model:value="imsToAdd">
+        <NLayout v-else position="absolute" style="bottom: 50px">
+          <NCheckboxGroup
+            v-model:value="imsToAdd"
+            style="margin: 16px"
+          >
             <NFlex vertical>
               <NCheckbox
                 v-for="im of inputMethodsForLanguage"
@@ -196,8 +215,7 @@ const filteredLanguageOptions = computed(() => {
         </NLayout>
         <NLayoutFooter position="absolute">
           <NFlex
-            justify="end"
-            style="padding: 8px"
+            style="padding: 8px; justify-content: space-between"
           >
             <NButton secondary @click="adding = false">
               Cancel
@@ -213,9 +231,51 @@ const filteredLanguageOptions = computed(() => {
           </NFlex>
         </NLayoutFooter>
       </template>
-      <div v-else>
-        {{ selectedInputMethod }}
-      </div>
+      <template v-else>
+        <NLayout position="absolute" style="bottom: 50px">
+          <BasicConfig
+            ref="basicConfig"
+            :path="selectedInputMethod"
+            :config="config"
+            style="margin: 16px"
+          />
+        </NLayout>
+        <NLayoutFooter position="absolute">
+          <NFlex
+            style="padding: 8px; justify-content: space-between"
+          >
+            <NFlex>
+              <NButton
+                secondary
+                @click="basicConfig.reset()"
+              >
+                Reset to default
+              </NButton>
+              <NButton
+                secondary
+                @click="onClose()"
+              >
+                Cancel
+              </NButton>
+            </NFlex>
+            <NFlex>
+              <NButton
+                secondary
+                @click="apply()"
+              >
+                Apply
+              </NButton>
+              <NButton
+                secondary
+                type="info"
+                @click="confirm()"
+              >
+                OK
+              </NButton>
+            </NFlex>
+          </NFlex>
+        </NLayoutFooter>
+      </template>
     </NLayout>
   </NLayout>
 </template>

src/option/BooleanOption.vue

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

src/option/IntegerOption.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { NInputNumber } from 'naive-ui'
+
+defineProps<{
+  config: {
+    IntMax?: string
+    IntMin?: string
+  }
+  value: string
+  onUpdate: (value: string) => void
+}>()
+</script>
+
+<template>
+  <NInputNumber
+    :value="Number(value)"
+    :precision="0"
+    :min="config.IntMin && Number(config.IntMin)"
+    :max="config.IntMax && Number(config.IntMax)"
+    clearable
+    @update:value="(v) => onUpdate(String(v))"
+  />
+</template>

src/option/UnknownOption.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineProps<{
+  config: any
+}>()
+</script>
+
+<template>
+  <div>{{ config }}</div>
+</template>

src/util.ts

@@ -0,0 +1,5 @@
+import { computed } from 'vue'
+import { useBreakpoint } from 'vooks'
+
+const breakpoint = useBreakpoint()
+export const isMobile = computed(() => breakpoint.value === 'xs' || breakpoint.value === 's')

vite.config.ts

@@ -13,6 +13,7 @@ export default defineConfig({
       external: [
         'vue',
         'naive-ui',
+        'vooks',
       ],
     },
   },