srcdev-nuxt-components 2.5.12 → 2.5.14

package/components/image-galleries/SliderGallery.vue

@@ -8,14 +8,14 @@
     <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 :src="item.src" :alt="item.alt" @load="handleImageLoad(index)" @error="handleImageError(index)"
+          <NuxtImg @load="handleImageLoad(index)" @error="handleImageError(index)" :src="item.src" :alt="item.alt"
             loading="lazy" />
-          <div class="content">
-            <div class="author">{{ item.stylist }}</div>
-            <div class="title">{{ item.title }}</div>
-            <div class="topic">{{ item.category }}</div>
-            <div class="des">{{ item.description }}</div>
-            <div class="buttons">
+          <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="des" :class="item.textBrightness">{{ item.description }}</div>
+            <div class="buttons" :class="item.textBrightness">
               <button>SEE MORE</button>
             </div>
           </div>
@@ -26,9 +26,9 @@
         <div v-for="(item, index) in galleryData" :key="index" class="item">
           <div class="inner">
             <img :src="item.src" :alt="item.alt" loading="lazy" />
-            <div class="content">
-              <div class="title" v-show="item.thumbnail?.title !== ''">{{ item.thumbnail?.title }}</div>
-              <div class="description" v-show="item.thumbnail?.description !== ''">{{ item.thumbnail?.description }}
+            <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>
             </div>
           </div>
@@ -80,6 +80,7 @@ interface IGalleryData {
     title: string;
     description: string;
   };
+  textBrightness: 'light' | 'dark';
 }
 
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
@@ -269,7 +270,7 @@ onBeforeUnmount(() => {
   --_thumbnailWidth: var(--_thumbnailMobileWidth, 100px);
   --_thumbnailHeight: var(--_thumbnailMobileHeight, 165px);
 
-  @media screen and (min-width: 1024px) {
+  @container (width >= 1024px) {
     --_thumbnailWidth: var(--_thumbnailDesktopWidth, 150px);
     --_thumbnailHeight: var(--_thumbnailDesktopHeight, 220px);
   }
@@ -281,6 +282,7 @@ onBeforeUnmount(() => {
   inset: 0 0 0 0;
 
   z-index: 9999;
+  container-type: inline-size;
 
   .loading-state {
     position: absolute;
@@ -381,24 +383,50 @@ onBeforeUnmount(() => {
         transform: translateX(-50%);
         padding-right: 30%;
         box-sizing: border-box;
-        color: #fff;
         text-shadow: 0 5px 10px #0004;
 
+        &.light {
+          color: #fff;
+        }
+        &.dark {
+          color: #000;
+        }
+
         .author {
           font-weight: bold;
           letter-spacing: 10px;
+
+          &.light {
+            color: #fff;
+          }
+          &.dark {
+            color: #000;
+          }
         }
 
         .title {
           font-size: 5em;
           font-weight: bold;
           line-height: 1.3em;
+
+          &.light {
+            color: #fff;
+          }
+          &.dark {
+            color: #000;
+          }
         }
         .topic {
           font-size: 5em;
           font-weight: bold;
           line-height: 1.3em;
-          color: #f1683a;
+
+          &.light {
+            color: #fff;
+          }
+          &.dark {
+            color: #000;
+          }
         }
 
         .buttons {
@@ -414,6 +442,13 @@ onBeforeUnmount(() => {
             color: #fff;
             letter-spacing: 3px;
             font-weight: 500;
+
+            &.light {
+              color: #fff;
+            }
+            &.dark {
+              color: #000;
+            }
           }
         }
       }
@@ -455,7 +490,6 @@ onBeforeUnmount(() => {
       }
 
       .content {
-        color: #fff;
         position: absolute;
         bottom: 10px;
         left: 10px;
@@ -463,10 +497,24 @@ onBeforeUnmount(() => {
 
         .title {
           font-weight: 500;
+
+          &.light {
+            color: #fff;
+          }
+          &.dark {
+            color: #000;
+}
         }
 
         .description {
           font-weight: 300;
+
+          &.light {
+            color: #fff;
+          }
+          &.dark {
+            color: #000;
+          }
         }
       }
     }

package/package.json

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