ps-cristopher/vue3-autocounter

This is a lightweight Vue 3 component made with TypeScript to quickly create an animation that shows an automatic count of any quantity in any duration, counting up or down.

🤘🏼 Hello World!

I am a software engineer helping people creating amazing web apps 🤩 🚀.

I'm specialized in frontend development for complex scalable web apps, being responsible for connecting the APIs services with the final user, creating awesome and interactive interfaces and components with the best implementation of UX/UI design.

I am passionate about technological innovation and digital transformation, I focus on the development and optimization of web solutions, with experience in creating several kinds of multiplatform apps like multi page apps, single page applications, progressive web applications, hybrid applications, and CMS sites as well as e-commerce. I currently perform better with TypeScript and JavaScript, using frameworks such as Hapi, Vue, Nuxt, React and Quasar for creating applications in the frontend and the backend side, years ago I was programming with Java and now I am learning Python.

My goal is to continue adding value and help transform the world by bringing people and brands to the digital age, I collaborate in their transformation through the use and creation of digital media to achieve their goals.

I also create content to help others in their process and write articles on mi Blog ✍🏼. I love photography, cinema, and videogames 🕹📸 🎥.

You can write me here 📩 [email protected]

I have a podcast in spanish called ProgramArte, you can found interesting talks about web develfopment, entrepreneurship, technology and soft skills for profesional growing🎙.

👉🏼 Visit my website and follow me on my social networks where I share the content I create to continue growing together 🚀

vue3-autocounter's Issues

Duration prop validator

Hi. I need to set duration to 0.5, but I get a warning that the property failed validation. I understand that it is not allowed to set the value less than 1, but it is not written anywhere.
Can you fix this please ?

my code running , but after end counting i get this error

e3-autocounter.esm.js:107 Uncaught (in promise) TypeError: this.currentAmount.toFixed is not a function
at Proxy.formatedAmount (vue3-autocounter.esm.js:107:1)
at ReactiveEffect.run (reactivity.esm-bundler.js:190:1)
at get value [as value] (reactivity.esm-bundler.js:1171:1)
at Object.get [as formatedAmount] (runtime-core.esm-bundler.js:3488:1)
at Object.get (runtime-core.esm-bundler.js:3132:1)
at Proxy.displayedAmount (vue3-autocounter.esm.js:102:1)
at ReactiveEffect.run (reactivity.esm-bundler.js:190:1)
at get value [as value] (reactivity.esm-bundler.js:1171:1)
at Object.get [as displayedAmount] (runtime-core.esm-bundler.js:3488:1)
at Object.get (runtime-core.esm-bundler.js:3132:1)
f

When the count finishes, an error is thrown

I'm using Vue 3.2.31.

I have three counters running and after they finish I get this error:

vue3-autocounter.esm.js:107 Uncaught (in promise) TypeError: this.currentAmount.toFixed is not a function
    at Proxy.formatedAmount (vue3-autocounter.esm.js:107:45)
    at ReactiveEffect.run (reactivity.esm-bundler.js:167:25)
    at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js:1101:39)
    at Object.get [as formatedAmount] (runtime-core.esm-bundler.js:2845:30)
    at Object.get (runtime-core.esm-bundler.js:6683:32)
    at Proxy.displayedAmount (vue3-autocounter.esm.js:102:36)
    at ReactiveEffect.run (reactivity.esm-bundler.js:167:25)
    at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js:1101:39)
    at Object.get [as displayedAmount] (runtime-core.esm-bundler.js:2845:30)
    at Object.get (runtime-core.esm-bundler.js:6683:32)

Start the animation from the previous data

Describe

After the instance is created, the animation will restart from startAmount every time the endAmount changes.

Suggested solution

Add a prop to control whether the animation starts from the previous endAmount.

Wrong validation of 'duration' prop

Hello!
There is a text in documentation for property 'duration':

This the counting duration in seconds, it must be an integer or decimal positive.

but when I set component like so

<AutoCounter :duration="0.5" ... />

there is a warning in console:

[Vue warn]: Invalid prop: custom validator check failed for prop "duration".

Component seems to be working fine though, but having multiple instances of it on single page makes a mess in the console

Does counter number support for dynamic number?

Suppose that i set up startCount from zero but endCount might be dynamic number 5, 10 , 12, etc (increasing number). Does this library handle that case?

start counter when it is visible

hi
how can i start the counter when scrolling to the part where the counter is inside?
please help me

No exported TypeScript interface

We need an exported TypeScript interface named something like Vue3Autocounter that we can import and use for the TypeScript template ref definition.

Currently there is no exported interface for us to use. Or at least none that I could find.

For example:

<template>
  <vue3autocounter ref='counter' :startAmount='0' :endAmount='2021' :duration='3' '/>
  <button @click='handleClick'>Start counting</button>
</template>

<script setup lang="ts">
// Import everything
import Vue3autocounter from "vue3-autocounter";

// Define the template ref
const counter = ref<Vue3Autocounter | null>(null);

// Call the start method
const handleClick = () => {
  counter.start();
}
</script>

Here I am using Vue3Autocounter in const counter = ref<Vue3Autocounter | null>(null) as an example. But actually that example will not work because Vue3Autocounter was just made up for illustration purposes and was never imported because it doesn't currently exist.