From 168cb112f3c0af436c6c31393a100e5e35d02021 Mon Sep 17 00:00:00 2001
From: dodfsk <frv228far173@gmail.com>
Date: Wed, 11 Dec 2024 04:02:05 +0800
Subject: [PATCH] feat(n-number-animation): add on-update prop

---
 CHANGELOG.en-US.md                            |  6 ++
 CHANGELOG.zh-CN.md                            |  6 ++
 .../demos/enUS/index.demo-entry.md            |  2 +
 .../demos/enUS/update.demo.vue                | 55 +++++++++++++++++++
 .../demos/zhCN/index.demo-entry.md            |  2 +
 .../demos/zhCN/update.demo.vue                | 55 +++++++++++++++++++
 src/number-animation/src/NumberAnimation.tsx  |  2 +
 7 files changed, 128 insertions(+)
 create mode 100644 src/number-animation/demos/enUS/update.demo.vue
 create mode 100644 src/number-animation/demos/zhCN/update.demo.vue

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 4da53bc65a1..a1e528d82b1 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+### Features
+
+- `n-number-animation` adds `on-update` prop.
+
 ## 2.40.3
 
 `2024-12-02`
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 163dc6a4934..2a1f70a5549 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+### Features
+
+- `n-number-animation` 新增 `on-update` 属性
+
 ## 2.40.3
 
 `2024-12-02`
diff --git a/src/number-animation/demos/enUS/index.demo-entry.md b/src/number-animation/demos/enUS/index.demo-entry.md
index 96adb33ef57..d0992353eab 100644
--- a/src/number-animation/demos/enUS/index.demo-entry.md
+++ b/src/number-animation/demos/enUS/index.demo-entry.md
@@ -10,6 +10,7 @@ precision.vue
 separator.vue
 intl.vue
 finish.vue
+update.vue
 ```
 
 ## API
@@ -26,6 +27,7 @@ finish.vue
 | show-separator | `boolean` | `false` | Whether to show separator. | 2.23.2 |
 | to | `number` | `undefined` | Target value. | 2.23.2 |
 | on-finish | `() => void` | `undefined` | The callback on animation is finished. | 2.31.0 |
+| on-update | `(value: number) => void` | `undefined` | The number animation update callback. | NEXT_VERSION |
 
 ### NumberAnimation Methods
 
diff --git a/src/number-animation/demos/enUS/update.demo.vue b/src/number-animation/demos/enUS/update.demo.vue
new file mode 100644
index 00000000000..f29bf9adf99
--- /dev/null
+++ b/src/number-animation/demos/enUS/update.demo.vue
@@ -0,0 +1,55 @@
+<markdown>
+# Update callback
+</markdown>
+
+<script lang="ts">
+import type { NumberAnimationInst } from 'naive-ui'
+import { round } from 'lodash-es'
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const numberAnimationInstRef = ref<NumberAnimationInst | null>(null)
+    const updateValue = ref<number>(0)
+    const precision = 2
+    return {
+      numberAnimationInstRef,
+      updateValue,
+      precision,
+      handleClick() {
+        numberAnimationInstRef.value?.play()
+      },
+      handleUpdate(value: number) {
+        updateValue.value = round(value, precision)
+      }
+    }
+  }
+})
+</script>
+
+<template>
+  <n-space vertical>
+    <n-statistic label="NumberAnimation sync progress bar" tabular-nums>
+      <n-number-animation
+        ref="numberAnimationInstRef"
+        show-separator
+        :from="0"
+        :to="100"
+        :active="false"
+        :duration="5 * 1000"
+        :precision="precision"
+        @update="handleUpdate"
+      />
+      <div
+        :style="{
+          width: `${updateValue}%`,
+          height: '4px',
+          backgroundColor: '#000',
+        }"
+      />
+    </n-statistic>
+    <n-button @click="handleClick">
+      Play
+    </n-button>
+  </n-space>
+</template>
diff --git a/src/number-animation/demos/zhCN/index.demo-entry.md b/src/number-animation/demos/zhCN/index.demo-entry.md
index e2e363846b5..538017e9760 100644
--- a/src/number-animation/demos/zhCN/index.demo-entry.md
+++ b/src/number-animation/demos/zhCN/index.demo-entry.md
@@ -10,6 +10,7 @@ precision.vue
 separator.vue
 intl.vue
 finish.vue
+update.vue
 ```
 
 ## API
@@ -26,6 +27,7 @@ finish.vue
 | show-separator | `boolean` | `false` | 是否显示分隔符 | 2.23.2 |
 | to | `number` | `undefined` | 目标值 | 2.23.2 |
 | on-finish | `() => void` | `undefined` | 动画结束的回调 | 2.31.0 |
+| on-update | `(value: number) => void` | `undefined` | 动画更新的回调 | NEXT_VERSION |
 
 ### NumberAnimation Methods
 
diff --git a/src/number-animation/demos/zhCN/update.demo.vue b/src/number-animation/demos/zhCN/update.demo.vue
new file mode 100644
index 00000000000..0912a982bdf
--- /dev/null
+++ b/src/number-animation/demos/zhCN/update.demo.vue
@@ -0,0 +1,55 @@
+<markdown>
+# 更新的回调
+</markdown>
+
+<script lang="ts">
+import type { NumberAnimationInst } from 'naive-ui'
+import { round } from 'lodash-es'
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const numberAnimationInstRef = ref<NumberAnimationInst | null>(null)
+    const updateValue = ref<number>(0)
+    const precision = 2
+    return {
+      numberAnimationInstRef,
+      updateValue,
+      precision,
+      handleClick() {
+        numberAnimationInstRef.value?.play()
+      },
+      handleUpdate(value: number) {
+        updateValue.value = round(value, precision)
+      }
+    }
+  }
+})
+</script>
+
+<template>
+  <n-space vertical>
+    <n-statistic label="数值动画同步进度条" tabular-nums>
+      <n-number-animation
+        ref="numberAnimationInstRef"
+        show-separator
+        :from="0"
+        :to="100"
+        :active="false"
+        :duration="5 * 1000"
+        :precision="precision"
+        @update="handleUpdate"
+      />
+      <div
+        :style="{
+          width: `${updateValue}%`,
+          height: '4px',
+          backgroundColor: '#000',
+        }"
+      />
+    </n-statistic>
+    <n-button @click="handleClick">
+      开始
+    </n-button>
+  </n-space>
+</template>
diff --git a/src/number-animation/src/NumberAnimation.tsx b/src/number-animation/src/NumberAnimation.tsx
index 5ecb2836e44..37b93c024f7 100644
--- a/src/number-animation/src/NumberAnimation.tsx
+++ b/src/number-animation/src/NumberAnimation.tsx
@@ -31,6 +31,7 @@ export const numberAnimationProps = {
     type: Number,
     default: 2000
   },
+  onUpdate: Function as PropType<(value: number) => void>,
   onFinish: Function as PropType<() => void>
 }
 
@@ -58,6 +59,7 @@ export default defineComponent({
     let animating = false
     const onUpdate = (currentValue: number): void => {
       displayedValueRef.value = currentValue
+      props.onUpdate?.(currentValue)
     }
     const onFinish = (): void => {
       displayedValueRef.value = props.to