@ozdao/prometheus-framework 0.2.198 → 0.2.199

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

@@ -3,17 +3,18 @@
 		class="pos-sticky w-100 z-index-4 br-b br-solid br-black-transp flex-center flex t-center pd-medium bg-white"
 	>
 
-		<Button
-			v-if="route.meta.title_hide"
-			:submit="a => store.shopcart.actions.toggleShopcart()" 
-			:counter="store.shopcart.getters.cartTotalAmount" 
-			:showSucces="false"
-			:showLoader="false"
-			class="header-shopcart pd-zero mn-l-auto"
-			> 
-			<IconShopcart class="i-semi" fill="#00ff88" />
-		</Button>
-
+		<transition name="slideIn"  mode="out-in">
+			<Button
+				v-if="route.meta.title_hide"
+				:submit="a => shopcart.actions.toggleShopcart()" 
+				:counter="shopcart.getters.cartTotalAmount" 
+				:showSucces="false"
+				:showLoader="false"
+				class="header-shopcart pd-zero mn-l-auto"
+				> 
+				<IconShopcart class="i-semi" fill="#00ff88" />
+			</Button>
+		</transition>
 
 		<transition name="slideIn"  mode="out-in">
 
@@ -40,7 +41,16 @@
 
 		<transition name="slideIn"  mode="out-in">
 			<div :key="route.meta.title_hide" class="header-title">
-				<img v-if="route.meta.title_hide" class="h-2r" src="/logo/logotype.svg">
+				<component
+					v-if="props.logotype && route.meta.title_hide"
+				  :is="props.logotype"
+				  :theme="theme"
+				  class="
+				    h-2r
+				    w-auto
+				    cursor-pointer
+				  "
+				/>
 
 				<p v-else class="t-semi h-2r h4 d-block" >
 					{{route.meta.title[locale.toLowerCase()]}}
@@ -54,17 +64,30 @@
 	import { ref, onMounted, onUnmounted } from 'vue' 
 	import { useRoute, useRouter } from 'vue-router'
 	import { useI18n } from 'vue-i18n';
-	import { useStore } from '@/store';
 	
   import IconShopcart from '@pf/src/modules/icons/entities/IconShopcart.vue'
 	import IconProfile from '@pf/src/modules/icons/entities/IconProfile.vue'
 
 	import Button 				from '@pf/src/components/Button/Button.vue'
 
+	import * as globals from '@pf/src/modules/globals/views/store/globals'
+	import * as shopcart from '@pf/src/modules/orders/store/shopcart'
+	import * as auth from '@pf/src/modules/auth/views/store/auth'
+
+		// Props
+	const props = defineProps({
+    theme: {
+    	type: String,
+	    default: "light"
+    },
+    logotype: {
+	    type: Object
+	  }
+  });
+
 
 	const router = useRouter()
 	const route = useRoute()
-	const store = useStore()
 
 	const { t, mergeLocaleMessage, locale } = useI18n();
 
