@ozdao/martyrs 0.2.480 → 0.2.482

package/src/components/Slider/Slider.native.vue

@@ -1,313 +0,0 @@
-<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>
-    <!-- Native Carousel -->
-    <div v-else class="carousel" ref="carouselRef">
-      <div class="carousel__container" @scroll="handleScroll">
-        <div 
-          class="carousel__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>
-      </div>
-      
-      <!-- Navigation Dots (optional) -->
-      <div class="carousel__dots" v-if="showDots && entitiesState.length > 1">
-        <button 
-          v-for="(_, index) in entitiesState" 
-          :key="index"
-          class="carousel__dot"
-          :class="{ 'carousel__dot--active': selectedIndex === index }"
-          @click="scrollTo(index)"
-        ></button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import Loader from '@martyrs/src/components/Loader/Loader.vue'
-
-// Props for customization
-const props = defineProps({
-  showDots: Boolean,
-  store: Object,
-  options: Object,
-  text: Object,
-  user: Object
-});
-
-const router = useRouter()
-const carouselRef = ref(null)
-const entitiesState = ref([])
-const isLoading = ref(true)
-const selectedIndex = ref(0)
-const autoplayInterval = ref(null)
-const scrollTimeout = ref(null)
-
-const { t } = useI18n({
-  messages: props.text
-})
-
-// 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
-  }
-}
-
-// 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
-}
-
-// 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, entitiesState.value.length - 1))
-  
-  // Update selected index
-  selectedIndex.value = boundedIndex
-}
-
-// Setup autoplay functionality
-const setupAutoplay = () => {
-  if (autoplayInterval.value) {
-    clearInterval(autoplayInterval.value)
-  }
-  
-  autoplayInterval.value = setInterval(() => {
-    const nextIndex = (selectedIndex.value + 1) % entitiesState.value.length
-    scrollTo(nextIndex)
-  }, 2000) // 2 seconds interval like in original
-}
-
-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
-  }
-  
-  // Initialize native carousel after entities are loaded
-  if (entitiesState.value.length && 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
-  }
-})
-
-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)
-  }
-})
-
-// Watch for changes in entities to reinitialize if needed
-watch(entitiesState, (newValue) => {
-  if (newValue.length && carouselRef.value) {
-    // Reset to first slide
-    selectedIndex.value = 0
-    scrollTo(0)
-    
-    // Reset autoplay
-    setupAutoplay()
-  }
-})
-</script>
-
-<style scoped>
-.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;
-}
-
-.carousel__dot--active {
-  background-color: rgba(0, 0, 0, 0.6);
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>

package/src/modules/products/components/sections/PopularProducts.vue

@@ -1,156 +0,0 @@
-<template>
-  <div class="embla" ref="emblaNode">
-    <div class="embla__container">
-      <div 
-        class="embla__slide h-100 pos-relative pd-nano" 
-        v-for="(value, key) in productsState" 
-        :key="value?._id || key"
-      >
-        <router-link  
-          :to="{ name: 'Organization_Product', params: { _id: value.owner.target, product: value._id  } }"
-          class="h-100 pos-relative"
-        >
-          <transition name="fade" mode="out-in" appear>
-            <div 
-              v-if="isLoading || !value?.name" 
-              class="h-100 w-100 radius-medium flex-center bg-light"
-            >
-              <Loader class="pos-relative"/>
-            </div>
-            
-            <CardProduct  
-              v-else
-              :key="value._id" 
-              :product="value"
-              class="h-max-40r h-100 bg-light"
-            />
-          </transition>
-        </router-link>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-import { useRouter } from 'vue-router'
-    
-import emblaCarouselVue from 'embla-carousel-vue'
-import Autoplay from 'embla-carousel-autoplay'
-
-import Loader from '@martyrs/src/components/Loader/Loader.vue'
-
-import CardProduct from '@martyrs/src/modules/products/components/blocks/CardProduct.vue'
-
-import * as products from '@martyrs/src/modules/products/store/products.js'
-
-const router = useRouter()
-const productsState = ref([]) // Инициализируем как пустой массив
-const isLoading = ref(true)
-const selectedIndex = ref(0)
-const scrollSnaps = ref([])
-
-// Конфигурация автоплея
-const autoplayOptions = {
-  delay: 2000,
-  jump: false,
-  stopOnInteraction: false,
-  stopOnMouseEnter: false,
-  stopOnFocusIn: true,
-  stopOnLastSnap: false,
-  rootNode: (emblaRoot) => emblaRoot.parentElement
-}
-
-// Инициализация карусели
-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()
-  }
-}
-const onSelect = () => {
-  if (emblaApi.value) {
-    selectedIndex.value = emblaApi.value.selectedScrollSnap()
-  }
-}
-
-// Обработчик клика по продукту
-const handleProductClick = (product) => {
-  if (product?._id && product?.owner?.target) {
-    router.push({
-      name: 'Organization_Product', 
-      params: { 
-        _id: product.owner.target, 
-        product: product._id 
-      } 
-    })
-  }
-}
-
-// Загрузка данных
-const loadProducts = async () => {
-  try {
-    isLoading.value = true
-    const response = await products.actions.read({
-      limit: 10, 
-      organization: '657e7134efb8110c51b8b713'
-    })
-    productsState.value = Array.isArray(response) ? response : []
-  } catch (error) {
-    console.error('Error loading products:', error)
-    productsState.value = []
-  } finally {
-    isLoading.value = false
-  }
-}
-
-onMounted(async () => {
-  // Загружаем данные
-  await loadProducts()
-  
-  // Инициализируем карусель
-  onInit()
-  onSelect()
-  
-  // Добавляем слушатели событий
-  if (emblaApi.value) {
-    emblaApi.value.on('reInit', onInit)
-    emblaApi.value.on('reInit', onSelect)
-    emblaApi.value.on('select', onSelect)
-  }
-})
-
-// Очистка слушателей при размонтировании
-onUnmounted(() => {
-  if (emblaApi.value) {
-    emblaApi.value.off('reInit', onInit)
-    emblaApi.value.off('reInit', onSelect)
-    emblaApi.value.off('select', onSelect)
-  }
-})
-</script>
-
-<style lang="scss">
-.embla {
-  overflow: hidden;
-}
-.embla__container {
-  display: flex;
-}
-.embla__slide {
-  flex: 0 0 25%;
-  min-width: 0;
-}
-@media screen and (max-width: 1025px) {
-  .embla__slide {
-    flex: 0 0 75%;
-    min-width: 0;
-  }
-}
-</style>