Modal

Base component for modal dialog.

Usage

Modal are using z-modal for z-index value. It posible to change z-index value using CSS variable --p-modal-z-index. But don't forget to see the all z-index variant for layer-ordering component.

Simple Usage

Modal Title

This is place holder text. The basic dialog for modals should contain only valuable and relevant information.

preview

<template>
  <p-modal v-model="showModal"
    title="Modal Title"
    text="This is place holder text. The basic dialog for modals
      should contain only valuable and relevant information.">
    <template #footer="{ close }">
      <div class="flex items-center justify-end">
        <p-button @click="close" color="info">
          Submit
        </p-button>
      </div>
    </template>
  </p-modal>
</template>

Modal Title

This is place holder text. The basic dialog for modals should contain only valuable and relevant information.

Combine with additional component

Modal Title

This is place holder text. The basic dialog for modals should contain only valuable and relevant information.

Your enterprise Privy Balance is running out. Please topup now.

This is additional checbox for the modal

preview

<template>
  <p-modal
    v-model="advanceModal"
    title="Modal Title">
    <p>
      This is place holder text. The basic dialog for modals
      should contain only valuable and relevant information.
    </p>
    <p-banner>
      Your enterprise Privy Balance is running out. Please topup now.
    </p-banner>
    <template #footer="{ close }">
      <div class="flex items-center justify-between">
        <div>
          <p-checkbox>
            This is additional checbox for the modal
          </p-checkbox>
        </div>
        <div>
          <p-button @click="close" color="info">
            Button text
          </p-button>
        </div>
      </div>
    </template>
  </p-modal>
</template>

Modal Title

This is place holder text. The basic dialog for modals should contain only valuable and relevant information.

Your enterprise Privy Balance is running out. Please topup now.

This is additional checbox for the modal

Hide close button

You can hide close button with dismissable set to false

Give Me Title Here

Explain what this menu to do,
descriptive but as short as possible

preview

<template>
  <p-modal
    title="Give Me Title Here"
    v-model="bottomSheet"
    :dismissable="false">
    <p>
      Explain what this menu to do, <br>
      descriptive but as short as possible
    </p>
    <template #footer>
      <div class="flex justify-end">
        <p-button color="info" @click="bottomSheet = false">
          Button Text
        </p-button>
      </div>
    </template>
  </p-modal>
</template>

Give Me Title Here

Explain what this menu to do,
descriptive but as short as possible

No Close Modal

Modal will not close while Escape button was pressed by props no-close-on-esc. Also you can make modal can't close while backdrop was clicked by props no-close-on-backdrop.

Modal Title

This is place holder text.
The basic dialog for modals should
contain only valuable and relevant information.

preview

<template>
  <p-modal
    title="Modal Title"
    no-close-on-esc
    no-close-on-backdrop
    v-model="bannerSheet" :dismissable="false">
    <p>
      This is place holder text. <br>
      The basic dialog for modals should <br>
      contain only valuable and relevant information.
    </p>
    <template #footer="{ close }">
      <div class="flex justify-end">
        <p-button color="info" @click="close">
          Button Text
        </p-button>
      </div>
    </template>
  </p-modal>
</template>

Modal Title

This is place holder text.
The basic dialog for modals should
contain only valuable and relevant information.

Modal Scroll

When modals content become too long, modal body can scroll itself by adding props modal-body-scrollable.

Modal Title

This is place holder text. The basic dialog for modals should contain only valuable and relevant information. Simplify dialogs by removing unnecessary elements or content that does not support user tasks. If you find that the number of required elements for your design are making the dialog excessively large, then try a different design solution.

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.

I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.

preview

<template>
  <p-modal
    v-model="scrollModal"
    title="Modal Title"
    no-close-on-esc
    no-close-on-backdrop
    modal-body-scrollable>
    <div>
      <p>
        This is place holder text. The basic dialog for modals should contain only valuable and relevant information. Simplify dialogs by removing unnecessary elements or content that does not support user tasks. If you find that the number of required elements for your design are making the dialog excessively large, then try a different design solution.
      </p>
      <blockquote>
        A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.
      </blockquote>
      <p>
        I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.
      </p>
    </div>
    <template #footer="{ close }">
      <p-button @click="close" color="info">
        Button Text
      </p-button>
    </template>
  </p-modal>
