@bagelink/vue 1.6.47 → 1.6.51

package/src/components/Carousel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { nextTick, onMounted, onUnmounted, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 
 const props = defineProps({
 	autoHeight: { type: Boolean, default: false },
@@ -37,23 +37,23 @@ const THRESHOLDS = {
 const GAP_PERCENT = 1
 
 // Template refs and state
-const bglSlider = $ref<HTMLElement | undefined>()
-const isSliderAvailable = $computed(() => !!bglSlider)
+const bglSlider = ref<HTMLElement | undefined>()
+const isSliderAvailable = computed(() => !!bglSlider.value)
 
-let itemCount = $ref(props.items)
-let activeSlideIndex = $ref(props.index)
-let slideCount = $ref(0)
-let yHeight = $ref('auto')
+const itemCount = ref(props.items)
+const activeSlideIndex = ref(props.index)
+const slideCount = ref(0)
+const yHeight = ref('auto')
 
 // Interaction state
-let isDragging = $ref(false)
-let isPressed = $ref(false)
-let startX = $ref(0)
-let startY = $ref(0)
-let translateX = $ref(0)
-let lastX = $ref(0)
-let lastTime = $ref(0)
-let accumulatedDeltaX = $ref(0)
+const isDragging = ref(false)
+const isPressed = ref(false)
+const startX = ref(0)
+const startY = ref(0)
+const translateX = ref(0)
+const lastX = ref(0)
+const lastTime = ref(0)
+const accumulatedDeltaX = ref(0)
 
 let timeout: NodeJS.Timeout | undefined
 let wheelTimeout: NodeJS.Timeout | undefined
@@ -65,19 +65,19 @@ interface VelocitySample {
 	position: number
 }
 
-let velocityTracker = $ref<VelocitySample[]>([])
+const velocityTracker = ref<VelocitySample[]>([])
 const VELOCITY_SAMPLE_DURATION = 100 // ms to track velocity
 
 function getAverageVelocity(): number {
-	if (velocityTracker.length < 2) { return 0 }
+	if (velocityTracker.value.length < 2) { return 0 }
 
 	const now = Date.now()
 	// Only consider samples within our sample duration
-	const recentSamples = velocityTracker.filter((sample: VelocitySample) => now - sample.time < VELOCITY_SAMPLE_DURATION)
+	const recentSamples = velocityTracker.value.filter((sample: VelocitySample) => now - sample.time < VELOCITY_SAMPLE_DURATION)
 
 	if (recentSamples.length < 2) { return 0 }
 
-	const first = recentSamples[0]
+	const [first] = recentSamples
 	const last = recentSamples[recentSamples.length - 1]
 	const timeDelta = last.time - first.time
 
@@ -88,16 +88,16 @@ function getAverageVelocity(): number {
 
 // Transform helpers
 function getCurrentTransform(): number {
-	if (!bglSlider) { return 0 }
-	const { transform } = bglSlider.style
-	const value = transform ? Number.parseInt(transform.replace(/[^-\d.]/g, '')) : 0
+	if (!bglSlider.value) { return 0 }
+	const { transform } = bglSlider.value.style
+	const value = transform ? Number.parseInt(transform.replace(/[^-\d.]/g, ''), 10) : 0
 	return props.rtl ? -value : value
 }
 
 function setTransform(value: number) {
-	if (!bglSlider) { return }
+	if (!bglSlider.value) { return }
 	const rtlValue = props.rtl ? -value : value
-	bglSlider.style.transform = `translateX(${rtlValue}px)`
+	bglSlider.value.style.transform = `translateX(${rtlValue}px)`
 }
 
 function easeInOutQuad(t: number) {
@@ -108,7 +108,7 @@ function animateTransform(start: number, end: number, duration: number) {
 	const startTime = performance.now()
 
 	function animate(currentTime: number) {
-		if (!isSliderAvailable) { return }
+		if (!isSliderAvailable.value) { return }
 		const timeElapsed = currentTime - startTime
 		const progress = Math.min(timeElapsed / duration, 1)
 		const currentTransform = start + (end - start) * easeInOutQuad(progress)
@@ -122,12 +122,12 @@ function animateTransform(start: number, end: number, duration: number) {
 // Navigation
 function goToSlide(index: number, isTouchNav = false) {
 	countSlides()
-	if (!isSliderAvailable || !bglSlider || index < 0 || index >= slideCount) { return }
+	if (!isSliderAvailable.value || !bglSlider.value || index < 0 || index >= slideCount.value) { return }
 
-	const containerWidth = bglSlider.offsetWidth
+	const containerWidth = bglSlider.value.offsetWidth
 	const gapWidth = (containerWidth * GAP_PERCENT) / 100
-	const totalGapWidth = (itemCount - 1) * gapWidth
-	const singleItemWidth = (containerWidth - totalGapWidth) / itemCount
+	const totalGapWidth = (itemCount.value - 1) * gapWidth
+	const singleItemWidth = (containerWidth - totalGapWidth) / itemCount.value
 
 	// Account for all gaps before this slide
 	const gapsBeforeSlide = index * gapWidth
@@ -141,39 +141,39 @@ function goToSlide(index: number, isTouchNav = false) {
 			: ANIMATION_TIMINGS.DESKTOP
 
 	animateTransform(currentTransform, targetTransform, duration)
-	activeSlideIndex = index
+	activeSlideIndex.value = index
 	updateHeight()
 }
 
 function next() {
-	if (!isSliderAvailable) { return }
+	if (!isSliderAvailable.value) { return }
 	countSlides()
 	// In RTL, next and prev are reversed
 	const nextIndex = props.rtl
-		? (activeSlideIndex - 1 + slideCount) % slideCount
-		: (activeSlideIndex + 1) % slideCount
+		? (activeSlideIndex.value - 1 + slideCount.value) % slideCount.value
+		: (activeSlideIndex.value + 1) % slideCount.value
 	goToSlide(nextIndex)
 }
 
 function prev() {
-	if (!isSliderAvailable) { return }
+	if (!isSliderAvailable.value) { return }
 	countSlides()
 	// In RTL, next and prev are reversed
 	const prevIndex = props.rtl
-		? (activeSlideIndex + 1) % slideCount
-		: (activeSlideIndex - 1 + slideCount) % slideCount
+		? (activeSlideIndex.value + 1) % slideCount.value
+		: (activeSlideIndex.value - 1 + slideCount.value) % slideCount.value
 	goToSlide(prevIndex)
 }
 
 // Height management
 function calcHeight() {
-	if (!isSliderAvailable || !bglSlider) { return }
+	if (!isSliderAvailable.value || !bglSlider.value) { return }
 	try {
-		const activeSlide = bglSlider.children[activeSlideIndex]
-		if (!activeSlide) { return }
+		const activeSlide = bglSlider.value.children[activeSlideIndex.value]
+		if (!activeSlide || !(activeSlide instanceof HTMLElement)) { return }
 		const children = Array.from(activeSlide.children) as HTMLElement[]
 		const totalHeight = children.reduce((sum, el) => sum + el.clientHeight, 0)
-		yHeight = `${totalHeight}px`
+		yHeight.value = `${totalHeight}px`
 	} catch (error) {
 		console.error('Error calculating height:', error)
 	}
@@ -186,31 +186,31 @@ function updateHeight() {
 
 // Slide management
 function countSlides() {
-	if (!isSliderAvailable || !bglSlider) { return }
-	slideCount = bglSlider.children.length
+	if (!isSliderAvailable.value || !bglSlider.value) { return }
+	slideCount.value = bglSlider.value.children.length
 }
 
 // Event handlers
 function handleSlideChange() {
-	if (props.index !== activeSlideIndex) {
-		emit('update:index', activeSlideIndex)
+	if (props.index !== activeSlideIndex.value) {
+		emit('update:index', activeSlideIndex.value)
 	}
 }
 
 function handleResize() {
-	if (!isSliderAvailable || !bglSlider) { return }
-	itemCount = window.innerWidth < 600
+	if (!isSliderAvailable.value || !bglSlider.value) { return }
+	itemCount.value = window.innerWidth < 600
 		? 1
 		: window.innerWidth < 991
 			? Math.min(props.items, 2)
 			: props.items
 
-	const containerWidth = bglSlider.offsetWidth
+	const containerWidth = bglSlider.value.offsetWidth
 	const gapWidth = (containerWidth * GAP_PERCENT) / 100
-	const totalGapWidth = (itemCount - 1) * gapWidth
-	const singleItemWidth = (containerWidth - totalGapWidth) / itemCount
-	const gapsBeforeSlide = activeSlideIndex * gapWidth
-	const targetTransform = -(singleItemWidth * activeSlideIndex + gapsBeforeSlide)
+	const totalGapWidth = (itemCount.value - 1) * gapWidth
+	const singleItemWidth = (containerWidth - totalGapWidth) / itemCount.value
+	const gapsBeforeSlide = activeSlideIndex.value * gapWidth
+	const targetTransform = -(singleItemWidth * activeSlideIndex.value + gapsBeforeSlide)
 
 	setTransform(targetTransform)
 	updateHeight()
@@ -222,7 +222,7 @@ function clearAutoplay() {
 
 // Mouse events
 function preventDefaultClick(e: MouseEvent) {
-	if (isDragging) {
+	if (isDragging.value) {
 		e.preventDefault()
 		e.stopPropagation()
 	}
@@ -230,9 +230,9 @@ function preventDefaultClick(e: MouseEvent) {
 
 async function disableDrag() {
 	await nextTick()
-	if (!isSliderAvailable || !bglSlider) { return }
+	if (!isSliderAvailable.value || !bglSlider.value) { return }
 
-	const elements = Array.from(bglSlider.querySelectorAll('img, a')) as HTMLElement[]
+	const elements = Array.from(bglSlider.value.querySelectorAll('img, a')) as HTMLElement[]
 	elements.forEach((el) => {
 		el.setAttribute('draggable', 'false')
 		// Add click prevention to interactive elements
@@ -240,7 +240,7 @@ async function disableDrag() {
 		el.addEventListener('click', preventDefaultClick, true)
 	})
 
-	const slides = Array.from(bglSlider.children)
+	const slides = Array.from(bglSlider.value.children)
 	slides.forEach((slide) => {
 		const element = slide as HTMLElement
 		element.setAttribute('draggable', 'false')
@@ -252,34 +252,34 @@ async function disableDrag() {
 
 function startDrag(e: MouseEvent) {
 	e.stopPropagation()
-	if (e.button !== 0 || !props.freeDrag || !isSliderAvailable) { return }
+	if (e.button !== 0 || !props.freeDrag || !isSliderAvailable.value) { return }
 
 	clearAutoplay()
-	startX = e.pageX
-	translateX = getCurrentTransform()
-	isPressed = true
-	isDragging = false // Reset dragging state on start
+	startX.value = e.pageX
+	translateX.value = getCurrentTransform()
+	isPressed.value = true
+	isDragging.value = false // Reset dragging state on start
 
 	document.addEventListener('mousemove', onDrag)
 	document.addEventListener('mouseup', endDrag)
 }
 
 function onDrag(e: MouseEvent) {
-	if (!isSliderAvailable || !bglSlider || !isPressed) { return }
+	if (!isSliderAvailable.value || !bglSlider.value || !isPressed.value) { return }
 
 	const x = e.pageX
-	const distance = x - startX
+	const distance = x - startX.value
 
-	if (Math.abs(distance) > THRESHOLDS.DRAG) { isDragging = true }
-	if (isDragging) {
-		const newTranslate = translateX + (props.rtl ? -distance : distance)
+	if (Math.abs(distance) > THRESHOLDS.DRAG) { isDragging.value = true }
+	if (isDragging.value) {
+		const newTranslate = translateX.value + (props.rtl ? -distance : distance)
 		const maxTranslate = 0
 
-		const containerWidth = bglSlider.offsetWidth
+		const containerWidth = bglSlider.value.offsetWidth
 		const gapWidth = (containerWidth * GAP_PERCENT) / 100
-		const totalGapWidth = (itemCount - 1) * gapWidth
-		const singleItemWidth = (containerWidth - totalGapWidth) / itemCount
-		const minTranslate = -(singleItemWidth * (slideCount - 1) + gapWidth * (slideCount - 1))
+		const totalGapWidth = (itemCount.value - 1) * gapWidth
+		const singleItemWidth = (containerWidth - totalGapWidth) / itemCount.value
+		const minTranslate = -(singleItemWidth * (slideCount.value - 1) + gapWidth * (slideCount.value - 1))
 
 		const boundedTranslate = Math.max(minTranslate, Math.min(maxTranslate, newTranslate))
 		setTransform(boundedTranslate)
@@ -287,17 +287,17 @@ function onDrag(e: MouseEvent) {
 }
 
 function endDrag() {
-	isPressed = false
+	isPressed.value = false
 	document.removeEventListener('mousemove', onDrag)
 	document.removeEventListener('mouseup', endDrag)
 
-	if (!isSliderAvailable || !bglSlider) { return }
+	if (!isSliderAvailable.value || !bglSlider.value) { return }
 
 	const currentTransform = getCurrentTransform()
-	const singleItemWidth = bglSlider.offsetWidth / itemCount
+	const singleItemWidth = bglSlider.value.offsetWidth / itemCount.value
 	const currentPanel = -currentTransform / singleItemWidth
 
-	const totalDragDistance = currentTransform - translateX
+	const totalDragDistance = currentTransform - translateX.value
 	const dragPercentage = Math.abs(totalDragDistance) / singleItemWidth
 
 	let targetPanel = currentPanel
@@ -308,67 +308,67 @@ function endDrag() {
 		targetPanel = Math.round(currentPanel)
 	}
 
-	targetPanel = Math.max(0, Math.min(targetPanel, slideCount - 1))
+	targetPanel = Math.max(0, Math.min(targetPanel, slideCount.value - 1))
 	goToSlide(targetPanel, true)
 
 	// Keep isDragging true for a short period to prevent click
-	if (isDragging) {
+	if (isDragging.value) {
 		setTimeout(() => {
-			isDragging = false
+			isDragging.value = false
 		}, 10) // Short timeout to ensure click event is handled first
 	}
 }
 
 // Add a new state variable for tracking scroll direction
-let hasScrollDirectionLock = $ref(false)
-let isHorizontalScroll = $ref(false)
+const hasScrollDirectionLock = ref(false)
+const isHorizontalScroll = ref(false)
 
 function onTouchStart(e: TouchEvent) {
-	if (!props.freeDrag || !isSliderAvailable) { return }
+	if (!props.freeDrag || !isSliderAvailable.value) { return }
 
 	const target = e.target as HTMLElement
 	const isInteractive = target.matches('button, a, input, select, textarea, [role="button"]')
 		|| target.closest('button, a, input, select, textarea, [role="button"]')
 
-	if (!isInteractive) {
+	if (isInteractive === false || isInteractive === null) {
 		// Don't prevent default immediately - let's wait to see the direction
 		clearAutoplay()
-		const touch = e.touches[0]
-		startX = touch.pageX
-		startY = touch.pageY
-		lastX = touch.pageX
-		lastTime = Date.now()
-		translateX = getCurrentTransform()
-		velocityTracker = [{ time: lastTime, position: lastX }]
-		isPressed = true
-		hasScrollDirectionLock = false
+		const [touch] = e.touches
+		startX.value = touch.pageX
+		startY.value = touch.pageY
+		lastX.value = touch.pageX
+		lastTime.value = Date.now()
+		translateX.value = getCurrentTransform()
+		velocityTracker.value = [{ time: lastTime.value, position: lastX.value }]
+		isPressed.value = true
+		hasScrollDirectionLock.value = false
 
 		// Ensure no transition is active when starting touch
-		if (bglSlider) {
-			bglSlider.style.transition = 'none'
+		if (bglSlider.value) {
+			bglSlider.value.style.transition = 'none'
 		}
 	}
 }
 
 function onTouchMove(e: TouchEvent) {
-	if (!isSliderAvailable || !bglSlider || !isPressed) { return }
+	if (!isSliderAvailable.value || !bglSlider.value || !isPressed.value) { return }
 
-	const touch = e.touches[0]
+	const [touch] = e.touches
 	const x = touch.pageX
 	const y = touch.pageY
-	const deltaX = x - startX
-	const deltaY = y - startY
+	const deltaX = x - startX.value
+	const deltaY = y - startY.value
 
 	// Determine scroll direction if we haven't already
-	if (!hasScrollDirectionLock) {
+	if (!hasScrollDirectionLock.value) {
 		// Only lock in a direction if there's significant movement
 		if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
-			isHorizontalScroll = Math.abs(deltaX) > Math.abs(deltaY)
-			hasScrollDirectionLock = true
+			isHorizontalScroll.value = Math.abs(deltaX) > Math.abs(deltaY)
+			hasScrollDirectionLock.value = true
 
 			// If it's vertical scrolling, release the touch capture
-			if (!isHorizontalScroll) {
-				isPressed = false
+			if (!isHorizontalScroll.value) {
+				isPressed.value = false
 				return
 			}
 		}
@@ -377,31 +377,31 @@ function onTouchMove(e: TouchEvent) {
 	}
 
 	// If we've determined this is a vertical scroll, don't handle the touch
-	if (!isHorizontalScroll) { return }
+	if (!isHorizontalScroll.value) { return }
 
 	// Update velocity tracking
 	const now = Date.now()
-	velocityTracker.push({ time: now, position: x })
-	lastX = x
+	velocityTracker.value.push({ time: now, position: x })
+	lastX.value = x
 
 	// Keep only recent samples
 	const cutoffTime = now - VELOCITY_SAMPLE_DURATION
-	velocityTracker = velocityTracker.filter((sample: VelocitySample) => sample.time >= cutoffTime)
+	velocityTracker.value = velocityTracker.value.filter((sample: VelocitySample) => sample.time >= cutoffTime)
 
 	if (Math.abs(deltaX) > THRESHOLDS.TOUCH) {
-		isDragging = true
+		isDragging.value = true
 		e.preventDefault() // Only prevent default if we're sure it's a horizontal drag
 	}
 
-	if (isDragging) {
-		const containerWidth = bglSlider.offsetWidth
+	if (isDragging.value) {
+		const containerWidth = bglSlider.value.offsetWidth
 		const gapWidth = (containerWidth * GAP_PERCENT) / 100
-		const totalGapWidth = (itemCount - 1) * gapWidth
-		const singleItemWidth = (containerWidth - totalGapWidth) / itemCount
-		const totalWidth = (singleItemWidth * slideCount) + (gapWidth * (slideCount - 1))
+		const totalGapWidth = (itemCount.value - 1) * gapWidth
+		const singleItemWidth = (containerWidth - totalGapWidth) / itemCount.value
+		const totalWidth = (singleItemWidth * slideCount.value) + (gapWidth * (slideCount.value - 1))
 
 		// Calculate the new position based on touch movement
-		let newTranslate = translateX + (props.rtl ? -deltaX : deltaX)
+		let newTranslate = translateX.value + (props.rtl ? -deltaX : deltaX)
 
 		// Add smooth resistance when pulling beyond bounds
 		if (newTranslate > 0) {
@@ -417,16 +417,16 @@ function onTouchMove(e: TouchEvent) {
 }
 
 function onTouchEnd() {
-	if (!isSliderAvailable || !bglSlider || !isPressed || !isHorizontalScroll) {
-		isPressed = false
-		hasScrollDirectionLock = false
+	if (!isSliderAvailable.value || !bglSlider.value || !isPressed.value || !isHorizontalScroll.value) {
+		isPressed.value = false
+		hasScrollDirectionLock.value = false
 		return
 	}
 
-	const containerWidth = bglSlider.offsetWidth
+	const containerWidth = bglSlider.value.offsetWidth
 	const gapWidth = (containerWidth * GAP_PERCENT) / 100
-	const totalGapWidth = (itemCount - 1) * gapWidth
-	const singleItemWidth = (containerWidth - totalGapWidth) / itemCount
+	const totalGapWidth = (itemCount.value - 1) * gapWidth
+	const singleItemWidth = (containerWidth - totalGapWidth) / itemCount.value
 	const totalSlideWidth = singleItemWidth + gapWidth
 
 	const currentTransform = getCurrentTransform()
@@ -436,7 +436,7 @@ function onTouchEnd() {
 	if (currentTransform > 0) {
 		normalizedTransform = 0
 	} else {
-		const minTransform = -(singleItemWidth * (slideCount - 1) + gapWidth * (slideCount - 1))
+		const minTransform = -(singleItemWidth * (slideCount.value - 1) + gapWidth * (slideCount.value - 1))
 		if (currentTransform < minTransform) {
 			normalizedTransform = minTransform
 		}
@@ -444,7 +444,7 @@ function onTouchEnd() {
 
 	const currentPanel = Math.abs(normalizedTransform / totalSlideWidth)
 
-	const totalSwipeDistance = lastX - startX
+	const totalSwipeDistance = lastX.value - startX.value
 	const swipePercentage = Math.abs(totalSwipeDistance) / totalSlideWidth
 
 	// Get final velocity from tracker
@@ -470,18 +470,18 @@ function onTouchEnd() {
 
 		if (isMobile) {
 			// On mobile, only move one slide at a time
-			targetPanel = activeSlideIndex + rtlDirection
+			targetPanel = activeSlideIndex.value + rtlDirection
 		} else {
 			// On desktop, keep the current behavior
 			targetPanel = Math.round(currentPanel) + rtlDirection
 		}
 	} else {
 		// If the swipe wasn't strong enough, snap back to the current slide
-		targetPanel = isMobile ? activeSlideIndex : Math.round(currentPanel)
+		targetPanel = isMobile ? activeSlideIndex.value : Math.round(currentPanel)
 	}
 
-	targetPanel = Math.max(0, Math.min(targetPanel, slideCount - 1))
-	activeSlideIndex = targetPanel
+	targetPanel = Math.max(0, Math.min(targetPanel, slideCount.value - 1))
+	activeSlideIndex.value = targetPanel
 
 	// Adjust animation duration based on velocity and distance to travel
 	const distance = Math.abs(targetPanel - currentPanel)
@@ -492,7 +492,7 @@ function onTouchEnd() {
 	)
 
 	// Re-enable transitions for the snap animation
-	bglSlider.style.transition = `transform ${duration}ms cubic-bezier(0.4, 0, 0.2, 1)`
+	bglSlider.value.style.transition = `transform ${duration}ms cubic-bezier(0.4, 0, 0.2, 1)`
 
 	const gapsBeforeSlide = targetPanel * gapWidth
 	const targetTransform = -(singleItemWidth * targetPanel + gapsBeforeSlide)
@@ -500,17 +500,17 @@ function onTouchEnd() {
 
 	// Clear transition after animation
 	setTimeout(() => {
-		if (bglSlider) { bglSlider.style.transition = 'none' }
+		if (bglSlider.value) { bglSlider.value.style.transition = 'none' }
 	}, duration)
 
-	velocityTracker = []
-	isDragging = false
-	hasScrollDirectionLock = false
+	velocityTracker.value = []
+	isDragging.value = false
+	hasScrollDirectionLock.value = false
 }
 
 // Wheel events
 function onWheel(e: WheelEvent) {
-	if (!props.allowScroll || !isSliderAvailable || !bglSlider || isPressed || isDragging) { return }
+	if (!props.allowScroll || !isSliderAvailable.value || !bglSlider.value || isPressed.value || isDragging.value) { return }
 
 	const isHorizontal = Math.abs(e.deltaX) > Math.abs(e.deltaY)
 	if (!isHorizontal) { return }
@@ -519,22 +519,22 @@ function onWheel(e: WheelEvent) {
 	if (wheelTimeout) { clearTimeout(wheelTimeout) }
 
 	// Reverse the delta direction for RTL mode
-	accumulatedDeltaX += props.rtl ? -e.deltaX : e.deltaX
+	accumulatedDeltaX.value += props.rtl ? -e.deltaX : e.deltaX
 
 	wheelTimeout = setTimeout(() => {
-		accumulatedDeltaX = 0
+		accumulatedDeltaX.value = 0
 	}, 50)
 
-	const singleItemWidth = bglSlider.offsetWidth / itemCount
+	const singleItemWidth = bglSlider.value.offsetWidth / itemCount.value
 	const moveThreshold = singleItemWidth * THRESHOLDS.WHEEL_PERCENT
 
-	if (Math.abs(accumulatedDeltaX) > moveThreshold) {
-		const direction = accumulatedDeltaX > 0 ? 1 : -1
-		const nextPanel = Math.max(0, Math.min(activeSlideIndex + direction, slideCount - 1))
+	if (Math.abs(accumulatedDeltaX.value) > moveThreshold) {
+		const direction = accumulatedDeltaX.value > 0 ? 1 : -1
+		const nextPanel = Math.max(0, Math.min(activeSlideIndex.value + direction, slideCount.value - 1))
 
-		if (nextPanel !== activeSlideIndex) {
+		if (nextPanel !== activeSlideIndex.value) {
 			goToSlide(nextPanel, true)
-			accumulatedDeltaX = 0
+			accumulatedDeltaX.value = 0
 		}
 	}
 }
@@ -547,8 +547,8 @@ onMounted(() => {
 	countSlides()
 	disableDrag()
 
-	if (bglSlider) {
-		slideCount = bglSlider.children.length
+	if (bglSlider.value) {
+		slideCount.value = bglSlider.value.children.length
 	}
 
 	if (props.autoplay) {
@@ -557,8 +557,8 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-	if (isSliderAvailable && bglSlider) {
-		Array.from(bglSlider.children).forEach((child) => {
+	if (isSliderAvailable.value && bglSlider.value) {
+		Array.from(bglSlider.value.children).forEach((child) => {
 			const element = child as HTMLElement
 			element.removeEventListener('click', preventDefaultClick)
 		})
@@ -573,7 +573,7 @@ onUnmounted(() => {
 
 // Watchers
 watch(() => props.index, (newIndex: number) => { goToSlide(newIndex) })
-watch(() => activeSlideIndex, handleSlideChange)
+watch(() => activeSlideIndex.value, handleSlideChange)
 
 defineExpose({
 	goToSlide,
@@ -587,32 +587,27 @@ defineExpose({
 <template>
 	<div class="BglCarousel" :dir="rtl ? 'rtl' : 'ltr'">
 		<div
-			ref="bglSlider"
-			class="bgl-slider"
+			ref="bglSlider" class="bgl-slider"
 			:class="{ dragging: isDragging, clicking: isPressed, [`slides-${itemCount}`]: true, grab: freeDrag && slideCount > 1, autoHeight }"
-			:style="{ '--item-count': itemCount, 'height': yHeight }"
-			@mousedown="startDrag"
-			@mouseover="clearAutoplay"
-			@focusin="clearAutoplay"
-			@touchstart="onTouchStart"
-			@touchmove="onTouchMove"
-			@touchend="onTouchEnd"
+			:style="{ '--item-count': itemCount, 'height': yHeight }" @mousedown="startDrag" @mouseover="clearAutoplay"
+			@focusin="clearAutoplay" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"
 			@wheel="onWheel"
 		>
 			<slot />
 		</div>
 		<div v-if="props.dots && slideCount > 1" class="dots">
 			<span
-				v-for="i in slideCount"
-				:key="i"
-				class="dot"
-				:class="{ current: activeSlideIndex === i - 1 }"
+				v-for="i in slideCount" :key="i" class="dot" :class="{ current: activeSlideIndex === i - 1 }"
 				@click="goToSlide(i - 1)"
 			/>
 		</div>
 		<div class="navigation-buttons" :class="{ rtl }">
-			<span class="prev" @click="prev"><slot name="prev" :index="activeSlideIndex" :prev="prev" /></span>
-			<span class="next" @click="next"><slot name="next" :index="activeSlideIndex" :next="next" /></span>
+			<span class="prev" @click="prev">
+				<slot name="prev" :index="activeSlideIndex" :prev="prev" />
+			</span>
+			<span class="next" @click="next">
+				<slot name="next" :index="activeSlideIndex" :next="next" />
+			</span>
 		</div>
 	</div>
 </template>
@@ -622,14 +617,16 @@ defineExpose({
 	position: relative;
 	width: 100%;
 	overflow: hidden;
-	touch-action: pan-y pinch-zoom; /* Allow vertical scrolling */
+	touch-action: pan-y pinch-zoom;
+	/* Allow vertical scrolling */
 }
 
 .bgl-slider {
 	display: flex;
 	position: relative;
 	width: 100%;
-	touch-action: pan-y pinch-zoom; /* Allow vertical scrolling */
+	touch-action: pan-y pinch-zoom;
+	/* Allow vertical scrolling */
 	will-change: transform;
 	transform: translateX(0);
 	gap: 1%;
@@ -638,7 +635,7 @@ defineExpose({
 	user-select: none;
 }
 
-.bgl-slider > * {
+.bgl-slider>* {
 	flex: 0 0 calc((100% - (var(--item-count) - 1) * 1%) / var(--item-count));
 	width: calc((100% - (var(--item-count) - 1) * 1%) / var(--item-count));
 	min-width: calc((100% - (var(--item-count) - 1) * 1%) / var(--item-count));
@@ -646,13 +643,13 @@ defineExpose({
 	overflow: hidden;
 }
 
-.bgl-slider.slides-1 > * {
+.bgl-slider.slides-1>* {
 	flex: 0 0 100%;
 	width: 100%;
 	min-width: 100%;
 }
 
-.dragging .bgl-slider > * {
+.dragging .bgl-slider>* {
 	pointer-events: none;
 	user-select: none;
 }