@ozdao/prometheus-framework 0.2.323 → 0.2.325

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozdao/prometheus-framework",
-  "version": "0.2.323",
+  "version": "0.2.325",
   "description": "Web3 Framework focused on user experience and ease of development.",
   "author": "OZ DAO <hello@ozdao.dev>",
   "license": "GPL-3.0-or-later",

package/src/components/Button/Button.vue

@@ -51,51 +51,53 @@
 	const finished = ref(false);
 
 	async function Submit() {
+			console.log('click')
+			
 	    button.value.style['pointer-events'] = 'none';
 	    error.value = null;
 	    loading.value = true;
 
 	    // Функция для сброса состояния кнопки.
 	    const resetButton = () => {
-	        if (button.value) {
-            button.value.classList.replace('bg-second', 'bg-main');
-            button.value.style.pointerEvents = 'auto';
-            loading.value = false;
-            finished.value = false;
-            error.value = null;
-	        }
+        if (button.value) {
+          button.value.classList.replace('bg-second', 'bg-main');
+          button.value.style.pointerEvents = 'auto';
+          loading.value = false;
+          finished.value = false;
+          error.value = null;
+        }
 	    };
 
 	    try {
-	        await props.submit();
+        await props.submit();
 
-	        button.value.classList.replace('bg-main', 'bg-second');
+        button.value.classList.replace('bg-main', 'bg-second');
 
-	        loading.value = false;
+        loading.value = false;
 
-	        // Используем функцию сброса состояния кнопки здесь.
-	        if (props.showSucces) { 
-							finished.value = true;
-	            setTimeout(resetButton, 500);
-	        } else {
-	            resetButton();
-	        }
+        // Используем функцию сброса состояния кнопки здесь.
+        if (props.showSucces) { 
+					finished.value = true;
+          setTimeout(resetButton, 500);
+        } else {
+          resetButton();
+        }
 
-	        // Если есть callback, мы также установим таймер для его вызова.
-	        if (props.callback) setTimeout(() => props.callback(), props.callbackDelay);
+        // Если есть callback, мы также установим таймер для его вызова.
+        if (props.callback) setTimeout(() => props.callback(), props.callbackDelay);
 
 	    } catch (err) {
-	    		emits('error',err)
-	        // Если возникла ошибка, мы изменяем стили и устанавливаем сообщение об ошибке.
-	        button.value.classList.replace('bg-main', 'bg-fourth-nano');
-	        error.value = props.error;
-	        
-	        // После задержки снова сбрасываем состояние кнопки.
-	        setTimeout(() => {
-	            resetButton();
-	            // Так как класс кнопки был изменен, вернем его в исходное состояние.
-	            button.value.classList.replace('bg-fourth-nano', 'bg-main');
-	        }, 1330);
+    		emits('error',err)
+        // Если возникла ошибка, мы изменяем стили и устанавливаем сообщение об ошибке.
+        button.value.classList.replace('bg-main', 'bg-fourth-nano');
+        error.value = props.error;
+        
+        // После задержки снова сбрасываем состояние кнопки.
+        setTimeout(() => {
+          resetButton();
+          // Так как класс кнопки был изменен, вернем его в исходное состояние.
+          button.value.classList.replace('bg-fourth-nano', 'bg-main');
+        }, 1330);
 	    }
 	}
 
@@ -105,9 +107,9 @@
 	<button @click.stop="Submit" :disabled="validation" ref="button" class="button">
 		<transition name="FromTop" >
 			<!-- Slot -->
-			<span v-if="!loading && !error && !finished || !showLoader"><slot></slot></span>
+			<template v-if="!loading && !error && !finished || !showLoader"><slot></slot></template>
 			<!-- Loading Circle Animation -->
-			<span v-else-if="loading && !error && showLoader"><Loader  class="pos-relative pos-t-0 pos-l-0 loading"/></span>
+			<template v-else-if="loading && !error && showLoader"><Loader  class="pos-relative pos-t-0 pos-l-0 loading"/></template>
 			<!-- <Loader v-else-if="loading && !error && showLoader"/> -->
 			<!-- Success -->
 			<span v-else-if="finished && showSucces" class="t-semi loading t-black">{{text.success}}</span>
