docs: update readme & demo

Author: jizai1125

README.md

@@ -1,74 +1,75 @@
 # vue-countup-v3
 
->  Vue 3 component wrap for *countUp*.js
+>  Vue 3 component wrap for *countUp.js*
 
 ## Installation
 
 ```bash
 # npm
 $ npm i countup.js vue-countup-v3 -S
-# yarn
+# or yarn
 $ yarn add countup.js vue-countup-v3 -S
 ```
 
 ## Usage
 
-**简单示例**
+**简单示例（simple usage）**
 
 ```vue
 <script setup lang="ts">
 import CountUp from 'vue-countup-v3'
 </script>
 
 <template>
-  <count-up :endVal="2000"></count-up>
+  <count-up :end-val="2000"></count-up>
 </template>
-
 ```
 
-**完整示例**
+<details>
+<summary style="font-weight:bold;">完整示例（full usage）</summary>
 
-```vue
+```html
 <script setup lang="ts">
-import CountUpV3 from 'vue-countup-v3'
-import type { CountUp } from 'countup.js';
-// coutup.js options
-const options = {
-  decimalPlaces: 2,
-  // ...
-}
-const onInit = (countup: CountUp) => {
-  console.log('init', countup)
-}
-const onFinished = () => {
-  console.log('finished')
-}
+  import CountUp from 'vue-countup-v3'
+  import type { CountUp as ICountUp } from 'countup.js'
+  // coutup.js options
+  const options = {
+    decimalPlaces: 2
+    // ...
+  }
+  const onInit = (countup: ICountUp) => {
+    console.log('init', countup)
+  }
+  const onFinished = () => {
+    console.log('finished')
+  }
 </script>
 
 <template>
   <count-up
-    :endVal="2000"
+    :end-val="2000"
     :duration="3"
     :loop="2"
     :options="options"
     @init="onInit"
     @finished="onFinished"></count-up>
 </template>
