forked from cerc-io/cosmos-explorer
feat: i18n ui
This commit is contained in:
parent
1f6cee1d2d
commit
d39b4caf16
@ -1,56 +1,48 @@
|
||||
<script setup lang="ts">
|
||||
import type { Anchor } from 'vuetify/lib/components'
|
||||
import type { I18nLanguage } from '@layouts/types'
|
||||
import { Icon } from '@iconify/vue';
|
||||
import type { Anchor } from 'vuetify/lib/components';
|
||||
import type { I18nLanguage } from '@layouts/types';
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
location: 'bottom end',
|
||||
})
|
||||
});
|
||||
|
||||
defineEmits<{
|
||||
(e: 'change', id: string): void
|
||||
}>()
|
||||
(e: 'change', id: string): void;
|
||||
}>();
|
||||
|
||||
interface Props {
|
||||
languages: I18nLanguage[]
|
||||
location?: Anchor
|
||||
languages: I18nLanguage[];
|
||||
location?: Anchor;
|
||||
}
|
||||
|
||||
const { locale } = useI18n({ useScope: 'global' })
|
||||
const { locale } = useI18n({ useScope: 'global' });
|
||||
|
||||
watch(locale, val => {
|
||||
document.documentElement.setAttribute('lang', val as string)
|
||||
})
|
||||
watch(locale, (val) => {
|
||||
document.documentElement.setAttribute('lang', val as string);
|
||||
});
|
||||
|
||||
const currentLang = ref([localStorage.getItem('lang')|| 'en'])
|
||||
const currentLang = ref([localStorage.getItem('lang') || 'en']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IconBtn>
|
||||
<VIcon icon="mdi-translate" />
|
||||
|
||||
<!-- Menu -->
|
||||
<VMenu
|
||||
activator="parent"
|
||||
:location="props.location"
|
||||
offset="14px"
|
||||
<div class="dropdown dropdown-end">
|
||||
<label tabindex="0" class="btn btn-ghost btn-circle btn-sm mx-1">
|
||||
<Icon icon="mdi-translate" style="font-size: 24px" />
|
||||
</label>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52"
|
||||
>
|
||||
<!-- List -->
|
||||
<VList
|
||||
v-model:selected="currentLang"
|
||||
active-color="primary"
|
||||
min-width="175px"
|
||||
>
|
||||
<!-- List item -->
|
||||
<VListItem
|
||||
v-for="lang in props.languages"
|
||||
:key="lang.i18nLang"
|
||||
:value="lang.i18nLang"
|
||||
@click="locale = lang.i18nLang; $emit('change', lang.i18nLang)"
|
||||
<li v-for="lang in props.languages" :key="lang.i18nLang">
|
||||
<a
|
||||
@click="
|
||||
locale = lang.i18nLang;
|
||||
$emit('change', lang.i18nLang);
|
||||
"
|
||||
>{{ lang.label }}</a
|
||||
>
|
||||
<!-- Language label -->
|
||||
<VListItemTitle>{{ lang.label }}</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
</IconBtn>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
Loading…
Reference in New Issue
Block a user