@@ -121,13 +123,7 @@
 </template>
 
 
-<style lang="scss">
-	button[disabled] {
-		background: grey; 
-		&:hover {
-			background: grey; 
-		} 
-	}
+<style lang="scss" >
 
 	.FromTop-enter-active,
 	.FromTop-leave-active {
@@ -144,9 +140,16 @@
 		transition: all 0.5s ease;
 	}
 
+	button[disabled] {
+		opacity: 0.75  !important;
+	 	pointer-events: none  !important;
+	 	cursor: default  !important;
+	 	color: rgba(var(--black), 0.5)  !important;
+		background: rgba(var(--grey), 1) !important; 
+	}
+
 	.button {
 		display: flex;
-		width: fit-content;
 
 		padding: 1rem 1.75rem;
 		border-radius: 3rem;

package/src/components/DatePicker/Calendar.vue

@@ -1,15 +1,23 @@
 <template>
   <div class="calendar">
      <div v-if="allowRange" class="br-b br-solid br-grey-transp-25 gap-thin flex flex-nowrap pd-thin">
-      <button @click="selectToday" class="font-second t-nowrap pd-thin bg-main-transp-10 radius-small" >Today</button>
-      <button @click="selectLastWeek" class="font-second t-nowrap pd-thin bg-main-transp-10 radius-small">Last Week</button>
-      <button @click="selectLastMonth" class="font-second t-nowrap pd-thin bg-main-transp-10 radius-small">Last Month</button>
-      <button @click="selectLastYear" class="font-second t-nowrap pd-thin bg-main-transp-10 radius-small">All time</button>
+      <button @click="selectToday" class="font-second t-nowrap pd-thin bg-white radius-small" >Today</button>
+      <button @click="selectLastWeek" class="font-second t-nowrap pd-thin bg-white radius-small">Last Week</button>
+      <button @click="selectLastMonth" class="font-second t-nowrap pd-thin bg-white radius-small">Last Month</button>
+      <button @click="selectLastYear" class="font-second t-nowrap pd-thin bg-white radius-small">All time</button>
     </div>
     <div class="pd-thin flex flex-nowrap flex-v-center flex-justify-between">
-      <button  @click.stop="prevMonth" class="aspect-ratio-1x1 w-10 pd-thin bg-main-transp-10 radius-small">&lt;</button>
+      <button  @click.stop="prevMonth" class="aspect-1x1 h-100 pd-thin bg-white radius-small">
+        <svg class="h-100" xmlns="http://www.w3.org/2000/svg" width="12" height="20" viewBox="0 0 12 20" fill="none">
+          <path d="M0.610352 10.0068C0.615885 9.81315 0.654622 9.63607 0.726562 9.47559C0.798503 9.3151 0.90918 9.16016 1.05859 9.01074L9.37598 0.958984C9.61393 0.721029 9.90723 0.602051 10.2559 0.602051C10.4883 0.602051 10.6986 0.657389 10.8867 0.768066C11.0804 0.878743 11.2326 1.02816 11.3433 1.21631C11.4595 1.40446 11.5176 1.61475 11.5176 1.84717C11.5176 2.19027 11.3875 2.49186 11.1274 2.75195L3.60693 9.99854L11.1274 17.2534C11.3875 17.519 11.5176 17.8206 11.5176 18.1582C11.5176 18.3962 11.4595 18.6092 11.3433 18.7974C11.2326 18.9855 11.0804 19.1349 10.8867 19.2456C10.6986 19.3618 10.4883 19.4199 10.2559 19.4199C9.90723 19.4199 9.61393 19.2982 9.37598 19.0547L1.05859 11.0029C0.903646 10.8535 0.790202 10.6986 0.718262 10.5381C0.646322 10.3721 0.610352 10.195 0.610352 10.0068Z" fill="#007AFF"/>
+        </svg>
+      </button>
       <span class="t-semi ">{{ monthYear }}</span>
-      <button @click.stop="nextMonth" class="aspect-ratio-1x1 w-10 pd-thin bg-main-transp-10 radius-small" >&gt;</button>
+      <button @click.stop="nextMonth" class="aspect-1x1 h-100 pd-thin bg-white radius-small" >
+        <svg class="h-100" xmlns="http://www.w3.org/2000/svg" width="11" height="20" viewBox="0 0 11 20" fill="none">
+          <path d="M10.9072 10.0151C10.9017 10.2088 10.863 10.3859 10.791 10.5464C10.7191 10.7069 10.6084 10.8618 10.459 11.0112L2.1416 19.063C1.90365 19.3009 1.61035 19.4199 1.26172 19.4199C1.0293 19.4199 0.81901 19.3646 0.630859 19.2539C0.437175 19.1432 0.284994 18.9938 0.174316 18.8057C0.0581055 18.6175 8.85326e-08 18.4072 1.08852e-07 18.1748C1.38846e-07 17.8317 0.130046 17.5301 0.390137 17.27L7.91065 10.0234L0.390138 2.76855C0.130047 2.50293 1.5053e-06 2.20133 1.53481e-06 1.86377C1.55561e-06 1.62581 0.058107 1.41276 0.174318 1.22461C0.284995 1.03646 0.437176 0.887043 0.630861 0.776366C0.819012 0.660155 1.0293 0.60205 1.26172 0.60205C1.61035 0.60205 1.90365 0.723795 2.1416 0.967284L10.459 9.01904C10.6139 9.16846 10.7274 9.3234 10.7993 9.48389C10.8713 9.6499 10.9072 9.82699 10.9072 10.0151Z" fill="#007AFF"/>
+        </svg>
+      </button>
     </div>
 
     <div class="pd-thin calendar__body">
@@ -23,7 +31,7 @@
           v-for="day in daysInMonth"
           :key="day.date"
           :class="[
-            'flex flex-center cursor-pointer aspect-ratio-1x1 radius-small',
+            'flex flex-center cursor-pointer aspect-1x1 radius-small',
             { 'bg-main t-white': day.isToday },
             { 'calendar__date--selected': isSelected(day.date) },
             { 'calendar__date--range': isInRange(day.date) },

package/src/components/DatePicker/DatePicker.vue

@@ -4,26 +4,26 @@
       class="w-100 scroller o-scroll scroll-snap-type-x-mandatory scroll-pd-regular scroll-hide flex-nowrap flex" 
       ref="scrollContainer"
     >
-      <div
-        v-for="date in dates"
-        :key="date.toString()"
+      <div 
+        v-for="date in dates" 
+        :key="date.toString()" 
         @click="selectDate(date)"
         :class="{
-          'selected': selectedDate.toDateString() === date.toDateString(),
-
+          'selected': selectedDate && selectedDate.toDateString() === date.toDateString(),
+          'highlighted': isHighlighted(date)
         }"
