@ozdao/prometheus-framework 0.2.112 → 0.2.113

package/src/components/Feed/Feed.vue

@@ -1,17 +1,61 @@
 <template>
 
-  <BlockSearch 
-    v-if="search"
-    :placeholder="search.placeholder || 'Search...'"
-    :class="search.class || 'bg-grey mn-b-thin'"
-    @search="updateSearch"
-  />
+  <div v-if="search" class="flex-nowrap flex gap-thin mn-b-thin">
+
+    <BlockSearch 
+      v-if="search"
+      :placeholder="search.placeholder || 'Search...'"
+      :class="search.class || 'bg-light'"
+      @search="updateSearch"
+    />
+
+    <div class="flex-center flex pd-thin bg-light radius-extra aspect-1x1 h-100">
+      <IconFilter class="w-1r h-auto"/>
+    </div>
+
+    <Dropdown 
+      :label="{
+        component: ButtonDate
+      }" 
+      :class="search.class || 'bg-light'"
+      class="flex-child flex-child-grow-1 flex-child-shrink-0 pd-r-small pd-l-small pd-thin bg-light radius-big"
+      :align="'right'"
+    >
+
+      <Calendar
+        v-model:date="date"
+        :locale="$i18n.locale"
+        :allowRange="true"
+        class="radius-semi w-100 o-hidden bg-light"
+      />
+    </Dropdown> 
+
+    <Dropdown 
+      v-if="sort"
+      :label="{
+        component: ButtonSort,
+        props: { order: sort.order },
+        class: 'w-1r'
+      }" 
+      :class="search.class || 'bg-light'"
+      class="radius-extra aspect-1x1 h-100"
+      :align="'right'"
+    >
+
+      <BlockSorting
+        v-model:param="sort.param"
+        v-model:order="sort.order"
+        :options="sort.options"
+        class="h-100 pd-small radius-semi t-white bg-black"
+      />
+    </Dropdown> 
+  </div>
 
   <TransitionGroup 
     v-if="isLoading" 
     tag="ul" 
     name="scaleTransition" 
-    class="o-hidden bg-grey radius-big"
+    class="o-hidden bg-light radius-big"
    :class="$attrs.class"
   >
     <SkeletonEvent
@@ -30,13 +74,13 @@
       :description="states.empty.description"
       :action="states.empty.action"
       :callback="states.empty.callback"
-      class="pd-medium mn-b-thin bg-grey radius-big"
+      class="pd-medium mn-b-thin bg-light radius-big"
     />
   </transition>
 
   <TransitionGroup 
     tag="ul" 
-    name="scaleTransition" 
+    name="feed"
     :class="$attrs.class"
   >
     <slot
@@ -65,10 +109,22 @@ import SkeletonEvent from '@pf/src/modules/icons/skeletons/SkeletonEvent.vue'
 
 import Loader from '@pf/src/components/Loader/Loader.vue';
 import EmptyState from '@pf/src/components/EmptyState/EmptyState.vue';
-import SortProducts from '@pf/src/modules/products/components/sections/SortProducts.vue'
+import Dropdown from "@pf/src/components/Dropdown/Dropdown.vue";
+import Calendar from '@pf/src/components/DatePicker/Calendar.vue'
 
 import BlockSearch from '@pf/src/modules/globals/components/blocks/BlockSearch.vue'
+import BlockSorting  from '@pf/src/modules/globals/components/blocks/BlockSorting.vue'
+
+import ButtonSort  from '@pf/src/modules/globals/components/elements/ButtonSort.vue'
+import ButtonDate  from '@pf/src/modules/globals/components/elements/ButtonDate.vue'
 
