@ozdao/prometheus-framework 0.2.203 → 0.2.205

package/dist/style.css

@@ -1068,6 +1068,27 @@ to {
   left: 0;
   right: 0;
   opacity: 0.9;
+}
+.pac-container {
+  position: absolute;
+  background-color: white;
+  z-index: 1000;
+  border-radius: 2rem;
+  overflow: hidden;
+}
+
+.my-location-button {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 99;
+}
+.gm-style-cc { display:none;
+}
+
+
+.no-hover-color[data-v-71a26b8f]:hover {
+  color: unset;
 }.header-arrow {
   position: absolute;
   left: 1.25rem;
@@ -1111,27 +1132,6 @@ to {
 .slideY-enter-from span,
 .slideY-leave-to span {
   position: absolute;
-}
-.pac-container {
-  position: absolute;
-  background-color: white;
-  z-index: 1000;
-  border-radius: 2rem;
-  overflow: hidden;
-}
-
-.my-location-button {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  z-index: 99;
-}
-.gm-style-cc { display:none;
-}
-
-
-.no-hover-color[data-v-71a26b8f]:hover {
-  color: unset;
 }.shop-cart {
   display: block;
   position: fixed;
@@ -1228,6 +1228,72 @@ to {
   opacity: 0;
   left: 0;
   top: 0;
+}
+.scaleTransition-5px-enter-active,
+.scaleTransition-5px-leave-active {
+  transform: translateY(0px);
+  opacity: 1;
+  z-index: 1;
+  transition: all 0.2s ease;
+}
+.scaleTransition-5px-enter-from,
+.scaleTransition-5px-leave-to {
+  opacity: 0;
+  z-index: 0;
+  position: absolute;
+  transform: translateY(-30px);
+  transition: all 0.2s ease;
+}
+.scaleTransition-enter-from,
+.scaleTransition-leave-to {
+  opacity: 0;
+  z-index: 0;
+  position: absolute;
+  width: inherit;
+  height: inherit;
+  display: block;
+  transform: translateY(-30px);
+  transition: all 0.5s ease;
+}
+.scaleTransition-enter-active,
+.scaleTransition-leave-active {
+  transform: translateY(0px);
+  opacity: 1;
+  z-index: 1;
+  transition: all 0.5s ease;
+}
+.scaleTransition-enter-from,
+.scaleTransition-leave-to {
+  opacity: 0;
+  z-index: 0;
+  position: absolute;
+  width: inherit;
+  height: inherit;
+  display: block;
+  transform: translateY(-30px);
+  transition: all 0.5s ease;
+}
+.scaleIn-enter-active,
+.scaleIn-leave-active {
+  transition: all 0.5s ease;
+}
+.scaleIn-enter-active > section, .scaleIn-enter-active div,
+.scaleIn-leave-active > section,
+.scaleIn-leave-active div {
+  transform-origin: 0 0;
+  transform: translateZ(0px);
+  transition: all 0.5s ease;
+}
+.scaleIn-enter-from,
+.scaleIn-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+.scaleIn-enter-from > section, .scaleIn-enter-from div,
+.scaleIn-leave-to > section,
+.scaleIn-leave-to div {
+  transform: translateZ(-30px);
+  transition: all 0.5s ease;
 }.router-link-active[data-v-380d7b3b], .router-link-exact-active[data-v-380d7b3b] {
   color: rgb(var(--main)) !important;
 }
@@ -1312,6 +1378,8 @@ a[data-v-380d7b3b]:hover {
   opacity: 1;
 }.mobile-menu-section > div:last-of-type {
   border-bottom: none !important;
+}#sidebar ul li {
+  margin-bottom: 1rem;
 }
   /* Add styles for the user card component here */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozdao/prometheus-framework",
-  "version": "0.2.203",
+  "version": "0.2.205",
   "description": "Web3 Framework focused on user experience and ease of development.",
   "author": "OZ DAO <hello@ozdao.dev>",
   "license": "GPL-3.0-or-later",

package/src/components/Feed/Feed.vue

@@ -117,17 +117,26 @@
       :items="itemsList"
     >
     </slot>
+  </TransitionGroup>
 
-    <button
-      v-if="showLoadMore && hasMoreItems && itemsList.length > 0"
-      @click="loadMoreItems"
-      class="col-w-100 w-100 bg-main button"
-    >
-      Load More
-    </button>
+  <button
+    v-if="showLoadMore && hasMoreItems && itemsList.length > 0 && !isLoadingExtra"
+    @click="loadMoreItems"
+    class="col-w-100 mn-t-thin w-100 bg-main button"
+  >
+    Load More
+  </button>
 
-    <div key="sentinel" ref="sentinel" class="sentinel"></div> 
-  </TransitionGroup>
+  <div v-else key="sentinel" ref="sentinel" class="sentinel"></div> 
+
+  <div
+
+    v-if="isLoadingExtra"
+    class="col-w-100 w-100 pos-relative"
+  >
+    <Loader/>
+  </div>
+ 
 
 </template>
 
@@ -208,6 +217,7 @@ const itemsList = ref(items.value || []);
 const hasMoreItems = ref(false);
 
 let isLoading = ref(true);
+let isLoadingExtra = ref(false);
 let sentinel = ref(null)
 
 let currentSkip = ref(props.options.skip ? props.options.skip : 0);
@@ -227,6 +237,7 @@ function updateSearch(search) {
 }
 
 const loadMoreItems = async () => {
+  isLoadingExtra.value = true
 
   if (hasMoreItems.value) {
     currentSkip.value += currentLimit.value;
@@ -254,6 +265,8 @@ const loadMoreItems = async () => {
     
     if (items.value) items.value = itemsList.value;
   }
+
+  isLoadingExtra.value = false
 };
 
 const fetchItems = async () => {
@@ -343,7 +356,7 @@ onMounted(async () => {
       }
     })
 
-    observer.observe(sentinel.value)
+    if (sentinel.value) observer.observe(sentinel.value)
   }
 });
 

