72 lines
2.0 KiB
Vue
72 lines
2.0 KiB
Vue
<template>
|
|
<UCollapsible
|
|
v-model="isOpen"
|
|
class="flex flex-col gap-2"
|
|
:ui="{
|
|
content: 'absolute top-20',
|
|
}"
|
|
>
|
|
<UButton
|
|
color="neutral"
|
|
variant="subtle"
|
|
trailing-icon="i-lucide-chevron-down"
|
|
class="m-0 bg-bg-dark ring-0 text-xl font-medium uppercase cursor-pointer hover:bg-inherit"
|
|
block
|
|
@click="isOpen = !isOpen"
|
|
>
|
|
{{ selectedCountry }}/{{ selectedCurrency }}
|
|
</UButton>
|
|
|
|
<template #content>
|
|
<div class="flex flex-col">
|
|
<USelect
|
|
v-model="selectedCountry"
|
|
:items="menuStore.countryList"
|
|
class="w-48"
|
|
value-key="iso_code"
|
|
>
|
|
<template #leading="{ modelValue }">
|
|
<div class="flex items-center gap-2 text-xl font-medium uppercase">
|
|
{{ modelValue }}
|
|
</div>
|
|
</template>
|
|
|
|
<template #item="{ item }">
|
|
<div class="flex items-center gap-2 cursor-pointer w-full">
|
|
<p class="text-xl font-medium">{{ item?.name }}</p>
|
|
</div>
|
|
</template>
|
|
</USelect>
|
|
<USelect
|
|
v-model="selectedCurrency"
|
|
:items="menuStore.currencies"
|
|
class="w-48"
|
|
value-key="iso_code"
|
|
>
|
|
<template #leading="{ modelValue }">
|
|
<div class="flex items-center gap-2 text-xl font-medium uppercase">
|
|
{{ modelValue }}
|
|
</div>
|
|
</template>
|
|
|
|
<template #item="{ item }">
|
|
<div class="flex items-center gap-2 cursor-pointer w-full">
|
|
<p class="text-xl font-medium">{{ item?.name }}</p>
|
|
</div>
|
|
</template>
|
|
</USelect>
|
|
</div>
|
|
</template>
|
|
</UCollapsible>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useI18n } from "#imports";
|
|
|
|
const isOpen = ref(false);
|
|
const menuStore = useMenuStore();
|
|
|
|
const selectedCountry = ref(menuStore.countryList[0].iso_code);
|
|
const selectedCurrency = ref(menuStore.currencies[0].iso_code);
|
|
</script>
|