146 lines
4.9 KiB
Vue
146 lines
4.9 KiB
Vue
<template>
|
|
<div ref="dropdownRef"
|
|
class="flex flex-col gap-2 relative"
|
|
>
|
|
<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"
|
|
>
|
|
{{ $session.cookieData.value.country.iso_code }}/{{
|
|
$session.cookieData.value.currency.iso_code
|
|
}}
|
|
</UButton>
|
|
|
|
<div
|
|
v-if="isOpen"
|
|
class="absolute ring-0 top-12 p-0 m-0 border-none w-48 z-50"
|
|
>
|
|
<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("country") }}</p>
|
|
<div
|
|
class="w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 space-y-1"
|
|
>
|
|
<div class="p-0"
|
|
@click="openDrop('country')"
|
|
>
|
|
<div
|
|
class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark"
|
|
>
|
|
{{ $session.currentCountryIso }}
|
|
<span>
|
|
<i
|
|
class="uil uil-angle-down text-2xl font-light cursor-pointer"
|
|
/></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="dropCountry"
|
|
class="bg-bg-light dark:bg-bg-dark rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 ring-0 cursor-pointer w-full focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]"
|
|
>
|
|
<div class="overflow-auto h-[200px] w-full">
|
|
<p
|
|
v-for="item in menuStore.countries"
|
|
:key="item.iso_code"
|
|
class="w-full hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
|
|
@click="
|
|
() => {
|
|
$session.setCountry(item.iso_code);
|
|
$session.loadSession();
|
|
dropCountry = false;
|
|
}
|
|
"
|
|
>
|
|
{{ item?.name }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col items-start gap-[6px]">
|
|
<p>{{ $t("currency") }}</p>
|
|
<div
|
|
class="w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 space-y-1"
|
|
>
|
|
<div class="p-0"
|
|
@click="openDrop()"
|
|
>
|
|
<div
|
|
class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark"
|
|
>
|
|
{{ $session.currentCurrencyIso
|
|
}}<span>
|
|
<i
|
|
class="uil uil-angle-down text-2xl font-light cursor-pointer"
|
|
/></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="dropCurrency"
|
|
class="bg-bg-light dark:bg-bg-dark rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 ring-0 cursor-pointer w-full focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]"
|
|
>
|
|
<div class="overflow-auto w-full">
|
|
<p
|
|
v-for="item in menuStore.currencies"
|
|
:key="item.iso_code"
|
|
class="w-full hover:bg-block dark:hover:bg-button pl-1 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
|
|
@click="
|
|
() => {
|
|
$session.setCurrency(item.iso_code);
|
|
$session.loadSession();
|
|
dropCurrency = false;
|
|
}
|
|
"
|
|
>
|
|
{{ item?.name }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onClickOutside } from '@vueuse/core'
|
|
|
|
const { $session } = useNuxtApp()
|
|
|
|
const isOpen = ref(false)
|
|
const menuStore = useMenuStore()
|
|
|
|
const dropdownRef = ref(null)
|
|
|
|
const dropCountry = ref(false)
|
|
const dropCurrency = ref(false)
|
|
|
|
function openDrop(type?: string) {
|
|
if (type === 'country') {
|
|
dropCurrency.value = false
|
|
dropCountry.value = !dropCountry.value
|
|
}
|
|
else {
|
|
dropCountry.value = false
|
|
dropCurrency.value = !dropCurrency.value
|
|
}
|
|
}
|
|
|
|
onClickOutside(dropdownRef, () => {
|
|
isOpen.value = false
|
|
dropCurrency.value = false
|
|
dropCountry.value = false
|
|
})
|
|
</script>
|