</template>

Modal Title

This is place holder text. The basic dialog for modals should contain only valuable and relevant information. Simplify dialogs by removing unnecessary elements or content that does not support user tasks. If you find that the number of required elements for your design are making the dialog excessively large, then try a different design solution.

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.

I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.

Modal Banner

Modal can be set look like banner with prop banner. For example, it can be used for promotional purposes, events and others.

Give Me Title Here

Explain what this menu to do,
descriptive but as short as possible

preview

<template>
  <p-modal
    v-model="modalBanner"
    :dismissable="false"
    banner>
    <img src="/assets/images/img-modal-banner-sheet.jpg">
    <div class="p-6 text-center">
      <p-heading element="h6">Give Me Title Here</p-heading>
      <p>
        Explain what this menu to do, <br>
        descriptive but as short as possible
      </p>
    </div>
    <template #footer="{ close }">
      <div class="flex items-center justify-end">
        <p-button variant="link" @click="close">
          Button Text
        </p-button>
        <p-button color="info" @click="close">
          Button Text
        </p-button>
      </div>
    </template>
  </p-modal>
</template>

Modal Title

Explain what this menu to do,
descriptive but as short as possible

Sizing

Modal has 5 different sizing, there are sm, md, lg, xl and full. You can change the size via prop size. Default size are md.

Modal Title

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.

preview

<template>
  <p-modal
    v-model="modalSize"
    title="Modal Title"
    size="sm">
    <div>
      <blockquote>
        A wonderful serenity has taken possession of my entire soul,
        like these sweet mornings of spring which I enjoy with my whole heart.
      </blockquote>
    </div>
    <template #footer="{ close }">
      <p-button @click="close" color="info">
        Button Text
      </p-button>
    </template>
  </p-modal>
</template>

Modal Title

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.

Modal Fullscreen

Modal fullscreen is configured by prop size with full value. There are two type of modal fullscreen, default and free-distraction.

Default Fullscreen

Modal Title

This is place holder text. The basic dialog for modals should contain only valuable and relevant information.

preview

<template>
  <p-modal
    v-model="modal"
    title="Modal Title"
    text="This is place holder text. The basic dialog for modals
      should contain only valuable and relevant information."
    size="full"
    header-class="px-6"
    body-class="p-6">
  </p-modal>
</template>

Modal Title

This is place holder text. The basic dialog for modals should contain only valuable and relevant information.

Modal Fullscreen With Custom Slot header

Letter of agreement

Waiting

This is place holder text. The basic dialog for modals should contain only valuable and relevant information.

preview

<script setup>
  import IconDocument from '@privyid/persona-icon/vue/document-empty/20.vue'
</script>

<template>
  <p-modal
    v-model="modal"
    text="This is place holder text. The basic dialog for modals
      should contain only valuable and relevant information."
    size="full"
    header-class="px-6"
    body-class="p-6">
    <template #header>
      <div class="space-x-3 modal__title">
        <IconDocument />
        <p-text class="text-subtle">Letter of agreement</p-text>
        <p-label color="warning" variant="dot">Waiting</p-label>
      </div>
    </template>
  </p-modal>
</template>

Letter of agreement

Waiting

This is place holder text. The basic dialog for modals should contain only valuable and relevant information.

Modal Fullscreen With Custom Slot header and body

Letter of Agreement..

Document properties

This is place holder text. The basic dialog for modals should contain only valuable and relevant information.

Set e-Meterai

preview

<script setup>
  import IconNext from '@privyid/persona-icon/vue/chevron-right/20.vue'
  import IconPrev from '@privyid/persona-icon/vue/chevron-left/20.vue'
  import IconDocument from '@privyid/persona-icon/vue/document-empty/20.vue'
  import IconClose from '@privyid/persona-icon/vue/close/20.vue'
</script>

