多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

156 lines
3.5 KiB

<template>
<div>
<v-menu top offset-y>
<template #activator="{ on }">
<v-icon size="20" class="ml-2 nc-menu-translate" v-on="on">
mdi-translate
</v-icon>
</template>
<v-list dense class="nc-language-list">
<v-list-item-group v-model="language">
<v-list-item
v-for="lan in languages"
:key="lan.value"
dense
:value="lan"
color="primary"
@click="changeLan(lan)"
>
<v-list-item-subtitle class="text-capitalize">
{{ labels[lan] || lan }}
</v-list-item-subtitle>
</v-list-item>
</v-list-item-group>
<v-divider />
<v-list-item>
<a
href="https://docs.nocodb.com/engineering/translation/#how-to-contribute--for-community-members"
target="_blank"
class="caption"
>
<!--Help translate-->
{{ $t("activity.translate") }}
</a>
</v-list-item>
</v-list>
</v-menu>
</div>
</template>
<script>
export default {
name: 'Language',
data: () => ({
labels: {
de: 'Deutsch',
en: 'English',
es: 'Español',
fa: 'فارسی',
fr: 'Français',
id: 'Bahasa Indonesia',
ja: '日本語',
it_IT: 'Italiano',
ko: '한국인',
lv: 'Latviešu',
nl: 'Nederlandse',
ru: 'Pусский',
zh_CN: '大陆简体',
zh_HK: '香港繁體',
zh_TW: '臺灣正體',
sv: 'Svenska',
tr: 'Turkish',
da: 'Dansk',
vi: 'Tiếng Việt',
no: 'Norsk',
iw: ִברִית',
fi: 'Suomalainen',
uk: 'Українська',
hr: 'Hrvatski',
th: 'ไทย',
sl: 'Slovenščina',
pt_BR: 'Português (Brasil)'
}
}),
computed: {
languages() {
return ((this.$i18n && this.$i18n.availableLocales) || ['en']).sort()
},
language: {
get() {
return this.$store.state.settings.language
},
set(val) {
this.$store.commit('settings/MutLanguage', val)
this.applyDirection()
}
}
},
mounted() {
this.applyDirection()
},
methods: {
applyDirection() {
const targetDirection = this.isRtlLang() ? 'rtl' : 'ltr'
const oppositeDirection = targetDirection == 'ltr' ? 'rtl' : 'ltr'
document.body.classList.remove(oppositeDirection)
document.body.classList.add(targetDirection)
document.body.style.direction = targetDirection
},
isRtlLang() {
return ['fa'].includes(this.language)
},
changeLan(lan) {
this.language = lan
const count = 200
const defaults = {
origin: { y: 0.7 }
}
function fire(particleRatio, opts) {
window.confetti(
Object.assign({}, defaults, opts, {
particleCount: Math.floor(count * particleRatio)
})
)
}
fire(0.25, {
spread: 26,
startVelocity: 55
})
fire(0.2, {
spread: 60
})
fire(0.35, {
spread: 100,
decay: 0.91,
scalar: 0.8
})
fire(0.1, {
spread: 120,
startVelocity: 25,
decay: 0.92,
scalar: 1.2
})
fire(0.1, {
spread: 120,
startVelocity: 45
})
this.$e('c:navbar:lang', { lang: lan })
}
}
}
</script>
<style scoped lang="scss">
::v-deep {
.nc-language-list {
max-height: 90vh;
overflow: auto;
.v-list-item {
min-height: 30px !important;
}
}
}
</style>