@ozdao/prometheus-framework 0.2.311 → 0.2.313

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

@@ -1,37 +1,31 @@
 <template>
-	<div id="popularProducts" class="bg-light radius-big pd-t-big pd-b-big">
-
-		<h2 class="mn-b-semi t-center " v-html="t('title')"/>
-		
-		<div class="embla" ref="emblaNode">
-		 	<div class="embla__container">
-		   
-		    <div class="embla__slide pd-nano" v-for="(value, key, index) in productsState" :key="key">
-		    	<transition name="fade" mode="out-in" appear>
-						<div 
-							v-if="!value.name" 
-							class="h-100 w-100 radius-big flex-center bg-light"
-						>
-							<Loader class="pos-relative"/>
-						</div>
-						
-						<CardProduct 
-							v-else 
-							@click="$router.push({
-			          name: 'Organization_Product', 
-			          params: { 
-			            _id: value.organization, 
-			            product: value._id 
-			          } 
-			        })" 
-							:product="value"
-							class="cursor-pointer transition-ease-in hover-scale-0 h-100 w-100" 
-						/>
-					</transition>
-		    </div>
-
-    	</div>
-		</div>
+	<div class="embla" ref="emblaNode">
+	 	<div class="embla__container">
+	   
+	    <div class="embla__slide pd-nano" v-for="(value, key, index) in productsState" :key="key">
+	    	<transition name="fade" mode="out-in" appear>
+					<div 
+						v-if="!value.name" 
+						class="h-100 w-100 radius-big flex-center bg-light"
+					>
+						<Loader class="pos-relative"/>
+					</div>
+					
+					<CardProduct 
+						v-else 
+						@click="$router.push({
+		          name: 'Organization_Product', 
+		          params: { 
+		            _id: value.organization, 
+		            product: value._id 
+		          } 
+		        })" 
+						:product="value"
+						class="cursor-pointer bg-light transition-ease-in hover-scale-0 h-100 w-100" 
+					/>
+				</transition>
+	    </div>
+  	</div>
 	</div>
 </template>
 
@@ -40,7 +34,6 @@
 	import { ref, computed, onMounted } from 'vue'
 
 	import { useRouter } 	from 'vue-router'
-	import { useI18n } 		from 'vue-i18n'
 		
 	import emblaCarouselVue from 'embla-carousel-vue'; // Assuming a Vue version exists
 	import Autoplay from 'embla-carousel-autoplay'
@@ -52,21 +45,6 @@
 	
 	const router = useRouter()
 
- 	const text = {
-    messages: {
-      en: {
-      	title: '<b>Best Sellers 🔥</b>',
-      	subtitle: 'We attach great importance to high quality and customer satisfaction'
-      },
-      ru: {
-      	title: 'Самое Горячее 🔥',
-      	subtitle: 'Мы придаем большое значение высокому качеству товаров и удовлетворенности клиентов'
-      }
-    }
-  }
-
-	const { t } = useI18n(text)
-
 	const productsState = ref(10)
 	const selectedIndex = ref(0);
 	const scrollSnaps = ref([]);
@@ -116,7 +94,7 @@
 
   @media screen and (max-width: 1025px) {
     .embla__slide {
-	    flex: 0 0 50%;
+	    flex: 0 0 75%;
 	    min-width: 0;
 	  }
   }

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

@@ -1,5 +1,5 @@
 <template>
-	<div class="cols-2-1_2 w-100 gap-thin">
+	<div class="cols-2-1_2 pd-small w-100 gap-thin">
 		
 		<div class="pd-small bg-light radius-big flex-nowrap flex-column flex pos-relative">
 			<div class="w-100 bg-light radius-semi o-hidden">
@@ -33,7 +33,7 @@
 			/>
 		</div>
 
-		<div class="pd-big bg-light radius-big pos-relative w-100 h-100 flex-column flex-justify flex col">
+		<div class="radius-big pos-relative w-100 h-100 flex-column flex-justify flex col">
 
 		<!-- <IconEdit
 			@click="$router.push({
@@ -48,9 +48,9 @@
 
 			<h2 v-if="recommendation" class="t-main t-semi p-big">{{t('airecommend')}}</h2>
 			<!-- Name -->
-			<h1 class="w-100 h1-product mn-b-thin">{{ product.name }}</h1>
+			<h1 class="w-100 h1-product mn-b-small">{{ product.name }}</h1>
 			<!-- Price -->
-			<Price :product="product" size="big" class="mn-b-semi" />
+			<Price v-if="product.listing !== 'rent'" :product="product" size="big" class="mn-b-semi" />
 			<!-- Modifications -->
 			<!-- <div v-if="product.modifications.length > 0" class="flex-nojustify  flex">
 				<SelectElement v-if="sizes2.length > 0" :elements="sizes2" :selected="product.selectedSize" class="mn-r-medium" />
@@ -60,30 +60,47 @@
 				{{ recommendation }}
 			</h3>
 
+			<Tab 
+				v-model:selected="tabProduct"
+				:tabs="[
+					{name: 'Description', value: 'description'},
+					{name: 'Specifications', value: 'specifications'}
+				]"
+				tabClass="pd-small pd-r-medium pd-l-medium w-100 pd-small radius-small"
+				class="bg-light mn-b-small"
+			/>
 
