srcdev-nuxt-components 9.1.49 → 9.1.50

package/app/components/carousels/CarouselInfinite.vue

@@ -11,7 +11,7 @@
       Item {{ currentVisibleIndex + 1 }} of {{ itemCount }}
     </div>
 
-    <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+    <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
       <div
         tabindex="0"
         class="item-container"
@@ -30,9 +30,9 @@
           <slot :name="item"></slot>
         </div>
       </div>
-    </LayoutRow>
+    </PageRow>
 
-    <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+    <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
       <div tabindex="0" class="controls-container" ref="controlsContainerRef">
         <div class="markers-container">
           <ul class="markers-list">
@@ -55,12 +55,12 @@
           </button>
         </div>
       </div>
-    </LayoutRow>
+    </PageRow>
   </section>
 </template>
 
 <script setup lang="ts">
-import { useEventListener, useResizeObserver, useSwipe } from "@vueuse/core"
+import { useEventListener, useResizeObserver, useSwipe } from "@vueuse/core";
 
 const props = defineProps({
   carouselDataIds: {
@@ -83,276 +83,276 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-})
+});
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
-const carouselWrapperRef = ref<HTMLDivElement | null>(null)
-const carouselContainerRef = ref<HTMLDivElement | null>(null)
-const carouselItemsRef = useTemplateRef<HTMLDivElement[]>("carouselItems")
-const controlsContainerRef = ref<HTMLDivElement | null>(null)
-const carouselInitComplete = ref(false)
+const carouselWrapperRef = ref<HTMLDivElement | null>(null);
+const carouselContainerRef = ref<HTMLDivElement | null>(null);
+const carouselItemsRef = useTemplateRef<HTMLDivElement[]>("carouselItems");
+const controlsContainerRef = ref<HTMLDivElement | null>(null);
+const carouselInitComplete = ref(false);
 
-const currentIndex = ref(0)
-const itemCount = ref(props.carouselDataIds.length)
-const transitionSpeedStr = props.transitionSpeed + "ms"
+const currentIndex = ref(0);
+const itemCount = ref(props.carouselDataIds.length);
+const transitionSpeedStr = props.transitionSpeed + "ms";
 
-const itemWidth = ref(0)
+const itemWidth = ref(0);
 const itemWidthOffsetStr = computed(() => {
-  return `-${itemWidth.value}px`
-})
+  return `-${itemWidth.value}px`;
+});
 
