switch to sweetalert2

Author: budiadiono

README.md

@@ -145,7 +145,7 @@ These requirements must be referenced in your main HTML file. For example:
 *   [Moment.js](http://momentjs.com/)
 *   [Semantic UI](https://github.com/Semantic-Org/Semantic-UI)
 *   [Semantic UI Calendar](https://github.com/mdehoog/Semantic-UI-Calendar)
-*   [SweetAlert](http://t4t5.github.io/sweetalert/)
+*   [SweetAlert2](https://limonte.github.io/sweetalert2/)
 *   [Toastr](http://codeseven.github.io/toastr/)
 
 ### <a id="License_44"></a>License

demo/src/docs/home/view.pug

@@ -121,7 +121,7 @@
 		li
 			a(href='https://github.com/mdehoog/Semantic-UI-Calendar') Semantic UI Calendar
 		li
-			a(href='http://t4t5.github.io/sweetalert/') SweetAlert
+			a(href='https://limonte.github.io/sweetalert2/') SweetAlert2
 		li
 			a(href='http://codeseven.github.io/toastr/') Toastr
 	h3

demo/src/docs/modules/alert/index.ts

@@ -26,11 +26,9 @@ export class Alert extends Virtual<Vue>() {
 			showCancelButton: true,
 			confirmButtonColor: "#DD6B55",
 			confirmButtonText: "Yes, delete it!",
-			closeOnConfirm: false
-		},
-			function () {
-				swal("Deleted!", "Your imaginary file has been deleted.", "success");
-			})
+		}).then(() => {
+			this.$ui.alert("Deleted!", "Your imaginary file has been deleted.", "success");
+		})
 	}
 
 	sample5() {
@@ -41,17 +39,20 @@ export class Alert extends Virtual<Vue>() {
 			showCancelButton: true,
 			confirmButtonColor: "#DD6B55",
 			confirmButtonText: "Yes, delete it!",
-			cancelButtonText: "No, cancel plx!",
-			closeOnConfirm: false,
-			closeOnCancel: false
-		},
-			function (isConfirm) {
-				if (isConfirm) {
-					swal("Deleted!", "Your imaginary file has been deleted.", "success");
-				} else {
-					swal("Cancelled", "Your imaginary file is safe :)", "error");
-				}
-			})
+			cancelButtonText: "No, cancel plx!"
+		}).then(() => {
+			this.$ui.alert("Deleted!", "Your imaginary file has been deleted.", "success");
+		}, (dismiss) => {
+			// dismiss can be 'cancel', 'overlay',
+			// 'close', and 'timer'
+			if (dismiss === 'cancel') {
+				this.$ui.alert(
+					'Cancelled',
+					'Your imaginary file is safe :)',
+					'error'
+				)
+			}
+		})
 	}
 
 	sample6() {
@@ -65,8 +66,7 @@ export class Alert extends Virtual<Vue>() {
 	sample7() {
 		this.$ui.alert({
 			title: "HTML <small>Title</small>!",
-			text: "A custom <span style=\"color: #F8BB86\">html<span> message.",
-			html: true
+			html: "A custom <span style=\"color: #F8BB86\">html<span> message."
 		})
 	}
 
@@ -84,38 +84,45 @@ export class Alert extends Virtual<Vue>() {
 		this.$ui.alert({
 			title: "An input!",
 			text: "Write something interesting:",
-			type: "input",
+			input: 'text',
 			showCancelButton: true,
-			closeOnConfirm: false,
-			animation: "slide-from-top",
-			inputPlaceholder: "Write something"
-		},
-			function (inputValue) {
-				if (inputValue === false) return false;
-
-				if (inputValue === "") {
-					swal.showInputError("You need to write something!");
-					return false
-				}
-
-				swal("Nice!", "You wrote: " + inputValue, "success");
-			})
+			animation: true,
+			inputPlaceholder: "Write something",
+			inputValidator: (value) => {
+				return new Promise((resolve, reject) => {
+					if (value) {
+						resolve()
+					} else {
+						reject('You need to write something!')
+					}
+				}) as any
+			}
+		}).then((inputValue) => {
+			this.$ui.alert("Nice!", "You wrote: " + inputValue, "success");
+		})
 	}
 
 	sample10() {
 		this.$ui.alert({
 			title: "Ajax request example",
-			text: "Submit to run ajax request",
-			type: "info",
+			input: 'email',
 			showCancelButton: true,
-			closeOnConfirm: false,
-			showLoaderOnConfirm: true,
-		},
-			function () {
-				setTimeout(function () {
-					swal("Ajax request finished!");
-				}, 2000);
-			})
+			showLoaderOnConfirm: true,			
+			preConfirm: function (email) {
+				return new Promise(function (resolve, reject) {
+					setTimeout(function () {
+						if (email === '[email protected]') {
+							reject('This email is already taken.')
+						} else {
+							resolve()
+						}
+					}, 2000)
+				})
+			},
+			allowOutsideClick: false
+		}).then((email) => {
+			this.$ui.alert("Email submitted to '" + email + "'!");
+		})
 	}
 
 

demo/webpack.config.js

@@ -10,7 +10,7 @@ module.exports = {
 
   entry: {
     bundle: ['./src/index.ts'],
-    vendor: ['vue', 'vue-router', 'vue-typed', 'moment', 'lodash', 'autonumeric', 'js-beautify', 'sweetalert', 'toastr']
+    vendor: ['vue', 'vue-router', 'vue-typed', 'moment', 'lodash', 'autonumeric', 'js-beautify', 'sweetalert2', 'toastr']
   },
 
   output: {

dist/vue-typed-ui.js

@@ -1,7 +1,7 @@
-import * as swal from 'sweetalert'
+import { default as swal } from 'sweetalert2'
 import * as toastr from 'toastr'
 
-export type Alert = typeof swal 
+export type Alert = typeof swal
 export type Toastr = typeof toastr
 export type Focus = (element: string | HTMLElement | JQuery) => JQuery
 

lib/modules.d.ts

@@ -13,11 +13,10 @@
   "author": "Budi Adiono <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "@types/sweetalert": "^1.1.27",
     "@types/toastr": "^2.1.32",
     "autonumeric": "^1.9.46",
     "moment": "^2.16.0",
-    "sweetalert": "^1.1.3",
+    "sweetalert2": "^6.4.0",
     "toastr": "^2.1.2",
     "vue": "^2.0.5",
     "vue-typed": "^2.0.3"

package.json

@@ -1,9 +1,9 @@
 import * as Vue from 'vue'
-import * as swal  from 'sweetalert'
-import '../../../node_modules/sweetalert/dist/sweetalert.css';
+import { default as swal } from 'sweetalert2'
+import '../../../node_modules/sweetalert2/dist/sweetalert2.css';
 
 export function alert(instance, $this: Vue) {
 	return function (options: any) {
-		swal.apply(this, arguments)
+		return swal.apply(this, arguments)
 	}
 }