integrate fcitx5-config-vue

.github/workflows/ci.yml

@@ -20,12 +20,14 @@ jobs:
       - name: Install dependencies
         run: |
           wget -P cache https://github.com/fcitx-contrib/fcitx5-js/releases/download/latest/fcitx5-js-0.1.0.tgz
+          wget -P cache https://github.com/fcitx-contrib/fcitx5-config-vue/releases/download/latest/fcitx5-config-vue-0.1.0.tgz
           npm i -g pnpm
           pnpm i
 
       - name: Lint
         run: |
           pnpm run lint
+          pnpm run check
 
       - name: Build
         run: |

package.json

@@ -22,6 +22,7 @@
     "@rollup/plugin-replace": "^5.0.7",
     "@vitejs/plugin-vue": "^5.1.2",
     "eslint": "^9.9.0",
+    "fcitx5-config-vue": "file:cache/fcitx5-config-vue-0.1.0.tgz",
     "fcitx5-js": "file:cache/fcitx5-js-0.1.0.tgz",
     "naive-ui": "^2.39.0",
     "typescript": "^5.5.4",

src/App.vue

@@ -2,6 +2,7 @@
 import {
   NConfigProvider,
   NH1,
+  NModalProvider,
   darkTheme,
   useOsTheme,
 } from 'naive-ui'
@@ -24,7 +25,9 @@ const osThemeRef = useOsTheme()
         <div style="cursor: pointer; text-align: center; margin-top: 16px">
           <NH1>{{ appName }}</NH1>
         </div>
-        <MyContent />
+        <NModalProvider>
+          <MyContent />
+        </NModalProvider>
       </template>
       <template #footer>
         <MyFooter />

src/components/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>

src/components/StatusArea.vue

@@ -1,14 +1,18 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { NSelect, NSpace } from 'naive-ui'
+import { computed, ref } from 'vue'
+import { NButton, NIcon, NModal, NSelect, NSpace } from 'naive-ui'
+import { InputMethodConfig } from 'fcitx5-config-vue'
 import { inputMethod, inputMethods, loading } from '../fcitx'
+import GearIcon from './GearIcon.vue'
 
 const options = computed(() => {
   return inputMethods.value.map(({ displayName, name }) => ({
     label: displayName,
     value: name,
   }))
 })
+
+const showModal = ref(false)
 </script>
 
 <template>
@@ -19,5 +23,22 @@ const options = computed(() => {
       :loading="loading"
       :options="options"
     />
+    <NButton secondary @click="showModal = true">
+      <template #icon>
+        <NIcon>
+          <GearIcon />
+        </NIcon>
+      </template>
+    </NButton>
+    <NModal
+      v-model:show="showModal"
+      preset="card"
+      title="Input Method Config"
+    >
+      <InputMethodConfig
+        :input-method="inputMethod"
+        :input-methods="inputMethods"
+      />
+    </NModal>
   </NSpace>
 </template>

src/global.d.ts

@@ -0,0 +1,7 @@
+import type { FCITX } from 'fcitx5-js'
+
+declare global {
+  interface Window {
+    fcitx: FCITX
+  }
+}