feat(useClamp): composable computed usage improvements (#2696)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/math/useClamp/index.md

@@ -15,3 +15,12 @@ const min = ref(0)
 const max = ref(10)
 const value = useClamp(0, min, max)
 ```
+
+You can also pass a `ref` and the returned `computed` will be updated when the source ref changes:
+
+```ts
+import { useClamp } from '@vueuse/math'
+
+const number = ref(0)
+const clamped = useClamp(number, 0, 10)
+```

packages/math/useClamp/index.test.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue-demi'
+import { computed, isReadonly, ref } from 'vue-demi'
 import { useClamp } from '.'
 
 describe('useClamp', () => {
@@ -49,4 +49,42 @@ describe('useClamp', () => {
     v.value = -100
     expect(v.value).toBe(-10)
   })
+
+  it('should work with computed', () => {
+    const baseRef = ref(10)
+    const value = computed(() => baseRef.value)
+    const min = ref(0)
+    const max = ref(100)
+
+    const v = useClamp(value, min, max)
+
+    expect(v.value).toBe(10)
+
+    baseRef.value = -10
+    expect(v.value).toBe(0)
+
+    baseRef.value = 110
+    expect(v.value).toBe(100)
+
+    expect(isReadonly(v)).toBeTruthy()
+  })
+
+  it('should work with function', () => {
+    const baseRef = ref(10)
+    const value = () => baseRef.value
+    const min = ref(0)
+    const max = ref(100)
+
+    const v = useClamp(value, min, max)
+
+    expect(v.value).toBe(10)
+
+    baseRef.value = -10
+    expect(v.value).toBe(0)
+
+    baseRef.value = 110
+    expect(v.value).toBe(100)
+
+    expect(isReadonly(v)).toBeTruthy()
+  })
 })

packages/math/useClamp/index.ts

@@ -1,7 +1,19 @@
-import type { Ref } from 'vue-demi'
-import { computed, ref } from 'vue-demi'
-import type { MaybeComputedRef, MaybeRef } from '@vueuse/shared'
-import { clamp, resolveUnref } from '@vueuse/shared'
+import type { ComputedRef, Ref } from 'vue-demi'
+import { computed, isReadonly, ref } from 'vue-demi'
+import type { MaybeComputedRef, MaybeReadonlyRef, MaybeRef } from '@vueuse/shared'
+import { clamp, isFunction, resolveUnref } from '@vueuse/shared'
+
+export function useClamp(
+  value: MaybeReadonlyRef<number>,
+  min: MaybeComputedRef<number>,
+  max: MaybeComputedRef<number>,
+): ComputedRef<number>
+
+export function useClamp(
+  value: MaybeRef<number>,
+  min: MaybeComputedRef<number>,
+  max: MaybeComputedRef<number>,
+): Ref<number>
 
 /**
  * Reactively clamp a value between two other values.
@@ -11,7 +23,10 @@ import { clamp, resolveUnref } from '@vueuse/shared'
  * @param min
  * @param max
  */
-export function useClamp(value: MaybeRef<number>, min: MaybeComputedRef<number>, max: MaybeComputedRef<number>): Ref<number> {
+export function useClamp(value: MaybeComputedRef<number>, min: MaybeComputedRef<number>, max: MaybeComputedRef<number>) {
+  if (isFunction(value) || isReadonly(value))
+    return computed(() => clamp(resolveUnref(value), resolveUnref(min), resolveUnref(max)))
+
   const _value = ref(value)
   return computed<number>({
     get() {