94 lines
2.6 KiB
Vue
94 lines
2.6 KiB
Vue
<script setup>
|
|
import { Dark, Quasar } from 'quasar';
|
|
import { computed, onMounted } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { localeEquivalence } from 'src/i18n/index';
|
|
import quasarLang from 'src/utils/quasarLang';
|
|
import { langs } from 'src/boot/defaults/constants.js';
|
|
|
|
const { t, locale } = useI18n();
|
|
const userLocale = computed({
|
|
get() {
|
|
return locale.value;
|
|
},
|
|
set(value) {
|
|
locale.value = value;
|
|
|
|
value = localeEquivalence[value] ?? value;
|
|
|
|
quasarLang(value);
|
|
},
|
|
});
|
|
|
|
const darkMode = computed({
|
|
get() {
|
|
return Dark.isActive;
|
|
},
|
|
set(value) {
|
|
Dark.set(value);
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<QLayout view="hHh LpR fFf">
|
|
<QHeader reveal class="bg-vn-section-color">
|
|
<QToolbar class="justify-end">
|
|
<QBtn
|
|
id="switchLanguage"
|
|
:label="t('globals.language')"
|
|
icon="translate"
|
|
color="primary"
|
|
size="sm"
|
|
flat
|
|
rounded
|
|
>
|
|
<QMenu auto-close>
|
|
<QList dense v-for="lang in langs" :key="lang">
|
|
<QItem
|
|
@click="userLocale = lang"
|
|
:active="userLocale == lang"
|
|
v-ripple
|
|
clickable
|
|
>
|
|
{{ t(`globals.lang.${lang}`) }}
|
|
</QItem>
|
|
</QList>
|
|
</QMenu>
|
|
</QBtn>
|
|
<QList>
|
|
<QItem>
|
|
<QItemSection>
|
|
<QToggle
|
|
v-model="darkMode"
|
|
checked-icon="dark_mode"
|
|
unchecked-icon="light_mode"
|
|
:label="t(`globals.darkMode`)"
|
|
/>
|
|
</QItemSection>
|
|
</QItem>
|
|
</QList>
|
|
</QToolbar>
|
|
</QHeader>
|
|
<QPageContainer>
|
|
<QPage>
|
|
<div class="form">
|
|
<QCard class="flex flex-center">
|
|
<RouterView></RouterView>
|
|
</QCard>
|
|
</div>
|
|
</QPage>
|
|
</QPageContainer>
|
|
</QLayout>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.form {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: inherit;
|
|
flex-direction: column;
|
|
}
|
|
</style>
|