The search header's filter labels follow a mid-session language switch

The eight labels came from tStatic inside a computed. tStatic reads a plain window global the
computed cannot track, so its only dependency was props.labels and the row stayed in the boot
language after the host switched locale. They now go through useOptionalT, which calls the
host's vue-i18n (a reactive locale) when installed and falls back to tStatic when not; English
stays the fallback and a host's own labels still win.
This commit is contained in:
Doxa Maps 2026-09-28 13:07:02 +00:00
parent 7386730079
commit ce82467dae

View file

@ -1,5 +1,5 @@
<script setup>
import { tStatic } from '@map/i18n/index.js'
import { useOptionalT } from '@map/composables/useOptionalT.js'
/**
* SearchFilterHeader.vue — SHARED (@map/components/search/SearchFilterHeader.vue).
*
@ -85,15 +85,20 @@ const useFilters = computed(() => truthy(props.showFilters))
// no `labels` gets — which is every host — so in ar/zh/ru/hi the filter row, its aria label, the
// chip remove buttons and the "World" empty state all read English above translated content.
// The catalogue answers first now; a host's own labels still win, which is what the prop is for.
// Through the host's vue-i18n when it installed one: its t() reads the locale ref, so this computed
// re-runs on a mid-session language switch. tStatic reads a plain global the computed cannot track,
// which left all eight labels in the boot language (check:frozen-labels).
const tr = useOptionalT('')
const T = (key, en) => { const v = tr(key); return v && v !== key ? v : en }
const L = computed(() => ({
show_filters: tStatic('grid.show_filters') || 'Show Filters',
hide_filters: tStatic('grid.hide_filters') || 'Hide Filters',
clear_all: tStatic('grid.clear_all') || 'Clear All',
type_to_search: tStatic('grid.type_to_search') || 'Type to search...',
filters: tStatic('dashboard.filters') || 'Filters',
selected: tStatic('dashboard.selected') || 'Selected',
world: tStatic('dashboard.world') || 'World',
remove: tStatic('dashboard.remove_filter') || 'Remove',
show_filters: T('grid.show_filters', 'Show Filters'),
hide_filters: T('grid.hide_filters', 'Hide Filters'),
clear_all: T('grid.clear_all', 'Clear All'),
type_to_search: T('grid.type_to_search', 'Type to search...'),
filters: T('dashboard.filters', 'Filters'),
selected: T('dashboard.selected', 'Selected'),
world: T('dashboard.world', 'World'),
remove: T('dashboard.remove_filter', 'Remove'),
...props.labels,
}))