+import IconFilter from '@pf/src/modules/icons/navigation/IconFilter.vue'
+import IconEvents from '@pf/src/modules/icons/entities/IconEvents.vue'
+
+const search = defineModel('search')
+const sort = defineModel('sort')
+const date = defineModel('date')
+const items = defineModel('items')
 
 // Пропсы
 const props = defineProps({
@@ -116,16 +172,18 @@ const props = defineProps({
   },
 });
   
-const itemsList = ref([]);
+const itemsList = ref(items.value || []);
 const hasMoreItems = ref(false);
 
-
 let isLoading = ref(true);
 let sentinel = ref(null)
 
 let currentSkip = ref(props.options.skip ? props.options.skip : 0);
 let currentLimit = ref(props.options.limit ? props.options.limit : 10);
 
+let sortParam = ref(sort.value?.param || 'createdAt');
+let sortOrder = ref(sort.value?.order || 'asc');
+
 let currentSearch = ref('');
 
 function updateSearch(search) {
@@ -145,6 +203,8 @@ const loadMoreItems = async () => {
       skip: currentSkip.value,
       limit: currentLimit.value,
       search: currentSearch.value,
+      sortParam: sortParam.value,
+      sortOrder: sortOrder.value,
       ...props.options
     });
 
@@ -157,6 +217,8 @@ const loadMoreItems = async () => {
     }
 
     itemsList.value = [...itemsList.value, ...data];
+    
+    if (items.value) items.value = itemsList.value;
   }
 };
 
@@ -164,6 +226,8 @@ const fetchItems = async () => {
   const data = await props.store.read({
     skip: currentSkip.value,
     limit: currentLimit.value,
+    sortParam: sortParam.value,
+    sortOrder: sortOrder.value,
     search: currentSearch.value,
     ...props.options
   });
@@ -177,12 +241,10 @@ const fetchItems = async () => {
   }
 
   itemsList.value = data;
+  if (items.value) items.value = itemsList.value;
   isLoading.value = false;
 };
 
