@ozdao/martyrs 0.2.480 → 0.2.482

package/src/components/Slider/Slider.vue

@@ -1,133 +1,253 @@
 <template>
   <div class="pos-relative">
-    <!-- Loading State -->
-    <div v-if="isLoading" class="h-20r radius-semi pos-relative w-100 bg-light">
-      <Loader />
-    </div>
-
-    <!-- Empty State -->
-    <div v-else-if="!entitiesState.length" class="bg-light radius-semi  flex flex-center  w-100 h-20r">
-      <p class="text-gray-500">{{t('title')}}</p>
-    </div>
-
-    <!-- Carousel -->
-    <div v-else class="embla" ref="emblaNode">
-      <div class="embla__container">
-        <div 
-          class="embla__slide pd-nano" 
-          v-for="(entity, key, index) in entitiesState" 
-          :key="key"
-        >
-          <transition name="fade" mode="out-in" appear>
-            <slot
-              :item="entity"
-              :user="user"
-            ></slot>
-          </transition>
-        </div>
+    <!-- Native Carousel -->
+    <div class="carousel" ref="carouselRef">
+      <div class="carousel__container" @scroll="handleScroll">
+        <slot></slot>
+      </div>
+      
+      <!-- Navigation Dots (optional) -->
+      <div class="carousel__dots" v-if="showDots && slideCount > 1">
+        <button 
+          v-for="index in slideCount" 
+          :key="index - 1"
+          class="carousel__dot"
+          :class="{ 'carousel__dot--active': selectedIndex === index - 1 }"
+          @click="scrollTo(index - 1)"
+        ></button>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-
-import emblaCarouselVue from 'embla-carousel-vue'
-import Autoplay from 'embla-carousel-autoplay'
-
-import Loader from '@martyrs/src/components/Loader/Loader.vue'
+import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
 
 // Props for customization
 const props = defineProps({
-  store: Object,
-  options: Object,
-  text: Object,
-  user: Object
+  showDots: Boolean,
+  slideCount: {
+    type: Number,
+    default: 0
+  }
 });
 
-const router = useRouter()
-const entitiesState = ref([])
-const isLoading = ref(true);
-const selectedIndex = ref(0);
-
-
-// Конфигурация автоплея
-const autoplayOptions = {
-  delay: 2000,
-  jump: false,
-  stopOnInteraction: false,
-  stopOnMouseEnter: false,
-  stopOnFocusIn: true,
-  stopOnLastSnap: false,
-  rootNode: (emblaRoot) => emblaRoot.parentElement
-}
+const carouselRef = ref(null)
+const selectedIndex = ref(0)
+const autoplayInterval = ref(null)
+const scrollTimeout = ref(null)
 
