Modal

The modal component can be used as an interactive dialog on top of the main content area of the website to show notifications and gather information using form elements from your website users.

Examples

Modal

Code

<script setup lang="ts">
import { BaseButton, BaseModal } from '@point-hub/papp'
import { ref } from 'vue'

const showModal = ref(false)
</script>

<template>
  <Demo is-row>
    <component :is="BaseButton" color="primary" size="md" @click="showModal = true">
      Open Modal
    </component>
    <component :is="BaseModal" :is-open="showModal" @on-close="showModal = false">
      <div class="max-h-90vh overflow-auto p-4">
        <h2 class="py-4 text-2xl font-bold">Lorem Ipsum</h2>
        <div class="space-y-8">
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. A accusantium provident,
            blanditiis quam pariatur repellat? Animi ducimus fugit, similique libero et rem, quod
            repellat sunt itaque voluptas nihil saepe laboriosam?
          </p>
          <component :is="BaseButton" color="primary" size="sm" @click="showModal = false" is-block>
            Close
          </component>
        </div>
      </div>
    </component>
  </Demo>
</template>

Size

Code

<script setup lang="ts">
import { BaseButton, BaseModal, type BaseModalSizeType } from '@point-hub/papp'
import { ref } from 'vue'

const showModal = ref(false)
let sizeModal: BaseModalSizeType = 'md'
const openModal = (size: BaseModalSizeType) => {
  sizeModal = size
  showModal.value = true
}
</script>

<template>
  <Demo is-row>
    <component :is="BaseButton" size="md" color="primary" @click="openModal('sm')">SM</component>
    <component :is="BaseButton" size="md" color="primary" @click="openModal('md')">MD</component>
    <component :is="BaseButton" size="md" color="primary" @click="openModal('lg')">LG</component>
    <component :is="BaseButton" size="md" color="primary" @click="openModal('xl')">XL</component>
    <component :is="BaseButton" size="md" color="primary" @click="openModal('full')">
      Full
    </component>
    <component :is="BaseButton" size="md" color="primary" @click="openModal('maximize')">
      Maximize
    </component>
    <component :is="BaseModal" :is-open="showModal" @on-close="showModal = false" :size="sizeModal">
      <div class="max-h-90vh overflow-auto p-4">
        <h2 class="py-4 text-2xl font-bold">Lorem Ipsum</h2>
        <div class="space-y-8">
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. A accusantium provident,
            blanditiis quam pariatur repellat? Animi ducimus fugit, similique libero et rem, quod
            repellat sunt itaque voluptas nihil saepe laboriosam?
          </p>
          <component :is="BaseButton" size="md" color="primary" @click="showModal = false" is-block>
            Close
          </component>
        </div>
      </div>
    </component>
  </Demo>
</template>

Modal API

Props

Types

export type BaseModalSizeType = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | 'maximize'

Name	Type	Default	Description
isOpen	boolean		Modal open state is required to trigger open modal dialog.
size	BaseModalSizeType	md	Modal container size.

Slot

#default slot for rendering modal content

Event

onClose event for closed modal