126 lines
4.4 KiB
Vue
126 lines
4.4 KiB
Vue
<template>
|
|
<UCollapsible
|
|
class="flex flex-col gap-2 relative"
|
|
:ui="{
|
|
root: 'relative',
|
|
content:
|
|
'absolute z-50 w-auto ring-0 left-1/2 top-12 transform -translate-x-1/2 p-0 m-0 border-none',
|
|
}"
|
|
>
|
|
<UButton
|
|
color="neutral"
|
|
variant="subtle"
|
|
trailing-icon="i-lucide-chevron-down"
|
|
class="bg-bg-light dark:bg-bg-dark m-0 ring-0 text-xl font-medium uppercase cursor-pointer hover:bg-inherit text-text-light dark:text-text-dark"
|
|
block
|
|
@click="isOpen = !isOpen"
|
|
>
|
|
{{ selectedCountry }}/{{ selectedCurrency }}
|
|
</UButton>
|
|
|
|
<template #content v-if="isOpen" class="">
|
|
<div
|
|
class="border border-button px-4 py-[10px] rounded-[5px] bg-bg-light dark:bg-bg-dark"
|
|
>
|
|
<div class="p-0 flex flex-col gap-4 bg-bg-light dark:bg-bg-dark">
|
|
<div class="flex flex-col items-start gap-1">
|
|
<p>{{ $t("lang") }}</p>
|
|
<USelect
|
|
v-model="selectedCountry"
|
|
:items="menuStore.countryList"
|
|
class="w-32"
|
|
value-key="iso_code"
|
|
:ui="{
|
|
base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0',
|
|
viewport: 'ring-0',
|
|
content: 'bg-bg-light dark:bg-bg-dark border border-button',
|
|
leading: 'p-0',
|
|
item: 'hover:bg-bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
|
|
}"
|
|
>
|
|
<template #leading="{ modelValue }">
|
|
<div
|
|
class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark"
|
|
>
|
|
{{ modelValue }}
|
|
</div>
|
|
</template>
|
|
|
|
<template
|
|
#item="{ item }"
|
|
class="bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0 !border !border-button"
|
|
>
|
|
<div class="flex items-center gap-2 cursor-pointer w-full">
|
|
<p class="text-base text-text-light dark:text-text-dark">
|
|
{{ item?.name }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
</USelect>
|
|
</div>
|
|
<div class="flex flex-col items-start gap-[6px]">
|
|
<p>{{ $t("currency") }}</p>
|
|
<USelect
|
|
v-model="selectedCurrency"
|
|
:items="menuStore.currencies"
|
|
class="w-32"
|
|
value-key="iso_code"
|
|
:ui="{
|
|
base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0',
|
|
viewport: 'ring-0',
|
|
content: 'bg-bg-light dark:bg-bg-dark border border-button',
|
|
leading: 'p-0',
|
|
item: 'hover:bg-bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
|
|
}"
|
|
>
|
|
<template #leading="{ modelValue }">
|
|
<div
|
|
class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark"
|
|
>
|
|
{{ modelValue }}
|
|
</div>
|
|
</template>
|
|
|
|
<template
|
|
#item="{ item }"
|
|
class="bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0 !border !border-button"
|
|
>
|
|
<div class="flex items-center gap-2 cursor-pointer w-full">
|
|
<p class="text-base text-text-light dark:text-text-dark">
|
|
{{ item?.name }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
</USelect>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UCollapsible>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const isOpen = ref(false);
|
|
const menuStore = useMenuStore();
|
|
|
|
const selectedCountry = ref();
|
|
const selectedCurrency = ref();
|
|
|
|
watchEffect(() => {
|
|
if (
|
|
!selectedCountry.value &&
|
|
menuStore.countryList &&
|
|
menuStore.countryList.length > 0
|
|
) {
|
|
selectedCountry.value = menuStore.countryList[0].iso_code;
|
|
}
|
|
if (
|
|
!selectedCurrency.value &&
|
|
menuStore.currencies &&
|
|
menuStore.currencies.length > 0
|
|
) {
|
|
selectedCurrency.value = menuStore.currencies[0].iso_code;
|
|
}
|
|
});
|
|
</script>
|