schon/storefront/src/components/base/base-auth.vue
Alexandr SaVBaD Waltz 2d363e1740 Features: 1) Introduce new components including ui-counter, ui-link, base-auth, and base-header-catalogue with scoped styles; 2) Add useProductTags composable and integrate GraphQL queries for product tagging; 3) Build standalone pages for cart and wishlist with basic templates; 4) Integrate vue3-marquee-slider, swiper, and primeicons dependencies for enhanced UI interactions; 5) Add skeleton loaders for language switcher and counter components; 6) Localize the app with support for it-it, de-de, ja-jp, da-dk, fr-fr, and nl-nl locales;
Fixes: 1) Refactor `useProducts` and `useCategorybySlug` composables for improved error handling and lazy loading; 2) Correct import path in `product-page.vue` for `useProductBySlug`; 3) Update `useLanguages` composable to set current locale from local storage; 4) Remove unused `auth.js`, `base-header.vue`, and deprecated GraphQL fragments;

Extra: Minor styling adjustments and removal of redundant console logs; Updated `package-lock.json` dependencies for version consistency.
2025-05-31 17:43:33 +03:00

65 lines
No EOL
1.1 KiB
Vue

<template>
<div class="auth">
<div class="auth__content" ref="modalRef">
<slot></slot>
</div>
</div>
</template>
<script setup>
import {useAppStore} from "@/stores/app.js";
import {ref} from "vue";
import {onClickOutside} from "@vueuse/core";
const appStore = useAppStore()
const closeModal = () => {
appStore.setActiveState(null)
}
const modalRef = ref(null)
onClickOutside(modalRef, () => closeModal())
</script>
<style lang="scss" scoped>
.auth {
position: fixed;
z-index: 3;
width: 100vw;
height: 100vh;
top: 0;
right: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(3px);
background-color: rgba(0, 0, 0, 0.4);
&__content {
position: absolute;
z-index: 2;
top: 125px;
background-color: $white;
width: 600px;
padding: 30px;
border-radius: $default_border_radius;
}
}
@media (max-width: 1000px) {
.auth {
&__content {
width: 85%;
}
}
}
@media (max-width: 500px) {
.auth {
&__content {
padding: 20px 30px;
}
}
}
</style>