initial InputMethodConfig (#1)

.github/workflows/ci.yml

@@ -0,0 +1,45 @@
+name: ci
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-24.04
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22.x
+
+      - name: Install dependencies
+        run: |
+          wget -P cache https://github.com/fcitx-contrib/fcitx5-js/releases/download/latest/fcitx5-js-0.1.0.tgz
+          npm i -g pnpm
+          pnpm i
+
+      - name: Lint
+        run: |
+          pnpm run lint
+          pnpm run check
+
+      - name: Build
+        run: |
+          pnpm run build
+          npm pack
+
+      - name: Release
+        if: ${{ github.ref == 'refs/heads/master' }}
+        uses: marvinpinto/action-automatic-releases@latest
+        with:
+          repo_token: ${{ secrets.GITHUB_TOKEN }}
+          automatic_release_tag: latest
+          prerelease: true
+          title: Nightly Build
+          files: |
+            fcitx5-config-vue-*.tgz

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 dist
 pnpm-lock.yaml
+*.tgz

cache/README.md

@@ -0,0 +1 @@
+This directory caches [fcitx5-js](https://github.com/fcitx-contrib/fcitx5-js) npm package.

eslint.config.mjs

@@ -0,0 +1,4 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+})

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "fcitx5-config-vue",
+  "type": "module",
+  "version": "0.1.0",
+  "license": "AGPL-3.0-or-later",
+  "main": "dist/index.js",
+  "scripts": {
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
+    "check": "vue-tsc --noEmit",
+    "build": "vite build && vue-tsc -d --emitDeclarationOnly"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^2.27.1",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "eslint": "^9.9.1",
+    "fcitx5-js": "file:cache/fcitx5-js-0.1.0.tgz",
+    "naive-ui": "^2.39.0",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.2",
+    "vue": "^3.4.38",
+    "vue-tsc": "^2.0.29"
+  }
+}

src/InputMethodConfig.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed, h, ref } from 'vue'
+import type { MenuOption } from 'naive-ui'
+import { NLayout, NLayoutSider, NMenu } from 'naive-ui'
+import MinusButton from './MinusButton.vue'
+import PlusButton from './PlusButton.vue'
+
+const props = defineProps<{
+  inputMethod: string
+  inputMethods: {
+    displayName: string
+    name: string
+  }[]
+}>()
+
+const selectedInputMethod = ref(props.inputMethod)
+
+const options = computed(() =>
+  props.inputMethods.map(({ displayName, name }) => ({
+    label: displayName,
+    key: name,
+  })),
+)
+
+function labelWithMinus(option: MenuOption) {
+  return h('div', {
+    style: {
+      'display': 'flex',
+      'align-items': 'center',
+      'justify-content': 'space-between',
+    },
+  }, [
+    option.label as string,
+    h(MinusButton, {
+      disabled: props.inputMethods.length === 1,
+      onClick: (e: MouseEvent) => {
+        const ims = props.inputMethods.filter(({ name }) => name !== option.key).map(({ name }) => name)
+        window.fcitx.setInputMethods(ims)
+        window.fcitx.updateStatusArea()
+        e.stopPropagation() // Don't fallback to selecting menu item.
+        if (selectedInputMethod.value === option.key) {
+          selectedInputMethod.value = ims[0]
+        }
+      },
+    }),
+  ])
+}
+
+const collapsed = ref(false)
+</script>
+
+<template>
+  <NLayout has-sider>
+    <NLayoutSider
+      bordered
+      collapse-mode="width"
+      :collapsed="collapsed"
+      show-trigger
+      @collapse="collapsed = true"
+      @expand="collapsed = false"
+    >
+      <div style="display: flex; flex-direction: column; justify-content: space-between; height: 100%">
+        <NMenu
+          v-model:value="selectedInputMethod"
+          :collapsed="collapsed"
+          :collapsed-width="0"
+          :options="options"
+          :render-label="labelWithMinus"
+        />
+        <PlusButton style="align-self: flex-end" />
+      </div>
+    </NLayoutSider>
+    <NLayout style="min-height: 480px">
+      {{ selectedInputMethod }}
+    </NLayout>
+  </NLayout>
+</template>

src/MinusButton.vue

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

src/MinusIcon.vue

@@ -0,0 +1,9 @@
+<script lang="ts">
+export default {
+  name: 'IcBaselineMinus',
+}
+</script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M19 12.998H5v-2h14z" /></svg>
+</template>

src/PlusButton.vue

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

src/PlusIcon.vue

@@ -0,0 +1,9 @@
+<script lang="ts">
+export default {
+  name: 'IcBaselinePlus',
+}
+</script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M19 12.998h-6v6h-2v-6H5v-2h6v-6h2v6h6z" /></svg>
+</template>

src/global.d.ts

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

src/index.ts

@@ -0,0 +1 @@
+export { default as InputMethodConfig } from './InputMethodConfig.vue'

tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "strict": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.vue", "src/**/*.ts", "src/**/*.d.ts"]
+}

vite.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    lib: {
+      entry: 'src/index.ts',
+      fileName: 'index',
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: [
+        'vue',
+        'naive-ui',
+      ],
+    },
+  },
+  plugins: [vue()],
+})