feat: useProgress

packages/core/useProgress/index.ts

@@ -20,37 +20,30 @@ const DEFAULT_AUTO_INCREMENT_RULE: AutoIncrementRule = {
   delay: 1000,
 }
 
-/**
- * 1. 计算百分比 0...100
- * 3. 提供step能力，可以动态管理进度，但最终的finish需要明确告知
- * 6. 提供进度条描述文案 [{ value: 10, text: '111'}, { value: 20, text: '222' }]
- * 7. 提供onChange option，当进度变化时，会将进度返回，开发者可以通过这个callback做其他额外处理
- */
 export const useProgress = (options: UseProgressOptions = {}) => {
   const {
     initialValue = 0,
     maxValue = 100,
     autoIncrementRules = [],
     onChange,
   } = options
-  const progress = ref(initialValue)
-
-  const setProgress = (value: number = 1) => {
-    progress.value = Math.min(maxValue, Math.max(0, value))
-  }
+  const currentValue = ref(0)
+  const progress = computed(() =>
+    parseFloat(((currentValue.value / maxValue) * 100).toFixed(2))
+  )
 
   const increment = (value: number = 1) => {
-    if (progress.value >= maxValue) return
-    progress.value = Math.min(maxValue, progress.value + value)
+    if (currentValue.value >= maxValue) return
+    currentValue.value = Math.min(maxValue, currentValue.value + value)
   }
 
   const decrement = (value: number) => {
-    if (progress.value <= 0) return
-    progress.value = Math.min(0, progress.value - value)
+    if (currentValue.value <= 0) return
+    currentValue.value = Math.min(0, currentValue.value - value)
   }
 
   const reset = () => {
-    progress.value = initialValue
+    currentValue.value = initialValue
   }
 
   const matchRule = () => {
@@ -94,7 +87,6 @@ export const useProgress = (options: UseProgressOptions = {}) => {
 
   return {
     progress,
-    setProgress,
     increment,
     decrement,
     isComplete,

src/demo/UseProgress.vue

@@ -3,20 +3,27 @@ import { ref } from 'vue'
 import { useProgress } from '@noi/core'
 
 const { progress, increment, startAutoIncrement } = useProgress({
+  maxValue: 19000,
   autoIncrementRules: [
     { before: 30, delay: 100, increment: 2 },
     { before: 50, delay: 500, increment: 1 },
     { before: 70, delay: 300, increment: 3 },
   ],
 })
+
+/**
+ * 3. 提供step能力，可以动态管理进度，但最终的finish需要明确告知
+ * 6. 提供进度条描述文案 [{ value: 10, text: '111'}, { value: 20, text: '222' }]
+ * 7. 提供onChange option，当进度变化时，会将进度返回，开发者可以通过这个callback做其他额外处理
+ */
 </script>
 
 <template>
   <div>
-    <div>{{ progress }}</div>
-    <template v-for="i in progress">|</template>
+    <div>{{ progress }}%</div>
+    <template v-for="i in Math.floor(progress)">|</template>
   </div>
 
-  <button @click="increment()">increment</button>
+  <button @click="increment(1)">increment</button>
   <button @click="startAutoIncrement()">auto increment</button>
 </template>