refactor: remove throttleTime option from mouseWheel configuration and simplify wheel event handling in Carousel

Author: ismail9k

docs/config.md

@@ -61,14 +61,14 @@ The `mouseWheel` property accepts either a boolean value or a `WheelConfig` obje
 | Property      | Type     | Default | Description                                                                                |
 |---------------|----------|---------|--------------------------------------------------------------------------------------------|
 | `threshold`   | `number` | 10      | Controls the wheel movement threshold required to trigger a slide transition. Higher values require more scrolling to trigger a slide change. |
-| `throttleTime` | `number` | 100     | Controls how quickly wheel events are processed in milliseconds. Lower values make scrolling more responsive but may cause performance issues. By default, uses either this value or 1/3 of the transition time, whichever is smaller. |
+
 
 ### Example
 
 ```vue
 <template>
   <Carousel 
-    :mouseWheel="{ threshold: 20, throttleTime: 50 }"
+    :mouseWheel="{ threshold: 20 }"
   >
     <!-- Slides -->
   </Carousel>

src/composables/useWheel.ts

@@ -1,11 +1,7 @@
 import { ComputedRef, Ref, computed } from 'vue'
 
 import { CarouselConfig } from '@/shared'
-import {
-  DEFAULT_MOUSE_WHEEL_THRESHOLD,
-  DEFAULT_WHEEL_THROTTLE_TIME,
-} from '@/shared/constants'
-import { throttle } from '@/utils'
+import { DEFAULT_MOUSE_WHEEL_THRESHOLD } from '@/shared/constants'
 
 interface UseWheelOptions {
   isVertical: boolean | ComputedRef<boolean>
@@ -32,28 +28,13 @@ export function useWheel(options: UseWheelOptions) {
     return typeof isSliding === 'boolean' ? isSliding : isSliding.value
   })
 
-  // Use a shorter throttle duration for wheel events to improve responsiveness
-  // Use either a custom wheel throttle time or 1/3 of the transition time
-  const wheelThrottleTime = computed(() => {
-    // If mouseWheel is an object with a throttleTime property, use that
-    if (typeof config.mouseWheel === 'object' && config.mouseWheel.throttleTime) {
-      return config.mouseWheel.throttleTime
-    }
-    // Otherwise use a fraction of the transition time for better responsiveness
-    return Math.min(
-      DEFAULT_WHEEL_THROTTLE_TIME,
-      config.transition ? Math.floor(config.transition / 3) : DEFAULT_WHEEL_THROTTLE_TIME
-    )
-  })
+  const handleScroll = (event: Event): void => {
+    event.preventDefault()
 
-  const handleScroll = throttle((event: Event): void => {
     if (!config.mouseWheel || 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
@@ -97,7 +78,7 @@ export function useWheel(options: UseWheelOptions) {
         prev()
       }
     }
-  }, wheelThrottleTime.value) // Use the computed throttle time
+  }
 
   return {
     handleScroll,

src/shared/constants.ts

@@ -46,7 +46,6 @@ export const SNAP_ALIGN_OPTIONS = [
 ] as const
 
 export const DEFAULT_MOUSE_WHEEL_THRESHOLD = 10
-export const DEFAULT_WHEEL_THROTTLE_TIME = 100
 export const DEFAULT_DRAG_THRESHOLD = 0.3
 
 export const DEFAULT_CONFIG: CarouselConfig = {