Vue Modal Container

A simple Modal Container package to handle Modal and Notification package.

• Node v8.10.0
• NPM v5.6.0

Project setup

npm install

Create a package build, compiles and minifies for production

npm run build

Run tests

npm run test

Lints and fixes files

npm run lint

Package Installation

npm install bqr-vue-modal-container

Usage

import ModalContainer from "bqr-vue-modal-container"

<modal-container 
    :is-visible="isVisible"
    :position="position"
    :size="size"
    :class-name="className"
    :auto-hide="autoHide"
    :is-bg-visible="isBgVisible"
    :is-scroll-disabled="isScrollBlocked"
    @closeModal="closeModal"
>
    Any Content here
</modal-container>

Name	Type	Default	Description
position	String	'center'	Position in the screen where the Modal Container will be placed
is-visible	Boolean	false	false: hide modal from DOM, true: display modal on the DOM
class-name	String	'modal-override'	Class(es) name(s) to set over the Modal container
auto-hide	Number	0	If greater than zero, will hide the Modal after the auto-hide time interval is past
is-bg-visible	Boolean	true	If true, Display a full screen gray background under the modal container
is-scroll-disabled	Boolean	true	If true, disabled the browser be able to scroll
size	Object	{ minWidth: 0, width: 0, maxWidth: 0, minHeight: 0, height: 0, maxHeight: 0 }	set the related css properties for the modal container

Position prop options:

center
center-top
center-bottom
right-stretch
left-stretch
top-stretch
bottom-stretch
left-bottom
left-top
right-bottom
right-top

Events

Name	Description
closeModal	This event is emmited when auto-hide prop is greater than 0

Live Example

Modal Container example

Author

Jose Burgos jose@bqroster.com