mealie/frontend/components/global/ToggleState.vue

<template>
  <component :is="tag">
    <slot name="activator" v-bind="{ toggle, state }"> </slot>
    <slot v-bind="{ state, toggle }"></slot>
  </component>
</template>
    
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api";
import { useToggle } from "@vueuse/shared";
import { watch } from "vue-demi";

export default defineComponent({
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    tag: {
      type: String,
      default: "div",
    },
  },
  setup(_, context) {
    const [state, toggle] = useToggle();

    watch(state, () => {
      context.emit("input", state);
    });

    return {
      state,
      toggle,
    };
  },
});
</script>