@ozdao/prometheus-framework 0.2.197 → 0.2.199

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

@@ -1,6 +1,6 @@
 <template>
 	<section class="t-center pd-medium">
-		<!-- <img src="@/assets/icons/message1.png" class="i-extra mn-b-small"> -->
+		<!-- <img loading="lazy" src="@/assets/icons/message1.png" class="i-extra mn-b-small"> -->
 
 		<h3 class="mn-b-medium">
 			{{ t('verifyNumberTitle') }}

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

@@ -1,7 +1,7 @@
 <template>
 	<section class="t-left pd-medium">
 		<!-- Header -->
-		<!-- <img src="@/assets/icons/password.png" class="i-extra mn-b-small"> -->
+		<!-- <img loading="lazy" src="@/assets/icons/password.png" class="i-extra mn-b-small"> -->
 		<h3 class="mn-b-small">{{ t('almostDone') }}</h3>
 		<p v-if="route.query.method === 'reset-password'" class="mn-b-semi t-transp">{{ t('newPasswordPrompt') }}</p>
 		<p v-else class="mn-b-semi t-transp">{{ t('registrationPasswordPrompt') }}</p>

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

@@ -1,6 +1,6 @@
 <template>
 	<section class="t-left pd-medium">
-		<!-- <img src="@/assets/icons/password.png" class="i-extra mn-b-small"> -->
+		<!-- <img loading="lazy" src="@/assets/icons/password.png" class="i-extra mn-b-small"> -->
 		<!-- Header -->
 		<h3 class="mn-b-small">{{ t('forgotPasswordTitle') }}</h3>
 		<p class="mn-b-small t-transp">{{ t('instructions') }}</p>

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

@@ -1,7 +1,7 @@
 <template>
 	<section class="">
 		<!-- Header -->
-		<img :src="'/logo/logo.svg'" class="i-extra radius-small mn-b-small">
+		<img loading="lazy" :src="'/logo/logo.svg'" class="i-extra radius-small mn-b-small">
 
 		<h3 class="mn-b-medium">
 			{{ t('title') }}

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

@@ -1,7 +1,7 @@
 <template>
 	<section class="t-left pd-medium">
 		<!-- Header -->
-		<!-- <img src="@/assets/images/logo.svg" class="i-extra mn-b-small"> -->
+		<!-- <img loading="lazy" src="@/assets/images/logo.svg" class="i-extra mn-b-small"> -->
 		<h3 class="mn-b-small">{{t('title')}}</h3>
 		
 		<!-- Select -->

package/src/modules/backoffice/components/admin/FastOrders.vue

@@ -45,7 +45,7 @@
         <div  v-if="fastorder.products.length > 0" class="w-100 spoiler">
           <div @click="spoiler = !spoiler"  class="mn-b-small flex">
             <!-- <span>Всего товаров {{leftover.positions.length}}</span> -->
-            <img :class="{ 'spoiler-active': spoiler }" class="button-icon" src="@/assets/icons/arrow-down-spoiler.svg">
+            <img loading="lazy" :class="{ 'spoiler-active': spoiler }" class="button-icon" src="@/assets/icons/arrow-down-spoiler.svg">
           </div>
 
           <transition name="fade">

package/src/modules/chats/components/blocks/ChatMessage.vue

@@ -4,7 +4,7 @@
     :class="{'bg-main-nano': message.username === 'Weeder Support'}"
   >
     <p class="flex-v-center gap-thin flex-nowrap flex w-100 p-small">
-      <!-- <img v-if="message.username === 'Weeder Support'" src="/logo/logo.png" class="i-medium"> -->
+      <!-- <img loading="lazy" v-if="message.username === 'Weeder Support'" src="/logo/logo.png" class="i-medium"> -->
       <strong class="mn-r-auto"><span class="t-semi">{{ message.username }}</span> <span class="t-transp">{{formatDate(message.createdAt)}}</span></strong>
     </p>
     <p>{{ message.text }}</p>

package/src/modules/community/components/blocks/CardBlogpost.vue

@@ -97,7 +97,7 @@
 		<template
 			v-if="firstImage && firstImage.content && type !== 'blogpostPage'"
 		>
