added alert module - closes #11

Author: budiadiono

demo/dist/assets/logo-80.png

@@ -0,0 +1,12 @@
+<div>
+	<ui-button @click="sample1">A basic message</ui-button><p/>	
+	<ui-button @click="sample2">A title with a text under</ui-button><p/>
+	<ui-button @click="sample3">A success message!</ui-button><p/>
+	<ui-button @click="sample4">A warning message, with a function attached to the "Confirm"-button...</ui-button><p/>
+	<ui-button @click="sample5">... and by passing a parameter, you can execute something else for "Cancel".</ui-button><p/>
+	<ui-button @click="sample6">A message with a custom icon</ui-button><p/>
+	<ui-button @click="sample7">An HTML message</ui-button><p/>
+	<ui-button @click="sample8">A message with auto close timer</ui-button><p/>
+	<ui-button @click="sample9">A replacement for the "prompt" function</ui-button><p/>
+	<ui-button @click="sample10">With a loader (for AJAX request for example)</ui-button>
+</div>

demo/dist/assets/logo.png

@@ -0,0 +1,124 @@
+import { Component, Prop } from 'vue-typed';
+import { Base } from '../base'
+import * as Vue from 'vue'
+
+@Component({
+	template: require('./index.html')
+})
+export class Alert extends Base {
+
+	sample1() {
+		this.$ui.alert("Here's a message!")
+	}
+
+	sample2() {
+		this.$ui.alert("Here's a message!", "It's pretty, isn't it?")
+	}
+
+	sample3() {
+		this.$ui.alert("Good job!", "You clicked the button!", "success")
+	}
+
+	sample4() {
+		this.$ui.alert({
+			title: "Are you sure?",
+			text: "You will not be able to recover this imaginary file!",
+			type: "warning",
+			showCancelButton: true,
+			confirmButtonColor: "#DD6B55",
+			confirmButtonText: "Yes, delete it!",
+			closeOnConfirm: false
+		},
+			function () {
+				swal("Deleted!", "Your imaginary file has been deleted.", "success");
+			})
+	}
+
+	sample5() {
+		this.$ui.alert({
+			title: "Are you sure?",
+			text: "You will not be able to recover this imaginary file!",
+			type: "warning",
+			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");
+				}
+			})
+	}
+
+	sample6() {
+		this.$ui.alert({
+			title: "Sweet!",
+			text: "Here's a custom image.",
+			imageUrl: "assets/logo-80.png"
+		})
+	}
+
+	sample7() {
+		this.$ui.alert({
+			title: "HTML <small>Title</small>!",
+			text: "A custom <span style=\"color: #F8BB86\">html<span> message.",
+			html: true
+		})
+	}
+
+	sample8() {
+		this.$ui.alert({
+			title: "Auto close alert!",
+			text: "I will close in 2 seconds.",
+			timer: 2000,
+			showConfirmButton: false
+		})
+	}
+
+
+	sample9() {
+		this.$ui.alert({
+			title: "An input!",
+			text: "Write something interesting:",
+			type: "input",
+			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");
+			})
+	}
+
+	sample10() {
+		this.$ui.alert({
+			title: "Ajax request example",
+			text: "Submit to run ajax request",
+			type: "info",
+			showCancelButton: true,
+			closeOnConfirm: false,
+			showLoaderOnConfirm: true,
+		},
+			function () {
+				setTimeout(function () {
+					swal("Ajax request finished!");
+				}, 2000);
+			})
+	}
+
+
+
+}

demo/dist/assets/sweetalert.css

@@ -16,6 +16,7 @@ import { Modal } from './modal';
 import { Tree } from './tree';
 import { Menu } from './menu';
 import { Message } from './message';
+import { Alert } from './alert';
 
 
 // Main routes builder
@@ -37,7 +38,8 @@ const m = [
 	{ text: 'Modal', path: 'modal', component: Modal },
 	{ text: 'Tree', path: 'tree', component: Tree },
 	{ text: 'Menu', path: 'menu', component: Menu },
-	{ text: 'Message', path: 'message', component: Message }
+	{ text: 'Message', path: 'message', component: Message },
+	{ text: 'Alert', path: 'alert', component: Alert }
 ]
 
 // Build router routes

demo/src/demo/alert/index.html

@@ -26,7 +26,7 @@ var config = {
       { test: /\.html$/, loader: 'html-loader' },
       { test: /\.json$/, loader: 'json-loader' },
       { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
-      { test: /\.css$/, loader: 'style-loader/url!file-loader' },
+      { test: /\.css$/, loader: 'style-loader/url!file-loader?name=assets/[name].[ext]' },
       { test: /\.(jpe?g|png|gif|svg)$/i, loader: 'file-loader?name=assets/[name].[ext]' }
     ]
   },

demo/src/demo/alert/index.ts

@@ -4,20 +4,22 @@ import * as sets from '../lib/settings'
 import * as formOpt from '../lib/form-options'
 // import { Modal } from '../lib/methods/modal'
 import {VueTypedUIMethods} from '../lib/methods'
+import * as modules from '../lib/modules'
 
 declare namespace VueTypedUI {
 	export type Options = opts.Options
 	export type Settings = sets.Settings
 	export type FormOptions = formOpt.FormOptions
 	export function FormComponent(options: FormOptions): ClassDecorator
-	export function Validate(options): PropertyDecorator
+	export function Validate(options): PropertyDecorator		
 }
 
 declare class VueTypedUI extends VueTypedUIMethods {
 	static install: Vue.PluginFunction<VueTypedUI.Options>
 	$settings: VueTypedUI.Settings
 
 	createValidationRule(name: string, rule: Function)
+	alert: modules.Alert
 }
 
 declare module "vue/types/vue" {

demo/src/demo/routes.ts

@@ -0,0 +1,3 @@
+import * as swal from 'sweetalert'
+
+export type Alert = typeof swal