55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import type { InitModule } from '~/types'
|
|
|
|
import { watch } from 'vue'
|
|
import locales from '~/locales.json'
|
|
import { usePreferredLanguages } from '@vueuse/core'
|
|
import { createGettext } from 'vue3-gettext'
|
|
import store from '~/store'
|
|
|
|
const defaultLanguage = store.state.ui.currentLanguage ?? 'en_US'
|
|
export const availableLanguages = locales.reduce((map: Record<string, string>, locale) => {
|
|
map[locale.code] = locale.label
|
|
return map
|
|
}, {})
|
|
|
|
export const gettext = createGettext({
|
|
availableLanguages,
|
|
defaultLanguage,
|
|
silent: true
|
|
})
|
|
|
|
export const install: InitModule = ({ store, app }) => {
|
|
app.use(gettext)
|
|
|
|
// Set default language
|
|
if (!store.state.ui.selectedLanguage) {
|
|
// NOTE: We're selecting the language only once, hence we don't need to make it reactive
|
|
const languages = usePreferredLanguages().value.map((code) => {
|
|
return code.replace(/-/g, '_')
|
|
})
|
|
|
|
let language = Object.keys(availableLanguages).find(code => {
|
|
return languages.includes(code)
|
|
})
|
|
|
|
if (!language) {
|
|
language = Object.keys(availableLanguages).find(code => {
|
|
return languages.map(lang => lang.split('_')[0]).includes(code.split('_')[0])
|
|
})
|
|
}
|
|
|
|
store.commit('ui/currentLanguage', language ?? defaultLanguage)
|
|
}
|
|
|
|
// Handle language change
|
|
watch(() => store.state.ui.currentLanguage, (locale) => {
|
|
const htmlLocale = locale.toLowerCase().replace('_', '-')
|
|
document.documentElement.setAttribute('lang', htmlLocale)
|
|
|
|
if (locale === 'en_US') {
|
|
gettext.current = locale
|
|
store.commit('ui/momentLocale', 'en')
|
|
}
|
|
}, { immediate: true })
|
|
}
|