chore: release v0.2.0

CHANGELOG.md

@@ -1,36 +1,37 @@
-## [0.1.6](https://github.com/xiaoluoboding/vue-digit-wheel/compare/v0.1.5...v0.1.6) (2020-11-18)
+# [0.2.0](https://github.com/xiaoluoboding/vue-digit-animation/compare/v0.1.5...v0.2.0) (2020-11-21)
 
 
 ### Features
 
-* only support vue 3 ([8aa0909](https://github.com/xiaoluoboding/vue-digit-wheel/commit/8aa09095b69785b0f19c3860acc851500d2bad39))
+* design digit ruler animation ([c5bdb03](https://github.com/xiaoluoboding/vue-digit-animation/commit/c5bdb0320d877afaef16f384902e11005b600977))
+* only support vue 3 ([8aa0909](https://github.com/xiaoluoboding/vue-digit-animation/commit/8aa09095b69785b0f19c3860acc851500d2bad39))
 
 
 
-## [0.1.5](https://github.com/xiaoluoboding/vue-digit-wheel/compare/v0.1.0...v0.1.5) (2020-11-18)
+## [0.1.5](https://github.com/xiaoluoboding/vue-digit-animation/compare/v0.1.0...v0.1.5) (2020-11-18)
 
 
 ### Features
 
-* add api-extractor ([c0a57bf](https://github.com/xiaoluoboding/vue-digit-wheel/commit/c0a57bfe8461324e51b429ab229a6cc66385bdc0))
-* add peerDependencies ([68dc55f](https://github.com/xiaoluoboding/vue-digit-wheel/commit/68dc55fb1bd6408b0bba29d1832eca6430832f4e))
+* add api-extractor ([c0a57bf](https://github.com/xiaoluoboding/vue-digit-animation/commit/c0a57bfe8461324e51b429ab229a6cc66385bdc0))
+* add peerDependencies ([68dc55f](https://github.com/xiaoluoboding/vue-digit-animation/commit/68dc55fb1bd6408b0bba29d1832eca6430832f4e))
 
 
 
-# [0.1.0](https://github.com/xiaoluoboding/vue-digit-wheel/compare/2463108900c614a110a815374a260eeff7224b86...v0.1.0) (2020-11-18)
+# [0.1.0](https://github.com/xiaoluoboding/vue-digit-animation/compare/2463108900c614a110a815374a260eeff7224b86...v0.1.0) (2020-11-18)
 
 
 ### Features
 
-* add useAxios hooks ([24de515](https://github.com/xiaoluoboding/vue-digit-wheel/commit/24de5159abfecfcbd2899f05243795de192daf1b))
-* add useful props ([2463108](https://github.com/xiaoluoboding/vue-digit-wheel/commit/2463108900c614a110a815374a260eeff7224b86))
-* add vetur support ([8ec973e](https://github.com/xiaoluoboding/vue-digit-wheel/commit/8ec973eecce7224b9e7003edbfc6f7e653edd016))
-* create colon time / local date formatter ([69e58ff](https://github.com/xiaoluoboding/vue-digit-wheel/commit/69e58ffab121518ad7e5e89ff8e6604f923788ca))
-* debug realtime mode ([a77e236](https://github.com/xiaoluoboding/vue-digit-wheel/commit/a77e23685cc0d5dfd7e800f6ae54d5fd0e6aa043))
-* design digit wheel 3d animation ([08c5f45](https://github.com/xiaoluoboding/vue-digit-wheel/commit/08c5f45574c48c506d718f8c24bdcfa5679103e4))
-* split digit-wheel component ([c1157b2](https://github.com/xiaoluoboding/vue-digit-wheel/commit/c1157b2a409cd19192e9eab633d9ccd0e3ce058d))
-* use circle linkedlist concept ([27e67bc](https://github.com/xiaoluoboding/vue-digit-wheel/commit/27e67bc386cde0fc6c70c336e87428e9ef92a49f))
-* use numeral for format number ([a880bb4](https://github.com/xiaoluoboding/vue-digit-wheel/commit/a880bb4ff81ae20a39b4d78b0db457fed11b6886))
+* add useAxios hooks ([24de515](https://github.com/xiaoluoboding/vue-digit-animation/commit/24de5159abfecfcbd2899f05243795de192daf1b))
+* add useful props ([2463108](https://github.com/xiaoluoboding/vue-digit-animation/commit/2463108900c614a110a815374a260eeff7224b86))
+* add vetur support ([8ec973e](https://github.com/xiaoluoboding/vue-digit-animation/commit/8ec973eecce7224b9e7003edbfc6f7e653edd016))
+* create colon time / local date formatter ([69e58ff](https://github.com/xiaoluoboding/vue-digit-animation/commit/69e58ffab121518ad7e5e89ff8e6604f923788ca))
+* debug realtime mode ([a77e236](https://github.com/xiaoluoboding/vue-digit-animation/commit/a77e23685cc0d5dfd7e800f6ae54d5fd0e6aa043))
+* design digit wheel 3d animation ([08c5f45](https://github.com/xiaoluoboding/vue-digit-animation/commit/08c5f45574c48c506d718f8c24bdcfa5679103e4))
+* split digit-wheel component ([c1157b2](https://github.com/xiaoluoboding/vue-digit-animation/commit/c1157b2a409cd19192e9eab633d9ccd0e3ce058d))
+* use circle linkedlist concept ([27e67bc](https://github.com/xiaoluoboding/vue-digit-animation/commit/27e67bc386cde0fc6c70c336e87428e9ef92a49f))
+* use numeral for format number ([a880bb4](https://github.com/xiaoluoboding/vue-digit-animation/commit/a880bb4ff81ae20a39b4d78b0db457fed11b6886))
 
 
 

README.md

@@ -1,20 +1,20 @@
-# Digit Wheel
+# Digit Animation
 
 <p align="left">
-  <a href="https://travis-ci.org/xiaoluoboding/vue-digit-wheel"><img src="https://travis-ci.org/xiaoluoboding/vue-digit-wheel.svg?branch=master"></a>
-  <a href="https://www.npmjs.com/package/vue-digit-wheel" target="_blank"><img src="https://img.shields.io/npm/v/vue-digit-wheel.svg"></a>
-  <a href="https://github.com/xiaoluoboding/vue-digit-wheel"><img src="https://img.shields.io/github/stars/xiaoluoboding/vue-digit-wheel.svg"></a>
-  <a href="https://github.com/xiaoluoboding/vue-digit-wheel"><img src="https://img.shields.io/github/license/xiaoluoboding/vue-digit-wheel.svg"></a>
+  <a href="https://travis-ci.org/xiaoluoboding/vue-digit-animation"><img src="https://travis-ci.org/xiaoluoboding/vue-digit-animation.svg?branch=master"></a>
+  <a href="https://www.npmjs.com/package/vue-digit-animation" target="_blank"><img src="https://img.shields.io/npm/v/vue-digit-animation.svg"></a>
+  <a href="https://github.com/xiaoluoboding/vue-digit-animation"><img src="https://img.shields.io/github/stars/xiaoluoboding/vue-digit-animation.svg"></a>
+  <a href="https://github.com/xiaoluoboding/vue-digit-animation"><img src="https://img.shields.io/github/license/xiaoluoboding/vue-digit-animation.svg"></a>
 </p>
 
-> A digit wheel animation component for Vue 3.
+> A digit animation component with wheel/slide effect for Vue 3.
 
 ## Installation
 
 ```bash
-npm i vue-digit-wheel -S
+npm i vue-digit-animation -S
 or
-yarn add vue-digit-wheel -S
+yarn add vue-digit-animation -S
 ```
 
 ## Import
@@ -26,20 +26,24 @@ yarn add vue-digit-wheel -S
 import { createApp } from 'vue'
 import App from './App.vue'
 
-import VueDigitWheel from 'vue-digit-wheel'
+import VueDigitAnimation from 'vue-digit-animation'
 
 createApp(App)
-  .use(VueDigitWheel)
+  .use(VueDigitAnimation)
   .mount('#app')
 ```
 
 ### Use in your component:
 
 ```js
-import { DigitWheelGroup, DigitWheel } from 'vue-digit-wheel'
+import { DigitAnimationGroup, DigitWheel, DigitRuler } from 'vue-digit-animation'
 
 export default {
-  components: { DigitWheelGroup, DigitWheel }
+  components: {
+    DigitAnimationGroup,
+    DigitWheel,
+    DigitRuler
+  }
   ...
 }
 ```
@@ -48,6 +52,10 @@ export default {
 
 ### DigitWheel
 
+Single `<digit-wheel>` component for display single digit with wheel effect
+
+**Demo**
+
 ```html
 <digit-wheel
   size="6xl"
@@ -57,20 +65,76 @@ export default {
 />
 ```
 
-### DigitWheelGroup
+**Template**
+
+```js
+interface DigitProps {
+  digit: number; // the digit value
+  size: string; // the digit preset font-size or custom font-size
+  duration: number; // Sets the length of time that animation completed, Unit is milliseconds(1000)
+  useEase: string; // transition easing function
+}
+```
+
+> DigitRuler
+
+Single `<digit-ruler>` component for display single digit with slide effect
+
+**Template**
+
+```html
+<digit-ruler
+  size="6xl"
+  use-ease="Quit.easeInOut"
+  :digit="6"
+  :duration="1000"
+/>
+```
+
+**Props**
+
+```js
+interface DigitProps {
+  digit: number; // the digit value
+  size: string; // the digit preset font-size or custom font-size
+  duration: number; // Sets the length of time that animation completed, Unit is milliseconds(1000)
+  useEase: string; // transition easing function
+}
+```
+
+### DigitAnimationGroup
+
+A group of `<digit-wheel>` or `<digit-ruler>` component for display multiple digits
+
+**Template**
 
 ```html
-<digit-wheel-group
+<digit-animation-group
+  type="wheel"
   size="6em"
   format="0,0"
   use-ease="Quit.easeInOut"
-  :stagger="true"
+  stagger
   :digits="9527"
-  :gutter="16"
   :duration="1000"
 />
 ```
 
+**Props**
+
+```js
+interface DigitsProps {
+  digits: number; // the digit value
+  size: string; // the digit preset font-size or custom font-size
+  gutter: number; // digit Spacing, default is 8px
+  type: string; // animation type
+  duration: number; // sets the length of time that animation completed, Unit is milliseconds(1000)
+  stagger: boolean; // whether animation display with stagger effect
+  useEase: string; // transition easing function
+  format: string; // proivde number format use numeral (0,0)
+}
+```
+
 ## License
 
-MIT
+MIT [@xiaoluoboding](https://github.com/xiaoluoboding)