-         class="cursor-pointer scroll-snap-align-start 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"
-        >
+        <span class="t-transp">
           {{ dayLetter(date) }}
         </span>
         <span 
           :class="{
-           'bg-main': selectedDate.toDateString() === date.toDateString(),
+            'bg-main': selectedDate && selectedDate.toDateString() === date.toDateString(),
+             'br-1px br-solid br-main':isHighlighted(date),
           }"
-          class="transition-ease-in-out t-semi flex-center flex radius-big i-semi day-number">
+          class="transition-ease-in-out t-semi flex-center flex radius-big i-semi day-number"
+        >
           {{ date.getDate() }}
         </span>
       </div>
@@ -35,66 +35,76 @@
 import { ref, onMounted, defineProps, defineEmits } from 'vue';
 
 const emit = defineEmits();
-const props = defineProps(['date','locale']); // замена 'initialDate' на 'date'
+const props = defineProps(['date', 'options','locale']);
 
 const scrollContainer = ref(null);
-let baseDate;
 
-// Проверка и преобразование даты из формата строки в объект Date
+// Initialize base date for generating the date range
+const baseDate = new Date();
+baseDate.setHours(0, 0, 0, 0);
+
+// Initialize selectedDate as null or with provided date
+const selectedDate = ref(null);
+
 if (props.date) {
   const day = parseInt(props.date.substring(0, 2));
-  const month = parseInt(props.date.substring(2, 4)) - 1; // месяцы начинаются с 0
+  const month = parseInt(props.date.substring(2, 4)) - 1;
   const year = parseInt(props.date.substring(4));
-  baseDate = new Date(year, month, day);
-  console.log('Data' + baseDate)
-} else {
-  baseDate = new Date();
-  console.log('No data' + baseDate)
-}
 
