srcdev-nuxt-components 8.0.2 → 9.0.0

package/app/components/image-galleries/SliderGallery.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="slider-gallery" :class="[elementClasses]" ref="sliderGalleryWrapper">
+  <div ref="sliderGalleryWrapper" class="slider-gallery" :class="[elementClasses]">
     <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="[{ galleryLoaded: !galleryLoaded }]">
-      <div class="list" ref="sliderGalleryImagesList">
+      <div ref="sliderGalleryImagesList" class="list">
         <div v-for="(item, index) in galleryData" :key="index" class="item">
-          <NuxtImg @load="handleImageLoad(index)" @error="handleImageError(index)" :src="item.src" :alt="item.alt" />
+          <NuxtImg :src="item.src" :alt="item.alt" @load="handleImageLoad(index)" @error="handleImageError(index)" />
           <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>
@@ -23,7 +23,7 @@
         </div>
       </div>
 
-      <div class="thumbnail" ref="sliderGalleryThumbnailsList">
+      <div ref="sliderGalleryThumbnailsList" class="thumbnail">
         <div v-for="(item, index) in galleryData" :key="index" class="item">
           <div class="inner">
             <NuxtImg :src="item.src" :alt="item.alt" />
@@ -40,10 +40,10 @@
       </div>
 
       <div class="arrows">
-        <button id="prev" ref="prevDom" @click.prevent="doPrevious()" aria-label="Previous image">
+        <button id="prev" ref="prevDom" aria-label="Previous image" @click.prevent="doPrevious()">
           <Icon name="ic:outline-keyboard-arrow-left" class="arrows-icon" />
         </button>
-        <button id="next" ref="nextDom" @click.prevent="doNext()" aria-label="Next image">
+        <button id="next" ref="nextDom" aria-label="Next image" @click.prevent="doNext()">
           <Icon name="ic:outline-keyboard-arrow-right" class="arrows-icon" />
         </button>
       </div>
@@ -54,7 +54,7 @@
 </template>
 
 <script setup lang="ts">
-import type { IGalleryData } from "../../types/components"
+import type { IGalleryData } from "../../types/components";
 const props = defineProps({
   autoRun: {
     type: Boolean,
@@ -72,192 +72,193 @@ const props = defineProps({
     type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
-})
+});
 
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
-const galleryData = defineModel<IGalleryData[]>("galleryData")
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const galleryData = defineModel<IGalleryData[]>("galleryData");
 
-const sliderGalleryWrapper = useTemplateRef("sliderGalleryWrapper")
-const sliderGalleryImagesList = useTemplateRef("sliderGalleryImagesList")
-const sliderGalleryThumbnailsList = useTemplateRef("sliderGalleryThumbnailsList")
+const sliderGalleryWrapper = useTemplateRef("sliderGalleryWrapper");
+const sliderGalleryImagesList = useTemplateRef("sliderGalleryImagesList");
+const sliderGalleryThumbnailsList = useTemplateRef("sliderGalleryThumbnailsList");
 
-const transitionRunning = ref(false)
-const galleryLoaded = ref(true)
-const showGallery = ref(false)
-const loadedImages = ref<Set<number>>(new Set())
-const preloadedImages = ref<Array<HTMLImageElement>>([])
+const transitionRunning = ref(false);
+const galleryLoaded = ref(true);
+const showGallery = ref(false);
+const loadedImages = ref<Set<number>>(new Set());
+const preloadedImages = ref<Array<HTMLImageElement>>([]);
 
 onMounted(async () => {
-  await nextTick()
+  await nextTick();
 
   // If no images or galleryData is empty, stop loading
   if (!galleryData.value || galleryData.value.length === 0) {
-    galleryLoaded.value = false
-    return
+    galleryLoaded.value = false;
+    return;
   }
 
   // Create an array to hold image loading promises
-  const imageLoadPromises: Promise<void>[] = []
+  const imageLoadPromises: Promise<void>[] = [];
 
   // Preload the first image at minimum
-  const firstImageIndex = 0
+  const firstImageIndex = 0;
   if (galleryData.value[firstImageIndex]) {
-    const img = new Image()
-    img.src = galleryData.value[firstImageIndex].src
+    const img = new Image();
+    img.src = galleryData.value[firstImageIndex].src;
 
     const promise = new Promise<void>((resolve) => {
       img.onload = () => {
-        loadedImages.value.add(firstImageIndex)
-        resolve()
-      }
+        loadedImages.value.add(firstImageIndex);
+        resolve();
+      };
       img.onerror = () => {
-        loadedImages.value.add(firstImageIndex) // Count as loaded anyway
-        resolve()
-      }
-    })
+        loadedImages.value.add(firstImageIndex); // Count as loaded anyway
+        resolve();
+      };
+    });
 
