padreug
55e8fa59d0
- Simplify language display logic using computed property - Add Locale interface for improved type checking - Remove redundant v-for loops in template - Enhance readability and performance of language selection rendering
57 lines
1.4 KiB
Vue
57 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Check } from 'lucide-vue-next'
|
|
import { useLocale } from '@/composables/useLocale'
|
|
import { computed } from 'vue'
|
|
|
|
interface Locale {
|
|
code: string
|
|
name: string
|
|
flag: string
|
|
}
|
|
|
|
const { currentLocale, locales, setLocale } = useLocale()
|
|
|
|
const currentLocaleInfo = computed<Locale | undefined>(() =>
|
|
locales.value.find((locale: Locale) => locale.code === currentLocale.value)
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<Button variant="ghost" size="sm" class="w-[120px] justify-start">
|
|
<span>{{ currentLocaleInfo?.flag }}</span>
|
|
<span>{{ currentLocaleInfo?.name }}</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" class="w-[120px]">
|
|
<DropdownMenuItem
|
|
v-for="locale in locales"
|
|
:key="locale.code"
|
|
@click="setLocale(locale.code)"
|
|
class="gap-2"
|
|
>
|
|
<Check
|
|
class="h-4 w-4"
|
|
:class="{ 'opacity-0': locale.code !== currentLocale }"
|
|
/>
|
|
<span class="mr-2">{{ locale.flag }}</span>
|
|
{{ locale.name }}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.dropdown-menu-content {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|