srcdev-nuxt-components 4.0.1 → 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

@@ -1,44 +1,49 @@
 <template>
-  <section class="carousel-basic" :class="[elementClasses]" ref="carouselWrapperRef">
-
-    <div tabindex="0" class="item-container" ref="carouselContainerRef">
-      <div v-for="(item, index) in carouselDataIds" :key="index" class="item" ref="carouselItems">
-        <slot :name="item"></slot>
+  <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>
-    </div>
+    </LayoutRow>
 
-    <div class="timeline-container">
-      <div v-for="index in itemCount" :key="index" class="timeline-item">
-        <div class="count">Step {{ Math.floor(index + 1) }}</div>
-      </div>
-    </div>
-
-    <div class="controls-container">
-      <div class="markers-container">
-        <ul class="markers-list">
-          <li v-for="index in itemCount" :key="index" class="markers-item">
-            <button @click.prevent="jumpToFrame(index)" class="btn-marker"
-              :class="[{ active: currentIndex  === index - 1}]"><span class="sr-only">Jump to item{{
-                Math.floor(index + 1) }}</span></button>
-          </li>
-        </ul>
+    <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>
-      <div class="buttons-container">
-        <button type="submit" @click.prevent="actionPrevious()" class="btn-action">Prev</button>
-        <button type="submit" @click.prevent="actionNext()" class="btn-action">Next</button>
+    </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>
-    </div>
+    </LayoutRow>
   </section>
 </template>
 
 <script setup lang="ts">
-import type { ICarouselBasic } from "@/types/types.carousel-basic";
-import { useEventListener, useResizeObserver, useSwipe } from "@vueuse/core";
+import { useEventListener, useResizeObserver, useSwipe } from '@vueuse/core';
 
 const props = defineProps({
   carouselDataIds: {
     type: Array as PropType<string[]>,
-    default: () => []
+    default: () => [],
   },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
@@ -46,8 +51,12 @@ const props = defineProps({
   },
   transitionSpeed: {
     type: Number,
-    default: 200
-  }
+    default: 200,
+  },
+  allowCarouselOverflow: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
@@ -55,6 +64,7 @@ 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);
@@ -63,7 +73,7 @@ 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');
 
@@ -74,7 +84,7 @@ const actionPrevious = () => {
 
   offset.value = Math.min(offset.value + 1);
   doAction();
-}
+};
 
 const actionNext = () => {
   if (offset.value <= -1 * (itemCount.value - 1)) {
@@ -83,19 +93,18 @@ const actionNext = () => {
 
   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]) {
@@ -103,33 +112,34 @@ const initialSetup = () => {
   }
 
   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') {
+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();
@@ -138,11 +148,9 @@ useResizeObserver(carouselWrapperRef, async () => {
 onMounted(() => {
   initialSetup();
 });
-
 </script>
 
 <style lang="css">
-
 .carousel-basic {
   --_item-gap: 10px;
 
@@ -150,6 +158,18 @@ onMounted(() => {
   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);
@@ -184,6 +204,10 @@ onMounted(() => {
     overflow-x: hidden;
     position: relative;
 
+    &.allow-overflow {
+      overflow-x: initial;
+    }
+
     .item {
       display: flex;
       flex: 0 0 100%;
@@ -199,7 +223,6 @@ onMounted(() => {
     justify-content: flex-end;
 
     .markers-container {
-
       .markers-list {
         display: flex;
         flex-direction: row;
@@ -209,7 +232,6 @@ onMounted(() => {
         padding: unset;
 
         .markers-item {
-
           .btn-marker {
             border: none;
             outline: none;

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.1",
+  "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,12 +27,12 @@
   "devDependencies": {
     "@iconify-json/akar-icons": "1.2.2",
     "@iconify-json/bitcoin-icons": "1.2.2",
-    "@nuxt/eslint": "1.5.2",
     "@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.6",
     "release-it": "18.1.2",