feat(useCounter): initialValue support ref

packages/shared/useCounter/index.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it } from 'vitest'
+import { ref } from 'vue-demi'
 import { useCounter } from '.'
 
 describe('useCounter', () => {
@@ -37,6 +38,47 @@ describe('useCounter', () => {
     expect(get()).toBe(25)
   })
 
+  it('should be update initial & counter', () => {
+    const initial = ref(0)
+    const { count, inc, dec, get, set, reset } = useCounter(initial)
+
+    expect(count.value).toBe(0)
+    expect(initial.value).toBe(0)
+    expect(get()).toBe(0)
+    inc()
+    expect(initial.value).toBe(1)
+    expect(count.value).toBe(1)
+    expect(get()).toBe(1)
+    inc(2)
+    expect(count.value).toBe(3)
+    expect(initial.value).toBe(3)
+    expect(get()).toBe(3)
+    dec()
+    expect(count.value).toBe(2)
+    expect(initial.value).toBe(2)
+    expect(get()).toBe(2)
+    dec(5)
+    expect(count.value).toBe(-3)
+    expect(initial.value).toBe(-3)
+    expect(get()).toBe(-3)
+    set(100)
+    expect(count.value).toBe(100)
+    expect(initial.value).toBe(100)
+    expect(get()).toBe(100)
+    reset()
+    expect(count.value).toBe(0)
+    expect(initial.value).toBe(0)
+    expect(get()).toBe(0)
+    reset(25)
+    expect(count.value).toBe(25)
+    expect(initial.value).toBe(25)
+    expect(get()).toBe(25)
+    reset()
+    expect(count.value).toBe(25)
+    expect(initial.value).toBe(25)
+    expect(get()).toBe(25)
+  })
+
   it('should be update limited counter', () => {
     const { count, inc, dec, get, set, reset } = useCounter(1, { min: -2, max: 15 })
 

packages/shared/useCounter/index.ts

@@ -1,4 +1,7 @@
-import { ref } from 'vue-demi'
+// eslint-disable-next-line no-restricted-imports
+import { ref, unref } from 'vue-demi'
+
+import type { MaybeRef } from 'vue-demi'
 
 export interface UseCounterOptions {
   min?: number
@@ -12,7 +15,8 @@ export interface UseCounterOptions {
  * @param [initialValue=0]
  * @param {Object} options
  */
-export function useCounter(initialValue = 0, options: UseCounterOptions = {}) {
+export function useCounter(initialValue: MaybeRef<number> = 0, options: UseCounterOptions = {}) {
+  let _initialValue = unref(initialValue)
   const count = ref(initialValue)
 
   const {
@@ -24,8 +28,8 @@ export function useCounter(initialValue = 0, options: UseCounterOptions = {}) {
   const dec = (delta = 1) => count.value = Math.max(min, count.value - delta)
   const get = () => count.value
   const set = (val: number) => (count.value = Math.max(min, Math.min(max, val)))
-  const reset = (val = initialValue) => {
-    initialValue = val
+  const reset = (val = _initialValue) => {
+    _initialValue = val
     return set(val)
   }