Alexandr SaVBaD Waltz
c60ac13e88
Fixes: 1) Replace `ElNotification` with `useNotification` across all components and composables; 2) Add missing semicolons, consistent formatting, and type annotations in multiple files; 3) Resolve non-reactive elements in wishlist and cart state management; Extra: 1) Update i18n translations with new strings for promocodes, balance, authentication, and profile settings; 2) Refactor SCSS styles including variable additions and component-specific tweaks; 3) Remove redundant queries, unused imports, and `storePage.ts` file for cleanup.
146 lines
No EOL
3.1 KiB
Vue
146 lines
No EOL
3.1 KiB
Vue
<template>
|
|
<div class="switcher" ref="switcherRef">
|
|
<div
|
|
@click="setSwitcherVisible(!isSwitcherVisible)"
|
|
class="switcher__button"
|
|
:class="[{ active: isSwitcherVisible }]"
|
|
>
|
|
<client-only>
|
|
<nuxt-img
|
|
format="webp"
|
|
densities="x1"
|
|
v-if="currentLocale"
|
|
:src="currentLocale.flag"
|
|
:alt="currentLocale.code"
|
|
/>
|
|
<!-- <skeletons-ui-language-switcher v-else />-->
|
|
<template #fallback>
|
|
<!-- <skeletons-ui-language-switcher />-->
|
|
</template>
|
|
</client-only>
|
|
</div>
|
|
<client-only>
|
|
<div
|
|
class="switcher__menu"
|
|
:class="[{active: isSwitcherVisible}]"
|
|
>
|
|
<div class="switcher__menu-wrapper">
|
|
<nuxt-img
|
|
class="switcher__menu-button"
|
|
v-for="locale of locales"
|
|
:key="locale.code"
|
|
format="webp"
|
|
densities="x1"
|
|
@click="uiSwitchLanguage(locale.code)"
|
|
:src="locale.flag"
|
|
:alt="locale.code"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</client-only>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {onClickOutside} from "@vueuse/core";
|
|
import {useLanguageSwitch} from "@/composables/languages/index.js";
|
|
|
|
const languageStore = useLanguageStore();
|
|
|
|
const locales = computed(() => languageStore.languages);
|
|
const currentLocale = computed(() => languageStore.currentLocale);
|
|
|
|
const isSwitcherVisible = ref<boolean>(false);
|
|
const setSwitcherVisible = (state: boolean) => {
|
|
isSwitcherVisible.value = state;
|
|
};
|
|
|
|
const switcherRef = ref(null);
|
|
onClickOutside(switcherRef, () => isSwitcherVisible.value = false);
|
|
|
|
const { switchLanguage } = useLanguageSwitch();
|
|
|
|
const uiSwitchLanguage = (localeCode: string) => {
|
|
switchLanguage(localeCode);
|
|
setSwitcherVisible(false);
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.switcher {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 52px;
|
|
flex-shrink: 0;
|
|
|
|
&__button {
|
|
width: 100%;
|
|
cursor: pointer;
|
|
display: flex;
|
|
gap: 5px;
|
|
border: 1px solid $accent;
|
|
background-color: #ddd9ef;
|
|
padding: 5px;
|
|
border-radius: $default_border_radius;
|
|
transition: 0.2s;
|
|
|
|
@include hover {
|
|
background-color: $accent;
|
|
}
|
|
|
|
&.active {
|
|
background-color: $accent;
|
|
}
|
|
|
|
& img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&__menu {
|
|
position: absolute;
|
|
z-index: 3;
|
|
top: 110%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 100%;
|
|
overflow: hidden;
|
|
border-radius: $default_border_radius;
|
|
display: grid;
|
|
grid-template-rows: 0fr;
|
|
transition: grid-template-rows 0.2s ease;
|
|
|
|
&-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
&.active {
|
|
grid-template-rows: 1fr;
|
|
}
|
|
|
|
& > * {
|
|
min-height: 0;
|
|
}
|
|
|
|
&-button {
|
|
width: 100%;
|
|
cursor: pointer;
|
|
padding: 5px 8px;
|
|
background-color: #ddd9ef;
|
|
transition: 0.1s;
|
|
|
|
&:first-child {
|
|
padding-top: 10px;
|
|
}
|
|
&:last-child {
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $accent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |