@ozdao/prometheus-framework 0.2.110 → 0.2.111

package/src/components/DatePicker/Calendar.vue

@@ -0,0 +1,296 @@
+<template>
+  <div class="calendar">
+    <div class="calendar__header">
+      <button @click="prevMonth">&lt;</button>
+      <span>{{ monthYear }}</span>
+      <button @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
+          v-for="day in daysInMonth"
+          :key="day.date"
+          :class="[
+            'calendar__date',
+            { 'calendar__date--today': day.isToday },
+            { 'calendar__date--selected': isSelected(day.date) },
+            { 'calendar__date--range': isInRange(day.date) },
+            { 'calendar__date--disabled': !isSameMonth(day.date) },
+          ]"
+          @click="selectDate(day.date)"
+        >
+          {{ day.day }}
+        </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>
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const props = defineProps({
+  modelValue: [Date, Object],
+  allowRange: Boolean,
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const today = new Date()
+const currentDate = ref(today)
+const selectedDate = ref(null)
+const startDate = ref(null)
+const endDate = ref(null)
+
+const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+const toUTC = (date) => {
+  return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
+}
+
+const monthYear = computed(() => {
+  const month = currentDate.value.toLocaleString('default', { month: 'long', timeZone: 'UTC' })
+  const year = currentDate.value.getUTCFullYear()
+  return `${month} ${year}`
+})
+
+const daysInMonth = computed(() => {
+  const days = []
+  const firstDay = new Date(Date.UTC(
+    currentDate.value.getUTCFullYear(),
+    currentDate.value.getUTCMonth(),
+    1
+  ))
+  const lastDay = new Date(Date.UTC(
+    currentDate.value.getUTCFullYear(),
+    currentDate.value.getUTCMonth() + 1,
+    0
+  ))
+
+  const firstDayOfWeek = firstDay.getUTCDay()
+
+  let date = new Date(firstDay)
+  date.setUTCDate(date.getUTCDate() - firstDayOfWeek)
+  for (let i = 0; i < firstDayOfWeek; i++) {
+    days.push({
+      date: new Date(date),
+      day: date.getUTCDate(),
+      isToday: isToday(date),
+    })
+    date.setUTCDate(date.getUTCDate() + 1)
+  }
+
+  let day = 1
+  for (date = firstDay; date <= lastDay; date.setUTCDate(date.getUTCDate() + 1)) {
+    days.push({
+      date: new Date(date),
+      day,
+      isToday: isToday(date),
+    })
+    day++
+  }
+
+  const lastDayOfWeek = days[days.length - 1].date.getUTCDay()
+  for (let i = lastDayOfWeek + 1; i <= 6; i++) {
+    days.push({
+      date: new Date(date),
+      day: date.getUTCDate(),
+      isToday: isToday(date),
+    })
+    date.setUTCDate(date.getUTCDate() + 1)
+  }
+
+  return days
+})
+
+const isToday = (date) => {
+  const today = new Date()
+  return (
+    date.getUTCDate() === today.getUTCDate() &&
+    date.getUTCMonth() === today.getUTCMonth() &&
+    date.getUTCFullYear() === today.getUTCFullYear()
+  )
+}
+
+const isSameMonth = (date) => {
+  return (
+    date.getUTCMonth() === currentDate.value.getUTCMonth() &&
+    date.getUTCFullYear() === currentDate.value.getUTCFullYear()
+  )
+}
+
+const isSelected = (date) => {
+  if (props.allowRange) {
+    if (startDate.value && endDate.value) {
+      return date >= startDate.value && date <= endDate.value
+    } else if (startDate.value) {
+      return date.getTime() === startDate.value.getTime()
+    }
+  } else {
+    return selectedDate.value && date.getTime() === selectedDate.value.getTime()
+  }
+}
+
+const isInRange = (date) => {
+  if (startDate.value && endDate.value) {
+    return date > startDate.value && date < endDate.value
+  }
+  return false
+}
+
+const selectDate = (date) => {
+  const formattedDate = toUTC(date)
+
+  if (!props.allowRange) {
+    emit('update:modelValue', formattedDate)
+    selectedDate.value = formattedDate
+  } else if (!startDate.value && !endDate.value) {
+    emit('update:modelValue', formattedDate)
+    startDate.value = formattedDate
+  } else if (!endDate.value) {
+    endDate.value = formattedDate
+    if (formattedDate < startDate.value) {
+      const temp = startDate.value
+      startDate.value = formattedDate
+      endDate.value = temp
+    }
+    emit('update:modelValue', { start: startDate.value, end: endDate.value })
+  } else {
+    startDate.value = formattedDate
+    endDate.value = null
+    emit('update:modelValue', formattedDate)
+  }
+  currentDate.value = formattedDate
+}
+
+const prevMonth = () => {
+  currentDate.value = new Date(Date.UTC(
+    currentDate.value.getUTCFullYear(),
+    currentDate.value.getUTCMonth() - 1,
+    1
+  ))
+  // if (selectedDate.value && !isSameMonth(selectedDate.value)) {
+  //   selectedDate.value = null
+  // }
+}
+
+const nextMonth = () => {
+  currentDate.value = new Date(Date.UTC(
+    currentDate.value.getUTCFullYear(),
+    currentDate.value.getUTCMonth() + 1,
+    1
+  ))
+  // if (selectedDate.value && !isSameMonth(selectedDate.value)) {
+  //   selectedDate.value = null
+  // }
+}
+
+const selectToday = () => {
+  const todayStart = new Date(today);
+  todayStart.setUTCHours(0, 0, 0, 0); // Начало дня в UTC
+  const todayEnd = new Date(todayStart);
+  todayEnd.setUTCHours(24, 0, 0, -1); // Конец дня в UTC (23:59:59)
+
+  startDate.value = toUTC(todayStart);
+  endDate.value = toUTC(todayEnd);
+  emit('update:modelValue', { start: startDate.value, end: endDate.value });
+}
+
+const selectLastWeek = () => {
+  const lastWeek = new Date()
+  lastWeek.setUTCDate(lastWeek.getUTCDate() - 7)
+  startDate.value = toUTC(lastWeek)
+  endDate.value = toUTC(today)
+  emit('update:modelValue', { start: startDate.value, end: endDate.value })
+}
+
+const selectLastMonth = () => {
+  const lastMonth = new Date()
+  lastMonth.setUTCMonth(lastMonth.getUTCMonth() - 1)
+  startDate.value = new Date(Date.UTC(lastMonth.getUTCFullYear(), lastMonth.getUTCMonth(), 1))
+  endDate.value = new Date(Date.UTC(
+    lastMonth.getUTCFullYear(),
+    lastMonth.getUTCMonth() + 1,
+    0
+  ))
+  emit('update:modelValue', { start: startDate.value, end: endDate.value })
+}
+
+const selectLastYear = () => {
+  const lastYear = new Date()
+  lastYear.setUTCFullYear(lastYear.getUTCFullYear() - 1)
+  startDate.value = new Date(Date.UTC(lastYear.getUTCFullYear(), 0, 1))
+  endDate.value = new Date(Date.UTC(lastYear.getUTCFullYear(), 11, 31))
+  emit('update:modelValue', { start: startDate.value, end: endDate.value })
+}
+</script>
+
+
+<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);
+  gap: 5px;
+  margin-bottom: 10px;
+}
+
+.calendar__weekday {
+  text-align: center;
+}
+
+.calendar__dates {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 5px;
+}
+
+.calendar__date {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 30px;
+  cursor: pointer;
+}
+
+.calendar__date--today {
+  background-color: #f0f0f0;
+  font-weight: bold;
+}
+
+.calendar__date--selected {
+  background-color: #007bff;
+  color: #fff;
+}
+
+.calendar__date--range {
+  background-color: #e9ecef;
+}
+
+.calendar__date--disabled {
+  color: #ccc;
+  cursor: not-allowed;
+}
+</style>

