feat: add useHover composable for hover state management in Carousel

Author: ismail9k

src/components/Carousel/Carousel.ts

@@ -17,6 +17,7 @@ import {
 } from 'vue'
 
 import { ARIA as ARIAComponent } from '@/components/ARIA'
+import { useDragging, useHover } from '@/composables'
 import {
   CarouselConfig,
   createSlideRegistry,
@@ -49,8 +50,6 @@ import {
 } from './Carousel.types'
 import { carouselProps } from './carouselProps'
 
-import { useDragging } from '@/composables'
-
 export const Carousel = defineComponent({
   name: 'VueCarousel',
   props: carouselProps,
@@ -333,14 +332,7 @@ export const Carousel = defineComponent({
     /**
      * Carousel Event listeners
      */
-    const isHover = ref(false)
-
-    const handleMouseEnter = (): void => {
-      isHover.value = true
-    }
-    const handleMouseLeave = (): void => {
-      isHover.value = false
-    }
+    const { isHover, handleMouseEnter, handleMouseLeave } = useHover()
 
     const handleArrowKeys = throttle((event: KeyboardEvent): void => {
       if (event.ctrlKey) return

src/composables/index.ts

@@ -0,0 +1,2 @@
+export * from './useDragging'
+export * from './useHover'

src/composables/useHover.ts

@@ -0,0 +1,19 @@
+import { ref } from 'vue'
+
+export function useHover() {
+  const isHover = ref(false)
+
+  const handleMouseEnter = (): void => {
+    isHover.value = true
+  }
+
+  const handleMouseLeave = (): void => {
+    isHover.value = false
+  }
+
+  return {
+    isHover,
+    handleMouseEnter,
+    handleMouseLeave,
+  }
+}