refactor: reorganize imports and enhance Carousel component types for better clarity and maintainability

Author: ismail9k

src/components/Carousel/Carousel.css

@@ -4,11 +4,11 @@
 }
 
 .carousel {
+  height: var(--vc-carousel-height);
+  overscroll-behavior: none;
   position: relative;
   touch-action: pan-y;
-  overscroll-behavior: none;
   z-index: 1;
-  height: var(--vc-carousel-height);
 }
 
 .carousel.is-dragging {
@@ -17,78 +17,68 @@
 
 .carousel__track {
   display: flex;
+  gap: var(--vc-slide-gap);
+  height: 100%;
   list-style: none;
-  padding: 0 !important;
   margin: 0 !important;
-  width: 100%;
-  height: 100%;
+  padding: 0 !important;
   position: relative;
   transition: transform ease-out;
   transition-duration: var(--vc-transition-duration);
-  gap: var(--vc-slide-gap);
+  width: 100%;
 }
 
 .carousel__viewport {
+  height: 100%;
   overflow: hidden;
   width: 100%;
-  height: 100%;
 }
 
 .carousel__sr-only {
-  position: absolute;
-  width: 1px;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
   height: 1px;
-  padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
+  padding: 0;
+  position: absolute;
+  width: 1px;
 }
 
-.carousel.is-ttb {
-  .carousel__track {
-    flex-direction: column;
-  }
+.carousel.is-ttb .carousel__track {
+  flex-direction: column;
 }
 
-.carousel.is-btt {
-  .carousel__track {
-    flex-direction: column-reverse;
-  }
+.carousel.is-btt .carousel__track {
+  flex-direction: column-reverse;
 }
 
-.carousel.is-vertical {
-  .carousel__slide--clone:first-child {
-    margin-block-start: var(--vc-cloned-offset);
-  }
+.carousel.is-vertical .carousel__slide--clone:first-child {
+  margin-block-start: var(--vc-cloned-offset);
 }
 
-.carousel:not(.is-vertical) {
-  .carousel__slide--clone:first-child {
-    margin-inline-start: var(--vc-cloned-offset);
-  }
+.carousel:not(.is-vertical) .carousel__slide--clone:first-child {
+  margin-inline-start: var(--vc-cloned-offset);
 }
 
-.carousel.is-effect-fade {
-  .carousel__track {
-    transition: none;
-    display: grid;
-    grid-template-columns: 100%;
-    grid-template-rows: 100%;
-  }
+.carousel.is-effect-fade .carousel__track {
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: 100%;
+  transition: none;
+}
 
-  .carousel__slide {
-    opacity: 0;
-    width: 100% !important;
-    height: 100% !important;
-    transition: opacity ease-in-out;
-    transition-duration: var(--vc-transition-duration);
-    grid-area: 1 / 1; /* Make all slides occupy the same grid cell */
-    pointer-events: none; /* Prevent inactive slides from being clickable */
-  }
+.carousel.is-effect-fade .carousel__slide {
+  grid-area: 1 / 1;
+  height: 100% !important;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity ease-in-out;
+  transition-duration: var(--vc-transition-duration);
+  width: 100% !important;
+}
 
-  .carousel__slide--active {
-    opacity: 1;
-    pointer-events: auto; /* Re-enable pointer events for active slide */
-  }
+.carousel.is-effect-fade .carousel__slide--active {
+  opacity: 1;
+  pointer-events: auto;
 }

src/components/Carousel/Carousel.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { expect, it, describe, beforeEach } from 'vitest'
+import { beforeEach, describe, expect, it } from 'vitest'
 
 import { Carousel } from './Carousel'
 

src/components/Carousel/Carousel.ts

@@ -1,42 +1,42 @@
 import {
+  computed,
+  ComputedRef,
+  Ref,
+  SetupContext,
   defineComponent,
-  onMounted,
+  h,
   onBeforeUnmount,
-  ref,
-  reactive,
+  onMounted,
   provide,
-  computed,
-  h,
+  reactive,
+  ref,
+  shallowReactive,
   watch,
-  SetupContext,
-  Ref,
-  ComputedRef,
   watchEffect,
-  shallowReactive,
 } from 'vue'
 
 import { ARIA as ARIAComponent } from '@/components/ARIA'
 import {
   CarouselConfig,
+  createSlideRegistry,
   DEFAULT_CONFIG,
   DIR_MAP,
+  injectCarousel,
   NonNormalizedDir,
   NormalizedDir,
-  injectCarousel,
-  createSlideRegistry,
 } from '@/shared'
 import {
-  except,
-  throttle,
-  getNumberInRange,
-  mapNumberToRange,
+  calculateAverage,
   createCloneSlides,
+  except,
   getDraggedSlidesCount,
-  getSnapAlignOffset,
+  getNumberInRange,
   getScaleMultipliers,
+  getSnapAlignOffset,
+  mapNumberToRange,
   ScaleMultipliers,
+  throttle,
   toCssValue,
-  calculateAverage,
 } from '@/utils'
 
 import {
@@ -52,15 +52,15 @@ export const Carousel = defineComponent({
   name: 'VueCarousel',
   props: carouselProps,
   emits: [
-    'init',
+    'before-init',
     'drag',
-    'slide-start',
+    'init',
     'loop',
-    'update:modelValue',
     'slide-end',
-    'before-init',
     'slide-registered',
+    'slide-start',
     'slide-unregistered',
+    'update:modelValue',
   ],
   setup(props: CarouselConfig, { slots, emit, expose }: SetupContext) {
     const slideRegistry = createSlideRegistry(emit)
@@ -823,45 +823,45 @@ export const Carousel = defineComponent({
     const nav: CarouselNav = { slideTo, next, prev }
 
     const provided: InjectedCarousel = reactive({
+      activeSlide: activeSlideIndex,
       config,
-      slidesCount,
-      viewport,
-      slides,
       currentSlide: currentSlideIndex,
-      activeSlide: activeSlideIndex,
+      isSliding,
+      isVertical,
       maxSlide: maxSlideIndex,
       minSlide: minSlideIndex,
-      visibleRange,
-      slideSize,
-      isVertical,
-      normalizedDir,
       nav,
-      isSliding,
+      normalizedDir,
       slideRegistry,
+      slideSize,
+      slides,
+      slidesCount,
+      viewport,
+      visibleRange,
     })
 
     provide(injectCarousel, provided)
 
     const data = reactive<CarouselData>({
       config,
-      slidesCount,
-      slideSize,
       currentSlide: currentSlideIndex,
       maxSlide: maxSlideIndex,
-      minSlide: minSlideIndex,
       middleSlide: middleSlideIndex,
+      minSlide: minSlideIndex,
+      slideSize,
+      slidesCount,
     })
 
     expose<CarouselExposed>({
-      updateBreakpointsConfig,
-      updateSlidesData,
-      updateSlideSize,
-      restartCarousel,
-      slideTo,
+      data,
+      nav,
       next,
       prev,
-      nav,
-      data,
+      restartCarousel,
+      slideTo,
+      updateBreakpointsConfig,
+      updateSlideSize,
+      updateSlidesData,
     })
 
     return () => {

src/components/Carousel/Carousel.types.ts

@@ -6,50 +6,60 @@ import {
   ShallowReactive,
 } from 'vue'
 
-import { SlideRegistry, CarouselConfig, NormalizedDir } from '@/shared'
+import { CarouselConfig, NormalizedDir, SlideRegistry } from '@/shared'
 
-export interface CarouselNav {
-  slideTo: (index: number) => void
-  next: (skipTransition?: boolean) => void
-  prev: (skipTransition?: boolean) => void
+export type ElRect = {
+  height: number
+  width: number
 }
 
-export type InjectedCarousel = Reactive<{
-  config: CarouselConfig
-  viewport: Ref<Element | null>
-  slides: ShallowReactive<Array<ComponentInternalInstance>>
-  slidesCount: ComputedRef<number>
-  activeSlide: Ref<number>
-  currentSlide: Ref<number>
-  maxSlide: ComputedRef<number>
-  minSlide: ComputedRef<number>
-  visibleRange: ComputedRef<{ min: number; max: number }>
-  slideSize: Ref<number>
-  isVertical: ComputedRef<boolean>
-  normalizedDir: ComputedRef<NormalizedDir>
-  nav: CarouselNav
-  isSliding: Ref<boolean>
-  slideRegistry: SlideRegistry
-}>
+export type Range = {
+  min: number
+  max: number
+}
 
-export interface CarouselData {
+export type CarouselData = {
   config: CarouselConfig
-  slidesCount: Ref<number>
-  slideSize: Ref<number>
   currentSlide: Ref<number>
   maxSlide: Ref<number>
-  minSlide: Ref<number>
   middleSlide: Ref<number>
+  minSlide: Ref<number>
+  slideSize: Ref<number>
+  slidesCount: Ref<number>
 }
 
-export interface CarouselMethods extends CarouselNav {
+export type CarouselExposed = CarouselMethods & {
+  data: Reactive<CarouselData>
+  nav: CarouselNav
+}
+
+export type CarouselMethods = CarouselNav & {
+  restartCarousel: () => void
   updateBreakpointsConfig: () => void
-  updateSlidesData: () => void
   updateSlideSize: () => void
-  restartCarousel: () => void
+  updateSlidesData: () => void
 }
-export interface CarouselExposed extends CarouselMethods {
-  nav: CarouselNav
-  data: Reactive<CarouselData>
+
+export type CarouselNav = {
+  next: (skipTransition?: boolean) => void
+  prev: (skipTransition?: boolean) => void
+  slideTo: (index: number) => void
 }
-export type ElRect = { width: number; height: number }
+
+export type InjectedCarousel = Reactive<{
+  activeSlide: Ref<number>
+  config: CarouselConfig
+  currentSlide: Ref<number>
+  isSliding: Ref<boolean>
+  isVertical: ComputedRef<boolean>
+  maxSlide: ComputedRef<number>
+  minSlide: ComputedRef<number>
+  nav: CarouselNav
+  normalizedDir: ComputedRef<NormalizedDir>
+  slideRegistry: SlideRegistry
+  slideSize: Ref<number>
+  slides: ShallowReactive<Array<ComponentInternalInstance>>
+  slidesCount: ComputedRef<number>
+  viewport: Ref<Element | null>
+  visibleRange: ComputedRef<Range>
+}>