-			<p v-if="product.description && !product.localization < 1 && !recommendation" class="w-100 mn-b-medium t-transp">
-				{{ product.description }}
-			</p>
-
-			<p v-if="product.localization && product.localization.length > 1 && !recommendation" class="w-100  mn-b-medium t-transp">
-				{{ t('description') }}
-			</p>
-
-			<div 
-				class="cols-2 w-100 gap-small mn-b-semi"
-			>
-				<div 
-					v-if="product.information.length > 0" 
-					v-for="information in product.information" 
-					class="w-100 pd-small radius-small bg-grey-transp-10 product-information"
-				>
-					<p class="t-demi">{{ information.name }}</p>
-					<p>{{ information.value }}</p>
-				</div>
+			<div class="h-min-5r pos-relative">
+				<transition name="slide-fade">
+
+					<div v-if="tabProduct === 'description'"  class="pd-medium radius-medium bg-light ">
+						<p v-if="product.description && !product.localization < 1 && !recommendation" class="w-100 t-transp">
+							{{ product.description }}
+						</p>
+
+						<p v-if="product.localization && product.localization.length > 1 && !recommendation" class="w-100 t-transp">
+							{{ t('description') }}
+						</p>
+					</div>
+
+					<div 
+						v-else
+						class="cols-2 w-100 bg-light radius-medium pd-medium gap-small"
+					>
+						<div 
+							v-if="product.information.length > 0" 
+							v-for="information in product.information" 
+							class="w-100 pd-small radius-small bg-white product-information"
+						>
+							<p class="t-demi">{{ information.name }}</p>
+							<p>{{ information.value }}</p>
+						</div>
+					</div>
+				</transition>
 			</div>
 
 			<!-- Actions -->
-			<div class="max-w-33rem mobile-w-100 t-white gap-small cols-2">
+			<div v-if="product.listing !== 'rent'" class="max-w-33rem mobile-w-100 t-white gap-small cols-2">
 				<Button
 					v-if="product.quantity > 0"
 					:submit="a => addToCart(product)" 
@@ -105,7 +122,8 @@
 </template>
 
 <script setup>
-import Button 				from '@pf/src/components/Button/Button.vue'
+import Button from '@pf/src/components/Button/Button.vue'
+import Tab from '@pf/src/components/Tab/Tab.vue'
 import IconEdit from '@pf/src/modules/icons/navigation/IconEdit.vue'
 import PlaceholderImage from '@pf/src/modules/icons/placeholders/PlaceholderImage.vue'
 
@@ -116,7 +134,7 @@ import THC from '@pf/src/modules/products/components/elements/THC.vue'
 import Price from '@pf/src/modules/products/components/elements/Price.vue'
 // import SelectElement 	from '@/components/elements/SelectElement.vue'
 
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n }    from 'vue-i18n'
 
 import * as shopcart from '@pf/src/modules/orders/store/shopcart';
@@ -140,6 +158,10 @@ const images = computed(() => {
   return props.product.images
 })
 
+
+const tabProduct = ref('description')
+
+
 const text = {
 	messages: {
 	  en: {

package/src/modules/products/controllers/products.controller.js

@@ -48,6 +48,7 @@ const controllerFactory = (db) => {
     }
 
     const categories = req.query.categories?.split(',') || [];
+    
     if (categories.length) {
       query.category = { $in: categories.map(cat => new ObjectId(cat)) };
     }

package/src/modules/products/store/marketplace.js

@@ -14,7 +14,7 @@ const state = reactive({
     result:[]
   },
   filter: {
-    active: false,
+    active: true,
     class: 'mobile-only',
     selected: {},
     options: [{

package/src/styles/typography.scss

@@ -12,11 +12,11 @@ body {
 }
 
 // Font Styles
-h1,.h1  { font-family: var(--font-main); font-weight: 500; font-size: 3.750rem; 	line-height: 1.000; letter-spacing: -0.05rem; 	text-transform: none; }
-h2,.h2  { font-family: var(--font-main); font-weight: 500; font-size: 2.000rem; 	line-height: 1.000; letter-spacing: -0.05rem;	text-transform: none; }
-h3,.h3  { font-family: var(--font-main); font-weight: 500; font-size: 1.750rem; 	line-height: 1.000; letter-spacing: -0.05rem;	text-transform: none; }
-h4,.h4  { font-family: var(--font-main); font-weight: 500; font-size: 1.500rem; 	line-height: 1.250; letter-spacing: +0.0rem; 	text-transform: none; }
-h5,.h5 	{ font-family: var(--font-main); font-weight: 500; font-size: 0.750rem; 	line-height: 1.250;	letter-spacing: -0.0rem; 	text-transform: none; }
+h1,.h1  { font-family: var(--font-main); font-weight: 500; font-size: 2.500rem; 	line-height: 1.000; letter-spacing: -0.05rem; 	text-transform: none; }
+h2,.h2  { font-family: var(--font-main); font-weight: 500; font-size: 1.750rem; 	line-height: 1.000; letter-spacing: -0.05rem;	text-transform: none; }
+h3,.h3  { font-family: var(--font-main); font-weight: 500; font-size: 1.500rem; 	line-height: 1.000; letter-spacing: -0.05rem;	text-transform: none; }
+h4,.h4  { font-family: var(--font-main); font-weight: 500; font-size: 1.375rem; 	line-height: 1.250; letter-spacing: +0.0rem; 	text-transform: none; }
+h5,.h5 	{ font-family: var(--font-main); font-weight: 500; font-size: 1.250rem; 	line-height: 1.250;	letter-spacing: -0.0rem; 	text-transform: none; }
 
 // Typogragy Styles
 		.p-small     	{ font-family: var(--font-second); font-weight: 400;				font-size: 0.75rem;		line-height: 1.250; }