useToggle.ts 525 B

1234567891011121314151617181920
  1. import { ref, watch, Ref, SetupContext } from 'vue';
  2. export function useToggle(internalModel: Ref<unknown>, { emit }: SetupContext) {
  3. const isActive = ref(!!internalModel.value);
  4. const isToggled = ref(false);
  5. watch(internalModel, (val) => {
  6. isActive.value = !!val;
  7. });
  8. watch(isActive, (value) => {
  9. !!value !== !!internalModel.value && emit('onUpdate:modelValue', value);
  10. });
  11. function toggleIt() {
  12. isToggled.value = !isToggled.value;
  13. }
  14. return {
  15. isActive,
  16. toggleIt,
  17. isToggled,
  18. };
  19. }