mirror of
https://github.com/ArthurDanjou/artsite.git
synced 2026-01-14 18:59:59 +01:00
67 lines
1.5 KiB
Vue
67 lines
1.5 KiB
Vue
<script lang="ts" setup>
|
|
const openSelectMenu = ref(false)
|
|
|
|
const { locale, setLocale, locales, t } = useI18n()
|
|
const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])
|
|
const lang = ref(locale.value)
|
|
watch(lang, () => changeLocale(lang.value))
|
|
|
|
async function changeLocale(newLocale: string) {
|
|
document.body.style.animation = 'switch-on .2s'
|
|
await new Promise(resolve => setTimeout(resolve, 200))
|
|
|
|
await setLocale(newLocale as 'en' | 'fr' | 'es')
|
|
document.body.style.animation = 'switch-off .5s'
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 200))
|
|
document.body.style.animation = ''
|
|
}
|
|
|
|
defineShortcuts({
|
|
l: () => lang.value = currentLocale.value!.code === 'en' ? 'fr' : currentLocale.value!.code === 'fr' ? 'es' : 'en',
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<ClientOnly>
|
|
<ThemeSwitcher />
|
|
<UTooltip
|
|
:kbds="['L']"
|
|
:text="t('language')"
|
|
class="cursor-pointer"
|
|
:delay-duration="4"
|
|
:content="{
|
|
align: 'center',
|
|
side: 'right',
|
|
sideOffset: 8,
|
|
}"
|
|
>
|
|
<USelect
|
|
v-model="lang"
|
|
v-model:open="openSelectMenu"
|
|
:items="locales"
|
|
size="sm"
|
|
:leading-icon="(currentLocale!.icon as string)"
|
|
label-key="label"
|
|
value-key="code"
|
|
variant="soft"
|
|
@update:model-value="changeLocale"
|
|
/>
|
|
</UTooltip>
|
|
</ClientOnly>
|
|
</template>
|
|
|
|
<i18n lang="json">
|
|
{
|
|
"en": {
|
|
"language": "change language"
|
|
},
|
|
"fr": {
|
|
"language": "changer de langue"
|
|
},
|
|
"es": {
|
|
"language": "cambiar idioma"
|
|
}
|
|
}
|
|
</i18n>
|