feat: add useToogle & useBoolean

src/index.ts

@@ -5,3 +5,5 @@ export * from './useScroll'
 export * from './useScrollRef'
 export * from './useWindowScroll'
 export * from './useEventRef'
+export * from './useToggle'
+export * from './useBoolean'

src/useBoolean.ts

@@ -0,0 +1,20 @@
+import { Ref } from 'vue'
+import { useToggle } from './useToggle'
+
+interface IBoolean {
+  state: Ref<boolean>
+  setTrue: () => void
+  setFalse: () => void
+  toggle: (next?: boolean) => void
+}
+
+export function useBoolean(defaultValue: boolean = false): IBoolean {
+  const { state, toggle } = useToggle(defaultValue)
+
+  return {
+    state,
+    toggle,
+    setTrue: () => toggle(true),
+    setFalse: () => toggle(false)
+  }
+}

src/useScroll.ts

@@ -12,7 +12,7 @@ export function useScroll(target: Target): ScrollState {
   }
   const state = reactive({
     x: 0,
-    y: 0,
+    y: 0
   })
   const eventTarget = useEvent(
     'scroll',

src/useScrollRef.ts

@@ -10,6 +10,6 @@ export function useScrollRef(): IScrollState {
   const state = useScroll(target)
   return {
     target,
-    ...state,
+    ...state
   }
 }

src/useToggle.ts

@@ -0,0 +1,56 @@
+import { ref, Ref } from 'vue'
+
+export type ToggleParamType = string | number | boolean | undefined | null
+
+export interface ToggleReturn<T extends ToggleParamType = ToggleParamType> {
+  state: Ref<T>
+  toggle: (next?: boolean) => void
+  setDefault: () => void
+  setRight: () => void
+}
+
+export interface ITwoType<T extends ToggleParamType = ToggleParamType, U extends ToggleParamType = ToggleParamType>
+  extends Omit<ToggleReturn<T>, 'state' | 'toggle'> {
+  state: Ref<T | U>
+  toggle: (next?: T | U) => void
+}
+
+export interface IToggle {
+  (): ToggleReturn<boolean>
+  <T extends ToggleParamType = ToggleParamType>(defaultValue: T): ToggleReturn<T>
+  <T extends ToggleParamType = ToggleParamType, U extends ToggleParamType = ToggleParamType>(
+    defaultValue: T,
+    resetValue?: U
+  ): ITwoType<T, U>
+}
+
+export const useToggle: IToggle = <
+  T extends ToggleParamType = ToggleParamType,
+  U extends ToggleParamType = ToggleParamType
+>(
+    defaultValue: T = false as T,
+    reverseValue?: U
+  ) => {
+  const state = ref(defaultValue) as Ref<T | U>
+  const reverseTo = (reverseValue === undefined ? !defaultValue : reverseValue) as T | U
+
+  const toggle = (next?: T | U) => {
+    if (next !== undefined) {
+      state.value = next
+    } else {
+      state.value = state.value === defaultValue ? reverseTo : defaultValue
+    }
+  }
+  const setDefault = () => {
+    state.value = defaultValue
+  }
+  const setRight = () => {
+    state.value = reverseTo
+  }
+  return {
+    state,
+    setDefault,
+    setRight,
+    toggle
+  }
+}

tests/useBoolean.test.ts

@@ -0,0 +1,45 @@
+import { Ref } from 'vue'
+import { useBoolean } from '../src/useBoolean'
+
+describe('test useBoolean', () => {
+  let state: Ref<boolean>
+  let toggle: (next?: boolean) => void
+  let setTrue: () => void
+  let setFalse: () => void
+  beforeEach(() => {
+    const result = useBoolean()
+    state = result.state
+    toggle = result.toggle
+    setTrue = result.setTrue
+    setFalse = result.setFalse
+  })
+
+  test('init State should be false', () => {
+    expect(state.value).toBe(false)
+  })
+
+  test('state.value should be toggled after invoking toggle with none params', () => {
+    expect(state.value).toBe(false)
+    toggle()
+    expect(state.value).toBe(true)
+    toggle()
+    expect(state.value).toBe(false)
+  })
+  test('state.value should be set to specify value after invoking toggle with one parameter', () => {
+    expect(state.value).toBe(false)
+    toggle(true)
+    expect(state.value).toBe(true)
+    toggle(false)
+    expect(state.value).toBe(false)
+  })
+  test('state.value should be true after invoking setTrue', () => {
+    setTrue()
+    expect(state.value).toBe(true)
+  })
+  test('state.value should be false after invoking setFalse', () => {
+    toggle(true)
+    expect(state.value).toBe(true)
+    setFalse()
+    expect(state.value).toBe(false)
+  })
+})

tests/useToggle.test.ts

@@ -0,0 +1,131 @@
+import { Ref } from 'vue'
+import { useToggle } from '../src/useToggle'
+
+describe('test useToggle with none params', () => {
+  let state: Ref<boolean>
+  let toggle: (next?: boolean) => void
+  let setDefault: () => void
+  let setRight: () => void
+  beforeEach(() => {
+    const result = useToggle()
+    state = result.state
+    toggle = result.toggle
+    setDefault = result.setDefault
+    setRight = result.setRight
+  })
+
+  test('init State should be false', () => {
+    expect(state.value).toBe(false)
+  })
+
+  test('state.value should be toggled after invoking toggle with none params', () => {
+    expect(state.value).toBe(false)
+    toggle()
+    expect(state.value).toBe(true)
+    toggle()
+    expect(state.value).toBe(false)
+  })
+  test('state.value should be set to specify value after invoking toggle with one parameter', () => {
+    expect(state.value).toBe(false)
+    toggle(true)
+    expect(state.value).toBe(true)
+    toggle(false)
+    expect(state.value).toBe(false)
+  })
+  test('state.value should be false after invoking setDefault', () => {
+    toggle(true)
+    expect(state.value).toBe(true)
+    setDefault()
+    expect(state.value).toBe(false)
+  })
+  test('state.value should be true after invoking setRight', () => {
+    setRight()
+    expect(state.value).toBe(true)
+  })
+})
+
+describe('test useToggle with one parameter', () => {
+  let state: Ref<boolean>
+  let toggle: (next?: boolean) => void
+  let setDefault: () => void
+  let setRight: () => void
+  beforeEach(() => {
+    const result = useToggle(true)
+    state = result.state
+    toggle = result.toggle
+    setDefault = result.setDefault
+    setRight = result.setRight
+  })
+
+  test('init State should be true', () => {
+    expect(state.value).toBe(true)
+  })
+
+  test('state.value should be toggled after invoking toggle with none params', () => {
+    expect(state.value).toBe(true)
+    toggle()
+    expect(state.value).toBe(false)
+    toggle()
+    expect(state.value).toBe(true)
+  })
+  test('state.value should be set to specify value after invoking toggle with one parameter', () => {
+    expect(state.value).toBe(true)
+    toggle(false)
+    expect(state.value).toBe(false)
+    toggle(true)
+    expect(state.value).toBe(true)
+  })
+  test('state.value should be true after invoking setDefault', () => {
+    toggle(false)
+    expect(state.value).toBe(false)
+    setDefault()
+    expect(state.value).toBe(true)
+  })
+  test('state.value should be false after invoking setRight', () => {
+    setRight()
+    expect(state.value).toBe(false)
+  })
+})
+
+describe('test useToggle with two parameters', () => {
+  let state: Ref<'abc' | 'cde'>
+  let toggle: (next?: 'abc' | 'cde') => void
+  let setDefault: () => void
+  let setRight: () => void
+  beforeEach(() => {
+    const result = useToggle('abc', 'cde')
+    state = result.state
+    toggle = result.toggle
+    setDefault = result.setDefault
+    setRight = result.setRight
+  })
+
+  test('init State should be abc', () => {
+    expect(state.value).toBe('abc')
+  })
+
+  test('state.value should be toggled after invoking toggle with none params', () => {
+    expect(state.value).toBe('abc')
+    toggle()
+    expect(state.value).toBe('cde')
+    toggle()
+    expect(state.value).toBe('abc')
+  })
+  test('state.value should be set to specify value after invoking toggle with one parameter', () => {
+    expect(state.value).toBe('abc')
+    toggle('cde')
+    expect(state.value).toBe('cde')
+    toggle('abc')
+    expect(state.value).toBe('abc')
+  })
+  test('state.value should be abc after invoking setDefault', () => {
+    toggle('cde')
+    expect(state.value).toBe('cde')
+    setDefault()
+    expect(state.value).toBe('abc')
+  })
+  test('state.value should be cde after invoking setRight', () => {
+    setRight()
+    expect(state.value).toBe('cde')
+  })
+})