@ozdao/martyrs 0.2.550 → 0.2.552

package/src/modules/core/views/components/layouts/Client.vue

@@ -13,7 +13,7 @@
   	}"
 	>
 		<transition name="moveFromTop" appear>
-			<Loader v-if="!page || core.state.loading" class="pos-fixed"/>
+			<Loader v-if="!page || store.core.state.loading" class="pos-fixed"/>
 		</transition>
 
 	  <transition 
@@ -51,7 +51,7 @@
 		    :is="route.meta.header_navigation"
 		    :horizontal="true"
 				:navigationItems="route.meta.header_navigation_items"
-				:stateSidebar="core.state.isOpenSidebar" 
+				:stateSidebar="store.core.state.isOpenSidebar"
 				:theme="headerTheme"
 		  />
   	</component>
@@ -62,15 +62,15 @@
         :is="route.meta.navigationbar"
         :logotype="route.meta.logotype"
         :navigationItems="route.meta.sidebar_navigation_items"
-	      :stateSidebar="core.state.isOpenSidebar" 
+	      :stateSidebar="store.core.state.isOpenSidebar"
       />
 		</transition>
 
-	  <Popup 
-	  	@close-popup="closeLocationPopup" 
-	  	:isPopupOpen="core.state.isOpenLocationPopup"
+	  <Popup
+	  	@close-popup="closeLocationPopup"
+	  	:isPopupOpen="store.core.state.isOpenLocationPopup"
 	  	class="bg-white pd-semi w-m-33r radius-big"
-	  >	
+	  >
 	  	<LocationSelection />
 	  </Popup>
 
@@ -91,11 +91,11 @@
 	    <component
 	      v-if="route.meta?.sidebar"
 	      :is="route.meta.sidebar"
-	      :stateSidebar="core.state.isOpenSidebar"
+	      :stateSidebar="store.core.state.isOpenSidebar"
 	      :widthHidden='route.meta?.sidebar_width_hidden'
 	      :width="route.meta?.sidebar_width"
 	      :theme="headerTheme"
-	      @closeSidebar="() => core.state.isOpenSidebar = false"
+	      @closeSidebar="() => store.core.state.isOpenSidebar = false"
 	    >
 	    	<!-- Header slot -->
 	    	<template #header>
@@ -113,7 +113,7 @@
 		        :is="route.meta.sidebar_navigation"
 		        :key="route.meta.sidebar_navigation"
 		        :navigationItems="route.meta.sidebar_navigation_items"
-			      :stateSidebar="core.state.isOpenSidebar"
+			      :stateSidebar="store.core.state.isOpenSidebar"
 						:theme="headerTheme"
 		      />
 	      </transition>
@@ -130,18 +130,18 @@
 		  <!-- rows-1-min0_max1 z-index-1 pos-relative w-100 h-100 -->
 		  <div class="rows-1-min0_max1 z-index-1 pos-relative w-100 h-100">
 		  	<div id="scrollview" ref="scrollview" @scroll="handleScroll" class="o-y-scroll o-x-hidden h-100">
-	  			<Status 
-	  				v-if="core.state.error.show"
-						:data="core.state.error"
-						@close="core.state.error.show = false"
-						class="z-index-7" 
+	  			<Status
+	  				v-if="store.core.state.error.show"
+						:data="store.core.state.error"
+						@close="store.core.state.error.show = false"
+						class="z-index-7"
 					/>
 					<Snack
-	  				v-if="core.state.snack.show"
-						:type="core.state.snack.type"
-						:message="core.state.snack.message"
-						:show="core.state.snack.show"
-						@close="core.state.snack.show = false"
+	  				v-if="store.core.state.snack.show"
+						:type="store.core.state.snack.type"
+						:message="store.core.state.snack.message"
+						:show="store.core.state.snack.show"
+						@close="store.core.state.snack.show = false"
 						class="z-index-7"
 					/>
 					<div class="h-min-100 pos-relative w-100">
@@ -177,15 +177,16 @@
 						</Suspense>
 				  </div>
 
-				 	<component 
+				 	<component
 			      v-if="route.meta.player"
 			      class="z-index-2"
 			    	:is="route.meta.player"
 			    />
