merge displayIME into setLoading

src/components/MyDeployer.vue

@@ -1,19 +1,12 @@
 <script setup lang="ts">
-import { toRefs } from 'vue'
 import { useNotification } from 'naive-ui'
 import { worker } from '../workerAPI'
 import {
   changeIME,
   deployed,
-  selectOptions
+  selectOptions,
+  setLoading
 } from '../control'
-import type MyMenu from './MyMenu.vue'
-
-const props = defineProps<{
-  menu: InstanceType<typeof MyMenu> | undefined
-}>()
-
-const { menu } = toRefs(props)
 
 const notification = useNotification()
 
@@ -28,14 +21,14 @@ worker.control('deployStatus', async (status: 'start' | 'failure' | 'success', s
         content: 'Deployment started',
         ...options
       })
-      menu.value?.setLoading(true)
+      setLoading(true)
       break
     case 'failure':
       notification.error({
         content: 'Deployment failed',
         ...options
       })
-      menu.value?.setLoading(false)
+      setLoading(false)
       break
     case 'success':
       notification.success({
@@ -57,9 +50,8 @@ worker.control('deployStatus', async (status: 'start' | 'failure' | 'success', s
         }
         const currentSchema = schemasJson[0].id
         await changeIME(currentSchema)
-        menu.value?.displayIME(currentSchema)
       }
-      menu.value?.setLoading(false)
+      setLoading(false)
       break
   }
 })

src/components/MyMenu.vue

@@ -5,7 +5,9 @@ import { WeatherMoon16Regular, Circle16Regular } from '@vicons/fluent'
 import {
   init,
   deployed,
+  loading,
   schemaId,
+  ime,
   selectOptions,
   variants,
   variant,
@@ -15,6 +17,7 @@ import {
   isEnglishPunctuation,
   enableEmoji,
   schemaExtended,
+  setLoading,
   changeLanguage,
   changeVariant,
   changeWidth,
@@ -25,21 +28,9 @@ import {
 } from '../control'
 import { getTextarea, getQueryString } from '../util'
 
-const ime = ref<string>('') // visual vs internal
-
-function displayIME (value: string) {
-  ime.value = value
-}
-
 const showVariant = ref<boolean>(false)
-const loading = ref<boolean>(true)
-
-function setLoading (value: boolean) {
-  loading.value = value
-}
 
 init(getQueryString('schemaId'), getQueryString('variantName')).then(() => {
-  displayIME(schemaId.value)
   showVariant.value = true
   setLoading(false)
 })
@@ -56,9 +47,7 @@ async function selectIME (targetIME: string) {
   resetFocus()
   showVariant.value = false
   setLoading(true)
-  displayIME('')
   await changeIME(targetIME)
-  displayIME(targetIME) // update UI after variant properly set
   showVariant.value = true
   setLoading(false)
 }
@@ -80,8 +69,6 @@ function resetFocus () {
 }
 
 defineExpose({
-  displayIME,
-  setLoading,
   selectIME
 })
 </script>

src/components/MyPanel.vue

@@ -9,7 +9,12 @@ import {
   process,
   selectCandidateOnCurrentPage
 } from '../workerAPI'
-import { hideComment, changeLanguage, syncOptions } from '../control'
+import {
+  loading,
+  hideComment,
+  changeLanguage,
+  syncOptions
+} from '../control'
 import { isMobile, getTextarea } from '../util'
 
 const props = defineProps<{
@@ -208,7 +213,7 @@ watch(text, (acNewText, acText) => {
 // end: code specific to Android Chromium
 
 function onKeydown (e: KeyboardEvent) {
-  if (debugMode.value) {
+  if (debugMode.value || loading.value) {
     return
   }
   const { code, key } = e
@@ -289,7 +294,7 @@ function onKeydown (e: KeyboardEvent) {
 }
 
 function onKeyup (e: KeyboardEvent) {
-  if (debugMode.value) {
+  if (debugMode.value || loading.value) {
     return
   }
   const { key } = e

src/control.ts

@@ -12,6 +12,14 @@ const SIMPLIFICATION = 'simplification'
 const deployed = ref<boolean>(false)
 
 const schemaId = ref<string>(schemas[0].id)
+const ime = ref<string>('') // visual vs internal
+
+const loading = ref<boolean>(true)
+
+function setLoading (value: boolean) {
+  loading.value = value
+  ime.value = value ? '' : schemaId.value
+}
 
 const schemaExtended: string[] = []
 
@@ -273,7 +281,9 @@ function syncOptions (updatedOptions: string[]) {
 export {
   init,
   deployed,
+  loading,
   schemaId,
+  ime,
   selectOptions,
   variants,
   variant,
@@ -284,6 +294,7 @@ export {
   enableEmoji,
   schemaExtended,
   hideComment,
+  setLoading,
   changeLanguage,
   changeVariant,
   changeWidth,

src/views/MainView.vue

@@ -129,7 +129,7 @@ const AsyncEditor = defineAsyncComponent(() => import('../components/MyEditor.vu
       :on-update-schema="menu?.selectIME"
     />
     <my-font />
-    <my-deployer :menu="menu" />
+    <my-deployer />
     <micro-plum />
     <n-space>
       Advanced

test-device/test-ios.spec.ts

@@ -1,12 +1,18 @@
 import { test, expect, devices } from '@playwright/test'
-import { baseURL, textarea, panelBox, input, expectValue } from '../test/util'
+import {
+  init,
+  textarea,
+  panelBox,
+  input,
+  expectValue
+} from '../test/util'
 
 test.use({
   ...devices['iPhone 13 Mini']
 })
 
 test('Panel placement', async ({ page }) => {
-  await page.goto(baseURL)
+  await init(page)
 
   await textarea(page).click()
   await input(page, 'zhiding')
@@ -15,7 +21,7 @@ test('Panel placement', async ({ page }) => {
 })
 
 test('Panel overflow', async ({ page }) => {
-  await page.goto(baseURL)
+  await init(page)
 
   await textarea(page).click()
   await input(page, 'aaaaaaaaaaaaaaaaaaaaa ')