feat: add wheel event support to Carousel and enhance drag functionality with new useDrag composable

Author: ismail9k

playground/App.vue

@@ -211,6 +211,7 @@ const events = [
   'slide-end',
   'loop',
   'drag',
+  'wheel',
   'slide-registered',
   'slide-unregistered',
 ]

src/components/Carousel/Carousel.ts

@@ -17,7 +17,7 @@ import {
 } from 'vue'
 
 import { ARIA as ARIAComponent } from '@/components/ARIA'
-import { useDragging, useHover, useWheel } from '@/composables'
+import { DragEventData, useDrag, useHover, useWheel, WheelEventData } from '@/composables'
 import {
   CarouselConfig,
   createSlideRegistry,
@@ -64,6 +64,7 @@ export const Carousel = defineComponent({
     'slide-start',
     'slide-unregistered',
     'update:modelValue',
+    'wheel',
   ],
   setup(props: CarouselConfig, { slots, emit, expose }: SetupContext) {
     const slideRegistry = createSlideRegistry(emit)
@@ -401,13 +402,9 @@ export const Carousel = defineComponent({
      */
     const isSliding = ref(false)
 
-    const onDrag = ({
-      delta,
-      isTouch,
-    }: {
-      delta: { x: number; y: number }
-      isTouch: boolean
-    }) => {
+    const onDrag = ({ deltaX, deltaY, isTouch }: DragEventData) => {
+      emit('drag', { deltaX, deltaY })
+
       const threshold = isTouch
         ? typeof config.touchDrag === 'object'
           ? (config.touchDrag?.threshold ?? DEFAULT_DRAG_THRESHOLD)
@@ -419,7 +416,7 @@ export const Carousel = defineComponent({
       const draggedSlides = getDraggedSlidesCount({
         isVertical: isVertical.value,
         isReversed: isReversed.value,
-        dragged: delta,
+        dragged: { x: deltaX, y: deltaY },
         effectiveSlideSize: effectiveSlideSize.value,
         threshold,
       })
@@ -431,25 +428,41 @@ export const Carousel = defineComponent({
             max: maxSlideIndex.value,
             min: minSlideIndex.value,
           })
-
-      emit('drag', delta)
     }
 
     const onDragEnd = () => slideTo(activeSlideIndex.value)
 
-    const { dragged, isDragging, handleDragStart } = useDragging({
+    const { dragged, isDragging, handleDragStart } = useDrag({
       isSliding,
       onDrag,
       onDragEnd,
     })
 
+    const onWheel = ({ deltaX, deltaY, isScrollingForward }: WheelEventData) => {
+      emit('wheel', { deltaX, deltaY })
+
+      if (isScrollingForward) {
+        // Scrolling down/right
+        if (isReversed.value) {
+          prev()
+        } else {
+          next()
+        }
+      } else {
+        // Scrolling up/left
+        if (isReversed.value) {
+          next()
+        } else {
+          prev()
+        }
+      }
+    }
+
     const { handleScroll } = useWheel({
       isVertical,
-      isReversed,
       isSliding,
       config,
-      next,
-      prev,
+      onWheel,
     })
 
     function slideTo(slideIndex: number, skipTransition = false): void {

src/composables/index.ts

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

src/composables/useDragging.ts renamed to src/composables/useDrag.ts

@@ -2,14 +2,19 @@ import { ref, reactive, computed, Ref } from 'vue'
 
 import { throttle } from '@/utils'
 
-export interface UseDraggingOptions {
+export type DragEventData = {
+  deltaX: number
+  deltaY: number
+  isTouch: boolean
+}
+export interface UseDragOptions {
   isSliding: boolean | Ref<boolean>
-  onDrag?: (data: { delta: { x: number; y: number }; isTouch: boolean }) => void
+  onDrag?: ({ deltaX, deltaY, isTouch }: DragEventData) => void
   onDragStart?: () => void
   onDragEnd?: () => void
 }
 
-export function useDragging(options: UseDraggingOptions) {
+export function useDrag(options: UseDragOptions) {
   let isTouch = false
   const startPosition = { x: 0, y: 0 }
   const dragged = reactive({ x: 0, y: 0 })
@@ -46,13 +51,13 @@ export function useDragging(options: UseDraggingOptions) {
 
     const moveEvent = isTouch ? 'touchmove' : 'mousemove'
     const endEvent = isTouch ? 'touchend' : 'mouseup'
-    document.addEventListener(moveEvent, handleDragging, { passive: false })
+    document.addEventListener(moveEvent, handleDrag, { passive: false })
     document.addEventListener(endEvent, handleDragEnd, { passive: true })
 
     options.onDragStart?.()
   }
 
-  const handleDragging = throttle((event: TouchEvent | MouseEvent): void => {
+  const handleDrag = throttle((event: TouchEvent | MouseEvent): void => {
     isDragging.value = true
 
     const currentX = isTouch
@@ -65,11 +70,11 @@ export function useDragging(options: UseDraggingOptions) {
     dragged.x = currentX - startPosition.x
     dragged.y = currentY - startPosition.y
 
-    options.onDrag?.({ delta: { x: dragged.x, y: dragged.y }, isTouch })
+    options.onDrag?.({ deltaX: dragged.x, deltaY: dragged.y, isTouch })
   })
 
   const handleDragEnd = (): void => {
-    handleDragging.cancel()
+    handleDrag.cancel()
 
     if (!isTouch) {
       const preventClick = (e: MouseEvent) => {
@@ -87,7 +92,7 @@ export function useDragging(options: UseDraggingOptions) {
 
     const moveEvent = isTouch ? 'touchmove' : 'mousemove'
     const endEvent = isTouch ? 'touchend' : 'mouseup'
-    document.removeEventListener(moveEvent, handleDragging)
+    document.removeEventListener(moveEvent, handleDrag)
     document.removeEventListener(endEvent, handleDragEnd)
   }
 

src/composables/useWheel.ts

@@ -3,49 +3,47 @@ import { ComputedRef, Ref, computed } from 'vue'
 import { CarouselConfig } from '@/shared'
 import { DEFAULT_MOUSE_WHEEL_THRESHOLD } from '@/shared/constants'
 
-interface UseWheelOptions {
+export type WheelEventData = {
+  deltaX: number
+  deltaY: number
+  isScrollingForward: boolean
+}
+
+export type UseWheelOptions = {
   isVertical: boolean | ComputedRef<boolean>
-  isReversed: boolean | ComputedRef<boolean>
   isSliding: boolean | Ref<boolean>
   config: CarouselConfig
-  next: (skipTransition?: boolean) => void
-  prev: (skipTransition?: boolean) => void
+  onWheel?: (data: WheelEventData) => void
 }
 
 export function useWheel(options: UseWheelOptions) {
-  const { isVertical, isReversed, isSliding, config, next, prev } = options
+  const { isVertical, isSliding, config } = 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 = (event: Event): void => {
+  const handleScroll = (event: WheelEvent): void => {
     event.preventDefault()
 
     if (!config.mouseWheel || sliding.value) {
       return
     }
 
-    const wheelEvent = event as WheelEvent
-
     // Add sensitivity threshold to prevent small movements from triggering navigation
     const threshold =
       typeof config.mouseWheel === 'object'
         ? (config.mouseWheel.threshold ?? DEFAULT_MOUSE_WHEEL_THRESHOLD)
         : DEFAULT_MOUSE_WHEEL_THRESHOLD
 
     // Determine scroll direction
-    const deltaY = Math.abs(wheelEvent.deltaY) > threshold ? wheelEvent.deltaY : 0
-    const deltaX = Math.abs(wheelEvent.deltaX) > threshold ? wheelEvent.deltaX : 0
+    const deltaY = Math.abs(event.deltaY) > threshold ? event.deltaY : 0
+    const deltaX = Math.abs(event.deltaX) > threshold ? event.deltaX : 0
 
     // If neither delta exceeds the threshold, don't navigate
     if (deltaY === 0 && deltaX === 0) {
@@ -62,22 +60,7 @@ export function useWheel(options: UseWheelOptions) {
     // Positive delta means scrolling down/right
     const isScrollingForward = effectiveDelta > 0
 
-    // Apply navigation based on scroll direction and carousel configuration
-    if (isScrollingForward) {
-      // Scrolling down/right
-      if (reversed.value) {
-        prev()
-      } else {
-        next()
-      }
-    } else {
-      // Scrolling up/left
-      if (reversed.value) {
-        next()
-      } else {
-        prev()
-      }
-    }
+    options.onWheel?.({ deltaX, deltaY, isScrollingForward })
   }
 
   return {