Modal component

Modal component

Description:

A highly configurable bulma's overlay modal which can hold any content. Works well for alert, prompt and confirm as well as message modal.

file path:

./src/components/features/modal/SaModal.vue

Usage:

---

The modal component can be used in two differnt ways

1. As global dynamic component

main.js:

import Modal from './components/features/modal/index.js';
Vue.prototype.$modal = Modal;

then in any other component you can show a modal by:

this.$modal.{type}({options});

2. As child component

SomeComponent.vue

<template>
      <sa-modal title="Custom title"
                content="Modal message"
                :show-header="true/false"
                :show-footer="true/false"
                type="success/info/error/warning"
                ok-text="Confirm"
                :show-ok="true"
                cancel-text="Cancel"
                :show-cancel="true"
                icon="fa-icon"
                onOk="callback()"
                onCancel="callback()"
      >
      </sa-modal>  
</template>

<script>
import SaModal from '../features/modal/SaModal.vue';

export default {
    components: { SaModal }
}
</script>

API:

---

Types	Description	Usage
open	Default modal with primary color	this.$modal.open()
info	Modal with info icon in blue color	this.$modal.info()
success	Modal with success icon in green color	this.$modal.success()
warning	Modal with warning icon in yellow color	this.$modal.warning()
error	Modal with error icon in red color	this.$modal.error()

Properties	Type	Default	Description
title	String	NA	Modal title
content	String	NA	Modal body content
showHeader	Boolean	true	Show modal's header or not
type	String	'info'	Modal type (info/success/warning/error)
icon	String	NA	Fontawesome icon name (e.g.: fa-bars)
showFooter	Boolean	true	Show modal's footer or not
showOk	Boolean	true	Show modal's 'OK' button or not
okText	String	'OK'	'OK' button text
onOk	Function	NA	Callback function to run when modal confirmed
showCancel	Boolean	true	Show modal's 'cancel' button or not
cancelText	String	'Cancel'	'Cancel' button text
onCancel	Function	NA	Callback function to run when modal canceled