package/src/modules/landing/components/elements/AnimatedGrid.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="grid">
+    <div class="grid-lines"></div>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+  .grid {
+    perspective: 450px;
+    background-size: cover;
+  }
+
+  .grid-lines {
+    width: 100%;
+    height: 200%;
+    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 0), linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 0);
+    background-size: 45px 30px;
+    background-repeat: repeat;
+    transform-origin: 100% 0 0;
+    animation: play 15s linear infinite;
+  }
+
+  @keyframes play {
+    0% {
+      transform: rotateX(45deg) translateY(-50%);
+    }
+    100% {
+      transform: rotateX(45deg) translateY(0);
+    }
+  }
+</style>

package/src/modules/landing/components/sections/HeroSection.vue

@@ -32,43 +32,45 @@
 
 <template>
 	<div 
-	id="hero" 
-	class="t-center cols-1 flex-center flex section"
+		id="hero" 
+		class="t-center cols-1 flex-center flex"
 	>
 
 		<div 
-		class="flex-column flex-center flex pd-big radius-medium col"
+			class="flex-column flex-center flex pd-big radius-medium"
 		>
 			<h1 
-			class="mn-b-medium" 
-			v-html="t('HERO.TITLE')"
+				class="mn-b-medium" 
+				v-html="t('HERO.TITLE')"
 			/>
 
 			<p 
-			class="w-m-60r mn-b-big t-transp p-big" 
-			v-html="t('HERO.DESCRIPTION')"
-			></p>
+				class="w-m-60r mn-b-big t-transp p-big" 
+				v-html="t('HERO.DESCRIPTION')"
+			/>
 
 			<div 