-watch(() => props.external, (newVal) => {
- 
-});
 
 watch(() => props.external, (newVal, oldVal) => {
   if (newVal !== oldVal) {
@@ -227,3 +289,24 @@ onUnmounted(() => {
   }
 });
 </script>
+
+
+<style>
+.feed-move, /* apply transition to moving elements */
+.feed-enter-active,
+.feed-leave-active {
+  transition: all 0.5s ease;
+}
+
+.feed-enter-from,
+.feed-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+.feed-leave-active {
+  position: absolute;
+}
+</style>

package/src/components/FieldTags/BlockTags.vue

@@ -14,7 +14,7 @@
       :add-from-paste="true"
       :allow-edit-tags="true"
       @tags-changed="handleTagsChanged"
-      class="mn-b-thin bg-grey radius-medium pd-small"
+      class="mn-b-thin bg-light radius-medium pd-small"
     />
 
     <p class="mn-b-medium">
@@ -24,7 +24,7 @@
         v-if="filteredSuggestedItems.length > 0" 
         v-for="(tag,index) in filteredSuggestedItems" 
         @click="addTag(tag)"
-        class="cursor-pointer ti-tag-toDefactor"
+        class="cursor-pointer t-medium ti-tag-toDefactor"
         :class="{'mn-r-micro':index !== filteredSuggestedItems.length - 1}"
       >
         {{ tag.text }}
@@ -86,7 +86,7 @@ function handleTagsChanged(newTags) {
     background-color: rgb(var(--main));
     color: rgb(var(--black));
     border-radius: 4rem;
-    padding: 3px 5px;
+    padding: 1px 8px 2px;
     margin: 2px;
     font-size: .85em;
   }

package/src/components/FieldTags/FieldTags.vue

@@ -22,7 +22,7 @@
             { 'ti-deletion-mark': isMarked(index) }
           ]"
           tabindex="0"
-          class="ti-tag"
+          class="ti-tag t-medium"
           @click="$emit('tag-clicked', { tag, index })"
         >
           <div class="ti-content">

package/src/components/FieldTags/vue-tags-input.scss

@@ -59,7 +59,7 @@ div.vue-tags-input.disabled {
   color: rgb(var(--black));
   border-radius: 4rem;
   display: flex;
-  padding: 3px 5px;
+  padding: 1px 8px 2px;
   margin: 2px;
   font-size: .85em;
 

package/src/components/LocationMarker/LocationMarker.vue

@@ -52,7 +52,7 @@ onMounted(() => {
     apiKey: props.apiKey,
     version: "weekly",
     libraries: ["places"],
-    // language: props.locale,    
+    language: props.locale,    
   });
 
   loader.load().then(() => {

package/src/components/LocationSelection/LocationSelection.vue

@@ -6,6 +6,7 @@
 		<p class="mn-b-small t-transp p-medium">{{t('description')}}</p> 
 		
 		<Address
+			:key="$i18n.locale"
       :apiKey="GOOGLE_MAPS_API_KEY" 
 
       :locale="$i18n.locale"
@@ -16,7 +17,7 @@
       placeholder="Enter your address"  
 
       class="
-        bg-white radius-tl-medium radius-tr-medium  t-black br-grey br-solid br-2px pd-medium
+        bg-white radius-tl-medium radius-tr-medium  t-black br-grey-transp-25 br-solid br-2px pd-medium
       "
 
       @update:country="newCountry => {
@@ -37,6 +38,7 @@
     />
 
     <LocationMarker 
+    	:key="$i18n.locale"
       :apiKey="GOOGLE_MAPS_API_KEY" 
       :locale="$i18n.locale"
 
@@ -44,7 +46,7 @@
       :address="position.address" 
       :location="position.location" 
 
-      class="bg-grey radius-bl-medium radius-br-medium h-15r o-hidden"
+      class="bg-light radius-bl-medium radius-br-medium h-15r o-hidden"
 
       @update:country="newCountry => {
         position.country = newCountry;
@@ -91,7 +93,6 @@ const position = ref({
   location: null,
 })
 
-
 function savePosition() {
 	store.globals.state.position = { ...position.value };
 	store.globals.state.isOpenLocationPopup = false
@@ -109,36 +110,10 @@ const text = {
     en: {
 	    title: "Choose Your Location",
 	    description: "Enter your address or select it on the map to see the nearest offers to you.",
-	    choose: "Select",
-	    countries: [
-	    	"Thailand\u00A0🇹🇭"
-	    ],
-	    comingsoon: "Coming soon:",
-	    cscountries: [
-	    	"Cyprus\u00A0🇨🇾",
-	    	"Spain\u00A0🇪🇸",
-	    	"Canada\u00A0🇨🇦",
-	    	"USA\u00A0🇺🇸",
-	    ],
-	    helpus: "Weeder is a community-driven project, and we're always looking to grow! If you can help us launch in your country or have any suggestions, please email us at:",
-	    cultivate: "Together, let's cultivate a worldwide cannabis community! 🌿🚀"
     },
     ru: {
 		  title: "Выбор Локации",
-	    description: "Пожалуйста, выберите вашу страну из списка ниже, чтобы увидеть варианты доставки и другую актуальную информацию:",
-	    countries: [
-	    	"Таиланд\u00A0🇹🇭"
-	    ],
-	    choose: "Выбрать",
-	    comingsoon: "Скоро будут доступны:",
-	    cscountries: [
-	    	"Кипр\u00A0🇨🇾",
-	    	"Испания\u00A0🇪🇸",
-	    	"Канада\u00A0🇨🇦",
-	    	"США\u00A0🇺🇸",
-	    ],
-	    helpus: "Weeder - это проект, основанный на сообществе, и мы всегда стремимся к росту! Если вы можете помочь нам запуститься в вашей стране или у вас есть предложения, пожалуйста, напишите нам на:",
-	    cultivate: "Давайте вместе взростим мировое сообщество любителей каннабиса! 🌿🚀"
+	    description: "Пожалуйста, выберите вашу страну из списка ниже, чтобы увидеть варианты доставки и другую актуальную информацию:"
 	  }
 	}
 }

package/src/components/Map/LoaderGMaps.js

@@ -0,0 +1,66 @@
+// google-maps-loader.js
+class GoogleMapsLoader {
+  constructor() {
+    this.loadPromise = null;
+    this.google = null;
+    this.currentOptions = null;
+    this.initCallbacks = new Set();
+  }
+
+  load(apiKey, options = {}) {
+    const defaultOptions = {
+      version: "weekly",
+      libraries: ["places"],
+      language: "en",
+    };
+
+    this.currentOptions = { ...defaultOptions, ...options };
+    const librariesParam = this.currentOptions.libraries.join(',');
+
+    if (!this.loadPromise) {
+      this.loadPromise = new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=${librariesParam}&v=${this.currentOptions.version}&language=${this.currentOptions.language}`;
+        script.onload = () => {
+          this.google = window.google.maps;
+          this.initCallbacks.forEach(callback => callback(this.google));
+          resolve(this.google);
+        };
+        script.onerror = reject;
+        document.head.appendChild(script);
+      });
+    }
+
+    return this.loadPromise.then(() => {
+      this._applyOptions(this.currentOptions);
+      return this.google;
+    });
+  }
+
+  _applyOptions(options) {
+    if (this.google && this.currentOptions.language !== options.language) {
+      this.google.setLanguage(options.language);
+      this.currentOptions.language = options.language;
+      this.reinitialize();
+    }
+  }
+
+  reinitialize() {
+    this.initCallbacks.forEach(callback => callback(this.google));
+  }
+
+  onInit(callback) {
+    this.initCallbacks.add(callback);
+    return () => {
+      this.initCallbacks.delete(callback);
+    };
+  }
+
+  updateOptions(newOptions) {
+    this.currentOptions = { ...this.currentOptions, ...newOptions };
+    this._applyOptions(this.currentOptions);
+  }
+}
+
+export const googleMapsLoader = new GoogleMapsLoader();

package/src/components/Map/Map.vue

@@ -23,7 +23,8 @@ onMounted(async () => {
   const loader = new GMLoader({
     apiKey: props.apiKey,
     version: "weekly",
-    libraries: ["places"]
+    libraries: ["places"],
+    language: props.locale,
   });
 
   loader.load().then(() => {

package/src/components/Marquee/Marquee.vue

@@ -53,7 +53,7 @@ const props = defineProps({
   loop: { type: Number, default: 0 },
   clone: { type: Boolean, default: false },
   gradient: { type: Boolean, default: false },
-  gradientColor: { type: Array, default: () => [255, 255, 255] },
+  gradientColor: { type: [Array,String], default: () => [255, 255, 255] },
   gradientLength: { type: String },
   pauseOnHover: { type: Boolean, default: false },
   pauseOnClick: { type: Boolean, default: false },

package/src/components/Radio/Radio.vue

@@ -1,8 +1,42 @@
 <template>
   <label class="flex-v-center flex-nowrap flex">
+    <!-- ////////////////////////// -->
+    <!-- Checkmark -->
+    <!-- ////////////////////////// -->
+    <div 
+      class="cursor-pointer mn-r-thin radius-extra pd-micro h-100 aspect-1x1 pos-relative"
+      :class="{
+        'bg-main': radio === value,
+      }"
+    >
+      <div 
+        class="radius-extra pd-micro w-100 h-100"
+        :class="{
+          'bg-white': radio === value,
+        }"
+      >
+
+      </div> 
+
+      <div 
+        v-if="radio !== value"
+        class="br-solid br-2px br-grey-transp-25 pos-absolute pos-t-0 pos-r-0 radius-extra w-100 h-100"
+      >
+
+      </div> 
+    </div> 
+    <!-- <div v-if="radio === value" class="">
+      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g id="24 / basic / check-mark">
+          <path id="icon" fill-rule="evenodd" clip-rule="evenodd" d="M7.28033 10.7197L14.25 3.75L15.3107 4.81066L7.28033 12.841L3 8.56066L4.06066 7.5L7.28033 10.7197Z" fill="#000000"/>
+        </g>
+      </svg>
+    </div> -->
+
     <!-- ////////////////////////// -->
     <!-- Label -->
     <!-- ////////////////////////// -->
+
     <div v-if="label" class="mn-r-auto t-transp mn-r-small">
       <span>{{label}}</span>
     </div>
@@ -17,18 +51,7 @@
       :name="name" 
       :value="value"
       :checked="value === radio"
-    > 
-
-    <!-- ////////////////////////// -->
-    <!-- Checkmark -->
-    <!-- ////////////////////////// -->
-    <div v-if="radio === value" class="">
-      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <g id="24 / basic / check-mark">
-          <path id="icon" fill-rule="evenodd" clip-rule="evenodd" d="M7.28033 10.7197L14.25 3.75L15.3107 4.81066L7.28033 12.841L3 8.56066L4.06066 7.5L7.28033 10.7197Z" fill="#000000"/>
-        </g>
-      </svg>
-    </div>
+    >
   </label>
 </template>
 
@@ -37,7 +60,7 @@
     label: String,
     name: String,
     value: false,
-    radio: Object
+    radio: [Object, String]
   })
 
   const emit = defineEmits(['update:radio'])

package/src/configurator/components/pages/Styles.vue

@@ -1,6 +1,6 @@
 <template>
 	<h2 class="mn-b-small ">Colors</h2>
-	<div v-for="color in colors" class="bg-grey radius-big pd-medium mn-b-small mn-b-big cols-1">
+	<div v-for="color in colors" class="bg-light radius-big pd-medium mn-b-small mn-b-big cols-1">
 		<div class="flex-nowrap flex">
 			<div
 				:class="`i-medium flex-center flex radius-big bg-${color.name}`"

package/src/modules/auth/components/layouts/Auth.vue

@@ -4,7 +4,7 @@
   >
 
     <router-view
-    	class="pd-medium br-solid br-1px br-grey radius-big w-m-66r t-center" 
+    	class="pd-medium br-solid br-1px br-grey-transp-25 radius-big w-m-66r t-center" 
     	v-slot="{ Component, route }"
     >
       <transition 

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

@@ -17,7 +17,7 @@
       			@input="onInput(0)" 
       			@paste="($event) => onPaste($event, 0)" 
       			@keydown="($event) => onKeyDown($event, 0)" 
-      			class="w-100 h1 pd-small t-center bg-grey radius-small mn-r-small"
+      			class="w-100 h1 pd-small t-center bg-light radius-small mn-r-small"
       		>
 			<input 
 				type="number" 
@@ -26,7 +26,7 @@
 				@input="onInput(1)" 
 				@paste="($event) => onPaste($event, 1)" 
 				@keydown="($event) => onKeyDown($event, 1)" 
-				class="w-100 h1 pd-small t-center bg-grey radius-small mn-r-small"
+				class="w-100 h1 pd-small t-center bg-light radius-small mn-r-small"
 			>
 			<input 
 				type="number" 
@@ -35,7 +35,7 @@
 				@input="onInput(2)" 
 				@paste="($event) => onPaste($event, 2)" 
 				@keydown="($event) => onKeyDown($event, 2)" 
-				class="w-100 h1 pd-small t-center bg-grey radius-small mn-r-small"
+				class="w-100 h1 pd-small t-center bg-light radius-small mn-r-small"
 			>
 			<input 
 				type="number" 
@@ -44,7 +44,7 @@
 				@input="onInput(3)" 
 				@paste="($event) => onPaste($event, 3)" 
 				@keydown="($event) => onKeyDown($event, 3)" 
-				class="w-100 h1 pd-small t-center bg-grey radius-small"
+				class="w-100 h1 pd-small t-center bg-light radius-small"
 			>
     	</div>
 

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

@@ -13,13 +13,13 @@
 				type="password" 	
 				:validation="passswordValidation" 
 				:placeholder="t('passwordPlaceholder')"		
-				class="bg-grey pd-small radius-small mn-b-thin"
+				class="bg-light pd-small radius-small mn-b-thin"
 			/>
 			<Field 
 				v-model:field="auth.state.user.passwordRepeat"
 				type="password" 	
 				:placeholder="t('repeatPasswordPlaceholder')"
-				class="bg-grey pd-small radius-small mn-b-thin"
+				class="bg-light pd-small radius-small mn-b-thin"
 			/>
 		</div>
 		<div

package/src/modules/auth/components/pages/Invite.vue

@@ -12,14 +12,14 @@
 				:validation="passswordValidation" 
 				label="Password"		
 				placeholder="******" 
-				class="mn-b-thin bg-grey pd-medium radius-small" 
+				class="mn-b-thin bg-light pd-medium radius-small" 
 			/>
 			<Field 
 				v-model:field="auth.state.user.passwordRepeat"
 				type="password" 	
 				label="Repeat Password"		
 				placeholder="******" 
-				class="bg-grey pd-medium radius-small" 
+				class="bg-light pd-medium radius-small" 
 				
 			/>
 		</div>

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

@@ -6,7 +6,7 @@
 		<p class="mn-b-small t-transp">{{ t('instructions') }}</p>
 		
 		<!-- Select -->
-		<div class="mn-b-small p-small uppercase t-semi bg-grey radius-big o-hidden">
+		<div class="mn-b-small p-small uppercase t-semi bg-light radius-big o-hidden">
 			<Tab 
 				v-model:selected="tabAuth"
 				:tabs="[
@@ -32,7 +32,7 @@
 						:validation="phoneValidation" 
 						mode="national"
 						:inputOptions="{placeholder: t('phonePlaceholder')}"
-						class="bg-grey pd-small radius-small mn-b-thin" 
+						class="bg-light pd-small radius-small mn-b-thin" 
 					/>
 				</div>
 			</transition>
@@ -44,7 +44,7 @@
 						v-model:field="auth.state.user.email" 		
 						:placeholder="t('emailPlaceholder')" 	
 						:validation="emailValidation" 
-						class="bg-grey pd-medium radius-small" 
+						class="bg-light pd-medium radius-small" 
 					/>
 				</div>
 			</transition>

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

@@ -14,7 +14,7 @@
 		</p>
 		
 			<!-- Select -->
-		<div class="mn-b-small p-small uppercase t-semi bg-grey radius-big o-hidden">
+		<div class="mn-b-small p-small uppercase t-semi bg-light radius-big o-hidden">
 			<Tab 
 				v-model:selected="tabAuth"
 				:tabs="[
@@ -40,7 +40,7 @@
 						:validation="phoneValidation" 
 						mode="national"
 						:inputOptions="{placeholder: t('phonePlaceholder'), type: 'tel'}"
-						class="bg-grey pd-small radius-small mn-b-thin" 
+						class="bg-light pd-small radius-small mn-b-thin" 
 					/>
 					
 				</div>
@@ -51,7 +51,7 @@
 						v-model:field="auth.state.user.email" 	
 						:placeholder="t('emailPlaceholder')" 	
 						:validation="emailValidation"
-						class="bg-grey pd-medium radius-small" 
+						class="bg-light pd-medium radius-small" 
 					/>
 				</div>
 			</transition>
@@ -64,7 +64,7 @@
 			:validation="passswordValidation" 
 			:placeholder="t('passwordPlaceholder')" 
 			class="
-        bg-grey
+        bg-light
         pd-medium
         radius-small
         mn-b-semi

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

@@ -5,7 +5,7 @@
 		<h3 class="mn-b-small">{{t('title')}}</h3>
 		
 		<!-- Select -->
-		<div class="mn-b-small p-small uppercase t-semi bg-grey radius-big o-hidden">
+		<div class="mn-b-small p-small uppercase t-semi bg-light radius-big o-hidden">
 			<Tab 
 				v-model:selected="tabAuth"
 				:tabs="[
@@ -31,7 +31,7 @@
 						:validation="phoneValidation" 
 						mode="national"
 						:inputOptions="{placeholder: t('phonePlaceholder')}"
-						class="bg-grey pd-small radius-small mn-b-thin" 
+						class="bg-light pd-small radius-small mn-b-thin" 
 					/>
 					
 				</div>
@@ -43,7 +43,7 @@
 						v-model:field="auth.state.user.email" 	
 						:placeholder="t('emailPlaceholder')" 	
 						:validation="emailValidation"
-						class="bg-grey pd-medium radius-small" 
+						class="bg-light pd-medium radius-small" 
 					/>
 				</div>
 			</transition>