vue3

src/web/settings/HotkeyInput.vue

@@ -2,18 +2,21 @@
   <input
     @keyup="handleKeyup"
     @keydown.prevent
-    :placeholder="value || $t('Not Set')"
-    :class="{ 'placeholder-red-500': !value }"
+    :placeholder="modelValue || $t('Not Set')"
+    :class="{ 'placeholder-red-500': !modelValue }"
     class="rounded bg-gray-900 px-1 text-center font-fontin-regular" />
 </template>
 
-<script>
+<script lang="ts">
+import { PropType } from 'vue'
 import { KeyToCode, forbidden } from '@/ipc/KeyToCode'
 
 export default {
+  emits: ['update:modelValue'],
   props: {
-    value: {
-      type: String
+    modelValue: {
+      type: String,
+      default: undefined
     },
     forbidden: {
       type: Array,
@@ -24,43 +27,45 @@ export default {
       default: false
     }
   },
-  methods: {
-    handleKeyup (e) {
-      e.preventDefault()
-      e.stopPropagation()
-
-      if (e.code === 'Backspace') {
-        if (!this.required) {
-          this.$emit('input', null)
+  setup (props, ctx) {
+    return {
+      handleKeyup (e: KeyboardEvent) {
+        e.preventDefault()
+        e.stopPropagation()
+  
+        if (e.code === 'Backspace') {
+          if (!props.required) {
+            ctx.emit('update:modelValue', null)
+          }
+          return
         }
-        return
-      }
-
-      let { code, ctrlKey, shiftKey, altKey } = e
-
-      if (code.startsWith('Key')) {
-        code = code.substr('Key'.length)
-      } else if (code.startsWith('Digit')) {
-        code = code.substr('Digit'.length)
-      } else if (e.key === 'Cancel' && code === 'Pause') {
-        code = 'Cancel'
-      }
-
-      if (
-        KeyToCode[code] &&
-        (ctrlKey ? !this.forbidden.includes('Ctrl') : true) &&
-        (shiftKey ? !this.forbidden.includes('Shift') : true) &&
-        (altKey ? !this.forbidden.includes('Alt') : true)
-      ) {
-        if (shiftKey && altKey) code = `Shift + Alt + ${code}`
-        else if (ctrlKey && shiftKey) code = `Ctrl + Shift + ${code}`
-        else if (ctrlKey && altKey) code = `Ctrl + Alt + ${code}`
-        else if (altKey) code = `Alt + ${code}`
-        else if (ctrlKey) code = `Ctrl + ${code}`
-        else if (shiftKey) code = `Shift + ${code}`
-
-        if (!this.forbidden.includes(code)) {
-          this.$emit('input', code)
+  
+        let { code, ctrlKey, shiftKey, altKey } = e
+  
+        if (code.startsWith('Key')) {
+          code = code.substr('Key'.length)
+        } else if (code.startsWith('Digit')) {
+          code = code.substr('Digit'.length)
+        } else if (e.key === 'Cancel' && code === 'Pause') {
+          code = 'Cancel'
+        }
+  
+        if (
+          (KeyToCode as Record<string, number>)[code] &&
+          (ctrlKey ? !props.forbidden.includes('Ctrl') : true) &&
+          (shiftKey ? !props.forbidden.includes('Shift') : true) &&
+          (altKey ? !props.forbidden.includes('Alt') : true)
+        ) {
+          if (shiftKey && altKey) code = `Shift + Alt + ${code}`
+          else if (ctrlKey && shiftKey) code = `Ctrl + Shift + ${code}`
+          else if (ctrlKey && altKey) code = `Ctrl + Alt + ${code}`
+          else if (altKey) code = `Alt + ${code}`
+          else if (ctrlKey) code = `Ctrl + ${code}`
+          else if (shiftKey) code = `Shift + ${code}`
+  
+          if (!props.forbidden.includes(code)) {
+            ctx.emit('update:modelValue', code)
+          }
         }
       }
     }

src/web/settings/SettingsWindow.vue

@@ -27,20 +27,22 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { Config } from '@/web/Config'
 import { MainProcess } from '@/ipc/main-process-bindings'
+import i18n from '../i18n'
 
 export default {
-  beforeCreate () {
-    document.title = this.$t('Settings - Awakened PoE Trade')
-  },
-  methods: {
-    save () {
-      MainProcess.closeSettingsWindow(Config.store)
-    },
-    cancel () {
-      MainProcess.closeSettingsWindow()
+  setup () {
+    document.title = i18n.global.t('Settings - Awakened PoE Trade')
+
+    return {
+      save () {
+        MainProcess.closeSettingsWindow(Config.store)
+      },
+      cancel () {
+        MainProcess.closeSettingsWindow()
+      }
     }
   }
 }

src/web/settings/chat.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="max-w-md p-2">
     <div class="mb-2">
-      <div class="mb-4" v-for="(command, idx) in config.commands" :key="idx">
+      <div class="mb-4" v-for="command in commands">
         <input v-model.trim="command.text" class="rounded bg-gray-900 px-1 block w-full mb-1 font-fontin-regular" />
         <div class="flex justify-end">
           <button @click="removeCommand(command)" class="mr-2 text-gray-500">{{ $t('Remove') }}</button>
@@ -13,26 +13,26 @@
   </div>
 </template>
 
-<script>
-import HotkeyInput from './HotkeyInput'
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+import HotkeyInput from './HotkeyInput.vue'
 import { Config } from '@/web/Config'
+import { Config as IConfig } from '@/ipc/types'
 
 export default {
   components: { HotkeyInput },
-  computed: {
-    config () {
-      return Config.store
-    }
-  },
-  methods: {
-    addComand () {
-      this.config.commands.push({
-        text: '',
-        hotkey: null
-      })
-    },
-    removeCommand (command) {
-      this.config.commands = this.config.commands.filter(c => c !== command)
+  setup () {
+    return {
+      commands: computed(() => Config.store.commands),
+      addComand () {
+        Config.store.commands.push({
+          text: '',
+          hotkey: null
+        })
+      },
+      removeCommand (command: IConfig['commands'][number]) {
+        Config.store.commands = Config.store.commands.filter(c => c !== command)
+      }
     }
   }
 }

src/web/settings/debug.vue

@@ -38,13 +38,14 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { computed } from 'vue'
 import { Config } from '@/web/Config'
 
 export default {
-  computed: {
-    config () {
-      return Config.store
+  setup () {
+    return {
+      config: computed(() => Config.store)
     }
   }
 }

src/web/settings/general.vue

@@ -51,18 +51,17 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { computed } from 'vue'
 import { Config } from '@/web/Config'
 
 export default {
-  computed: {
-    config () {
-      return Config.store
-    }
-  },
-  methods: {
-    handleLogFile (e) {
-      this.config.clientLog = e.target.files[0].path
+  setup () {
+    return {
+      config: computed(() => Config.store),
+      handleLogFile (e: InputEvent) {
+        Config.store.clientLog = (e.target as HTMLInputElement).files![0].path
+      }
     }
   }
 }

src/web/settings/hotkeys.vue

@@ -60,15 +60,16 @@
   </div>
 </template>
 
-<script>
-import HotkeyInput from './HotkeyInput'
+<script lang="ts">
+import { computed } from 'vue'
 import { Config } from '@/web/Config'
+import HotkeyInput from './HotkeyInput.vue'
 
 export default {
   components: { HotkeyInput },
-  computed: {
-    config () {
-      return Config.store
+  setup () {
+    return {
+      config: computed(() => Config.store)
     }
   }
 }

src/web/settings/price-check.vue

@@ -45,38 +45,41 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { computed } from 'vue'
 import { Config } from '@/web/Config'
+import { PriceCheckWidget } from '../overlay/interfaces'
 
 export default {
-  computed: {
-    config () {
-      return Config.store
-    },
-    configWidget () {
-      return Config.store.widgets.find(w => w.wmType === 'price-check')
-    },
-    searchStatRange: {
-      set (value) {
-        if (typeof value !== 'number') return
+  setup () {
+    const configWidget = computed(() => {
+      return Config.store.widgets.find(w => w.wmType === 'price-check') as PriceCheckWidget
+    })
 
-        if (value >= 0 && value <= 50) {
-          this.config.searchStatRange = value
+    return {
+      config: computed(() => Config.store),
+      searchStatRange: computed<number>({
+        get () {
+          return Config.store.searchStatRange
+        },
+        set (value) {
+          if (typeof value !== 'number') return
+
+          if (value >= 0 && value <= 50) {
+            Config.store.searchStatRange = value
+          }
         }
-      },
-      get () {
-        return this.config.searchStatRange
-      }
-    },
-    chaosPriceThreshold: {
-      set (value) {
-        if (typeof value !== 'number') return
+      }),
+      chaosPriceThreshold: computed<number>({
+        get () {
+          return configWidget.value.chaosPriceThreshold
+        },
+        set (value) {
+          if (typeof value !== 'number') return
 
-        this.configWidget.chaosPriceThreshold = value
-      },
-      get () {
-        return this.configWidget.chaosPriceThreshold
-      }
+          configWidget.value.chaosPriceThreshold = value
+        }
+      })
     }
   }
 }