-			<img 
+			<img loading="lazy" 
 				:src="(FILE_SERVER_URL || '') + firstImage.content" 
 				alt="Blog post image" 
 				class="mn-b-medium object-fit-cover w-100 h-min-10r  h-100"

package/src/modules/constructor/components/elements/Image.vue

@@ -3,14 +3,14 @@
     v-if="prop.content" 
     class="o-hidden radius-big pos-relative bg-light mn-b-small w-100 flex-center flex"
   >
-    <img 
+    <img loading="lazy" 
       :src="(FILE_SERVER_URL || '') + prop.content" 
       alt="Event image" 
       class="pos-relative z-index-1 d-block mn-auto w-100 h-100 object-fit-contain"
       style="max-height: 40rem"
     />
 
-    <img 
+    <img loading="lazy" 
       :src="(FILE_SERVER_URL || '') + prop.content" 
       alt="Event Background" 
       class="z-index-0 pos-absolute w-100 h-100 pos-t-0 pos-r-0"

package/src/modules/constructor/components/elements/ImageUpload.vue

@@ -6,7 +6,7 @@
     @dragenter.prevent
     @dragleave.prevent
     class="w-100 radius-big bg-white image-upload-area flex-v-center flex-h-center flex t-black mn-b-small">
-    <img v-if="prop.content" :src="(FILE_SERVER_URL || '') + prop.content" alt="Uploaded image" class="w-100 h-30r object-fit-contain"/>
+    <img loading="lazy" v-if="prop.content" :src="(FILE_SERVER_URL || '') + prop.content" alt="Uploaded image" class="w-100 h-30r object-fit-contain"/>
     <span v-else class="t-transp pd-extra" >Click or drag-and-drop your image</span>
     <input v-if="!prop.content" type="file" ref="fileInput" tabindex="-1" @change="onFileChange" style="display: none"/>
   </div>

package/src/modules/events/components/blocks/CardEvent.vue

@@ -26,13 +26,13 @@
  			v-if="event.cover && type !== 'short'" 
  			class="o-hidden pos-relative bg-light mn-b-small w-100"
  		>
-	    <img 
+	    <img loading="lazy" 
 	    	:src="(FILE_SERVER_URL || '') + event.cover" 
 	    	alt="Event image" 
 	    	class="pos-relative z-index-1 d-block mn-auto h-20r"
 	    />
 
-	    <img 
+	    <img loading="lazy" 
 	    	:src="(FILE_SERVER_URL || '') + event.cover" 
 	    	alt="Event Background" 
 	    	class="z-index-0 pos-absolute w-100 h-100 pos-t-0 pos-r-0"

package/src/modules/events/components/pages/EditEvent.vue

@@ -379,7 +379,14 @@
     </div>
 
 		<h3 class="mn-b-small">Date</h3>
-    <VueDatePicker v-model="date"  range class="z-index-3 mn-b-semi" />
+    <VueDatePicker v-model="date"  range class="z-index-3 mn-b-semi bg-light" />
+
+ <!--    <Calendar
+      v-model:date="date"
+      :locale="$i18n.locale"
+      :allowRange="false"
+      class="radius-semi w-100 o-hidden bg-light"
+    /> -->
 
     <h3 class="mn-b-small">Description</h3>
 		<section v-if="event" class="pd-b-extra w-100 bg-light pd-big radius-big">
@@ -443,6 +450,10 @@ import Constructor from '@pf/src/modules/constructor/components/sections/Constru
 import VueDatePicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css'
 
+
+
+import Calendar from '@pf/src/components/DatePicker/Calendar.vue'
+
 import Block from '@pf/src/components/Block/Block.vue';
 import Popup from '@pf/src/components/Popup/Popup.vue';
 import Field         from '@pf/src/components/Field/Field.vue'

package/src/modules/events/components/pages/EditEventTickets.vue

@@ -93,7 +93,7 @@
         v-for="(ticket, index) in items" 
         class="radius-big bg-light gap-small pd-medium flex-v-center flex-nowrap flex pos-relative mn-b-thin"
       >
-        <a :href="ticket.image" target="_blank"><img :src="ticket.qrcode" class="radius-small h-5r w-5r"></a>
+        <a :href="ticket.image" target="_blank"><img loading="lazy" :src="ticket.qrcode" class="radius-small h-5r w-5r"></a>
 
         <div class="mn-r-auto ">
            <p class="h4">

