🚧 WIP(custom): v3.0.0 migrate to vite and esm

src/renderer/components/InputBoxDialog.vue

@@ -5,12 +5,22 @@
     :modal-append-to-body="false"
     append-to-body
   >
-    <el-input v-model="inputBoxValue" :placeholder="inputBoxOptions.placeholder" />
+    <el-input
+      v-model="inputBoxValue"
+      :placeholder="inputBoxOptions.placeholder"
+    />
     <template #footer>
-      <el-button round @click="handleInputBoxCancel">
+      <el-button
+        round
+        @click="handleInputBoxCancel"
+      >
         {{ $T('CANCEL') }}
       </el-button>
-      <el-button type="primary" round @click="handleInputBoxConfirm">
+      <el-button
+        type="primary"
+        round
+        @click="handleInputBoxConfirm"
+      >
         {{ $T('CONFIRM') }}
       </el-button>
     </template>
@@ -18,14 +28,13 @@
 </template>
 
 <script lang="ts" setup>
-import { ipcRenderer, IpcRendererEvent } from 'electron'
-import { ref, reactive, onBeforeUnmount, onBeforeMount } from 'vue'
+import type { IpcRendererEvent } from 'electron'
+import { onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue'
 
 import { T as $T } from '@/i18n/index'
 import $bus from '@/utils/bus'
-import { sendToMain } from '@/utils/common'
-
 import { SHOW_INPUT_BOX, SHOW_INPUT_BOX_RESPONSE } from '#/events/constants'
+import { IShowInputBoxOption } from '#/types/types'
 
 const inputBoxValue = ref('')
 const showInputBoxVisible = ref(false)
@@ -35,36 +44,36 @@ const inputBoxOptions = reactive({
 })
 
 onBeforeMount(() => {
-  ipcRenderer.on(SHOW_INPUT_BOX, ipcEventHandler)
+  window.electron.ipcRendererOn(SHOW_INPUT_BOX, ipcEventHandler)
   $bus.on(SHOW_INPUT_BOX, initInputBoxValue)
 })
 
-function ipcEventHandler(_: IpcRendererEvent, options: IShowInputBoxOption) {
+function ipcEventHandler (_: IpcRendererEvent, options: IShowInputBoxOption) {
   initInputBoxValue(options)
 }
 
-function initInputBoxValue(options: IShowInputBoxOption) {
+function initInputBoxValue (options: IShowInputBoxOption) {
   inputBoxValue.value = options.value || ''
   inputBoxOptions.title = options.title || ''
   inputBoxOptions.placeholder = options.placeholder || ''
   showInputBoxVisible.value = true
 }
 
-function handleInputBoxCancel() {
+function handleInputBoxCancel () {
   // TODO: RPCServer
   showInputBoxVisible.value = false
-  sendToMain(SHOW_INPUT_BOX, '')
+  window.electron.sendToMain(SHOW_INPUT_BOX, '')
   $bus.emit(SHOW_INPUT_BOX_RESPONSE, '')
 }
 
-function handleInputBoxConfirm() {
+function handleInputBoxConfirm () {
   showInputBoxVisible.value = false
-  sendToMain(SHOW_INPUT_BOX, inputBoxValue.value)
+  window.electron.sendToMain(SHOW_INPUT_BOX, inputBoxValue.value)
   $bus.emit(SHOW_INPUT_BOX_RESPONSE, inputBoxValue.value)
 }
 
 onBeforeUnmount(() => {
-  ipcRenderer.removeListener(SHOW_INPUT_BOX, ipcEventHandler)
+  window.electron.ipcRendererRemoveListener(SHOW_INPUT_BOX, ipcEventHandler)
   $bus.off(SHOW_INPUT_BOX)
 })
 </script>