Proposal: `useToggle` new options

Clear and concise description of the problem

Sometimes we need to toggle 0 or 1. useToggle does not do this very well.

Suggested solution

export interface UseToggleOptions<Truly, Falsely> {
  trulyValue?: MaybeRef<Truly>
  falselyValue?: MaybeRef<Falsely>
}

export function useToggle<Truly, Falsely, T = Truly | Falsely>(initialValue: Ref<T>, options?: UseToggleOptions<Truly, Falsely>): (value?: T) => T
export function useToggle<Truly = true, Falsely = false, T = Truly | Falsely>(initialValue?: T, options?: UseToggleOptions<Truly, Falsely>): [Ref<T>, (value?: T) => T]

/**
 * A boolean ref with a toggler
 *
 * @see https://vueuse.org/useToggle
 * @param [initialValue=false]
 */
export function useToggle(initialValue: MaybeRef<unknown> = false, options: UseToggleOptions<true, false> = {}) {
  const {
    trulyValue = true,
    falselyValue = false,
  } = options

  const valueIsRef = isRef(initialValue)
  const innerValue = ref(initialValue) as Ref<boolean>

  function toggle(value?: boolean) {
    // 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
    }
  }

  if (valueIsRef)
    return toggle
  else
    return [innerValue, toggle]
}

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that request the same feature to avoid creating a duplicate.

[zojize]

Perhaps the options fields should be named truthyValue and falsyValue as this aligns with the mdn glossary.

[okxiaoliang4]

Perhaps the options fields should be named truthyValue and falsyValue as this aligns with the mdn glossary.

ok, thanks