mixins + focus module (closes #19)

budiadiono · budiadiono · commit 07174e55bbf3 · 2016-12-03T13:55:48.000+07:00
diff --git a/demo/docs/src/modules/focus/README.md b/demo/docs/src/modules/focus/README.md
@@ -0,0 +1,9 @@
+## focus
+
+Is a helper function to change focus to target element.
+
+Usage:
+
+```
+$ui.focus(<target-element>)
+```
diff --git a/demo/src/demo/focus/index.html b/demo/src/demo/focus/index.html
@@ -0,0 +1,7 @@
+<div class="ui form">
+	<ui-input id="foo" label="Foo" v-model="text"></ui-input>
+	<ui-input id="bar" label="Bar" v-model="text"></ui-input>
+
+	<ui-button @click="focusToFoo">Focus to Foo</ui-button>
+	<ui-button @click="focusToBar">Focus to Bar</ui-button>
+</div>
diff --git a/demo/src/demo/focus/index.ts b/demo/src/demo/focus/index.ts
@@ -0,0 +1,20 @@
+import { Component } from 'vue-typed';
+import { Base } from '../base'
+import * as Vue from 'vue'
+
+@Component({
+	template: require('./index.html')
+})
+export class Focus extends Base {
+
+	text = ''
+
+	focusToFoo() {
+		this.$ui.focus('#foo')
+	}
+
+	focusToBar() {
+		this.$ui.focus('#bar')
+	}
+
+}
diff --git a/demo/src/demo/routes.ts b/demo/src/demo/routes.ts
@@ -18,6 +18,7 @@ import { Menu } from './menu';
 import { Message } from './message';
 import { Alert } from './alert';
 import { Toastr } from './toastr';
+import { Focus } from './focus';
 
 
 // Main routes builder
@@ -41,7 +42,8 @@ const m = [
 	{ group: 'component/menu', text: 'Menu', path: 'menu', component: Menu },
 	{ group: 'component/message', text: 'Message', path: 'message', component: Message },
 	{ group: 'module/alert', text: 'Alert', path: 'alert', component: Alert },
-	{ group: 'module/toastr', text: 'Toastr', path: 'toastr', component: Toastr }
+	{ group: 'module/toastr', text: 'Toastr', path: 'toastr', component: Toastr },
+	{ group: 'module/focus', text: 'Focus', path: 'focus', component: Focus }
 ]
 
 // Build router routes
diff --git a/demo/src/index.ts b/demo/src/index.ts
@@ -1,7 +1,8 @@
 import * as Vue from 'vue';
 import * as VueRouter from 'vue-router';
 import { Component } from 'vue-typed';
-import * as VueTypedUI from '../../dist/vue-typed-ui';
+import { Options } from '../../dist/vue-typed-ui';
+import * as VueTypedUI from '../../src/index';
 import { SettingsPage } from './settings-page';
 
 
@@ -12,7 +13,7 @@ import { SettingsPage } from './settings-page';
 // --------------------------------------------------------------------------------------
 Vue.use(VueRouter);
 
-Vue.use(VueTypedUI, <VueTypedUI.Options>{
+Vue.use(VueTypedUI, <Options>{
 	prefix: 'ui',
 	toastr: {
 		showDuration: 300,
diff --git a/dist/vue-typed-ui.d.ts b/dist/vue-typed-ui.d.ts
@@ -20,6 +20,8 @@ declare class VueTypedUI extends VueTypedUIMethods {
 	createValidationRule(name: string, rule: Function)
 	alert: modules.Alert
 	toast: modules.Toastr
+	focus: modules.Focus
+
 }
 
 declare module "vue/types/vue" {
diff --git a/dist/vue-typed-ui.js b/dist/vue-typed-ui.js
@@ -2816,11 +2816,18 @@ function toast(instance) {
     return toastr;
 }
 
+function focus(instance) {
+    return function focus(element) {
+        console.log('focus to', instance, element);
+    };
+}
+
 
 
 var md = Object.freeze({
 	alert: alert,
-	toast: toast
+	toast: toast,
+	focus: focus
 });
 
 function DateTime$1(instance) {
diff --git a/doc/api.json b/doc/api.json
@@ -1089,7 +1089,7 @@
     "id": "module/focus",
     "module": "focus",
     "type": "module",
-    "readme": false
+    "readme": true
   },
   "module/toastr": {
     "dir": "src/modules/toastr",
diff --git a/lib/modules.d.ts b/lib/modules.d.ts
@@ -2,4 +2,5 @@ import * as swal from 'sweetalert'
 import * as toastr from 'toastr'
 
 export type Alert = typeof swal 
-export type Toastr = typeof toastr
+export type Toastr = typeof toastr
+export type Focus = (element: string | HTMLElement | JQuery) => JQuery
diff --git a/src/components/containers/tab/methods.ts b/src/components/containers/tab/methods.ts
@@ -1,6 +1,7 @@
+import * as Vue from 'vue'
 import { Tab } from '../../../../lib/methods'
 
-export function tab(instance) {
+export function tab(instance, $this: Vue) {
 	return function (element: string | HTMLElement | JQuery): Tab {
 		return {
 			changeTab(path: string) {  return $(element).tab('change tab', path);  }
diff --git a/src/components/form-inputs/button/methods.ts b/src/components/form-inputs/button/methods.ts
@@ -1,6 +1,7 @@
+import * as Vue from 'vue'
 import { Button } from '../../../../lib/methods'
 
-export function button(instance) {
+export function button(instance, $this: Vue) {
 	return function (element: string | HTMLElement | JQuery): Button {
 		return {
 			loading(state) {
diff --git a/src/components/modal/methods.ts b/src/components/modal/methods.ts
@@ -1,6 +1,7 @@
+import * as Vue from 'vue'
 import { Modal } from '../../../lib/methods'
 
-export function modal(instance) {
+export function modal(instance, $this: Vue) {
 	return function (element: string | HTMLElement | JQuery): Modal {
 		return {
 			show() { return $(element).modal('show') },
diff --git a/src/index.ts b/src/index.ts
@@ -39,29 +39,23 @@ class VueTypedUI {
 		
 		this.$settings = options.settings = vue['util'].extend(DefaultSettings, options.settings || {})
 		VueTypedUI.prefix = options.prefix
-
+		
+		
 		register_all_components(vue, options.prefix)
 		register_all_filters(vue, options.prefix, this)
-		register_all_methods(this)
-
-	}
+		register_all_methods(vue, this)
 
-	showModal(element: string | HTMLElement | JQuery) {
-		$(element)['modal']('show')
 	}
 
-	createValidationRule(name: string, rule: Function) {
-		$.fn.form.settings.rules[name] = rule
-	}
-
-
 	static prefix: string
 	static installed: boolean
 	static install(vue, options?: Options): Vue.PluginFunction<Options> {
 		if (this.installed) return;
-
 		var instance = new VueTypedUI(vue, options);
-		vue.util.defineReactive(Vue.prototype, '$ui', instance)
+
+		Object.defineProperty(Vue.prototype, '$ui', {
+			get() { return this._ui; }
+		})
 	}
 }
 
diff --git a/src/modules/alert/index.ts b/src/modules/alert/index.ts
@@ -1,8 +1,8 @@
-
+import * as Vue from 'vue'
 import * as swal  from 'sweetalert'
 import '../../../node_modules/sweetalert/dist/sweetalert.css';
 
-export function alert(instance) {
+export function alert(instance, $this: Vue) {
 	return function (options: any) {
 		swal.apply(this, arguments)
 	}
diff --git a/src/modules/focus/README.md b/src/modules/focus/README.md
@@ -0,0 +1,9 @@
+## focus
+
+Is a helper function to change focus to target element.
+
+Usage:
+
+```
+$ui.focus(<target-element>)
+```
diff --git a/src/modules/focus/index.ts b/src/modules/focus/index.ts
@@ -0,0 +1,15 @@
+import * as Vue from 'vue'
+
+export function focus(instance, $this: Vue) {
+	
+	return function focus(element: string | HTMLElement | JQuery) {
+		var target = $($this.$el).find(element as string)
+		if (!target || !target.length) return 
+
+		if (!target.is('input')) {
+			target = target.find('> input')
+		}
+
+		target.focus()
+	}
+}
diff --git a/src/modules/index.ts b/src/modules/index.ts
@@ -1,2 +1,3 @@
 export * from './alert'
-export * from './toastr'
+export * from './toastr'
+export * from './focus'
diff --git a/src/modules/toastr/index.ts b/src/modules/toastr/index.ts
@@ -1,7 +1,7 @@
-
+import * as Vue from 'vue'
 import * as toastr from 'toastr'
 import '../../../node_modules/toastr/build/toastr.css';
 
-export function toast(instance) {
+export function toast(instance, $this: Vue) {
 	return toastr;
 }
diff --git a/src/register.ts b/src/register.ts
@@ -1,28 +1,57 @@
-import * as c from './components'
-import * as m from './components/methods'
-import * as md from './modules'
-import * as f from './filters'
+import * as components from './components'
+import * as methods from './components/methods'
+import * as modules from './modules'
+import * as filters from './filters'
 import * as Vue from 'vue'
+import * as _ from 'lodash'
 
 export function register_all_components(vue: typeof Vue, prefix: string) {
-	for(var k in c) {		
-		vue.component(prefix + '-' + Vue['util'].hyphenate(k), c[k])
+	for (var k in components) {
+		vue.component(prefix + '-' + Vue['util'].hyphenate(k), components[k])
 	}
 }
 
-export function register_all_methods(instance) {	
-	for(var k in m) {
-		instance[k] = m[k](instance)
-	}
-	for(var k in md) {
-		instance[k] = md[k](instance)
+export function register_all_methods(vue: typeof Vue, instance) {
+
+	let global_methods = {
+		'createValidationRule': (name: string, rule: Function) => {
+			$.fn.form.settings.rules[name] = rule
+		},
+
+		'showModal': (element: string | HTMLElement | JQuery) => {
+			$(element).modal('show')
+		}
 	}
+
+	instance = _.merge(instance, global_methods)
+
+	vue.mixin({
+		beforeCreate: function () {
+
+			let mdls = {}
+			for (var k in modules) {
+				mdls[k] = modules[k](instance, this)
+			}
+			for (var k in methods) {
+				mdls[k] = methods[k](instance, this)
+			}
+
+			mdls = _.merge(mdls, instance)
+
+			mdls['createValidationRule'] = (name: string, rule: Function) => {
+				$.fn.form.settings.rules[name] = rule
+			}
+
+			Vue['util'].defineReactive(this, '_ui', mdls)
+		}
+	})
+
 }
 
 
 export function register_all_filters(vue: typeof Vue, prefix: string, instance) {
-	for(var k in f) {		
-		vue.filter(prefix + '-' + Vue['util'].hyphenate(k), f[k](instance))
+	for (var k in filters) {
+		vue.filter(prefix + '-' + Vue['util'].hyphenate(k), filters[k](instance))
 	}
 }
 

Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,8 @@ declare class VueTypedUI extends VueTypedUIMethods {`
`20`	`20`	`createValidationRule(name: string, rule: Function)`
`21`	`21`	`alert: modules.Alert`
`22`	`22`	`toast: modules.Toastr`
	`23`	`+ focus: modules.Focus`
	`24`	`+`
`23`	`25`	`}`
`24`	`26`
`25`	`27`	`declare module "vue/types/vue" {`