srcdev-nuxt-components 2.3.1 → 2.3.2

package/components/image-galleries/SliderGallery.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="slider-gallery" :class="[elementClasses]" ref="sliderGalleryWrapper">
-    <div class="loading-state" :class="[{ loaded: !isLoading }]">
+    <div class="loading-state" :class="[{ galleryLoaded: !galleryLoaded }]">
       <div class="loading-spinner"></div>
       <p>Loading gallery...</p>
     </div>
 
-    <div v-if="showGallery" class="gallery-content" :class="[{ loaded: isLoading }]">
+    <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)" loading="lazy" />
@@ -83,7 +83,8 @@ const sliderGalleryWrapper = useTemplateRef('sliderGalleryWrapper');
 const sliderGalleryImagesList = useTemplateRef('sliderGalleryImagesList');
 const sliderGalleryThumbnailsList = useTemplateRef('sliderGalleryThumbnailsList');
 
-const isLoading = ref(true);
+const transitionRunning = ref(false);
+const galleryLoaded = ref(true);
 const showGallery = ref(false);
 const loadedImages = ref<Set<number>>(new Set());
 const preloadedImages = ref<Array<HTMLImageElement>>([]);
@@ -93,7 +94,7 @@ onMounted(async () => {
 
   // If no images or galleryData is empty, stop loading
   if (!galleryData.value || galleryData.value.length === 0) {
-    isLoading.value = false;
+    galleryLoaded.value = false;
     return;
   }
 
@@ -127,27 +128,28 @@ onMounted(async () => {
   await Promise.race(imageLoadPromises);
 
   setTimeout(() => {
-    isLoading.value = false;
+    galleryLoaded.value = false;
   }, 500);
+
+  showGallery.value = true;
+  window.addEventListener('keydown', handleKeyDown);
 });
 
 const handleImageLoad = (index: number) => {
-  console.log('Image loaded:', index);
   loadedImages.value.add(index);
 };
 
 const handleImageError = (index: number) => {
-  console.error(`Failed to load image at index ${index}`);
   loadedImages.value.add(index);
 };
 
 const doNext = () => {
-  if (isLoading.value) return;
+  if (transitionRunning.value) return;
   showSlider('next');
 };
 
 const doPrevious = () => {
-  if (isLoading.value) return;
+  if (transitionRunning.value) return;
   showSlider('prev');
 };
 
@@ -155,6 +157,8 @@ let runTimeOut: any;
 let runNextAuto: any = null;
 
 function showSlider(type: string) {
+  transitionRunning.value = true;
+
   const currentSliderItems = Array.from(sliderGalleryImagesList.value?.children || []);
   const currentThumbnailItems = Array.from(sliderGalleryThumbnailsList.value?.children || []);
 
@@ -189,31 +193,45 @@ function showSlider(type: string) {
 
   clearTimeout(runTimeOut);
   runTimeOut = setTimeout(() => {
-    // Your existing cleanup code
+
     if (sliderGalleryWrapper.value) {
       sliderGalleryWrapper.value.classList.remove('next');
       sliderGalleryWrapper.value.classList.remove('prev');
 
-      // Remove helper classes
       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'));
     }
+    transitionRunning.value = false;
   }, props.animationDuration);
 
   // Reset auto-run timer
   clearTimeout(runNextAuto);
   runNextAuto = setTimeout(() => {
-    if (!props.autoRun || isLoading.value) return;
+    if (!props.autoRun || galleryLoaded.value) return;
     doNext();
   }, props.autoRunInterval);
 }
 
+// Add keyboard navigation event handlers
+const handleKeyDown = (event: KeyboardEvent) => {
+  // Don't process key events if transition is running or gallery isn't loaded
+  if (transitionRunning.value || galleryLoaded.value) {
+    return;
+  }
+
+  if (event.key === 'ArrowLeft') {
+    doPrevious();
+  } else if (event.key === 'ArrowRight') {
+    doNext();
+  }
+};
+
 // Initialize auto-run only after loading completes
-watch(isLoading, (isLoadingNow) => {
-  if (!isLoadingNow && props.autoRun) {
+watch(galleryLoaded, (previousValue, currentValue) => {
+  if (!currentValue && props.autoRun) {
     clearTimeout(runNextAuto);
     runNextAuto = setTimeout(() => {
       doNext();
@@ -231,10 +249,7 @@ watch(
 onBeforeUnmount(() => {
   clearTimeout(runTimeOut);
   clearTimeout(runNextAuto);
-});
-
-onMounted(() => {
-  showGallery.value = true;
+  window.removeEventListener('keydown', handleKeyDown);
 });
 </script>
 
@@ -258,6 +273,8 @@ onMounted(() => {
   position: absolute;
   inset: 0 0 0 0;
 
+  z-index: 9999;
+
   .loading-state {
     position: absolute;
     inset: 0 0 0 0;
@@ -272,7 +289,7 @@ onMounted(() => {
     transition: display 0.5s, opacity 0.5s;
     transition-behavior: allow-discrete;
 
-    &.loaded {
+    &.galleryLoaded {
       display: none;
       opacity: 0;
     }
@@ -300,7 +317,7 @@ onMounted(() => {
     /* opacity: 0; */
     /* transition: opacity 0.5s ease-in-out; */
 
-    &.loaded {
+    &.galleryLoaded {
       /* opacity: 1; */
     }
   }

package/package.json

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