@bagelink/vue 1.6.47 → 1.6.51

package/src/components/Slider.vue

@@ -98,11 +98,11 @@ type ComputedConfig = Omit<Required<CarouselOptions>, 'autoplay'> & { autoplay:
 
 // perPage calculation - independent of config
 const perPage = computed(() => {
-	if ('number' === typeof props.perPage) {
+	if (typeof props.perPage === 'number') {
 		return props.perPage
 	}
 
-	if ('object' === typeof props.perPage) {
+	if (typeof props.perPage === 'object') {
 		return Object.entries(props.perPage)
 			.reduce((acc, [viewport, value]) => innerWidth.value >= Number(viewport) ? value : acc, 1)
 	}
@@ -116,7 +116,7 @@ const config = computed<ComputedConfig>(() => {
 	// Convert boolean autoplay values to string mode
 	let autoplayMode: AutoplayMode = 'disabled'
 
-	if ('boolean' === typeof props.autoplay) {
+	if (typeof props.autoplay === 'boolean') {
 		autoplayMode = props.autoplay ? 'standard' : 'disabled'
 	} else {
 		autoplayMode = props.autoplay as AutoplayMode
@@ -149,7 +149,7 @@ const config = computed<ComputedConfig>(() => {
 
 // Computed property for total number of dots to display
 const totalDots = computed(() => {
-	if (!innerElements.value.length) {return 0}
+	if (!innerElements.value.length) { return 0 }
 	return config.value.loop ? innerElements.value.length : Math.ceil(innerElements.value.length - perPage.value + 1)
 })
 
@@ -200,7 +200,7 @@ onUpdated(() => {
 			const slotElements = Array.from(slotContainer.value.children)
 
 			// Only update if count changed or first initialization
-			if (slotElements.length !== innerElements.value.length || 0 === innerElements.value.length) {
+			if (slotElements.length !== innerElements.value.length || innerElements.value.length === 0) {
 				// Clone the elements from slot
 				innerElements.value = slotElements.map(el => el.cloneNode(true) as Element)
 
@@ -222,7 +222,7 @@ watch(() => props, () => {
 // Helper functions
 function webkitOrNot(): string {
 	const { style } = document.documentElement
-	if ('string' === typeof style.transform) {
+	if (typeof style.transform === 'string') {
 		return 'transform'
 	}
 	return 'WebkitTransform'
@@ -257,7 +257,7 @@ function attachEvents(): void {
 	}
 
 	// Add mouse enter/leave events for pauseOnHover functionality
-	if ('disabled' !== config.value.autoplay && config.value.pauseOnHover && carouselRef.value) {
+	if (config.value.autoplay !== 'disabled' && config.value.pauseOnHover && carouselRef.value) {
 		carouselRef.value.addEventListener('mouseenter', mouseenterHandler)
 		carouselRef.value.addEventListener('mouseleave', mouseleaveAutoplayHandler)
 	}
@@ -283,7 +283,7 @@ function detachEvents(): void {
 
 // Core functionality
 async function init(): Promise<void> {
-	if (!carouselRef.value || !slotContainer.value || !isMounted.value) {return}
+	if (!carouselRef.value || !slotContainer.value || !isMounted.value) { return }
 
 	transformProperty.value = webkitOrNot()
 
@@ -323,7 +323,7 @@ async function init(): Promise<void> {
 	buildSliderFrame()
 
 	// Start autoplay if enabled
-	if ('disabled' !== config.value.autoplay) {
+	if (config.value.autoplay !== 'disabled') {
 		startAutoplay()
 	}
 
@@ -332,7 +332,7 @@ async function init(): Promise<void> {
 }
 
 function buildSliderFrame(): void {
-	if (!carouselRef.value || !isMounted.value) {return}
+	if (!carouselRef.value || !isMounted.value) { return }
 
 	// Set building flag to prevent interactions during rebuild
 	isBuilding.value = true
@@ -387,9 +387,9 @@ function buildSliderFrame(): void {
 		const docFragment = document.createDocumentFragment()
 
 		// Add clones before original items (for loop mode)
-		if (config.value.loop && 0 < innerElements.value.length) {
+		if (config.value.loop && innerElements.value.length > 0) {
 			for (let i = originalCount - bufferSize; i < originalCount; i++) {
-				if (0 <= i && i < originalCount) {
+				if (i >= 0 && i < originalCount) {
 					const original = innerElements.value[i]
 					const clone = original.cloneNode(true) as Element
 
@@ -420,9 +420,9 @@ function buildSliderFrame(): void {
 		}
 
 		// Add clones after original items (for loop mode)
-		if (config.value.loop && 0 < innerElements.value.length) {
+		if (config.value.loop && innerElements.value.length > 0) {
 			for (let i = 0; i < bufferSize; i++) {
-				if (0 <= i && i < originalCount) {
+				if (i >= 0 && i < originalCount) {
 					const original = innerElements.value[i]
 					const clone = original.cloneNode(true) as Element
 
@@ -468,7 +468,7 @@ function copyAttributesAndEvents(original: Element, clone: Element): void {
 	const allAttrs = original.attributes
 	for (let i = 0; i < allAttrs.length; i++) {
 		const attr = allAttrs[i]
-		if ('id' !== attr.name) { // Skip id to avoid duplicate IDs
+		if (attr.name !== 'id') { // Skip id to avoid duplicate IDs
 			clone.setAttribute(attr.name, attr.value)
 		}
 	}
@@ -476,7 +476,7 @@ function copyAttributesAndEvents(original: Element, clone: Element): void {
 	// For Vue-specific elements, add a custom click handler that relays to the original
 	clone.addEventListener('click', (e) => {
 		// Check if original has a click handler
-		if ('function' === typeof (original as any).click) {
+		if (typeof (original as any).click === 'function') {
 			// We need to simulate the click on the original element
 			// Create and dispatch a new click event on the original element
 			const clickEvent = new MouseEvent('click', {
@@ -492,7 +492,7 @@ function copyAttributesAndEvents(original: Element, clone: Element): void {
 	})
 
 	// Special handling for links
-	if ('A' === original.tagName && 'A' === clone.tagName) {
+	if (original.tagName === 'A' && clone.tagName === 'A') {
 		const originalHref = original.getAttribute('href')
 		if (originalHref) {
 			clone.addEventListener('click', (e) => {
@@ -503,7 +503,7 @@ function copyAttributesAndEvents(original: Element, clone: Element): void {
 					original.onclick(new MouseEvent('click'))
 				} else {
 					// Default behavior - navigate like original link would
-					const targetBlank = '_blank' === original.getAttribute('target')
+					const targetBlank = original.getAttribute('target') === '_blank'
 					if (targetBlank) {
 						window.open(originalHref, '_blank')
 					} else {
@@ -541,7 +541,7 @@ function buildSliderFrameItem(elm: Element): HTMLElement {
 function slideToCurrent(enableTransitionFlag?: boolean): void {
 	try {
 		// Ensure component is still mounted
-		if (!isMounted.value || !innerElements.value.length || !sliderFrame.value) {return}
+		if (!isMounted.value || !innerElements.value.length || !sliderFrame.value) { return }
 
 		// Ultra-aggressive buffer size - must match buildSliderFrame buffer size
 		const slideBufferSize = Math.max(perPage.value * 8, 20) // Even more buffer for huge screens
@@ -555,10 +555,10 @@ function slideToCurrent(enableTransitionFlag?: boolean): void {
 			// Use requestAnimationFrame for smooth transitions
 			requestAnimationFrame(() => {
 				// Check again that we're still mounted and have the frame
-				if (!isMounted.value || !sliderFrame.value) {return}
+				if (!isMounted.value || !sliderFrame.value) { return }
 
 				requestAnimationFrame(() => {
-					if (!isMounted.value || !sliderFrame.value) {return}
+					if (!isMounted.value || !sliderFrame.value) { return }
 
 					enableTransition()
 					sliderFrame.value.style[transformProperty.value as any] = `translate3d(${offset}px, 0, 0)`
@@ -573,12 +573,12 @@ function slideToCurrent(enableTransitionFlag?: boolean): void {
 }
 
 function prev(howManySlides: number = 1): void {
-	if (!isMounted.value || isBuilding.value || !innerElements.value.length) {return}
+	if (!isMounted.value || isBuilding.value || !innerElements.value.length) { return }
 
 	const beforeChange = currentSlide.value
 
 	if (config.value.loop) {
-		const isNewIndexClone = 0 > currentSlide.value - howManySlides
+		const isNewIndexClone = currentSlide.value - howManySlides < 0
 
 		if (isNewIndexClone) {
 			disableTransition()
@@ -605,13 +605,13 @@ function prev(howManySlides: number = 1): void {
 		slideToCurrent(config.value.loop)
 		config.value.onChange()
 	}
-	if ('disabled' !== config.value.autoplay) {
+	if (config.value.autoplay !== 'disabled') {
 		startAutoplay()
 	}
 }
 
 function next(howManySlides: number = 1): void {
-	if (!isMounted.value || isBuilding.value || !innerElements.value.length) {return}
+	if (!isMounted.value || isBuilding.value || !innerElements.value.length) { return }
 
 	const beforeChange = currentSlide.value
 
@@ -643,7 +643,7 @@ function next(howManySlides: number = 1): void {
 		slideToCurrent(config.value.loop)
 		config.value.onChange()
 	}
-	if ('disabled' !== config.value.autoplay) {
+	if (config.value.autoplay !== 'disabled') {
 		startAutoplay()
 	}
 }
@@ -680,7 +680,7 @@ function enableTransition(): void {
 }
 
 function updateAfterDrag(): void {
-	if (!isMounted.value) {return}
+	if (!isMounted.value) { return }
 
 	const movement = (config.value.rtl ? -1 : 1) * (drag.value.endX - drag.value.startX)
 	const movementDistance = Math.abs(movement)
@@ -688,13 +688,13 @@ function updateAfterDrag(): void {
 		? Math.ceil(movementDistance / (selectorWidth.value / perPage.value))
 		: 1
 
-	const slideToNegativeClone = 0 < movement && 0 > currentSlide.value - howManySliderToSlide
-	const slideToPositiveClone = 0 > movement 
+	const slideToNegativeClone = movement > 0 && currentSlide.value - howManySliderToSlide < 0
+	const slideToPositiveClone = movement < 0
 		&& currentSlide.value + howManySliderToSlide > innerElements.value.length - perPage.value
 
-	if (0 < movement && movementDistance > config.value.threshold && innerElements.value.length > perPage.value) {
+	if (movement > 0 && movementDistance > config.value.threshold && innerElements.value.length > perPage.value) {
 		prev(howManySliderToSlide)
-	} else if (0 > movement 
+	} else if (movement < 0
 		&& movementDistance > config.value.threshold
 		&& innerElements.value.length > perPage.value) {
 		next(howManySliderToSlide)
@@ -730,7 +730,7 @@ function clearDrag(): void {
 
 // Touch event handlers
 function touchstartHandler(e: TouchEvent): void {
-	if (isBuilding.value || !isMounted.value) {return}
+	if (isBuilding.value || !isMounted.value) { return }
 
 	const target = e.target as HTMLElement
 	const ignoreTags = ['TEXTAREA', 'OPTION', 'INPUT', 'SELECT'].includes(target.nodeName)
@@ -749,17 +749,17 @@ function touchstartHandler(e: TouchEvent): void {
 	drag.value.startY = e.touches[0].pageY
 
 	// Mark link-related elements for potential preventClick
-	const isLink = 'A' === target.tagName || target.closest('a')
-	const isImage = 'IMG' === target.tagName
+	const isLink = target.tagName === 'A' || target.closest('a')
+	const isImage = target.tagName === 'IMG'
 	if (isLink || isImage) {
 		drag.value.preventClick = false
 	}
 
 	// When starting drag during linear autoplay, save the current position
-	if ('linear' === config.value.autoplay && sliderFrame.value) {
+	if (config.value.autoplay === 'linear' && sliderFrame.value) {
 		// Get the current transform value and save it to apply during dragging
 		const currentTransform = getComputedStyle(sliderFrame.value)[transformProperty.value as any]
-		if (currentTransform && 'none' !== currentTransform) {
+		if (currentTransform && currentTransform !== 'none') {
 			try {
 				// Parse the transform matrix to get the current X position
 				const matrix = new DOMMatrix(currentTransform)
@@ -771,7 +771,7 @@ function touchstartHandler(e: TouchEvent): void {
 					// Adjust for the perPage offset in loop mode
 					const totalPosition = Math.abs(currentX)
 					const slidePosition = Math.round(totalPosition / itemWidth) - perPage.value
-					currentSlide.value = 0 <= slidePosition 
+					currentSlide.value = slidePosition >= 0
 						? slidePosition % innerElements.value.length
 						: (innerElements.value.length + (slidePosition % innerElements.value.length)) % innerElements.value.length
 				} else {
@@ -790,7 +790,7 @@ function touchstartHandler(e: TouchEvent): void {
 }
 
 function touchendHandler(e: TouchEvent): void {
-	if (isBuilding.value || !isMounted.value) {return}
+	if (isBuilding.value || !isMounted.value) { return }
 
 	e.stopPropagation()
 
@@ -818,17 +818,17 @@ function touchendHandler(e: TouchEvent): void {
 	clearDrag()
 
 	// Restart autoplay after touch interaction
-	if ('disabled' !== config.value.autoplay && !isHovering.value && isMounted.value) {
+	if (config.value.autoplay !== 'disabled' && !isHovering.value && isMounted.value) {
 		startAutoplay()
 	}
 }
 
 function touchmoveHandler(e: TouchEvent): void {
-	if (isBuilding.value || !isMounted.value) {return}
+	if (isBuilding.value || !isMounted.value) { return }
 
 	e.stopPropagation()
 
-	if (null === drag.value.letItGo) {
+	if (drag.value.letItGo === null) {
 		drag.value.letItGo = Math.abs(drag.value.startY - e.touches[0].pageY)
 			< Math.abs(drag.value.startX - e.touches[0].pageX)
 	}
@@ -867,12 +867,12 @@ function touchmoveHandler(e: TouchEvent): void {
 
 // Mouse event handlers
 function mousedownHandler(e: MouseEvent): void {
-	if (isBuilding.value || !isMounted.value) {return}
+	if (isBuilding.value || !isMounted.value) { return }
 
 	const target = e.target as HTMLElement
 	const ignoreTags = ['TEXTAREA', 'OPTION', 'INPUT', 'SELECT'].includes(target.nodeName)
 
-	if (ignoreTags) {return}
+	if (ignoreTags) { return }
 
 	// Pause autoplay during mouse interaction
 	stopAutoplay()
@@ -884,17 +884,17 @@ function mousedownHandler(e: MouseEvent): void {
 	drag.value.startX = e.pageX
 
 	// Mark link-related elements for potential preventClick
-	const isLink = 'A' === target.tagName || target.closest('a')
-	const isImage = 'IMG' === target.tagName
+	const isLink = target.tagName === 'A' || target.closest('a')
+	const isImage = target.tagName === 'IMG'
 	if (isLink || isImage) {
 		drag.value.preventClick = false // Start with false, will be set to true if actual dragging occurs
 	}
 
 	// When starting drag during linear autoplay, save the current position
-	if ('linear' === config.value.autoplay && sliderFrame.value) {
+	if (config.value.autoplay === 'linear' && sliderFrame.value) {
 		// Get the current transform value and save it to apply during dragging
 		const currentTransform = getComputedStyle(sliderFrame.value)[transformProperty.value as any]
-		if (currentTransform && 'none' !== currentTransform) {
+		if (currentTransform && currentTransform !== 'none') {
 			try {
 				// Parse the transform matrix to get the current X position
 				const matrix = new DOMMatrix(currentTransform)
@@ -906,7 +906,7 @@ function mousedownHandler(e: MouseEvent): void {
 					// Adjust for the perPage offset in loop mode
 					const totalPosition = Math.abs(currentX)
 					const slidePosition = Math.round(totalPosition / itemWidth) - perPage.value
-					currentSlide.value = 0 <= slidePosition 
+					currentSlide.value = slidePosition >= 0
 						? slidePosition % innerElements.value.length
 						: (innerElements.value.length + (slidePosition % innerElements.value.length)) % innerElements.value.length
 				} else {
@@ -925,7 +925,7 @@ function mousedownHandler(e: MouseEvent): void {
 }
 
 function mouseupHandler(e: MouseEvent): void {
-	if (isBuilding.value || !isMounted.value) {return}
+	if (isBuilding.value || !isMounted.value) { return }
 
 	e.stopPropagation()
 
@@ -958,13 +958,13 @@ function mouseupHandler(e: MouseEvent): void {
 	clearDrag()
 
 	// Restart autoplay after mouse interaction if not hovering
-	if ('disabled' !== config.value.autoplay && !isHovering.value && isMounted.value) {
+	if (config.value.autoplay !== 'disabled' && !isHovering.value && isMounted.value) {
 		startAutoplay()
 	}
 }
 
 function mousemoveHandler(e: MouseEvent): void {
-	if (isBuilding.value || !isMounted.value) {return}
+	if (isBuilding.value || !isMounted.value) { return }
 
 	e.preventDefault()
 
@@ -1004,7 +1004,7 @@ function mousemoveHandler(e: MouseEvent): void {
 }
 
 function mouseleaveHandler(e: MouseEvent): void {
-	if (isBuilding.value || !isMounted.value) {return}
+	if (isBuilding.value || !isMounted.value) { return }
 
 	if (pointerDown.value) {
 		pointerDown.value = false
@@ -1022,7 +1022,7 @@ function mouseleaveHandler(e: MouseEvent): void {
 }
 
 function clickHandler(e: MouseEvent): void {
-	if (isBuilding.value || !isMounted.value) {return}
+	if (isBuilding.value || !isMounted.value) { return }
 
 	if (drag.value.preventClick || isDragging.value) {
 		e.preventDefault()
@@ -1036,14 +1036,14 @@ function clickHandler(e: MouseEvent): void {
 
 // Add this new function to handle dragstart events
 function dragstartHandler(e: DragEvent): void {
-	if (isBuilding.value || !isMounted.value) {return} // Prevent interaction during build
+	if (isBuilding.value || !isMounted.value) { return } // Prevent interaction during build
 
 	// Prevent default drag behavior for images and links
 	if (config.value.draggable) {
 		const target = e.target as HTMLElement
-		const isDraggableElement = 'IMG' === target.tagName
-			|| 'A' === target.tagName
-			|| 'A' === target.parentElement?.tagName
+		const isDraggableElement = target.tagName === 'IMG'
+			|| target.tagName === 'A'
+			|| target.parentElement?.tagName === 'A'
 
 		if (isDraggableElement) {
 			e.preventDefault()
@@ -1053,7 +1053,7 @@ function dragstartHandler(e: DragEvent): void {
 
 // Public API
 function remove(index: number): void {
-	if (0 > index || index >= innerElements.value.length) {
+	if (index < 0 || index >= innerElements.value.length) {
 		throw new Error('Item to remove doesn\'t exist 😭')
 	}
 
@@ -1070,7 +1070,7 @@ function remove(index: number): void {
 }
 
 function insert(item: Element, index: number): void {
-	if (0 > index || index > innerElements.value.length + 1) {
+	if (index < 0 || index > innerElements.value.length + 1) {
 		throw new Error('Unable to insert at this index 😭')
 	}
 
@@ -1079,7 +1079,7 @@ function insert(item: Element, index: number): void {
 	}
 
 	// Avoid shifting content
-	const shouldItShift = index <= currentSlide.value && 0 < innerElements.value.length
+	const shouldItShift = index <= currentSlide.value && innerElements.value.length > 0
 
 	if (shouldItShift) {
 		currentSlide.value++
@@ -1119,36 +1119,36 @@ function destroy(restoreMarkup: boolean = false): void {
 
 // Add after init()
 async function startAutoplay(): Promise<void> {
-	if (!isMounted.value) {return} // Don't start if not mounted
+	if (!isMounted.value) { return } // Don't start if not mounted
 
 	stopAutoplay() // Clear any existing timers first
 
-	if ('standard' === config.value.autoplay) {
+	if (config.value.autoplay === 'standard') {
 		autoplayTimer.value = window.setInterval(() => {
 			// Check if component is still mounted before advancing
 			if (isMounted.value && !isHovering.value && !isBuilding.value) {
 				next()
 			}
 		}, config.value.autoplayInterval)
-	} else if ('linear' === config.value.autoplay) {
+	} else if (config.value.autoplay === 'linear') {
 		startLinearAutoplay()
 	}
 }
 
 function stopAutoplay(): void {
-	if (null !== autoplayTimer.value) {
+	if (autoplayTimer.value !== null) {
 		clearInterval(autoplayTimer.value)
 		autoplayTimer.value = null
 	}
 
-	if (null !== linearAnimationFrame.value) {
+	if (linearAnimationFrame.value !== null) {
 		cancelAnimationFrame(linearAnimationFrame.value)
 		linearAnimationFrame.value = null
 	}
 }
 
 function startLinearAutoplay(): void {
-	if (!isMounted.value || !innerElements.value.length) {return}
+	if (!isMounted.value || !innerElements.value.length) { return }
 
 	// Reset the linear offset to the current slide position
 	const itemWidth = selectorWidth.value / perPage.value
@@ -1163,7 +1163,7 @@ function startLinearAutoplay(): void {
 			return
 		}
 
-		if (!lastTimestamp) {lastTimestamp = timestamp}
+		if (!lastTimestamp) { lastTimestamp = timestamp }
 
 		// Calculate time delta and convert to pixels based on speed
 		const elapsed = timestamp - lastTimestamp
@@ -1242,14 +1242,14 @@ function pauseAutoplay(): void {
 }
 
 function resumeAutoplay(): void {
-	if ('disabled' !== config.value.autoplay) {
+	if (config.value.autoplay !== 'disabled') {
 		startAutoplay()
 	}
 }
 
 // Add function to set up the MutationObserver
 function setupSlotObserver(): void {
-	if (!slotContainer.value || slotObserver.value) {return}
+	if (!slotContainer.value || slotObserver.value) { return }
 
 	// Create a new MutationObserver
 	slotObserver.value = new MutationObserver((mutations) => {
@@ -1262,7 +1262,7 @@ function setupSlotObserver(): void {
 		let needsRebuild = false
 
 		for (const mutation of mutations) {
-			if ('childList' === mutation.type) {
+			if (mutation.type === 'childList') {
 				needsRebuild = true
 				break
 			}
@@ -1293,7 +1293,7 @@ function setupSlotObserver(): void {
 
 // Modify updateSlider to safely handle DOM references and always use slotContainer
 function updateSlider(): void {
-	if (!carouselRef.value || !slotContainer.value || isBuilding.value || !isMounted.value) {return}
+	if (!carouselRef.value || !slotContainer.value || isBuilding.value || !isMounted.value) { return }
 
 	// Prevent too many empty rebuild attempts
 	if (emptyRebuildAttempts.value >= MAX_EMPTY_REBUILD_ATTEMPTS) {
@@ -1312,7 +1312,7 @@ function updateSlider(): void {
 			.map(el => el.cloneNode(true) as Element)
 
 		// Only proceed if we have elements to work with or if we need to clear for the first time
-		if (0 < slotElements.length || (0 < innerElements.value.length && 0 === emptyRebuildAttempts.value)) {
+		if (slotElements.length > 0 || (innerElements.value.length > 0 && emptyRebuildAttempts.value === 0)) {
 			// Update elements with clones of slot content
 			innerElements.value = slotElements
 
@@ -1321,7 +1321,7 @@ function updateSlider(): void {
 				currentSlide.value = Math.max(0, innerElements.value.length - 1)
 			}
 			// Stop autoplay during rebuild to prevent errors
-			const wasAutoplay = 'disabled' !== config.value.autoplay
+			const wasAutoplay = config.value.autoplay !== 'disabled'
 			if (wasAutoplay) {
 				stopAutoplay()
 			}
@@ -1330,7 +1330,7 @@ function updateSlider(): void {
 			buildSliderFrame()
 
 			// Resume autoplay if it was active and not hovering
-			if (wasAutoplay && !isHovering.value && 0 < innerElements.value.length) {
+			if (wasAutoplay && !isHovering.value && innerElements.value.length > 0) {
 				// Small delay for stability
 				setTimeout(() => {
 					startAutoplay()
@@ -1362,7 +1362,7 @@ function resetSlider(): void {
 		const slotElements = Array.from(slotContainer.value.children)
 			.map(el => el.cloneNode(true) as Element)
 
-		if (0 < slotElements.length) {
+		if (slotElements.length > 0) {
 			// We have content now, rebuild
 			innerElements.value = slotElements
 			nextTick(() => { buildSliderFrame() })