feat: enhance mouse drag functionality in Carousel with threshold option

Author: ismail9k

docs/config.md

@@ -17,8 +17,7 @@
 | `itemsToScroll`            | `number`                                    | 1                                | Number of slides to move when navigating. Useful for creating slide groups.                            |
 | `itemsToShow`              | `number`  \| 'auto'                         | 1                                | Number of slides visible simultaneously. Use 'auto' for variable width slides.                         |
 | `modelValue`               | `number`                                    | 0                                | Controls the active slide index. Can be used with v-model for two-way binding.                         |
-| `mouseDrag`                | `boolean`                                   | true                             | Enables/disables mouse drag navigation.                                                                |
-| `mouseDragThreshold`       | `number`                                    | 0.3                              | Define a threshold for the drag distance required to trigger a slide transition.                       |
+| `mouseDrag`                | `boolean` \| `object`                       | true                             | Enables/disables mouse drag navigation. When passed as an object, can contain a `threshold` property to control the drag distance required to trigger a slide transition. E.g. `{ threshold: 0.5 }`|
 | `mouseScroll`              | `boolean`                                   | false                            | Enables/disables mouse wheel scrolling for carousel navigation.                                        |
 | `mouseScrollThreshold`     | `number`                                    | 10                               | Controls the sensitivity threshold for mouse scrolling. Higher values require more scrolling.          |
 | `pauseAutoplayOnHover`     | `boolean`                                   | false                            | When true, autoplay pauses while the mouse cursor is over the carousel.                                |

src/components/Carousel/Carousel.ts

@@ -415,7 +415,8 @@ export const Carousel = defineComponent({
         isReversed: isReversed.value,
         dragged: { x: deltaX, y: deltaY },
         effectiveSlideSize: effectiveSlideSize.value,
-        threshold: config.mouseDragThreshold as number,
+        threshold:
+          typeof config.mouseDrag === 'object' ? (config.mouseDrag?.threshold ?? 0) : 0,
       })
 
       activeSlideIndex.value = config.wrapAround

src/components/Carousel/carouselProps.ts

@@ -105,12 +105,7 @@ export const carouselProps = {
   // toggle mouse dragging
   mouseDrag: {
     default: DEFAULT_CONFIG.mouseDrag,
-    type: Boolean,
-  },
-  // control the threshold to trigger slide change with mouse drag
-  mouseDragThreshold: {
-    default: DEFAULT_CONFIG.mouseDragThreshold,
-    type: Number,
+    type: [Boolean, Object] as PropType<boolean | { threshold?: number }>,
   },
   // toggle mouse wheel scrolling
   mouseScroll: {

src/shared/constants.ts

@@ -59,7 +59,6 @@ export const DEFAULT_CONFIG: CarouselConfig = {
   itemsToShow: 1,
   modelValue: 0,
   mouseDrag: true,
-  mouseDragThreshold: 0.3,
   mouseScroll: false,
   mouseScrollThreshold: 10,
   pauseAutoplayOnHover: false,

src/shared/types.ts

@@ -42,8 +42,7 @@ export type CarouselConfig = {
   itemsToScroll: number
   itemsToShow: number | 'auto'
   modelValue?: number
-  mouseDrag?: boolean
-  mouseDragThreshold?: number
+  mouseDrag?: boolean | { threshold?: number }
   mouseScroll?: boolean
   mouseScrollThreshold?: number
   pauseAutoplayOnHover?: boolean