diff --git a/README.md b/README.md index 939ca7a..86e0d87 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,23 @@ # vue-count-down-timer + This is a count down timer for Vue js framework. This library supports two types of timers: 1. Timer mode: Timer based on hour, minute and second. 2. Single mode: Timber based on second (single circle without hours and minutes). + ## Installation ``` -npm install vuejs-circular-count-down-timer +npm install vue-circular-count-down-timer ``` After installation, import component: ``` -import CircularCountDownTimer from "vuejs-circular-count-down-timer"; +import CircularCountDownTimer from "vue-circular-count-down-timer"; ``` ### Documentation | Props | Description | | --- | --- | -| initial_value | Initial value of timer, as seconds. (required) | +| initial-value | Initial value of timer, as seconds. (required) | | stroke-width | Thickness of circle strokes in px. | | seconds-stroke-color | Color of stroke of seconds circle. | | minutes-stroke-color | Color of stroke of minutes circle. | @@ -38,12 +40,12 @@ import CircularCountDownTimer from "vuejs-circular-count-down-timer"; | Events | Description | | --- | --- | -| finish | Fires when counter reach zero. | +| finish | Fires when counter reaches zero. | | update | Fires on each counting. | ### Usage -#### 1. basic timer +#### 1. Basic usage ``` - - - - - - - vue-count-down-timer - - - -
- - - diff --git a/src/App.vue b/src/App.vue index fcc5662..6d400b4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,28 +1,75 @@ diff --git a/src/assets/logo.png b/src/assets/logo.png deleted file mode 100644 index f3d2503..0000000 Binary files a/src/assets/logo.png and /dev/null differ diff --git a/src/components/CircularCountDownTimer.vue b/src/components/CircularCountDownTimer.vue index 746ebcb..b667ef9 100644 --- a/src/components/CircularCountDownTimer.vue +++ b/src/components/CircularCountDownTimer.vue @@ -2,16 +2,16 @@
{{ factor * hours }} @@ -49,7 +49,7 @@
{{ factor * minutes }} @@ -87,7 +87,7 @@
{{ factor * seconds }} @@ -322,6 +322,7 @@ this.$emit('finish'); } if(this.value <= 0 && !this.showNegatives){ + this.value = 0; clearInterval(interval); } else{ @@ -339,22 +340,6 @@ diff --git a/src/components/index.js b/src/components/index.js index 43d6f90..c48d539 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,12 +1,9 @@ -import Vue from 'vue'; import CircularCountDownTimer from './CircularCountDownTimer' -const Components = { - CircularCountDownTimer +export default { + install(Vue, options) { + // Let's register our component globally + // https://vuejs.org/v2/guide/components-registration.html + Vue.component("circular-count-down-timer", CircularCountDownTimer); + } }; - -Object.keys(Components).forEach(name => { - Vue.component(name, Components[name]); -}); - -export default Components; \ No newline at end of file