srcdev-nuxt-components 2.2.5 → 2.2.7

package/components/image-galleries/SliderGallery.vue

@@ -8,7 +8,7 @@
     <div v-if="showGallery" class="gallery-content" :class="[{ loaded: isLoading }]">
       <div class="list" ref="sliderGalleryImagesList">
         <div v-for="(item, index) in galleryData" :key="index" class="item">
-          <img :src="item.src" :alt="item.alt" @load="handleImageLoad(index)" @error="handleImageError(index)" loading="lazy" />
+          <NuxtImg :src="item.src" :alt="item.alt" @load="handleImageLoad(index)" @error="handleImageError(index)" loading="lazy" />
           <div class="content">
             <div class="author">{{ item.stylist }}</div>
             <div class="title">{{ item.title }}</div>
@@ -239,19 +239,17 @@ onMounted(() => {
 </script>
 
 <style lang="css">
-/* slider-gallery */
 .slider-gallery {
   --_animationDuration: v-bind(animationDuration + 'ms');
 
   --_thumbnailAspectRatio: 150 /220;
 
-  --_thumbnailWidth: 100px;
-  --_thumbnailHeight: 165px;
-
+  --_thumbnailWidth: var(--_thumbnailMobileWidth, 100px);
+  --_thumbnailHeight: var(--_thumbnailMobileHeight, 165px);
 
   @media screen and (min-width: 1024px) {
-    --_thumbnailWidth: 150px;
-    --_thumbnailHeight: 220px;
+    --_thumbnailWidth: var(--_thumbnailDesktopWidth, 150px);
+    --_thumbnailHeight: var(--_thumbnailDesktopHeight, 220px);
   }
 
   height: 100svh;
@@ -425,20 +423,6 @@ onMounted(() => {
         z-index: 2;
       }
 
-      &:first-child {
-        /* Add the animated border effect */
-        &::before {
-          content: '';
-          position: absolute;
-          inset: -3px; /* Border outside the thumbnail */
-          border-radius: 20px;
-          /* background: conic-gradient(transparent 0deg, transparent 360deg); */
-          z-index: 1;
-          animation: none;
-          pointer-events: none;
-        }
-      }
-
       img {
         width: 100%;
         height: 100%;
@@ -532,12 +516,6 @@ onMounted(() => {
       animation: effectNext 0.5s linear 1 forwards;
 
       .item {
-        &:first-child {
-          /* Add the animated border effect */
-          &::before {
-            animation: countdownBorder 7s linear 1 forwards;
-          }
-        }
         &:nth-last-child(1) {
           overflow: hidden;
           animation: showThumbnail 0.5s linear 1 forwards;
@@ -714,15 +692,4 @@ onMounted(() => {
     font-size: 30px;
   }
 }
-
-/* Keyframe for the border animation */
-@keyframes countdownBorder {
-  0% {
-    background: conic-gradient(brightgreen 0deg, transparent 0deg);
-  }
-  100% {
-    background: conic-gradient(brightgreen 0deg, brightgreen 360deg);
-  }
-}
-
 </style>

package/package.json

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