package/src/components/Tab/Tab.vue

@@ -1,15 +1,17 @@
 <template>
-	<div class="flex-nowrap flex-v-center flex pos-relative">
+	<div class="flex-nowrap flex-v-center gap-micro pd-micro flex pos-relative">
+
 		<div  
 			v-for="(tab,index) in tabs" 
 			:key="index" 
 			@click="selectTab(index,tab)" 
-			:class="{ 
-				't-transp': index !== selectedTab,
-				'br-solid br-b-3px br-main': index === selectedTab, 
-			}"
-			class="z-index-1 t-center pd-small w-max ">
-			<label>{{tab.name}}</label>
+			class="z-index-1 t-center"
+			:class="[
+			  index !== selectedTab ? 'bg-white' : 'bg-main',
+			  tabClass ? tabClass : 'pd-small pd-r-medium pd-l-medium w-max pd-small radius-small'
+			]"
+		>
+			<label class="">{{tab.name}}</label>
 		</div>
 	</div>
 </template>
@@ -22,6 +24,7 @@
 
 	const props = defineProps({
 		tabs: Array,
+		tabClass: String,
 		selected: String,
 		callback: Function
 	})

package/src/modules/auth/views/components/pages/ResetPassword.vue

@@ -13,6 +13,7 @@
 					{name: t('phone'), value: 'phone'},
 					{name: t('email'), value: 'email'}
 				]"
+				tabClass="pd-small pd-r-medium pd-l-medium w-100 pd-small radius-small"
 			/>
 		</div>
 
@@ -20,7 +21,7 @@
 		<div class="pos-relative">
 		<!-- Phone -->
 			<transition name="slide-fade">
-				<div v-if="tabAuth === 'phone'" class="mn-b-semi radius-small o-hidden">
+				<div v-if="tabAuth === 'phone'" class="mn-b-semi radius-small">
 					<p class="mn-b-small t-transp">{{ t('smsInfo') }}</p>
 					<FieldPhone
 						@change="(event) => auth.state.user.phone = event" 	
@@ -32,7 +33,7 @@
 						:validation="phoneValidation" 
 						mode="national"
 						:inputOptions="{placeholder: t('phonePlaceholder')}"
-						class="bg-light pd-small radius-small mn-b-thin" 
+						class="bg-light h-4r pd-small radius-small mn-b-thin" 
 					/>
 				</div>
 			</transition>
