srcdev-nuxt-components 2.1.23 → 2.2.1

package/components/image-galleries/SliderGallery.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="carousel" ref="carouselDom">
-    <!-- list item -->
-    <div class="list" ref="SliderDom">
-      <div v-for="item in galleryData" class="item" ref="SliderItemsDom">
+  <div class="slider-gallery" :class="elementClasses" ref="sliderGalleryWrapper">
+    <div class="list" ref="sliderGalleryImagesList">
+      <div v-for="(item, index) in galleryData" :key="index" class="item">
         <img :src="item.src" />
         <div class="content">
           <div class="author">{{ item.stylist }}</div>
@@ -15,33 +14,40 @@
         </div>
       </div>
     </div>
-    <!-- list thumnail -->
-    <div class="thumbnail" ref="thumbnailBorderDom">
-      <div v-for="item in galleryData" class="item" ref="thumbnailItemsDom">
+
+    <div class="thumbnail" ref="sliderGalleryThumbnailsList">
+      <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>
-    <!-- next prev -->
 
     <div class="arrows">
       <button id="prev" ref="prevDom" @click.prevent="doPrevious()"><</button>
       <button id="next" ref="nextDom" @click.prevent="doNext()">></button>
     </div>
-    <!-- time running -->
-    <div class="time" ref="timeDom"></div>
+
+    <div class="time"></div>
   </div>
 </template>
 
 <script setup lang="ts">
 const props = defineProps({
-  // galleryData: {
-  //   type: Array as PropType<{ src: string; alt: string }[]>,
-  //   default: () => [],
-  // },
+  autoRun: {
+    type: Boolean,
+    default: true,
+  },
+  autoRunInterval: {
+    type: Number,
+    default: 7000,
+  },
+  animationDuration: {
+    type: Number,
+    default: 3000,
+  },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
     default: () => [],
@@ -55,28 +61,21 @@ interface IGalleryData {
   title?: string;
   category?: string;
   description?: string;
+  thumbnail?: {
+    title: string;
+    description: string;
+  };
 }
 
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 const galleryData = defineModel<IGalleryData[]>('galleryData');
 
-//step 1: get DOM
-const nextDom = useTemplateRef('nextDom');
-const prevDom = useTemplateRef('prevDom');
-
-const carouselDom = useTemplateRef('carouselDom');
-const SliderDom = useTemplateRef('SliderDom');
-const thumbnailBorderDom = useTemplateRef('thumbnailBorderDom');
-// let thumbnailItemsDom = useTemplateRef('thumbnailItemsDom');
-const timeDom = useTemplateRef('timeDom');
-
-// setup showSlider DOM
-const SliderItemsDom = useTemplateRef('SliderItemsDom');
-const thumbnailItemsDom = useTemplateRef('thumbnailItemsDom');
+const sliderGalleryWrapper = useTemplateRef('sliderGalleryWrapper');
+const sliderGalleryImagesList = useTemplateRef('sliderGalleryImagesList');
+const sliderGalleryThumbnailsList = useTemplateRef('sliderGalleryThumbnailsList');
 
-// thumbnailBorderDom.value.appendChild(thumbnailItemsDom.value[0]);
-const timeRunning = 3000;
-const timeAutoNext = 7000;
+// const animationDuration = 3000;
+const autoRunInterval = 7000;
 
 const doNext = () => {
   showSlider('next');
@@ -88,54 +87,72 @@ 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(SliderDom.value?.children || []);
-  const currentThumbnailItems = Array.from(thumbnailBorderDom.value?.children || []);
+  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];
-      SliderDom.value?.appendChild(firstItem);
+      sliderGalleryImagesList.value?.appendChild(firstItem);
     }
 
     if (currentThumbnailItems.length) {
       const firstThumb = currentThumbnailItems[0];
-      thumbnailBorderDom.value?.appendChild(firstThumb);
+      sliderGalleryThumbnailsList.value?.appendChild(firstThumb);
     }
 
-    carouselDom.value?.classList.add('next');
+    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];
-      SliderDom.value?.prepend(lastItem);
+      // 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];
-      thumbnailBorderDom.value?.prepend(lastThumb);
+      // Set initial state before prepending (if needed)
+      lastThumb.classList.add('prepend-item');
+      sliderGalleryThumbnailsList.value?.prepend(lastThumb);
     }
 
