53 lines
1.6 KiB
Vue
53 lines
1.6 KiB
Vue
<template>
|
|
<USelect
|
|
v-model="selectedLocaleCode"
|
|
:items="locales"
|
|
value-key="code"
|
|
:searchable="false"
|
|
:ui="{
|
|
base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0',
|
|
trailing: 'hidden',
|
|
viewport: 'ring-0',
|
|
content: 'bg-bg-light dark:bg-bg-dark w-auto ring-0 border border-button',
|
|
leading:
|
|
'left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 p-0',
|
|
group: 'px-[5px] py-[10px]',
|
|
item: 'hover:bg-bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
|
|
}"
|
|
@update:model-value="setLocale"
|
|
>
|
|
<template #leading="{ modelValue }">
|
|
<div class="flex items-center gap-2 text-xl font-medium uppercase">
|
|
{{ locales.find((item) => item.code === modelValue)?.code }}
|
|
</div>
|
|
</template>
|
|
|
|
<template #item="{ item }">
|
|
<div class="flex items-center gap-2 cursor-pointer w-full">
|
|
<UIcon
|
|
:name="item.icon as string"
|
|
class="size-5 rounded-full border border-button/40"
|
|
/>
|
|
<p class="text-xl font-medium uppercase">{{ item.code }}</p>
|
|
</div>
|
|
</template>
|
|
</USelect>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useI18n } from "#imports";
|
|
|
|
const { locale, locales, setLocale } = useI18n();
|
|
|
|
const selectedLocaleCode = ref(locale.value);
|
|
const selectedIcon = ref(
|
|
locales.value.find((item) => item.code === locale.value)?.icon
|
|
);
|
|
|
|
watch(selectedLocaleCode, async (newCode) => {
|
|
if (newCode !== locale.value) {
|
|
await setLocale(newCode);
|
|
}
|
|
});
|
|
</script>
|