refactor reset; GroupOption

Author: eagleoflqj

src/BasicConfig.vue

@@ -1,61 +1,39 @@
 <script setup lang="ts">
-import { computed, ref, watchEffect } from 'vue'
+import { computed } 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 EnumOption from './option/EnumOption.vue'
+import GroupOption from './option/GroupOption.vue'
 import UnknownOption from './option/UnknownOption.vue'
 import { isMobile } from './util'
 
-const props = defineProps<{
+defineProps<{
   path: string
   config: Config
+  value: any
+  onUpdate: (value: any) => void
 }>()
 
 const labelPlacement = computed(() => isMobile.value ? 'top' : 'left')
 
-function toComponent(type: string) {
-  switch (type) {
+function toComponent(child: { Type: string, Children: any[] | null }) {
+  switch (child.Type) {
     case 'Integer':
       return IntegerOption
     case 'Boolean':
       return BooleanOption
     case 'Enum':
       return EnumOption
-    default:
+    default: {
+      if (child.Children) {
+        return GroupOption
+      }
       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>
@@ -64,7 +42,6 @@ defineExpose({
   </NAlert>
   <NForm
     v-else
-    :model="form"
     :label-placement="labelPlacement"
     label-width="200px"
   >
@@ -74,10 +51,10 @@ defineExpose({
       :label="child.Description"
     >
       <component
-        :is="toComponent(child.Type)"
+        :is="toComponent(child)"
         :config="child"
-        :value="form[child.Option]"
-        :on-update="(v) => { form[child.Option] = v }"
+        :value="value[child.Option]"
+        @update="v => onUpdate({ ...value, [child.Option]: v })"
       />
     </NFormItem>
   </NForm>

src/InputMethodConfig.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { computed, h, ref, watchEffect } from 'vue'
 import type { MenuOption } from 'naive-ui'
+import type { Config } from 'fcitx5-js'
 import { NButton, NCheckbox, NCheckboxGroup, NFlex, NLayout, NLayoutFooter, NLayoutSider, NMenu } from 'naive-ui'
 import MinusButton from './MinusButton.vue'
 import PlusButton from './PlusButton.vue'
@@ -134,10 +135,32 @@ const filteredLanguageOptions = computed(() => {
   return languageOptions.value
 })
 
-const basicConfig = ref()
+const form = ref({})
+
+function extractValue(config: Config, reset: boolean) {
+  const value: { [key: string]: any } = {}
+  if ('Children' in config) {
+    for (const child of config.Children) {
+      value[child.Option] = reset
+        ? (
+            'DefaultValue' in child ? child.DefaultValue : extractValue(child, true)
+          )
+        : child.Value
+    }
+  }
+  return value
+}
+
+watchEffect(() => {
+  form.value = extractValue(config.value, false)
+})
+
+function reset() {
+  form.value = extractValue(config.value, true)
+}
 
 function apply() {
-  window.fcitx.setConfig(uri.value, basicConfig.value.get())
+  window.fcitx.setConfig(uri.value, form.value)
 }
 
 function confirm() {
@@ -234,10 +257,11 @@ function confirm() {
       <template v-else>
         <NLayout position="absolute" style="bottom: 50px">
           <BasicConfig
-            ref="basicConfig"
             :path="selectedInputMethod"
             :config="config"
+            :value="form"
             style="margin: 16px"
+            @update="v => form = v"
           />
         </NLayout>
         <NLayoutFooter position="absolute">
@@ -247,7 +271,7 @@ function confirm() {
             <NFlex>
               <NButton
                 secondary
-                @click="basicConfig.reset()"
+                @click="reset()"
               >
                 Reset to default
               </NButton>

src/option/GroupOption.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NCard } from 'naive-ui'
+import BasicConfig from '../BasicConfig.vue'
+
+defineProps<{
+  config: {
+    Children: any[]
+  }
+  value: any
+  onUpdate: (value: any) => void
+}>()
+
+const basicConfig = ref()
+</script>
+
+<template>
+  <NCard>
+    <BasicConfig
+      ref="basicConfig"
+      path=""
+      :config="config"
+      :value="value"
+      @update="onUpdate"
+    />
+  </NCard>
+</template>