refactor(gui-v2): language component

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/assets/style-v2.scss

@@ -176,6 +176,7 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
 }
 
 .slide-enter,
+
 .slide-leave-active {
   transform: translate(-100%, 0);
 }
@@ -215,3 +216,25 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
 .ant-tabs-dropdown-menu-title-content{
   @apply flex items-center;
 }
+
+
+
+.ant-dropdown-menu-item-group-list {
+  @apply !mx-0;
+}
+
+.ant-dropdown-menu-item-group-title {
+  @apply border-b-1;
+}
+
+.ant-dropdown-menu-item-group-list {
+  @apply m-0;
+}
+
+.ant-dropdown-menu-item {
+  @apply !py-0 active:(ring ring-pink-500);
+}
+
+.ant-dropdown-menu-title-conten{
+  @apply !py-0;
+}

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

@@ -1,119 +0,0 @@
-<script lang="ts" setup>
-import { Language } from '~/lib'
-import { onMounted, useGlobal, useI18n, useNuxtApp } from '#imports'
-
-const { subMenu } = defineProps<{ subMenu?: boolean }>()
-
-const { $e } = useNuxtApp()
-
-const { lang: currentLang } = useGlobal()
-
-const { availableLocales = ['en'], locale } = useI18n()
-
-const languages = $computed(() => availableLocales.sort())
-
-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) {
-  currentLang.value = lang
-  locale.value = lang
-
-  applyDirection()
-
-  $e('c:navbar:lang', { lang })
-}
-
-onMounted(() => {
-  applyDirection()
-})
-</script>
-
-<template>
-  <template v-if="subMenu">
-    <a-menu class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0 rounded">
-      <a-menu-item
-        v-for="lang of languages"
-        :key="lang"
-        :class="lang === locale ? '!bg-primary/10 text-primary' : ''"
-        class="group"
-        :value="lang"
-        @click="changeLanguage(lang)"
-      >
-        <div
-          :class="lang === locale ? '!font-semibold !text-primary' : ''"
-          class="nc-project-menu-item capitalize group-hover:text-pink-500"
-        >
-          {{ Language[lang] || lang }}
-        </div>
-      </a-menu-item>
-
-      <a-menu-item>
-        <a
-          href="https://docs.nocodb.com/engineering/translation/#how-to-contribute--for-community-members"
-          target="_blank"
-          class="caption py-2 text-primary underline hover:opacity-75"
-        >
-          {{ $t('activity.translate') }}
-        </a>
-      </a-menu-item>
-    </a-menu>
-  </template>
-  <a-dropdown v-else class="select-none color-transition" :trigger="['click']">
-    <MaterialSymbolsTranslate v-bind="$attrs" class="md:text-xl cursor-pointer nc-menu-translate" />
-
-    <template #overlay>
-      <a-menu class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0 rounded">
-        <a-menu-item
-          v-for="lang of languages"
-          :key="lang"
-          :class="lang === locale ? '!bg-primary/10 text-primary' : ''"
-          class="group"
-          :value="lang"
-          @click="changeLanguage(lang)"
-        >
-          <div :class="lang === locale ? '!font-semibold !text-primary' : ''" class="nc-project-menu-item capitalize">
-            {{ Language[lang] || lang }}
-          </div>
-        </a-menu-item>
-
-        <a-menu-item class="mt-1">
-          <a
-            href="https://docs.nocodb.com/engineering/translation/#how-to-contribute--for-community-members"
-            target="_blank"
-            class="caption py-2 text-primary underline hover:opacity-75"
-          >
-            {{ $t('activity.translate') }}
-          </a>
-        </a-menu-item>
-      </a-menu>
-    </template>
-  </a-dropdown>
-</template>
-
-<style scoped>
-:deep(.ant-dropdown-menu-item-group-list) {
-  @apply !mx-0;
-}
-
-:deep(.ant-dropdown-menu-item-group-title) {
-  @apply border-b-1;
-}
-
-:deep(.ant-dropdown-menu-item-group-list) {
-  @apply m-0;
-}
-
-:deep(.ant-dropdown-menu-item) {
-  @apply !py-0 active:(ring ring-pink-500);
-}
-</style>

packages/nc-gui-v2/components/general/language/Menu.vue

@@ -1,37 +1,27 @@
 <script lang="ts" setup>
+import { Language } from '~/lib'
 import { onMounted, useGlobal, useI18n, useNuxtApp } from '#imports'
-
-const { availableLocales = ['en'], locale } = useI18n()
-const languages = $computed(() => availableLocales.sort())
-
 const { $e } = useNuxtApp()
-
 const { lang: currentLang } = useGlobal()
-
+const { availableLocales = ['en'], locale } = useI18n()
+const languages = $computed(() => availableLocales.sort())
 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
 }
-
-onMounted(() => {
-  applyDirection()
-})
-
 function changeLanguage(lang: string) {
   currentLang.value = lang
   locale.value = lang
-
   applyDirection()
-
   $e('c:navbar:lang', { lang })
 }
+onMounted(() => {
+  applyDirection()
+})
 </script>
 
 <template>
@@ -44,15 +34,12 @@ function changeLanguage(lang: string) {
       :value="lang"
       @click="changeLanguage(lang)"
     >
-      <div
-        :class="lang === locale ? '!font-semibold !text-primary' : ''"
-        class="nc-project-menu-item capitalize group-hover:text-pink-500"
-      >
+      <div :class="lang === locale ? '!font-semibold !text-primary' : ''" class="nc-project-menu-item capitalize">
         {{ Language[lang] || lang }}
       </div>
     </a-menu-item>
 
-    <a-menu-item>
+    <a-menu-item class="mt-1">
       <a
         href="https://docs.nocodb.com/engineering/translation/#how-to-contribute--for-community-members"
         target="_blank"

packages/nc-gui-v2/components/general/language/index.vue

@@ -1,18 +1,15 @@
 <script lang="ts" setup>
-import Menu from './Menu.vue'
-
 const { subMenu } = defineProps<{ subMenu?: boolean }>()
 </script>
 
 <template>
-  <template v-if="subMenu">
-    <Menu />
-  </template>
+  <GeneralLanguageMenu v-if="subMenu" />
+
   <a-dropdown v-else class="select-none color-transition" :trigger="['click']">
     <MaterialSymbolsTranslate v-bind="$attrs" class="md:text-xl cursor-pointer nc-menu-translate" />
 
     <template #overlay>
-      <Menu />
+      <GeneralLanguageMenu />
     </template>
   </a-dropdown>
 </template>

packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue

@@ -365,4 +365,8 @@ definePageMeta({
     @apply opacity-100;
   }
 }
+
+:deep(.ant-dropdown-menu-submenu-title){
+  @apply py-0
+}
 </style>