Skip to content

Commit 9a9c10f

Browse files
serhalpserhalp
committed
refactor: use $t() global
1 parent 4288263 commit 9a9c10f

3 files changed

Lines changed: 33 additions & 39 deletions

File tree

‎app/components/compare/FacetSelector.vue‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22
import type { ComparisonFacet } from '#shared/types'
33
import { FACET_INFO, FACETS_BY_CATEGORY, CATEGORY_ORDER } from '#shared/types/comparison'
44
5-
const { t } = useI18n()
6-
75
const {
86
isFacetSelected,
97
toggleFacet,
@@ -46,12 +44,12 @@ function isCategoryNoneSelected(category: string): boolean {
4644
</script>
4745

4846
<template>
49-
<div class="space-y-3" role="group" :aria-label="t('compare.facets.group_label')">
47+
<div class="space-y-3" role="group" :aria-label="$t('compare.facets.group_label')">
5048
<div v-for="category in CATEGORY_ORDER" :key="category">
5149
<!-- Category header with all/none buttons -->
5250
<div class="flex items-center gap-2 mb-2">
5351
<span class="text-[10px] text-fg-subtle uppercase tracking-wider">
54-
{{ t(`compare.facets.categories.${category}`) }}
52+
{{ $t(`compare.facets.categories.${category}`) }}
5553
</span>
5654
<button
5755
type="button"
@@ -62,14 +60,14 @@ function isCategoryNoneSelected(category: string): boolean {
6260
: 'text-fg-muted/60 hover:text-fg-muted'
6361
"
6462
:aria-label="
65-
t('compare.facets.select_category', {
66-
category: t(`compare.facets.categories.${category}`),
63+
$t('compare.facets.select_category', {
64+
category: $t(`compare.facets.categories.${category}`),
6765
})
6866
"
6967
:disabled="isCategoryAllSelected(category)"
7068
@click="selectCategory(category)"
7169
>
72-
{{ t('compare.facets.all') }}
70+
{{ $t('compare.facets.all') }}
7371
</button>
7472
<span class="text-[10px] text-fg-muted/40">/</span>
7573
<button
@@ -81,14 +79,14 @@ function isCategoryNoneSelected(category: string): boolean {
8179
: 'text-fg-muted/60 hover:text-fg-muted'
8280
"
8381
:aria-label="
84-
t('compare.facets.deselect_category', {
85-
category: t(`compare.facets.categories.${category}`),
82+
$t('compare.facets.deselect_category', {
83+
category: $t(`compare.facets.categories.${category}`),
8684
})
8785
"
8886
:disabled="isCategoryNoneSelected(category)"
8987
@click="deselectCategory(category)"
9088
>
91-
{{ t('compare.facets.none') }}
89+
{{ $t('compare.facets.none') }}
9290
</button>
9391
</div>
9492

@@ -98,7 +96,7 @@ function isCategoryNoneSelected(category: string): boolean {
9896
v-for="{ facet, info } in facetsByCategory[category]"
9997
:key="facet"
10098
type="button"
101-
:title="info.comingSoon ? t('compare.facets.coming_soon') : info.description"
99+
:title="info.comingSoon ? $t('compare.facets.coming_soon') : info.description"
102100
:disabled="info.comingSoon"
103101
:aria-pressed="isFacetSelected(facet)"
104102
:aria-label="info.label"
@@ -120,7 +118,7 @@ function isCategoryNoneSelected(category: string): boolean {
120118
/>
121119
{{ info.label }}
122120
<span v-if="info.comingSoon" class="text-[9px]"
123-
>({{ t('compare.facets.coming_soon') }})</span
121+
>({{ $t('compare.facets.coming_soon') }})</span
124122
>
125123
</button>
126124
</div>

‎app/components/compare/PackageSelector.vue‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
<script setup lang="ts">
22
import { debounce } from 'perfect-debounce'
33
4-
const { t } = useI18n()
5-
64
const packages = defineModel<string[]>({ required: true })
75
86
const props = defineProps<{
@@ -99,7 +97,7 @@ function handleBlur() {
9997
<button
10098
type="button"
10199
class="text-fg-subtle hover:text-fg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
102-
:aria-label="t('compare.selector.remove_package', { package: pkg })"
100+
:aria-label="$t('compare.selector.remove_package', { package: pkg })"
103101
@click="removePackage(pkg)"
104102
>
105103
<span class="i-carbon:close block w-3.5 h-3.5" aria-hidden="true" />
@@ -121,8 +119,8 @@ function handleBlur() {
121119
type="text"
122120
:placeholder="
123121
packages.length === 0
124-
? t('compare.selector.search_first')
125-
: t('compare.selector.search_add')
122+
? $t('compare.selector.search_first')
123+
: $t('compare.selector.search_add')
126124
"
127125
class="w-full bg-bg-subtle border border-border rounded-lg ps-10 pe-4 py-2.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-accent focus-visible:outline-none"
128126
aria-autocomplete="list"
@@ -145,7 +143,7 @@ function handleBlur() {
145143
class="absolute top-full inset-x-0 mt-1 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 max-h-64 overflow-y-auto"
146144
>
147145
<div v-if="isSearching" class="px-4 py-3 text-sm text-fg-muted">
148-
{{ t('compare.selector.searching') }}
146+
{{ $t('compare.selector.searching') }}
149147
</div>
150148
<button
151149
v-for="result in filteredResults"
@@ -165,8 +163,8 @@ function handleBlur() {
165163

166164
<!-- Hint -->
167165
<p class="text-xs text-fg-subtle">
168-
{{ t('compare.selector.packages_selected', { count: packages.length, max: maxPackages }) }}
169-
<span v-if="packages.length < 2">{{ t('compare.selector.add_hint') }}</span>
166+
{{ $t('compare.selector.packages_selected', { count: packages.length, max: maxPackages }) }}
167+
<span v-if="packages.length < 2">{{ $t('compare.selector.add_hint') }}</span>
170168
</p>
171169
</div>
172170
</template>

‎app/pages/compare.vue‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22
import { FACET_INFO, type ComparisonFacet } from '#shared/types/comparison'
33
import { useRouteQuery } from '@vueuse/router'
44
5-
const { t } = useI18n()
6-
75
definePageMeta({
86
name: 'compare',
97
})
@@ -47,30 +45,30 @@ const gridHeaders = computed(() => {
4745
useSeoMeta({
4846
title: () =>
4947
packages.value.length > 0
50-
? t('compare.packages.meta_title', { packages: packages.value.join(' vs ') })
51-
: t('compare.packages.meta_title_empty'),
48+
? $t('compare.packages.meta_title', { packages: packages.value.join(' vs ') })
49+
: $t('compare.packages.meta_title_empty'),
5250
description: () =>
5351
packages.value.length > 0
54-
? t('compare.packages.meta_description', { packages: packages.value.join(', ') })
55-
: t('compare.packages.meta_description_empty'),
52+
? $t('compare.packages.meta_description', { packages: packages.value.join(', ') })
53+
: $t('compare.packages.meta_description_empty'),
5654
})
5755
</script>
5856

5957
<template>
6058
<main class="container py-8 xl:py-12">
6159
<header class="mb-8">
6260
<h1 class="font-mono text-2xl sm:text-3xl font-medium mb-2">
63-
{{ t('compare.packages.title') }}
61+
{{ $t('compare.packages.title') }}
6462
</h1>
6563
<p class="text-fg-muted">
66-
{{ t('compare.packages.tagline') }}
64+
{{ $t('compare.packages.tagline') }}
6765
</p>
6866
</header>
6967

7068
<!-- Package selector -->
7169
<section class="mb-8" aria-labelledby="packages-heading">
7270
<h2 id="packages-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
73-
{{ t('compare.packages.section_packages') }}
71+
{{ $t('compare.packages.section_packages') }}
7472
</h2>
7573
<ComparePackageSelector v-model="packages" :max="4" />
7674
</section>
@@ -79,28 +77,28 @@ useSeoMeta({
7977
<section class="mb-8" aria-labelledby="facets-heading">
8078
<div class="flex items-center gap-2 mb-3">
8179
<h2 id="facets-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
82-
{{ t('compare.packages.section_facets') }}
80+
{{ $t('compare.packages.section_facets') }}
8381
</h2>
8482
<button
8583
type="button"
8684
class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline"
8785
:class="isAllSelected ? 'text-fg-muted' : 'text-fg-muted/60 hover:text-fg-muted'"
8886
:disabled="isAllSelected"
89-
:aria-label="t('compare.facets.select_all')"
87+
:aria-label="$t('compare.facets.select_all')"
9088
@click="selectAll"
9189
>
92-
{{ t('compare.facets.all') }}
90+
{{ $t('compare.facets.all') }}
9391
</button>
9492
<span class="text-[10px] text-fg-muted/40" aria-hidden="true">/</span>
9593
<button
9694
type="button"
9795
class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline"
9896
:class="isNoneSelected ? 'text-fg-muted' : 'text-fg-muted/60 hover:text-fg-muted'"
9997
:disabled="isNoneSelected"
100-
:aria-label="t('compare.facets.deselect_all')"
98+
:aria-label="$t('compare.facets.deselect_all')"
10199
@click="deselectAll"
102100
>
103-
{{ t('compare.facets.none') }}
101+
{{ $t('compare.facets.none') }}
104102
</button>
105103
</div>
106104
<CompareFacetSelector />
@@ -109,11 +107,11 @@ useSeoMeta({
109107
<!-- Comparison grid -->
110108
<section v-if="canCompare" class="mt-10" aria-labelledby="comparison-heading">
111109
<h2 id="comparison-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
112-
{{ t('compare.packages.section_comparison') }}
110+
{{ $t('compare.packages.section_comparison') }}
113111
</h2>
114112

115113
<div v-if="status === 'pending'" class="flex items-center justify-center py-12">
116-
<LoadingSpinner :text="t('compare.packages.loading')" />
114+
<LoadingSpinner :text="$t('compare.packages.loading')" />
117115
</div>
118116

119117
<div v-else-if="packagesData && packagesData.length > 0">
@@ -131,16 +129,16 @@ useSeoMeta({
131129
</div>
132130

133131
<div v-else class="text-center py-12" role="alert">
134-
<p class="text-fg-muted">{{ t('compare.packages.error') }}</p>
132+
<p class="text-fg-muted">{{ $t('compare.packages.error') }}</p>
135133
</div>
136134
</section>
137135

138136
<!-- Empty state -->
139137
<section v-else class="text-center py-16 border border-dashed border-border rounded-lg">
140138
<div class="i-carbon:compare w-12 h-12 text-fg-subtle mx-auto mb-4" aria-hidden="true" />
141-
<h2 class="font-mono text-lg text-fg-muted mb-2">{{ t('compare.packages.empty_title') }}</h2>
139+
<h2 class="font-mono text-lg text-fg-muted mb-2">{{ $t('compare.packages.empty_title') }}</h2>
142140
<p class="text-sm text-fg-subtle max-w-md mx-auto">
143-
{{ t('compare.packages.empty_description') }}
141+
{{ $t('compare.packages.empty_description') }}
144142
</p>
145143
</section>
146144
</main>

0 commit comments

Comments
 (0)