yakovenko_arina/your-gold
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix langs

Browse Source
This commit is contained in:
Marek Goc
2025-06-25 21:19:40 +02:00
parent 9d7fd3d52a
commit edf3036e6a
24 changed files with 266 additions and 776 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
components/CountryCurrencySelector.vue
View File

@ -3,7 +3,7 @@
<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">
{{ menuStore.selectedCountry }}/{{ menuStore.selectedCurrency?.iso_code }}
{{ $session.cookieData.value.country.iso_code }}/{{ $session.cookieData.value.currency.iso_code }}
</UButton>
<div class="absolute ring-0 top-12 p-0 m-0 border-none w-48 z-50" v-if="isOpen">
@ -15,7 +15,7 @@
class="bg-inherit 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">
{{ menuStore.selectedCountry }} <span> <i
{{ $session.currentCountryIso }} <span> <i
class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
</div>
</div>
@ -23,12 +23,9 @@
<div v-if="dropCountry"
class="rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 bg-inherit 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 @click="() => {
menuStore.selectedCountry = item.iso_code
dropCountry = false
}"
<p @click="() => { $session.setCountry(item.iso_code); $session.loadSession(); dropCountry = false }"
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]"
v-for="item in menuStore.countryList">
v-for="item in menuStore.countries" :key="item.iso_code">
{{ item?.name }}
</p>
</div>
@ -41,7 +38,7 @@
class="bg-inherit 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">
{{ menuStore.selectedCurrency?.iso_code }}<span> <i
{{ $session.currentCurrencyIso }}<span> <i
class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
</div>
</div>
@ -49,12 +46,9 @@
<div v-if="dropCurrency"
class="rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 bg-inherit 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 @click="() => {
menuStore.selectedCurrency = item
dropCurrency = false
}"
<p @click="() => { $session.setCurrency(item.iso_code); $session.loadSession(); dropCurrency = false }"
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]"
v-for="item in menuStore.currencies">
v-for="item in menuStore.currencies" :key="item.iso_code">
{{ item?.name }}
</p>
</div>
@ -69,6 +63,8 @@
<script setup lang="ts">
import { onClickOutside } from "@vueuse/core";
const {$session} = useNuxtApp();
const isOpen = ref(false);
const menuStore = useMenuStore();
@ -87,22 +83,6 @@ function openDrop(type?: string) {
}
}
watchEffect(() => {
if (
!menuStore.selectedCountry &&
menuStore.countryList &&
menuStore.countryList.length > 0
) {
menuStore.selectedCountry = menuStore.countryList[0].iso_code;
}
if (
!menuStore.selectedCurrency &&
menuStore.currencies &&
menuStore.currencies.length > 0
) {
menuStore.selectedCurrency = menuStore.currencies[0];
}
});
onClickOutside(dropdownRef, () => {
isOpen.value = false

9
components/HeaderBlock.vue
View File

@ -5,8 +5,9 @@
<UiContainer class="relative">
<div class="hidden h-[120px] w-full items-center gap-[145px] xl:flex">
<ul class="flex items-center justify-between whitespace-nowrap w-full">
<li v-for="(item, index) in menuStore.menu" @click="menuStore.navigateToItem(item)" :key="index"
:class="['hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer text-lg transition-all text-inter', route.params.slug === item.front_menu_lang[0].link_rewrite && 'text-accent-green-light dark:text-accent-green-dark font-bold underline']">
<li v-for="(item, index) in menuStore.menu" @click="menuStore.navigateToItem(item)" :key="item.id"
:class="['hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer text-lg transition-all text-inter',
route.params.id == item.id ? 'text-accent-green-light dark:text-accent-green-dark font-bold underline' : false]">
0{{ index + 1 }} <br />
{{ item.front_menu_lang[0].name }}
</li>
@ -27,8 +28,8 @@
<ThemeSwitcher />
<button @click="menuStore.navigateToShop" :class="[
'cursor-pointer transition-all text-inter',
menuStore.menuItems?.find(item => (item.id_page === route.params.id) && (item.page_name === 'shop'))
? 'text-accent-green-light dark:text-accent-green-dark font-bold pb-1 border-b-2'
route.params.id == 5
? 'text-accent-green-light dark:text-accent-green-dark font-bold pb-1 border-b-2 bg-accented px-6 py-3 rounded-xl'
: 'hover:bg-button-hover bg-button text-white font-medium rounded-xl px-6 py-3'
]">
{{ $t('eshop') }}

16
components/LangSwitcher.vue
View File