-			class="mobile-w-100 t-white gap-small cols-2"
+				class="mobile-w-100 t-white gap-small cols-2"
 			>
 				<button  
-				@click="router.push('/catalog')" 
-				class="w-100 bg-dark t-white button">
+					@click="router.push('/catalog')" 
+					class="w-100 bg-dark t-white button"
+				>
 					{{t('HERO.ACTION')}}
 				</button>
 
 				<button 
-				@click="store.commit('toggleBackCall')"
-				class="w-100 bg-light t-dark br-light button">
+					@click="store.commit('toggleBackCall')"
+					class="w-100 bg-light t-dark br-light button"
+				>
 					{{t('HERO.SUBACTION')}}
 				</button>
 			</div>
 
 		</div>
-
 	</div>
 </template>
 
 <style lang="scss" scoped>
+
 </style>

package/src/modules/landing/components/sections/MobileApp.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="mobileApp" class="pd-thin">
+  <div id="mobileApp">
     <section class="pos-relative cols-2 pd-thin o-hidden bg-black t-white radius-extra">
       <div class="z-index-1 h-100">
         <img 
@@ -119,40 +119,15 @@ const { t, te } = useI18n(props.textData)
 </script>
 
 <style lang="scss">
-
-.grid {
-  perspective: 450px;
-  background-size: cover;
-}
-
-.grid-lines {
-  width: 100%;
-  height: 200%;
-  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 0), linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 0);
-  background-size: 45px 30px;
-  background-repeat: repeat;
-  transform-origin: 100% 0 0;
-  animation: play 15s linear infinite;
-}
-
-@keyframes play {
-  0% {
-    transform: rotateX(45deg) translateY(-50%);
-  }
-  100% {
-    transform: rotateX(45deg) translateY(0);
-  }
-}
-
  @media screen and (max-width: 1025px) {
-    #mobileApp {
-      text-align: center;
-      > section {
-        flex-direction: column;
-        > div {
-          order: 1;
-        }
+  #mobileApp {
+    text-align: center;
+    > section {
+      flex-direction: column;
+      > div {
+        order: 1;
       }
     }
   }
+}
 </style>

package/src/modules/landing/components/sections/SectionHeroToken.vue

@@ -2,6 +2,8 @@
 	import { useRouter } from 'vue-router'
 	import { useI18n } from 'vue-i18n'
 
+	import AnimatedGrid from '@pf/src/modules/landing/components/elements/AnimatedGrid.vue'
+
 	const props = defineProps({
 	  textData: {
 	    type: Object,
@@ -61,9 +63,7 @@
 			/>
 		</div>
 
-		<div class="w-100 h-100 pos-absolute pos-t-0 pos-r-0 z-index-0 grid ">
-			<div class="grid-lines"></div>
-		</div>
+		<AnimatedGrid class="w-100 h-100 pos-absolute pos-t-0 pos-r-0 z-index-0" />
 
 	</div>
 </template>
@@ -92,47 +92,20 @@
 		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */
 	}
 
-/* animation */
-
-@keyframes slide {
-	0% {	
-		transform:translateX(-00%); 
-		opacity: 0;
-	}
-	20% {
-		opacity: 1
-	}
-	80% {
-		opacity: 1
-	}
-	100% {
-		transform:translateX(100%); 
-			opacity: 0
+	@keyframes slide {
+		0% {	
+			transform:translateX(-00%); 
+			opacity: 0;
+		}
+		20% {
+			opacity: 1
+		}
+		80% {
+			opacity: 1
+		}
+		100% {
+			transform:translateX(100%); 
+				opacity: 0
+		}
 	}
-}
-	
-
-.grid {
-  perspective: 450px;
-  background-size: cover;
-}
-
-.grid-lines {
-  width: 100%;
-  height: 200%;
-  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 0), linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 0);
-  background-size: 45px 30px;
-  background-repeat: repeat;
-  transform-origin: 100% 0 0;
-  animation: play 15s linear infinite;
-}
-
-@keyframes play {
-  0% {
-    transform: rotateX(45deg) translateY(-50%);
-  }
-  100% {
-    transform: rotateX(45deg) translateY(0);
-  }
-}
 </style>

package/src/modules/landing/landing.client.js

@@ -3,9 +3,11 @@ import MobileApp from './components/sections/MobileApp.vue';
 import SectionFeatures from './components/sections/SectionFeatures.vue';
 
 import FloatingImages from './components/elements/FloatingImages.vue';
+import AnimatedGrid from './components/elements/AnimatedGrid.vue';
 
 export {
   MobileApp,
+  SectionFeatures,
   FloatingImages,
-  SectionFeatures
+  AnimatedGrid
 };