PubModal

This is a modal component that can be used to display content in a modal dialog. It provides various options for customizing the size, position, and behavior of the modal, such as enabling focus trap and persistent behavior.

Default Usage

<template>
  <pub-button @click="openModal">
    Default Modal
  </pub-button>

  <pub-modal
    :is-open="isModalOpen"
    @close="closeModal"
  >
    <template #header>
      <h3 class="text-lg font-semibold text-grey-900">
        System Update Notice
      </h3>
    </template>
    <template #default>
      <div class="space-y-2">
        <p class="text-grey-700">
          A new system update is available. It includes performance improvements, minor bug fixes, and
          enhanced security patches.
        </p>
        <p class="text-sm text-grey-500">
          We recommend updating to version <strong>2.3.4</strong> at your earliest convenience.
        </p>
      </div>
    </template>
    <template #footer>
      <div class="flex justify-end gap-2">
        <pub-button
          color="red"
          outline
          @click="closeModal"
        >
          Later
        </pub-button>
        <pub-button
          color="primary"
          @click="closeModal"
        >
          Update Now
        </pub-button>
      </div>
    </template>
  </pub-modal>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { PubButton, PubModal } from 'vuelicity'

const isModalOpen = ref(false)

const openModal = () => {
    isModalOpen.value = true
}

const closeModal = () => {
    isModalOpen.value = false
}
</script>

Props - size Usage

The size prop can be used to adjust the size of the modal.

<template>
  <pub-modal size="xs" />
  <pub-modal size="sm" />
  <pub-modal size="lg" />
  <pub-modal size="2xl" />
  <pub-modal size="5xl" />
</template>

<script setup>
import { PubModal } from "vuelicity";
</script>

Props - position Usage

The position prop can be used to adjust the position of the modal.

<template>
  <pub-modal position="top-start" />
  <pub-modal position="top-center" />
  <pub-modal position="top-end" />
  <pub-modal position="center-start" />
  <pub-modal position="center-end" />
  <pub-modal position="bottom-start" />
  <pub-modal position="bottom-center" />
  <pub-modal position="bottom-end" />
</template>

<script setup>
import { PubModal } from "vuelicity";
</script>

Props - focusTrap Usage

The focusTrap prop can be used to enable or disable the focus trap.

<template>
  <pub-modal />
  <pub-modal focus-trap />
</template>

<script setup>
import { PubModal } from "vuelicity";
</script>

Reference

Properties

Name	Type	Default	Description	Options
size	String	'md'	The size of the modal.	'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'
position	String	'center'	The position of the modal.	'top-start', 'top-center', 'top-end', 'center-start', 'center', 'center-end', 'bottom-start', 'bottom-center', 'bottom-end'
zIndex	Number	40	The z-index of the modal.	10, 20, 30, 40, 50
isOpen	Boolean	false	Whether the modal is open.
persistent	Boolean	false	Whether the modal should be persistent.
notClickClose	Boolean	false	Whether the modal should not close when clicked outside.
notEscapeClose	Boolean	false	Whether the modal should not close when the escape key is pressed.
scrollable	Boolean	false	Whether the modal should be scrollable.
overlayBlur	Boolean	false	Whether the modal should have a blurred overlay.
focusTrap	Boolean	false	Whether the modal should trap focus.
class	String	''	Additional CSS classes to apply.

Slots

Name	Description
default	Default slot
header	Header slot
footer	Footer slot

Events

Name	Description
close	Emitted when the modal is closed.