package/src/modules/events/components/pages/Event.vue

@@ -129,7 +129,7 @@
           @updateTicket="handleTicketUpdate"
         />
 
-        <!-- <img v-if="qrcode" :src="qrcode" class="w-8r h-8r" /> -->
+        <!-- <img loading="lazy" v-if="qrcode" :src="qrcode" class="w-8r h-8r" /> -->
 
         
 

package/src/modules/events/components/sections/HeroEvent.vue

@@ -15,7 +15,7 @@
    		class="desktop-only radius-big o-hidden bg-black  pos-relative"
    	>
 
-	    <img  v-if="content.cover && !content.video" :src="content.cover" 	class="desktop-only object-fit-cover pos-absolute z-index-0 pos-t-0 pos-l-0 w-100 h-100">
+	    <img loading="lazy"  v-if="content.cover && !content.video" :src="content.cover" 	class="desktop-only object-fit-cover pos-absolute z-index-0 pos-t-0 pos-l-0 w-100 h-100">
 
 			<video 
 				v-if="content.video"
@@ -37,9 +37,9 @@
 	  	o-hidden 
 	  	bg-black  
 	  	pd-big mn-r-auto mn-l-auto t-white flex-h-center flex-column o-hidden flex-v-start t-left flex w-100 h-100 gap-zero">
-    	<!-- <img src="/logo/jungle-stereo-cosmonaut.png"  class="h-8r mn-b-small z-index-1"/> -->
+    	<!-- <img loading="lazy" src="/logo/jungle-stereo-cosmonaut.png"  class="h-8r mn-b-small z-index-1"/> -->
     	<div class="mn-b-big z-index-1 flex-nowrap flex gap-small">
-	    	<img v-for="logo in content.logos" class="radius-thin object-fit-contain i-big" :src="logo">
+	    	<img loading="lazy" v-for="logo in content.logos" class="radius-thin object-fit-contain i-big" :src="logo">
 	    </div>
 
     	<h3 class="pd-thin z-index-1  w-max br-solid br-2px br-white radius-extra 	mn-b-thin">
@@ -78,7 +78,7 @@
 	    	</a>
 	    </div>
 
-	    <img style="object-fit: cover; opacity: 0.2;"  v-if="content.cover && !content.video" :src="content.cover" 	class="mobile-only pos-absolute z-index-0 pos-t-0 pos-l-0 w-100 h-100">
+	    <img loading="lazy" style="object-fit: cover; opacity: 0.2;"  v-if="content.cover && !content.video" :src="content.cover" 	class="mobile-only pos-absolute z-index-0 pos-t-0 pos-l-0 w-100 h-100">
 
 	    <video 
 		    v-if="content.video"

package/src/modules/events/components/sections/SectionPreviousEvents.vue

@@ -3,7 +3,7 @@
 	<div class="cols-2 gap-big pos-relative ">
 		 <div class="cols-1 gap-small ">
 		  <a v-if="options?.link" @click="clickBuyTicket()" href="#"  class="bg-main flex-child-grow-1  flex-child-shrink-0 flex-child-basis-auto o-hidden  radius-big pd-big flex-center flex-column flex w-100 gap-zero">
-		  	<img v-if="content?.ticket" class="w-80" :src="content?.ticket">
+		  	<img loading="lazy" v-if="content?.ticket" class="w-80" :src="content?.ticket">
 
 	    	<a class="t-white bg-black pd-l-small pd-b-thin pd-t-thin pd-r-small h4 radius-extra uppercase t-nye204">
 	    		<!-- SOLD OUT -->

package/src/modules/events/components/sections/SectionSpecialGuests.vue

@@ -6,7 +6,7 @@
 	   	<div style="max-height: 100%"  class="cols-1 gap-semi">
 		    <div class="pd-medium br-solid" :class="{'br-solid br-b br-white-transp-10': index < content?.guests.length - 1}" v-for="(item, index) in content?.guests">
 			    <div class="o-hidden mn-b-semi bg-black radius-big h-4r w-4r  pos-relative">
-			    	<img class="w-100 h-100 object-fit-cover" :src='item.photo'>
+			    	<img loading="lazy" class="w-100 h-100 object-fit-cover" :src='item.photo'>
 			    </div>
 
 		    	<h4 class="d-block uppercase mn-b-small t-semi">{{item.name}}</h4>

