Skip to content

Commit f5d802f

Browse files
noorzaienoorzaie
authored
Merge pull request #9 from noorzaie/develop
2 parents 25ab902 + 662b025 commit f5d802f

14 files changed

+12796
-668
lines changed

‎.eslintignore

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Created by .ignore support plugin (hsz.mobi)
2+
### Vue template
3+
# gitignore template for Vue.js projects
4+
#
5+
# Recommended template: Node.gitignore
6+
7+
# TODO: where does this rule come from?
8+
docs/_book
9+
10+
# TODO: where does this rule come from?
11+
test/
12+
13+
babel.config.js
14+
vue.config.js

‎.eslintrc.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
module.exports = {
2+
"env": {
3+
"browser": true,
4+
"es6": true
5+
},
6+
"extends": [
7+
"eslint:recommended",
8+
"plugin:vue/essential"
9+
],
10+
"globals": {
11+
"Atomics": "readonly",
12+
"SharedArrayBuffer": "readonly"
13+
},
14+
"parserOptions": {
15+
"ecmaVersion": 2018,
16+
"sourceType": "module"
17+
},
18+
"plugins": [
19+
"vue"
20+
],
21+
"rules": {
22+
'no-console': "warn",
23+
semi: "error"
24+
}
25+
};

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,5 @@ yarn-error.log*
1919
*.njsproj
2020
*.sln
2121
*.sw?
22+
23+
src/App.vue

‎.npmignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Created by .ignore support plugin (hsz.mobi)
2+
raw
3+
src/App.vue

‎README.md

Lines changed: 71 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,146 +1,92 @@
1-
### ⭐️ Please don't forget to hit the star button
1+
# Circular count down timer
2+
This library is a count down timer for Vue js framework. You can add as many as timers you need and fully customize them.
23

3-
# vue-count-down-timer
4-
5-
This is a count down timer for Vue js framework. This library supports two types of timers:
6-
1. Timer mode: Timer based on hour, minute and second.
7-
2. Single mode: Timber based on second (single circle without hours and minutes).
4+
![fully customized timer mode](raw/1.png)
85

96
## Installation
107
```
118
npm install vue-circular-count-down-timer
129
```
13-
After installation, import component and register it in the main.js:
10+
After installation, you can import component and register it in the main.js:
1411
```
1512
import Vue from 'vue';
16-
import CircularCountDownTimer from "vue-circular-count-down-timer";
13+
import CircularCountDownTimer from 'vue-circular-count-down-timer';
1714
Vue.use(CircularCountDownTimer);
1815
```
1916

