1  <script setup lang="tsx">
 2  import { useI18n } from 'vue-i18n'
 3  import { useLocaleStore } from '@/renderer/store/locale'
 4  import { onMounted } from 'vue'
 5  
 6  const { locale } = useI18n()
 7  const localeStore = useLocaleStore()
 8  
 9  onMounted((): void => {
10    if (localeStore.selected) {
11      locale.value = localeStore.selected
12    }
13  })
14  
15  const handleChangeLanguage = (val: string): void => {
16    locale.value = val
17    localeStore.selected = val
18  }
19  </script>
20  <template>
21    <v-badge location="top right" :offset-y="7" :offset-x="5" class="click-through-badge">
22      <template #badge>
23        <v-img width="10" height="7" rounded="sm" :src="localeStore.getIcon()"></v-img>
24      </template>
25      <v-menu transition="fade-transition" :offset="14">
26        <template #activator="{ props }">
27          <v-btn
28            v-tooltip:start="$t('locale.title')"
29            class="ma-1"
30            density="compact"
31            rounded="lg"
32            icon="mdi-earth"
33            v-bind="props"
34          >
35          </v-btn>
36        </template>
37        <v-list class="mb-2">
38          <v-list-item
39            v-for="n in localeStore.list"
40            :key="n.value"
41            density="compact"
42            @click="handleChangeLanguage(n.value)"
43          >
44            <v-list-item-title>{{ n.title }}</v-list-item-title>
45            <template #prepend>
46              <v-img class="mr-2" :src="n.src" width="20" height="15" rounded="sm"></v-img>
47            </template>
48          </v-list-item>
49        </v-list>
50      </v-menu>
51    </v-badge>
52  </template>
53  
54  <style>
55  .click-through-badge .v-badge__badge {
56    background: transparent !important;
57    pointer-events: none;
58  }
59  </style>