@@ -77,10 +100,10 @@
 	}
 
 	function handleToggle() {
-		if (store.auth.state.access.status === false) {
+		if (auth.state.access.status === false) {
 			router.push({name: 'Sign In'}) 
 		} else {
-			router.push({ name: 'User Profile', params: { _id: store.auth.state.user._id }})
+			router.push({ name: 'User Profile', params: { _id: auth.state.user._id }})
 		}
 	}
 </script>

package/src/modules/globals/views/components/sections/Walkthrough.vue

@@ -7,7 +7,7 @@
         class="flex-center pd-thin t-center flex-column flex embla__slide"
         :style="{ opacity: tweenSlides.length ? tweenSlides[index] : undefined, transform: tweenSlides[index] ? `scale(${tweenSlides[index]})` : '' }"
       >
-        <img class="w-100" :src="require(`@/assets/images/walkthrough/walkthrough_${index}.png`).default">
+        <img loading="lazy" class="w-100" :src="require(`@/assets/images/walkthrough/walkthrough_${index}.png`).default">
       	<h2 class="mn-b-small">{{slide.title}}</h2>
       	<p class="p-big t-transp">{{slide.subtitle}}</p>
       </div>
@@ -15,7 +15,7 @@
       <div
       	class="flex-center flex-column flex pd-big embla__slide"
       >
-      	<img
+      	<img loading="lazy" 
       		:src="'/logo/logo_square.svg'" 
       		class="i-extra radius-medium mn-b-small"
       	>

package/src/modules/landing/components/sections/Examples.vue

@@ -4,7 +4,7 @@
 			<h2 class="mn-center text-fade-in"><span class="text-splitted">Example of the Strains</span></h2> 
 		</header>
 		<div class="cols-4 w-100 o-scroll pos-relative gap-medium">
-      <img  v-for="(signal,index)  in signals"   class="radius-big h-max-30r signal" :src="'/images/examples/' + signal">
+      <img loading="lazy"  v-for="(signal,index)  in signals"   class="radius-big h-max-30r signal" :src="'/images/examples/' + signal">
 		</div>
 	</section>
 </template>

package/src/modules/landing/components/sections/HowItWorksSection.vue

@@ -9,7 +9,7 @@
     <div class="cols-3">
 
       <div class="cols-2 gap-medium radius-big bg-black t-white pd-medium">
-        <img class="radius-medium w-100 mn-b-medium" src="@/assets/images/howitworks/1.jpg"> 
+        <img loading="lazy" class="radius-medium w-100 mn-b-medium" src="@/assets/images/howitworks/1.jpg"> 
         <div>
         <h3 class="mn-b-medium">{{t('steps.step1.headline')}}</h3>
         <p class="t-transp">{{t('steps.step1.text')}}</p>
@@ -17,7 +17,7 @@
       </div>
 
       <div class="cols-2 gap-medium radius-big bg-black t-white pd-medium">
-        <img class="radius-medium  w-100 mn-b-medium" src="@/assets/images/howitworks/2.jpg"> 
+        <img loading="lazy" class="radius-medium  w-100 mn-b-medium" src="@/assets/images/howitworks/2.jpg"> 
         <div>
         <h3 class="mn-b-medium">{{t('steps.step2.headline')}}</h3>
         <p class="t-transp">{{t('steps.step2.text')}}</p>
@@ -25,7 +25,7 @@
       </div>
 
       <div class="cols-2 gap-medium radius-big bg-black t-white pd-medium">
-        <img class="radius-medium w-100 mn-b-medium" src="@/assets/images/howitworks/3.jpg">
+        <img loading="lazy" class="radius-medium w-100 mn-b-medium" src="@/assets/images/howitworks/3.jpg">
         <div>
         <h3 class="mn-b-medium">{{t('steps.step3.headline')}}</h3>
         <p class="t-transp">{{t('steps.step3.text')}}</p>

package/src/modules/landing/components/sections/HowToBuyWDR.vue

@@ -28,7 +28,7 @@
         pd-big mn-b-medium
         radius-big o-hidden"
       >
-        <img class="mn-b-small" src="/logo/logo-disabled.png">
+        <img loading="lazy" class="mn-b-small" src="/logo/logo-disabled.png">
         <p class="t-semi uppercase">{{ t('comingSoon') }}</p>
       </div>
       <p class="mn-b-small">

package/src/modules/landing/components/sections/InstagramSection.vue

@@ -6,10 +6,10 @@
       </div>
        <div data-glide-el="controls" class="mn-b-big flex controls">
         <button data-glide-dir="<" class="btn-circle">
-           <img src="@/assets/icons/arrow-left.svg">
+           <img loading="lazy" src="@/assets/icons/arrow-left.svg">
         </button>
         <button data-glide-dir=">" class="btn-circle">
-         <img src="@/assets/icons/arrow-right.svg">
+         <img loading="lazy" src="@/assets/icons/arrow-right.svg">
         </button>
       </div>
       <div data-glide-el="track" class="mn-b-extra group glide__track">

package/src/modules/landing/components/sections/MobileApp.vue

@@ -2,7 +2,7 @@
   <div id="mobileApp">
     <section class="pos-relative cols-2 pd-thin o-hidden bg-black t-white radius-extra">
       <div class="z-index-1 h-100">
-        <img 
+        <img loading="lazy" 
           :src="(FILE_SERVER_URL || '') + mockupImage" 
           alt="Desktop App Mockup" 
           class="radius-extra h-100 w-100 object-fit-cover"

package/src/modules/landing/components/sections/SectionEarn.vue

@@ -3,7 +3,7 @@
     <section class="cols-2 bg-black t-black radius-big pd-thin gap-thin">
       <div>
         <div class="mn-b-thin t-white pd-big radius-big">
-           <img class="mn-b-semi h-5r"  src="/logo/wdt.svg">
+           <img loading="lazy" class="mn-b-semi h-5r"  src="/logo/wdt.svg">
 
           <h2 class="mn-b-small" v-html="t('title')"/>
           <p class="mn-b-small p-big t-transp">{{ t('description') }}</p>  
@@ -30,7 +30,7 @@
       </div>
 
       <div class="pos-relative pd-medium flex-column flex-center flex h-100 bg-main radius-big o-hidden">
-          <img src="/landing/token_hands.png" class="mn-t-extra z-index-1 w-75 mn-b-auto" >
+          <img loading="lazy" src="/landing/token_hands.png" class="mn-t-extra z-index-1 w-75 mn-b-auto" >
           <!-- <h3 class="mn-b-small z-index-1">How to Earn?</h3> -->
           <ConnectMetamask class="w-100 z-index-1" />
           <div style="background-image: url(/spiral.jpg)" class="mn-b-extra spiral"></div>

package/src/modules/landing/components/sections/SectionFeature.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="o-hidden bg-light pos-relative radius-big cols-2">
 		<div style="min-height: 20rem;" :class="{'order-2':order}" class="pos-relative w-100 h-100 bg-light">
-			<img class="w-100 h-100 object-fit-cover pos-absolute" :src="image">
+			<img loading="lazy" class="w-100 h-100 object-fit-cover pos-absolute" :src="image">
 		</div>   
    <div class="pd-big flex-column flex w-100 h-100 gap-zero">
     	<h2 class="mn-b-medium">

package/src/modules/landing/components/sections/SectionFeaturesImages.vue

@@ -15,7 +15,7 @@
         :key="feature.title" 
         class="w-100 pd-medium bg-light radius-big"
       >
-        <img 
+        <img loading="lazy" 
           class="radius-medium bg-light h-max-20r object-fit-cover w-100 mn-b-medium" 
           :src="feature.image"
         > 

package/src/modules/landing/components/sections/SectionHeroToken.vue

@@ -30,7 +30,7 @@
 		class="pos-relative bg-black o-hidden t-white t-center pd-extra radius-big flex-column flex-center flex"
 	>
 		<div class="sheen h-5r mn-b-small radius-extra o-hidden pos-relative ">
-	  	<img src="/logo/wdt.svg" class="w-100 h-100">
+	  	<img loading="lazy" src="/logo/wdt.svg" class="w-100 h-100">
 	  </div>
 
 		<h1 

package/src/modules/landing/components/sections/SectionsSection.vue

@@ -4,25 +4,25 @@
   
   <div class="cols-4 gap-thin">
     <router-link to="/marketplace" class="t-center cursor-pointer hover-scale-0 transition-ease-in pd-big bg-light t-black radius-big">
-      <img src="/sections/1.png" alt="" class="section-image">
+      <img loading="lazy" src="/sections/1.png" alt="" class="section-image">
       <h3 class="mn-b-medium">{{t('section1.title')}}</h3>
       <p class="t-transp">{{t('section1.text')}}</p>
     </router-link >
 
     <router-link to="/spots" class="t-center cursor-pointer hover-scale-0 transition-ease-in pd-big bg-light t-black radius-big">
-      <img src="/sections/2.png" alt="" class="section-image">
+      <img loading="lazy" src="/sections/2.png" alt="" class="section-image">
       <h3 class="mn-b-medium">{{t('section2.title')}}</h3>
       <p class="t-transp">{{t('section2.text')}}</p>
     </router-link>
 
     <router-link to="/community" class="t-center cursor-pointer hover-scale-0 transition-ease-in pd-big bg-light t-black radius-big">
-      <img src="/sections/3.png" alt="" class="section-image">
+      <img loading="lazy" src="/sections/3.png" alt="" class="section-image">
       <h3 class="mn-b-medium">{{t('section3.title')}}</h3>
       <p class="t-transp">{{t('section3.text')}}</p>
     </router-link>
 
     <router-link to="/governance" class="t-center cursor-pointer hover-scale-0 transition-ease-in pd-big bg-light t-black radius-big">
-      <img src="/sections/4.png" alt="" class="section-image">
+      <img loading="lazy" src="/sections/4.png" alt="" class="section-image">
       <h3 class="mn-b-medium">{{t('section4.title')}}</h3>
       <p class="t-transp">{{t('section4.text')}}</p>
     </router-link>

package/src/modules/landing/components/sections/WhatIsWDRSection.vue

@@ -11,19 +11,19 @@
     <div class="cols-3 gap-thin">
 
       <div class="w-100 pd-medium bg-light radius-big">
-        <img class="radius-medium bg-light h-max-20r object-fit-cover w-100 mn-b-medium" src="@/assets/images/howitworks/step1.png"> 
+        <img loading="lazy" class="radius-medium bg-light h-max-20r object-fit-cover w-100 mn-b-medium" src="@/assets/images/howitworks/step1.png"> 
         <h3 class="mn-b-medium">{{t('steps.step1.headline')}}</h3>
         <p class="t-transp">{{t('steps.step1.text')}}</p>
       </div>
 
       <div class="w-100 pd-medium bg-light radius-big">
-        <img class="radius-medium bg-light  h-max-20r object-fit-cover w-100 mn-b-medium" src="@/assets/images/howitworks/step2.png"> 
+        <img loading="lazy" class="radius-medium bg-light  h-max-20r object-fit-cover w-100 mn-b-medium" src="@/assets/images/howitworks/step2.png"> 
         <h3 class="mn-b-medium">{{t('steps.step2.headline')}}</h3>
         <p class="t-transp">{{t('steps.step2.text')}}</p>
       </div>
 
       <div class="w-100 pd-medium bg-light radius-big">
-        <img class="radius-medium bg-light  h-max-20r object-fit-cover w-100 mn-b-medium" src="@/assets/images/howitworks/step3.png">
+        <img loading="lazy" class="radius-medium bg-light  h-max-20r object-fit-cover w-100 mn-b-medium" src="@/assets/images/howitworks/step3.png">
         <h3 class="mn-b-medium">{{t('steps.step3.headline')}}</h3>
         <p class="t-transp">{{t('steps.step3.text')}}</p>
       </div>

package/src/modules/landing/router/landing.js

@@ -1,7 +1,7 @@
 const landing = [
   {
     path: '',
-    name: "Home",
+    name: "Home Page",
     meta: {
       title_hide: true,
       header_theme: 'dark',

package/src/modules/orders/components/blocks/CardOrder.vue

@@ -1,11 +1,11 @@
 <template>
 	<div class="pd-big mn-regular order-customer-card col"> 
 	  <p class="mn-regular flex-center flex-nowrap flex w-100">
-				<!-- <img v-if="order.status === 'Created'" 			class="mn-r-small" src="@/assets/icons/status/created.svg"/>
-				<img v-if="order.status === 'Confirmed'"	class="mn-r-small" src="@/assets/icons/status/confirmed.svg"/>
-				<img v-if="order.status === 'Awaiting shipment'" 			class="mn-r-small" src="@/assets/icons/status/paid.svg"/>
-				<img v-if="order.status === 'In delivery'" 		class="mn-r-small" src="@/assets/icons/status/finished.svg"/>
-				<img v-if="order.status === 'Finished'" 		class="mn-r-small" src="@/assets/icons/status/finished.svg"/> -->
+				<!-- <img loading="lazy" v-if="order.status === 'Created'" 			class="mn-r-small" src="@/assets/icons/status/created.svg"/>
+				<img loading="lazy" v-if="order.status === 'Confirmed'"	class="mn-r-small" src="@/assets/icons/status/confirmed.svg"/>
+				<img loading="lazy" v-if="order.status === 'Awaiting shipment'" 			class="mn-r-small" src="@/assets/icons/status/paid.svg"/>
+				<img loading="lazy" v-if="order.status === 'In delivery'" 		class="mn-r-small" src="@/assets/icons/status/finished.svg"/>
+				<img loading="lazy" v-if="order.status === 'Finished'" 		class="mn-r-small" src="@/assets/icons/status/finished.svg"/> -->
 	    <span class="w-100 t-medium p-big">{{order.status}}</span>
 	  </p>
 	  
@@ -13,8 +13,8 @@
 	  	<div class="mn-r-bold pd-r-big br-right-dark w-66">
 	  		<ul class="mn-semi">
 	        <!-- <li v-for="(product, index) in orderProducts(order.items.slice(0,2))" :key="product.id" class="shop-cart-item">
-	        	<img v-if="product.images" :src="require( `@/assets/images/products/${product.images[0]}`)">
-	          <img v-if="!(product.images)" :src="require( `@/assets/icons/photo.svg`)">
+	        	<img loading="lazy" v-if="product.images" :src="require( `@/assets/images/products/${product.images[0]}`)">
+	          <img loading="lazy" v-if="!(product.images)" :src="require( `@/assets/icons/photo.svg`)">
 	          
 	          <div class="text-left">
 	            <p class="name">{{ product.name }}</p>

package/src/modules/orders/components/blocks/CardOrderItem.vue

@@ -8,7 +8,7 @@
         style="flex: 1 0 auto"
       >
         <!-- Item Image -->
-        <img 
+        <img loading="lazy" 
           class="w-100 object-fit-cover pos-absolute h-100" 
           v-if="product.images[0]"    
           :src="(FILE_SERVER_URL || '') + product.images[0]"

package/src/modules/orders/components/blocks/CardOrderVar1.vue

@@ -53,7 +53,7 @@
               <span class="flex-child flex-child-shrink-0">
                 Positions {{order.positions.length}} <a class="t-main mn-r-auto">Check Leftover</a>
               </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"> -->
             
 
               <transition name="fade">

package/src/modules/orders/components/pages/OrderBackoffice.vue

@@ -43,7 +43,9 @@
       class="bg-white w-min-30r w-max-30r radius-big pd-big"
     >
 
-			<VueDatePicker v-model="order.deadline" :hide-navigation="['calendar']" :flow="['time']" class="z-index-3 bg-light radius-small pd-small mn-b-thin mn-b-semi" />
+			<!-- <VueDatePicker v-model="order.deadline" :hide-navigation="['calendar']" :flow="['time']" class="z-index-3 bg-light radius-small pd-small mn-b-thin mn-b-semi" /> -->
+
+			{{order.deadline}}
 
 			<p class="t-medium p-medium mn-b-thin">
 		    Positions
@@ -195,9 +197,6 @@
 	import { computed, ref, onMounted  } from 'vue'
 	import { useRouter, useRoute } from 'vue-router'
 
-	import VueDatePicker from '@vuepic/vue-datepicker';
-	import '@vuepic/vue-datepicker/dist/main.css'
-
 	import SectionPageTitle from '@pf/src/modules/globals/views/components/sections/SectionPageTitle.vue'
 
 	import Popup from "@pf/src/components/Popup/Popup.vue";

package/src/modules/orders/components/pages/Orders.vue

@@ -172,9 +172,6 @@
   import { computed, onMounted, reactive, ref } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
 
-  import VueDatePicker from '@vuepic/vue-datepicker';
-  import '@vuepic/vue-datepicker/dist/main.css'
-
   import Tab      from '@pf/src/components/Tab/Tab.vue'
   import Block from '@pf/src/components/Block/Block.vue';
 

package/src/modules/orders/components/pages/Orders_refact.vue

@@ -20,17 +20,17 @@
 				
 				<section  v-for="order in user.orders" class="pd-big mn-b-regular order-customer-card col"> 
 		      <p class="mn-b-regular flex-center flex-nowrap flex w-100">
-						<img v-if="order.status === 'Создан'" 			class="mn-r-small" src="@/assets/icons/status/created.svg"/>
-						<img v-if="order.status === 'Подтвержден'"	class="mn-r-small" src="@/assets/icons/status/confirmed.svg"/>
-						<img v-if="order.status === 'Ожидает отправки'" 			class="mn-r-small" src="@/assets/icons/status/paid.svg"/>
-						<img v-if="order.status === 'Отправлен'" 		class="mn-r-small" src="@/assets/icons/status/finished.svg"/>
-						<img v-if="order.status === 'Выполнен'" 		class="mn-r-small" src="@/assets/icons/status/finished.svg"/>
+						<img loading="lazy" v-if="order.status === 'Создан'" 			class="mn-r-small" src="@/assets/icons/status/created.svg"/>
+						<img loading="lazy" v-if="order.status === 'Подтвержден'"	class="mn-r-small" src="@/assets/icons/status/confirmed.svg"/>
+						<img loading="lazy" v-if="order.status === 'Ожидает отправки'" 			class="mn-r-small" src="@/assets/icons/status/paid.svg"/>
+						<img loading="lazy" v-if="order.status === 'Отправлен'" 		class="mn-r-small" src="@/assets/icons/status/finished.svg"/>
+						<img loading="lazy" v-if="order.status === 'Выполнен'" 		class="mn-r-small" src="@/assets/icons/status/finished.svg"/>
 		        <span class="w-100 t-medium p-big">{{order.status}}</span>
 		      </p>
 		      <ul class="mn-b-semi order-images-wrapper">
 		        <li v-for="(product, index) in orderProducts(order.positions.slice(0,2))" :key="product._id" class="mn-r-small">
-    	        <img v-if="product.images" :src="`@/assets/images/products/${product.images.links[0]}`">
-			        <img v-if="!product.images" :src="require( `@/assets/icons/photo.svg`)">
+    	        <img loading="lazy" v-if="product.images" :src="`@/assets/images/products/${product.images.links[0]}`">
+			        <img loading="lazy" v-if="!product.images" :src="require( `@/assets/icons/photo.svg`)">
 		    		</li>
 		    		<li v-if="order.positions.length >= 3" class="mn-r-small order-last-image">
 		    			+{{order.positions.length - 2 }}

package/src/modules/orders/components/sections/AskToLogin.vue

@@ -11,7 +11,7 @@
       flex
     "
   >
-    <!-- <img 
+    <!-- <img loading="lazy" 
       @click="isOpen = false" 
       class="
         i-base 

package/src/modules/organizations/components/blocks/CardOrganization.vue

@@ -5,7 +5,7 @@
   >
     <div class="flex pos-relative">
 
-      <img 
+      <img loading="lazy" 
         v-if="organization.profile.photo && organization.profile.photo.length > 0"
         :src="(FILE_SERVER_URL || '') + organization.profile.photo" 
         class="h-4r w-4r radius-extra bg-white" 
@@ -22,7 +22,7 @@
         <p class="h4 t-truncate">{{organization.profile.name}}</p>
         <!-- RATING -->
         <!-- <div v-if="showRating && organization.rating" class="w-max star-container flex-v-center flex">
-          <img
+          <img loading="lazy" 
             v-for="i in 5"
             class="i-small mn-r-thin"
             :src="i <= organization.rating.median ? '/icons/star.svg' : '/icons/star-stroke.svg'"

package/src/modules/organizations/components/blocks/Contacts.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="mn-b-small w-100">
     <a v-if="formattedWebsite" :href="formattedWebsite" target="_blank" class="w-100 br-2px br-solid br-grey-transp-25 radius-small pd-small flex-v-center flex-nowrap flex">
-      <!-- <img class="i-medium mn-r-small" src="@/assets/icons/website.svg"> -->
+      <!-- <img loading="lazy" class="i-medium mn-r-small" src="@/assets/icons/website.svg"> -->
       <span class="t-semi uppercase">Website</span>
     </a>
     <a v-if="props.phone" :href="`tel:${props.phone}`" class="w-100 br-2px br-solid br-grey-transp-25 radius-small pd-small flex-v-center flex-nowrap flex">
-      <!-- <img class="i-medium mn-r-small" src="@/assets/icons/phone.svg"> -->
+      <!-- <img loading="lazy" class="i-medium mn-r-small" src="@/assets/icons/phone.svg"> -->
       <span class="t-semi uppercase">Phone</span>
     </a>
     <a v-if="props.email" :href="`mailto:${props.email}`" target="_blank" class="w-100 br-2px br-solid br-grey-transp-25 radius-small pd-small flex-v-center flex-nowrap flex">
-      <!-- <img class="i-medium mn-r-small" src="@/assets/icons/email.svg"> -->
+      <!-- <img loading="lazy" class="i-medium mn-r-small" src="@/assets/icons/email.svg"> -->
       <span class="t-semi uppercase">Email</span>
     </a>
     <a v-if="encodedAddress" :href="`https://www.google.com/maps/search/?api=1&query=${encodedAddress}`" target="_blank" class="w-100 br-2px br-solid br-grey-transp-25 radius-small pd-small flex-v-center flex-nowrap flex">
-      <!-- <img class="i-medium mn-r-small" src="@/assets/icons/address.svg"> -->
+      <!-- <img loading="lazy" class="i-medium mn-r-small" src="@/assets/icons/address.svg"> -->
       <span class="t-semi uppercase">Address</span>
     </a>
   </div>

package/src/modules/organizations/components/blocks/DepartmentSub.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pd-small flex-nowrap flex">
-    <!-- <img :src="(FILE_SERVER_URL || '') + avatar" :alt="`${name} avatar`" class="user-card__avatar" /> -->
+    <!-- <img loading="lazy" :src="(FILE_SERVER_URL || '') + avatar" :alt="`${name} avatar`" class="user-card__avatar" /> -->
     <div class="user-card__info">
       <p class="user-card__name">{{ department.name ? department.name : 'Безымянный' }}</p>
       <p class="user-card__position">{{ department.members ? department.members.length : '0' }} человек</p>

package/src/modules/organizations/components/pages/Organization.vue

@@ -4,11 +4,11 @@
 		<!-- <Breadcrumbs class="mn-b-thin pd-medium bg-light radius-big"/> -->
 		<!-- <pre>{{organization.state.current}}</pre> -->
 
-		<!-- <DetailsTab 	
+		<DetailsTab 	
 			:organization="organization.state.current" 
 			:user="auth.state.user"
 			class="mn-b-semi"
-		/> -->
+		/>
 
 		<Tab 
 			v-model:selected="tabOrganization"
@@ -181,7 +181,7 @@
 	import MenuItem from '@pf/src/components/Menu/MenuItem.vue'
 	// Organizations
 	import DepartmentSub from '@pf/src/modules/organizations/components/blocks/DepartmentSub.vue';
-	// import DetailsTab from '@pf/src/modules/organizations/components/sections/DetailsTab.vue';
+	import DetailsTab from '@pf/src/modules/organizations/components/sections/DetailsTab.vue';
 	import User from '@pf/src/modules/users/components/blocks/CardUser.vue';
 	// Feeds
 	import FeedEvents from '@pf/src/modules/events/components/sections/Feed.vue'; 

package/src/modules/organizations/components/sections/DetailsTab.vue

@@ -50,7 +50,7 @@
 				class="pos-absolute cursor-pointer pos-t-big pos-r-big i-regular t-transp"
 			/>
 
-			<img 
+			<img loading="lazy" 
 				v-if="organization.profile.photo" 
 				:src="(FILE_SERVER_URL || '') + organization.profile.photo" 
 				class="radius-big bg-light flex-center flex mn-b-small w-8r" 

package/src/modules/products/components/blocks/CardLeftover.vue

@@ -46,7 +46,7 @@
         <span  class="flex-child flex-child-shrink-0" v-if="leftover.order">For order {{leftover.order}}</span>
         <span v-if="leftover.comment" class="mn-r-thin mn-l-thin t-transp">|</span>
         <p v-if="leftover.comment" class="t-truncate">Comment: {{leftover.comment}}</p>
-        <!-- <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/products/components/blocks/CardProduct.vue

@@ -48,7 +48,7 @@
 		>
 
 			<!-- Image Wrappers  -->
-			<img 
+			<img loading="lazy" 
 				v-if="product.images[0]" 
 				:src="(FILE_SERVER_URL || '') + product.images[0].split('/').slice(0, -1).join('/') + '/thumbnail_' + product.images[0].split('/').pop()"
 				class="pos-absolute object-fit-cover h-max-100 w-100"

package/src/modules/products/components/blocks/EditFilters.vue

@@ -2,7 +2,7 @@
 	<div class="mn-b-big">
 		<div class="mn-b-small flex-nojustify flex-center flex">
 			  <h5 class="mn-r-thin"></h5>
-			  <a @click="addArrayObject('categories', 'current.filters')" class="i-small pd-thin button-delete button"><img src="@/assets/icons/plus-white.svg"></a>
+			  <a @click="addArrayObject('categories', 'current.filters')" class="i-small pd-thin button-delete button"><img loading="lazy" src="@/assets/icons/plus-white.svg"></a>
 			</div>
 		<p v-if="category.filters.length == 0" class="mn-b-big">У продукта еще не заданы фильтры.</p> 
 		<!-- Categories	 -->

package/src/modules/products/components/blocks/Images360.vue

@@ -10,7 +10,7 @@
 
     <transition name="scale5" :css="!firstImageLoad" appear>
       <div v-if="currentImage" class="h-100 w-100 transition-ease">
-        <img v-if="currentImage" :key="currentImage" class="h-100 w-100 transition-ease" :src="(FILE_SERVER_URL || '') + currentImage.src" alt="360 product view" @mousedown="startRotation" @mousemove="rotate" @mouseup="stopRotation" @mouseleave="stopRotation" @touchstart="startRotation" @touchmove="rotate" @touchend="stopRotation" @dragstart.prevent>
+        <img loading="lazy" v-if="currentImage" :key="currentImage" class="h-100 w-100 transition-ease" :src="(FILE_SERVER_URL || '') + currentImage.src" alt="360 product view" @mousedown="startRotation" @mousemove="rotate" @mouseup="stopRotation" @mouseleave="stopRotation" @touchstart="startRotation" @touchmove="rotate" @touchend="stopRotation" @dragstart.prevent>
 
       </div>
     </transition>

package/src/modules/products/components/blocks/ImagesThumbnails.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="o-scroll product-images">
     <div class="no-responsive flex flex-nowrap gap-thin">
-      <img
+      <img loading="lazy" 
         v-for="(image, index) in images"
         :key="index"
         :src="(FILE_SERVER_URL || '') + image" 

package/src/modules/products/components/sections/HeroRecommendation.vue

@@ -125,7 +125,7 @@
 						hover-easeInOut-1 
 					"
 				>
-					<img 
+					<img loading="lazy" 
 						:src="(FILE_SERVER_URL || '') + '/icons/moods/' + preset + '.svg'" 
 						class="w-100"
 					/>

package/src/modules/products/components/sections/MenuSection.vue

@@ -35,7 +35,7 @@
 								{{category.name}}
 							</h3>
 
-							<img 
+							<img loading="lazy" 
 								v-if="category.url !== 'buds'"
 								:src="'/icons/categories/' + category.url + '.svg'"
 								class="i-extra t-transp mn-l-auto"