54 lines
1.7 KiB
Vue
54 lines
1.7 KiB
Vue
<template>
|
|
<div class="flex flex-col">
|
|
<p class="text-sm">Country/Currency:</p>
|
|
<USelectMenu v-model="country" :items="countries"
|
|
class="w-44 bg-(--main-light) dark:bg-(--black) rounded-md hover:none! text-sm!" valueKey="id"
|
|
:searchInput="false">
|
|
<template #default="{ modelValue }">
|
|
<div class="flex items-center gap-1">
|
|
<span class="font-medium dark:text-white text-black whitespace-nowrap">{{ modelValue.name }} / {{
|
|
currentCountry?.ps_currency.iso_code }}</span>
|
|
</div>
|
|
</template>
|
|
<template #item-leading="{ item }">
|
|
<div class="flex items-center rounded-md cursor-pointer transition-colors">
|
|
<span class="ml-2 dark:text-white text-black font-medium">{{ item.name }}</span>
|
|
</div>
|
|
</template>
|
|
</USelectMenu>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { countries, currentCountry, switchLocalization } from '@/router/langs'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import { useCookie } from '@/composable/useCookie'
|
|
import { computed, watch } from 'vue'
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
const cookie = useCookie()
|
|
|
|
const country = computed({
|
|
get() {
|
|
return currentCountry.value
|
|
},
|
|
set(value: string) {
|
|
currentCountry.value = countries.find((x) => x.id == Number(value))
|
|
cookie.setCookie('country_id', `${countries.find((x) => x.id == Number(value))?.id}`, { days: 60, secure: true, sameSite: 'Lax' })
|
|
|
|
switchLocalization()
|
|
},
|
|
})
|
|
|
|
watch(
|
|
() => country,
|
|
(newCountry) => {
|
|
if (newCountry) {
|
|
currentCountry.value = countries.find((x) => x.id == Number(newCountry.value?.id))
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
</script>
|