package/src/modules/events/controllers/utils/templateEmail.js

@@ -2,7 +2,7 @@ const Mustache = require("mustache");
 
 // Шаблон HTML и CSS в одной строке
 const template = `
-<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Ticket Confirmation</title></head><body style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;margin:0;padding:0;color:#333;background-color:#f9f9f9"><span style="opacity:0">{{ randomness }}</span><div class="container" style="border-radius:48px;width:100%;max-width:650px;background:#fff;margin:20px auto;overflow:hidden"><div class="header" style="background:#e31c25;color:#fff;text-align:left"><img alt="NO MORE SNOW" style="max-width:150px;height:auto;padding:20px" src="https://thecommunephuket.com/logo/nms_logotype-white.jpg"><h1 style="box-sizing:border-box;border-top:2px solid rgba(0,0,0,.1);padding:40px;text-align:center;margin:0;text-transform:uppercase;width:100%">Confirmation of Your Ticket Purchase</h1></div><div class="content" style="padding:20px;text-align:center"><h2 style="color:#000">Thank You, {{clientName}}!</h2><p style="color:#000;opacity:.5">Your purchase has been confirmed. Please find your ticket attached to this email.</p><div class="details" style="background-color:#f5f5f5;padding:10px;margin-top:20px;margin-bottom:20px;border-radius:24px"><h3 style="color:#000;margin:0">Event Details</h3><p style="display:flex;color:#000"><strong style="display:block;width:100%;opacity:.5;text-align:right;margin-right:.5rem">Event:</strong><span style="text-align:left;width:100%">{{eventName}}</span></p><p style="display:flex;color:#000"><strong style="display:block;width:100%;opacity:.5;text-align:right;margin-right:.5rem">Date:</strong><span style="text-align:left;width:100%">{{eventDate}}</span></p><p style="display:flex;color:#000"><strong style="display:block;width:100%;opacity:.5;text-align:right;margin-right:.5rem">Time:</strong><span style="text-align:left;width:100%">{{eventTime}}</span></p></div><div class="social-links" style="text-align:center"><h3 style="color:#000">Stay Connected</h3><p style="color:#000;opacity:.5">Follow us on Instagram for the latest updates and exclusive content!</p><table border="0" cellpadding="0" cellspacing="0" style="margin: 0 auto; border-collapse:separate;mso-table-lspace:0;mso-table-rspace:0;width:auto"><tr><td style="font-family:sans-serif;font-size:14px;vertical-align:top;background-color:#e31c25;border-radius:48px;text-align:center" valign="top" bgcolor="#e31c25" align="center"><a href="https://www.instagram.com/no.more.snow/?hl=en" target="_blank" style="display:inline-block;color:#fff;background-color:#e31c25;border:solid 1px #e31c25;border-radius:48px;box-sizing:border-box;cursor:pointer;text-decoration:none;font-size:14px;font-weight:700;margin:0;padding:12px 25px;text-transform:capitalize;border-color:#e31c25">Instagram</a></td></tr></table></div><div class="footer" style="text-align:center;padding:10px 20px;border-radius:24px"><p style="color:#000">Need help? Contact us:<a href="https://t.me/thecommunebar" style="color:#e31c25">@thecommunebar</a></p></div><p class="details copyright" style="color:#000;background-color:#f5f5f5;padding:20px;margin-top:20px;margin-bottom:20px;border-radius:24px;margin:0;box-sizing:border-box;text-align:center">&copy; 2024 NO MORE SNOW Ltd. All Rights Reserved.</p></div></div><span style="opacity:0">{{ randomness }}</span></body></html>
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Ticket Confirmation</title></head><body style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;margin:0;padding:0;color:#333;background-color:#f9f9f9"><span style="opacity:0">{{ randomness }}</span><div class="container" style="border-radius:48px;width:100%;max-width:650px;background:#fff;margin:20px auto;overflow:hidden"><div class="header" style="background:#e31c25;color:#fff;text-align:left"><img loading="lazy" alt="NO MORE SNOW" style="max-width:150px;height:auto;padding:20px" src="https://thecommunephuket.com/logo/nms_logotype-white.jpg"><h1 style="box-sizing:border-box;border-top:2px solid rgba(0,0,0,.1);padding:40px;text-align:center;margin:0;text-transform:uppercase;width:100%">Confirmation of Your Ticket Purchase</h1></div><div class="content" style="padding:20px;text-align:center"><h2 style="color:#000">Thank You, {{clientName}}!</h2><p style="color:#000;opacity:.5">Your purchase has been confirmed. Please find your ticket attached to this email.</p><div class="details" style="background-color:#f5f5f5;padding:10px;margin-top:20px;margin-bottom:20px;border-radius:24px"><h3 style="color:#000;margin:0">Event Details</h3><p style="display:flex;color:#000"><strong style="display:block;width:100%;opacity:.5;text-align:right;margin-right:.5rem">Event:</strong><span style="text-align:left;width:100%">{{eventName}}</span></p><p style="display:flex;color:#000"><strong style="display:block;width:100%;opacity:.5;text-align:right;margin-right:.5rem">Date:</strong><span style="text-align:left;width:100%">{{eventDate}}</span></p><p style="display:flex;color:#000"><strong style="display:block;width:100%;opacity:.5;text-align:right;margin-right:.5rem">Time:</strong><span style="text-align:left;width:100%">{{eventTime}}</span></p></div><div class="social-links" style="text-align:center"><h3 style="color:#000">Stay Connected</h3><p style="color:#000;opacity:.5">Follow us on Instagram for the latest updates and exclusive content!</p><table border="0" cellpadding="0" cellspacing="0" style="margin: 0 auto; border-collapse:separate;mso-table-lspace:0;mso-table-rspace:0;width:auto"><tr><td style="font-family:sans-serif;font-size:14px;vertical-align:top;background-color:#e31c25;border-radius:48px;text-align:center" valign="top" bgcolor="#e31c25" align="center"><a href="https://www.instagram.com/no.more.snow/?hl=en" target="_blank" style="display:inline-block;color:#fff;background-color:#e31c25;border:solid 1px #e31c25;border-radius:48px;box-sizing:border-box;cursor:pointer;text-decoration:none;font-size:14px;font-weight:700;margin:0;padding:12px 25px;text-transform:capitalize;border-color:#e31c25">Instagram</a></td></tr></table></div><div class="footer" style="text-align:center;padding:10px 20px;border-radius:24px"><p style="color:#000">Need help? Contact us:<a href="https://t.me/thecommunebar" style="color:#e31c25">@thecommunebar</a></p></div><p class="details copyright" style="color:#000;background-color:#f5f5f5;padding:20px;margin-top:20px;margin-bottom:20px;border-radius:24px;margin:0;box-sizing:border-box;text-align:center">&copy; 2024 NO MORE SNOW Ltd. All Rights Reserved.</p></div></div><span style="opacity:0">{{ randomness }}</span></body></html>
 `;
 
 // Функция для рендеринга шаблона с данными

