lee/Exiled-Exchange-2
1
0
Fork 0
mirror of https://github.com/Kvan7/Exiled-Exchange-2.git synced 2026-09-23 21:25:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

use composition i18n

Browse Source
This commit is contained in:
Alexander Drozdov
2021-01-13 18:45:21 +02:00
parent ccbaea7a73
commit d64be8871e
9 changed files with 84 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/overlay/Widget.vue
+8 -4
View File
@@ -7,13 +7,13 @@
<div class="absolute px-1" :style="actionsPosition" style="background: rgba(0,0,0,0.01);">
<div :class="$style.actionsPanel">
<button v-if="hideable" @click="hide"
:class="$style.action">{{ $t('hide') }}</button>
:class="$style.action">{{ t('hide') }}</button>
<button v-if="!readonly" @click="toggleEdit"
:class="[$style.action, { [$style.active]: isEditing }]">{{ $t('edit') }}</button>
:class="[$style.action, { [$style.active]: isEditing }]">{{ t('edit') }}</button>
<button v-if="moveHandles !== 'none'" @click="toggleMove"
:class="[$style.action, { [$style.active]: isMoving }]">{{ $t('move') }}</button>
:class="[$style.action, { [$style.active]: isMoving }]">{{ t('move') }}</button>
<button v-if="removable" @mousedown="startRemoveTimer" @mouseup="cancelRemoveTimer" @mouseleave="cancelRemoveTimer"
:class="[$style.action, $style.removable, { [$style.removing]: isRemoving }]">{{ $t('delete') }}</button>
:class="[$style.action, $style.removable, { [$style.removing]: isRemoving }]">{{ t('delete') }}</button>
</div>
</div>
<div v-if="isMoving">
@@ -35,6 +35,7 @@
<script lang="ts">
import { defineComponent, PropType, computed, inject, ref } from 'vue'
import { Widget, Anchor, WidgetManager } from './interfaces'
import { useI18n } from 'vue-i18n'
function useRemovable (remove: () => void) {
const isRemoving = ref(false)
@@ -188,7 +189,10 @@ export default defineComponent({
const isEditing = ref(false)
const isMoving = ref(false)
const { t } = useI18n()
return {
t,
moverPosition,
widgetPosition,
actionsPosition,
src/web/overlay/WidgetMenu.vue
+9 -5
View File
@@ -16,17 +16,17 @@
<!-- <button class="text-left hover:bg-gray-400 rounded px-1 whitespace-no-wrap">Chromatic calculator</button> -->
<!-- <button class="text-left hover:bg-gray-400 rounded px-1 whitespace-no-wrap">Screen saver</button> -->
<!-- add widget -->
<div class="text-gray-600 text-sm px-1 select-none whitespace-no-wrap">{{ $t('add widget') }}</div>
<button class="text-left hover:bg-gray-400 rounded px-1 whitespace-no-wrap" @click="createOfType('timer')">{{ $t('Stopwatch') }}</button>
<button class="text-left hover:bg-gray-400 rounded px-1 whitespace-no-wrap" @click="createOfType('stash-search')">{{ $t('Stash search') }}</button>
<button class="text-left hover:bg-gray-400 rounded px-1 whitespace-no-wrap" @click="createOfType('image-strip')">{{ $t('Image strip') }}</button>
<div class="text-gray-600 text-sm px-1 select-none whitespace-no-wrap">{{ t('add widget') }}</div>
<button class="text-left hover:bg-gray-400 rounded px-1 whitespace-no-wrap" @click="createOfType('timer')">{{ t('Stopwatch') }}</button>
<button class="text-left hover:bg-gray-400 rounded px-1 whitespace-no-wrap" @click="createOfType('stash-search')">{{ t('Stash search') }}</button>
<button class="text-left hover:bg-gray-400 rounded px-1 whitespace-no-wrap" @click="createOfType('image-strip')">{{ t('Image strip') }}</button>
<!-- <button class="text-left hover:bg-gray-400 rounded px-1 whitespace-no-wrap" @click="createOfType('TODO')">Image</button> -->
</div>
</template>
</ui-popover>
</div>
<div v-if="isEditing" class="text-gray-100 px-2 pb-1 whitespace-no-wrap">
<ui-toggle v-model="config.alwaysShow">{{ $t('Show button for active widgets') }}</ui-toggle>
<ui-toggle v-model="config.alwaysShow">{{ t('Show button for active widgets') }}</ui-toggle>
</div>
</div>
</widget>
@@ -36,6 +36,7 @@
import { defineComponent, PropType, computed, inject, ref } from 'vue'
import { Widget as IWidget, WidgetManager, WidgetMenu } from './interfaces'
import Widget from './Widget.vue'
import { useI18n } from 'vue-i18n'
export default defineComponent({
components: { Widget },
@@ -54,8 +55,11 @@ export default defineComponent({
(props.config.alwaysShow || (widget.wmWants === 'hide'))
)
})
const { t } = useI18n()
return {
t,
widgets,
createOfType (type: string) {
wm.create(type)
src/web/price-check/filters/FilterModifier.vue
+12 -8
View File
@@ -7,15 +7,15 @@
'fas fa-check-square': !filter.disabled
}"></i>
<div class="search-text flex-1 mr-1 relative flex min-w-0" style="line-height: 1rem;">
<span class="truncate whitespace-pre-wrap"><item-modifier-text :text="$t(filter.text)" :roll="filter.roll" /></span>
<span class="search-text-full whitespace-pre-wrap"><item-modifier-text :text="$t(filter.text)" :roll="filter.roll" /></span>
<span class="truncate whitespace-pre-wrap"><item-modifier-text :text="t(filter.text)" :roll="filter.roll" /></span>
<span class="search-text-full whitespace-pre-wrap"><item-modifier-text :text="t(filter.text)" :roll="filter.roll" /></span>
</div>
</button>
<div class="flex">
<ui-input-debounced class="search-num-input rounded-tl mr-px" :placeholder="$t('min')" :min="filter.boundMin" :max="filter.boundMax" step="any" type="number" :class="{ 'rounded-bl': !showQ20Notice }"
<ui-input-debounced class="search-num-input rounded-tl mr-px" :placeholder="t('min')" :min="filter.boundMin" :max="filter.boundMax" step="any" type="number" :class="{ 'rounded-bl': !showQ20Notice }"
v-if="showMinmaxInput" ref="inputMin"
v-model.number="filter.min" @focus="inputFocus($event, 'min')" :delay="0" />
<ui-input-debounced class="search-num-input rounded-tr" :placeholder="$t('max')" :min="filter.boundMin" :max="filter.boundMax" step="any" type="number" :class="{ 'rounded-br': !showQ20Notice }"
<ui-input-debounced class="search-num-input rounded-tr" :placeholder="t('max')" :min="filter.boundMin" :max="filter.boundMax" step="any" type="number" :class="{ 'rounded-br': !showQ20Notice }"
v-if="showMinmaxInput" ref="inputMax"
v-model.number="filter.max" @focus="inputFocus($event, 'max')" :delay="0" />
</div>
@@ -29,15 +29,15 @@
</span>
</template>
<template #content>
<div style="max-width: 18.5rem;">{{ $t(filter.hidden) }}</div>
<div style="max-width: 18.5rem;">{{ t(filter.hidden) }}</div>
</template>
</ui-popover>
</div>
<div class="flex-1 flex items-start">
<span v-if="showTypeTags"
class="text-xs leading-none px-1 rounded" :class="`mod-type-${filter.type}`">{{ $t(filter.type) }}</span>
class="text-xs leading-none px-1 rounded" :class="`mod-type-${filter.type}`">{{ t(filter.type) }}</span>
<span v-if="filter.variant"
class="text-xs leading-none px-1 rounded mod-type-variant">{{ $t('variant') }}</span>
class="text-xs leading-none px-1 rounded mod-type-variant">{{ t('variant') }}</span>
</div>
<div class="flex-1 mr-4">
<div style="width: 12.5rem;">
@@ -67,7 +67,7 @@
</div>
</div>
<div v-if="showQ20Notice"
class="bg-gray-700 text-gray-500 text-center rounded-b" style="width: calc(2*3rem + 1px)">{{ $t('Q {0}%', [Math.max(20, item.quality || 0)]) }}</div>
class="bg-gray-700 text-gray-500 text-center rounded-b" style="width: calc(2*3rem + 1px)">{{ t('Q {0}%', [Math.max(20, item.quality || 0)]) }}</div>
<div v-else style="width: calc(2*3rem + 1px)"></div>
</div>
</div>
@@ -75,6 +75,7 @@
<script lang="ts">
import { defineComponent, PropType, computed, ref, nextTick, ComponentPublicInstance } from 'vue'
import { useI18n } from 'vue-i18n'
import ItemModifierText from '../../ui/ItemModifierText.vue'
import { Config } from '@/web/Config'
import { ParsedItem } from '@/parser'
@@ -172,7 +173,10 @@ export default defineComponent({
}
}
const { t } = useI18n()
return {
t,
showMinmaxInput,
showTypeTags,
showQ20Notice,
src/web/price-check/filters/FilterName.vue
+7 -4
View File
@@ -4,19 +4,19 @@
:class="{ 'border-gray-500': showAsActive, 'border-gray-900': !showAsActive }"
@click="toggleAccuracy">{{ label }}</button>
<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>
<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 lang="ts">
import { defineComponent, PropType, computed } from 'vue'
import { useI18n } from 'vue-i18n'
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 defineComponent({
name: 'FilterName',
@@ -31,6 +31,8 @@ export default defineComponent({
}
},
setup (props, ctx) {
const { t } = useI18n()
const label = computed(() => {
if (props.filters.name) {
return TRANSLATED_ITEM_NAME_BY_REF.get(props.filters.name.value) ||
@@ -41,7 +43,7 @@ export default defineComponent({
props.filters.baseType.value
}
if (props.filters.category) {
return i18n.global.t(`Category: ${props.filters.category.value}`)
return t(`Category: ${props.filters.category.value}`)
}
return '??? Report if you see this text'
@@ -80,6 +82,7 @@ export default defineComponent({
})
return {
t,
label,
showAsActive,
toggleAccuracy,
src/web/price-check/filters/FilterNumericEditable.vue
+5 -1
View File
@@ -1,7 +1,7 @@
<template>
<div v-if="filter"
class="trade-tag trade-tag--box flex" :class="{ disabled: filter.disabled }">
<button @click="filter.disabled = !filter.disabled" class="pl-2">{{ $t(name) }}</button>
<button @click="filter.disabled = !filter.disabled" class="pl-2">{{ t(name) }}</button>
<ui-input-debounced class="trade-tag__input" step="any" type="number"
v-model.number="filterValue"
:placeholder="filter.value"
@@ -14,6 +14,7 @@
<script lang="ts">
import { defineComponent, PropType, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { FilterNumeric } from './interfaces'
export default defineComponent({
@@ -53,7 +54,10 @@ export default defineComponent({
props.filter!.disabled = false
}
const { t } = useI18n()
return {
t,
filterValue,
inputFocus
}
src/web/price-check/filters/FilterVeiled.vue
+7 -3
View File
@@ -2,16 +2,16 @@
<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>
<span>{{ t(text) }}</span>
<i v-if="showIcon" class="fas fa-caret-down pl-2 text-gray-400"></i>
</div>
</template>
<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>
<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>
<ui-toggle v-model="filters.veiled.disabled">{{ t('Disable filter') }}</ui-toggle>
</div>
</template>
</ui-popover>
@@ -19,6 +19,7 @@
<script lang="ts">
import { defineComponent, PropType, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { VEILED_STAT } from './veiled'
import { ItemRarity, ParsedItem } from '@/parser'
import { ItemFilters } from './interfaces'
@@ -51,7 +52,10 @@ export default defineComponent({
props.item.rarity !== ItemRarity.Unique
})
const { t } = useI18n()
return {
t,
text,
options,
showIcon
src/web/price-check/filters/FiltersBlock.vue
+25 -21
View File
@@ -2,58 +2,58 @@
<div>
<div class="flex flex-wrap items-center pb-2 -mx-1 -mt-1" @mouseleave="handleMouseLeaveStats">
<button v-if="filters.linkedSockets" class="trade-tag" :class="{ disabled: filters.linkedSockets.disabled }"
@click="filters.linkedSockets.disabled = !filters.linkedSockets.disabled">{{ $t('Links: {0}', [filters.linkedSockets.value]) }}</button>
<div v-if="filters.mapTier" class="trade-tag">{{ $t('Map Tier: {0}', [filters.mapTier.value]) }}</div>
<div v-if="filters.areaLevel" class="trade-tag">{{ $t('Area Level: {0}', [filters.areaLevel.value]) }}</div>
<div v-if="filters.heistJob" class="trade-tag">{{ $t(`${filters.heistJob.name} (lvl {0})`, [filters.heistJob.level]) }}</div>
<div v-if="filters.mapBlighted" class="trade-tag">{{ $t('Blighted') }}</div>
<div v-if="filters.discriminator" class="trade-tag">{{ $t(filters.discriminator.value) }}</div>
@click="filters.linkedSockets.disabled = !filters.linkedSockets.disabled">{{ t('Links: {0}', [filters.linkedSockets.value]) }}</button>
<div v-if="filters.mapTier" class="trade-tag">{{ t('Map Tier: {0}', [filters.mapTier.value]) }}</div>
<div v-if="filters.areaLevel" class="trade-tag">{{ t('Area Level: {0}', [filters.areaLevel.value]) }}</div>
<div v-if="filters.heistJob" class="trade-tag">{{ t(`${filters.heistJob.name} (lvl {0})`, [filters.heistJob.level]) }}</div>
<div v-if="filters.mapBlighted" class="trade-tag">{{ t('Blighted') }}</div>
<div v-if="filters.discriminator" class="trade-tag">{{ t(filters.discriminator.value) }}</div>
<filter-numeric-editable :filter="filters.itemLevel" name="Item Level:" />
<filter-numeric-editable :filter="filters.stackSize" name="Stock:" />
<button v-if="filters.whiteSockets" class="trade-tag" :class="{ disabled: filters.whiteSockets.disabled }"
@click="filters.whiteSockets.disabled = !filters.whiteSockets.disabled">{{ $t('White: {0}', [filters.whiteSockets.value]) }}</button>
@click="filters.whiteSockets.disabled = !filters.whiteSockets.disabled">{{ t('White: {0}', [filters.whiteSockets.value]) }}</button>
<button v-if="filters.gemLevel" class="trade-tag" :class="{ disabled: filters.gemLevel.disabled }"
@click="filters.gemLevel.disabled = !filters.gemLevel.disabled">{{ $t('Level: {0}', [filters.gemLevel.min]) }}</button>
@click="filters.gemLevel.disabled = !filters.gemLevel.disabled">{{ t('Level: {0}', [filters.gemLevel.min]) }}</button>
<button v-if="filters.quality" class="trade-tag" :class="{ disabled: filters.quality.disabled }"
@click="filters.quality.disabled = !filters.quality.disabled">{{ $t('Quality: {0}%', [filters.quality.value]) }}</button>
@click="filters.quality.disabled = !filters.quality.disabled">{{ t('Quality: {0}%', [filters.quality.value]) }}</button>
<button v-if="filters.altQuality" class="trade-tag" :class="{ disabled: filters.altQuality.disabled }"
@click="filters.altQuality.disabled = !filters.altQuality.disabled">{{ $t(filters.altQuality.value) }}</button>
@click="filters.altQuality.disabled = !filters.altQuality.disabled">{{ t(filters.altQuality.value) }}</button>
<template v-if="filters.influences">
<button v-for="influence of filters.influences" :key="influence.value" class="trade-tag flex items-center"
:class="{ disabled: influence.disabled }"
@click="influence.disabled = !influence.disabled">
<template v-if="influence.value === 'Shaper'">
<img class="w-5 h-5 -m-1" src="@/assets/influence/Shaper.png">
<span class="ml-2">{{ $t('Shaper') }}</span>
<span class="ml-2">{{ t('Shaper') }}</span>
</template>
<template v-if="influence.value === 'Elder'">
<img class="w-5 h-5 -m-1" src="@/assets/influence/Elder.png">
<span class="ml-2">{{ $t('Elder') }}</span>
<span class="ml-2">{{ t('Elder') }}</span>
</template>
<template v-if="influence.value === 'Crusader'">
<img class="w-5 h-5 -m-1" src="@/assets/influence/Crusader.png">
<span class="ml-2">{{ $t('Crusader') }}</span>
<span class="ml-2">{{ t('Crusader') }}</span>
</template>
<template v-if="influence.value === 'Hunter'">
<img class="w-5 h-5 -m-1" src="@/assets/influence/Hunter.png">
<span class="ml-2">{{ $t('Hunter') }}</span>
<span class="ml-2">{{ t('Hunter') }}</span>
</template>
<template v-if="influence.value === 'Redeemer'">
<img class="w-5 h-5 -m-1" src="@/assets/influence/Redeemer.png">
<span class="ml-2">{{ $t('Redeemer') }}</span>
<span class="ml-2">{{ t('Redeemer') }}</span>
</template>
<template v-if="influence.value === 'Warlord'">
<img class="w-5 h-5 -m-1" src="@/assets/influence/Warlord.png">
<span class="ml-2">{{ $t('Warlord') }}</span>
<span class="ml-2">{{ t('Warlord') }}</span>
</template>
</button>
</template>
<button v-if="filters.unidentified" class="trade-tag" :class="{ disabled: filters.unidentified.disabled }"
@click="filters.unidentified.disabled = !filters.unidentified.disabled">{{ $t('Unidentified') }}</button>
@click="filters.unidentified.disabled = !filters.unidentified.disabled">{{ t('Unidentified') }}</button>
<filter-veiled :item="item" :filters="filters" />
<button v-if="stats.length" class="trade-tag" :class="{ disabled: totalSelectedMods === 0 }" @click="toggleStatsBlock">
<span v-if="totalSelectedMods === 0">{{ $t('Stats ignored') }}</span>
<span v-else>{{ $t('{0} of {1}, stats', [totalSelectedMods, stats.length]) }}</span>
<span v-if="totalSelectedMods === 0">{{ t('Stats ignored') }}</span>
<span v-else>{{ t('{0} of {1}, stats', [totalSelectedMods, stats.length]) }}</span>
<i v-if="!showStatsBlock" class="fas fa-chevron-down pl-2 text-xs text-gray-400"></i>
</button>
</div>
@@ -67,12 +67,12 @@
</form>
<div class="flex">
<button @click="toggleStatsBlock" class="bg-gray-700 px-2 py-1 text-gray-400 leading-none rounded-b w-40"
>{{ $t('Collapse') }} <i class="fas fa-chevron-up pl-1 text-xs text-gray-600"></i></button>
>{{ t('Collapse') }} <i class="fas fa-chevron-up pl-1 text-xs text-gray-600"></i></button>
<button v-if="shownStats.length != stats.length"
@click="showHidden = !showHidden" class="ml-2 px-2 pt-2 flex items-center leading-none">
<i v-if="showHidden" class="fas fa-toggle-on pr-1 text-gray-300"></i>
<i v-else class="fas fa-toggle-off pr-1 text-gray-600"></i>
<span class="text-gray-400">{{ $t('Hidden') }}</span>
<span class="text-gray-400">{{ t('Hidden') }}</span>
</button>
</div>
</div>
@@ -81,6 +81,7 @@
<script lang="ts">
import { defineComponent, watch, ref, computed, PropType } from 'vue'
import { useI18n } from 'vue-i18n'
import FilterModifier from './FilterModifier.vue'
import FilterVeiled from './FilterVeiled.vue'
import FilterNumericEditable from './FilterNumericEditable.vue'
@@ -117,7 +118,10 @@ export default defineComponent({
showHidden.value = false
})
const { t } = useI18n()
return {
t,
showStatsBlock,
showHidden,
totalSelectedMods: computed(() => {
src/web/price-check/stack-value/StackValue.vue
+6 -2
View File
@@ -3,15 +3,16 @@
class="p-2 border-dashed border border-gray-600 rounded mt-2">
<div class="flex text-gray-400 leading-none">
<div class="w-1/2"
>{{ $t('You have') }} <span class="font-sans">×</span> {{ value.have.amount }} <i class="fas fa-arrow-right text-gray-600 px-1 text-xs"></i> {{ value.have.price }}</div>
>{{ t('You have') }} <span class="font-sans">×</span> {{ value.have.amount }} <i class="fas fa-arrow-right text-gray-600 px-1 text-xs"></i> {{ value.have.price }}</div>
<div class="w-1/2 pl-2" v-if="value.oneStack"
>{{ $t('Stack') }} <span class="font-sans">×</span> {{ value.oneStack.amount }} <i class="fas fa-arrow-right text-gray-600 px-1 text-xs"></i> {{ value.oneStack.price }}</div>
>{{ t('Stack') }} <span class="font-sans">×</span> {{ value.oneStack.amount }} <i class="fas fa-arrow-right text-gray-600 px-1 text-xs"></i> {{ value.oneStack.price }}</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { displayRounding, findByDetailsId, autoCurrency } from '../../background/Prices'
import { getDetailsId } from '../trends/getDetailsId'
import { ParsedItem } from '@/parser'
@@ -39,7 +40,10 @@ export default defineComponent({
return `${displayRounding(price.val, true)} ${price.curr === 'c' ? 'chaos' : 'exa'}`
}
const { t } = useI18n()
return {
t,
show: computed(() => {
const id = getDetailsId(props.item)
return Boolean(props.filters.stackSize && id && findByDetailsId(id))
src/web/price-check/unidentified-resolver/UnidentifiedResolver.vue
+5 -1
View File
@@ -1,7 +1,7 @@
<template>
<div v-if="show" class="layout-column">
<div class="m-4 py-1 px-2 bg-gray-900 rounded">
{{ $t('You are trying to price check unidentified Unique item with base type "{0}". Which one?', [baseType]) }}
{{ t('You are trying to price check unidentified Unique item with base type "{0}". Which one?', [baseType]) }}
</div>
<div class="overflow-auto pb-4 px-4">
<div class="flex flex-wrap -m-1">
@@ -18,6 +18,7 @@
<script lang="ts">
import { defineComponent, PropType, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { UNIQUES_LIST, TRANSLATED_ITEM_NAME_BY_REF } from '@/assets/data'
import { ItemRarity, ParsedItem } from '@/parser'
@@ -75,7 +76,10 @@ export default defineComponent({
ctx.emit('identify', newItem)
}
const { t } = useI18n()
return {
t,
identifiedVariants,
show,
baseType,