src/stores/modal.ts - dev - vdele/app

import { computed, ref, type Component, type Ref, shallowRef, triggerRef } from 'vue';

export function useModalStrore() {
    const state = ref(false);
    const body = shallowRef(null) as Ref<{component: Component, props: {}} | null>;

    const visible = computed(() => state.value);
    const contentModel = computed(() => body.value);

    const showModal = () => {
        state.value = true;
    };

    const hideModal = () => {
        state.value = false;
    };

    const setBody = (model: {component: Component, props: {}}) => {
        body.value = model;
        triggerRef(body);
    };

    const resetBody = () => {
        body.value = null;
        triggerRef(body);
    };

    return {
        //states
        visible,
        contentModel,

        //methods
        showModal,
        hideModal,
        setBody,
        resetBody
    };
}