From 0ecf11417f8c97a6e8531f906939e8169c38c9a0 Mon Sep 17 00:00:00 2001
From: Qijia Liu <liumeo@pku.edu.cn>
Date: Fri, 6 Sep 2024 13:20:23 +0800
Subject: [PATCH] initial ExternalOption

---
 src/BasicConfig.vue           | 19 +++++++----
 src/FooterButtons.vue         | 45 +++++++++++++++++++++++++
 src/GearButton.vue            | 14 ++++++++
 src/GearIcon.vue              |  9 +++++
 src/InputMethodConfig.vue     | 60 ++++-----------------------------
 src/index.ts                  |  1 +
 src/option/EnumOption.vue     |  4 +--
 src/option/ExternalOption.vue | 63 +++++++++++++++++++++++++++++++++++
 src/option/GroupOption.vue    |  4 ---
 src/util.ts                   | 15 +++++++++
 10 files changed, 168 insertions(+), 66 deletions(-)
 create mode 100644 src/FooterButtons.vue
 create mode 100644 src/GearButton.vue
 create mode 100644 src/GearIcon.vue
 create mode 100644 src/option/ExternalOption.vue

diff --git a/src/BasicConfig.vue b/src/BasicConfig.vue
index 49ba138..a87ab4e 100644
--- a/src/BasicConfig.vue
+++ b/src/BasicConfig.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { NAlert, NForm, NFormItem } from 'naive-ui'
+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'
@@ -8,6 +8,7 @@ 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'
@@ -34,6 +35,8 @@ function toComponent(child: { Type: string, Children: any[] | null }) {
       return KeyOption
     case 'String':
       return StringOption
+    case 'External':
+      return ExternalOption
     default: {
       if (child.Type.startsWith('List|')) {
         return ListOption
@@ -67,12 +70,14 @@ function toComponent(child: { Type: string, Children: any[] | null }) {
           :text="child.Tooltip"
         />
       </template>
-      <component
-        :is="toComponent(child)"
-        :config="child"
-        :value="value[child.Option]"
-        @update="v => onUpdate({ ...value, [child.Option]: v })"
-      />
+      <NDialogProvider>
+        <component
+          :is="toComponent(child)"
+          :config="child"
+          :value="value[child.Option]"
+          @update="v => onUpdate({ ...value, [child.Option]: v })"
+        />
+      </NDialogProvider>
     </NFormItem>
   </NForm>
 </template>
diff --git a/src/FooterButtons.vue b/src/FooterButtons.vue
new file mode 100644
index 0000000..2280ea1
--- /dev/null
+++ b/src/FooterButtons.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { NButton, NFlex } from 'naive-ui'
+
+defineProps<{
+  reset: () => void
+  close: () => void
+  apply: () => void
+}>()
+</script>
+
+<template>
+  <NFlex
+    style="padding: 8px; justify-content: space-between"
+  >
+    <NFlex>
+      <NButton
+        secondary
+        @click="reset"
+      >
+        Reset to default
+      </NButton>
+      <NButton
+        secondary
+        @click="close"
+      >
+        Cancel
+      </NButton>
+    </NFlex>
+    <NFlex>
+      <NButton
+        secondary
+        @click="apply"
+      >
+        Apply
+      </NButton>
+      <NButton
+        secondary
+        type="info"
+        @click="apply(); close()"
+      >
+        OK
+      </NButton>
+    </NFlex>
+  </NFlex>
+</template>
diff --git a/src/GearButton.vue b/src/GearButton.vue
new file mode 100644
index 0000000..c600606
--- /dev/null
+++ b/src/GearButton.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { NButton, NIcon } from 'naive-ui'
+import GearIcon from './GearIcon.vue'
+</script>
+
+<template>
+  <NButton secondary>
+    <template #icon>
+      <NIcon>
+        <GearIcon />
+      </NIcon>
+    </template>
+  </NButton>
+</template>
diff --git a/src/GearIcon.vue b/src/GearIcon.vue
new file mode 100644
index 0000000..179058e
--- /dev/null
+++ b/src/GearIcon.vue
@@ -0,0 +1,9 @@
+<script lang="ts">
+export default {
+  name: 'MdiCog',
+}
+</script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5a3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97s-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1s.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64z" /></svg>
+</template>
diff --git a/src/InputMethodConfig.vue b/src/InputMethodConfig.vue
index 7e06d18..3bec2fe 100644
--- a/src/InputMethodConfig.vue
+++ b/src/InputMethodConfig.vue
@@ -1,11 +1,12 @@
 <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'
 import BasicConfig from './BasicConfig.vue'
+import FooterButtons from './FooterButtons.vue'
+import { extractValue } from './util'
 
 const languageName = new Intl.DisplayNames(navigator.language, { type: 'language' })
 </script>
@@ -137,20 +138,6 @@ const filteredLanguageOptions = computed(() => {
 
 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)
 })
@@ -162,11 +149,6 @@ function reset() {
 function apply() {
   window.fcitx.setConfig(uri.value, form.value)
 }
-
-function confirm() {
-  apply()
-  props.onClose()
-}
 </script>
 
 <template>
@@ -265,39 +247,11 @@ function confirm() {
           />
         </NLayout>
         <NLayoutFooter position="absolute">
-          <NFlex
-            style="padding: 8px; justify-content: space-between"
-          >
-            <NFlex>
-              <NButton
-                secondary
-                @click="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>
+          <FooterButtons
+            :reset="reset"
+            :apply="apply"
+            :close="onClose"
+          />
         </NLayoutFooter>
       </template>
     </NLayout>
diff --git a/src/index.ts b/src/index.ts
index a6066c7..137b645 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1 +1,2 @@
 export { default as InputMethodConfig } from './InputMethodConfig.vue'
+export { default as GearButton } from './GearButton.vue'
diff --git a/src/option/EnumOption.vue b/src/option/EnumOption.vue
index abc26c1..35db0c2 100644
--- a/src/option/EnumOption.vue
+++ b/src/option/EnumOption.vue
@@ -5,14 +5,14 @@ import { NSelect } from 'naive-ui'
 const props = defineProps<{
   config: {
     Enum: { [key: string]: string }
-    EnumI18n: { [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],
+  label: (props.config.EnumI18n || props.config.Enum)[key],
   value,
 })))
 </script>
diff --git a/src/option/ExternalOption.vue b/src/option/ExternalOption.vue
new file mode 100644
index 0000000..f161d5d
--- /dev/null
+++ b/src/option/ExternalOption.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { h, ref } from 'vue'
+import { useDialog } from 'naive-ui'
+import GearButton from '../GearButton.vue'
+import BasicConfig from '../BasicConfig.vue'
+import FooterButtons from '../FooterButtons.vue'
+import { extractValue } from '../util'
+
+const props = defineProps<{
+  config: {
+    Description: string
+    External: string
+    Option: string
+    LaunchSubConfig?: string
+  }
+}>()
+
+const dialog = useDialog()
+const form = ref({})
+
+function click() {
+  switch (props.config.Option) {
+    default:
+      if (props.config.LaunchSubConfig === 'True') {
+        const config = window.fcitx.getConfig(props.config.External)
+        form.value = extractValue(config, false)
+        const instance = dialog.info({
+          title: props.config.Description,
+          content: () => h(BasicConfig, {
+            path: props.config.Option,
+            config,
+            value: form.value,
+            onUpdate(v) {
+              form.value = v
+            },
+          }),
+          action: () => h(FooterButtons, {
+            reset() {
+              form.value = extractValue(config, true)
+            },
+            close() {
+              instance.destroy()
+            },
+            apply() {
+              window.fcitx.setConfig(props.config.External, form.value)
+            },
+          }),
+        })
+      }
+      else {
+        dialog.error({
+          title: 'Error',
+          content: `Unknown External Option: ${props.config.Option}`,
+          positiveText: 'OK',
+        })
+      }
+  }
+}
+</script>
+
+<template>
+  <GearButton @click="click" />
+</template>
diff --git a/src/option/GroupOption.vue b/src/option/GroupOption.vue
index aca18ad..f8ec8e6 100644
--- a/src/option/GroupOption.vue
+++ b/src/option/GroupOption.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { NCard } from 'naive-ui'
 import BasicConfig from '../BasicConfig.vue'
 
@@ -10,14 +9,11 @@ defineProps<{
   value: any
   onUpdate: (value: any) => void
 }>()
-
-const basicConfig = ref()
 </script>
 
 <template>
   <NCard>
     <BasicConfig
-      ref="basicConfig"
       path=""
       :config="config"
       :value="value"
diff --git a/src/util.ts b/src/util.ts
index e298bab..8c22277 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -1,5 +1,20 @@
 import { computed } from 'vue'
 import { useBreakpoint } from 'vooks'
+import type { Config } from 'fcitx5-js'
 
 const breakpoint = useBreakpoint()
 export const isMobile = computed(() => breakpoint.value === 'xs' || breakpoint.value === 's')
+
+export 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
+}