-
 ```
 
+</details>
+
 ## 组件属性（Component Properties）
 
-**以下属性同 coutup.js 配置项**
+**以下属性同 coutup.js 配置项（same as countup.js properties）**
 
-|   Name   |       Type       | Default |                         Description                          |
-| :------: | :--------------: | :-----: | :----------------------------------------------------------: |
-|  endVal  | Number \| String |    -    |                            结束值                            |
-| startVal | Number \| String |    0    |                            起始值                            |
-| duration |      Number      |   2.5   |                      动画时长，单位：秒                      |
-| options  |      Object      |    -    | [countUp.js](https://github.com/inorganik/countUp.js)  options 配置项 |
+|   Name   |       Type       | Default |                             Description                              |
+| :------: | :--------------: | :-----: | :------------------------------------------------------------------: |
+|  endVal  | Number \| String |    -    |                                结束值                                |
+| startVal | Number \| String |    0    |                                起始值                                |
+| duration |      Number      |   2.5   |                          动画时长，单位：秒                          |
+| options  |      Object      |    -    | [countUp.js](https://github.com/inorganik/countUp.js) options 配置项 |
 
-**以下为组件自有属性**
+**以下为组件拓展属性（extension properties）**
 
 |   Name   |       Type        | Default |              Description               |
 | :------: | :---------------: | :-----: | :------------------------------------: |
@@ -77,52 +78,52 @@ const onFinished = () => {
 
 ## coutup.js 说明
 
-see more [countUp.js](https://github.com/inorganik/countUp.js) 
+see more [countUp.js](https://github.com/inorganik/countUp.js)
 
 ### 配置项（**Options** ）
 
 ```typescript
 interface CountUpOptions {
-  startVal?: number; // number to start at (0) 开始数值，默认 0
-  decimalPlaces?: number; // number of decimal places (0) 小数点 位数
-  duration?: number; // animation duration in seconds (2) 动画时长
-  useGrouping?: boolean; // example: 1,000 vs 1000 (true) 是否使用千分位
-  useEasing?: boolean; // ease animation (true) 动画函数类型
-  smartEasingThreshold?: number; // smooth easing for large numbers above this if useEasing (999)
-  smartEasingAmount?: number; // amount to be eased for numbers above threshold (333)
-  separator?: string; // grouping separator (',') 千位分隔符
-  decimal?: string; // decimal ('.') 小数点分隔符
+  startVal?: number // number to start at (0) 开始数值，默认 0
+  decimalPlaces?: number // number of decimal places (0) 小数点 位数
+  duration?: number // animation duration in seconds (2) 动画时长
+  useGrouping?: boolean // example: 1,000 vs 1000 (true) 是否使用千分位
+  useEasing?: boolean // ease animation (true) 动画函数类型
+  smartEasingThreshold?: number // smooth easing for large numbers above this if useEasing (999)
+  smartEasingAmount?: number // amount to be eased for numbers above threshold (333)
+  separator?: string // grouping separator (',') 千位分隔符
+  decimal?: string // decimal ('.') 小数点分隔符
   // easingFn: easing function for animation (easeOutExpo) 动画函数
-  easingFn?: (t: number, b: number, c: number, d: number) => number;
-  formattingFn?: (n: number) => string; // this function formats result 格式化结果
-  prefix?: string; // text prepended to result 数值前缀
-  suffix?: string; // text appended to result 数值后缀
-  numerals?: string[]; // numeral glyph substitution 数字符号替换 0 - 9，例如替换为 [a,b,c,d,e,f,g,h,i,j]
-  enableScrollSpy?: boolean; // start animation when target is in view 在可视范围内才开始动画
-  scrollSpyDelay?: number; // delay (ms) after target comes into view  目标进入可视范围内后的延迟时间(毫秒)
+  easingFn?: (t: number, b: number, c: number, d: number) => number
+  formattingFn?: (n: number) => string // this function formats result 格式化结果
+  prefix?: string // text prepended to result 数值前缀
+  suffix?: string // text appended to result 数值后缀
+  numerals?: string[] // numeral glyph substitution 数字符号替换 0 - 9，例如替换为 [a,b,c,d,e,f,g,h,i,j]
+  enableScrollSpy?: boolean // start animation when target is in view 在可视范围内才开始动画
+  scrollSpyDelay?: number // delay (ms) after target comes into view  目标进入可视范围内后的延迟时间(毫秒)
 }
 ```
 
 ### **方法（Methods）**
 
-Toggle pause/resume 切换暂停/回复
+Toggle pause/resume 切换暂停/恢复
 
 ```js
-countUp.pauseResume();
+countUp.pauseResume()
 ```
 
 Reset the animation: 重置数值
 
 ```js
-countUp.reset();
+countUp.reset()
 ```
 
-Update the end value and animate:  修改结束值
+Update the end value and animate: 修改结束值且继续动画
 
 ```js
-countUp.update(1000);
+countUp.update(1000)
 ```
 
 ## License
 
-MIT
+MIT

demo/App.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import CountUpV3 from '../dist/vue-countup-v3.es.js'
-import type { CountUp } from 'countup.js'
+import CountUp from '../src/countup.vue'
+import type { CountUp as ICountUp } from 'countup.js'
 const options = {
   decimalPlaces: 2
 }
-const onInit = (countup: CountUp) => {
+const onInit = (countup: ICountUp) => {
   console.log('init', countup)
 }
 const onFinished = () => {
@@ -14,14 +14,14 @@ const onFinished = () => {
 
 <template>
   <div>vue countup</div>
-  <count-up-v3
+  <count-up
     class="coutup"
     :end-val="2000"
     :duration="3"
     :loop="2"
     :options="options"
     @init="onInit"
-    @finished="onFinished"></count-up-v3>
+    @finished="onFinished"></count-up>
 </template>
 
 <style>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-countup-v3",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Vue 3 component wrap for countUp.js",
   "keywords": [
     "vue3",