srcdev-nuxt-components 2.2.0 → 2.2.1

package/components/image-galleries/SliderGallery.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="slider-gallery" ref="sliderGalleryWrapper">
+  <div class="slider-gallery" :class="elementClasses" ref="sliderGalleryWrapper">
     <div class="list" ref="sliderGalleryImagesList">
-      <div v-for="item in galleryData" class="item">
+      <div v-for="(item, index) in galleryData" :key="index" class="item">
         <img :src="item.src" />
         <div class="content">
           <div class="author">{{ item.stylist }}</div>
@@ -16,11 +16,11 @@
     </div>
 
     <div class="thumbnail" ref="sliderGalleryThumbnailsList">
-      <div v-for="item in galleryData" class="item">
+      <div v-for="(item, index) in galleryData" :key="index" class="item">
         <img :src="item.src" />
         <div class="content">
-          <div class="title">Name Slider</div>
-          <div class="description">Description</div>
+          <div class="title" v-show="item.thumbnail?.title !== ''">{{ item.thumbnail?.title }}</div>
+          <div class="description" v-show="item.thumbnail?.description !== ''">{{ item.thumbnail?.description }}</div>
         </div>
       </div>
     </div>
@@ -30,12 +30,24 @@
       <button id="next" ref="nextDom" @click.prevent="doNext()">></button>
     </div>
 