-    imageLoadPromises.push(promise)
-    preloadedImages.value.push(img)
+    imageLoadPromises.push(promise);
+    preloadedImages.value.push(img);
   }
 
   // Wait for at least the first image to load
-  await Promise.race(imageLoadPromises)
+  await Promise.race(imageLoadPromises);
 
   setTimeout(() => {
-    galleryLoaded.value = false
-  }, 500)
+    galleryLoaded.value = false;
+  }, 500);
 
-  showGallery.value = true
-  window.addEventListener("keydown", handleKeyDown)
-})
+  showGallery.value = true;
+  window.addEventListener("keydown", handleKeyDown);
+});
 
 const handleImageLoad = (index: number) => {
-  loadedImages.value.add(index)
-}
+  loadedImages.value.add(index);
+};
 
 const handleImageError = (index: number) => {
-  loadedImages.value.add(index)
-}
+  loadedImages.value.add(index);
+};
 
 const doNext = () => {
-  if (transitionRunning.value) return
-  showSlider("next")
-}
+  if (transitionRunning.value) return;
+  showSlider("next");
+};
 
 const doPrevious = () => {
-  if (transitionRunning.value) return
-  showSlider("prev")
-}
+  if (transitionRunning.value) return;
+  showSlider("prev");
+};
 
-let runTimeOut: any
-let runNextAuto: any = null
+let runTimeOut: ReturnType<typeof setTimeout> | undefined;
+let runNextAuto: ReturnType<typeof setTimeout> | null = null;
 
 function showSlider(type: string) {
-  transitionRunning.value = true
+  transitionRunning.value = true;
 
-  const currentSliderItems = Array.from(sliderGalleryImagesList.value?.children || [])
-  const currentThumbnailItems = Array.from(sliderGalleryThumbnailsList.value?.children || [])
+  const currentSliderItems = Array.from(sliderGalleryImagesList.value?.children || []);
+  const currentThumbnailItems = Array.from(sliderGalleryThumbnailsList.value?.children || []);
 
   if (type === "next") {
     if (currentSliderItems.length) {
-      const firstItem = currentSliderItems[0]
+      const firstItem = currentSliderItems[0];
       if (firstItem) {
-        sliderGalleryImagesList.value?.appendChild(firstItem)
+        sliderGalleryImagesList.value?.appendChild(firstItem);
       }
     }
 
     if (currentThumbnailItems.length) {
-      const firstThumb = currentThumbnailItems[0]
+      const firstThumb = currentThumbnailItems[0];
       if (firstThumb) {
-        sliderGalleryThumbnailsList.value?.appendChild(firstThumb)
+        sliderGalleryThumbnailsList.value?.appendChild(firstThumb);
       }
     }
 
-    sliderGalleryWrapper.value?.classList.add("next")
+    sliderGalleryWrapper.value?.classList.add("next");
   } else {
     if (currentSliderItems.length) {
-      const lastItem = currentSliderItems[currentSliderItems.length - 1]
+      const lastItem = currentSliderItems[currentSliderItems.length - 1];
       if (lastItem) {
-        lastItem.classList.add("prepend-item")
-        sliderGalleryImagesList.value?.prepend(lastItem)
+        lastItem.classList.add("prepend-item");
+        sliderGalleryImagesList.value?.prepend(lastItem);
       }
     }
 
     if (currentThumbnailItems.length) {
-      const lastThumb = currentThumbnailItems[currentThumbnailItems.length - 1]
+      const lastThumb = currentThumbnailItems[currentThumbnailItems.length - 1];
       if (lastThumb) {
-        lastThumb.classList.add("prepend-item")
-        sliderGalleryThumbnailsList.value?.prepend(lastThumb)
+        lastThumb.classList.add("prepend-item");
+        sliderGalleryThumbnailsList.value?.prepend(lastThumb);
       }
     }
 
-    sliderGalleryWrapper.value?.offsetWidth // Force reflow
-    sliderGalleryWrapper.value?.classList.add("prev")
+    void sliderGalleryWrapper.value?.offsetWidth; // Force reflow
+    sliderGalleryWrapper.value?.classList.add("prev");
   }
 
-  clearTimeout(runTimeOut)
+  clearTimeout(runTimeOut);
   runTimeOut = setTimeout(() => {
     if (sliderGalleryWrapper.value) {
-      sliderGalleryWrapper.value.classList.remove("next")
-      sliderGalleryWrapper.value.classList.remove("prev")
+      sliderGalleryWrapper.value.classList.remove("next");
+      sliderGalleryWrapper.value.classList.remove("prev");
 
-      const items = sliderGalleryImagesList.value?.querySelectorAll(".prepend-item")
-      items?.forEach((item) => item.classList.remove("prepend-item"))
+      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"))
+      const thumbs = sliderGalleryThumbnailsList.value?.querySelectorAll(".prepend-item");
+      thumbs?.forEach((thumb) => thumb.classList.remove("prepend-item"));
     }
-    transitionRunning.value = false
-  }, props.animationDuration)
+    transitionRunning.value = false;
+  }, props.animationDuration);
 
   // Reset auto-run timer