+			    
 			  	<transition @before-enter="scrollTop" name="scaleTransition" mode="out-in" appear>
 		        <component
-							v-if="!MOBILE_APP && route.meta.footer && !route.meta.hideFooter && page && !core.state.loading"
-				      ref="footer" 
+							v-if="!MOBILE_APP && route.meta.footer && !route.meta.hideFooter && page && !store.core.state.loading"
+				      ref="footer"
 				      :is="route.meta.footer"
 				      :theme="route.meta.footer_theme || 'light'"
 				      :logotype="route.meta.logotype"
@@ -220,7 +221,8 @@
 	// Router
 	import { useRoute } from 'vue-router';
 	// Store
-	import * as core from '@martyrs/src/modules/core/views/store/core.store.js';
+	import { useStore } from '@martyrs/src/modules/core/views/store/core.store.js';
+	import { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js';
 	// Partials
 	import Status from '@martyrs/src/components/Status/Status.vue';
 	import Snack from '@martyrs/src/components/Status/Snack.vue';
@@ -248,6 +250,8 @@
     }
   })
 
+	const store = useStore()
+
 	/////////////////////////////
   // LOADING
   /////////////////////////////
@@ -261,32 +265,38 @@
   
   // Обработчики событий загрузки
   function handlePageLoading() {
-    core.state.loading = true;
+    store.core.state.loading = true;
   }
-  
+
   function handlePageLoaded() {
-    core.state.loading = false;
+    store.core.state.loading = false;
   }
-  
+
   // Обработка события разрешения Suspense (когда async setup компонента завершается)
   function onSuspenseResolved() {
-    // Если страница не отправляет событие page-loaded, этот обработчик 
+    // Если страница не отправляет событие page-loaded, этот обработчик
     // может служить запасным вариантом для отключения лоадера
     // Можно оставить закомментированным, если все страницы будут явно вызывать handlePageLoaded
-    core.state.loading = false;
+    store.core.state.loading = false;
   }
 	/////////////////////////////
 	// CREATED
 	/////////////////////////////
 	const route = useRoute()
 	// const router = useRouter()
+
+	// Инициализация sidebar для SSR + первая загрузка
+	if (route.meta?.sidebarOpenOnEnter === true) {
+		store.core.state.isOpenSidebar = true
+	}
+
 	// Ref Code
 	const referalCode = ref(route.query.referalCode);
 	/////////////////////////////
 	// Methods
 	/////////////////////////////
 	function closeLocationPopup() {
-	  core.state.isOpenLocationPopup = false;
+	  store.core.state.isOpenLocationPopup = false;
 	}
 	function scrollTop(){
 		if (scrollview.value) scrollview.value.scrollTop = 0;
@@ -323,9 +333,16 @@
     FirstUse.value = value;
   }
 
+	const { isPhone, isTablet } = useGlobalMixins();
+
 	onMounted(async () => {
 	  await getFirstUse()
 
+		// Закрываем sidebar на mobile (CSS уже скрыл визуально)
+		if ((isPhone() || isTablet()) && store.core.state.isOpenSidebar) {
+			store.core.state.isOpenSidebar = false
+		}
+
 		// Регистрация единого Service Worker (PWA + push notifications)
 		if ('serviceWorker' in navigator && !window.__MOBILE_APP__) {
 	   	window.addEventListener('load', () => {
@@ -336,15 +353,15 @@
 	     	});
 	   });
 	 	}
