41 lines
1.4 KiB
Vue
41 lines
1.4 KiB
Vue
<template>
|
|
<USelectMenu
|
|
v-model="selectedLocale"
|
|
:items="locales"
|
|
label-key="name"
|
|
:search-input="{ icon: 'i-lucide-search' }"
|
|
placeholder="Select country"
|
|
class="w-48 bg-block-light dark:bg-block-dark border-border-light dark:border-border-dark"
|
|
@update:model-value="setLocaleManually($event)"
|
|
>
|
|
<template #leading="{ modelValue, ui }">
|
|
<span v-if="modelValue" class="size-5 text-center">
|
|
<UIcon
|
|
:name="(modelValue?.icon as string) || 'i-lucide-earth'"
|
|
:class="[ui.leadingIcon(), 'border border-border-light dark:border-border-dark rounded-full']"
|
|
/>
|
|
</span>
|
|
</template>
|
|
<template #item-leading="{ item }">
|
|
<span class="size-5 text-center">
|
|
<!-- {{ item.name }} -->
|
|
<UIcon :name="item.icon as string" class="size-5 text-accent" />
|
|
</span>
|
|
</template>
|
|
</USelectMenu>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { LocaleObject } from "@nuxtjs/i18n";
|
|
const { setLocale, locales, locale } = useI18n();
|
|
|
|
const selectedLocale = ref(
|
|
locales.value.find((item) => item.code === locale.value)
|
|
);
|
|
|
|
function setLocaleManually(newLocale: LocaleObject) {
|
|
locale.value = newLocale.code;
|
|
locales.value.find((item) => item.code === locale.value);
|
|
setLocale(newLocale.code);
|
|
}
|
|
</script> |