-  clearTimeout(runNextAuto)
+  if (runNextAuto) clearTimeout(runNextAuto);
   runNextAuto = setTimeout(() => {
-    if (!props.autoRun || galleryLoaded.value) return
-    doNext()
-  }, props.autoRunInterval)
+    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
+    return;
   }
 
   if (event.key === "ArrowLeft") {
-    doPrevious()
+    doPrevious();
   } else if (event.key === "ArrowRight") {
-    doNext()
+    doNext();
   }
-}
+};
 
 // Initialize auto-run only after loading completes
 watch(galleryLoaded, (previousValue, currentValue) => {
   if (!currentValue && props.autoRun) {
-    clearTimeout(runNextAuto)
+    if (runNextAuto) clearTimeout(runNextAuto);
     runNextAuto = setTimeout(() => {
-      doNext()
-    }, props.autoRunInterval)
+      doNext();
+    }, props.autoRunInterval);
   }
-})
+});
 
 watch(
   () => props.styleClassPassthrough,
   () => {
-    resetElementClasses(props.styleClassPassthrough)
+    resetElementClasses(props.styleClassPassthrough);
   }
-)
+);
 
 onBeforeUnmount(() => {
-  showGallery.value = false
-  clearTimeout(runTimeOut)
-  clearTimeout(runNextAuto)
-  window.removeEventListener("keydown", handleKeyDown)
-})
+  showGallery.value = false;
+  clearTimeout(runTimeOut);
+  if (runNextAuto) clearTimeout(runNextAuto);
+  window.removeEventListener("keydown", handleKeyDown);
+});
 </script>
 
 <style lang="css">
+@layer components {
 .slider-gallery {
   --_animationDuration: v-bind(animationDuration + "ms");
 
@@ -284,7 +285,7 @@ onBeforeUnmount(() => {
     background-color: var(--page-bg);
     align-items: center;
     justify-content: center;
-    color: var(--grayscale-text-body);
+    color: var(--colour-text-default);
     opacity: 1;
     transition:
       display 0.5s,
@@ -319,9 +320,7 @@ onBeforeUnmount(() => {
     /* opacity: 0; */
     /* transition: opacity 0.5s ease-in-out; */
 
-    &.galleryLoaded {
-      /* opacity: 1; */
-    }
+    /* Removed empty ruleset for .galleryLoaded */
   }
 
   .list {
@@ -783,4 +782,5 @@ onBeforeUnmount(() => {
     font-size: 30px;
   }
 }
+}
 </style>

package/app/components/layout-grids/LayoutGridA.vue

@@ -36,6 +36,7 @@ watch(
 </script>
 
 <style lang="css">
+@layer components {
 .layout-grid-a-wrapper {
   container-type: inline-size;
 
@@ -100,4 +101,5 @@ watch(
     }
   }
 }
+}
 </style>

package/app/components/layout-grids/LayoutGridB.vue

@@ -3,7 +3,7 @@
     <section class="top-row">
       <div class="top-row-slot-1">
         <div class="top-row-slot-1-inner">
-          <div v-for="key in topRowSlot1ItemCount" class="panel">
+          <div v-for="key in topRowSlot1ItemCount" :key="key" class="panel">
             <slot :name="`top-row-slot1-${key}-content`"></slot>
           </div>
         </div>
@@ -22,7 +22,7 @@
     </section>
 
     <section class="bottom-row">
-      <div v-for="key in bottomRowItemCount" class="panel">
+      <div v-for="key in bottomRowItemCount" :key="key" class="panel">
         <slot :name="`bottom-row-${key}-content`"></slot>
       </div>
     </section>
@@ -43,19 +43,20 @@ const props = defineProps({
     type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
-})
+});
 
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 watch(
   () => props.styleClassPassthrough,
   () => {
-    resetElementClasses(props.styleClassPassthrough)
+    resetElementClasses(props.styleClassPassthrough);
   }
-)
+);
 </script>
 
 <style lang="css">
+@layer components {
 .layout-grid-b {
   --_border-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
   --_color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
@@ -129,4 +130,5 @@ watch(
     gap: var(--_gap);
   }
 }
+}
 </style>