-const currentVisibleIndex = ref(0)
+const currentVisibleIndex = ref(0);
 
 const carouselContainerRefLeftPosition = computed(() => {
-  return carouselContainerRef.value ? carouselContainerRef.value.getBoundingClientRect().left : 0
-})
+  return carouselContainerRef.value ? carouselContainerRef.value.getBoundingClientRect().left : 0;
+});
 const fullScreenOffsset = computed(() => {
-  return `-${Math.floor(carouselContainerRefLeftPosition.value)}px`
-})
+  return `-${Math.floor(carouselContainerRefLeftPosition.value)}px`;
+});
 console.log(
   "INIT: carouselContainerRefLeftPosition:",
   carouselContainerRefLeftPosition.value,
   "fullScreenOffsset:",
   fullScreenOffsset.value
-)
+);
 
 const updateItemOrder = (index: number, order: number, zIndex: number = 2) => {
   if (carouselItemsRef?.value && carouselItemsRef.value[index]) {
-    carouselItemsRef.value[index].style.order = order.toString()
-    carouselItemsRef.value[index].style.zIndex = zIndex.toString()
+    carouselItemsRef.value[index].style.order = order.toString();
+    carouselItemsRef.value[index].style.zIndex = zIndex.toString();
   }
-}
+};
 
 const reorderItems = (direction: "next" | "previous" | "jump" = "jump") => {
-  console.log(`Reordering items in direction: ${direction}`)
-  if (!carouselItemsRef?.value || !carouselInitComplete.value) return
+  console.log(`Reordering items in direction: ${direction}`);
+  if (!carouselItemsRef?.value || !carouselInitComplete.value) return;
 
   // Capture positions before reordering
-  const beforeRects = carouselItemsRef.value.map((item) => item.getBoundingClientRect())
+  const beforeRects = carouselItemsRef.value.map((item) => item.getBoundingClientRect());
 
   // Apply new order and z-index based on direction
-  let order = 1
+  let order = 1;
 
   // For items from currentVisibleIndex to end
   for (let i = currentVisibleIndex.value; i < itemCount.value; i++) {
-    let zIndex = 2 // default normal z-index
+    let zIndex = 2; // default normal z-index
 
     if (i === currentVisibleIndex.value) {
       // The item becoming visible
       if (direction === "previous") {
         // When going previous, the item moving to first position should go behind
-        zIndex = 1
+        zIndex = 1;
       } else {
         // Normal case - visible item gets highest z-index
-        zIndex = 3
+        zIndex = 3;
       }
     }
 
-    updateItemOrder(i, order++, zIndex)
+    updateItemOrder(i, order++, zIndex);
   }
 
   // For items from 0 to currentVisibleIndex
   for (let i = 0; i < currentVisibleIndex.value; i++) {
     // Items that wrap around get lower z-index to slide behind
-    const zIndex = 1
-    updateItemOrder(i, order++, zIndex)
+    const zIndex = 1;
+    updateItemOrder(i, order++, zIndex);
   }
-}
+};
 
 const actionPrevious = () => {
-  if (!carouselInitComplete.value || !carouselItemsRef?.value) return
+  if (!carouselInitComplete.value || !carouselItemsRef?.value) return;
 
   if (props.returnToStart && currentVisibleIndex.value === 0) {
-    currentVisibleIndex.value = itemCount.value - 1
+    currentVisibleIndex.value = itemCount.value - 1;
   } else {
-    currentVisibleIndex.value = currentVisibleIndex.value === 0 ? itemCount.value - 1 : currentVisibleIndex.value - 1
+    currentVisibleIndex.value = currentVisibleIndex.value === 0 ? itemCount.value - 1 : currentVisibleIndex.value - 1;
   }
 
-  reorderItems("previous")
-  currentIndex.value = currentVisibleIndex.value
-}
+  reorderItems("previous");
+  currentIndex.value = currentVisibleIndex.value;
+};
 
 const actionNext = () => {
-  if (!carouselInitComplete.value || !carouselItemsRef?.value) return
+  if (!carouselInitComplete.value || !carouselItemsRef?.value) return;
 
   if (props.returnToStart && currentVisibleIndex.value === itemCount.value - 1) {
-    currentVisibleIndex.value = 0
+    currentVisibleIndex.value = 0;
   } else {
-    currentVisibleIndex.value = currentVisibleIndex.value === itemCount.value - 1 ? 0 : currentVisibleIndex.value + 1
+    currentVisibleIndex.value = currentVisibleIndex.value === itemCount.value - 1 ? 0 : currentVisibleIndex.value + 1;
   }
 
-  reorderItems("next")
-  currentIndex.value = currentVisibleIndex.value
-}
+  reorderItems("next");
+  currentIndex.value = currentVisibleIndex.value;
+};
 
 const jumpToFrame = (index: number) => {
   if (index >= 0 && index < itemCount.value) {
-    currentVisibleIndex.value = index
-    reorderItems("jump")
-    currentIndex.value = currentVisibleIndex.value
+    currentVisibleIndex.value = index;
+    reorderItems("jump");
+    currentIndex.value = currentVisibleIndex.value;
   }
-}
+};
 
 const checkAndMoveLastItem = () => {
   if (props.allowCarouselOverflow) {
-    const itemsFit = Math.floor(carouselContainerRefLeftPosition.value / itemWidth.value + 1)
-    jumpToFrame(itemCount.value - 1)
+    const itemsFit = Math.floor(carouselContainerRefLeftPosition.value / itemWidth.value + 1);
+    jumpToFrame(itemCount.value - 1);
   }
-}
+};
 
 const initialSetup = () => {
   if (carouselItemsRef?.value && carouselItemsRef.value.length > 0 && carouselItemsRef.value[0]) {
-    itemWidth.value = carouselItemsRef.value[0].offsetWidth
+    itemWidth.value = carouselItemsRef.value[0].offsetWidth;
 
     // Set initial order and z-index for all items
     carouselItemsRef.value.forEach((item, index) => {
-      item.style.order = String(index + 1)
+      item.style.order = String(index + 1);
       // First item gets higher z-index, others get normal z-index
-      item.style.zIndex = index === 0 ? "3" : "2"
-    })
+      item.style.zIndex = index === 0 ? "3" : "2";
+    });
   }
 
