From e6acd632818630f5eb4c29bf22057dda870bcc60 Mon Sep 17 00:00:00 2001 From: okxiaoliang4 <353742991@qq.com> Date: Fri, 22 Apr 2022 18:17:45 +0800 Subject: [PATCH 1/6] feat(useToggle): new options --- packages/shared/useToggle/index.ts | 55 +++++++++++++++++++----------- 1 file changed, 35 insertions(+), 20 deletions(-) diff --git a/packages/shared/useToggle/index.ts b/packages/shared/useToggle/index.ts index 35b98901744..15086300c15 100644 --- a/packages/shared/useToggle/index.ts +++ b/packages/shared/useToggle/index.ts @@ -1,5 +1,14 @@ import type { Ref } from 'vue-demi' -import { isRef, ref } from 'vue-demi' +import { isRef, ref, unref } from 'vue-demi' +import type { MaybeRef } from '../utils' + +export interface UseToggleOptions { + trulyValue?: MaybeRef + falselyValue?: MaybeRef +} + +export function useToggle(initialValue?: Ref, options?: UseToggleOptions): (value?: T) => T +export function useToggle(initialValue?: T, options?: UseToggleOptions): [Ref, (value?: T) => T] /** * A boolean ref with a toggler @@ -7,27 +16,33 @@ import { isRef, ref } from 'vue-demi' * @see https://vueuse.org/useToggle * @param [initialValue=false] */ -export function useToggle(value: Ref): (value?: boolean) => boolean -export function useToggle(initialValue?: boolean): [Ref, (value?: boolean) => boolean] +export function useToggle(initialValue: MaybeRef = false, options: UseToggleOptions = {}) { + const { + trulyValue = true, + falselyValue = false, + } = options -export function useToggle(initialValue: boolean | Ref = false) { - if (isRef(initialValue)) { - return (value?: boolean) => { - initialValue.value = typeof value === 'boolean' - ? value - : !initialValue.value - return initialValue.value - } - } - else { - const boolean = ref(initialValue) - const toggle = (value?: boolean) => { - boolean.value = typeof value === 'boolean' - ? value - : !boolean.value - return boolean.value + const valueIsRef = isRef(initialValue) + const innerValue = ref(initialValue) as Ref + + function toggle(value?: boolean) { + const _toggle = (value?: boolean) => { + if (value! === unref(trulyValue)) + innerValue.value = unref(falselyValue) + else + innerValue.value = unref(trulyValue) + return innerValue.value } - return [boolean, toggle] as const + // has arguments + if (arguments.length) + return _toggle(value!) + else + return _toggle(innerValue.value) } + + if (valueIsRef) + return toggle + else + return [innerValue, toggle] } From cc4f0d3579e943b1c55a747474a595317c16b7ea Mon Sep 17 00:00:00 2001 From: okxiaoliang4 <353742991@qq.com> Date: Sat, 23 Apr 2022 01:29:12 +0800 Subject: [PATCH 2/6] chore: update --- packages/shared/useToggle/index.ts | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/packages/shared/useToggle/index.ts b/packages/shared/useToggle/index.ts index 15086300c15..1f0b11a25c2 100644 --- a/packages/shared/useToggle/index.ts +++ b/packages/shared/useToggle/index.ts @@ -7,8 +7,8 @@ export interface UseToggleOptions { falselyValue?: MaybeRef } -export function useToggle(initialValue?: Ref, options?: UseToggleOptions): (value?: T) => T -export function useToggle(initialValue?: T, options?: UseToggleOptions): [Ref, (value?: T) => T] +export function useToggle(initialValue: Ref, options?: UseToggleOptions): (value?: T) => T +export function useToggle(initialValue?: T, options?: UseToggleOptions): [Ref, (value?: T) => T] /** * A boolean ref with a toggler @@ -26,19 +26,15 @@ export function useToggle(initialValue: MaybeRef = false, options: UseT const innerValue = ref(initialValue) as Ref function toggle(value?: boolean) { - const _toggle = (value?: boolean) => { - if (value! === unref(trulyValue)) - innerValue.value = unref(falselyValue) - else - innerValue.value = unref(trulyValue) + // has arguments + if (arguments.length) { + innerValue.value = value! + return innerValue.value + } + else { + innerValue.value = innerValue.value === unref(trulyValue) ? unref(falselyValue) : unref(trulyValue) return innerValue.value } - - // has arguments - if (arguments.length) - return _toggle(value!) - else - return _toggle(innerValue.value) } if (valueIsRef) From 7f5a446e28b58e63b11a9dd2df8a3f2bb0bb4e5e Mon Sep 17 00:00:00 2001 From: okxiaoliang4 <353742991@qq.com> Date: Sat, 23 Apr 2022 01:33:14 +0800 Subject: [PATCH 3/6] chore: update --- packages/shared/useToggle/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/useToggle/index.ts b/packages/shared/useToggle/index.ts index 1f0b11a25c2..f8bb9672bb3 100644 --- a/packages/shared/useToggle/index.ts +++ b/packages/shared/useToggle/index.ts @@ -16,7 +16,7 @@ export function useToggle(in * @see https://vueuse.org/useToggle * @param [initialValue=false] */ -export function useToggle(initialValue: MaybeRef = false, options: UseToggleOptions = {}) { +export function useToggle(initialValue: MaybeRef = false, options: UseToggleOptions = {}) { const { trulyValue = true, falselyValue = false, From c1c8a0a9235e9a5fb74100c27fe1592d9cca020f Mon Sep 17 00:00:00 2001 From: okxiaoliang4 <353742991@qq.com> Date: Sat, 23 Apr 2022 01:33:46 +0800 Subject: [PATCH 4/6] chore(useToggle): test case --- packages/shared/useToggle/index.test.ts | 96 +++++++++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 packages/shared/useToggle/index.test.ts diff --git a/packages/shared/useToggle/index.test.ts b/packages/shared/useToggle/index.test.ts new file mode 100644 index 00000000000..2eb9f3e87fe --- /dev/null +++ b/packages/shared/useToggle/index.test.ts @@ -0,0 +1,96 @@ +import { isRef, ref, unref } from 'vue-demi' +import { useToggle } from '.' + +describe('useToggle', () => { + it('should be defined', () => { + expect(useToggle).toBeDefined() + }) + + it('default result', () => { + const result = useToggle() + const [value, toggle] = result + + expect(Array.isArray(result)).toBe(true) + expect(result.length).toBe(2) + + expect(typeof toggle).toBe('function') + expect(isRef(value)).toBe(true) + expect(unref(value)).toBe(false) + }) + + it('default result with initialValue', () => { + const result = useToggle(true) + const [value, toggle] = result + + expect(Array.isArray(result)).toBe(true) + expect(result.length).toBe(2) + + expect(typeof toggle).toBe('function') + expect(isRef(value)).toBe(true) + expect(unref(value)).toBe(true) + }) + + it('should toggle', () => { + const result = useToggle() + const [value, toggle] = result + + expect(toggle()).toBe(true) + expect(unref(value)).toBe(true) + + expect(toggle()).toBe(false) + expect(unref(value)).toBe(false) + }) + + it('should receive toggle param', () => { + const result = useToggle() + const [value, toggle] = result + + expect(toggle(false)).toBe(false) + expect(unref(value)).toBe(false) + + expect(toggle(true)).toBe(true) + expect(unref(value)).toBe(true) + }) + + it('ref initialValue', () => { + const isDark = ref(true) + const toggle = useToggle(isDark) + + expect(typeof toggle).toBe('function') + + expect(toggle()).toBe(false) + expect(unref(isDark)).toBe(false) + + expect(toggle()).toBe(true) + expect(unref(isDark)).toBe(true) + + expect(toggle(false)).toBe(false) + expect(unref(isDark)).toBe(false) + + expect(toggle(true)).toBe(true) + expect(unref(isDark)).toBe(true) + }) + + it('should toggle with truly & falsely', () => { + const status = ref('ON') + const toggle = useToggle(status, { + trulyValue: 'ON', + falselyValue: 'OFF', + }) + + expect(unref(status)).toBe('ON') + expect(typeof toggle).toBe('function') + + expect(toggle()).toBe('OFF') + expect(unref(status)).toBe('OFF') + + expect(toggle()).toBe('ON') + expect(unref(status)).toBe('ON') + + expect(toggle('OFF')).toBe('OFF') + expect(unref(status)).toBe('OFF') + + expect(toggle('ON')).toBe('ON') + expect(unref(status)).toBe('ON') + }) +}) From 7961ae9fd6b6de1e717ef0546e369623e75d6599 Mon Sep 17 00:00:00 2001 From: Jelf <353742991@qq.com> Date: Sat, 23 Apr 2022 17:22:44 +0800 Subject: [PATCH 5/6] Update packages/shared/useToggle/index.ts Co-authored-by: Anthony Fu --- packages/shared/useToggle/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/useToggle/index.ts b/packages/shared/useToggle/index.ts index f8bb9672bb3..068c89a598d 100644 --- a/packages/shared/useToggle/index.ts +++ b/packages/shared/useToggle/index.ts @@ -40,5 +40,5 @@ export function useToggle(initialValue: MaybeRef = false, options: UseT if (valueIsRef) return toggle else - return [innerValue, toggle] + return [innerValue, toggle] as const } From 79cfe693a5f624da9aad31c08c24c432d3b40768 Mon Sep 17 00:00:00 2001 From: okxiaoliang4 <353742991@qq.com> Date: Mon, 25 Apr 2022 14:52:06 +0800 Subject: [PATCH 6/6] chore: update --- packages/shared/useToggle/index.test.ts | 6 +++--- packages/shared/useToggle/index.ts | 16 ++++++++-------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/shared/useToggle/index.test.ts b/packages/shared/useToggle/index.test.ts index 2eb9f3e87fe..a9496e9c785 100644 --- a/packages/shared/useToggle/index.test.ts +++ b/packages/shared/useToggle/index.test.ts @@ -71,11 +71,11 @@ describe('useToggle', () => { expect(unref(isDark)).toBe(true) }) - it('should toggle with truly & falsely', () => { + it('should toggle with truthy & falsy', () => { const status = ref('ON') const toggle = useToggle(status, { - trulyValue: 'ON', - falselyValue: 'OFF', + truthyValue: 'ON', + falsyValue: 'OFF', }) expect(unref(status)).toBe('ON') diff --git a/packages/shared/useToggle/index.ts b/packages/shared/useToggle/index.ts index 068c89a598d..21c4ba69cd9 100644 --- a/packages/shared/useToggle/index.ts +++ b/packages/shared/useToggle/index.ts @@ -2,13 +2,13 @@ import type { Ref } from 'vue-demi' import { isRef, ref, unref } from 'vue-demi' import type { MaybeRef } from '../utils' -export interface UseToggleOptions { - trulyValue?: MaybeRef - falselyValue?: MaybeRef +export interface UseToggleOptions { + truthyValue?: MaybeRef + falsyValue?: MaybeRef } -export function useToggle(initialValue: Ref, options?: UseToggleOptions): (value?: T) => T -export function useToggle(initialValue?: T, options?: UseToggleOptions): [Ref, (value?: T) => T] +export function useToggle(initialValue: Ref, options?: UseToggleOptions): (value?: T) => T +export function useToggle(initialValue?: T, options?: UseToggleOptions): [Ref, (value?: T) => T] /** * A boolean ref with a toggler @@ -18,8 +18,8 @@ export function useToggle(in */ export function useToggle(initialValue: MaybeRef = false, options: UseToggleOptions = {}) { const { - trulyValue = true, - falselyValue = false, + truthyValue = true, + falsyValue = false, } = options const valueIsRef = isRef(initialValue) @@ -32,7 +32,7 @@ export function useToggle(initialValue: MaybeRef = false, options: UseT return innerValue.value } else { - innerValue.value = innerValue.value === unref(trulyValue) ? unref(falselyValue) : unref(trulyValue) + innerValue.value = innerValue.value === unref(truthyValue) ? unref(falsyValue) : unref(truthyValue) return innerValue.value } }