AnimateNumberV2.vue

AnimateNumberV2.vue

<template>
    <span>
        {{ displayNumber ? formatNumberWithDots(Math.round(displayNumber)) : '-//-' }}
    </span>
</template>

<script setup>
/**
  Author: Gkiokan Sali
  Date: 2026-01-21
**/
import { ref, watch, onBeforeUnmount } from 'vue'
import { formatNumberWithDots } from '~/lib/utils'

const props = defineProps({
    value: {
        type: [String,Number],
        default: 0,
    },
    speed: {
        type: Number,
        default: 5
    },
});

const displayNumber = ref(0);
let interval = null;

const stop = () => {
    if (interval) {
        clearInterval(interval)
        interval = null
    }
}

watch(
    () => props.value,
    (newVal) => {
        displayNumber.value = 0        
        stop()

        let patchedVal = Math.round(parseFloat(newVal))

        if( !patchedVal ){
            displayNumber.value = null
            stop()
            return;
        }
        
        const diff  = patchedVal - displayNumber.value
        const steps = Math.min(Math.abs(diff), 100)
        const step  = diff / steps
        
        let stepCount = 0
        interval = setInterval(() => {
            stepCount++
            displayNumber.value += step
            
            if (stepCount >= steps) {
                displayNumber.value = patchedVal
                stop()
            }
        }, 100 / props.speed)
    },
    { immediate: true }
)

onBeforeUnmount(() => {
    stop()
})
</script>