@@ -44,13 +45,13 @@
 						v-model:field="auth.state.user.email" 		
 						:placeholder="t('emailPlaceholder')" 	
 						:validation="emailValidation" 
-						class="bg-light pd-medium radius-small" 
+						class="bg-light h-4r pd-medium radius-small" 
 					/>
 				</div>
 			</transition>
 		</div>
 		<!-- Button -->
-		<Button :submit="onSubmit" :callback="redirectTo" class="mn-b-big">{{ t('sendCode') }}</Button>
+		<Button :submit="onSubmit" :callback="redirectTo" class="w-100 bg-main">{{ t('sendCode') }}</Button>
 	</section> 
 </template>
 

package/src/modules/auth/views/components/pages/SignIn.vue

@@ -14,13 +14,14 @@
 		</p>
 		
 			<!-- Select -->
-		<div class="mn-b-small p-small uppercase t-semi bg-light radius-big o-hidden">
+		<div class="mn-b-small p-small uppercase t-semi bg-light radius-small o-hidden">
 			<Tab 
 				v-model:selected="tabAuth"
 				:tabs="[
 					{name: t('phone'), value: 'phone'},
 					{name: t('email'), value: 'email'}
 				]"
+				tabClass="pd-small pd-r-medium pd-l-medium w-100 pd-small radius-small"
 			/>
 		</div>
 
@@ -40,7 +41,7 @@
 						:validation="phoneValidation" 
 						mode="national"
 						:inputOptions="{placeholder: t('phonePlaceholder'), type: 'tel'}"
-						class="bg-light pd-small radius-small mn-b-thin" 
+						class="bg-light h-4r pd-small radius-small mn-b-thin" 
 					/>
 					
 				</div>
@@ -51,7 +52,7 @@
 						v-model:field="auth.state.user.email" 	
 						:placeholder="t('emailPlaceholder')" 	
 						:validation="emailValidation"
-						class="bg-light pd-medium radius-small" 
+						class="bg-light h-4r pd-medium radius-small" 
 					/>
 				</div>
 			</transition>
@@ -68,6 +69,7 @@
         pd-medium
         radius-small
         mn-b-semi
+        h-4r 
       "
 		/>
 		<!-- Links -->

package/src/modules/auth/views/components/pages/SignUp.vue

@@ -12,6 +12,7 @@
 					{name: t('phone'), value: 'phone'},
 					{name: t('email'), value: 'email'}
 				]"
+				tabClass="pd-small pd-r-medium pd-l-medium w-100 pd-small radius-small"
 			/>
 		</div>
 
@@ -31,7 +32,7 @@
 						:validation="phoneValidation" 
 						mode="national"
 						:inputOptions="{placeholder: t('phonePlaceholder')}"
-						class="bg-light pd-small radius-small mn-b-thin" 
+						class="bg-light h-4r pd-small radius-small mn-b-thin" 
 					/>
 					
 				</div>
@@ -43,7 +44,7 @@
 						v-model:field="auth.state.user.email" 	
 						:placeholder="t('emailPlaceholder')" 	
 						:validation="emailValidation"
-						class="bg-light pd-medium radius-small" 
+						class="bg-light h-4r pd-medium radius-small" 
 					/>
 				</div>
 			</transition>

package/src/modules/globals/globals.client.js

@@ -7,6 +7,7 @@ import scrollBehavior from './views/router/scrollBehavior.js';
 import layoutApp from './views/components/layouts/App.vue'
 import layoutClient from './views/components/layouts/Client.vue'
 import Header from '@pf/src/modules/globals/views/components/partials/Header.vue'
+import Sidebar from '@pf/src/modules/globals/views/components/partials/Sidebar.vue'
 
 import * as mixins from './views/mixins/mixins.js'
 import * as storeGlobals from './views/store/globals.js';
@@ -21,7 +22,8 @@ export {
   // Components
   layoutClient,
   layoutApp,
-  Header
+  Header,
+  Sidebar
 };
 
 // Пример функции инициализации для модуля заказов
@@ -88,7 +90,8 @@ const ModuleGlobals = {
       // Pages
       layoutClient,
       layoutApp,
-      Header
+      Header,
+      Sidebar
     }
   }
 }

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

@@ -4,22 +4,42 @@
 			<Loader v-if="!page" class="pos-fixed"/>
 		</transition>
 
