57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
languages: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
location: {
|
|
type: null,
|
|
required: false,
|
|
default: 'bottom end',
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['change'])
|
|
|
|
const { locale } = useI18n({ useScope: 'global' })
|
|
|
|
watch(locale, val => {
|
|
document.documentElement.setAttribute('lang', val)
|
|
})
|
|
|
|
const currentLang = ref(['en'])
|
|
</script>
|
|
|
|
<template>
|
|
<IconBtn>
|
|
<VIcon
|
|
size="26"
|
|
icon="tabler-language"
|
|
/>
|
|
|
|
<!-- Menu -->
|
|
<VMenu
|
|
activator="parent"
|
|
:location="props.location"
|
|
offset="14px"
|
|
>
|
|
<!-- List -->
|
|
<VList
|
|
v-model:selected="currentLang"
|
|
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)"
|
|
>
|
|
<!-- Language label -->
|
|
<VListItemTitle>{{ lang.label }}</VListItemTitle>
|
|
</VListItem>
|
|
</VList>
|
|
</VMenu>
|
|
</IconBtn>
|
|
</template>
|