-baseDate.setHours(0, 0, 0, 0);  // Normalize time to compare just the date
+  selectedDate.value = new Date(year, month, day);
+  selectedDate.value.setHours(0, 0, 0, 0);
+}
 
-const selectedDate = ref(new Date(baseDate)); // Using new Date to create a copy
-const dates = generateDates(baseDate, 30); // 30 дней
+const dates = generateDates(baseDate, props.options.dateEnd || 30);
 
 onMounted(() => {
   if (scrollContainer.value) {
-    const target = scrollContainer.value.getElementsByClassName('selected')[0] || scrollContainer.value.getElementsByClassName('bg-main')[0];
+    const target = scrollContainer.value.getElementsByClassName('selected')[0] || 
+                  scrollContainer.value.getElementsByClassName('bg-main')[0] || 
+                  scrollContainer.value.getElementsByClassName('highlighted')[0];
     if (target) {
-      scrollContainer.value.scrollLeft =
-        target.offsetLeft - scrollContainer.value.offsetWidth / 2 + target.offsetWidth / 2;
+      scrollContainer.value.scrollLeft = target.offsetLeft - 
+        scrollContainer.value.offsetWidth / 2 + target.offsetWidth / 2;
     }
   }
 });
 
 function selectDate(date) {
-  selectedDate.value = date;
-  const formattedDate = formatDateForRouter(date);
-  emit('update:date', formattedDate);
+  if (selectedDate.value && selectedDate.value.toDateString() === date.toDateString()) {
+    // If clicking the same date, reset selection
+    selectedDate.value = null;
+    emit('update:date', null);
+  } else {
+    // Select new date
+    selectedDate.value = date;
+    const formattedDate = formatDateForRouter(date);
+    emit('update:date', formattedDate);
+  }
 }
 
+function isHighlighted(date) {
+  return selectedDate.value === null && date.toDateString() === baseDate.toDateString();
+}
 
 function formatDateForRouter(date) {
-  return `${date.getDate().toString().padStart(2, '0')}${(date.getMonth() + 1).toString().padStart(2, '0')}${date.getFullYear()}`;
+  return `${date.getDate().toString().padStart(2, '0')}${(date.getMonth() + 1)
+    .toString().padStart(2, '0')}${date.getFullYear()}`;
 }
 