-		<transition name="moveFromTop" mode="out-in" appear>
-      <component
-		  	v-if="!MOBILE_APP"
-        :is="route.meta.header"
-        ref="header" 
-        class="transition-ease-in-out pos-relative br-b br-solid br-grey-transp-10 pos-t-0" 
-        :theme="headerTheme"
-        :logotype="route.meta.logotype"
-      >
-        <component
-          v-if="route.meta.navigation"
-          :is="route.meta.navigation"
-          class="mn-l-auto desktop-only"
-        />
-      </component>
-    </transition>
+		<!-- <transition name="moveFromTop" mode="out-in" appear> -->
+			<header 
+				id="header" 
+				v-if="route.meta.header.component"
+				class="
+					pd-thin 
+					gap-micro
+					flex-justify-between
+					flex-nowrap
+					flex
+					h-4r
+					w-100
+					z-index-2 
+					pos-relative pos-t-0
+				"
+				:class="{
+		  		't-black bg-white': headerTheme === 'light',
+		  		't-white bg-black': headerTheme === 'dark'  
+		  	}"
+			>
+	      <component
+			  	v-if="!MOBILE_APP"
+	        :is="route.meta.header.component"
+	        ref="header" 
+	        :theme="headerTheme"
+	        :logotype="route.meta.header.logotype"
+	        :location="route.meta.header.location"
+	      >
+	        <component
+	          v-if="route.meta.navigation"
+	          :is="route.meta.navigation"
+	          class="mn-l-auto desktop-only"
+	        />
+	      </component>
+		  </header>
+    <!-- </transition> -->
 
 		<transition name="moveFromTop" mode="out-in" appear>
 			<NavigationBar
@@ -64,12 +84,14 @@
 					/>
 
 
-					<transition @before-enter="scrollTop" name="scaleIn" mode="out-in" appear>
+					<transition @before-enter="scrollTop" name="scaleTransition" mode="out-in" appear>
 		      	<component 
 		      		ref="page"  
 		      		:is="Component" 
 		      		:key="route.path"
 		      	/>
+		      	<!-- Key пока выключил непонятно какие проблемы это вызовет -->
+		      	<!--  -->
 		      </transition>
 
 		      <!-- <Footer /> -->
@@ -95,16 +117,13 @@
 	import * as globals from '@pf/src/modules/globals/views/store/globals'
 	// Partials
 	import Status from '@pf/src/components/Status/Status.vue'
-
 	import Popup from '@pf/src/components/Popup/Popup.vue'
 	import Breadcrumbs from '@pf/src/components/Breadcrumbs/Breadcrumbs.vue'
 	import Loader from '@pf/src/components/Loader/Loader.vue'
-
-
-	import NavigationBar from '@pf/src/modules/globals/views/components/partials/NavigationBar.vue'
 	import LocationSelection from '@pf/src/modules/globals/views/components/partials/LocationSelection.vue'
 	import Footer from '@pf/src/modules/globals/views/components/partials/Footer.vue'
 	import BottomNavigation from '@pf/src/modules/globals/views/components/partials/BottomNavigation.vue'
+	import NavigationBar from '@pf/src/modules/globals/views/components/partials/NavigationBar.vue'
 
 	import ShopCart from '@pf/src/modules/orders/components/partials/ShopCart.vue'
 	/////////////////////////////
@@ -283,4 +302,64 @@
 	  top: 0;
 	}
 
