52 lines
1.1 KiB
Vue
52 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { SUPPORTED_LOCALES, setI18nLanguage } from '~/init/locale'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useStore } from '~/store'
|
|
|
|
import Modal from '~/components/ui/Modal.vue'
|
|
import Button from '~/components/ui/Button.vue'
|
|
import Layout from '~/components/ui/Layout.vue'
|
|
import { computed } from 'vue'
|
|
|
|
const { t, locale } = useI18n()
|
|
const store = useStore()
|
|
|
|
const modalName = 'languages'
|
|
|
|
const isOpen = computed({
|
|
get() {
|
|
return store.state.ui.modalsOpen.has(modalName);
|
|
},
|
|
set(value) {
|
|
store.commit('ui/setModal', [modalName, value]);
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Modal overPopover
|
|
:title="t('components.common.UserMenu.label.language')"
|
|
v-model="isOpen"
|
|
>
|
|
<Layout columns :column-width="140">
|
|
<Button ghost thin
|
|
v-for="(language, key) in SUPPORTED_LOCALES"
|
|
width="full"
|
|
align-text="left"
|
|
:aria-pressed="key===locale"
|
|
:key="key"
|
|
@click="setI18nLanguage(key)"
|
|
>
|
|
{{ language }}
|
|
</Button>
|
|
</Layout>
|
|
</Modal>
|
|
</template>
|
|
|
|
<style module>
|
|
.description {
|
|
font-size: 0.875em;
|
|
}
|
|
</style>
|