@ozdao/prometheus-framework 0.2.30 → 0.2.32

package/src/components/Button/Button.vue

@@ -6,6 +6,9 @@
 			type: Function,
 			default: async () => { console.log('Button click.') }
 		},
+		counter: {
+	    type: Object
+	  },
 		callback: {
 			type: Function,
 			default: async () => { console.log('Button callback.') }
@@ -18,6 +21,10 @@
 			type: Boolean,
 			default: true
 		},
+		showLoader: {
+			type: Boolean,
+			default: true
+		},
 		validation: {
 			type: Boolean,
 			default: false
@@ -29,6 +36,7 @@
 	const loading = ref(false);
 	const finished = ref(false);
 
+
 	async function Submit() {
 	    button.value.style['pointer-events'] = 'none';
 	    error.value = null;
@@ -79,16 +87,16 @@
 </script>
 
 <template>
-	<button @click.stop="Submit" :disabled="validation" ref="button" class="w-100 bg-main button">
+	<button @click.stop="Submit" :disabled="validation" ref="button" class="button">
 		<!-- Slot -->
 		<transition  name="TransitionTranslateY-small">
-			<span v-if="!loading && !error && !finished">
+			<span v-if="!loading && !error && !finished || !showLoader">
 				<slot></slot>
 			</span>
 		</transition>
 		<!-- Loading Circle Animation -->
 		<transition  name="TransitionTranslateY-small">
-			<span v-if="loading && !error" class="loading">
+			<span v-if="loading && !error && showLoader" class="loading">
 				<svg class="i-regular" width="135"	height="140" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="#fff">
 					<rect 			  y="10"	width="15" 	height="120" rx="6">	<animate attributeName="height"	begin="0.5s" 	dur="1s"	values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"	repeatCount="indefinite" /> <animate attributeName="y"	begin="0.5s" 	dur="1s"	values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"	repeatCount="indefinite"/> </rect> 
 					<rect x="30"	y="10" 	width="15" 	height="120" rx="6"> 	<animate attributeName="height"	begin="0.25s" dur="1s"	values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"	repeatCount="indefinite" /> <animate attributeName="y"	begin="0.25s" dur="1s"	values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"	repeatCount="indefinite"/> </rect>
@@ -106,13 +114,20 @@
 		<transition name="TransitionTranslateY-small">
 			<span v-if="error" class="error">{{ error }}</span>
 		</transition>
-		
+		<!-- Counter -->
+		<p v-if="counter" class="button-counter">{{counter}}</p> 
+
 	</button> 
 </template>
 
 
 <style lang="scss">
-	button[disabled] {background: grey; &:hover {background: grey; } }
+	button[disabled] {
+		background: grey; 
+		&:hover {
+			background: grey; 
+		} 
+	}
 
 	.button {
 		display: flex;
@@ -121,7 +136,6 @@
 		padding: 1rem 1.75rem;
 		border-radius: 3rem;
 
-
 		transform: scale(1);
 		opacity: 1;
 
@@ -138,13 +152,8 @@
 		transition: all 0.33s ease;
 	 
 		&:hover {
-			// background: rgb(var(--second));;
-
-			opacity: 1;
-
-			// color: rgba(var(--white), 1);;
-			
 			cursor: pointer;
+			opacity: 0.9;
 		}
 
 		&:active {
@@ -157,222 +166,18 @@
 			height: fit-content;
 		}
 
-		&-square {
-			height: 2.5rem;
-			width: 2.5rem;
-
-			padding: 1rem;
-			border-radius: 0.5rem;
-			font-size: 1.125rem;
-		}
-
-		&-close-popup {
+		.button-counter {
 			position: absolute;
-
-			right: 0;
-			top: 0;
-
-			width: 3rem;
-			height: 3rem;
-
-			background: transparent;
-
-			padding: 0;
-
-			border-radius: 0;
-
-			img {
-				width: 33%;
-			}
-		}
-
-		&-delete {
-			&:hover {
-				background: red;
-			}
-		}
-
-		&-grey {
-			color: rgba(var(--dark), 1);;
-			background-color: #F7F7F7;
-		}
-
-		&-sort {
-			height: 2.5rem;
-
-			padding: 0.5rem 1.25rem;
-
-			text-transform: none;
-			font-size: 1rem;
-			color: rgba(var(--dark), 1);;
-			background-color: #F7F7F7;
-		}
-
-		&-active {
-			background: #00ff88;
-			color: white;
-			&:hover {
-				background: #00ff88;
-				color: rgba(255,255,255,0.75);
-
-			}
-		}
-
-		
-
-		
-		&-filter {
-			height: 2.5rem;
-
-			padding: 0;
-			border-radius: 0.5rem;
-			font-size: 1.125rem;
-
-			color: rgba(var(--dark), 1);;
-			background: white;
-		}
-
-		&-disabled {
-			color: rgba(0,0,0,0.5);
-
-			&:hover {
-				color: rgba(0,0,0,0.5);
-			}
-			&:active {
-				pointer-events: none;
-				transform: scale(1,1);
-			}
-		}
-		&-active {
-			background: #00ff88;
-			color: white;
-			&:hover {
-				background: #00ff88;
-				color: rgba(255,255,255,0.75);
-
-			}
-		}
-		&-reset-filter {
-			width: 100%;
-			text-transform: uppecase;
-			height: 3.75rem;
-
-			background: transparent;
-			color: #00ff88;
-
-			border-top: 1px solid rgba(0,0,0,0.1);
-			border-bottom: 1px solid rgba(0,0,0,0.1);
-			&:hover {
-				background: #00ff88;
-				color: rgba(255,255,255,0.75);
-
-			}
-		}
-		
-		&-icon {
-			height: 1rem; width: 1rem; background: transparent; img { width: 100%; height: 100%}
-			background: transparent;
-			box-shadow: none;
-			border-radius: 0;
-			padding: 0;
-
-			&:hover {
-				cursor: pointer;
-			}
-		}	
-		
-		
-		&-link      {
-			color: rgba(0, 0, 0, 0.5);
-			font-size: 1.125rem;
-			display: flex;
-			align-items: center;
-			font-weight: 600;
-
-			&-blue {color: #2495FF;}
-			
-			&-black{color: rgba(0, 0, 0, 0.5);}
-			
-			&-cream {color: #DBADAA; text-align: left; font-weight: 600; letter-spacing: 0;}
-			
-		}
-
-		&-otr-link {
-			display: inline-flex;
-			margin-top: 0.25rem;
-			align-items: center;
-			color: #000;
-
-			img { margin-right: 0.5rem;}
-		}
-		
-		&-cart {
-			display: inline-flex;
-			color: #000;
-			height: 3rem;
-			width: 3rem;
-			font-weight: 700;
-			width: fit-content;
-			font-size: 1.5rem;
-			color: #00ff88;
-			background: #FAF7F3;
-			text-transform: none;
-			padding: 0.75rem 1rem;
-			border-radius: 4rem;
-
-			&:hover {
-				background: #00ff88;
-				color: white;
-				opacity: 1;
-
-				cursor: pointer;
-			}
-		}
-
-		&-cart-big {
-			display: inline-flex;
-			color: #000;
-			font-weight: 700;
-			width: fit-content;
-			background: #FFE500;
-			text-transform: none;
-			font-size: 2rme;
-			padding: 1.5rem 2rem;
-			border-radius: 2rem;
-		}
-
-		&-blog {
-			padding: 0.75rem 1rem;
-			background-color: #2495FF;
-			color: #fff;
-			border-radius: 0.375rem;
-			font-size: 1.125rem;
-			text-transform: uppercase;
-			width: fit-content;
-		}
-
-		&-nav-footer{
-			color: #000;
-			font-size: 0.875rem;
-			font-weight: 700; display: flex;
-			align-items: center;
-				svg {margin-right: 0.5rem;}}
-
-		&-inst {
-			background: radial-gradient(179.06% 43.44% at -16.75% 7.2%, #3771C8 0%, #3771C8 12.8%, rgba(102, 0, 255, 0) 100%),
-			radial-gradient(92.18% 99.11% at 26.56% 107.7%, #FFDD55 0%, #FFDD55 10%, #FF543E 50%, #C837AB 100%);
-			color: white;
-			font-size: 1.125rem;
-			font-weight: 700;
-			text-transform: uppercase;
-			padding: 0.75rem 0.75rem;
-			border-radius: 0.5625rem;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			width: fit-content;
-			box-shadow: 4px 4px 24px -12px rgba(201, 163, 163, 0.5);
-			img {margin-right: 0.5rem}
+			right: -8px;
+	    bottom: -8px;
+	    background: yellow;
+	    height: 16px;
+	    border-radius: 16px;
+	    width: 16px;
+	    font-weight: 500;
+	    text-align: center;
+	    line-height: 16px;
+	    font-size: 10px;
 		}
 	}
 </style>

package/src/components/Checkbox/Checkbox.vue

@@ -15,7 +15,7 @@
     > 
 
     <div 
-      class="transition-elastic pd-thin h-2r w-4r radius-extra"
+      class="transition-elastic cursor-pointer mn-l-thin pd-thin h-2r w-4r radius-extra"
       :class="{
         'bg-grey':!(Array.isArray(radio) ? radio.includes(value) : radio),
         'bg-main':Array.isArray(radio) ? radio.includes(value) : radio,

package/src/components/Chips/Chips.vue

@@ -1,18 +1,18 @@
 <template>
 	<div 
-      	class="flex-v-center gap-thin flex"
-     >
-		<div 
+    class="t-trimmed"
+   >
+		<span 
 			v-if="chips.length"
-		  	v-for="(chip,index) in chips" 
-		  	class="pd-thin radius-small t-semi bg-main" 
+		  v-for="(chip,index) in chips" 
+		 	class="mn-r-nano d-inline-block w-max pd-b-micro pd-t-micro pd-r-thin pd-l-thin radius-small t-semi bg-main" 
 		>
-			{{chip.text ? chip.text : chip}}
-		</div>
+			<span class="t-truncate">{{chip.text ? chip.text : chip}}</span>
+		</span>
 
 		<div 
 			v-else
-			class="pd-thin radius-small t-semi bg-white" 
+			class="pd-b-micro pd-t-micro pd-r-thin pd-l-thin radius-small t-semi bg-white" 
 		>
 			{{chips}}
 		</div>

package/src/components/DatePicker/DatePicker.vue

@@ -1,9 +1,8 @@
 <template>
   <div>
     <div 
-      class="w-100 o-scroll flex-nowrap flex" 
+      class="w-100 scroller o-scroll scroll-snap-type-x-mandatory scroll-pd-regular scroll-hide flex-nowrap flex" 
       ref="scrollContainer"
-      style="scroll-snap-type: x mandatory;"
     >
       <div
         v-for="date in dates"
@@ -13,7 +12,7 @@
           'selected': selectedDate.toDateString() === date.toDateString(),
 
         }"
-         class="cursor-pointer mn-r-small mn-l-small flex-column flex-center flex"
+         class="cursor-pointer scroll-snap-align-start mn-r-small mn-l-small flex-column flex-center flex"
       >
         <span 
           class="t-transp"
@@ -97,5 +96,5 @@ function generateDates(start, count) {
 }
 </script>
 
-<style>
+<style lang='scss'>
 </style>

package/src/components/EditImages/EditImages.vue

@@ -1,20 +1,37 @@
 <template>
-	<div>
- <!--    <p v-if="localImages.length < 1" class="mn-b-big">
-			The images doesn't have any images yet.
-		</p> -->
+	<div class="flex-nowrap flex gap-small">
+    <VueDraggableNext v-if="localImages.length > 0"  class="gap-small flex dragArea list-group w-full" v-model="localImages" @change="emitChanges">
+			<div v-for="(image, index) in localImages" class="pos-relative">
+				<img class="i-extra radius-small o-hidden" :src="(FILE_SERVER_URL || '') + image" />
+				
+        <IconCross  
+          @click="deleteImage(index)" 
+          class="cursor-pointer pos-absolute t-center flex-center flex radius-extra i-medium bg-red  pos-t-10-negative pos-r-10-negative pd-micro"
+        />
+			</div>
+		</VueDraggableNext>
+    <div
+      v-if="localImages.length > 0" 
+      class="i-extra uppercase flex-center flex radius-small o-hidden br-solid br-main br-2px pd-small"
+      >
+       <UploadImageMultiple   
+        @update:images="onImagesUpdate"
+        text="Add"
+        :options="{
+          showText: false
+        }"
+        :uploadPath="'photos'"
+        class="radius-big"
+      />
+    </div>
+
 
 		<UploadImageMultiple 	
+      v-if="localImages.length < 1" 
       @update:images="onImagesUpdate"
       :uploadPath="'photos'"
-      class="mn-b-semi pd-small w-100 button bg-black t-white"
+      class="w-100 radius-medium pd-extra bg-white"
     />
-    <VueDraggableNext class="gap-small flex dragArea list-group w-full" v-model="localImages" @change="emitChanges">
-			<div v-for="(image, index) in localImages" class="pos-relative">
-				<img class="i-extra radius-small o-hidden mn-b-thin" :src="(FILE_SERVER_URL || '') + image" />
-				<a @click="deleteImage(index)" class="pos-absolute t-center radius-extra i-medium bg-red  pos-t-0 pos-r-0">X</a>
-			</div>
-		</VueDraggableNext>
 	</div>	
 </template>
 
@@ -22,18 +39,19 @@
 import { ref, defineProps, watchEffect } from 'vue';
 import { VueDraggableNext } from 'vue-draggable-next'
 import UploadImageMultiple from "@pf/src/components/UploadImageMultiple/UploadImageMultiple.vue";
+import IconCross from '@pf/src/modules/icons/navigation/IconCross.vue';
 
 const props = defineProps({
   images: Array,
 });
 
-const emit = defineEmits(['update'])
+const emit = defineEmits(['update:images'])
 
 const localImages = ref([...props.images])
 
 watchEffect(() => {
-  localImages.value = [...props.images]
-})
+  localImages.value = [...props.images]; // Обновление localImages при изменении props.images
+});
 
 const emitChanges = () => {
   emit('update:images', localImages.value)

package/src/{modules/globals/components/sections → components/Feed}/Feed.vue

@@ -1,48 +1,42 @@
 <template>
-  <section class="feed">
-
-    <TransitionGroup tag="ul" name="scaleTransition" class="o-hidden bg-grey radius-big">
-      <SkeletonEvent
-        v-if="isLoading"
-        v-for="i in currentLimit" :key="i"
-      />
-    </TransitionGroup>
-
-    <transition name="scaleTransition">
-      <EmptyState
-        v-if="!isLoading && itemsList.length < 1"
-        :title="states.empty.title"
-        :description="states.empty.description"
-        class="pd-medium mn-b-thin bg-grey radius-big"
-      />
-    </transition>
-
-    <!-- <SortProducts
-
-    /> -->
-
-    <TransitionGroup tag="ul" name="scaleTransition" class="cols-1 gap-thin">
-    
-
-      <slot
-        v-if="!isLoading && itemsList.length > 0"
-        :items="itemsList"
-        :user="user"
-      ></slot>
-
-      <button
-        v-if="hasMoreItems && itemsList.length > 0"
-        @click="loadMoreItems"
-        class="w-100 bg-main button"
-      >
-        Load more
-      </button>
-    </TransitionGroup>
-  </section>
+  <TransitionGroup v-if="isLoading" tag="ul" name="scaleTransition" class="o-hidden bg-grey radius-big">
+    <SkeletonEvent
+      v-if="isLoading"
+      v-for="i in currentLimit" :key="i"
+    />
+  </TransitionGroup>
+  <transition name="scaleTransition">
+    <EmptyState
+      v-if="!isLoading && itemsList.length < 1"
+      :title="states.empty.title"
+      :description="states.empty.description"
+      class="pd-medium mn-b-thin bg-grey radius-big"
+    />
+  </transition>
+
+  <!-- <SortProducts
+
+  /> -->
+
+  <TransitionGroup tag="ul" name="scaleTransition" :class="$attrs.class">
+    <slot
+      v-if="!isLoading && itemsList.length > 0"
+      :items="itemsList"
+      :user="user"
+    ></slot>
+  </TransitionGroup>
+
+  <button
+    v-if="hasMoreItems && itemsList.length > 0"
+    @click="loadMoreItems"
+    class="w-100 bg-main button"
+  >
+    Load more
+  </button>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
 
 import SkeletonEvent from '@pf/src/modules/icons/skeletons/SkeletonEvent.vue'
 
@@ -79,12 +73,13 @@ const props = defineProps({
       user:  null,
       status: null,
       period:  null,
+      contain:  null,
     }),
   },
 });
   
 const itemsList = ref([]);
-const hasMoreItems = ref(true);
+const hasMoreItems = ref(false);
 
 let isLoading = ref(true);
 
@@ -109,14 +104,17 @@ const loadMoreItems = async () => {
 
     if (data.length === 0) {
       hasMoreItems.value = false;
+    } else if (data.length < currentLimit.value) {
+      hasMoreItems.value = false;
+    } else {
+      hasMoreItems.value = true;
     }
 
     itemsList.value = [...itemsList.value, ...data];
   }
 };
 
