PvModal

<script setup lang="ts">
import { ref } from "vue";
import PvModal from "@/components/base/PvModal/PvModal.vue";
import PvButton from "@/components/base/PvButton/PvButton.vue";

const showModal = ref(false);

const toggleModal = () => {
  showModal.value = !showModal.value;
};
</script>

<template>
  <PvButton class="pv-button-primary" @click="toggleModal">Open Modal</PvButton>
  <PvModal
    header="Header"
    subheader="Subheader"
    v-model:model-value="showModal"
  >
    <template #body>
      <span class="pv-text-body-md"> Body of the Modal </span>
    </template>
    <template #footer>
      <div class="pv-flex" style="--flex-justify: flex-end">
        <PvButton variant="ghost" @click="toggleModal"> Cancel </PvButton>
        <PvButton variant="primary" @click="toggleModal"> Submit </PvButton>
      </div>
    </template>
  </PvModal>
</template>