-    <div class="time" ref="timeDom"></div>
+    <div class="time"></div>
   </div>
 </template>
 
 <script setup lang="ts">
 const props = defineProps({
+  autoRun: {
+    type: Boolean,
+    default: true,
+  },
+  autoRunInterval: {
+    type: Number,
+    default: 7000,
+  },
+  animationDuration: {
+    type: Number,
+    default: 3000,
+  },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
     default: () => [],
@@ -49,6 +61,10 @@ interface IGalleryData {
   title?: string;
   category?: string;
   description?: string;
+  thumbnail?: {
+    title: string;
+    description: string;
+  };
 }
 
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
@@ -57,10 +73,9 @@ const galleryData = defineModel<IGalleryData[]>('galleryData');
 const sliderGalleryWrapper = useTemplateRef('sliderGalleryWrapper');
 const sliderGalleryImagesList = useTemplateRef('sliderGalleryImagesList');
 const sliderGalleryThumbnailsList = useTemplateRef('sliderGalleryThumbnailsList');
-const timeDom = useTemplateRef('timeDom');
 
-const timeRunning = 3000;
-const timeAutoNext = 7000;
+// const animationDuration = 3000;
+const autoRunInterval = 7000;
 
 const doNext = () => {
   showSlider('next');
@@ -72,16 +87,15 @@ const doPrevious = () => {
 
 let runTimeOut: any;
 let runNextAuto = setTimeout(() => {
+  if (!props.autoRun) return;
   doNext();
-}, timeAutoNext);
+}, autoRunInterval);
 
 function showSlider(type: string) {
-  // Get fresh references to all items by querying the DOM directly
   const currentSliderItems = Array.from(sliderGalleryImagesList.value?.children || []);
   const currentThumbnailItems = Array.from(sliderGalleryThumbnailsList.value?.children || []);
 
   if (type === 'next') {
-    // Move the first item to the end
     if (currentSliderItems.length) {
       const firstItem = currentSliderItems[0];
       sliderGalleryImagesList.value?.appendChild(firstItem);
@@ -94,17 +108,28 @@ function showSlider(type: string) {
 
     sliderGalleryWrapper.value?.classList.add('next');
   } else {
-    // Move the last item to the beginning
+    // For prev animation:
+    // 1. First modify the DOM (prepend the items)
     if (currentSliderItems.length) {
       const lastItem = currentSliderItems[currentSliderItems.length - 1];
+      // Set initial state before prepending (if needed)
+      lastItem.classList.add('prepend-item');
       sliderGalleryImagesList.value?.prepend(lastItem);
     }
 
     if (currentThumbnailItems.length) {
       const lastThumb = currentThumbnailItems[currentThumbnailItems.length - 1];
+      // Set initial state before prepending (if needed)
+      lastThumb.classList.add('prepend-item');
       sliderGalleryThumbnailsList.value?.prepend(lastThumb);
     }
 
+    // 2. Force reflow to ensure the DOM changes are applied
+    // This is a standard technique to ensure CSS transitions work properly
+    // when you need to apply styles immediately after DOM changes
+    sliderGalleryWrapper.value?.offsetWidth;
+
+    // 3. Add the class for animation
     sliderGalleryWrapper.value?.classList.add('prev');
   }
 
@@ -113,13 +138,21 @@ function showSlider(type: string) {
     if (sliderGalleryWrapper.value) {
       sliderGalleryWrapper.value.classList.remove('next');
       sliderGalleryWrapper.value.classList.remove('prev');
+
+      // Remove any helper classes we added
+      const items = sliderGalleryImagesList.value?.querySelectorAll('.prepend-item');
+      items?.forEach((item) => item.classList.remove('prepend-item'));
+
+      const thumbs = sliderGalleryThumbnailsList.value?.querySelectorAll('.prepend-item');
+      thumbs?.forEach((thumb) => thumb.classList.remove('prepend-item'));
     }
-  }, timeRunning);
+  }, props.animationDuration);
 
   clearTimeout(runNextAuto);
   runNextAuto = setTimeout(() => {
+    if (!props.autoRun) return;
     doNext();
-  }, timeAutoNext);
+  }, autoRunInterval);
 }
 
 watch(
@@ -133,6 +166,10 @@ watch(
 <style lang="css">
 /* slider-gallery */
 .slider-gallery {
+  --_animationDuration: v-bind(animationDuration + 'ms');
+
+  --_thembnailAspectRatio: 150 /220;
+
   height: 100svh;
   /* margin-top: -50px; */
   width: 100vw;
@@ -246,6 +283,10 @@ watch(
       flex-shrink: 0;
       position: relative;
 
+      border: var(--_thumbnailBorder, 1px solid transparent);
+      outline: var(--_thumbnailOutline, 1px solid transparent);
+      border-radius: var(--_thumbnailBorderRadius, 20px);
+
       img {
         width: 100%;
         height: 100%;
@@ -347,7 +388,7 @@ watch(
     }
 
     .time {
-      animation: runningTime 3s linear 1 forwards;
+      animation: runningTime var(--_animationDuration) linear 1 forwards;
     }
   }
 
@@ -378,6 +419,11 @@ watch(
           z-index: 100;
         }
       }
+
+      .item.prepend-item {
+        z-index: 1; /* Ensure it's visible */
+        /* Any initial styles needed */
+      }
     }
 
     .arrows {
@@ -387,16 +433,24 @@ watch(
     }
 
     .thumbnail {
+      /* Add a transform to the entire thumbnail container */
+      animation: effectPrev 0.5s linear 1 forwards;
+
       .item {
         &:nth-child(1) {
           overflow: hidden;
-          opacity: 0;
-          animation: showThumbnail 0.5s linear 1 forwards;
+          animation: showThumbnailPrev 0.5s linear 1 forwards;
         }
       }
+
+      .item.prepend-item {
+        opacity: 0;
+        transform: translateX(-20px);
+        /* Initial state for thumbnail animation */
+      }
     }
     .time {
-      animation: runningTime 3s linear 1 forwards;
+      animation: runningTime var(--_animationDuration) linear 1 forwards;
     }
   }
 }
@@ -458,6 +512,27 @@ watch(
     opacity: 0;
   }
 }
+
+@keyframes effectPrev {
+  from {
+    transform: translateX(-150px);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes showThumbnailPrev {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
 @media screen and (max-width: 678px) {
   .slider-gallery .list .item .content {
     padding-right: 0;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",