<template>
  <p-modal
    v-model="modal"
    body-class="grid h-full grid-cols-8"
    size="full">
    <template #header>
      <div class="overflow-y-auto modal--full__header__content bg-default-alpha">
        <div class="flex items-center p-3 space-x-3 bg-default">
          <IconDocument />
          <p-text>Letter of Agreement..</p-text>
          <IconClose class="cursor-pointer text-muted hover:text-subtle" />
        </div>
      </div>
      <div class="modal--full__header__navigation">
        <p-button icon variant="ghost"><IconPrev /></p-button>
        <p-button icon variant="ghost"><IconNext /></p-button>
      </div>
    </template>
    <template #body>
        <div class="col-span-2 bg-default p-7">
          <p-subheading weight="bold">Document properties</p-subheading>
        </div>
        <div class="col-span-4 px-4 pt-4 bg-base">
          <div class="h-full p-6 rounded-t-lg shadow-sm bg-default">
            This is place holder text. The basic dialog for modals
            should contain only valuable and relevant information.
          </div>
        </div>
        <div class="col-span-2 p-7 bg-default">
          <p-subheading weight="bold">Set e-Meterai</p-subheading>
        </div>
    </template>
  </p-modal>
</template>

Letter of Agreement..

Document properties

This is place holder text. The basic dialog for modals should contain only valuable and relevant information.

Set e-Meterai

Free Distraction

Activate modal free distraction type is by adding free-distraction prop in the modal size full. Slot body cannot be used in this modal type.

Modal Title

This is place holder text. The basic dialog for modals should contain only valuable and relevant information.

preview

<template>
  <p-modal
    v-model="modal"
    title="Modal Title"
    text="This is place holder text. The basic dialog for modals
      should contain only valuable and relevant information."
    size="full"
    free-distraction>
  </p-modal>
</template>

Modal Title

This is place holder text. The basic dialog for modals should contain only valuable and relevant information.

Centered Modal

Modal can be vertically center in the viewport by setting centered prop.

Modal Title

This is place holder text. The basic dialog for modals should contain only valuable and relevant information.

preview

<template>
  <p-modal
    v-model="modalCenter"
    title="Modal Title"
    size="sm"
    centered>
    <div>
      This is place holder text. The basic dialog for modals
      should contain only valuable and relevant information.
    </div>
    <template #footer="{ close }">
      <p-button @click="close" color="info">
        Button Text
      </p-button>
    </template>
  </p-modal>
</template>

Modal Title

This is place holder text. The basic dialog for modals should contain only valuable and relevant information.

Variables

Modal use local CSS variables on .modal for enhanced real-time customization.

--p-modal-size-xl: 960px;
--p-modal-size-lg: 800px;
--p-modal-size-md: 600px;
--p-modal-size-sm: 400px;
--p-modal-z-index: theme(zIndex.modal);
--p-modal-body-scrollable-max-height: theme(spacing.64);
--p-modal-body-scrollable-min-height: 0;
--p-modal-content-margin-y: theme(spacing.8);

API

Props

Props	Type	Default	Description
modelValue	Boolean	false	v-model value for show / hide modal
title	String	-	Modal Title
text	String	-	Text inside of Modal Body
dismissable	Boolean	true	Show / Hide dismiss button
size	String	md	Size of modal, valid value is sm, md, lg and xl
banner	Boolean	false	Give modal no-padding to place image for specific purpose
noCloseOnEsc	Boolean	false	No close modal while Escape was pressed
noCloseOnBackdrop	Boolean	false	No close modal while Modal Backdrop was clicked
modalBodyScrollable	Boolean	false	Scrollable modal body when content is to long
centered	Boolean	false	Handle center vertically of the viewport
freeDistraction	Boolean	false	Activate modal free distraction type when size are full
headerClass	String or Array or Object	-	CSS class to add in the modal header
dialogClass	String or Array or Object	-	CSS class to add in the modal dialog
contentClass	String or Array or Object	-	CSS class to add in the modal content
bodyClass	String or Array or Object	-	CSS class to add in the modal body
footerClass	String or Array or Object	-	CSS class to add in the modal footer

Slots

Name	Description
header	Content (in the form of— permalink or button) to place in Modal Header
body	Content to place in Modal body of size full with default type only
footer	Content (in the form of— permalink or button) to place in Modal Footer. Modal size full with default type not supported this slot.

Events

Name	Arguments	Description
close	-	Event when close button clicked
hide	-	Event when modal hidden
show	-	Event when modal shown