PvDrawer

<script setup lang="ts">
import { useToggle } from "@vueuse/core";
import PvDrawer from "@/components/base/PvDrawer/PvDrawer.vue";
import PvButton from "@/components/base/PvButton/PvButton.vue";

const [modalValue, toggleModal] = useToggle();
const [secondModalValue, toggleSecondModal] = useToggle();
</script>

<template>
  <PvButton class="pv-button-primary pv-stack-16" @click="toggleModal"
    >Open PvDrawer</PvButton
  >
  <PvDrawer
    header="Header Example"
    subheader="Subheader Example"
    v-model:model-value="modalValue"
    show-searchbar
  >
    Hello Body!
  </PvDrawer>
  <PvButton class="pv-button-primary" @click="toggleSecondModal"
    >Open PvDrawer with onClickOutside</PvButton
  >
  <PvDrawer
    header="Header Example"
    subheader="Subheader Example"
    v-model:model-value="secondModalValue"
    close-on-click-outside
    show-searchbar
  >
    Hello Body!
  </PvDrawer>
</template>