112 lines
3.1 KiB
Vue
112 lines
3.1 KiB
Vue
|
<script setup>
|
||
|
|
import { Dark, Quasar } from 'quasar';
|
||
|
|
import { computed } from 'vue';
|
||
|
|
import { useI18n } from 'vue-i18n';
|
||
|
|
|
||
|
|
const { t, locale } = useI18n();
|
||
|
|
|
||
|
|
const userLocale = computed({
|
||
|
|
get() {
|
||
|
|
return locale.value;
|
||
|
|
},
|
||
|
|
set(value) {
|
||
|
|
locale.value = value;
|
||
|
|
|
||
|
|
if (value === 'en') value = 'en-GB';
|
||
|
|
|
||
|
|
// FIXME: Dynamic imports from absolute paths are not compatible with vite:
|
||
|
|
// https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations
|
||
|
|
try {
|
||
|
|
const langList = import.meta.glob('../../node_modules/quasar/lang/*.mjs');
|
||
|
|
langList[`../../node_modules/quasar/lang/${value}.mjs`]().then((lang) => {
|
||
|
|
Quasar.lang.set(lang.default);
|
||
|
|
});
|
||
|
|
} catch (error) {
|
||
|
|
//
|
||
|
|
}
|
||
|
|
},
|
||
|
|
});
|
||
|
|
const darkMode = computed({
|
||
|
|
get() {
|
||
|
|
return Dark.isActive;
|
||
|
|
},
|
||
|
|
set(value) {
|
||
|
|
Dark.set(value);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
const langs = ['en', 'es'];
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<QLayout view="hHh LpR fFf">
|
||
|
|
<QHeader reveal class="bg-dark">
|
||
|
|
<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="q-pa-lg formCard">
|
||
|
|
<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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.formCard {
|
||
|
|
max-width: 350px;
|
||
|
|
min-width: 300px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: $breakpoint-xs-max) {
|
||
|
|
.formCard {
|
||
|
|
min-width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|