Loading Module

Author: budiadiono

demo/docs/src/modules/loading/README.md

@@ -0,0 +1,27 @@
+## focus
+
+Add/remove `loading` class to target element
+
+Usage:
+
+```
+$ui.loading(<target-element>)
+```
+
+Start loading manually:
+
+```
+var target = $ui.loading(<target-element>, false)
+target.start()
+```
+
+To stop:
+
+```
+$ui.loading(<target-element>).stop()
+```
+or
+```
+target.stop()
+```
+

demo/src/demo/loading/index.html

@@ -0,0 +1,7 @@
+<div>
+	<ui-segment id="segment-1">
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+	</ui-segment>
+
+	<ui-button @click="start">Start</ui-button> <ui-button @click="stop">Stop</ui-button>
+</div>

demo/src/demo/loading/index.ts

@@ -0,0 +1,18 @@
+import { Component } from 'vue-typed';
+import { Base } from '../base'
+
+@Component({
+	template: require('./index.html')
+})
+export class Loading extends Base  {
+
+	loading = undefined
+
+	start() {
+		this.loading = this.$ui.loading('#segment-1')
+	}
+
+	stop() {
+		if (this.loading) this.loading.stop()
+	}
+}

demo/src/demo/routes.ts

@@ -26,6 +26,7 @@ import { Alert } from './alert';
 import { Toastr } from './toastr';
 import { Focus } from './focus';
 import { Int } from './filters/int';
+import { Loading } from './loading';
 
 
 // Main routes builder
@@ -57,7 +58,8 @@ const m = [
 	{ group: 'module/alert', text: 'Alert', path: 'alert', component: Alert },
 	{ group: 'module/toastr', text: 'Toastr', path: 'toastr', component: Toastr },
 	{ group: 'module/focus', text: 'Focus', path: 'focus', component: Focus },
-	{ group: 'filter/int', text: 'Int', path: 'filters/int', component: Int }
+	{ group: 'module/loading', text: 'Loading', path: 'loading', component: Loading },
+	{ group: 'filter/int', text: 'Int', path: 'filters/int', component: Int },	
 ]
 
 // Build router routes

dist/vue-typed-ui.d.ts

@@ -20,6 +20,7 @@ declare class VueTypedUI extends VueTypedUIMethods {
 	alert: modules.Alert
 	toast: modules.Toastr
 	focus: modules.Focus
+	loading: modules.Loading
 }
 
 declare class VueTypedUIRoot {

dist/vue-typed-ui.js

@@ -3085,12 +3085,32 @@ function focus(instance, $this) {
     };
 }
 
+function loading$1(instance, $this) {
+    return function loading$1(element) {
+        var auto = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+
+        var target = $($this.$el).find(element);
+        if (!target || !target.length) return;
+        var module = {
+            start: function start() {
+                target.addClass('loading');
+            },
+            stop: function stop() {
+                target.removeClass('loading');
+            }
+        };
+        if (auto) module.start();
+        return module;
+    };
+}
+
 
 
 var modules = Object.freeze({
 	alert: alert,
 	toast: toast,
-	focus: focus
+	focus: focus,
+	loading: loading$1
 });
 
 function DateTime$1(instance) {

doc/api.json

@@ -1188,6 +1188,13 @@
     "type": "module",
     "readme": true
   },
+  "module/loading": {
+    "dir": "src/modules/loading",
+    "id": "module/loading",
+    "module": "loading",
+    "type": "module",
+    "readme": true
+  },
   "module/toastr": {
     "dir": "src/modules/toastr",
     "id": "module/toastr",

lib/modules.d.ts

@@ -3,4 +3,11 @@ import * as toastr from 'toastr'
 
 export type Alert = typeof swal 
 export type Toastr = typeof toastr
-export type Focus = (element: string | HTMLElement | JQuery) => JQuery
+export type Focus = (element: string | HTMLElement | JQuery) => JQuery
+
+interface LoadingModule {
+	start()
+	stop()
+}
+
+export type Loading = (element: string, auto?: boolean) => LoadingModule

src/modules/index.ts

@@ -1,3 +1,4 @@
 export * from './alert'
 export * from './toastr'
-export * from './focus'
+export * from './focus'
+export * from './loading'

src/modules/loading/README.md

@@ -0,0 +1,27 @@
+## focus
+
+Add/remove `loading` class to target element
+
+Usage:
+
+```
+$ui.loading(<target-element>)
+```
+
+Start loading manually:
+
+```
+var target = $ui.loading(<target-element>, false)
+target.start()
+```
+
+To stop:
+
+```
+$ui.loading(<target-element>).stop()
+```
+or
+```
+target.stop()
+```
+