@ -14,11 +14,11 @@
group: 'px-[5px] py-[10px]',
item: 'hover:bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
}"
@update:model-value="setLocale"
@update:model-value="setLocale($event); $session.setLanguage($event); $session.loadSession()"
>
<template #leading="{ modelValue }">
<div class="flex items-center gap-2 text-xl font-medium uppercase">
{{ locales.find((item) => item.code === modelValue)?.code }}
{{ locales.find((item: any) => item.code === modelValue)?.code }}
</div>
</template>
@ -39,20 +39,10 @@
</template>
<script setup lang="ts">
import { useI18n } from "#imports";
const { locale, locales, setLocale } = useI18n();
const {$session} = useNuxtApp();
const isOpen = ref(false);
const selectedLocaleCode = ref(locale.value);
const selectedIcon = ref(
locales.value.find((item) => item.code === locale.value)?.icon
);
watch(selectedLocaleCode, async (newCode) => {
if (newCode !== locale.value) {
await setLocale(newCode);
}
});
</script>

258
components/MapBlock.vue
View File

File diff suppressed because one or more lines are too long

14
components/section/AboutGoldImpact.vue
View File

@ -7,8 +7,8 @@
</h2>
</div>
<div class="space-y-[40px] sm:space-55-75">
<div v-for="(item, index) in component.front_section_lang[0].data.section_1.text_blocks"
:key="index" class="grid grid-cols-7 md:grid-cols-4 xl:grid-cols-2">
<div v-for="(item, index) in component.front_section_lang[0].data.section_1.text_blocks" :key="index"
class="grid grid-cols-7 md:grid-cols-4 xl:grid-cols-2">
<div class="flex gap-[200px]">
<h4 class="h4-uppercase-bold-inter">0{{ index + 1 }}</h4>
<h4 class="hidden xl:block h4-uppercase-bold-inter w-full whitespace-nowrap">
@ -29,8 +29,8 @@
{{ component.front_section_lang[0].data.section_2.title }}
</h2>
<div class="grid sm:grid-cols-2 xl:grid-cols-4 gap-[30px] auto-cols-fr auto-rows-fr">
<div class="border border-border rounded-2xl p-8 flex flex-col justify-between gap-[55px]" v-for="(item, index) in component.front_section_lang[0].data.section_2
.text_blocks" :key="index">
<div class="border border-border rounded-2xl p-8 flex flex-col justify-between gap-[55px]"
v-for="(item, index) in component.front_section_lang[0].data.section_2.text_blocks" :key="index">
<div>
<h4 class="h4-uppercase-bold-inter">0{{ index + 1 }}</h4>
<h4 class="h4-uppercase-bold-inter">{{ item.block_title }}</h4>
@ -57,8 +57,7 @@
{{ component.front_section_lang[0].data.section_3.title }}
</h2>
<div class="flex flex-col space-25-55">
<p v-for="(item, index) in component.front_section_lang[0].data.section_3
.text_blocks" :key="index">
<p v-for="(item, index) in component.front_section_lang[0].data.section_3.text_blocks" :key="index">
{{ item }}
</p>
</div>
@ -75,7 +74,8 @@
backgroundSize: 'cover',
backgroundPosition: 'center',
}" />
<p class="xl:col-start-2 xl:col-end-3">{{ component.front_section_lang[0].data.section_4.description_second }}</p>
<p class="xl:col-start-2 xl:col-end-3">{{ component.front_section_lang[0].data.section_4.description_second
}}</p>
</div>
</UiContainer>
</template>

12
components/section/AboutGoldMain.vue
View File

@ -11,7 +11,9 @@
<p class="text-text-light sm:text-xl md:text-2xl font-medium">{{
component.front_section_lang[0].data.description }}</p>
</div>
<UiButtonArrow type="fill" :arrow="true">{{ $t('buy_gold') }}</UiButtonArrow>
<UiButtonArrow type="fill" :arrow="true">
{{ $t('buy_gold') }}
</UiButtonArrow>
</div>
<div class="flex gap-[10px] sm:gap-[30px]">
<div class="rounded-2xl h-[155px] sm:h-[225px] md:h-[280px] w-full" :style="{
@ -43,8 +45,9 @@
<div class="space-25-55-75">
<h2 class="h2-bold-bounded">{{ component.front_section_lang[0].data.section_2.title }}</h2>
<div class="space-y-[40px] sm:space-y-[50px]">
<p v-for="(item, index) in component.front_section_lang[0].data.section_2.text_blocks" :key="index">{{ item
}}</p>
<p v-for="(item, index) in component.front_section_lang[0].data.section_2.text_blocks" :key="index">
{{ item }}
</p>
</div>
</div>
<div class="w-full md:h-full rounded-2xl h-[327px] sm:h-[550px]" :style="{
@ -55,7 +58,8 @@
</div>
<div
class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-y-[25px] sm:gap-y-[55px] xl:gap-y-0 gap-x-[30px]">
<h2 class="h2-bold-bounded sm:col-start-1 sm:col-end-3">{{ component.front_section_lang[0].data.section_3.title }}
<h2 class="h2-bold-bounded sm:col-start-1 sm:col-end-3">{{
component.front_section_lang[0].data.section_3.title }}
</h2>
<div v-for="(item, index) in component.front_section_lang[0].data.section_3.text_blocks" :key="index"
class="flex flex-col justify-between space-25-55">