package/src/modules/events/controllers/utils/templateTicket.js

@@ -159,7 +159,7 @@ const template = `
         </div>
         <div class="info platform">
           <span>SHOW </span><span>THIS </span><span>QR CODE</span>
-          <img src="{{qrCode}}" alt="QR Code" />
+          <img loading="lazy" src="{{qrCode}}" alt="QR Code" />
         </div>
         <div class="info departure">
           <div class="info__item">Location</div>

package/src/modules/gallery/components/pages/Gallery.vue

@@ -49,7 +49,7 @@
     >
       <div v-for="item in items"  :key="item._id" class="bg-light radius-medium o-hidden flex-column pos-relative flex-wrap">
         <div class="w-100 h-100 h-min-10r pos-relative">
-          <img 
+          <img loading="lazy" 
             :src="((FILE_SERVER_URL || '') + item.cover)" 
             class="w-100 h-100 object-fit-cover bg-black " @click="openPreviewPopup(item)" 
           />

package/src/modules/gallery/components/sections/BackofficeGallery.vue

@@ -60,7 +60,7 @@
         />
 
         <div class="pos-relative">
-          <img 
+          <img loading="lazy" 
             :src="(FILE_SERVER_URL || '') + item.cover" 
             class="w-100 h-20r object-fit-contain bg-black " @click="openPreviewPopup(item)" 
           />
@@ -96,7 +96,7 @@
       :isPopupOpen="isOpenPhotoPopup"
       class="bg-white w-max-30r radius-big pd-big"
     >
-      <img 
+      <img loading="lazy" 
         v-if="selectedImage.cover" 
         :src="selectedImage.cover" 
         class="radius-small w-100 mn-b-small h-20r object-fit-cover " 

package/src/modules/globals/views/components/blocks/CardHeader.vue

@@ -10,7 +10,7 @@
 			<div
 				class="w-100 flex-nowrap flex-v-center flex"
 			>
-				<img 
+				<img loading="lazy" 
 					v-if="owner.target?.profile?.photo?.length > 0 && type !== 'short'" 
 					:src="(FILE_SERVER_URL || '') + owner.target.profile.photo" 
 					class="radius-medium object-fit-cover mn-r-thin i-thin" 
@@ -108,7 +108,7 @@
 					    <template
 								v-for="(photo, index) in membersPhotos.slice(0,2)"
 					    >
-						    <img 
+						    <img loading="lazy" 
 					    		v-if="photo"
 					     
 					        :key="index"

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

@@ -1,21 +1,22 @@
 <template>
-  <!-- <transition 
+  <transition 
     name="scaleTransition" 
     mode="out-in"
   >
     <section 
-      v-if="FirstUse"
+      v-if="FirstUse && route.meta.walkthrough"
       class="w-100 h-100" 
      >
-      <router-view 
+      <component 
+        :is="route.meta.walkthrough"
         name="Walkthrough"
         @updateFirstUse="updateFirstUse" 
         :slides="[1,2,3]" 
         class="tab"
       >
-      </router-view>
+      </component>
     </section>
-  </transition> -->
+  </transition>
 
   <transition name="moveFromTop" mode="out-in" appear>
     <component
@@ -41,46 +42,18 @@
     </component>
   </transition>
 
-  <transition name="moveFromTop" mode="out-in" appear>
-    <component
-      v-if="!MOBILE_APP && route.meta.header"
-      :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="logotype"
-      :class="{
-        'pos-l-70': globals.state.isOpenSidebar,
-        'pos-l-0': !globals.state.isOpenSidebar,
-      }"
-    >
-      <component
-        v-if="route.meta.navigation"
-        :is="route.meta.navigation"
-        class="mn-l-auto desktop-only"
-      />
-    </component>
-  </transition>
-  
   <router-view 
     v-slot="{ Component }"
     :class="{
       'pos-l-70': globals.state.isOpenSidebar,
-      'pos-l-0': !globals.state.isOpenSidebar
+      'pos-l-0': !globals.state.isOpenSidebar,
+      'pd-t-extra': MOBILE_APP === 'ios'
     }"
-    ref="screen"
-    @scroll="handleScroll"
     @click="globals.state.isOpenSidebar ? a => globals.state.isOpenSidebar = false : a => {console.log('not succes')}"
     class="transition-ease-in-out h-min-100 w-100 bg-white pos-relative"
   >
-    <component :is="Component"/>
+    <component ref="page" :is="Component"/>
   </router-view>
-
-  <BottomNavigation 
-    v-if="MOBILE_APP && route.meta.title_hide"
-    class="pd-small z-index-2"
-  />
-
 </template>
 
 <script setup>
@@ -91,8 +64,6 @@
 
   import * as globals from '@pf/src/modules/globals/views/store/globals'
 
-  import BottomNavigation from '@pf/src/modules/globals/views/components/partials/BottomNavigation.vue';
-
   const props = defineProps({
     messages: {
       type: Object,
@@ -103,8 +74,12 @@
     },
   })
   /////////////////////////////
-  // ONBOARDING
+  // LOADING
   /////////////////////////////
+    // State
+  let show = ref(false)
+  // Preloader
+  const page = ref(null)
   /////////////////////////////
   // META
   /////////////////////////////
@@ -185,5 +160,6 @@
 
   onMounted(async () => {
     await getFirstUse()
+    if (page) show.value = true
   });
 </script>

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

@@ -1,10 +1,32 @@
 <template>
-	<div 
-		id="app-wrapper" 
-		class="pos-relative"	
-	>
+	<div id="app-wrapper" class="pos-relative">
 		<transition name="moveFromTop" appear>
-			<Loader v-if="!page && !show" class="pos-fixed"/>
+			<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>
+			<NavigationBar
+		  	v-if="MOBILE_APP"
+		  	:logotype="route.meta.logotype"
+				:style="MOBILE_APP === 'ios' ?'padding-top: 6rem;':''" 
+		  />
 		</transition>
 
 	  <Popup 
@@ -14,67 +36,89 @@
 	  >	
 	  	<LocationSelection />
 	  </Popup>
-	
-		<ShopCart />
-
-		<Status 
-			v-if="globals.state.error.show" 
-			:data="globals.state.error"
-			class="z-index-7" 
-		/>
-
-		<!-- <section v-if="!route.meta?.breadcrumbs?.hide" class="pd-thin pd-b-zero">
-			<Breadcrumbs 
-				v-if="!MOBILE_APP"
-				class="bg-light pd-small radius-big"
-			/>
-		</section> -->
-		<Suspense>
-			<router-view v-show="show" v-slot="{ Component, route }" class="o-scroll">
-				<transition @before-enter="scrollTop" name="scaleIn" mode="out-in" appear>
-	      	<component 
-
-	      		ref="page"  
-	      		:is="Component" 
-	      		:key="route.path"
-	      	/>
-	      </transition>
-			</router-view>
-		</Suspense>
-    <!-- <Footer /> -->
-  
+
+		<section 
+			id="screen" 
+			ref="screen"
+			@scroll="handleScroll"
+			class="transition-ease-in-out h-min-100 w-100 bg-white pos-relative o-scroll"
+		>
+			<ShopCart />
+
+			<!-- <section v-if="!route.meta?.breadcrumbs?.hide" class="pd-thin pd-b-zero">
+				<Breadcrumbs 
+					v-if="!MOBILE_APP"
+					class="bg-light pd-small radius-big"
+				/>
+			</section> -->
+
+			<Suspense>
+				<router-view  
+					v-slot="{ Component, route }" 
+					:class="{'mn-b-extra': MOBILE_APP}"
+				>
+					<Status 
+						v-if="globals.state.error.show" 
+						:data="globals.state.error"
+						class="z-index-7" 
+					/>
+
+
+					<transition @before-enter="scrollTop" name="scaleIn" mode="out-in" appear>
+		      	<component 
+		      		ref="page"  
+		      		:is="Component" 
+		      		:key="route.path"
+		      	/>
+		      </transition>
+
+		      <!-- <Footer /> -->
+				</router-view>
+			</Suspense>
+     
+		</section>
+
+    <BottomNavigation 
+      v-if="MOBILE_APP && route.meta.title_hide"
+      class="pd-small z-index-2"
+    />
 	</div>
 </template>
 
 
+
 <script setup>
-	import { computed, ref, onMounted, provide, inject, onUnmounted, onServerPrefetch, onBeforeMount } from 'vue'
+	import { computed, ref, onMounted, provide, inject, onUnmounted, onServerPrefetch, onBeforeMount, defineAsyncComponent } from 'vue'
 	// Router
 	import { useRoute, useRouter } from 'vue-router'
 	// Store
 	import * as globals from '@pf/src/modules/globals/views/store/globals'
 	// Partials
-	import Loader from '@pf/src/components/Loader/Loader.vue'
 	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'
+	const Loader = defineAsyncComponent(() => import(/* webpackChunkName: "loader" */ '@pf/src/components/Loader/Loader.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'
-
-
+	/////////////////////////////
+  // LOADING
+  /////////////////////////////
+    // State
+  let show = ref(false)
+  // Preloader
+  const page = ref(null)
 	/////////////////////////////
 	// CREATED
 	/////////////////////////////
 	const route = useRoute()
 	const router = useRouter()
-	// State
-	let show = ref(false)
-	// Preloader
-	const page = ref(null)
-	const screen = ref(null)
 	// Ref Code
 	const referalCode = ref(route.query.referalCode);
 	/////////////////////////////
@@ -150,8 +194,6 @@
 	     	});
 	   });
 	 	}
-	 	
-		if (page) show.value = true
 		
 		const savedPosition = localStorage.getItem('position');
 
@@ -164,6 +206,8 @@
 		if (referalCode.value) {
 		  localStorage.setItem('referalCode', referalCode.value);
 		}
+
+		if (page) show.value = true
 	});
 </script>