srcdev-nuxt-components 2.3.1 → 2.4.0

package/components/display-banner/DisplayBanner.vue

@@ -0,0 +1,62 @@
+<template>
+  <component :is="tag" class="display-banner" :class="[elementClasses]">
+    <div v-if="$slots.canvas" class="canvas">
+      <slot name="canvas"></slot>
+    </div>
+    <div v-if="$slots.content" class="content">
+      <slot name="content"></slot>
+    </div>
+  </component>
+</template>
+
+<script lang="ts">
+const TAGS_ALLOWED = <string[]>['div', 'p', 'span', 'section', 'article', 'aside', 'header', 'footer', 'main', 'nav', 'ul', 'ol'];
+</script>
+
+<script setup lang="ts">
+
+const props = defineProps({
+  tag: {
+    type: String,
+    default: 'div',
+    validator(value: string) {
+      return TAGS_ALLOWED.includes(value);
+    },
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+.display-banner {
+  display: grid;
+  grid-template-areas: 'banner';
+  container-type: inline-size;
+
+  .canvas {
+    grid-area: banner;
+
+    .image {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .content {
+    grid-area: banner;
+  }
+}
+</style>

package/components/image-galleries/SliderGallery.vue

@@ -1,14 +1,15 @@
 <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" />
+          <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>
@@ -27,15 +28,20 @@
             <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>
+              <div class="description" v-show="item.thumbnail?.description !== ''">{{ item.thumbnail?.description }}
+              </div>
             </div>
           </div>
         </div>
       </div>
 
       <div class="arrows">
-        <button id="prev" ref="prevDom" @click.prevent="doPrevious()"><</button>
-        <button id="next" ref="nextDom" @click.prevent="doNext()">></button>
+        <button id="prev" ref="prevDom" @click.prevent="doPrevious()">
+          <Icon name="ic:outline-keyboard-arrow-left" class="arrows-icon" />
+        </button>
+        <button id="next" ref="nextDom" @click.prevent="doNext()">
+          <Icon name="ic:outline-keyboard-arrow-right" class="arrows-icon" />
+        </button>
       </div>
 
       <div class="time"></div>
@@ -83,7 +89,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 +100,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 +134,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 +163,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 +199,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 +255,7 @@ watch(
 onBeforeUnmount(() => {
   clearTimeout(runTimeOut);
   clearTimeout(runNextAuto);
-});
-
-onMounted(() => {
-  showGallery.value = true;
+  window.removeEventListener('keydown', handleKeyDown);
 });
 </script>
 
@@ -258,6 +279,8 @@ onMounted(() => {
   position: absolute;
   inset: 0 0 0 0;
 
+  z-index: 9999;
+
   .loading-state {
     position: absolute;
     inset: 0 0 0 0;
@@ -272,7 +295,7 @@ onMounted(() => {
     transition: display 0.5s, opacity 0.5s;
     transition-behavior: allow-discrete;
 
-    &.loaded {
+    &.galleryLoaded {
       display: none;
       opacity: 0;
     }
@@ -300,7 +323,7 @@ onMounted(() => {
     /* opacity: 0; */
     /* transition: opacity 0.5s ease-in-out; */
 
-    &.loaded {
+    &.galleryLoaded {
       /* opacity: 1; */
     }
   }
@@ -457,24 +480,46 @@ onMounted(() => {
     width: 300px;
     max-width: 30%;
     display: flex;
-    gap: 10px;
+    gap: 20px;
     align-items: center;
 
     button {
+      display: grid;
+      justify-content: center;
+      align-items: center;
       width: 40px;
       height: 40px;
       border-radius: 50%;
       background-color: #eee4;
-      border: none;
       color: #fff;
       font-family: monospace;
       font-weight: bold;
       transition: 0.5s;
 
+      border-width: 2px;
+      border-style: solid;
+      border-color: white;
+
+      &#prev {
+        --_translateX: -2px;
+      }
+
+      &#next {
+        --_translateX: 2px;
+      }
+
       &:hover {
         background-color: #fff;
         color: #000;
       }
+
+      .arrows-icon {
+        color: currentColor;
+        font-weight: 900;
+        height: 40px;
+        width: 40px;
+        translate: var(--_translateX) -3px;
+      }
     }
   }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -27,18 +27,18 @@
   "devDependencies": {
     "@iconify-json/akar-icons": "1.2.2",
     "@iconify-json/bitcoin-icons": "1.2.2",
-    "@nuxt/eslint": "^1.3.0",
-    "@nuxt/eslint-config": "1.2.0",
-    "@nuxt/icon": "1.11.0",
+    "@nuxt/eslint": "1.3.0",
+    "@nuxt/eslint-config": "1.3.0",
+    "@nuxt/icon": "1.12.0",
     "@nuxt/image": "1.10.0",
     "happy-dom": "16.8.1",
-    "nuxt": "3.16.0",
+    "nuxt": "3.17.2",
     "release-it": "18.1.2",
-    "typescript": "5.8.2"
+    "typescript": "5.8.3"
   },
   "dependencies": {
-    "@oddbird/css-anchor-positioning": "0.4.0",
-    "@vueuse/core": "13.0.0",
+    "@oddbird/css-anchor-positioning": "0.6.0",
+    "@vueuse/core": "13.1.0",
     "focus-trap-vue": "4.0.3",
     "modern-normalize": "3.0.1"
   },