feat: integrate useWheel composable for mouse wheel navigation in Carousel

Author: ismail9k

src/components/Carousel/Carousel.ts

@@ -17,7 +17,7 @@ import {
 } from 'vue'
 
 import { ARIA as ARIAComponent } from '@/components/ARIA'
-import { useDragging, useHover } from '@/composables'
+import { useDragging, useHover, useWheel } from '@/composables'
 import {
   CarouselConfig,
   createSlideRegistry,
@@ -366,50 +366,6 @@ export const Carousel = defineComponent({
       document.removeEventListener('keydown', handleArrowKeys)
     }
 
-    const handleScroll = throttle((event: Event): void => {
-      if (!config.mouseScroll || isSliding.value) {
-        return
-      }
-
-      // Prevent default scrolling behavior when wheel navigation is enabled
-      event.preventDefault()
-
-      const wheelEvent = event as WheelEvent
-
-      // Add sensitivity threshold to prevent small movements from triggering navigation
-      const threshold = config.mouseScrollThreshold ?? 30 // Default to 30 if undefined
-
-      // Determine scroll direction
-      const deltaY = Math.abs(wheelEvent.deltaY) > threshold ? wheelEvent.deltaY : 0
-      const deltaX = Math.abs(wheelEvent.deltaX) > threshold ? wheelEvent.deltaX : 0
-
-      // If neither delta exceeds the threshold, don't navigate
-      if (deltaY === 0 && deltaX === 0) {
-        return
-      }
-
-      const isScrollingDown = deltaY > 0
-      const isScrollingRight = deltaX > 0
-
-      // Determine direction based on carousel orientation and scroll direction
-      if (
-        (isVertical.value && isScrollingDown) ||
-        (!isVertical.value && isScrollingRight)
-      ) {
-        if (isReversed.value) {
-          prev()
-        } else {
-          next()
-        }
-      } else {
-        if (isReversed.value) {
-          next()
-        } else {
-          prev()
-        }
-      }
-    }, 150)
-
     /**
      * Autoplay
      */
@@ -444,6 +400,15 @@ export const Carousel = defineComponent({
      */
     const isSliding = ref(false)
 
+    const { handleScroll } = useWheel({
+      isVertical: isVertical.value,
+      isReversed: isReversed.value,
+      isSliding: isSliding.value,
+      config,
+      next,
+      prev,
+    })
+
     const onDrag = ({ deltaX, deltaY }: { deltaX: number; deltaY: number }) => {
       const draggedSlides = getDraggedSlidesCount({
         isVertical: isVertical.value,
@@ -882,7 +847,7 @@ export const Carousel = defineComponent({
           style: { transform: trackTransform.value },
           onMousedownCapture: config.mouseDrag ? handleDragStart : null,
           onTouchstartPassiveCapture: config.touchDrag ? handleDragStart : null,
-          onWheelPassive: config.mouseScroll ? handleScroll : null,
+          onWheel: config.mouseScroll ? handleScroll : null,
         },
         output
       )

src/composables/index.ts

@@ -1,2 +1,3 @@
 export * from './useDragging'
 export * from './useHover'
+export * from './useWheel'

src/composables/useWheel.ts

@@ -0,0 +1,75 @@
+import { ComputedRef, Ref, computed } from 'vue'
+
+import { CarouselConfig } from '@/shared'
+import { throttle } from '@/utils'
+
+interface UseWheelOptions {
+  isVertical: boolean | ComputedRef<boolean>
+  isReversed: boolean | ComputedRef<boolean>
+  isSliding: boolean | Ref<boolean>
+  config: CarouselConfig
+  next: (skipTransition?: boolean) => void
+  prev: (skipTransition?: boolean) => void
+}
+
+export function useWheel(options: UseWheelOptions) {
+  const { isVertical, isReversed, isSliding, config, next, prev } = options
+
+  // Create computed values to handle both reactive and non-reactive inputs
+  const vertical = computed(() => {
+    return typeof isVertical === 'boolean' ? isVertical : isVertical.value
+  })
+
+  const reversed = computed(() => {
+    return typeof isReversed === 'boolean' ? isReversed : isReversed.value
+  })
+
+  const sliding = computed(() => {
+    return typeof isSliding === 'boolean' ? isSliding : isSliding.value
+  })
+
+  const handleScroll = throttle((event: Event): void => {
+    if (!config.mouseScroll || sliding.value) {
+      return
+    }
+
+    // Prevent default scrolling behavior when wheel navigation is enabled
+    event.preventDefault()
+
+    const wheelEvent = event as WheelEvent
+
+    // Add sensitivity threshold to prevent small movements from triggering navigation
+    const threshold = config.mouseScrollThreshold as number // Default to 30 if undefined
+
+    // Determine scroll direction
+    const deltaY = Math.abs(wheelEvent.deltaY) > threshold ? wheelEvent.deltaY : 0
+    const deltaX = Math.abs(wheelEvent.deltaX) > threshold ? wheelEvent.deltaX : 0
+
+    // If neither delta exceeds the threshold, don't navigate
+    if (deltaY === 0 && deltaX === 0) {
+      return
+    }
+
+    const isScrollingDown = deltaY > 0
+    const isScrollingRight = deltaX > 0
+
+    // Determine direction based on carousel orientation and scroll direction
+    if ((vertical.value && isScrollingDown) || (!vertical.value && isScrollingRight)) {
+      if (reversed.value) {
+        prev()
+      } else {
+        next()
+      }
+    } else {
+      if (reversed.value) {
+        next()
+      } else {
+        prev()
+      }
+    }
+  }, 16)
+
+  return {
+    handleScroll,
+  }
+}