Merge pull request #3099 from nocodb/refactor/language-switcher

packages/nc-gui-v2/components/general/Language.vue

@@ -1,28 +1,33 @@
 <script lang="ts" setup>
-import { useI18n } from 'vue-i18n'
 import { Language } from '~/lib'
-import { useNuxtApp } from '#imports'
+import { onMounted, useGlobal, useI18n, useNuxtApp } from '#imports'
 
-const { $e, $state } = useNuxtApp()
+const { $e } = useNuxtApp()
+
+const { lang: currentLang } = useGlobal()
 
 const { availableLocales = ['en'], locale } = useI18n()
 
 const languages = $computed(() => availableLocales.sort())
 
-const isRtlLang = $computed(() => ['fa'].includes($state.lang.value))
+const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
 
 function applyDirection() {
   const targetDirection = isRtlLang ? 'rtl' : 'ltr'
+
   const oppositeDirection = targetDirection === 'ltr' ? 'rtl' : 'ltr'
+
   document.body.classList.remove(oppositeDirection)
   document.body.classList.add(targetDirection)
   document.body.style.direction = targetDirection
 }
 
 function changeLanguage(lang: string) {
-  $state.lang.value = lang
+  currentLang.value = lang
   locale.value = lang
+
   applyDirection()
+
   $e('c:navbar:lang', { lang })
 }
 
@@ -32,13 +37,12 @@ onMounted(() => {
 </script>
 
 <template>
-  <v-menu class="select-none">
+  <a-dropdown class="select-none" :trigger="['click']">
-    <template #activator="{ props }">
+    <MaterialSymbolsTranslate v-bind="$attrs" class="md:text-xl cursor-pointer nc-menu-translate" />
-      <MaterialSymbolsTranslate v-bind="$attrs" class="md:text-xl cursor-pointer nc-menu-translate" @click="props.onClick" />
-    </template>
 
-    <v-list class="scrollbar min-w-50 max-h-90vh overflow-auto !py-0 dark:(!bg-gray-800 !text-white)">
+    <template #overlay>
-      <v-list-item
+      <a-menu class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0 dark:(!bg-gray-800 !text-white)">
+        <a-menu-item
           v-for="lang of languages"
           :key="lang"
           :class="lang === locale ? '!bg-primary/10 text-primary dark:(!bg-gray-700 !text-secondary)' : ''"
@@ -46,17 +50,15 @@ onMounted(() => {
           :value="lang"
           @click="changeLanguage(lang)"
         >
-        <v-list-item-subtitle
+          <div
-          :class="lang === locale ? '!font-semibold' : ''"
+            :class="lang === locale ? '!font-semibold !text-primary' : ''"
             class="capitalize md:(!leading-8) group-hover:(text-primary font-semibold) dark:(group-hover:text-secondary)"
           >
             {{ Language[lang] || lang }}
-        </v-list-item-subtitle>
+          </div>
-      </v-list-item>
+        </a-menu-item>
-
-      <v-divider />
 
-      <v-list-item>
+        <a-menu-item>
           <a
             href="https://docs.nocodb.com/engineering/translation/#how-to-contribute--for-community-members"
             target="_blank"
@@ -64,13 +66,8 @@ onMounted(() => {
           >
             {{ $t('activity.translate') }}
           </a>
-      </v-list-item>
+        </a-menu-item>
-    </v-list>
+      </a-menu>
-  </v-menu>
+    </template>
+  </a-dropdown>
 </template>
-
-<style scoped>
-.scrollbar {
-  @apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-primary scrollbar-track-white dark:(!scrollbar-track-gray-900);
-}
-</style>

packages/nc-gui-v2/nuxt.config.ts

@@ -106,4 +106,9 @@ export default defineNuxtConfig({
   image: {
     dir: 'assets/',
   },
+
+  autoImports: {
+    dirs: ['./context', './utils', './lib'],
+    imports: [{ name: 'useI18n', from: 'vue-i18n' }],
+  },
 })