refactor: streamline Carousel and useDragging by consolidating isSliding handling and improving drag event logic

Author: ismail9k

src/components/Carousel/Carousel.ts

@@ -401,15 +401,6 @@ export const Carousel = defineComponent({
      */
     const isSliding = ref(false)
 
-    const { handleScroll } = useWheel({
-      isVertical: isVertical.value,
-      isReversed: isReversed.value,
-      isSliding: isSliding.value,
-      config,
-      next,
-      prev,
-    })
-
     const onDrag = ({
       delta,
       isTouch,
@@ -443,15 +434,24 @@ export const Carousel = defineComponent({
 
       emit('drag', delta)
     }
-    const onDragEnd = () => {
-      slideTo(activeSlideIndex.value)
-    }
+
+    const onDragEnd = () => slideTo(activeSlideIndex.value)
+
     const { dragged, isDragging, handleDragStart } = useDragging({
-      isSliding: isSliding.value,
+      isSliding,
       onDrag,
       onDragEnd,
     })
 
+    const { handleScroll } = useWheel({
+      isVertical,
+      isReversed,
+      isSliding,
+      config,
+      next,
+      prev,
+    })
+
     function slideTo(slideIndex: number, skipTransition = false): void {
       if (!skipTransition && isSliding.value) {
         return

src/composables/useDragging.ts

@@ -1,24 +1,30 @@
-import { ref, reactive } from 'vue'
+import { ref, reactive, computed, Ref } from 'vue'
 
 import { throttle } from '@/utils'
 
 export interface UseDraggingOptions {
+  isSliding: boolean | Ref<boolean>
   onDrag?: (data: { delta: { x: number; y: number }; isTouch: boolean }) => void
   onDragStart?: () => void
   onDragEnd?: () => void
-  isSliding?: boolean
 }
 
-export function useDragging(options: UseDraggingOptions = {}) {
+export function useDragging(options: UseDraggingOptions) {
   let isTouch = false
   const startPosition = { x: 0, y: 0 }
   const dragged = reactive({ x: 0, y: 0 })
   const isDragging = ref(false)
 
+  const { isSliding } = options
+
+  const sliding = computed(() => {
+    return typeof isSliding === 'boolean' ? isSliding : isSliding.value
+  })
+
   const handleDragStart = (event: MouseEvent | TouchEvent): void => {
     // Prevent drag initiation on input elements or if already sliding
     const targetTagName = (event.target as HTMLElement).tagName
-    if (['INPUT', 'TEXTAREA', 'SELECT'].includes(targetTagName) || options.isSliding) {
+    if (['INPUT', 'TEXTAREA', 'SELECT'].includes(targetTagName) || sliding.value) {
       return
     }