├── .gitattributes
├── README.md
└── VueJsCounter.vue


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue Js Counter
 2 | 
 3 | 
 4 | ![altcenter](https://www.mustafacagri.com/wp-content/uploads/2020/10/VueJsCounter.gif "Vue Js Counter")
 5 | 
 6 | 
 7 | With the Vue Js Counter, you can count up or down between two numbers.
 8 | 
 9 | For example, you can count down from 2020 to 1980 or count up from 1900 to 1999.
10 | 
11 | ## Setup
12 | 
13 | ```npm install vue-js-counter```
14 | 
15 | ## Import
16 | ```<script>
17 | import VueJsCounter from 'vue-js-counter'
18 |     export default {
19 |         components: {
20 |             VueJsCounter 
21 |         }
22 |     }
23 | </script>
24 | ```
25 | 
26 | ## Usage (Count Up)
27 | ```
28 | <VueJsCounter start="1900" end="1999" duration="5000" thousand="." decimal=","></VueJsCounter>
29 | ```
30 | 
31 | 
32 | ## Simple Usage (Count Up)
33 | ```
34 | <VueJsCounter end="2020"></VueJsCounter>
35 | ```
36 | 
37 | 
38 | ## Usage (Count Down)
39 | ```
40 | <VueJsCounter start="2020" end="1900"></VueJsCounter>
41 | ```
42 | 
43 | ## Notes
44 | Only **end** attribute is required. The others are optional.
45 | 
46 | If **start** attribute is not filled, Vue Js Counter understands that it will be count up to **end** value.
47 | 
48 | If **end** is smaller than **start** value, it will be counted down **end** to **start**.
49 | 
50 | 
51 | 
52 | ## Attributes
53 | `start (optional)`: The starting number. If you leave it blank, ***default value is 0***.
54 | 
55 | **`end (required)`**: The ending number.
56 | 
57 | `duration (optional)`: Specifies how long the count down / up will takes in millisecond. ***default value is 2000***.
58 | 
59 | `thousand (optional)`: Specifies the character of the thousands separator. ***default value is . (dot)***.
60 | 
61 | `thousand (optional)`: Specifies the character of the decimal separator. ***default value is , (comma)***.


--------------------------------------------------------------------------------
/VueJsCounter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		{{value}}
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 	name: "VueJsCounter",
10 | 	props:{
11 | 		start: {default:0},
12 | 		end: {default:0},
13 | 		duration: {default:2000},
14 | 		thousand: {type: String, default:"."}, // thousand seperator
15 | 		decimal: {type: String, default:","} // decimal seperator
16 | 	},
17 | 	data(){
18 | 		return{
19 | 			startData: null,
20 | 			endData: null,
21 | 			durationData: null,
22 | 			numberToSum: null,
23 | 			value: null
24 | 		}
25 | 	},
26 | 	methods:{
27 | 		numberWithCommas(value,thousand){
28 | 			return value.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, thousand);
29 | 		}
30 | 	},
31 | 	created(){
32 | 		this.startData = parseInt(this.start)
33 | 		this.endData = parseInt(this.end)
34 | 		this.durationData = parseInt(this.duration)
35 | 
36 | 		if(this.startData == this.endData){
37 | 			this.value = this.startData
38 | 		}
39 | 		else{
40 | 			const frameDuration = 1000 / 60;
41 | 			const totalFrames = Math.round( this.duration / frameDuration );
42 | 			const easeOutQuad = t => t * ( 2 - t );
43 | 			let increasing = true
44 | 			if(this.startData>this.endData){this.endData == undefined ? this.endData = 0 : this.endData}
45 | 			else{
46 | 				increasing=false
47 | 				this.startData == undefined ? this.startData = 0 : this.startData
48 | 			}
49 | 			
50 | 			let frame = 0;
51 | 			const countTo = this.endData - this.startData
52 | 			if(countTo<0){countTo * -1}
53 | 			const counter = setInterval( () => {
54 | 				frame++;
55 | 				const progress = easeOutQuad( frame / totalFrames )
56 | 				const currentCount = Math.round( countTo * progress )
57 | 				if ( parseInt( this.value, 10 ) !== currentCount ) {
58 | 					this.value = this.numberWithCommas(increasing ? this.startData + currentCount : this.startData + currentCount , this.thousand)
59 | 				}
60 | 				if (frame === totalFrames) clearInterval( counter )
61 | 			}, frameDuration )
62 | 		}
63 | 	}
64 | }
65 | </script>


--------------------------------------------------------------------------------