@irfanismail/mon-modal NPM

mon-modal

MonModal a feature-rich modal Vue2 component. It focuses on bringing the best of Vue's features to achieve common & advanced behavior patterns while giving you the freedom to style the component to your liking. Built-to-work with TailwindCSS.

mon-modal-gif

Demo

Getting Started

// npm
npm i @irfanismail/mon-modal


// yarn
yarn add @irfanismail/mon-modal

Usage

Table of Props

Props	Type	Default	Description
title	string	-	Title of the modal
label	string	-	Button label for default modal implementation
titleClass	string	'mon-modal-title'	Class for title (Tailwind compatible)
labelClass	string	-	Class for button label for default modal implementation (Tailwind compatible)
backdropClass	string	'mon-modal'	Class for modal backdrop (Tailwind compatible)
modalClass	string	'mon-modal-container'	Class for modal container (Tailwind compatible)
headerClass	string	'mon-modal-header'	Class for modal header (Tailwind compatible)
bodyClass	string	'mon-modal-body'	Class for modal body (Tailwind compatible)
footerClass	string	'mon-modal-footer'	Class for modal footer (Tailwind compatible)
persistent	boolean	false	Content rendered inside modal persists even when modal is closed. By default, the content rendered will be destroyed once user closes the modal
disableClickAway	boolean	false	Disables modal close behavior when user interacts with out of modal content. By default, modal will close when user clicks away.
disableEsc	boolean	false	Disables modal close behavior when user presses `Esc` key. By default, modal will close when user presses `Esc` key.
openOnMount	boolean	false	Modal will open on `mounted()`. Refer to Vue's mounted lifecycle for more information
enter	string	'mon-modal-enter'	Custom transition class for modal `enter` phase
enterActive	string	'mon-modal-enter-active'	Custom transition class for modal `enter-active` phase
enterTo	string	'mon-modal-enter-to'	Custom transition class for modal `enter-to` phase
leave	string	'mon-modal-leave'	Custom transition class for modal `leave` phase
leaveActive	string	'mon-modal-leave-active'	Custom transition class for modal `leave-active` phase
leaveTo	boolean	'mon-modal-leave-to'	Custom transition class for modal `leave-to` phase

Combinations of Slots & Props

<!-- Basic Modal -->
props: 
* title
* label 
  <mon-modal [...props]>
      <template #body>...</template>
      <template #footer="{ close }">...</template>
  </mon-modal>
  
<!-- Custom Header & Content -->
props: 
* label 
  <mon-modal [...props]>
    <template #header="{ close }">...</template>
    <template #custom="{ open, close }">...</template>
  </mon-modal>

<!-- Custom Trigger -->
props: 
 * title
  <mon-modal [...props]>
    <template #trigger="{ open }"></template>
    <template #body>...</template>
  </mon-modal>


<!-- Custom Transition Class -->
props: 
 * title
 * enter
 * enter-active
 * enter-to
 * leave
 * leave-active
 * leave-to
  <mon-modal [...props]>
   ...
  </mon-modal>

Component Lifecycle Hooks

If you need to do logic based on the modal's lifecycle, you can utilize the predefined hooks given below!

Hooks	Type	Description
before-open	function	Called before the modal opens
after-open	function	Called after the modal opens
before-close	function	Called before the modal closes
after-close	function	Called after modal closes

Example Implementation

<mon-modal 
    @before-open="..."
    @after-open="..."
    @before-close="..."
    @after-close="...">
    ...
</mon-modal>

Check the Demo on how to use modal lifecycle hooks

Handling Modal Behavior outside Usual Scope

There will be times, you will find yourselves needing to trigger modal behaviors outside of the normal scope (eg. clicking a button). MonModal provides two (2) internal functions that can be accessed through Vue's ref="..." & $refs.

The two functions are: