@ozdao/prometheus-framework 0.2.111 → 0.2.113

package/src/components/DatePicker/Calendar.vue

@@ -1,23 +1,31 @@
 <template>
   <div class="calendar">
-    <div class="calendar__header">
-      <button @click="prevMonth">&lt;</button>
+     <div v-if="allowRange" class="br-b br-solid br-grey gap-thin flex flex-nowrap pd-thin">
+      <button class="font-second pd-thin bg-main-transp-10 radius-small" @click="selectToday">Today</button>
+      <button class="font-second pd-thin bg-main-transp-10 radius-small" @click="selectLastWeek">Last Week</button>
+      <button class="font-second pd-thin bg-main-transp-10 radius-small" @click="selectLastMonth">Last Month</button>
+      <button class="font-second pd-thin bg-main-transp-10 radius-small" @click="selectLastYear">All time</button>
+    </div>
+
+    <div class="pd-thin flex flex-nowrap flex-v-center flex-justify-between">
+      <button class="aspect-ratio-1x1 w-10 pd-thin bg-main-transp-10 radius-small" @click="prevMonth">&lt;</button>
       <span>{{ monthYear }}</span>
-      <button @click="nextMonth">&gt;</button>
+      <button class="aspect-ratio-1x1 w-10 pd-thin bg-main-transp-10 radius-small" @click="nextMonth">&gt;</button>
     </div>
+
     <div class="calendar__body">
       <div class="calendar__week">
         <div v-for="(day, index) in daysOfWeek" :key="index" class="calendar__weekday">
           {{ day }}
         </div>
       </div>
-      <div class="calendar__dates">
+      <div class="gap-micro calendar__dates">
         <div
           v-for="day in daysInMonth"
           :key="day.date"
           :class="[
-            'calendar__date',
-            { 'calendar__date--today': day.isToday },
+            'flex flex-center cursor-pointer aspect-ratio-1x1 radius-small',
+            { 'bg-main t-white': day.isToday },
             { 'calendar__date--selected': isSelected(day.date) },
             { 'calendar__date--range': isInRange(day.date) },
             { 'calendar__date--disabled': !isSameMonth(day.date) },
@@ -28,12 +36,7 @@
         </div>
       </div>
     </div>
-    <div v-if="allowRange" class="calendar__footer">
-      <button @click="selectToday">Today</button>
-      <button @click="selectLastWeek">Last Week</button>
-      <button @click="selectLastMonth">Last Month</button>
-      <button @click="selectLastYear">All time</button>
-    </div>
+   
   </div>
 </template>
 
@@ -238,18 +241,6 @@ const selectLastYear = () => {
 
 
 <style scoped>
-.calendar {
-  display: inline-block;
-}
-
-.calendar__header,
-.calendar__footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
 .calendar__week {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
@@ -264,17 +255,24 @@ const selectLastYear = () => {
 .calendar__dates {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  gap: 5px;
+  grid-auto-rows: 1fr;
 }
 
-.calendar__date {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 30px;
-  cursor: pointer;
+
+.calendar__dates::before {
+  content: '';
+  width: 0;
+  padding-bottom: 100%;
+  grid-row: 1 / 1;
+  grid-column: 1 / 1;
 }
 
+.calendar__dates  > *:first-child {
+  grid-row: 1 / 1;
+  grid-column: 1 / 1;
+}
+
+
 .calendar__date--today {
   background-color: #f0f0f0;
   font-weight: bold;

package/src/components/Dropdown/Dropdown.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dropdown pos-relative" v-click-outside="clickedOutside" @click.stop="isOpen = !isOpen">
-    <div v-if="isComponentLabel">
-      <component :is="label.component" :class="label.class"></component>
+    <div v-if="isComponentLabel" class="w-100 h-100 flex-center flex">
+      <component :is="label.component" v-bind="label.props" :class="label.class"></component>
     </div>
     <div v-else>
       {{ label }}
@@ -10,18 +10,16 @@
       <div 
         v-show="isOpen" 
         :style="{ left: align === 'left' ? '0' : 'auto', right: align === 'right' ? '0' : 'auto' }" 
-        class="dropdown-content w-15r radius-big" 
+        class="dropdown-content radius-big" 
       >
         <slot></slot>
       </div>
     </transition>
-
   </div>
 </template>
 
 <script setup>
 import { ref, computed } from 'vue';
-
 import clickOutside from '../FieldPhone/click-outside';
 
 let vClickOutside = clickOutside
@@ -31,7 +29,7 @@ const props = defineProps({
     type: [String, Object],
     default: 'Open'
   },
-    align: {
+  align: {
     type: String,
     default: 'left'
   }
@@ -46,12 +44,8 @@ function clickedOutside () {
 </script>
 
 <style scoped>
-.dropdown {
-  display: inline-block;
-}
-
 .dropdown-content {
-   display: block;
+  display: block;
   position: absolute;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;

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