@psff/cmp-modal v1.0.5

@psff/cmp-modal psff-modal

Component to create modal dialogs.

Getting started

1. Setup the package as a dependencie.

   yarn add @psff/cmp-modal

2. Use the component <psff-modal />.

   .my-modal {
     --psff-modal-backdrop-background: rgba(247, 249, 255, .8);
     --psff-modal-dialog-box-shadow: rgba(184, 203, 253, .5);
   }

   <button @click="handleOpenModal">
   
   <psff-modal class="my-modal" title="Test modal" :open.sync="open">
     <p>This is a sample test modal</p>
   </psff-modal>

   import PsffModal from '@psff/cmp-modal';
   
   @Component({ components: { PsffModal }})
   export default class MyComponent extends Vue {
     public open: boolean = false;
   
     public handleOpenModal() {
       this.open = true;
     }
   }

Specifications

Models

• ModalAnimationName: '' | 'fade' | 'fade-slide' | 'fade-bounce' | 'fade-scale'

• ModalRole: 'dialog' | 'alertdialog'

• ModalPosition: 'top' | 'center' | 'bottom'

Parameters

• open (boolean, default: false) if the modal has to be open or not
• title (string) short text indicating the meaning of the dialog
• persist (boolean, default: false) if the modal will close when the user clicks the backdrop or press ESC key
• hide-close (boolean, default: false) if hide the close icon or not
• position (ModalPosition, default: 'center') where to vertical-align the modal
• animation (ModalAnimationName, default: 'fade-slide') which animation to perform when the modal enters or leaves. Can be left blank to deactivate animations
• animation-duration (number | object, default: { enter: 300, leave: 150 }) duration in milliseconds of the enter/leave animations. When defined, custom properties -psff-modal-animation-duration(-(enter|leave))? has to be defined as well
• role (ModalRole, default: 'dialog') a11y dialog role to apply

Events

• close triggered when modal wants to close itself. For example, clicking the close icon or the backdrop
• opened when the modal is finally open after any animation
• closed when the modal is finally closed after any animation

Slots

• modal-close content to place inside close button
• modal-title content to place as modal title
• default content to place as modal content

Custom propperties:

• Global:

  • --psff-modal-animation-duration
  • --psff-modal-animation-duration-enter (default var(--psff-modal-animation-duration, .3s))
  • --psff-modal-animation-duration-leave (default var(--psff-modal-animation-duration, .15s))
  • --psff-modal-z-index (default 99)

• Backdrop:

  • --psff-modal-backdrop-background (default rgba(245, 247, 255, .75))
  • --psff-modal-backdrop-opacity (default 1)

• Dialog:

  • --psff-modal-dialog-background (default #fff)
  • --psff-modal-dialog-border-size (default 0)
  • --psff-modal-dialog-border-color (default #fafafa)
  • --psff-modal-dialog-border-radius (default .25rem)
  • --psff-modal-dialog-box-shadow (default rgb(203, 217, 253) 2px 2px 4px 0)
  • --psff-modal-dialog-margin (default 4rem)
  • --psff-modal-dialog-max-width (default 100%)
  • --psff-modal-dialog-min-width (default auto)
  • --psff-modal-dialog-padding (default 2rem)

• Close:

  • --psff-modal-close-color (default #848484)
  • --psff-modal-close-right (default 2rem)
  • --psff-modal-close-size (default 1rem)
  • --psff-modal-close-top (default 2rem)

• Title:

  • --psff-modal-title-border-color (default #fafafa)
  • --psff-modal-title-border-size (default 0)
  • --psff-modal-title-color (default inherit)
  • --psff-modal-title-font-family (default inherit)
  • --psff-modal-title-font-size (default 1.5rem)
  • --psff-modal-title-font-variant (default inherit)
  • --psff-modal-title-font-weight (default inherit)
  • --psff-modal-title-line-height (default normal)
  • --psff-modal-title-padding (default 0 0 2rem)

• Content

  • --psff-modal-content-border-color (default #fafafa)
  • --psff-modal-content-border-size (default 0)
  • --psff-modal-content-color (default inherit)
  • --psff-modal-content-font-family (default inherit)
  • --psff-modal-content-font-size (default inherit)
  • --psff-modal-content-font-variant (default inherit)
  • --psff-modal-content-font-weight (default inherit)
  • --psff-modal-content-line-height (default normal)
  • --psff-modal-content-padding (default 0)