⚠️ vue2-simplert-plugin

Vue 2 Simple Alert Plugin (SweetAlert Inspired)

Why we need ?

When we using vue2-simplert, we will need to import the library in every place we need. This is very bored because we do same task in many place. In vue2-simplert we need to access method inside using $refs which is not recommended. For solving those problems I reborn vue2-simplert as Vue.js Plugins and using EventBus for open/close.

Demo

• Full Demo

• Codesandbox Test

Install

Yarn

yarn add vue2-simplert-plugin

NPM

npm i vue2-simplert-plugin --save

How to use

Import in your root project

Usually main.js or index.js

import { Simplert } from 'vue2-simplert-plugin';
import 'vue2-simplert-plugin/dist/vue2-simplert-plugin.min.css';

Vue.use(Simplert);

Or, with customize default config which still can be overrided.

import { Simplert } from 'vue2-simplert-plugin';
import 'vue2-simplert-plugin/dist/vue2-simplert-plugin.min.css';

Vue.use(Simplert, {
  title: 'test', //string -- title alert
  message: 'message', //string -- message alert
  type: 'success', //string -- type : info (default), success, warning, error
  customClass: '', //string -- custom class in simplert div
  customIconUrl: '', //string -- custom url custom image icon
  customCloseBtnText: '', //string -- close button text
  customCloseBtnClass: '', //string -- custom class for close button
  onClose: this.onClose, //function -- when close triggered
  useConfirmBtn: false, //boolean -- using confirm button
  customConfirmBtnText: '', //string -- confirm button text
  customConfirmBtnClass: '', //string -- custom class for confirm button
  onConfirm: this.onConfirm, //function -- when confirm button triggered
  disableOverlayClick: false, //boolean -- set to true if you want disable overlay click function
  hideAllButton: false, //boolean -- set to true if you want hide all button
  onOpen: null, //function -- when simplert open will fire this method if available
  showXclose: true, //boolean -- show x close button
});

for more Methods and Props

Add template in your root Vue

Usually App.vue

<simplert />

Open/Close Popup

For open popup :

this.$Simplert.open(obj);

Object that pass is same with vue2-simplert, please read wiki.

For close popup :

this.$Simplert.close();

Migration from vue2-simplert

If you already use vue2-simplert in your project, please follow this below guide :

• Make sure you add dependency npm i vue2-simplert-plugin --save
• Import and use this plugin in your main app, ex : main.js

import { Simplert } from 'vue2-simplert-plugin';
import 'vue2-simplert-plugin/dist/vue2-simplert-plugin.min.css';

Vue.use(Simplert);

• Remove all import vue2-simplert in your components and/or pages, because as Plugin you dont need to import in all components

import Simplert from 'vue2-simplert';

• Remove all adding component vue2-simplert in your components and/or pages, because you dont need set components again

components: {
  Simplert;
}

• Remove all template html snippet in each components

<simplert :useRadius="true" :useIcon="true" ref="simplert"> </simplert>

• Add new html snippet in root application, ex : App.vue

<simplert> </simplert>

• Change all call method open with new plugin method, you dont need to change all configuration

// change this call
this.$refs.simplert.openSimplert(obj);
// to this way
this.$Simplert.open(obj);

• And DONE 👍 !!!

Available Props

You can add props in simplert component, example :

<simplert :useRadius="true" :useIcon="true" ref="simplert"> </simplert>

Attribute	Value Type	Default Value	Description
:useRadius	Boolean	true	Setting useRadius to true will make Simplert's message box and buttons have rounded corners
:useIcon	Boolean	true	true : will use SweatAlert icon based on type, false : not use icon
ref	String	-	child reference, [read here]

Object Arguments

Property	Type - Default	Description
title	string - empty	Title of alert
message	string - empty	Message of alert
type	string - 'info'	Type of icon will used
customClass	string - empty	Adding extra class in parent simplert
customIconUrl	string - empty	Using custom icon instead of default
customCloseBtnText	string - empty	Using custom text in button close
customCloseBtnClass	string - empty	Change default class in button close
onClose	func - undefined	Function will fired when close button clicked
useConfirmBtn	boolean - false	Using two button with close and confirm
customConfirmBtnText	string - empty	Using custom text in button confirm
customConfirmBtnClass	string - empty	Change default class in button confirm
onConfirm	func - undefined	Function will fired when confirm button clicked
disableOverlayClick	string - empty	Prevent click overlay will close alert
hideAllButton	boolean - false	Hide both button close and confirm
onOpen	func - undefined	Function will fired when open alert
showXclose	boolean - false	Show X close button in right corner of alert

{
  title: 'test', //string -- title alert
  message: 'message', //string -- message alert
  type: 'success', //string -- type : info (default), success, warning, error
  customClass: '', //string -- custom class in simplert div
  customIconUrl: '', //string -- custom url custom image icon
  customCloseBtnText: '', //string -- close button text
  customCloseBtnClass: '', //string -- custom class for close button
  onClose: this.onClose, //function -- when close triggered
  useConfirmBtn: false, //boolean -- using confirm button
  customConfirmBtnText: '', //string -- confirm button text
  customConfirmBtnClass: '', //string -- custom class for confirm button
  onConfirm: this.onConfirm, //function -- when confirm button triggered
  disableOverlayClick: false, //boolean -- set to true if you want disable overlay click function
  hideAllButton: false, //boolean -- set to true if you want hide all button
  onOpen: null, //function -- when simplert open will fire this method if available
  showXclose: true //boolean -- show x close button
}

FAQ

Why my onConfirm fired immediately

A : It happen when you have this below arguments:

let Warning = {
  message: 'Do you really want to leave? you have unsaved changes!',
  useConfirmBtn: true,
  customCloseBtnText: 'Yes',
  customConfirmBtnText: 'No',
  onClose: this.Leave(),
  onConfirm: this.StayWhereYouAre(),
};

The function this.StayWhereYouAre() will be fired immediately, even you are not clicked it yet. It because you put function to be executed. The solution is to change the way you pass function, just pass as an ordinary variable:

let Warning = {
  message: 'Do you really want to leave? you have unsaved changes!',
  useConfirmBtn: true,
  customCloseBtnText: 'Yes',
  customConfirmBtnText: 'No',
  onClose: this.Leave,
  onConfirm: this.StayWhereYouAre,
};

Credits

• The icons from SweetAlert
• Chakra UI for building the demo page
• vue-code-highlight for beautiful syntax highlighter
• Other awesome projects you can found on the package.json

Contributing

If you'd like to contribute, head to the contributing guidelines. Inside you'll find directions for opening issues, coding standards, and notes on development.

Copyright © 2017-present, built with ❤️ by Irfan Maulana