-		
+
 		const savedPosition = localStorage.getItem('position');
 
 	  if (savedPosition) {
-	    core.state.position = JSON.parse(savedPosition);
+	    store.core.state.position = JSON.parse(savedPosition);
 	  } else if (route.meta.location) {
-  		core.state.isOpenLocationPopup = true;
+  		store.core.state.isOpenLocationPopup = true;
 	  } else {
-	  	core.state.isOpenLocationPopup = false;
+	  	store.core.state.isOpenLocationPopup = false;
 	  }
 
 		if (referalCode.value) {

package/src/modules/core/views/components/partials/Header.vue

@@ -3,10 +3,12 @@
 
 	import { useRouter,useRoute } from 'vue-router'
 	import { useI18n } from 'vue-i18n'
-	
-	import * as core from '@martyrs/src/modules/core/views/store/core.store.js'
+
+	import { useStore } from '@martyrs/src/modules/core/views/store/core.store.js'
 	import * as shopcart from '@martyrs/src/modules/orders/store/shopcart.js'
 	import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'
+
+	const store = useStore()
 	
 	// Globasls Component
 
@@ -46,7 +48,7 @@
 	// const search = computed(() => store.products.state.search)
 
 	function openLocationPopup() {
-	  core.state.isOpenLocationPopup = true;
+	  store.core.state.isOpenLocationPopup = true;
 	}
 	/////////////////////////////
 	// MOUNTED
@@ -79,12 +81,12 @@
 	>
 	<div class="flex-nowrap flex-v-center flex-justify-start flex gap-micro ">
 		<!-- MENU -->
-		<button  
+		<button
 			aria-label="menu"
-			@click="() => core.state.isOpenSidebar = !core.state.isOpenSidebar" 
+			@click="() => store.core.state.isOpenSidebar = !store.core.state.isOpenSidebar"
 			class="cursor-pointer mobile-only menu-btn"
 			:class="{
-				'menu-btn_active': core.state.isOpenSidebar
+				'menu-btn_active': store.core.state.isOpenSidebar
 			}"
 		>
 	    <span
@@ -133,7 +135,7 @@
     	<svg class="i-small" :fill="'inherit'" xmlns="http://www.w3.org/2000/svg" width="50" height="67" viewBox="0 0 50 67" fill="none">
 			  <path d="M25 0C11.207 0 0 11.207 0 25C0 38.793 20.832 66.668 25 66.668C29.168 66.668 50 38.793 50 25C50 11.207 38.793 0 25 0ZM25 33.332C20.418 33.332 16.668 29.582 16.668 25C16.668 20.418 20.418 16.668 25 16.668C29.582 16.668 33.332 20.418 33.332 25C33.332 29.582 29.582 33.332 25 33.332Z" :fill="'inherit'"/>
 			</svg>
-    	 {{core.state.position?.country ? core.state.position.country : 'World'}}
+    	 {{store.core.state.position?.country ? store.core.state.position.country : 'World'}}
     </button>
   </div>
 

package/src/modules/core/views/components/partials/LocationSelection.vue

@@ -78,7 +78,9 @@ import LocationMarker from "@martyrs/src/components/LocationMarker/LocationMarke
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
-import * as core from '@martyrs/src/modules/core/views/store/core.store.js'
+import { useStore } from '@martyrs/src/modules/core/views/store/core.store.js'
+
+const store = useStore()
 
 // Accessing router and store
 const route = useRoute()
@@ -93,14 +95,14 @@ const position = ref({
 })
 
 function savePosition() {
-	core.state.position = { ...position.value };
-	core.state.isOpenLocationPopup = false
+	store.core.state.position = { ...position.value };
+	store.core.state.isOpenLocationPopup = false
 
-	localStorage.setItem('position', JSON.stringify(core.state.position));
+	localStorage.setItem('position', JSON.stringify(store.core.state.position));
 }
 
 onMounted(() => {
-	position.value = { ...core.state.position }
+	position.value = { ...store.core.state.position }
 })
 
 // Localization

package/src/modules/core/views/components/partials/Navigation.vue

@@ -4,9 +4,10 @@ import { useRouter, useRoute } from 'vue-router'
 
 import IconChevronBottom from '@martyrs/src/modules/icons/navigation/IconChevronBottom.vue'
 
-import * as core from '@martyrs/src/modules/core/views/store/core.store.js'
+import { useStore } from '@martyrs/src/modules/core/views/store/core.store.js'
 import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'
 
+const store = useStore()
 const router = useRouter()
 const route = useRoute()
 