-  carouselInitComplete.value = true
-  checkAndMoveLastItem()
-}
+  carouselInitComplete.value = true;
+  checkAndMoveLastItem();
+};
 
 const { direction } = useSwipe(carouselContainerRef, {
   passive: false,
   onSwipeEnd() {
     if (direction.value === "left") {
-      actionNext()
+      actionNext();
     } else if (direction.value === "right") {
-      actionPrevious()
+      actionPrevious();
     }
   },
-})
+});
 
 useEventListener(carouselContainerRef, "keydown", (event: KeyboardEvent) => {
   if (event.key === "ArrowLeft") {
-    actionPrevious()
+    actionPrevious();
   } else if (event.key === "ArrowRight") {
-    actionNext()
+    actionNext();
   }
-})
+});
 
 useEventListener(controlsContainerRef, "keydown", (event: KeyboardEvent) => {
   if (event.key === "ArrowLeft") {
-    actionPrevious()
+    actionPrevious();
   } else if (event.key === "ArrowRight") {
-    actionNext()
+    actionNext();
   }
-})
+});
 
 useResizeObserver(carouselWrapperRef, async () => {
-  initialSetup()
-})
+  initialSetup();
+});
 
 onMounted(() => {
-  initialSetup()
+  initialSetup();
   console.log(
     "onMounted: carouselContainerRefLeftPosition:",
     carouselContainerRefLeftPosition.value,
     "fullScreenOffsset:",
     fullScreenOffsset.value
-  )
-})
+  );
+});
 </script>
 
 <style lang="css">
 @layer components {
-.carousel-infinite {
-  --_carousel-item-track-gap: 10px;
-
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 10px;
-
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-
-  .item-container {
-    display: flex;
-    gap: var(--_carousel-item-track-gap);
-    overflow-x: hidden;
-    position: relative;
-
-    &.allow-overflow {
-      overflow-x: initial;
-
-      .item {
-        translate: calc(v-bind(itemWidthOffsetStr) - var(--_carousel-item-track-gap)) 0;
-      }
+  .carousel-infinite {
+    --_carousel-item-track-gap: 10px;
+
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 10px;
+
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
     }
 
-    .item {
+    .item-container {
       display: flex;
-      flex: 0 0 100%;
-      max-inline-size: 800px;
+      gap: var(--_carousel-item-track-gap);
+      overflow-x: hidden;
       position: relative;
-    }
-  }
 
-  .controls-container {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
+      &.allow-overflow {
+        overflow-x: initial;
 
-    .markers-container {
-      .markers-list {
-        display: flex;
-        flex-direction: row;
-        gap: 10px;
-        list-style-type: none;
-        margin: unset;
-        padding: unset;
-
-        .markers-item {
-          .btn-marker {
-            border: none;
-            outline: none;
-            box-shadow: none;
-            cursor: pointer;
-            transition: background-color v-bind(transitionSpeedStr) linear;
-
-            &.active {
-              background-color: red;
-            }
-          }
+        .item {
+          translate: calc(v-bind(itemWidthOffsetStr) - var(--_carousel-item-track-gap)) 0;
         }
       }
+
+      .item {
+        display: flex;
+        flex: 0 0 100%;
+        max-inline-size: 800px;
+        position: relative;
+      }
     }
 
-    .buttons-container {
+    .controls-container {
       display: flex;
       align-items: center;
-      justify-content: end;
-      gap: 20px;
+      justify-content: flex-end;
+
+      .markers-container {
+        .markers-list {
+          display: flex;
+          flex-direction: row;
+          gap: 10px;
+          list-style-type: none;
+          margin: unset;
+          padding: unset;
+
+          .markers-item {
+            .btn-marker {
+              border: none;
+              outline: none;
+              box-shadow: none;
+              cursor: pointer;
+              transition: background-color v-bind(transitionSpeedStr) linear;
+
+              &.active {
+                background-color: red;
+              }
+            }
+          }
+        }
+      }
 
-      .btn-action {
+      .buttons-container {
         display: flex;
         align-items: center;
-        justify-content: center;
+        justify-content: end;
+        gap: 20px;
 
-        cursor: pointer;
-        height: fit-content;
+        .btn-action {
+          display: flex;
+          align-items: center;
+          justify-content: center;
 
-        .arrows-icon {
-          width: 24px;
-          height: 24px;
+          cursor: pointer;
+          height: fit-content;
+
+          .arrows-icon {
+            width: 24px;
+            height: 24px;
+          }
         }
       }
     }
   }
 }
-}
 </style>