Modal component #

<WButton @click="modal.small = true">Modal sm</WButton>
 <WButton @click="modal.medium = true">Modal md</WButton>
 <WButton @click="modal.large = true">Modal lg</WButton>

  <WModal v-model:active="modal.small">
   <template #header> The important modal header </template>
   <template #body> The modal body </template>
   <template #footer="footerProps">
     <WButton @click="modal.small = false">Dismiss!</WButton>
   </template>
 </WModal>
 <WModal v-model:active="modal.medium" size="md">
   <template #header> The important modal header </template>
   <template #body> The modal body </template>
   <template #footer="footerProps">
     <WButton @click="modal.medium = false">Dismiss!</WButton>
   </template>
 </WModal>
 <WModal v-model:active="modal.large" size="lg">
   <template #header> The important modal header </template>
   <template #body> The modal body</template>
   <template #footer="footerProps">
     <WButton @click="modal.large = false">Dismiss!</WButton>
   </template>
 </WModal>

<WButton @click="modal.closeBtn = true">Close btn</WButton>
<WModal v-model:active="modal.closeBtn" close-btn>
  <template #header> The important modal header </template>
  <template #body> The modal body </template>
  <template #footer="footerProps">
    <WButton @click="modal.closeBtn = false">Dismiss!</WButton>
  </template>
</WModal>

<WButton @click="modal.noOutside = true">No outside</WButton>
<WModal v-model:active="modal.noOutside" :outside="false">
  <template #header> The important modal header </template>
  <template #body> The noOutside modal body </template>
  <template #footer="footerProps">
    <WButton @click="modal.noOutside = false">Dismiss!</WButton>
  </template>
</WModal>

<WButton @click="modal.noBackdrop = true">No backdrop</WButton>
  <WModal
        v-model:active="modal.noBackdrop"
        :outside="false"
        :backdrop="false"
      >
        <template #header> The important modal header </template>
        <template #body> The noBackdrop modal body </template>
        <template #footer="footerProps">
          <WButton @click="modal.noBackdrop = false">Dismiss!</WButton>
        </template>
      </WModal>

<WButton @click="modal.headless = true">Headless</WButton>
<WModal v-model:active="modal.headless">
  <div class="bg-primary-200 px-6 py-14 text-center">
    <div class="text-2xl font-bold text-white">My own modal</div>
  </div>
</WModal>

<WButton @click="modal.backdropBlur = true">Backdrop blur</WButton>
<WModal
  v-model:active="modal.backdropBlur"
  backdrop-class="backdrop-brightness-60 backdrop-blur-1"
>
  <template #header> The important modal header </template>
  <template #body> The backdrop blur modal body </template>
  <template #footer="footerProps">
    <WButton @click="modal.backdropBlur = false">Dismiss!</WButton>
  </template>
</WModal>