tethys.backend/resources/js/Components/NumberDynamic.vue

<script setup>
import { computed, ref, watch, onMounted } from 'vue'
import numeral from 'numeral'

const props = defineProps({
  prefix: {
    type: String,
    default: null
  },
  suffix: {
    type: String,
    default: null
  },
  value: {
    type: Number,
    default: 0
  },
  duration: {
    type: Number,
    default: 500
  }
})

const newValue = ref(0)

const newValueFormatted = computed(
  () => newValue.value < 1000 ? newValue.value : numeral(newValue.value).format('0,0')
)

const value = computed(() => props.value)

const grow = m => {
  const v = Math.ceil(newValue.value + m)

  if (v > value.value) {
    newValue.value = value.value
    return false
  }

  newValue.value = v

  setTimeout(() => {
    grow(m)
  }, 25)
}

const growInit = () => {
  newValue.value = 0
  grow(props.value / (props.duration / 25))
}

watch(value, () => {
  growInit()
})

onMounted(() => {
  growInit()
})
</script>

<template>
  <div>{{ prefix }}{{ newValueFormatted }}{{ suffix }}</div>
</template>