srcdev-nuxt-components 4.0.0 → 4.0.2

package/assets/styles/utils/_page.css

@@ -9,6 +9,7 @@ html {
 
   font-size: 62.5%;
   scrollbar-gutter: stable;
+  overflow-x: hidden;
 }
 body {
   color: var(--grayscale-text-body);
@@ -18,6 +19,8 @@ body {
 }
 
 body {
+  overflow-x: hidden;
+
   &.lock {
     overflow: hidden;
   }

package/components/carousel-basic/CarouselBasic.vue

@@ -0,0 +1,263 @@
+<template>
+  <section class="carousel-basic" :class="[elementClasses]" ref="carouselWrapperRef" role="region" aria-label="Image carousel">
+    <!-- Screen reader announcement for current item -->
+    <div aria-live="polite" aria-atomic="true" class="sr-only">Item {{ currentIndex + 1 }} of {{ itemCount }}</div>
+
+    <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+      <div tabindex="0" class="item-container" :class="{ 'allow-overflow': allowCarouselOverflow }" ref="carouselContainerRef" role="group" aria-label="Carousel items">
+        <div v-for="(item, index) in carouselDataIds" :key="index" class="item" ref="carouselItems" :aria-current="currentIndex === index ? 'true' : 'false'">
+          <slot :name="item"></slot>
+        </div>
+      </div>
+    </LayoutRow>
+
+    <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+      <div class="timeline-container">
+        <div v-for="index in itemCount" :key="index" class="timeline-item">
+          <div class="count">Step {{ index }}</div>
+        </div>
+      </div>
+    </LayoutRow>
+
+    <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+      <div tabindex="0" class="controls-container" ref="controlsContainerRef">
+        <div class="markers-container">
+          <ul class="markers-list">
+            <li v-for="index in itemCount" :key="index" class="markers-item">
+              <button @click.prevent="jumpToFrame(index - 1)" class="btn-marker" :class="[{ active: currentIndex === index - 1 }]" :aria-label="`Jump to item ${Math.floor(index + 1)}`"></button>
+            </li>
+          </ul>
+        </div>
+        <div class="buttons-container">
+          <button type="button" @click.prevent="actionPrevious()" class="btn-action" aria-label="Go to previous item">Prev</button>
+          <button type="button" @click.prevent="actionNext()" class="btn-action" aria-label="Go to next item">Next</button>
+        </div>
+      </div>
+    </LayoutRow>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { useEventListener, useResizeObserver, useSwipe } from '@vueuse/core';
+
+const props = defineProps({
+  carouselDataIds: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  transitionSpeed: {
+    type: Number,
+    default: 200,
+  },
+  allowCarouselOverflow: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+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 currentIndex = ref(0);
+const itemCount = ref(props.carouselDataIds.length);
+const offset = ref(0);
+const transitionSpeedStr = props.transitionSpeed + 'ms';
+const itemTransform = computed(() => {
+  return `translateX(calc(${offset.value} * (${itemWidth.value} + var(--_item-gap))))`;
+});
+
+const itemWidth = ref('0px');
+
+const actionPrevious = () => {
+  if (offset.value >= 0) {
+    return;
+  }
+
+  offset.value = Math.min(offset.value + 1);
+  doAction();
+};
+
+const actionNext = () => {
+  if (offset.value <= -1 * (itemCount.value - 1)) {
+    return;
+  }
+
+  offset.value = Math.min(offset.value - 1);
+  doAction();
+};
+
+const doAction = () => {
+  currentIndex.value = Math.abs(offset.value);
+};
+
+const jumpToFrame = (index: number) => {
+  if (index >= 0 && index < itemCount.value) {
+    offset.value = -index;
+    doAction();
+  }
+};
+
+const initialSetup = () => {
+  if (carouselItemsRef?.value && carouselItemsRef.value.length > 0 && carouselItemsRef.value[0]) {
+    itemWidth.value = carouselItemsRef.value[0].offsetWidth + 'px';
+  }
+
+  carouselInitComplete.value = true;
+};
+
+const { direction } = useSwipe(carouselContainerRef, {
+  passive: false,
+  onSwipeEnd() {
+    if (direction.value === 'left') {
+      actionNext();
+    } else if (direction.value === 'right') {
+      actionPrevious();
+    }
+  },
+});
+
+useEventListener(carouselContainerRef, 'keydown', (event: KeyboardEvent) => {
+  if (event.key === 'ArrowLeft') {
+    actionPrevious();
+  } else if (event.key === 'ArrowRight') {
+    actionNext();
+  }
+});
+
+useEventListener(controlsContainerRef, 'keydown', (event: KeyboardEvent) => {
+  if (event.key === 'ArrowLeft') {
+    actionPrevious();
+  } else if (event.key === 'ArrowRight') {
+    actionNext();
+  }
+});
+
+useResizeObserver(carouselWrapperRef, async () => {
+  initialSetup();
+});
+
+onMounted(() => {
+  initialSetup();
+});
+</script>
+
+<style lang="css">
+.carousel-basic {
+  --_item-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;
+  }
+
+  .timeline-container {
+    display: flex;
+    gap: var(--_item-gap);
+    overflow-x: hidden;
+
+    .timeline-item {
+      display: flex;
+      flex: 0 0 100%;
+      max-inline-size: 800px;
+      align-items: center;
+      transform: v-bind(itemTransform);
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        height: 2px;
+        background-color: #fff;
+        left: 70px;
+        right: 0;
+      }
+
+      .count {
+        width: fit-content;
+      }
+    }
+  }
+
+  .item-container {
+    display: flex;
+    gap: var(--_item-gap);
+    overflow-x: hidden;
+    position: relative;
+
+    &.allow-overflow {
+      overflow-x: initial;
+    }
+
+    .item {
+      display: flex;
+      flex: 0 0 100%;
+      max-inline-size: 800px;
+      transition: transform v-bind(transitionSpeedStr) ease;
+      transform: v-bind(itemTransform);
+    }
+  }
+
+  .controls-container {
+    display: flex;
+    align-items: center;
+    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;
+            }
+          }
+        }
+      }
+    }
+
+    .buttons-container {
+      display: flex;
+      align-items: center;
+      justify-content: end;
+      gap: 20px;
+
+      .btn-action {
+        cursor: pointer;
+        height: fit-content;
+      }
+    }
+  }
+}
+</style>

