feat: i18n ui

src/plugins/vuetify/@core/components/I18n.vue

@@ -1,56 +1,48 @@
 <script setup lang="ts">
-import type { Anchor } from 'vuetify/lib/components'
+import { Icon } from '@iconify/vue';
-import type { I18nLanguage } from '@layouts/types'
+import type { Anchor } from 'vuetify/lib/components';
+import type { I18nLanguage } from '@layouts/types';
 
 const props = withDefaults(defineProps<Props>(), {
   location: 'bottom end',
-})
+});
 
 defineEmits<{
-  (e: 'change', id: string): void
+  (e: 'change', id: string): void;
-}>()
+}>();
 
 interface Props {
-  languages: I18nLanguage[]
+  languages: I18nLanguage[];
-  location?: Anchor
+  location?: Anchor;
 }
 
-const { locale } = useI18n({ useScope: 'global' })
+const { locale } = useI18n({ useScope: 'global' });
 
-watch(locale, val => {
+watch(locale, (val) => {
-  document.documentElement.setAttribute('lang', val as string)
+  document.documentElement.setAttribute('lang', val as string);
-})
+});
 
-const currentLang = ref([localStorage.getItem('lang')|| 'en'])
+const currentLang = ref([localStorage.getItem('lang') || 'en']);
 </script>
 
 <template>
-  <IconBtn>
+  <div class="dropdown dropdown-end">
-    <VIcon icon="mdi-translate" />
+    <label tabindex="0" class="btn btn-ghost btn-circle btn-sm mx-1">
-
+      <Icon icon="mdi-translate" style="font-size: 24px" />
-    <!-- Menu -->
+    </label>
-    <VMenu
+    <ul
-      activator="parent"
+      tabindex="0"
-      :location="props.location"
+      class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52"
-      offset="14px"
     >
-      <!-- List -->
+      <li v-for="lang in props.languages" :key="lang.i18nLang">
-      <VList
+        <a
-        v-model:selected="currentLang"
+          @click="
-        active-color="primary"
+            locale = lang.i18nLang;
-        min-width="175px"
+            $emit('change', lang.i18nLang);
+          "
+          >{{ lang.label }}</a
         >
-        <!-- List item -->
+      </li>
-        <VListItem
+    </ul>
-          v-for="lang in props.languages"
+  </div>
-          :key="lang.i18nLang"
-          :value="lang.i18nLang"
-          @click="locale = lang.i18nLang; $emit('change', lang.i18nLang)"
-        >
-          <!-- Language label -->
-          <VListItemTitle>{{ lang.label }}</VListItemTitle>
-        </VListItem>
-      </VList>
-    </VMenu>
-  </IconBtn>
 </template>