-    carouselDom.value?.classList.add('prev');
+    // 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');
   }
 
   clearTimeout(runTimeOut);
   runTimeOut = setTimeout(() => {
-    if (carouselDom.value) {
-      carouselDom.value.classList.remove('next');
-      carouselDom.value.classList.remove('prev');
+    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(
@@ -147,150 +164,297 @@ watch(
 </script>
 
 <style lang="css">
-/* carousel */
-.carousel {
-  height: 100vh;
+/* slider-gallery */
+.slider-gallery {
+  --_animationDuration: v-bind(animationDuration + 'ms');
+
+  --_thembnailAspectRatio: 150 /220;
+
+  height: 100svh;
   /* margin-top: -50px; */
   width: 100vw;
   overflow: hidden;
   position: absolute;
   inset: 0 0 0 0;
-}
-.carousel .list .item {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  inset: 0 0 0 0;
-}
-.carousel .list .item img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.carousel .list .item .content {
-  position: absolute;
-  top: 20%;
-  width: 1140px;
-  max-width: 80%;
-  left: 50%;
-  transform: translateX(-50%);
-  padding-right: 30%;
-  box-sizing: border-box;
-  color: #fff;
-  text-shadow: 0 5px 10px #0004;
-}
-.carousel .list .item .author {
-  font-weight: bold;
-  letter-spacing: 10px;
-}
-.carousel .list .item .title,
-.carousel .list .item .topic {
-  font-size: 5em;
-  font-weight: bold;
-  line-height: 1.3em;
-}
-.carousel .list .item .topic {
-  color: #f1683a;
-}
-.carousel .list .item .buttons {
-  display: grid;
-  grid-template-columns: repeat(2, 130px);
-  grid-template-rows: 40px;
-  gap: 5px;
-  margin-top: 20px;
-}
-.carousel .list .item .buttons button {
-  background-color: #99999975;
-  border: 1px solid #fff;
-  color: #fff;
-  letter-spacing: 3px;
-  font-weight: 500;
-}
-/* .carousel .list .item .buttons button:nth-child(2) {
-  background-color: transparent;
-  border: 1px solid #fff;
-  color: #eee;
-} */
-/* thumbail */
-.thumbnail {
-  position: absolute;
-  bottom: 50px;
-  left: 50%;
-  width: max-content;
-  z-index: 100;
-  display: flex;
-  gap: 20px;
-}
-.thumbnail .item {
-  width: 150px;
-  height: 220px;
-  flex-shrink: 0;
-  position: relative;
-}
-.thumbnail .item img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 20px;
-}
-.thumbnail .item .content {
-  color: #fff;
-  position: absolute;
-  bottom: 10px;
-  left: 10px;
-  right: 10px;
-}
-.thumbnail .item .content .title {
-  font-weight: 500;
-}
-.thumbnail .item .content .description {
-  font-weight: 300;
-}
-/* arrows */
-.arrows {
-  position: absolute;
-  top: 80%;
-  right: 52%;
-  z-index: 100;
-  width: 300px;
-  max-width: 30%;
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-.arrows button {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background-color: #eee4;
-  border: none;
-  color: #fff;
-  font-family: monospace;
-  font-weight: bold;
-  transition: 0.5s;
-}
-.arrows button:hover {
-  background-color: #fff;
-  color: #000;
-}
 
-/* animation */
-.carousel .list .item:nth-child(1) {
-  z-index: 1;
-}
+  .list {
+    .item {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      inset: 0 0 0 0;
+
+      &:nth-child(1) {
+        z-index: 1;
+
+        .content {
+          .author,
+          .title,
+          .topic,
+          .des,
+          .buttons {
+            transform: translateY(50px);
+            filter: blur(20px);
+            opacity: 0;
+            animation: showContent 0.5s 1s linear 1 forwards;
+          }
+
+          .title {
+            animation-delay: 1.2s !important;
+          }
+          .topic {
+            animation-delay: 1.4s !important;
+          }
+          .des {
+            animation-delay: 1.6s !important;
+          }
+          .buttons {
+            animation-delay: 1.8s !important;
+          }
+        }
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .content {
+        position: absolute;
+        top: 20%;
+        width: 1140px;
+        max-width: 80%;
+        left: 50%;
+        transform: translateX(-50%);
+        padding-right: 30%;
+        box-sizing: border-box;
+        color: #fff;
+        text-shadow: 0 5px 10px #0004;
+
+        .author {
+          font-weight: bold;
+          letter-spacing: 10px;
+        }
+
+        .title {
+          font-size: 5em;
+          font-weight: bold;
+          line-height: 1.3em;
+        }
+        .topic {
+          font-size: 5em;
+          font-weight: bold;
+          line-height: 1.3em;
+          color: #f1683a;
+        }
+
+        .buttons {
+          display: grid;
+          grid-template-columns: repeat(2, 130px);
+          grid-template-rows: 40px;
+          gap: 5px;
+          margin-top: 20px;
+
+          button {
+            background-color: #99999975;
+            border: 1px solid #fff;
+            color: #fff;
+            letter-spacing: 3px;
+            font-weight: 500;
+          }
+        }
+      }
+    }
+  }
+
+  .thumbnail {
+    position: absolute;
+    bottom: 50px;
+    left: 50%;
+    width: max-content;
+    z-index: 100;
+    display: flex;
+    gap: 20px;
+
+    .item {
+      width: 150px;
+      height: 220px;
+      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%;
+        object-fit: cover;
+        border-radius: 20px;
+      }
+
+      .content {
+        color: #fff;
+        position: absolute;
+        bottom: 10px;
+        left: 10px;
+        right: 10px;
+
+        .title {
+          font-weight: 500;
+        }
+
+        .description {
+          font-weight: 300;
+        }
+      }
+    }
+  }
+
+  /* arrows */
+  .arrows {
+    position: absolute;
+    top: 80%;
+    right: 52%;
+    z-index: 100;
+    width: 300px;
+    max-width: 30%;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+
+    button {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background-color: #eee4;
+      border: none;
+      color: #fff;
+      font-family: monospace;
+      font-weight: bold;
+      transition: 0.5s;
+
+      &:hover {
+        background-color: #fff;
+        color: #000;
+      }
+    }
+  }
+
+  .time {
+    position: absolute;
+    z-index: 1000;
+    width: 0%;
+    height: 3px;
+    background-color: #f1683a;
+    left: 0;
+    top: 0;
+  }
+
+  /* Slider carousel animations */
+  &.next {
+    .list {
+      .item {
+        &:nth-child(1) {
+          img {
+            width: 150px;
+            height: 220px;
+            position: absolute;
+            bottom: 50px;
+            left: 50%;
+            border-radius: 30px;
+            animation: showImage 0.5s linear 1 forwards;
+          }
+        }
+      }
+    }
+
+    .arrows {
+      button {
+        pointer-events: none;
+      }
+    }
+
+    .thumbnail {
+      animation: effectNext 0.5s linear 1 forwards;
 
-/* animation text in first item */
-
-.carousel .list .item:nth-child(1) .content .author,
-.carousel .list .item:nth-child(1) .content .title,
-.carousel .list .item:nth-child(1) .content .topic,
-.carousel .list .item:nth-child(1) .content .des,
-.carousel .list .item:nth-child(1) .content .buttons {
-  transform: translateY(50px);
-  filter: blur(20px);
-  opacity: 0;
-  animation: showContent 0.5s 1s linear 1 forwards;
+      .item {
+        &:nth-last-child(1) {
+          overflow: hidden;
+          animation: showThumbnail 0.5s linear 1 forwards;
+        }
+      }
+    }
+
+    .time {
+      animation: runningTime var(--_animationDuration) linear 1 forwards;
+    }
+  }
+
+  &.prev {
+    .list {
+      .item {
+        &:nth-child(2) {
+          z-index: 2;
+
+          img {
+            animation: outFrame 0.5s linear 1 forwards;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+          }
+
+          .content {
+            .author,
+            .title,
+            .topic,
+            .des,
+            .buttons {
+              animation: contentOut 1.5s linear 1 forwards !important;
+            }
+          }
+        }
+        img {
+          z-index: 100;
+        }
+      }
+
+      .item.prepend-item {
+        z-index: 1; /* Ensure it's visible */
+        /* Any initial styles needed */
+      }
+    }
+
+    .arrows {
+      button {
+        pointer-events: none;
+      }
+    }
+
+    .thumbnail {
+      /* Add a transform to the entire thumbnail container */
+      animation: effectPrev 0.5s linear 1 forwards;
+
+      .item {
+        &:nth-child(1) {
+          overflow: hidden;
+          animation: showThumbnailPrev 0.5s linear 1 forwards;
+        }
+      }
+
+      .item.prepend-item {
+        opacity: 0;
+        transform: translateX(-20px);
+        /* Initial state for thumbnail animation */
+      }
+    }
+    .time {
+      animation: runningTime var(--_animationDuration) linear 1 forwards;
+    }
+  }
 }
+
 @keyframes showContent {
   to {
     transform: translateY(0px);
@@ -298,28 +462,7 @@ watch(
     opacity: 1;
   }
 }
-.carousel .list .item:nth-child(1) .content .title {
-  animation-delay: 1.2s !important;
-}
-.carousel .list .item:nth-child(1) .content .topic {
-  animation-delay: 1.4s !important;
-}
-.carousel .list .item:nth-child(1) .content .des {
-  animation-delay: 1.6s !important;
-}
-.carousel .list .item:nth-child(1) .content .buttons {
-  animation-delay: 1.8s !important;
-}
-/* create animation when next click */
-.carousel.next .list .item:nth-child(1) img {
-  width: 150px;
-  height: 220px;
-  position: absolute;
-  bottom: 50px;
-  left: 50%;
-  border-radius: 30px;
-  animation: showImage 0.5s linear 1 forwards;
-}
+
 @keyframes showImage {
   to {
     bottom: 0;
@@ -330,22 +473,12 @@ watch(
   }
 }
 
-.carousel.next .thumbnail .item:nth-last-child(1) {
-  overflow: hidden;
-  animation: showThumbnail 0.5s linear 1 forwards;
-}
-.carousel.prev .list .item img {
-  z-index: 100;
-}
 @keyframes showThumbnail {
   from {
     width: 0;
     opacity: 0;
   }
 }
-.carousel.next .thumbnail {
-  animation: effectNext 0.5s linear 1 forwards;
-}
 
 @keyframes effectNext {
   from {
@@ -353,22 +486,6 @@ watch(
   }
 }
 
-/* running time */
-
-.carousel .time {
-  position: absolute;
-  z-index: 1000;
-  width: 0%;
-  height: 3px;
-  background-color: #f1683a;
-  left: 0;
-  top: 0;
-}
-
-.carousel.next .time,
-.carousel.prev .time {
-  animation: runningTime 3s linear 1 forwards;
-}
 @keyframes runningTime {
   from {
     width: 100%;
@@ -378,18 +495,6 @@ watch(
   }
 }
 
-/* prev click */
-
-.carousel.prev .list .item:nth-child(2) {
-  z-index: 2;
-}
-
-.carousel.prev .list .item:nth-child(2) img {
-  animation: outFrame 0.5s linear 1 forwards;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
 @keyframes outFrame {
   to {
     width: 150px;
@@ -400,23 +505,6 @@ watch(
   }
 }
 
-.carousel.prev .thumbnail .item:nth-child(1) {
-  overflow: hidden;
-  opacity: 0;
-  animation: showThumbnail 0.5s linear 1 forwards;
-}
-.carousel.next .arrows button,
-.carousel.prev .arrows button {
-  pointer-events: none;
-}
-.carousel.prev .list .item:nth-child(2) .content .author,
-.carousel.prev .list .item:nth-child(2) .content .title,
-.carousel.prev .list .item:nth-child(2) .content .topic,
-.carousel.prev .list .item:nth-child(2) .content .des,
-.carousel.prev .list .item:nth-child(2) .content .buttons {
-  animation: contentOut 1.5s linear 1 forwards !important;
-}
-
 @keyframes contentOut {
   to {
     transform: translateY(-150px);
@@ -424,11 +512,32 @@ 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) {
-  .carousel .list .item .content {
+  .slider-gallery .list .item .content {
     padding-right: 0;
   }
-  .carousel .list .item .content .title {
+  .slider-gallery .list .item .content .title {
     font-size: 30px;
   }
 }

package/package.json

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