+	.scaleTransition-5px-enter-active,
+  .scaleTransition-5px-leave-active {
+    transform: translateY(0px);  
+    opacity: 1;
+    z-index: 1;
+    transition: all 0.2s ease;
+  }
+
+  .scaleTransition-5px-enter-from,
+  .scaleTransition-5px-leave-to {
+    opacity: 0;
+    z-index: 0;
+    position: absolute;
+    transform: translateY(-30px); 
+    transition: all 0.2s ease;
+  }
+
+  .scaleTransition-enter-from,
+  .scaleTransition-leave-to {
+    opacity: 0;
+    z-index: 0;
+    position: absolute;
+    width: inherit;
+    height: inherit;
+    display: block;
+    transform: translateY(-30px); 
+    transition: all 0.5s ease;
+  }
+
+  .scaleTransition-enter-active,
+  .scaleTransition-leave-active {
+    transform: translateY(0px);  
+    opacity: 1;
+    z-index: 1;
+    transition: all 0.5s ease;
+  }
+  .scaleTransition-enter-from,
+  .scaleTransition-leave-to {
+    opacity: 0;
+    z-index: 0;
+    position: absolute;
+    width: inherit;
+    height: inherit;
+    display: block;
+    transform: translateY(-30px); 
+    transition: all 0.5s ease;
+  }
+
+  .scaleIn-enter-active,
+  .scaleIn-leave-active {
+    // background: red;
+    transition: all 0.5s ease;
+    > section,div { transform-origin: 0 0; transform: translateZ(0px);  transition: all 0.5s ease; }
+  }
+  .scaleIn-enter-from,
+  .scaleIn-leave-to {
+    opacity: 0;
+    > section,div { transform: translateZ(-30px);  transition: all 0.5s ease; }
+    transform: scale(0.95);
+  }
 </style>

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

@@ -25,7 +25,11 @@
     },
     logotype: {
 	    type: Object
-	  }
+	  },
+	  location: {
+	    type: Boolean,
+		  default: true
+	  },
   });
 	// Accessing state
 	const router = useRouter()
@@ -46,23 +50,8 @@
 </script>
 
 <template>
-	<header 
-		id="header" 
-		class="
-			pd-thin 
-			gap-micro
-			flex-center
-			flex-nowrap
-			flex
-			h-4r
-			w-100
-			z-index-2 
-		"
-		:class="{
-  		't-black bg-white': theme === 'light',
-  		't-white bg-black': theme === 'dark'  
-  	}"
-	>
+	
+	<div class="flex-nowrap flex-v-center flex-justify-start flex gap-micro w-min-20 w-max-20r">
 		<!-- MENU -->
 		<button  
 			aria-label="menu"
@@ -86,18 +75,15 @@
 
 		<!-- LOGO -->
 		<component
-			v-if="props.logotype"
-		  :is="props.logotype"
+			v-if="logotype.component"
+		  :is="logotype.component"
 		  @click="router.push({ path: '/' })" 
 		  :theme="theme"
-		  class="
-		    h-2r
-		    w-auto
-		    cursor-pointer
-		  "
+		  :class="logotype.class"
 		/>
 
 		<button
+			v-if="location"
 			aria-label="button_location"
     	class="
     		cursor-pointer
@@ -122,30 +108,33 @@
 			</svg>
     	 {{globals.state.position?.country ? globals.state.position.country : 'World'}}
     </button>
+  </div>
 
+  <div class="flex-nowrap flex">	
 		<!-- NAGIVATION -->
 		<slot></slot>
-
 		<Checkbox 
       name="darkmode"
       :label="'Darkmode'"
       :radio="globals.state.theme.darkmode"
       @update:radio="event => globals.actions.toggleTheme()"
-      class="mn-l-thin mn-r-auto desktop-only t-semi pd-micro br-2px br-solid radius-extra"
+      class="mn-l-thin desktop-only t-semi pd-micro br-2px br-solid radius-extra"
       :theme="theme"
       :class="{
     		'br-light t-black': theme === 'light',
     		'br-dark t-white': theme === 'dark'  
     	}"
     />
+  </div>
 
+	<div class="flex-justify-end flex-v-center flex-nowrap flex gap-micro w-min-20 w-max-20r">
 		<Button
 			aria-label="shopcart"
 			:submit="a => shopcart.actions.toggleShopcart()" 
 			:counter="shopcart.getters.cartTotalAmount" 
 			:showSucces="false"
 			:showLoader="false"
-			class="pd-zero mn-l-auto mn-r-micro"
+			class="pd-zero mn-r-micro"
 			> 
 			<IconShopcart 
 				class="i-semi"
@@ -184,7 +173,7 @@
     		'bg-dark t-white': theme === 'dark'  
     	}"
     />
-	</header>
+  </div>
 </template>
 
 <style lang="scss">

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

@@ -72,8 +72,6 @@ watch(() => route.path, () => {
   if (props.stateSidebar === true) emits('closeSidebar');
 });
 
-
-
 let vClickOutside = clickOutside
 
 function clickedOutside(event) {