feat: update Carousel drag options to support DragConfig for mouse and touch dragging

Author: ismail9k

docs/config.md

@@ -17,14 +17,14 @@
 | `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` \| `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 }`|
+| `mouseDrag`                | `boolean` \| `DragConfig`                   | true                             | Enables/disables mouse drag navigation. See [Drag Options](#drag-options) for configuration details.   |
 | `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.                                |
 | `preventExcessiveDragging` | `boolean`                                   | false                            | Limits dragging behavior at carousel boundaries for better UX. <Badge text="0.13.0" />                 |
 | `slideEffect`              | 'slide', 'fade'                             | 'slide'                          | Determines the transition effect between slides.                                                       |
 | `snapAlign`                | 'start', 'end', 'center-odd', 'center-even' | 'center'                         | Determines how slides are aligned within the viewport.                                                 |
-| `touchDrag`                | `boolean`                                   | true                             | Enables/disables touch navigation on touch-enabled devices.                                            |
+| `touchDrag`                | `boolean` \| `DragConfig`                   | true                             | Enables/disables touch navigation on touch-enabled devices. See [Drag Options](#drag-options) for configuration details. |
 | `transition`               | `number`                                    | 300                              | Duration of the slide transition animation in milliseconds.                                            |
 | `wrapAround`               | `boolean`                                   | false                            | When true, creates an infinite loop effect by connecting the last slide to the first.                  |
 
@@ -34,6 +34,27 @@
 
 > **Drag Prevention**: The `preventExcessiveDragging` option is automatically disabled when `wrapAround` is enabled, as boundary restrictions aren't needed in infinite loop mode.
 
+## Drag Options
+
+Both `mouseDrag` and `touchDrag` properties accept either a boolean value or a `DragConfig` object with the following properties:
+
+| Property    | Type     | Default | Description                                                                                |
+|-------------|----------|---------|--------------------------------------------------------------------------------------------|
+| `threshold` | `number` | 0.3     | Controls the drag distance required to trigger a slide transition, as a fraction of slide width. Higher values require more dragging to trigger a slide change. |
+
+### Example
+
+```vue
+<template>
+  <Carousel 
+    :mouseDrag="{ threshold: 0.5 }" 
+    :touchDrag="{ threshold: 0.7 }"
+  >
+    <!-- Slides -->
+  </Carousel>
+</template>
+```
+
 ## Slots
 
 ### Slides/Default

src/components/Carousel/Carousel.ts

@@ -416,7 +416,11 @@ export const Carousel = defineComponent({
         dragged: { x: deltaX, y: deltaY },
         effectiveSlideSize: effectiveSlideSize.value,
         threshold:
-          typeof config.mouseDrag === 'object' ? (config.mouseDrag?.threshold ?? 0) : 0,
+          typeof config.mouseDrag === 'object'
+            ? (config.mouseDrag?.threshold ?? 0.3)
+            : typeof config.touchDrag === 'object'
+              ? (config.touchDrag?.threshold ?? 0.3)
+              : 0.3,
       })
 
       activeSlideIndex.value = config.wrapAround

src/components/Carousel/carouselProps.ts

@@ -17,6 +17,7 @@ import type {
   NormalizedDir,
   SlideEffect,
   SnapAlign,
+  DragConfig,
 } from '@/shared'
 
 export const carouselProps = {
@@ -105,7 +106,7 @@ export const carouselProps = {
   // toggle mouse dragging
   mouseDrag: {
     default: DEFAULT_CONFIG.mouseDrag,
-    type: [Boolean, Object] as PropType<boolean | { threshold?: number }>,
+    type: [Boolean, Object] as PropType<boolean | DragConfig>,
   },
   // toggle mouse wheel scrolling
   mouseScroll: {
@@ -150,7 +151,7 @@ export const carouselProps = {
   // toggle touch dragging
   touchDrag: {
     default: DEFAULT_CONFIG.touchDrag,
-    type: Boolean,
+    type: [Boolean, Object] as PropType<boolean | DragConfig>,
   },
   // sliding transition time in ms
   transition: {

src/shared/types.ts

@@ -28,6 +28,10 @@ export type SlideEffect = (typeof SLIDE_EFFECTS)[number]
 
 export type SnapAlign = (typeof SNAP_ALIGN_OPTIONS)[number]
 
+export type DragConfig = {
+  threshold?: number
+}
+
 export type CarouselConfig = {
   autoplay?: number
   breakpointMode?: BreakpointMode
@@ -42,14 +46,14 @@ export type CarouselConfig = {
   itemsToScroll: number
   itemsToShow: number | 'auto'
   modelValue?: number
-  mouseDrag?: boolean | { threshold?: number }
+  mouseDrag?: boolean | DragConfig
   mouseScroll?: boolean
   mouseScrollThreshold?: number
   pauseAutoplayOnHover?: boolean
   preventExcessiveDragging: boolean
   slideEffect: SlideEffect
   snapAlign: SnapAlign
-  touchDrag?: boolean
+  touchDrag?: boolean | DragConfig
   transition?: number
   wrapAround?: boolean
 }