-
-
 function dayLetter(date) {
-  return date.toLocaleDateString(props.locale ? props.locale : 'en', { weekday: 'narrow' }).toUpperCase();
+  return date.toLocaleDateString(props.locale ? props.locale : 'en', { 
+    weekday: 'narrow' 
+  }).toUpperCase();
 }
 
 function generateDates(start, count) {
   const dates = [];
-  for (let i = -15; i < count - 15; i++) {
+  for (let i = props.options.dateStart || 0; i < count - props.options.dateStart || 0; i++) {
     const newDate = new Date(start);
     newDate.setDate(start.getDate() + i);
-    newDate.setHours(0, 0, 0, 0);  // Normalize time to compare just the date
+    newDate.setHours(0, 0, 0, 0);
     dates.push(newDate);
   }
   return dates;
 }
-</script>
-
-<style lang='scss'>
-</style>
+</script>

package/src/components/EmptyState/EmptyState.vue

@@ -14,11 +14,11 @@
 const props = defineProps({
   title: {
     type: String,
-    default: 'У вас еще нет организации',
+    default: 'Sorry, nothing found.',
   },
   description: {
     type: String,
-    default: 'Для использования сервиса, вам необходимо добавить вашу организацию.',
+    default: 'No items to display. Try changing your search criteria.',
   },
   action: {
     type: String,

package/src/components/Feed/Feed.vue

@@ -104,7 +104,7 @@
       :description="states.empty.description"
       :action="states.empty.action"
       :callback="states.empty.callback"
-      class="pd-medium mn-b-thin bg-light radius-big"
+      class="pd-medium mn-b-thin bg-light radius-medium"
     />
    </TransitionGroup>
 
@@ -174,6 +174,10 @@ const props = defineProps({
     type: Boolean,
     default: true
   },
+  LoadMore: {
+    type: Boolean,
+    default: true
+  },
   search: {
     type: [Boolean, Object],
     default: false
@@ -329,7 +333,7 @@ let observer = null
 onMounted(async () => {
   await fetchItems()
 
-  if (typeof window !== 'undefined' && !props.showLoadMore) {
+  if (typeof window !== 'undefined' && !props.showLoadMore && props.LoadMore) {
     observer = new IntersectionObserver(entries => {
       if (entries.some(entry => entry.isIntersecting)) {
         loadMoreItems()

package/src/components/Media/Media.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="media-container">
+    <!-- Изображение с ленивой загрузкой и placeholder -->
+    <img
+      v-if="isImage"
+      :src="isIntersecting ? url : ''"
+      :data-src="url"
+      :alt="options?.alt || 'Image'"
+      class="media-item"
+      :class="{ 'loading': !isLoaded }"
+      loading="lazy"
+      @load="handleLoad"
+      v-bind="options"
+      ref="imageElement"
+    />
+    
+    <!-- Видео с предварительной загрузкой -->
+    <video
+      v-else-if="isVideo"
+      ref="videoElement"
+      :class="{ 'loading': !isLoaded }"
+      class="media-item"
+      :controls="!options?.hideControls"
+      :loop="options?.loop !== false"
+      :muted="options?.muted !== false"
+      :autoplay="options?.autoplay"
+      :playsinline="options?.playsinline !== false"
+      :preload="options?.preload || 'metadata'"
+      @loadeddata="handleLoad"
+      v-bind="options"
+    >
+      <source :src="url" :type="videoType">
+    </video>
+    
+    <!-- Плейсхолдер во время загрузки -->
+    <div v-if="!isLoaded" class="media-placeholder">
+      Загрузка...
+    </div>
+    
+    <!-- Сообщение об ошибке -->
+    <div v-if="error" class="media-error">
+      {{ error }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, onUnmounted } from 'vue'
+
+const props = defineProps({
+  url: {
+    type: String,
+    required: true
+  },
+  options: {
+    type: Object,
+    default: () => ({
+      muted: true,
+      loop: true,
+      playsinline: true,
+      preload: 'metadata' // 'none' | 'metadata' | 'auto'
+    })
+  }
+})
+
+// Refs
+const videoElement = ref(null)
+const imageElement = ref(null)
+const isLoaded = ref(false)
+const error = ref(null)
+const isIntersecting = ref(false)
+let observer = null
+let isPlaying = false
+
+// Определяем тип медиа
+const fileExtension = computed(() => {
+  return props.url?.split('.')?.pop()?.toLowerCase()
+})
+
+const isImage = computed(() => {
+  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'avif']
+  return imageExtensions.includes(fileExtension.value)
+})
+
+const isVideo = computed(() => {
+  const videoExtensions = ['mp4', 'webm', 'ogg']
+  return videoExtensions.includes(fileExtension.value)
+})
+
+// Определяем MIME-тип для видео
+const videoType = computed(() => {
+  const types = {
+    'mp4': 'video/mp4',
+    'webm': 'video/webm',
+    'ogg': 'video/ogg'
+  }
+  return types[fileExtension.value] || ''
+})
+
+// Обработчик загрузки медиа
+function handleLoad() {
+  isLoaded.value = true
+}
+
+// Обработка ошибок
+function handleError(err) {
+  error.value = `Ошибка загрузки медиа: ${err.message}`
+  isLoaded.value = false
+}
+
+// Управление видео с обработкой ошибок
+async function playVideo() {
+  if (!videoElement.value) return
+  
+  try {
+    if (videoElement.value.paused && !isPlaying) {
+      await videoElement.value.play()
+      isPlaying = true
+    }
+  } catch (err) {
+    handleError(err)
+  }
+}
+
+function checkAndPlayVideo() {
+  if (!videoElement.value) return
+  
+  videoElement.value.onplaying = () => {
+    isPlaying = true
+  }
+  
+  videoElement.value.onpause = () => {
+    isPlaying = false
+  }
+  
+  videoElement.value.onerror = handleError
+}
+
+// Intersection Observer для ленивой загрузки
+function setupIntersectionObserver() {
+  const options = {
+    root: null,
+    rootMargin: '50px',
+    threshold: 0.1
+  }
+  
+  observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      isIntersecting.value = entry.isIntersecting
+      
+      if (entry.isIntersecting) {
+        if (isVideo.value && props.options?.autoplay) {
+          playVideo()
+        }
+        // Отключаем observer после первой загрузки
+        observer.disconnect()
+      }
+    })
+  }, options)
+  
+  // Наблюдаем за элементом в зависимости от типа медиа
+  const element = isImage.value ? imageElement.value : videoElement.value
+  if (element) {
+    observer.observe(element)
+  }
+}
+
+// Lifecycle hooks
+onMounted(() => {
+  setupIntersectionObserver()
+})
+
+onUnmounted(() => {
+  if (observer) {
+    observer.disconnect()
+  }
+})
+</script>
+
+<style scoped>
+.media-container {
+}
+
+.media-item {
+  all: inherit;
+  opacity: 1;
+  transition: opacity 0.3s ease;
+}
+
+.media-item.loading {
+  opacity: 0;
+}
+
+.media-placeholder {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+}
+
+.media-error {
+  color: #ff4444;
+  padding: 1rem;
+  text-align: center;
+}
+</style>

package/src/components/Popup/Popup.vue

@@ -1,27 +1,25 @@
 <template>
-
-		<transition name="TransitionTranslateY" appear>
-				<teleport to="body" v-if="isPopupOpen">
-					<div v-if="isPopupOpen" key="popup-content" class="pd-small z-index-6 popup-wrapper">
-
-						<transition name="TransitionTranslateY" mode="out-in">
-							<section class="pos-relative z-index-4" v-bind="$attrs" :class="$attrs.class">
-									<h4 v-if="title" class="mn-b-small">{{title}}</h4>
-									<IconCross :fill="'rgb(var(--white))'" @click="closePopup()" class="cursor-pointer bg-second pd-micro radius-extra pos-absolute pos-t-0 pos-r-0 mn-t-semi mn-r-semi hover-scale-1 i-medium z-index-5"/>
-									<slot></slot>
-							</section>  
-						</transition>
-
-						<div 
-							@click="closePopup()" 
-					    :class="{'active':isPopupOpen === true}" 
-					    class="color-overlay z-index-3">
-						</div>
-
+		<transition name="moveFromTop">
+			<teleport to="body" v-if="isPopupOpen">
+				<div v-if="isPopupOpen" key="popup-content" class="pd-small z-index-6 popup-wrapper">
+
+					<transition name="TransitionTranslateY" mode="out-in">
+						<section class="pos-relative z-index-4" v-bind="$attrs" :class="$attrs.class">
+								<h4 v-if="title" class="mn-b-small">{{title}}</h4>
+								<IconCross :fill="'rgb(var(--white))'" @click="closePopup()" class="cursor-pointer bg-second pd-micro radius-extra pos-absolute pos-t-0 pos-r-0 mn-t-semi mn-r-semi hover-scale-1 i-medium z-index-5"/>
+								<slot></slot>
+						</section>  
+					</transition>
+
+					<div 
+						@click="closePopup()" 
+				    :class="{'active':isPopupOpen === true}" 
+				    class="color-overlay z-index-3">
 					</div>
-			</teleport>
-		</transition>
 
+				</div>
+		</teleport>
+	</transition>
 </template>
 
 <script setup>