fix: selects
This commit is contained in:
@@ -1,29 +1,29 @@
|
||||
<template>
|
||||
<p>Country: {{ currentCountry?.name }}</p>
|
||||
<p>Currency: {{ currentCountry?.ps_currency.iso_code }}</p>
|
||||
<USelectMenu v-model="country" :items="countries"
|
||||
class="w-40 bg-(--main-light) dark:bg-(--black) rounded-md shadow-sm hover:none!" valueKey="id"
|
||||
:searchInput="false">
|
||||
<template #default="{ modelValue }">
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="font-medium dark:text-white text-black">{{ modelValue.name }}</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 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 } from '@/router/langs'
|
||||
import { countries, currentCountry, switchLocalization } from '@/router/langs'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useCookie } from '@/composable/useCookie'
|
||||
import { computed, watch } from 'vue'
|
||||
import { i18n } from '@/plugins/02_i18n'
|
||||
import { useFetchJson } from '@/composable/useFetchJson'
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
@@ -34,32 +34,17 @@ const country = computed({
|
||||
return currentCountry.value
|
||||
},
|
||||
set(value: string) {
|
||||
// i18n.locale.value = value
|
||||
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' })
|
||||
|
||||
// changeLang()
|
||||
switchLocalization()
|
||||
},
|
||||
})
|
||||
|
||||
// async function changeLang() {
|
||||
// try {
|
||||
// const { items } = await useFetchJson('/api/v1/public/auth/update-choice', {
|
||||
// method: 'POST'
|
||||
// })
|
||||
|
||||
// } catch (error) {
|
||||
// console.log(error)
|
||||
// }
|
||||
// }
|
||||
|
||||
watch(
|
||||
() => country,
|
||||
(newCountry) => {
|
||||
if (newCountry) {
|
||||
console.log(newCountry.value);
|
||||
|
||||
// i18n.locale.value = newLocale
|
||||
currentCountry.value = countries.find((x) => x.id == Number(newCountry.value?.id))
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1,34 +1,37 @@
|
||||
<template>
|
||||
<USelectMenu v-model="locale" :items="langs"
|
||||
class="w-40 bg-(--main-light) dark:bg-(--black) rounded-md shadow-sm hover:none!" valueKey="iso_code"
|
||||
:searchInput="false">
|
||||
<template #default="{ modelValue }">
|
||||
<div class="flex items-center gap-1">
|
||||
<!-- <span class="text-md dark:text-white text-black">{{langs.find(x => x.iso_code == modelValue)?.flag}}</span> -->
|
||||
<span class="font-medium dark:text-white text-black">{{langs.find(x => x.iso_code == modelValue)?.name}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #item-leading="{ item }">
|
||||
<div class="flex items-center rounded-md cursor-pointer transition-colors">
|
||||
<!-- <span class="text-md ">{{ item.flag }}</span> -->
|
||||
<span class="ml-2 dark:text-white text-black font-medium">{{ item.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</USelectMenu>
|
||||
<div class="flex flex-col">
|
||||
<p class="text-sm">Language:</p>
|
||||
<USelectMenu v-model="locale" :items="langs"
|
||||
class="w-40 bg-(--main-light) dark:bg-(--black) rounded-md shadow-sm hover:none!" valueKey="iso_code"
|
||||
:searchInput="false">
|
||||
<template #default="{ modelValue }">
|
||||
<div class="flex items-center gap-1">
|
||||
<!-- <span class="text-md dark:text-white text-black">{{langs.find(x => x.iso_code == modelValue)?.flag}}</span> -->
|
||||
<span class="font-medium dark:text-white text-black">{{langs.find(x => x.iso_code ==
|
||||
modelValue)?.name}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #item-leading="{ item }">
|
||||
<div class="flex items-center rounded-md cursor-pointer transition-colors">
|
||||
<!-- <span class="text-md ">{{ item.flag }}</span> -->
|
||||
<span class="ml-2 dark:text-white text-black font-medium">{{ item.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { langs, currentLang } from '@/router/langs'
|
||||
import { langs, currentLang, switchLocalization } from '@/router/langs'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useCookie } from '@/composable/useCookie'
|
||||
import { computed, watch } from 'vue'
|
||||
import { i18n } from '@/plugins/02_i18n'
|
||||
import { useFetchJson } from '@/composable/useFetchJson'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const cookie = useCookie()
|
||||
|
||||
const locale = computed({
|
||||
get() {
|
||||
return currentLang.value?.iso_code || i18n.locale.value
|
||||
@@ -52,21 +55,10 @@ const locale = computed({
|
||||
}
|
||||
}
|
||||
|
||||
changeLang()
|
||||
switchLocalization()
|
||||
},
|
||||
})
|
||||
|
||||
async function changeLang() {
|
||||
try {
|
||||
const { items } = await useFetchJson('/api/v1/public/auth/update-choice', {
|
||||
method: 'POST'
|
||||
})
|
||||
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.params.locale,
|
||||
(newLocale) => {
|
||||
|
||||
@@ -1,9 +1,34 @@
|
||||
<template>
|
||||
<UButton variant="ghost" size="sm" @click="themeStorage.setTheme()">
|
||||
<UButton variant="outline" size="sm" color="info" @click="themeStorage.setTheme()">
|
||||
<span class="hidden sm:inline">
|
||||
<UIcon class="size-5" :name="themeStorage.themeIcon" />
|
||||
</span>
|
||||
</UButton>
|
||||
<!-- <UButton variant="solid" size="sm" color="info" @click="themeStorage.setTheme()">
|
||||
<span class="hidden sm:inline">
|
||||
<UIcon class="size-5" :name="themeStorage.themeIcon" />
|
||||
</span>
|
||||
</UButton>
|
||||
<UButton variant="soft" size="sm" color="info" @click="themeStorage.setTheme()">
|
||||
<span class="hidden sm:inline">
|
||||
<UIcon class="size-5" :name="themeStorage.themeIcon" />
|
||||
</span>
|
||||
</UButton>
|
||||
<UButton variant="subtle" size="sm" color="info" @click="themeStorage.setTheme()">
|
||||
<span class="hidden sm:inline">
|
||||
<UIcon class="size-5" :name="themeStorage.themeIcon" />
|
||||
</span>
|
||||
</UButton>
|
||||
<UButton variant="ghost" size="sm" color="info" @click="themeStorage.setTheme()">
|
||||
<span class="hidden sm:inline">
|
||||
<UIcon class="size-5" :name="themeStorage.themeIcon" />
|
||||
</span>
|
||||
</UButton>
|
||||
<UButton variant="link" size="sm" color="info" @click="themeStorage.setTheme()">
|
||||
<span class="hidden sm:inline">
|
||||
<UIcon class="size-5" :name="themeStorage.themeIcon" />
|
||||
</span>
|
||||
</UButton> -->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
Reference in New Issue
Block a user