vue3

src/web/overlay/WidgetDebug.vue

@@ -2,43 +2,49 @@
   <widget v-if="show"
     :config="config" :removable="false" readonly :hideable="false">
     <div class="widget-default-style p-1 text-gray-100">
-      <ui-toggle v-model="wm.active" class="mb-1">Overlay active</ui-toggle>
-      <textarea type="text" class="px-2 py-1 bg-gray-700 rounded resize-none block" rows="1"
+      <ui-toggle v-model="active" class="mb-1">Overlay active</ui-toggle>
+      <textarea class="px-2 py-1 bg-gray-700 rounded resize-none block" rows="1"
         placeholder="Price check (Ctrl+V)" @input="handleItemPaste"></textarea>
     </div>
   </widget>
 </template>
 
-<script>
-import Widget from './Widget'
+<script lang="ts">
+import { defineComponent, inject, reactive, computed } from 'vue'
+import { WidgetManager, Anchor } from './interfaces'
+import Widget from './Widget.vue'
 import { MainProcess } from '@/ipc/main-process-bindings'
 import { parseClipboard } from '@/parser'
 
 export default {
   components: { Widget },
-  inject: ['wm'],
-  data () {
+  setup () {
+    const wm = inject<WidgetManager>('wm')!
+
+    const config = reactive({
+      anchor: { pos: 'bl', x: 1, y: 98.5 } as Anchor
+    })
+
     return {
-      config: {
-        anchor: { pos: 'bl', x: 1, y: 98.5 }
+      config,
+      show: computed(() => {
+        return !MainProcess.isElectron
+      }),
+      active: computed<boolean>({
+        get () { return wm.active },
+        set (value) { wm.active = value }
+      }),
+      handleItemPaste (e: InputEvent) {
+        const target = e.target as HTMLInputElement
+        const text = target.value
+        MainProcess.selfEmitPriceCheck({ clipboard: text, position: { x: window.screenX + 100, y: window.screenY + 100 } })
+        target.value = ''
+        // eslint-disable-next-line no-console
+        console.log(
+          parseClipboard(text)
+        )
       }
     }
-  },
-  computed: {
-    show () {
-      return !MainProcess.isElectron
-    }
-  },
-  methods: {
-    handleItemPaste (e) {
-      const text = e.target.value
-      MainProcess.selfEmitPriceCheck({ clipboard: text, position: { x: window.screenX + 100, y: window.screenY + 100 } })
-      e.target.value = ''
-      // eslint-disable-next-line no-console
-      console.log(
-        parseClipboard(text)
-      )
-    }
   }
 }
 </script>

src/web/overlay/interfaces.ts

@@ -25,6 +25,7 @@ export interface Anchor {
 }
 
 export interface WidgetManager {
+  active: boolean
   widgets: Widget[]
   show (wmId: number): void
   hide (wmId: number): void

src/web/price-check/filters/FilterName.vue

@@ -3,73 +3,90 @@
     <button class="px-2 rounded border"
       :class="{ 'border-gray-500': showAsActive, 'border-gray-900': !showAsActive }"
       @click="toggleAccuracy">{{ label }}</button>
-    <button v-if="filters.corrupted" class="px-2" @click="filters.corrupted.value = !filters.corrupted.value">
-      <span v-if="filters.corrupted.value" class="text-red-500">{{ $t('Corrupted') }}</span>
+    <button v-if="filters.corrupted" class="px-2" @click="corrupted = !corrupted">
+      <span v-if="corrupted" class="text-red-500">{{ $t('Corrupted') }}</span>
       <span v-else class="text-gray-600">{{ $t('Not Corrupted') }}</span>
     </button>
   </div>
 </template>
 
-<script>
-import { ItemRarity } from '@/parser'
+<script lang="ts">
+import { defineComponent, PropType, computed } from 'vue'
+import { ItemRarity, ParsedItem } from '@/parser'
+import { ItemFilters } from './interfaces'
 import { CATEGORY_TO_TRADE_ID } from '../trade/pathofexile-trade'
 import { TRANSLATED_ITEM_NAME_BY_REF } from '@/assets/data'
+import i18n from '../../i18n'
 
-export default {
+export default defineComponent({
   name: 'FilterName',
   props: {
     filters: {
-      type: Object,
+      type: Object as PropType<ItemFilters>,
       required: true
     },
     item: {
-      type: Object,
+      type: Object as PropType<ParsedItem>,
       required: true
     }
   },
-  computed: {
-    label () {
-      if (this.filters.name) {
-        return TRANSLATED_ITEM_NAME_BY_REF.get(this.filters.name.value) ||
-          this.filters.name.value
+  setup (props, ctx) {
+    const label = computed(() => {
+      if (props.filters.name) {
+        return TRANSLATED_ITEM_NAME_BY_REF.get(props.filters.name.value) ||
+          props.filters.name.value
       }
-      if (this.filters.baseType) {
-        return TRANSLATED_ITEM_NAME_BY_REF.get(this.filters.baseType.value) ||
-          this.filters.baseType.value
+      if (props.filters.baseType) {
+        return TRANSLATED_ITEM_NAME_BY_REF.get(props.filters.baseType.value) ||
+          props.filters.baseType.value
       }
-      if (this.filters.category) {
-        return this.$t(`Category: ${this.filters.category.value}`)
+      if (props.filters.category) {
+        return i18n.global.t(`Category: ${props.filters.category.value}`)
       }
 
       return '??? Report if you see this text'
-    },
-    canFilterByCategory () {
-      return this.item.rarity !== ItemRarity.Unique &&
-        CATEGORY_TO_TRADE_ID.has(this.item.category)
-    },
-    showAsActive () {
-      return this.canFilterByCategory &&
-        (this.filters.name || this.filters.baseType)
-    }
-  },
-  methods: {
-    toggleAccuracy () {
-      if (!this.canFilterByCategory) return
+    })
 
-      if (this.filters.category) {
-        this.filters.category = undefined
-        this.$set(this.filters, 'baseType', {
-          value: this.item.baseType || this.item.name
-        })
+    const canFilterByCategory = computed(() => {
+      return props.item.rarity !== ItemRarity.Unique &&
+        props.item.category != null &&
+        CATEGORY_TO_TRADE_ID.has(props.item.category)
+    })
+
+    const showAsActive = computed(() => {
+      return canFilterByCategory.value &&
+        (props.filters.name || props.filters.baseType)
+    })
+
+    function toggleAccuracy () {
+      if (!canFilterByCategory.value) return
+
+      if (props.filters.category) {
+        props.filters.category = undefined
+        props.filters.baseType = {
+          value: props.item.baseType || props.item.name
+        }
       } else {
-        this.filters.baseType = undefined
-        this.$set(this.filters, 'category', {
-          value: this.item.category
-        })
+        props.filters.baseType = undefined
+        props.filters.category = {
+          value: props.item.category!
+        }
       }
     }
+
+    const corrupted = computed<boolean>({
+      get () { return props.filters.corrupted!.value },
+      set (value) { props.filters.corrupted!.value = value }
+    })
+
+    return {
+      label,
+      showAsActive,
+      toggleAccuracy,
+      corrupted
+    }
   }
-}
+})
 </script>
 
 <style lang="postcss">

src/web/price-check/filters/FilterNumericEditable.vue

@@ -6,16 +6,21 @@
       v-model.number="filterValue"
       :placeholder="filter.value"
       :delay="0"
-      @focus.native="inputFocus"
-      :style="`width: ${1.2 + String(filterValue).length}ch`" />
+      @focus="inputFocus"
+      :style="{ width: `${1.2 + String(filterValue).length}ch` }"
+    />
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent, PropType, computed } from 'vue'
+import { FilterNumeric } from './interfaces'
+
+export default defineComponent({
+  emits: [], // mutates filter
   props: {
     filter: {
-      type: Object,
+      type: Object as PropType<FilterNumeric | undefined>,
       default: undefined
     },
     name: {
@@ -23,31 +28,37 @@ export default {
       required: true
     }
   },
-  computed: {
-    filterValue: {
+  setup (props) {
+    const filterValue = computed({
       get () {
-        return this.filter.value
+        return props.filter!.value
       },
       set (value) {
         if (typeof value === 'number') {
-          this.filter.value = value
-          this.filter.disabled = false
+          props.filter!.value = value
+          props.filter!.disabled = false
         } else {
-          this.filter.disabled = true
+          props.filter!.disabled = true
         }
       }
-    }
-  },
-  methods: {
-    inputFocus (e) {
-      if (e.target.value === '') {
-        e.target.value = this.filter.value
+    })
+
+    function inputFocus (e: InputEvent) {
+      const target = e.target as HTMLInputElement
+
+      if (target.value === '') {
+        target.value = String(props.filter!.value)
       }
-      e.target.select()
-      this.filter.disabled = false
+      target.select()
+      props.filter!.disabled = false
+    }
+
+    return {
+      filterValue,
+      inputFocus
     }
   }
-}
+})
 </script>
 
 <style lang="postcss">

src/web/price-check/filters/FilterVeiled.vue

@@ -1,53 +1,63 @@
 <template>
-  <ui-popper v-if="filters.veiled" tag-name="div" :delayOnMouseOut="150" :options="{ placement: 'bottom-start' }" boundaries-selector="#price-window">
-    <template slot="reference">
+  <ui-popover v-if="filters.veiled" placement="bottom-start" boundary="#price-window">
+    <template #target>
       <div class="trade-tag flex items-center" :class="{ disabled: filters.veiled.disabled }">
         <span>{{ $t(text) }}</span>
         <i v-if="showIcon" class="fas fa-caret-down pl-2 text-gray-400"></i>
       </div>
     </template>
-    <div class="popper">
-      <div class="p-2 text-left bg-gray-800 text-gray-400">
+    <template #content>
+      <div class="p-2 bg-gray-800 text-gray-400">
         <div class="mb-1" v-for="opt of options" :key="opt.value">
           <ui-radio v-model="filters.veiled.stat" :value="opt.value">{{ $t(opt.label) }}</ui-radio>
         </div>
         <ui-toggle v-model="filters.veiled.disabled">{{ $t('Disable filter') }}</ui-toggle>
       </div>
-    </div>
-  </ui-popper>
+    </template>
+  </ui-popover>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, PropType, computed } from 'vue'
 import { VEILED_STAT } from './veiled'
-import { ItemRarity } from '@/parser'
+import { ItemRarity, ParsedItem } from '@/parser'
+import { ItemFilters } from './interfaces'
 
-export default {
+export default defineComponent({
   props: {
     filters: {
-      type: Object,
+      type: Object as PropType<ItemFilters>,
       required: true
     },
     item: {
-      type: Object,
+      type: Object as PropType<ParsedItem>,
       required: true
     }
   },
-  computed: {
-    text () {
-      return VEILED_STAT.find(s => s.stat === this.filters.veiled.stat).name
-    },
-    options () {
-      return VEILED_STAT.filter(s => s.test(this.item)).map(s => ({
+  setup (props) {
+    const text = computed(() => {
+      return VEILED_STAT.find(s => s.stat === props.filters.veiled!.stat)!.name
+    })
+
+    const options = computed(() => {
+      return VEILED_STAT.filter(s => s.test(props.item)).map(s => ({
         label: s.name,
         value: s.stat
       }))
-    },
-    showIcon () {
-      return this.options.length > 1 &&
-        this.item.rarity !== ItemRarity.Unique
+    })
+
+    const showIcon = computed(() => {
+      return options.value.length > 1 &&
+        props.item.rarity !== ItemRarity.Unique
+    })
+
+    return {
+      text,
+      options,
+      showIcon
     }
   }
-}
+})
 </script>
 
 <i18n>

src/web/price-check/filters/interfaces.ts

@@ -18,14 +18,8 @@ export interface ItemFilters {
   rarity?: {
     value: string
   }
-  linkedSockets?: {
-    value: number
-    disabled: boolean
-  }
-  whiteSockets?: {
-    value: number
-    disabled: boolean
-  }
+  linkedSockets?: FilterNumeric
+  whiteSockets?: FilterNumeric
   corrupted?: {
     value: boolean
   }
@@ -33,10 +27,7 @@ export interface ItemFilters {
     value: ItemInfluence
     disabled: boolean
   }>
-  quality?: {
-    value: number
-    disabled: boolean
-  }
+  quality?: FilterNumeric
   gemLevel?: {
     min: number
     max?: number
@@ -48,14 +39,8 @@ export interface ItemFilters {
   mapBlighted?: {
     value: true
   }
-  itemLevel?: {
-    value: number
-    disabled: boolean
-  }
-  stackSize?: {
-    value: number
-    disabled: boolean
-  }
+  itemLevel?: FilterNumeric
+  stackSize?: FilterNumeric
   unidentified?: {
     value: true
     disabled: boolean
@@ -82,6 +67,11 @@ export interface ItemFilters {
   }
 }
 
+export interface FilterNumeric {
+  value: number
+  disabled: boolean
+}
+
 export interface StatFilter {
   readonly tradeId: string[]
   readonly statRef: string

src/web/price-check/unidentified-resolver/UnidentifiedResolver.vue

@@ -16,20 +16,22 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, PropType, computed } from 'vue'
 import { UNIQUES_LIST, TRANSLATED_ITEM_NAME_BY_REF } from '@/assets/data'
-import { ItemRarity } from '@/parser'
+import { ItemRarity, ParsedItem } from '@/parser'
 
-export default {
+export default defineComponent({
+  emits: ['identify'],
   props: {
     item: {
-      type: Object,
-      required: false
+      type: Object as PropType<ParsedItem | undefined>,
+      default: undefined
     }
   },
-  computed: {
-    identifiedVariants () {
-      const name = this.item.name
+  setup (props, ctx) {
+    const identifiedVariants = computed(() => {
+      const name = props.item!.name
       const possible = UNIQUES_LIST
         .filter(unique => unique.basetype === name)
         .map(unique => ({
@@ -39,40 +41,48 @@ export default {
         }))
 
       if (possible.length === 1) {
-        this.select(possible[0].refName)
+        select(possible[0].refName)
       }
 
       return possible
-    },
-    show () {
-      if (!this.item) return false
+    })
 
-      return this.item.rarity === ItemRarity.Unique &&
-        this.item.isUnidentified &&
-        this.item.baseType == null
-    },
-    baseType () {
-      return TRANSLATED_ITEM_NAME_BY_REF.get(this.item.name) ||
-        this.item.name
-    }
-  },
-  methods: {
-    select (name) {
+    const show = computed(() => {
+      if (!props.item) return false
+
+      return props.item.rarity === ItemRarity.Unique &&
+        props.item.isUnidentified &&
+        props.item.baseType == null
+    })
+
+    const baseType = computed(() => {
+      return TRANSLATED_ITEM_NAME_BY_REF.get(props.item!.name) ||
+        props.item!.name
+    })
+
+    function select (name: string) {
       if ([
         'Agnerod East', 'Agnerod North', 'Agnerod South', 'Agnerod West'
       ].includes(name)) {
         name = 'Agnerod'
       }
 
-      const newItem = {
-        ...this.item,
+      const newItem: ParsedItem = {
+        ...props.item!,
         name: name,
-        baseType: this.item.name
+        baseType: props.item!.name
       }
-      this.$emit('identify', newItem)
+      ctx.emit('identify', newItem)
+    }
+
+    return {
+      identifiedVariants,
+      show,
+      baseType,
+      select
     }
   }
-}
+})
 </script>
 
 <i18n>

src/web/ui/ItemQuickPrice.vue

@@ -21,10 +21,11 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, computed } from 'vue'
 import { displayRounding } from '../price-check/Prices'
 
-export default {
+export default defineComponent({
   props: {
     min: {
       type: Number,
@@ -51,13 +52,18 @@ export default {
       default: require('@/assets/images/wisdom.png')
     }
   },
-  computed: {
-    isExa () { return this.currency === 'exa' },
-    minText () { return displayRounding(this.min, this.fraction) },
-    maxText () { return displayRounding(this.max, this.fraction) },
-    isRange () { return this.minText !== this.maxText }
+  setup (props) {
+    const minText = computed(() => { return displayRounding(props.min, props.fraction) })
+    const maxText = computed(() => { return displayRounding(props.max, props.fraction) })
+
+    return {
+      minText,
+      maxText,
+      isRange: computed(() => { return minText.value !== maxText.value }),
+      isExa: computed(() => { return props.currency === 'exa' })
+    }
   }
-}
+})
 </script>
 
 <style module>