feat: useProgress

packages/core/index.ts

@@ -1,3 +1,4 @@
 export * from './useToast'
 export * from './useEllipsis'
 export * from './useLoading'
+export * from './useProgress'

packages/core/useProgress/index.ts

@@ -8,21 +8,25 @@ export interface UseProgressOptions {
   autoIncrementRules?: AutoIncrementRule[]
 }
 
-const DEFAULT_AUTO_INCREMENT_DELAY = 1000
-
 interface AutoIncrementRule {
   before: number // 多少进度之前
   increment: number // 自动增长幅度，默认 1
   delay: number // 延迟多久
 }
 
+const DEFAULT_AUTO_INCREMENT_RULE: AutoIncrementRule = {
+  before: 100,
+  increment: 1,
+  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) => {
+export const useProgress = (options: UseProgressOptions = {}) => {
   const {
     initialValue = 0,
     maxValue = 100,
@@ -31,43 +35,52 @@ export const useProgress = (options: UseProgressOptions) => {
   } = options
   const progress = ref(initialValue)
 
-  const setProgress = (value: number) => {
+  const setProgress = (value: number = 1) => {
     progress.value = Math.min(maxValue, Math.max(0, value))
   }
 
-  const increment = (value: number) => {
-    progress.value += value
+  const increment = (value: number = 1) => {
+    if (progress.value >= maxValue) return
+    progress.value = Math.min(maxValue, progress.value + value)
   }
 
   const decrement = (value: number) => {
-    progress.value -= value
+    if (progress.value <= 0) return
+    progress.value = Math.min(0, progress.value - value)
   }
 
   const reset = () => {
     progress.value = initialValue
   }
 
-  const matchRule = () =>
-    autoIncrementRules.find((rule) => progress.value <= rule.before) ??
-    autoIncrementRules[autoIncrementRules.length - 1]
+  const matchRule = () => {
+    if (autoIncrementRules.length === 0) return DEFAULT_AUTO_INCREMENT_RULE
+    return (
+      autoIncrementRules.find((_) => progress.value <= _.before) ??
+      autoIncrementRules[autoIncrementRules.length - 1]
+    )
+  }
 
   const delay = computed(() => {
     const rule = matchRule()
     if (rule) {
       return rule.delay
     }
-    return DEFAULT_AUTO_INCREMENT_DELAY
+    return DEFAULT_AUTO_INCREMENT_RULE.delay
   })
 
   const timer = ref()
 
   const startAutoIncrement = () => {
+    if (progress.value >= maxValue) return
+    if (progress.value >= 99) return
     timer.value = setTimeout(() => {
       if (timer.value) {
         clearTimeout(timer.value)
       }
       const rule = matchRule()
       increment(rule.increment)
+      startAutoIncrement()
     }, delay.value)
   }
 

src/demo/UseProgress.vue

@@ -1,30 +1,22 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useLoading } from '@noi/core'
+import { useProgress } from '@noi/core'
 
-const { isLoading, start, stop } = useLoading()
-
-// const upload = () => {
-//   start();
-
-//   setTimeout(() => {
-//     stop()
-//   }, 1000)
-// }
-
-// const loading = ref(false)
-
-// const upload = () => {
-//   loading.value = true
-
-//   setTimeout(() => {
-//     loading.value = false
-//   }, 1000)
-// }
+const { progress, increment, startAutoIncrement } = useProgress({
+  autoIncrementRules: [
+    { before: 30, delay: 100, increment: 2 },
+    { before: 50, delay: 500, increment: 1 },
+    { before: 70, delay: 300, increment: 3 },
+  ],
+})
 </script>
 
 <template>
-  <div v-show="isLoading">loading...</div>
-  <button @click="start">start loading</button>
-  <button @click="stop">stop loading</button>
+  <div>
+    <div>{{ progress }}</div>
+    <template v-for="i in progress">|</template>
+  </div>
+
+  <button @click="increment()">increment</button>
+  <button @click="startAutoIncrement()">auto increment</button>
 </template>