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 max-h-[95%] overflow-y-auto"
    />
  </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>