fix(useToggle): accept overrides for toggle function, close #585

vueuse · Jul 5, 2021 · 14f2e28 · 14f2e28
1 parent 9b6afa6
commit 14f2e28
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@ Collection of essential Vue Composition Utilities
 <a href="https://www.npmjs.com/package/@vueuse/core" target="__blank"><img src="https://img.shields.io/npm/v/@vueuse/core?color=a1b858&label=" alt="NPM version"></a>
 <a href="https://www.npmjs.com/package/@vueuse/core" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@vueuse/core?color=50a36f&label="></a>
 <a href="https://vueuse.org" target="__blank"><img src="https://img.shields.io/static/v1?label=&message=docs%20%26%20demos&color=1e8a7a" alt="Docs & Demos"></a>
-<img alt="Function Count" src="https://img.shields.io/badge/-130%20functions-13708a">
+<img alt="Function Count" src="https://img.shields.io/badge/-131%20functions-13708a">
 <br>
 <a href="https://github.com/vueuse/vueuse" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/vueuse/vueuse?style=social"></a>
 </p>

diff --git a/packages/shared/useToggle/index.md b/packages/shared/useToggle/index.md
@@ -33,10 +33,12 @@ const toggleDark = useToggle(isDark)
  * @see https://vueuse.org/useToggle
  * @param [initialValue=false]
  */
-export declare function useToggle(value: Ref<boolean>): () => boolean
+export declare function useToggle(
+  value: Ref<boolean>
+): (value?: boolean) => boolean
 export declare function useToggle(
   initialValue?: boolean
-): [Ref<boolean>, () => boolean]
+): [Ref<boolean>, (value?: boolean) => boolean]
 ```
 
 ## Source

diff --git a/packages/shared/useToggle/index.ts b/packages/shared/useToggle/index.ts
@@ -6,16 +6,24 @@ import { isRef, Ref, ref } from 'vue-demi'
  * @see https://vueuse.org/useToggle
  * @param [initialValue=false]
  */
-export function useToggle(value: Ref<boolean>): () => boolean
-export function useToggle(initialValue?: boolean): [Ref<boolean>, () => boolean]
+export function useToggle(value: Ref<boolean>): (value?: boolean) => boolean
+export function useToggle(initialValue?: boolean): [Ref<boolean>, (value?: boolean) => boolean]
 
 export function useToggle(initialValue: boolean | Ref<boolean> = false) {
   if (isRef(initialValue)) {
-    return () => (initialValue.value = !initialValue.value)
+    return (value?: boolean) => {
+      initialValue.value = value != null
+        ? value
+        : !initialValue.value
+    }
   }
   else {
     const boolean = ref(initialValue)
-    const toggle = () => (boolean.value = !boolean.value)
+    const toggle = (value?: boolean) => {
+      boolean.value = value != null
+        ? value
+        : !boolean.value
+    }
 
     return [boolean, toggle] as const
   }