srcdev-nuxt-components 2.5.15 → 2.5.17

package/components/image-galleries/SliderGallery.vue

@@ -8,13 +8,13 @@
     <div v-if="showGallery" class="gallery-content" :class="[{ galleryLoaded: !galleryLoaded }]">
       <div class="list" ref="sliderGalleryImagesList">
         <div v-for="(item, index) in galleryData" :key="index" class="item">
-          <NuxtImg @load="handleImageLoad(index)" @error="handleImageError(index)" :src="item.src" :alt="item.alt"
-            loading="lazy" />
+          <NuxtImg @load="handleImageLoad(index)" @error="handleImageError(index)" :src="item.src" :alt="item.alt" />
           <div class="content" :class="item.textBrightness">
             <div v-show="item.stylist !== ''" class="author" :class="item.textBrightness">{{ item.stylist }}</div>
             <div v-show="item.title !== ''" class="title" :class="item.textBrightness">{{ item.title }}</div>
             <div v-show="item.category !== ''" class="topic" :class="item.textBrightness">{{ item.category }}</div>
-            <div v-show="item.description !== ''" class="description" :class="item.textBrightness">{{ item.description }}</div>
+            <div v-show="item.description !== ''" class="description" :class="item.textBrightness">{{ item.description
+              }}</div>
             <div class="buttons" :class="item.textBrightness">
               <button>SEE MORE</button>
             </div>
@@ -25,10 +25,12 @@
       <div class="thumbnail" ref="sliderGalleryThumbnailsList">
         <div v-for="(item, index) in galleryData" :key="index" class="item">
           <div class="inner">
-            <img :src="item.src" :alt="item.alt" loading="lazy" />
+            <NuxtImg :src="item.src" :alt="item.alt" />
             <div class="content" :class="item.textBrightness">
-              <div v-show="item.thumbnail?.title !== ''" class="title" :class="item.textBrightness">{{ item.thumbnail?.title }}</div>
-              <div v-show="item.thumbnail?.description !== ''" class="description" :class="item.textBrightness">{{ item.thumbnail?.description }}
+              <div v-show="item.thumbnail?.title !== ''" class="title" :class="item.textBrightness">{{
+                item.thumbnail?.title }}</div>
+              <div v-show="item.thumbnail?.description !== ''" class="description" :class="item.textBrightness">{{
+                item.thumbnail?.description }}
               </div>
             </div>
           </div>
@@ -36,10 +38,10 @@
       </div>
 
       <div class="arrows">
-        <button id="prev" ref="prevDom" @click.prevent="doPrevious()">
+        <button id="prev" ref="prevDom" @click.prevent="doPrevious()" aria-label="Previous image">
           <Icon name="ic:outline-keyboard-arrow-left" class="arrows-icon" />
         </button>
-        <button id="next" ref="nextDom" @click.prevent="doNext()">
+        <button id="next" ref="nextDom" @click.prevent="doNext()" aria-label="Next image">
           <Icon name="ic:outline-keyboard-arrow-right" class="arrows-icon" />
         </button>
       </div>
@@ -50,6 +52,8 @@
 </template>
 
 <script setup lang="ts">
+import NuxtImg from '#image/components/NuxtImg.vue';
+
 const props = defineProps({
   autoRun: {
     type: Boolean,
@@ -270,11 +274,6 @@ onBeforeUnmount(() => {
   --_thumbnailWidth: var(--_thumbnailMobileWidth, 100px);
   --_thumbnailHeight: var(--_thumbnailMobileHeight, 165px);
 
-  @container (width >= 1024px) {
-    --_thumbnailWidth: var(--_thumbnailDesktopWidth, 150px);
-    --_thumbnailHeight: var(--_thumbnailDesktopHeight, 220px);
-  }
-
   height: 100svh;
   width: 100vw;
   overflow: hidden;
@@ -464,6 +463,11 @@ onBeforeUnmount(() => {
     display: flex;
     gap: 20px;
 
+    @container (width >= 1024px) {
+      --_thumbnailWidth: var(--_thumbnailDesktopWidth, 150px);
+      --_thumbnailHeight: var(--_thumbnailDesktopHeight, 220px);
+    }
+
     .item {
       width: var(--_thumbnailWidth);
       height: var(--_thumbnailHeight);
@@ -473,12 +477,12 @@ onBeforeUnmount(() => {
       border: var(--_thumbnailBorder, 1px solid transparent);
       outline: var(--_thumbnailOutline, 1px solid transparent);
       border-radius: var(--_thumbnailBorderRadius, 20px);
+      overflow: hidden;
 
       .inner {
         position: absolute;
         inset: 0 0 0 0;
         background-color: #0004;
-        border-radius: var(--_thumbnailBorderRadius, 20px);
         z-index: 2;
       }
 
@@ -486,7 +490,6 @@ onBeforeUnmount(() => {
         width: 100%;
         height: 100%;
         object-fit: cover;
-        border-radius: 20px;
       }
 
       .content {

package/package.json

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