6
components/section/MainHero.vue
View File

@ -29,8 +29,7 @@
</template>
<script lang="ts" setup>
defineProps<{ component: Component }>();
type Component = {
defineProps<{ component: {
id: number
name: string
img: string[]
@ -46,5 +45,6 @@ type Component = {
id_front_section: number
id_lang: number
}[]
};
} }>();
</script>

56
components/section/RegistrationMain.vue
View File

@ -1,7 +1,7 @@
<template>
<UiContainer class="flex py-[15px] xl:py-20 sm:py-0">
<div class="hidden xl:block rounded-2xl min-w-[40%] h-[830px]" :style="{
backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}" />
@ -50,10 +50,9 @@
<div v-if="dropCountry"
class="mt-2 absolute bg-bg-light dark:bg-bg-dark rounded-[5px] ring-0 cursor-pointer w-full border border-button py-[10px] px-[5px] overflow-hidden">
<div class="overflow-y-auto h-[200px] w-full">
<p v-for="item in menuStore.countryList" @click="() => {
menuStore.selectedPhoneCountry = item
dropCountry = false
}" class="w-full truncate whitespace-nowrap overflow-hidden hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
<p v-for="item in menuStore.countries" :key="item.iso_code"
@click="() => { menuStore.selectedPhoneCountry = item; dropCountry = false }"
class="w-full truncate whitespace-nowrap overflow-hidden hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
:title="item.name">
{{ item.name }}
</p>
@ -62,14 +61,14 @@
</div>
<p class="text-sm sm:text-xl font-normal">{{ menuStore.selectedPhoneCountry.call_prefix
}}</p>
}}</p>
<input :placeholder="$t('phone')" type="text"
class="text-sm sm:text-xl placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0" />
</div>
</div>
<div class="space-y-[15px]">
<p class="pl-6">{{ $t('account_type') }}</p>
<USelect v-model="selectedType" :items="component.section_lang_data.account_types"
<USelect v-model="selectedType" :items="component.front_section_lang[0].data.account_types"
value-key="name" :searchable="false" :ui="{
base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0 h-[50px] sm:h-[67px] w-full p-0',
trailing: 'hidden w-full',
@ -84,8 +83,8 @@
<div
class="flex items-center justify-between gap-2 uppercase text-sm sm:text-xl border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 w-full h-[50px] sm:h-[67px]">
<p class="truncate whitespace-nowrap">
{{component.section_lang_data.account_types.find((item) => item.name ===
modelValue)?.name}}</p>
{{ component.front_section_lang[0].data.account_types.find((item) => item.name === modelValue)?.name }}
</p>
<span> <i
class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
</div>
@ -115,10 +114,10 @@
<div class="mt-[25px] sm:mt-[30px] w-full flex justify-center gap-3">
<p class="cursor-pointer hover:underline transition-all">{{
$t('is_account')
}}</p>
}}</p>
<p class="text-button cursor-pointer hover:text-button-hover">{{
$t('login')
}}</p>
}}</p>
</div>
</div>
</UiContainer>
@ -126,23 +125,32 @@
<script lang="ts" setup>
import { onClickOutside } from "@vueuse/core";
const props = defineProps<{ component: Component }>();
type Component = {
image_collection: string;
section_id: string;
section_img: string;
section_lang_data: {
account_types: [{
id: number,
name: string
}]
};
};
const props = defineProps<{
component: {
id: number
name: string
img: string[]
component_name: string
is_no_lang: boolean
page_name: string
front_section_lang: {
data: {
account_types: {
id: number,
name: string
}[]
}
id_front_section: number
id_lang: number
}[]
}
}>();
const menuStore = useMenuStore()
const dropdownRef = ref(null);
const dropCountry = ref()
const selectedType = ref(props.component.section_lang_data.account_types[0].name)
const selectedType = ref(props.component.front_section_lang[0].data.account_types[0].name)
onClickOutside(dropdownRef, () => {
dropCountry.value = false

4
components/section/ShopMain.vue
View File

@ -168,6 +168,10 @@ import { ref } from "vue";
import Product from "./Product.vue";
import type { Feature, GenericResponse, GenericResponseChildren, GenericResponseItems, ProductType } from "~/types";
import CategoryTree from "./CategoryTree.vue";
const { $session } = useNuxtApp();
watch(() => $session.cookieData, async () => await getProducts(), { deep: true });
const props = defineProps<{
component: {