20-
### Documentation
17+
## Examples
18+
You can see some sample implementations in [this](https://github.com/noorzaie/vue-circular-count-down-timer/blob/examples/src/App.vue) page. You can also check out the live demo in [this](https://noorzaie.github.io/vue-circular-count-down-timer/) link.
2119

22-
| Props | Description |
23-
| --- | --- |
24-
| initial-value | Initial value of timer, as seconds. (required) |
25-
| stroke-width | Thickness of circle strokes in px. |
26-
| seconds-stroke-color | Color of stroke of seconds circle. |
27-
| minutes-stroke-color | Color of stroke of minutes circle. |
28-
| hours-stroke-color | Color of stroke of hours circle. |
29-
| underneath-stroke-color | Color of stroke of empty parts of circles. |
30-
| seconds-fill-color | Color of background of seconds circle. |
31-
| minutes-fill-color | Color of background of minutes circle. |
32-
| hours-fill-color | Color of background of hours circle. |
33-
| size | Width and height of circles in px. |
34-
| padding | Space between circles in px. |
35-
| hour-label | Label of hours circle. |
36-
| minute-label | Label of minutes circle. |
37-
| second-label | Label of seconds circle. |
38-
| show-second | Whether to show seconds circle or not. |
39-
| show-minute | Whether to show minutes circle or not. |
40-
| show-hour | Whether to show hours circle or not. |
41-
| show-negatives | To continue counting after reaching zero. |
42-
| steps | Number of steps in single mode usage. |
43-
| paused | To pause counting. |
44-
| notify-every | To determine interval of triggering update event. Possible values: second, minute, hour, none. minute and hour works just in timer mode. |
4520

46-
| Events | Description |
47-
| --- | --- |
48-
| finish | Fires when counter reaches zero. |
49-
| update | Fires on each counting. |
21+
## How to use
22+
You should pass an array of circles configurations to the component as props. You can also pass circle's configs directly to the component in order to apply them to all circles.
5023

51-
| Method | Description |
52-
| --- | --- |
53-
| updateTime(seconds) | Adds the amount of seconds to the countdown value. Works with positive or negative integers. |
24+
Each circle must have an `id`, You should also determine id of main circle using `main-circle-id` props. This is the circle that counting starts with that.
5425

5526

56-
### Usage
27+
### Dependent circles
28+
By default, circles are independent of each other, if you want to make them related (minutes, seconds, ... for example) you should set id of related circles in `dependentCircles` field of a circle.
5729

58-
#### 1. Basic usage
5930

60-
```
61-
<circular-count-down-timer
62-
:initial-value="360500"
63-
></circular-count-down-timer>
64-
```
65-
66-
#### 2. Fully customized (timer mode)
67-
68-
```
69-
<circular-count-down-timer
70-
:initial-value="360500"
71-
:stroke-width="5"
72-
:seconds-stroke-color="'#f00'"
73-
:minutes-stroke-color="'#0ff'"
74-
:hours-stroke-color="'#0f0'"
75-
:underneath-stroke-color="'lightgrey'"
76-
:seconds-fill-color="'#00ffff66'"
77-
:minutes-fill-color="'#00ff0066'"
78-
:hours-fill-color="'#ff000066'"
79-
:size="200"
80-
:padding="4"
81-
:hour-label="'hours'"
82-
:minute-label="'minutes'"
83-
:second-label="'seconds'"
84-
:show-second="true"
85-
:show-minute="true"
86-
:show-hour="true"
87-
:show-negatives="true"
88-
:paused="some_variable"
89-
:notify-every="'minute'"
90-
></circular-count-down-timer>
91-
```
92-
93-
![fully customized timer mode](raw/1.png)
31+
### Circles arrangement
32+
By default, circles will be placed in a row (flex row), but if you want to change default arrangement, you can pass `container-classes` and `circle-classes` props and change their styles.
9433

95-
#### 3. Single mode
9634

35+
### Stop conditions
36+
If you want to stop counting after reaching a certain value, you can use `stop-conditions` props. It is an object that contains values for each circle. For example consider you have two circles with id `circle-1` and `circle-2`, you want to stop counting when circle-1 reaches to 5 and circle-2 reaches to 12:
37+
```text
38+
stop-conditions = { 'circle-1': 5, 'circle-2': 12 }
9739
```
98-
<circular-count-down-timer
99-
:initial-value="200"
100-
:steps="400"
101-
></circular-count-down-timer>
102-
```
103-
104-
![single mode](raw/2.png)
105-
106-
107-
#### 4. Listen to events
108-
109-
````
110-
<circular-count-down-timer
111-
:initial-value="200"
112-
@finish="finished"
113-
@update="updated"
114-
></circular-count-down-timer>
115-
116-
...
117-
118-
methods: {
119-
finished: () => {
120-
console.log('finished');
121-
},
122-
updated: (status) => {
123-
console.log(status); //{"value": 144, "seconds": 24, "minutes": 2, "hours": 0}
124-
}
125-
}
126-
````
127-
128-
129-
#### 5. Add 10 seconds to the timer
130-
131-
````
132-
<circular-count-down-timer
133-
:initial-value="200"
134-
@finish="finished"
135-
@update="updated"
136-
ref="countdown"
137-
></circular-count-down-timer>
138-
139-
...
140-
141-
methods: {
142-
updateCountdown: () => {
143-
this.$refs.countdown.updateTime(10)
144-
}
145-
}
146-
````
40+
After finish counting, a `finish` event will be emitted.
41+
42+
43+
### Incremental or decremental
44+
By default, counting is incremental, but if you want to make it counting downward, pass a negative value for `stepLength` field of circle.
45+
46+
47+
### Props
48+
| Props | Description | Possible values | Default value |
49+
| --- | --- | --- | --- |
50+
| circles | A list of circles config objects | [Circle](#circle-props) | [] |
51+
| interval | Timer change interval in ms | A positive number | 1000 |
52+
| main-circle-id | Id of the circle that counting should start with that | A string | |
53+
| size | Width and height of circles in px | A positive number | Container size |
54+
| container-classes | A list of classes to set to circles container element | An array of strings | [] |
55+
| circle-classes | A list of classes to set to a circle element | An array of strings | [] |
56+
| stop-conditions | An object that contains values for each circle to stop timer after reaching to those values | An object with circle ids as key, and a number as value | {} |
57+
| trigger-update | Emit an event for each value change or not | A boolean | true |
58+
| stroke-width | Thickness of circle strokes in px | A positive number | 10 |
59+
| stroke-color | Circle stroke color | A color string | #9d989b |
60+
| underneath-stroke-color | Stroke color of empty parts of circles | A color string | #eee |
61+
| fill-color | Circle background color | A color string | #ffffff |
62+
| value-font-size | Font size of counter value in px | A positive number | 20 |
63+
| label-font-size | Font size of counter label in px | A positive number | 15 |
64+
| label-position | Position of counter label | bottom or top | bottom |
65+
| show-value | Whether to show counter value or not | A boolean | true |
66+
67+
68+
### Circle props
69+
| Props | Description | Possible values | Default value |
70+
| --- | --- | --- | --- |
71+
| id | Id of circle | A string | |
72+
| classList | A list of classes to set to the circle element | An array of strings | [] |
73+
| startValue | The number to start counting from, after reaching to the en of circle | A number | zero |
74+
| value | Initial value of circle | A number | zero |
75+
| size | Width and height of circles in px | A positive number | Container size |
76+
| strokeWidth | Thickness of circle strokes in px | A positive number | 10 |
77+
| strokeColor | Circle stroke color | A color string | #9d989b |
78+
| underneathStrokeColor | Stroke color of empty parts of circle | A color string | #eee |
79+
| fillColor | Circle background color | A color string | #ffffff |
80+
| valueFontSize | Font size of counter value in px | A positive number | 20 |
81+
| labelFontSize | Position of counter label | A positive number | 15 |
82+
| steps | The number circle partitions | A positive number | |
83+
| stepLength | How many step should be passed in each move | A non zero number | 1 |
84+
| label | Label of circle | A string | |
85+
| labelPosition | Position of label | bottom or top | bottom |
86+
| showValue | Whether to show counter value or not | A boolean | true |
87+
88+
### events
89+
| Events | Description |
90+
| --- | --- |
91+
| finish | Fires when counter reaches to stop conditions. |
92+
| update | Fires on each counting. |

‎babel.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@ module.exports = {
22
presets: [
33
'@vue/app'
44
]
5-
}
5+
};

0 commit comments

Comments
 (0)