@bagelink/vue 1.6.47 → 1.6.51

package/src/components/Zoomer.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useDebounceFn } from '@bagelink/vue'
-import { onMounted as vueOnMounted, onUnmounted as vueOnUnmounted, watch as vueWatch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import TapDetector from '../utils/tapDetector'
 
 // Props interface
@@ -9,7 +9,6 @@ interface Props {
 	maxScale?: number
 	zoom?: number
 	resetTrigger?: number
-	aspectRatio?: number
 	backgroundColor?: string
 	pivot?: string // 'cursor' | 'image-center'
 	zoomingElastic?: boolean
@@ -24,7 +23,6 @@ const {
 	maxScale = 5,
 	zoom,
 	disabled = false,
-	aspectRatio = 1,
 	backgroundColor = 'transparent',
 	pivot = 'cursor',
 	zoomingElastic = true,
@@ -34,87 +32,84 @@ const {
 } = defineProps<Props>()
 
 const emit = defineEmits(['update:zoom'])
-// Reactive state using $ref (vue-macros)
-const zoomElement = $ref<HTMLElement | undefined>()
-let containerWidth = $ref(1)
-let containerHeight = $ref(1)
-let containerLeft = $ref(0)
-let containerTop = $ref(0)
-let translateX = $ref(0)
-let animTranslateX = $ref(0)
-let translateY = $ref(0)
-let animTranslateY = $ref(0)
-let _zoom = $ref(zoom ?? 1)
-let scale = $computed({
-	get: () => zoom ?? _zoom,
+// Reactive state using standard Vue composition API
+const zoomElement = ref<HTMLElement | undefined>()
+const containerWidth = ref(1)
+const containerHeight = ref(1)
+const containerLeft = ref(0)
+const containerTop = ref(0)
+const translateX = ref(0)
+const animTranslateX = ref(0)
+const translateY = ref(0)
+const animTranslateY = ref(0)
+const _zoom = ref(zoom ?? 1)
+const scale = computed({
+	get: () => zoom ?? _zoom.value,
 	set: (val) => {
-		_zoom = val
-		emit('update:zoom', _zoom)
+		_zoom.value = val
+		emit('update:zoom', _zoom.value)
 	},
 })
 
-let animScale = $ref(1)
-let lastFullWheelTime = $ref(0)
-let lastWheelTime = $ref(0)
-let lastWheelDirection = $ref<'x' | 'y'>('y')
-let isPointerDown = $ref(false)
-let pointerPosX = $ref(-1)
-let pointerPosY = $ref(-1)
-let twoFingerInitDist = $ref(0)
-let panLocked = $ref(true)
-let raf = $ref<number | undefined>()
-let tapDetector = $ref<TapDetector | undefined>()
-
-let translateXValue = $ref(0)
-let translateYValue = $ref(0)
+const animScale = ref(1)
+const lastFullWheelTime = ref(0)
+const lastWheelTime = ref(0)
+const lastWheelDirection = ref<'x' | 'y'>('y')
+const isPointerDown = ref(false)
+const pointerPosX = ref(-1)
+const pointerPosY = ref(-1)
+const twoFingerInitDist = ref(0)
+const panLocked = ref(true)
+const raf = ref<number | undefined>()
+const tapDetector = ref<TapDetector | undefined>()
 
 // Momentum/inertia tracking
-let velocityX = $ref(0)
-let velocityY = $ref(0)
-let lastMoveTime = $ref(0)
-let momentumRaf = $ref<number | undefined>()
+const velocityX = ref(0)
+const velocityY = ref(0)
+const lastMoveTime = ref(0)
+const momentumRaf = ref<number | undefined>()
 
-const wrapperStyle = $computed(() => {
+const wrapperStyle = computed(() => {
 	// Translation is in normalized coordinates (0.5 = half container)
 	// Convert to pixels
-	translateXValue = containerWidth * animTranslateX
-	translateYValue = containerHeight * animTranslateY
+	const translateXValue = containerWidth.value * animTranslateX.value
+	const translateYValue = containerHeight.value * animTranslateY.value
 	return {
 		transform: [
 			`translate(${translateXValue}px, ${translateYValue}px)`,
-			`scale(${animScale})`,
+			`scale(${animScale.value})`,
 		].join(' '),
 		transformOrigin: '50% 50%',
 	}
 })
 
-vueWatch(() => scale, (newScale) => {
+watch(() => scale.value, (newScale) => {
 	const { x, y } = calcTranslateLimit()
-	translateX = Math.max(-x, Math.min(x, translateX))
-	translateY = Math.max(-y, Math.min(y, translateY))
+	translateX.value = Math.max(-x, Math.min(x, translateX.value))
+	translateY.value = Math.max(-y, Math.min(y, translateY.value))
 	if (newScale !== 1) {
-		panLocked = false
+		panLocked.value = false
 	}
 })
 
 function reset() {
-	scale = 1
-	panLocked = true
-	translateX = 0
-	translateY = 0
+	scale.value = 1
+	panLocked.value = true
+	translateX.value = 0
+	translateY.value = 0
 }
 
 defineExpose({ reset })
 
 function tryToScale(scaleDelta: number) {
 	if (disabled) { return }
-	let newScale = scale * scaleDelta
+	let newScale = scale.value * scaleDelta
 	if (zoomingElastic) {
 		if (newScale < minScale || newScale > maxScale) {
 			let log = Math.log2(scaleDelta)
 			log *= 0.2
 			scaleDelta = 2 ** log
-			newScale = scale * scaleDelta
+			newScale = scale.value * scaleDelta
 		}
 	} else {
 		if (newScale < minScale) {
@@ -123,104 +118,104 @@ function tryToScale(scaleDelta: number) {
 			newScale = maxScale
 		}
 	}
-	scaleDelta = newScale / scale
-	scale = newScale
+	scaleDelta = newScale / scale.value
+	scale.value = newScale
 	if (pivot !== 'image-center') {
-		const normMousePosX = (pointerPosX - containerLeft) / containerWidth
-		const normMousePosY = (pointerPosY - containerTop) / containerHeight
-		translateX = (0.5 + translateX - normMousePosX) * scaleDelta + normMousePosX - 0.5
-		translateY = (0.5 + translateY - normMousePosY) * scaleDelta + normMousePosY - 0.5
+		const normMousePosX = (pointerPosX.value - containerLeft.value) / containerWidth.value
+		const normMousePosY = (pointerPosY.value - containerTop.value) / containerHeight.value
+		translateX.value = (0.5 + translateX.value - normMousePosX) * scaleDelta + normMousePosX - 0.5
+		translateY.value = (0.5 + translateY.value - normMousePosY) * scaleDelta + normMousePosY - 0.5
 	}
 }
 
 function setPointerPosCenter() {
-	pointerPosX = containerLeft + containerWidth / 2
-	pointerPosY = containerTop + containerHeight / 2
+	pointerPosX.value = containerLeft.value + containerWidth.value / 2
+	pointerPosY.value = containerTop.value + containerHeight.value / 2
 }
 
 function onPointerMove(newMousePosX: number, newMousePosY: number) {
-	if (isPointerDown) {
+	if (isPointerDown.value) {
 		const currentTime = Date.now()
-		const pixelDeltaX = newMousePosX - pointerPosX
-		const pixelDeltaY = newMousePosY - pointerPosY
+		const pixelDeltaX = newMousePosX - pointerPosX.value
+		const pixelDeltaY = newMousePosY - pointerPosY.value
 
-		if (!panLocked) {
+		if (!panLocked.value) {
 			// Calculate velocity for momentum
-			const timeDelta = currentTime - lastMoveTime
+			const timeDelta = currentTime - lastMoveTime.value
 			if (timeDelta > 0) {
-				velocityX = pixelDeltaX / timeDelta
-				velocityY = pixelDeltaY / timeDelta
+				velocityX.value = pixelDeltaX / timeDelta
+				velocityY.value = pixelDeltaY / timeDelta
 			}
 
 			const translateLimit = calcTranslateLimit()
 			const maxTranslateX = translateLimit.x
 			const maxTranslateY = translateLimit.y
-			const newTranslateX = translateX + pixelDeltaX / containerWidth
-			const newTranslateY = translateY + pixelDeltaY / containerHeight
+			const newTranslateX = translateX.value + pixelDeltaX / containerWidth.value
+			const newTranslateY = translateY.value + pixelDeltaY / containerHeight.value
 
-			translateX = Math.max(-maxTranslateX, Math.min(maxTranslateX, newTranslateX))
-			translateY = Math.max(-maxTranslateY, Math.min(maxTranslateY, newTranslateY))
+			translateX.value = Math.max(-maxTranslateX, Math.min(maxTranslateX, newTranslateX))
+			translateY.value = Math.max(-maxTranslateY, Math.min(maxTranslateY, newTranslateY))
 
-			lastMoveTime = currentTime
+			lastMoveTime.value = currentTime
 		}
 	}
-	pointerPosX = newMousePosX
-	pointerPosY = newMousePosY
+	pointerPosX.value = newMousePosX
+	pointerPosY.value = newMousePosY
 }
 
 function applyMomentum() {
-	if (Math.abs(velocityX) < 0.01 && Math.abs(velocityY) < 0.01) {
-		velocityX = 0
-		velocityY = 0
-		if (momentumRaf) {
-			cancelAnimationFrame(momentumRaf)
-			momentumRaf = undefined
+	if (Math.abs(velocityX.value) < 0.01 && Math.abs(velocityY.value) < 0.01) {
+		velocityX.value = 0
+		velocityY.value = 0
+		if (momentumRaf.value) {
+			cancelAnimationFrame(momentumRaf.value)
+			momentumRaf.value = undefined
 		}
 		return
 	}
 
 	const translateLimit = calcTranslateLimit()
-	const newTranslateX = translateX + velocityX * 16 / containerWidth
-	const newTranslateY = translateY + velocityY * 16 / containerHeight
+	const newTranslateX = translateX.value + velocityX.value * 16 / containerWidth.value
+	const newTranslateY = translateY.value + velocityY.value * 16 / containerHeight.value
 
-	translateX = Math.max(-translateLimit.x, Math.min(translateLimit.x, newTranslateX))
-	translateY = Math.max(-translateLimit.y, Math.min(translateLimit.y, newTranslateY))
+	translateX.value = Math.max(-translateLimit.x, Math.min(translateLimit.x, newTranslateX))
+	translateY.value = Math.max(-translateLimit.y, Math.min(translateLimit.y, newTranslateY))
 
 	// Apply friction
-	velocityX *= 0.95
-	velocityY *= 0.95
+	velocityX.value *= 0.95
+	velocityY.value *= 0.95
 
-	momentumRaf = requestAnimationFrame(applyMomentum)
+	momentumRaf.value = requestAnimationFrame(applyMomentum)
 }
 
 const onInteractionEnd = useDebounceFn(() => {
 	limit()
-	panLocked = scale === 1
+	panLocked.value = scale.value === 1
 
 	// Start momentum animation if there's significant velocity
-	if (!panLocked && (Math.abs(velocityX) > 0.1 || Math.abs(velocityY) > 0.1)) {
-		if (momentumRaf) cancelAnimationFrame(momentumRaf)
+	if (!panLocked.value && (Math.abs(velocityX.value) > 0.1 || Math.abs(velocityY.value) > 0.1)) {
+		if (momentumRaf.value) cancelAnimationFrame(momentumRaf.value)
 		applyMomentum()
 	} else {
-		velocityX = 0
-		velocityY = 0
+		velocityX.value = 0
+		velocityY.value = 0
 	}
 }, 50)
 
 function limit() {
-	if (scale < minScale) {
-		scale = minScale
-	} else if (scale > maxScale) {
-		tryToScale(maxScale / scale)
+	if (scale.value < minScale) {
+		scale.value = minScale
+	} else if (scale.value > maxScale) {
+		tryToScale(maxScale / scale.value)
 	}
 
 	if (limitTranslation) {
 		const translateLimit = calcTranslateLimit()
-		if (Math.abs(translateX) > translateLimit.x) {
-			translateX *= translateLimit.x / Math.abs(translateX)
+		if (Math.abs(translateX.value) > translateLimit.x) {
+			translateX.value *= translateLimit.x / Math.abs(translateX.value)
 		}
-		if (Math.abs(translateY) > translateLimit.y) {
-			translateY *= translateLimit.y / Math.abs(translateY)
+		if (Math.abs(translateY.value) > translateLimit.y) {
+			translateY.value *= translateLimit.y / Math.abs(translateY.value)
 		}
 	}
 }
@@ -238,7 +233,7 @@ function calcTranslateLimit() {
 	// Max pan distance in normalized coords = (scale - 1) / 2
 	// This works for both X and Y directions regardless of aspect ratio
 
-	const basePanLimit = Math.max(0, (scale - 1) / 2)
+	const basePanLimit = Math.max(0, (scale.value - 1) / 2)
 
 	return {
 		x: basePanLimit,
@@ -251,18 +246,18 @@ function onMouseWheel(ev: WheelEvent) {
 	ev.preventDefault()
 	const currTime = Date.now()
 	if (Math.abs(ev.deltaY) === 120) {
-		if (currTime - lastFullWheelTime > 50) {
+		if (currTime - lastFullWheelTime.value > 50) {
 			onMouseWheelDo(ev.deltaY)
-			lastFullWheelTime = currTime
+			lastFullWheelTime.value = currTime
 		}
 	} else {
-		if (currTime - lastWheelTime > 50) {
-			lastWheelDirection = ev.deltaX > ev.deltaY ? 'x' : 'y'
-			if (lastWheelDirection === 'y') {
+		if (currTime - lastWheelTime.value > 50) {
+			lastWheelDirection.value = ev.deltaX > ev.deltaY ? 'x' : 'y'
+			if (lastWheelDirection.value === 'y') {
 				onMouseWheelDo(ev.deltaY)
 			}
 		}
-		lastWheelTime = currTime
+		lastWheelTime.value = currTime
 	}
 }
 
@@ -275,22 +270,22 @@ function onMouseWheelDo(wheelDelta: number) {
 
 function onMouseDown(ev: MouseEvent) {
 	refreshContainerPos()
-	isPointerDown = true
-	pointerPosX = ev.clientX
-	pointerPosY = ev.clientY
-	lastMoveTime = Date.now()
-	velocityX = 0
-	velocityY = 0
-	if (momentumRaf) {
-		cancelAnimationFrame(momentumRaf)
-		momentumRaf = undefined
+	isPointerDown.value = true
+	pointerPosX.value = ev.clientX
+	pointerPosY.value = ev.clientY
+	lastMoveTime.value = Date.now()
+	velocityX.value = 0
+	velocityY.value = 0
+	if (momentumRaf.value) {
+		cancelAnimationFrame(momentumRaf.value)
+		momentumRaf.value = undefined
 	}
 	document.addEventListener('mousemove', onMouseMove)
 	document.addEventListener('mouseup', onMouseUp)
 }
 
 function onMouseUp() {
-	isPointerDown = false
+	isPointerDown.value = false
 	onInteractionEnd()
 	document.removeEventListener('mouseup', onMouseUp)
 	document.removeEventListener('mousemove', onMouseMove)
@@ -298,7 +293,7 @@ function onMouseUp() {
 
 function onMouseMove(ev: MouseEvent) {
 	// Prevent swiper from handling mouse drag when panning zoomed image
-	if (!panLocked && scale > 1) {
+	if (!panLocked.value && scale.value > 1) {
 		ev.stopPropagation()
 	}
 	onPointerMove(ev.clientX, ev.clientY)
@@ -307,41 +302,41 @@ function onMouseMove(ev: MouseEvent) {
 function onTouchStart(ev: TouchEvent) {
 	if (ev.touches.length === 1) {
 		refreshContainerPos()
-		pointerPosX = ev.touches[0].clientX
-		pointerPosY = ev.touches[0].clientY
-		lastMoveTime = Date.now()
-		velocityX = 0
-		velocityY = 0
-		if (momentumRaf) {
-			cancelAnimationFrame(momentumRaf)
-			momentumRaf = undefined
+		pointerPosX.value = ev.touches[0].clientX
+		pointerPosY.value = ev.touches[0].clientY
+		lastMoveTime.value = Date.now()
+		velocityX.value = 0
+		velocityY.value = 0
+		if (momentumRaf.value) {
+			cancelAnimationFrame(momentumRaf.value)
+			momentumRaf.value = undefined
 		}
-		isPointerDown = true
+		isPointerDown.value = true
 	} else if (ev.touches.length === 2) {
-		if (momentumRaf) {
-			cancelAnimationFrame(momentumRaf)
-			momentumRaf = undefined
+		if (momentumRaf.value) {
+			cancelAnimationFrame(momentumRaf.value)
+			momentumRaf.value = undefined
 		}
-		velocityX = 0
-		velocityY = 0
-		isPointerDown = true
-		pointerPosX = (ev.touches[0].clientX + ev.touches[1].clientX) / 2
-		pointerPosY = (ev.touches[0].clientY + ev.touches[1].clientY) / 2
+		velocityX.value = 0
+		velocityY.value = 0
+		isPointerDown.value = true
+		pointerPosX.value = (ev.touches[0].clientX + ev.touches[1].clientX) / 2
+		pointerPosY.value = (ev.touches[0].clientY + ev.touches[1].clientY) / 2
 		const distX = ev.touches[0].clientX - ev.touches[1].clientX
 		const distY = ev.touches[0].clientY - ev.touches[1].clientY
-		twoFingerInitDist = Math.sqrt(distX * distX + distY * distY)
+		twoFingerInitDist.value = Math.sqrt(distX * distX + distY * distY)
 	}
 	document.addEventListener('touchend', onTouchEnd)
 }
 
 function onTouchEnd(ev: TouchEvent) {
 	if (ev.touches.length === 0) {
-		isPointerDown = false
-		if (Math.abs(scale - 1) < 0.1) { scale = 1 }
+		isPointerDown.value = false
+		if (Math.abs(scale.value - 1) < 0.1) { scale.value = 1 }
 		onInteractionEnd()
 	} else if (ev.touches.length === 1) {
-		pointerPosX = ev.touches[0].clientX
-		pointerPosY = ev.touches[0].clientY
+		pointerPosX.value = ev.touches[0].clientX
+		pointerPosY.value = ev.touches[0].clientY
 	}
 	document.removeEventListener('touchend', onTouchEnd)
 }
@@ -349,7 +344,7 @@ function onTouchEnd(ev: TouchEvent) {
 function onTouchMove(ev: TouchEvent) {
 	if (ev.touches.length === 1) {
 		// Prevent swiper from handling touch when panning zoomed image
-		if (!panLocked && scale > 1) {
+		if (!panLocked.value && scale.value > 1) {
 			ev.stopPropagation()
 		}
 		onPointerMove(ev.touches[0].clientX, ev.touches[0].clientY)
@@ -359,24 +354,24 @@ function onTouchMove(ev: TouchEvent) {
 		const distX = ev.touches[0].clientX - ev.touches[1].clientX
 		const distY = ev.touches[0].clientY - ev.touches[1].clientY
 		const newTwoFingerDist = Math.sqrt(distX * distX + distY * distY)
-		tryToScale(newTwoFingerDist / twoFingerInitDist)
-		twoFingerInitDist = newTwoFingerDist
+		tryToScale(newTwoFingerDist / twoFingerInitDist.value)
+		twoFingerInitDist.value = newTwoFingerDist
 	}
 }
 
 function refreshContainerPos() {
-	if (zoomElement) {
-		const rect = zoomElement.getBoundingClientRect()
-		containerLeft = rect.left
-		containerTop = rect.top
+	if (zoomElement.value) {
+		const rect = zoomElement.value.getBoundingClientRect()
+		containerLeft.value = rect.left
+		containerTop.value = rect.top
 	}
 }
 
 function loop() {
-	animScale = gainOn(animScale, scale)
-	animTranslateX = gainOn(animTranslateX, translateX)
-	animTranslateY = gainOn(animTranslateY, translateY)
-	raf = window.requestAnimationFrame(loop)
+	animScale.value = gainOn(animScale.value, scale.value)
+	animTranslateX.value = gainOn(animTranslateX.value, translateX.value)
+	animTranslateY.value = gainOn(animTranslateY.value, translateY.value)
+	raf.value = window.requestAnimationFrame(loop)
 }
 
 function gainOn(from: number, to: number) {
@@ -386,14 +381,14 @@ function gainOn(from: number, to: number) {
 }
 
 // Lifecycle hooks
-vueOnMounted(() => {
-	tapDetector = new TapDetector()
-	if (zoomElement) { tapDetector.attach(zoomElement) }
+onMounted(() => {
+	tapDetector.value = new TapDetector()
+	if (zoomElement.value) { tapDetector.value.attach(zoomElement.value) }
 	if (doubleClickToZoom) {
-		tapDetector.onDoubleTap(onDoubleTap as any)
+		tapDetector.value.onDoubleTap(onDoubleTap as any)
 		// Also add native dblclick event for mouse
-		if (zoomElement) {
-			zoomElement.addEventListener('dblclick', onDoubleTap as any)
+		if (zoomElement.value) {
+			zoomElement.value.addEventListener('dblclick', onDoubleTap as any)
 		}
 	}
 	window.addEventListener('resize', onWindowResize)
@@ -402,23 +397,23 @@ vueOnMounted(() => {
 	loop()
 })
 
-vueOnUnmounted(() => {
-	if (zoomElement) {
-		tapDetector?.detach(zoomElement)
+onUnmounted(() => {
+	if (zoomElement.value) {
+		tapDetector.value?.detach(zoomElement.value)
 		if (doubleClickToZoom) {
-			zoomElement.removeEventListener('dblclick', onDoubleTap as any)
+			zoomElement.value.removeEventListener('dblclick', onDoubleTap as any)
 		}
 	}
 	window.removeEventListener('resize', onWindowResize)
-	if (raf) { window.cancelAnimationFrame(raf) }
-	if (momentumRaf) { window.cancelAnimationFrame(momentumRaf) }
+	if (raf.value) { window.cancelAnimationFrame(raf.value) }
+	if (momentumRaf.value) { window.cancelAnimationFrame(momentumRaf.value) }
 })
 
 function onDoubleTap(ev: MouseEvent) {
 	// Update pointer position if available
 	if (ev.clientX > 0) {
-		pointerPosX = ev.clientX
-		pointerPosY = ev.clientY
+		pointerPosX.value = ev.clientX
+		pointerPosY.value = ev.clientY
 	}
 
 	// Calculate zoom levels
@@ -426,12 +421,12 @@ function onDoubleTap(ev: MouseEvent) {
 	const highZoom = maxScale
 
 	// Cycle through three states: 1x -> medium -> max -> 1x
-	if (scale === 1) {
+	if (scale.value === 1) {
 		// From no zoom -> medium zoom
 		tryToScale(mediumZoom)
-	} else if (scale < highZoom - 0.1) {
+	} else if (scale.value < highZoom - 0.1) {
 		// From medium zoom -> max zoom
-		tryToScale(highZoom / scale)
+		tryToScale(highZoom / scale.value)
 	} else {
 		// From max zoom -> no zoom (reset)
 		reset()
@@ -439,10 +434,10 @@ function onDoubleTap(ev: MouseEvent) {
 }
 
 function onWindowResize() {
-	if (zoomElement) {
-		const styles = window.getComputedStyle(zoomElement)
-		containerWidth = Number.parseFloat(styles.width)
-		containerHeight = Number.parseFloat(styles.height)
+	if (zoomElement.value) {
+		const styles = window.getComputedStyle(zoomElement.value)
+		containerWidth.value = Number.parseFloat(styles.width)
+		containerHeight.value = Number.parseFloat(styles.height)
 		setPointerPosCenter()
 		limit()
 	}

package/src/components/analytics/BarChart.vue

@@ -57,7 +57,7 @@ const observer = ref<IntersectionObserver | null>(null)
 const chartRef = ref<HTMLElement | null>(null)
 
 const chartData = computed(() => {
-	if (!props.data || 0 === props.data.length) {return []}
+	if (!props.data || props.data.length === 0) { return [] }
 
 	// Use all data without limiting to maxBars
 	const maxValue = Math.max(...props.data.map(d => d.value), 1)
@@ -71,8 +71,8 @@ const chartData = computed(() => {
 // Animation computed properties
 const getBarOpacity = computed(() => {
 	return (index: number) => {
-		if (!props.animated) {return 1}
-		if (!isInView.value) {return 0}
+		if (!props.animated) { return 1 }
+		if (!isInView.value) { return 0 }
 
 		const totalBars = chartData.value.length
 
@@ -90,7 +90,7 @@ function easeOutCubic(t: number): number {
 }
 
 function startAnimation() {
-	if (isAnimating.value || !props.animated) {return}
+	if (isAnimating.value || !props.animated) { return }
 
 	console.log(`🎯 TrendChart: Starting animation with ${props.animationDuration}ms duration`)
 	isAnimating.value = true
@@ -105,7 +105,7 @@ function startAnimation() {
 
 		animatedProgress.value = easedProgress
 
-		if (1 > progress) {
+		if (progress < 1) {
 			requestAnimationFrame(animate)
 		} else {
 			isAnimating.value = false
@@ -117,7 +117,7 @@ function startAnimation() {
 }
 
 function setupIntersectionObserver() {
-	if (!chartRef.value || observer.value) {return}
+	if (!chartRef.value || observer.value) { return }
 
 	observer.value = new IntersectionObserver(
 		(entries) => {

package/src/components/analytics/KpiCard.vue

@@ -27,10 +27,10 @@ const props = withDefaults(defineProps<Props>(), {
 	subtitle: ''
 })
 
-const isIncreasing = computed(() => 0 <= props.percentageChange)
+const isIncreasing = computed(() => props.percentageChange >= 0)
 
 const formattedValue = computed(() => {
-	if ('string' === typeof props.value) {return props.value}
+	if (typeof props.value === 'string') { return props.value }
 
 	if (props.currency) {
 		return new Intl.NumberFormat('he-IL', {