refactor: update drag event structure in Carousel and useDragging to include isTouch flag

Author: ismail9k

src/components/Carousel/Carousel.ts

@@ -409,18 +409,27 @@ export const Carousel = defineComponent({
       prev,
     })
 
-    const onDrag = ({ deltaX, deltaY }: { deltaX: number; deltaY: number }) => {
+    const onDrag = ({
+      delta,
+      isTouch,
+    }: {
+      delta: { x: number; y: number }
+      isTouch: boolean
+    }) => {
+      const threshold = isTouch
+        ? typeof config.touchDrag === 'object'
+          ? (config.touchDrag?.threshold ?? 0.3)
+          : 0.3
+        : typeof config.mouseDrag === 'object'
+          ? (config.mouseDrag?.threshold ?? 0.3)
+          : 0.3
+
       const draggedSlides = getDraggedSlidesCount({
         isVertical: isVertical.value,
         isReversed: isReversed.value,
-        dragged: { x: deltaX, y: deltaY },
+        dragged: delta,
         effectiveSlideSize: effectiveSlideSize.value,
-        threshold:
-          typeof config.mouseDrag === 'object'
-            ? (config.mouseDrag?.threshold ?? 0.3)
-            : typeof config.touchDrag === 'object'
-              ? (config.touchDrag?.threshold ?? 0.3)
-              : 0.3,
+        threshold,
       })
 
       activeSlideIndex.value = config.wrapAround
@@ -431,7 +440,7 @@ export const Carousel = defineComponent({
             min: minSlideIndex.value,
           })
 
-      emit('drag', { deltaX, deltaY })
+      emit('drag', delta)
     }
     const onDragEnd = () => {
       slideTo(activeSlideIndex.value)

src/composables/useDragging.ts

@@ -3,7 +3,7 @@ import { ref, reactive } from 'vue'
 import { throttle } from '@/utils'
 
 export interface UseDraggingOptions {
-  onDrag?: (data: { deltaX: number; deltaY: number }) => void
+  onDrag?: (data: { delta: { x: number; y: number }; isTouch: boolean }) => void
   onDragStart?: () => void
   onDragEnd?: () => void
   isSliding?: boolean
@@ -59,7 +59,7 @@ export function useDragging(options: UseDraggingOptions = {}) {
     dragged.x = currentX - startPosition.x
     dragged.y = currentY - startPosition.y
 
-    options.onDrag?.({ deltaX: dragged.x, deltaY: dragged.y })
+    options.onDrag?.({ delta: { x: dragged.x, y: dragged.y }, isTouch })
   })
 
   const handleDragEnd = (): void => {