ff-admin/src/components/Modal.vue

<template>
  <div
    ref="contextMenu"
    class="absolute inset-0 w-full h-full flex justify-center items-center bg-black/50 select-none z-50 p-2"
    v-show="show"
    @contextmenu.prevent
  >
    <!-- @click="closeModal" -->
    <component :is="component_ref" :data="data" @click.stop class="p-4 bg-white rounded-lg" />
  </div>
</template>

<script setup lang="ts">
import { mapState, mapActions } from "pinia";
import { useModalStore } from "@/stores/modal";
</script>

<script lang="ts">
export default {
  computed: {
    ...mapState(useModalStore, ["show", "component_ref", "data"]),
  },
  methods: {
    ...mapActions(useModalStore, ["closeModal"]),
  },
};
</script>