@@ -143,7 +144,7 @@ const processRoute = (routeFn) => {
                   v-if="subItem.iconComponent"
                   :is="subItem.iconComponent"
                   class="i-medium"
-                  :fill="core.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'"
+                  :fill="store.core.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'"
                 />
                 <span v-else class="">{{ subItem.icon }}</span>
                 <span class="w-100">{{ subItem.title }}</span>
@@ -166,7 +167,7 @@ const processRoute = (routeFn) => {
               v-if="item.iconComponent"
               :is="item.iconComponent"
               class="i-medium flex-child-default"
-              :fill="core.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'"
+              :fill="store.core.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'"
             />
             <span
               v-if="!item.iconComponent "
@@ -219,7 +220,7 @@ const processRoute = (routeFn) => {
                   v-if="subItem.iconComponent"
                   :is="subItem.iconComponent"
                   class="i-medium"
-                 :fill="core.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'"
+                 :fill="store.core.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'"
                 />
                 <span v-else class="">{{ subItem.icon }}</span>
                 <span class="w-100">{{ subItem.title }}</span>

package/src/modules/core/views/components/partials/NavigationBar.vue

@@ -26,7 +26,7 @@
 				/>
 
 				<span v-else class="t-semi lh-semi h5 d-block" >
-					{{ formateText(core.state.navigation_bar.name || route.meta?.title?.[locale.toLowerCase()] || route.name) }}
+					{{ formateText(store.core.state.navigation_bar.name || route.meta?.title?.[locale.toLowerCase()] || route.name) }}
 				</span>
 			</div>
 		</transition>
@@ -79,10 +79,12 @@
 
 	import Button 				from '@martyrs/src/components/Button/Button.vue'
 
-	import * as core from '@martyrs/src/modules/core/views/store/core.store.js'
+	import { useStore } from '@martyrs/src/modules/core/views/store/core.store.js'
 	import * as shopcart from '@martyrs/src/modules/orders/store/shopcart.js'
 	import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'
 
+	const store = useStore()
+
 		// Props
 	const props = defineProps({
     theme: {
@@ -99,7 +101,7 @@
 
 	const { t, mergeLocaleMessage, locale } = useI18n();
 
-	const actions = computed(() => core.state.navigation_bar.actions || route.meta?.actions || [])
+	const actions = computed(() => store.core.state.navigation_bar.actions || route.meta?.actions || [])
 
 	function handleBackNavigation() {
 	    if (route.query?.afterAuth)  { 

package/src/modules/core/views/components/partials/Sidebar.vue

@@ -2,7 +2,9 @@
 import { ref, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useGlobalMixins } from "@martyrs/src/modules/core/views/mixins/mixins.js"
-import * as core from '@martyrs/src/modules/core/views/store/core.store.js'
+import { useStore } from '@martyrs/src/modules/core/views/store/core.store.js'
+
+const store = useStore()
 
 const props = defineProps({
   theme: {
@@ -31,33 +33,60 @@ const { isPhone, isTablet } = useGlobalMixins()
 const router = useRouter()
 const route = useRoute()
 
+// Отдельный флаг для клика меню на mobile
+const isManuallyOpened = ref(false)
+
+// Синхронизируем с stateSidebar ТОЛЬКО на mobile
+watch(() => props.stateSidebar, (newVal) => {
+  if (isPhone() || isTablet()) {
+    isManuallyOpened.value = newVal
+  }
+})
+
 const toggleSidebar = () => {
-  emits('closeSidebar')
+  isManuallyOpened.value = !isManuallyOpened.value
+  if (!isManuallyOpened.value) {
+    emits('closeSidebar')
+  }
 }
 
 const handleMouseEnter = () => {
   if (route.meta?.sidebar_hover && !isPhone() && !isTablet()) {
-    core.state.isOpenSidebar = true
+    store.core.state.isOpenSidebar = true
   }
 }
 
 const handleMouseLeave = () => {
   if (route.meta?.sidebar_hover && !isPhone() && !isTablet()) {
-    core.state.isOpenSidebar = false
+    store.core.state.isOpenSidebar = false
   }
 }
 
 router.beforeEach((to, from) => {
-   if (isPhone() || isTablet()) {
-    emits('closeSidebar')
+  // На mobile не трогаем state через навигацию
+  if (isPhone() || isTablet()) {
+    return
+  }
+
+  // Desktop логика
+  // Если уходим с профиля И НЕ идем на профиль - закрыть
+  if (from.meta?.sidebarCloseOnLeave === true && to.meta?.sidebarOpenOnEnter !== true) {
+    store.core.state.isOpenSidebar = false
+  }
+
+  // Если приходим на профиль - открыть
+  if (to.meta?.sidebarOpenOnEnter === true) {
+    store.core.state.isOpenSidebar = true
   }
 })
 </script>
 
 <template>
   <aside
+    data-sidebar
     class="transition-quint-out w-min-0 o-hidden flex-child-default z-index-2  br-r br-solid  flex flex-column h-100"
     :class="[
+      { 'mobile-opened': isManuallyOpened },
       stateSidebar
       ? `${width} w-min-10 tablet:w-min-100 tablet:w-100 mobile:w-min-100 mobile:w-100`
       : `${widthHidden} mobile:w-0`,
@@ -94,21 +123,21 @@ router.beforeEach((to, from) => {
       }"
     >
       <button
-        @click="() => core.actions.toggleTheme()"
+        @click="() => store.core.actions.toggleTheme()"
         class="transition-quint-out flex w-100 flex-center radius-small cursor-pointer flex-nowrap"
         :class="[
           stateSidebar ? 'pd-thin justify-between' : 'w-100 justify-center',
           theme === 'light' ? 'hover-bg-light' : 'hover-bg-dark'
         ]"
       >
-        <span 
+        <span
           class="w-100 t-nowrap transition-quint-out  t-left t-medium mn-r-thin"
           :class="{ 'hidden': !stateSidebar, 'visible': stateSidebar }"
         >
           Dark Mode
         </span>
         <span class="aspect-1x1 flex-child-default w-max-big w-100 flex flex-center ">
-          {{ core.state.theme.darkmode ? '🌙' : '☀️' }}
+          {{ store.core.state.theme.darkmode ? '🌙' : '☀️' }}
         </span>
       </button>
     </div>
@@ -125,6 +154,24 @@ router.beforeEach((to, from) => {
   opacity: 1;
   display: block;
 }
+
+/* Mobile: ВСЕГДА скрываем, показываем ТОЛЬКО по клику меню */
+@media (max-width: 1024px) {
+  aside[data-sidebar] {
+    position: fixed !important;
+    left: 0 !important;
+    transform: translateX(-100%) !important;
+    visibility: hidden !important;
+    z-index: 1000 !important;
+  }
+
+  /* Показываем ТОЛЬКО когда manual клик (НЕ от SSR state) */
+  aside[data-sidebar].mobile-opened {
+    transform: translateX(0) !important;
+    visibility: visible !important;
+  }
+}
+
 /* Scrollbar styles */
 ::-webkit-scrollbar {
   width: 6px;

package/src/modules/core/views/mixins/mixins.js

@@ -1,4 +1,4 @@
-import * as core from '@martyrs/src/modules/core/views/store/core.store.js';
+import { useStore } from '@martyrs/src/modules/core/views/store/core.store.js';
 import { inject } from 'vue';
 
 // useGlobalMixins.js
@@ -56,7 +56,8 @@ export function useGlobalMixins() {
   };
 
   const returnCurrency = () => {
-    const currency = core.state.options.currency || '$';
+    const store = useStore();
+    const currency = store.core.state.options?.currency || '$';
     return currency;
   };
 

package/src/modules/core/views/plugins/date-picker.plugin.js

@@ -1,6 +1,6 @@
 // date-selector.plugin.js
 import { reactive, markRaw, defineComponent, h, render, defineAsyncComponent } from 'vue'
-import * as core from '@martyrs/src/modules/core/views/store/core.store.js'
+import { useStore } from '@martyrs/src/modules/core/views/store/core.store.js'
 
 // Dynamic import for better tree shaking and lazy loading
 const PopupDateSelector = defineAsyncComponent(() => 
@@ -20,11 +20,12 @@ const state = reactive({
 })
 
 function getDefaultOptions() {
+  const store = useStore();
   return {
-    showFees: core.state.options?.orders?.showFees || false,
-    feesRate: core.state.options?.orders?.feesRate || 0.15,
-    showVat: core.state.options?.orders?.showVat || false,
-    vatRate: core.state.options?.orders?.vatRate || 0
+    showFees: store.core.state.options?.orders?.showFees || false,
+    feesRate: store.core.state.options?.orders?.feesRate || 0.15,
+    showVat: store.core.state.options?.orders?.showVat || false,
+    vatRate: store.core.state.options?.orders?.vatRate || 0
   }
 }