-onMounted(async () => {
-  console.log(props.options)
+const fetchItems = async () => {
   const data = await props.store.read({
     skip: currentSkip.value,
     limit: currentLimit.value,
@@ -125,12 +123,29 @@ onMounted(async () => {
 
   if (data.length === 0) {
     hasMoreItems.value = false;
+  } else if (data.length < currentLimit.value) {
+    hasMoreItems.value = false;
   } else {
     hasMoreItems.value = true;
   }
 
   itemsList.value = data;
-  
   isLoading.value = false;
+};
+
+watch(() => props.options, (newVal, oldVal) => {
+  if (
+    newVal.organization !== oldVal.organization ||
+    newVal.categories !== oldVal.categories ||
+    newVal.prices !== oldVal.prices ||
+    newVal.delivery !== oldVal.delivery
+  ) {
+    fetchItems();
+  }
+}, { deep: true });
+
+
+onMounted(async () => {
+  await fetchItems()
 });
 </script>

package/src/components/FieldBig/FieldBig.vue

@@ -3,13 +3,13 @@
     <Field
       v-model:field="inputField"
       @update:field="updateInput"
-      :placeholder="inputPlaceholder"
+      :placeholder="typing ? ' ' : inputPlaceholder"
       @input="handleInput"
       @focus="handleFocus"
       @blur="checkInput"
-      class="w-100 pd-small p-big"
+      class="w-100 t-semi uppercase pd-small p-big"
     />
-    <button v-if="action" @click="emitAction" class="w-min hover_bg-white hover-t-black t-black bg-main  button" v-html="action"/>
+    <button v-if="action" @click="emitAction" class="w-min hover-bg-black hover-t-white t-black bg-main  button" v-html="action"/>
   </div>
 </template>
 
@@ -30,8 +30,16 @@
     placeholderTexts: {
       type: Object,
       default: () => ({
-        en: ['First placeholder', 'Second placeholder', 'Third placeholder'],
-        ru: ['Первый плейсхолдер', 'Второй плейсхолдер', 'Третий плейсхолдер']
+        en: [
+          'Lowest THC, please!',
+          'Something with banana flavors?',
+          "I'm in the mood for trippy vibes."
+        ],
+        ru: [
+          'Я хочу самый низкий THC',
+          'Я хочу чего-нибудь бананового',
+          'Я хочу курнуть хейза'
+        ],
       })
     },
     typingSpeed: {
@@ -77,8 +85,11 @@
 
   function handleFocus() {
     typing.value = false
+
     clearInterval(typeInterval.value)
+
     inputPlaceholder.value = props.placeholder
+
     if (!userText.value) {
       inputField.value = ''
     }

package/src/components/FieldPhone/FieldPhone.vue

@@ -410,7 +410,7 @@
           metadata,
           ...phoneObject
         } = result;
-        console.log(result)
+        
         // console.log(result.isValid?result.isValid():'loll')
         let valid = result.isValid?.();
         let formatted = this.phone;
@@ -876,6 +876,7 @@
   margin-right:5px
 }
 .vti__input{
+  color: inherit;
   border:none;
   border-radius:0 2px 2px 0;
   width:100%;