package/components/carousel-basic/CarouselFlip.vue

@@ -0,0 +1,378 @@
+<template>
+  <section class="carousel-flip" :class="[elementClasses, { 'controls-inside': controlsInside }]">
+
+    <div class="item-container" ref="carouselContent">
+      <div v-for="(item, index) in data?.items" :key="index" class="item" ref="carouselItems">
+        <h3>{{ index }}</h3>
+        <p>{{ item.alt }}</p>
+      </div>
+
+    </div>
+
+    <div class="controls-container">
+      <div class="buttons-container">
+        <button type="submit" @click.prevent="actionPrevious()" class="btn-action"
+          :disabled="transitionRunning">Prev</button>
+        <button type="submit" @click.prevent="actionNext()" class="btn-action"
+          :disabled="transitionRunning">Next</button>
+      </div>
+      <div class="thumbnail-container">
+        <ul class="thumbnail-list">
+          <li v-for="item, index in data?.items" class="thumbnail-item" ref="thumbnailItems">
+            <div class="thumbnail-item_inner">{{ index }}</div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { ICarouselBasic } from "@/types/types.carousel-basic";
+import { useElementSize, useEventListener, useResizeObserver } from "@vueuse/core";
+const props = defineProps({
+  propsData: {
+    type: Object as PropType<ICarouselBasic>,
+    default: <ICarouselBasic>{
+      items: [],
+      total: 0,
+      skip: 0,
+      limit: 10
+    }
+  },
+  data: {
+    type: Object,
+    default: <ICarouselBasic>{}
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  transitionSpeed: {
+    type: Number,
+    default: 1000
+  },
+  controlsInside: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const carouselContentRef = useTemplateRef<HTMLDivElement>('carouselContent');
+const carouselItems = useTemplateRef<HTMLDivElement[]>('carouselItems');
+const thumbnailItems = useTemplateRef<HTMLLIElement[]>('thumbnailItems');
+const carouselInitComplete = ref(false);
+
+const currentIndex = ref(1);
+const itemCount = ref(props.data.items.length);
+const offset = ref(1);
+const previousOffset = ref(1);
+const transitionSpeedStr = props.transitionSpeed + 'ms';
+const transitionRunning = ref(false);
+
+const actionPrevious = () => {
+  // if (transitionRunning.value) return;
+
+  offset.value = -1;
+  onTransitionEnd();
+}
+
+const actionNext = () => {
+  // if (transitionRunning.value) return;
+
+  offset.value = 1;
+  onTransitionEnd();
+}
+
+const updateOrder = (index: number, order: number) => {
+  if (carouselItems.value !== null && thumbnailItems.value !== null) {
+    carouselItems.value[index - 1].style.order = order.toString();
+    thumbnailItems.value[index - 1].style.order = order.toString();
+  }
+};
+
+const initialSetup = () => {
+  const items = carouselItems.value;
+  const thumbs = thumbnailItems.value;
+
+  items?.forEach((item, index) => {
+    item.style.zIndex = index === 0 || index === itemCount.value - 1 ? '1' : '2';
+    item.style.order = String(index + 1);
+    // item.setAttribute('data-order', String(index + 1));
+  });
+  thumbs?.forEach((thumb, index) => {
+    thumb.style.zIndex = index === 0 || index === itemCount.value - 1 ? '1' : '2';
+    thumb.style.order = String(index + 1);
+    // thumb.setAttribute('data-order', String(index + 1));
+  });
+  carouselInitComplete.value = true;
+}
+
+
+const onTransitionEnd = () => {
+
+  // transitionRunning.value = true;
+  const items = carouselItems.value;
+  const thumbs = thumbnailItems.value;
+
+  if (!items || !Array.isArray(items)) return;
+  if (!thumbs || !Array.isArray(thumbs)) return;
+
+  // 1. Capture initial positions for both main items and thumbnails
+  const firstRects = items.map(el => el.getBoundingClientRect());
+  const firstThumbRects = thumbs.map(el => el.getBoundingClientRect());
+
+  // 2. Update orders
+  let firstVisualElementIndex = currentIndex.value; // Track which element should be visually first
+
+  if (carouselInitComplete.value) {
+    if (offset.value === 1) {
+      const localOffset = offset.value === previousOffset.value ? offset.value : 2; // Ensure we have a valid offset
+      currentIndex.value = currentIndex.value === itemCount.value ? 1 : currentIndex.value + localOffset;
+      firstVisualElementIndex = currentIndex.value;
+      let order = 1;
+
+      for (let i = currentIndex.value; i <= itemCount.value; i++) updateOrder(i, order++);
+      for (let i = 1; i < currentIndex.value; i++) updateOrder(i, order++);
+
+    } else {
+      const localOffset = offset.value === previousOffset.value ? offset.value : -2; // Ensure we have a valid offset
+      currentIndex.value = currentIndex.value === 1 ? itemCount.value : currentIndex.value + localOffset;
+      firstVisualElementIndex = currentIndex.value;
+      let order = itemCount.value;
+
+      for (let i = currentIndex.value; i >= 1; i--) updateOrder(i, order--);
+      for (let i = itemCount.value; i > currentIndex.value; i--) updateOrder(i, order--);
+    }
+    previousOffset.value = offset.value; // Store the previous offset for next transition
+
+    // setTimeout(() => {
+    //   transitionRunning.value = false;
+    // }, props.transitionSpeed);
+  }
+
+  // 3. Next tick: capture new positions & animate both main items and thumbnails
+  requestAnimationFrame(() => {
+    const lastRects = items.map(el => el.getBoundingClientRect());
+    const lastThumbRects = thumbs.map(el => el.getBoundingClientRect());
+
+    // Animate main carousel items
+    items.forEach((el, i) => {
+      const dx = firstRects[i].left - lastRects[i].left;
+      const dy = firstRects[i].top - lastRects[i].top;
+
+      el.style.transition = 'none';
+      el.style.transform = `translate(${dx}px, ${dy}px)`;
+
+      requestAnimationFrame(() => {
+        el.style.transition = `transform ${transitionSpeedStr} ease`;
+        el.style.transform = '';
+
+        // Set z-index after the transition actually completes
+        const elementIndex = i + 1; // Convert to 1-based index to match your logic
+        const isFirstVisual = elementIndex === firstVisualElementIndex;
+
+        // Listen for transition end to update z-index
+        const handleTransitionEnd = (event: TransitionEvent) => {
+          if (event.propertyName === 'transform') {
+            el.style.zIndex = isFirstVisual ? '1' : '2';
+            el.removeEventListener('transitionend', handleTransitionEnd);
+          }
+        };
+
+        el.addEventListener('transitionend', handleTransitionEnd);
+      });
+    });
+
+    // Animate thumbnail items
+    thumbs.forEach((thumb, i) => {
+      const dx = firstThumbRects[i].left - lastThumbRects[i].left;
+      const dy = firstThumbRects[i].top - lastThumbRects[i].top;
+
+      thumb.style.transition = 'none';
+      thumb.style.transform = `translate(${dx}px, ${dy}px)`;
+
+      requestAnimationFrame(() => {
+        thumb.style.transition = `transform ${transitionSpeedStr} ease`;
+        thumb.style.transform = '';
+
+        // Set z-index after the transition actually completes
+        const thumbIndex = i + 1; // Convert to 1-based index
+        const isActiveThumbnail = thumbIndex === firstVisualElementIndex;
+
+        // Listen for transition end to update z-index
+        const handleThumbTransitionEnd = (event: TransitionEvent) => {
+          if (event.propertyName === 'transform') {
+            thumb.style.zIndex = isActiveThumbnail ? '1' : '2';
+            thumb.removeEventListener('transitionend', handleThumbTransitionEnd);
+          }
+        };
+
+        thumb.addEventListener('transitionend', handleThumbTransitionEnd);
+      });
+    });
+  });
+
+  carouselInitComplete.value = true;
+};
+
+onMounted(() => {
+  initialSetup();
+});
+
+</script>
+
+<style lang="css">
+.carousel-flip {
+
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+
+  &.controls-inside {
+    grid-template-areas: "carousel-content";
+    isolation: isolate;
+
+    .item-container {
+      grid-area: carousel-content;
+      z-index: 1;
+    }
+
+    .controls-container {
+      grid-area: carousel-content;
+      z-index: 2;
+      height: fit-content;
+      align-self: flex-end;
+    }
+  }
+
+  .item-container {
+    display: flex;
+    gap: 10px;
+    overflow-x: auto;
+    padding-block: 10px;
+    padding-inline: 10px;
+    outline: 1px solid light-dark(#00000090, #f00ff090);
+
+    /* scroll-snap-type: x mandatory; */
+
+    /* isolation: isolate; */
+    position: relative;
+
+    .item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      /* transition: transform v-bind(transitionSpeedStr) ease; */
+      /* For FLIP smoothness */
+
+      aspect-ratio: 4 / 3;
+
+      min-inline-size: 600px;
+      color: light-dar(#aaa, #333);
+      padding-block: 10px;
+      padding-inline: 10px;
+      border-radius: 4px;
+      outline: 1px solid light-dark(#00000090, #f00ff090);
+
+      background-color: light-dark(#f00, #00f);
+
+      /* scroll-snap-align: none center; */
+
+      &:nth-child(odd) {
+        background-color: light-dark(#00f, #f00);
+      }
+    }
+  }
+
+
+  .controls-container {
+
+    display: flex;
+    gap: 20px;
+
+
+
+    .buttons-container {
+      display: flex;
+      flex-grow: 1;
+      align-items: center;
+      justify-content: end;
+      gap: 20px;
+
+
+      .btn-action {
+        padding: 10px 20px;
+        border-radius: 4px;
+        background-color: light-dark(#000, #fff);
+        color: light-dark(#fff, #000);
+        border: none;
+        cursor: pointer;
+        height: fit-content;
+
+        transition: background-color 0.3s ease, color 0.3s ease;
+
+        &:hover {
+          background-color: light-dark(#0009, #fff9);
+        }
+
+        &:active {
+          background-color: light-dark(#0009, #fff9);
+        }
+
+        &:disabled {
+          background-color: light-dark(#0003, #fff3);
+          cursor: not-allowed;
+        }
+      }
+    }
+
+    .thumbnail-container {
+      padding-block: 10px;
+      padding-inline: 10px;
+      outline: 1px solid light-dark(#00000090, #f00ff090);
+      max-inline-size: 40%;
+
+      .thumbnail-list {
+        display: flex;
+        gap: 10px;
+        list-style-type: none;
+        padding-block: 8px;
+        padding-inline: 8px;
+        margin-block: 0;
+        margin-inline: 0;
+
+        outline: 1px solid light-dark(#00000090, #f00ff090);
+        overflow-x: auto;
+
+        .thumbnail-item {
+
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          aspect-ratio: 3 / 4;
+          min-inline-size: 120px;
+          outline: 1px solid light-dark(#f00, #00f);
+          border-radius: 4px;
+
+          background-color: light-dark(#f00, #00f);
+
+          &:nth-child(odd) {
+            background-color: light-dark(#00f, #f00);
+          }
+
+
+          .thumbnail-item_inner {}
+
+        }
+      }
+    }
+  }
+
+}
+</style>

package/nuxt.config.ts

@@ -2,7 +2,7 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   css: ['modern-normalize', './assets/styles/main.css'],
-  modules: ['@nuxt/icon', '@nuxt/image', '@nuxt/eslint'],
+  modules: ['@nuxt/icon', '@nuxt/image'],
   app: {
     head: {
       htmlAttrs: {
@@ -34,7 +34,4 @@ export default defineNuxtConfig({
   typescript: {
     includeWorkspace: true,
   },
-  eslint: {
-    // Add any custom options here
-  },
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "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.3.0",
-    "@nuxt/icon": "1.12.0",
+    "@nuxt/eslint-config": "1.5.2",
+    "@nuxt/icon": "1.15.0",
     "@nuxt/image": "1.10.0",
+    "@oddbird/css-anchor-positioning": "0.6.1",
+    "@vueuse/core": "13.5.0",
+    "eslint": "9.31.0",
     "happy-dom": "16.8.1",
-    "nuxt": "3.17.5",
+    "nuxt": "3.17.6",
     "release-it": "18.1.2",
     "typescript": "5.8.3"
   },
   "dependencies": {
-    "@oddbird/css-anchor-positioning": "0.6.0",
-    "@vueuse/core": "13.1.0",
     "focus-trap-vue": "4.0.3",
     "modern-normalize": "3.0.1"
   },

package/types/types.carousel-basic.ts

@@ -0,0 +1,19 @@
+export interface CarouselBasicItem {
+  id: number | string;
+  url: string;
+  alt: string;
+}
+
+export interface CarouselModifiedItem {
+  id: number | string;
+  url: string;
+  alt: string;
+  order: number;
+}
+
+export interface ICarouselBasic {
+  items: CarouselBasicItem[] | CarouselModifiedItem[];
+  total: number;
+  skip: number;
+  limit: number;
+}