-// Инициализация карусели
-const [emblaNode, emblaApi] = emblaCarouselVue(
-  { loop: true }, 
-  [Autoplay(autoplayOptions)]
-)
-
-// Методы управления каруселью
-const scrollTo = (index) => emblaApi.value?.scrollTo(index)
-const onInit = () => {
-  if (emblaApi.value) {
-    scrollSnaps.value = emblaApi.value.scrollSnapList()
+// Scroll to specific slide
+const scrollTo = (index) => {
+  if (!carouselRef.value) return
+  
+  const container = carouselRef.value.querySelector('.carousel__container')
+  const slides = container.querySelectorAll('.carousel__slide')
+  
+  if (slides[index]) {
+    container.scrollTo({
+      left: slides[index].offsetLeft,
+      behavior: 'smooth'
+    })
+    
+    selectedIndex.value = index
   }
 }
-const onSelect = () => {
-  if (emblaApi.value) {
-    selectedIndex.value = emblaApi.value.selectedScrollSnap()
+
+// Handle scroll event with debounce
+const handleScroll = () => {
+  // Clear previous timeout
+  if (scrollTimeout.value) {
+    clearTimeout(scrollTimeout.value)
   }
+  
+  // Set a timeout to update the index when scrolling stops
+  scrollTimeout.value = setTimeout(() => {
+    updateSelectedIndex()
+  }, 50) // Small delay to ensure scroll has completed
 }
 
-const { t } = useI18n({
-  messages: props.text
-})
+// Update selected index when scrolling
+const updateSelectedIndex = () => {
+  if (!carouselRef.value) return
+  
+  const container = carouselRef.value.querySelector('.carousel__container')
+  const slides = container.querySelectorAll('.carousel__slide')
+  
+  if (!slides.length) return
+  
+  const scrollPosition = container.scrollLeft
+  const slideWidth = slides[0].offsetWidth
+  
+  // Find current slide index based on scroll position
+  const index = Math.round(scrollPosition / slideWidth)
+  
+  // Ensure index is within bounds
+  const boundedIndex = Math.max(0, Math.min(index, slides.length - 1))
+  
+  // Update selected index
+  selectedIndex.value = boundedIndex
+}
 
-onMounted(async() => {
-  try {
-    entitiesState.value = await props.store.read(props.options);
-  } catch (error) {
-    console.error('Error loading entities:', error);
-    entitiesState.value = [];
-  } finally {
-    isLoading.value = false;
+// Setup autoplay functionality
+const setupAutoplay = () => {
+  if (autoplayInterval.value) {
+    clearInterval(autoplayInterval.value)
   }
-  // Инициализируем карусель
-  onInit()
-  onSelect()
   
-  // Добавляем слушатели событий
-  if (emblaApi.value) {
-    emblaApi.value.on('reInit', onInit)
-    emblaApi.value.on('reInit', onSelect)
-    emblaApi.value.on('select', onSelect)
+  autoplayInterval.value = setInterval(() => {
+    const nextIndex = (selectedIndex.value + 1) % props.slideCount
+    scrollTo(nextIndex)
+  }, 2000) // 2 seconds interval like in original
+}
+
+onMounted(() => {
+  // Initialize native carousel after component is mounted
+  if (carouselRef.value) {
+    // Listen for scroll end using intersection observer for better performance
+    const container = carouselRef.value.querySelector('.carousel__container')
+    const slides = container.querySelectorAll('.carousel__slide')
+    
+    // Create intersection observer to detect when slides are visible
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          // Find the index of the visible slide
+          const slideIndex = Array.from(slides).indexOf(entry.target)
+          if (slideIndex !== -1) {
+            selectedIndex.value = slideIndex
+          }
+        }
+      })
+    }, {
+      root: container,
+      threshold: 0.7 // Consider slide visible when 70% is in view
+    })
+    
+    // Observe all slides
+    slides.forEach(slide => {
+      observer.observe(slide)
+    })
+    
+    // Add focus/blur events to pause autoplay on focus
+    container.addEventListener('focusin', () => {
+      if (autoplayInterval.value) {
+        clearInterval(autoplayInterval.value)
+      }
+    })
+    
+    container.addEventListener('focusout', () => {
+      setupAutoplay()
+    })
+    
+    // Stop autoplay on touch/mouse interaction
+    container.addEventListener('mousedown', () => {
+      if (autoplayInterval.value) {
+        clearInterval(autoplayInterval.value)
+      }
+    })
+    
+    container.addEventListener('touchstart', () => {
+      if (autoplayInterval.value) {
+        clearInterval(autoplayInterval.value)
+      }
+    })
+    
+    // Resume autoplay after interaction ends
+    container.addEventListener('mouseup', () => {
+      setupAutoplay()
+    })
+    
+    container.addEventListener('touchend', () => {
+      setupAutoplay()
+    })
+    
+    // Initialize autoplay
+    setupAutoplay()
+    
+    // Store observer for cleanup
+    carouselRef.value._observer = observer
   }
 })
 
-// Очистка слушателей при размонтировании
-onUnmounted(() => {
-  if (emblaApi.value) {
-    emblaApi.value.off('reInit', onInit)
-    emblaApi.value.off('reInit', onSelect)
-    emblaApi.value.off('select', onSelect)
+onBeforeUnmount(() => {
+  // Clean up all resources
+  if (carouselRef.value) {
+    // Clean up intersection observer
+    if (carouselRef.value._observer) {
+      carouselRef.value._observer.disconnect()
+    }
+    
+    // Clean up event listeners
+    const container = carouselRef.value.querySelector('.carousel__container')
+    if (container) {
+      container.removeEventListener('focusin', () => {})
+      container.removeEventListener('focusout', () => {})
+      container.removeEventListener('mousedown', () => {})
+      container.removeEventListener('touchstart', () => {})
+      container.removeEventListener('mouseup', () => {})
+      container.removeEventListener('touchend', () => {})
+    }
+  }
+  
+  // Clear all timeouts and intervals
+  if (autoplayInterval.value) {
+    clearInterval(autoplayInterval.value)
+  }
+  
+  if (scrollTimeout.value) {
+    clearTimeout(scrollTimeout.value)
   }
 })
-
 </script>
 
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s ease;
+<style >
+.carousel {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.carousel__container {
+  display: flex;
+  scroll-snap-type: x mandatory;
+  overflow-x: scroll;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scroll-behavior: smooth;
+}
+
+.carousel__container::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
+.carousel__slide {
+  flex: 0 0 100%;
+  width: 100%;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+}
+
+/* Navigation dots */
+.carousel__dots {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.carousel__dot {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.2);
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
 }
 
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
+.carousel__dot--active {
+  background-color: rgba(0, 0, 0, 0.6);
 }
 </style>

package/src/components/Status/Status.vue

@@ -43,7 +43,6 @@
 		position: absolute;
 		left: 0;
 		right: 0;
-		opacity: 0.9
 	}
 </style>
 

package/src/components/Tooltip/Tooltip.vue

@@ -2,7 +2,7 @@
   <div class="cursor-pointer tooltip-container" @mouseover="showTooltip" @mouseleave="hideTooltip">
     <slot></slot>
     <div  class="tooltip-content" :style="tooltipStyle">
-      {{ text }}
+      <span>{{ text }}</span>
     </div>
   </div>
 </template>
@@ -25,7 +25,7 @@ const tooltipStyle = reactive({
   zIndex: 1000,
   background: '#333',
   color: '#fff',
-  padding: '5px 10px',
+  padding: '5px',
   borderRadius: '3px',
   fontSize: '14px',
   display: 'none',

package/src/modules/auth/views/components/pages/Profile.vue

@@ -155,7 +155,7 @@
 
 			</section>
 			
-			
+			<RouterView />
 
 			<Menu v-if="filteredModules.length > 0" class="mn-b-regular bg-light">
 	      <MenuItem 

package/src/modules/auth/views/components/pages/ProfileEdit.old.vue

@@ -0,0 +1,189 @@
+<template>
+	<div  v-if="show" class="for-transition w-100">
+   
+    <!-- <ProfileCompletion 
+      v-if="route.params._id === auth.state.user._id" 
+      :user="auth.state.user._id"
+      :target="users.state.current"
+      :cta="false"
+    /> -->
+
+    <div class="bg-white mn-b-thin pd-medium">
+      <h4 class="mn-b-small">Profile</h4>
+
+      <div class="mn-b-thin radius-small w-100 h-10r bg-light flex-center flex-column flex">
+         <UploadImage 
+            v-model:photo="users.state.current.profile.photo"
+            :uploadPath="'users/' + users.state.current._id + '/avatars'"
+            class="h-4r w-4r aspect-1x1 o-hidden bg-white mn-b-thin radius-extra" 
+          />
+          <h4>Upload userpic</h4>
+      </div>
+
+      <Field 
+        v-model:field="users.state.current.username"     
+        label="@"  
+        placeholder="Not specified" 
+        class="mn-b-thin w-100 bg-light pd-medium radius-small" 
+        :validation="organizationName" 
+      />
+
+      <p class="mn-b-semi">Your username will be used for URL of profile like {{API_URL}}/users/username</p>
+
+      <Field 
+        v-model:field="users.state.current.profile.name"     
+        label="Name"  
+        placeholder="Not specified" 
+        class="mn-b-thin bg-light pd-medium radius-small" 
+        :validation="organizationName" 
+      />
+
+      <Field 
+        v-model:field="users.state.current.profile.description"     
+        label="Description"  
+        placeholder="Not specified" 
+        class="mn-b-semi bg-light pd-medium radius-small" 
+        :validation="organizationName" 
+      />
+    </div>
+
+    <!-- <p class="mn-b-thin">Select your birthday if you want to receive your birthday gift.</p>
+    
+    <Field 
+      v-model:field="users.state.current.birthday"     
+      label="Birthday"  
+      type="date"
+      placeholder="Not specified" 
+      class="mn-b-semi bg-light pd-medium radius-small" 
+      :validation="organizationName" 
+    /> -->
+    <div class="bg-white mn-b-thin pd-medium">
+      <h3 class="mn-b-small">Socials</h3>
+      <p class="mn-b-thin">Please provide only the username for social media profiles, without full links.</p>
+
+      <Field 
+        v-model:field="users.state.current.socials.instagram"
+        label="Instagram"   
+        placeholder="" 
+        class="mn-b-thin bg-light pd-medium radius-small" 
+      />
+      <Field 
+        v-model:field="users.state.current.socials.twitter"
+        label="Twitter"   
+        placeholder="" 
+        class="mn-b-thin bg-light pd-medium radius-small" 
+      />
+      <Field 
+        v-model:field="users.state.current.socials.facebook"
+        label="Facebook"   
+        placeholder="" 
+        class="mn-b-thin bg-light pd-medium radius-small" 
+      />
+      <Field 
+        v-model:field="users.state.current.socials.telegram"
+        label="Telegram"   
+        placeholder="" 
+        class="mn-b-semi bg-light pd-medium radius-small" 
+      />
+    </div>
+
+    <ProfileEditCredentials class="bg-white mn-b-thin pd-medium"/>
+
+    <div class="bg-white mn-b-thin pd-medium">
+      <h3 class="mn-b-small">Settings</h3>
+      <Checkbox 
+        :label="'Darkmode'"
+        :radio="globals.state.theme.darkmode"
+        @update:radio="event => globals.actions.toggleTheme()"
+        class="w-100 bg-light t-black pd-medium radius-small"
+      />
+    </div>
+
+    <Button 
+      :submit="onSubmit" 
+      :callback="redirectTo" 
+      class="mn-b-thin bg-main w-100"
+    > 
+      Save
+    </Button>
+
+		<Button
+      :submit="onSubmitDelete" 
+      :callback="a = () => {router.push({name: 'Sign In'})}" 
+      class="mn-b-thin w-100 bg-red t-white"
+    >
+      Delete Account
+    </Button>
+	</div>
+</template>
+
+<script setup>
+  // Import components
+  import Tab           from '@martyrs/src/components/Tab/Tab.vue'
+  import Field         from '@martyrs/src/components/Field/Field.vue'
+  import Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue'
+  import Button        from '@martyrs/src/components/Button/Button.vue'
+  import UploadImage   from '@martyrs/src/components/UploadImage/UploadImage.vue';
+
+  import ProfileCompletion from '@martyrs/src/modules/auth/views/components/sections/ProfileCompletion.vue'
+  import ProfileEditCredentials from '@martyrs/src/modules/auth/views/components/sections/ProfileEditCredentials.vue'
+  // Import libs
+  import { computed, onMounted, ref, onBeforeMount } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+  // Import state
+  import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'
+  import * as users from '@martyrs/src/modules/auth/views/store/users.js'
+  import * as globals from '@martyrs/src/modules/globals/views/store/globals.js'
+  // Import validation
+  import * as inputsValidation from '@martyrs/src/modules/auth/views/validations/inputs.validation'
+  const passswordValidation = ref(null)
+  // Accessing router
+  const route = useRoute()
+  const router = useRouter()
+
+  const user = ref(null)
+  const show = ref(false)
+
+
+  onMounted(async () => {
+    await users.actions.read({ _id: route.params._id, user: auth.state.user._id });
+    show.value = true
+  })
+  // Methods
+
+  async function onSubmit() {
+    await users.actions.update(users.state.current)
+  }
+
+  // Добавляем редирект после сохранения
+async function handleSave() {
+  await onSubmit()
+  router.replace({ name: 'User Profile', params: { _id: users.state.current._id }})
+}
+
+  async function onSubmitDelete() {
+    const confirmation = window.confirm("Are you sure you want to delete your account? Restoration will be possible only with the help of an administrator.");
+    
+    if (!confirmation) {
+        return;
+    }
+
+    users.state.current.status = 'removed'
+    await users.actions.update(users.state.current)
+    auth.actions.logout()
+  }
+  function redirectTo () {
+    router.replace({ name: 'User Profile', params: { _id: users.state.current._id }});
+  }
+
+  defineExpose({
+    onSubmit,
+    redirectTo
+  })
+</script>
+
+<style lang="scss">
+	#header {
+		// height: 3rem;
+	}
+</style>