VueTypedUIRoot ($UI)

budiadiono · budiadiono · commit 4cf6ad9bea2b · 2016-12-04T03:31:11.000+07:00
diff --git a/demo/src/settings-page/index.html b/demo/src/settings-page/index.html
@@ -1,16 +1,27 @@
-<ui-modal v-on:approved="save" v-on:denied="reset">
+<ui-modal v-on:approve="save" v-on:deny="reset" :closable="false">
 
 	<span slot="header"><i class="icon setting"></i> Settings</span>
 	<ui-form>
-		<ui-dropdown v-model="value.dateFormat" label="Date Format" kind="inline">
+		<ui-dropdown v-model="dateFormat" label="Date Format" kind="inline">
 			<ui-dropdown-item v-for="f in dateFormats" :value="f">{{f}}</ui-dropdown-item>
 		</ui-dropdown>
-		<ui-dropdown v-model="value.timeFormat" label="Time Format" kind="inline">
+		<ui-dropdown v-model="timeFormat" label="Time Format" kind="inline">
 			<ui-dropdown-item v-for="f in timeFormats" :value="f">{{f}}</ui-dropdown-item>
 		</ui-dropdown>
 		<ui-segment>
 			<ui-h4>Numeric Settings</ui-h4>
-			<numeric-settings-page v-model="value.numeric"></numeric-settings-page>
+			<ui-fields-group :wide="2">
+		<ui-field>
+			<ui-input kind="inline" label="Group Separator" v-model="groupSeparator"></ui-input>
+			<ui-input kind="inline" label="Decimal Separator" v-model="decimalSeparator"></ui-input>
+			<ui-input kind="inline" label="Decimal Places" v-model="decimalPlaces"></ui-input>
+		</ui-field>
+		<ui-field>
+			<ui-input kind="inline" label="Sign" v-model="sign"></ui-input>
+			<ui-input kind="inline" label="Min" v-model="min"></ui-input>
+			<ui-input kind="inline" label="Max" v-model="max"></ui-input>
+		</ui-field>
+	</ui-fields-group>
 		</ui-segment>
 	</ui-form>
 	<span slot="actions">
diff --git a/demo/src/settings-page/index.ts b/demo/src/settings-page/index.ts
@@ -1,33 +1,64 @@
 import * as Vue from 'vue';
 import { Component } from 'vue-typed';
 import { DateFormat, TimeFormat } from '../../../lib/types';
-import { NumericSettingsPage } from './numeric-settings-page';
+import { NumericSettings } from '../../../lib/settings';
 import * as _ from "lodash"
 
 @Component({
-	template: require('./index.html'),
-	components: {
-		'numeric-settings-page': NumericSettingsPage
-	}
+	template: require('./index.html')
 })
 export class SettingsPage extends Vue {
-	
-	dateFormats = ['MM/DD/YYYY' , 'DD/MM/YYYY' , 'MMM DD, YYYY' , 'MMMM DD, YYYY']
-	timeFormats = ['HH:mm' , 'hh:mm A' , 'HH:mm:SS']
+
+	dateFormats = ['MM/DD/YYYY', 'DD/MM/YYYY', 'MMM DD, YYYY', 'MMMM DD, YYYY']
+	timeFormats = ['HH:mm', 'hh:mm A', 'HH:mm:SS']
 
 	value = {}
+	dateFormat : DateFormat = undefined
+	timeFormat : TimeFormat = undefined
+
+	groupSeparator = undefined
+	decimalSeparator = undefined
+	decimalPlaces = undefined
+	sign = undefined
+	signPos : 'left' | 'right'= undefined
+	min = undefined
+	max = undefined
 
-	created() {		
+	created() {
 		this.reset()
 	}
 
-	save() {
-		Vue.set(this.$ui, '$settings', this.value)
+	save(e) {
+
+		if (this.decimalSeparator == this.groupSeparator) {
+			e.result = false
+			this.$ui.alert('Numeric Settings Failed', 'Decimal separator can not be same as group separator.')
+			return
+		}
+
+		let $set = this.$UI.$settings
+		$set.dateFormat = this.dateFormat
+		$set.timeFormat = this.timeFormat
+		$set.numeric.decimalPlaces = this.decimalPlaces
+		$set.numeric.decimalSeparator = this.decimalSeparator
+		$set.numeric.groupSeparator = this.groupSeparator
+		$set.numeric.sign = this.sign
+		$set.numeric.signPos = this.signPos
+		$set.numeric.min = this.min
+		$set.numeric.max = this.max
 	}
 
 	reset() {
-		// settings should not reactive before applied
-		this.value = _.cloneDeep(this.$ui.$settings)
+		let $set = this.$UI.$settings
+		this.dateFormat = $set.dateFormat
+		this.timeFormat = $set.timeFormat
+		this.decimalPlaces = $set.numeric.decimalPlaces
+		this.decimalSeparator = $set.numeric.decimalSeparator
+		this.groupSeparator = $set.numeric.groupSeparator
+		this.sign = $set.numeric.sign
+		this.signPos = $set.numeric.signPos
+		this.min = $set.numeric.min
+		this.max = $set.numeric.max
 	}
 
 
diff --git a/demo/src/settings-page/numeric-settings-page.html b/demo/src/settings-page/numeric-settings-page.html
diff --git a/demo/src/settings-page/numeric-settings-page.ts b/demo/src/settings-page/numeric-settings-page.ts
diff --git a/dist/vue-typed-ui.d.ts b/dist/vue-typed-ui.d.ts
@@ -15,18 +15,21 @@ declare namespace VueTypedUI {
 
 declare class VueTypedUI extends VueTypedUIMethods {
 	static install: Vue.PluginFunction<VueTypedUI.Options>
-	$settings: VueTypedUI.Settings
 	
 	createValidationRule(name: string, rule: Function)
 	alert: modules.Alert
 	toast: modules.Toastr
 	focus: modules.Focus
+}
 
+declare class VueTypedUIRoot {
+	$settings: VueTypedUI.Settings
 }
 
 declare module "vue/types/vue" {
 	interface Vue {
 		$ui: VueTypedUI
+		$UI: VueTypedUIRoot
 	}
 }
 
diff --git a/dist/vue-typed-ui.js b/dist/vue-typed-ui.js
diff --git a/src/components/form-inputs/calendar/date/index.ts b/src/components/form-inputs/calendar/date/index.ts
@@ -11,15 +11,15 @@ export class Date extends _DateBase {
 	type = 'date'
 	icon = 'calendar'
 
-	@Watch('$ui.$settings.dateFormat')
+	@Watch('$UI.$settings.dateFormat')
 	onSettingsChanged(val) {
 		$(this.$el)['calendar']('destroy');
 		this.setupUi();
 	}
 
 	buildOptions(options) {
 
-		var format = (!this.format || this.format == 'default') ? this.$ui.$settings.dateFormat : this.format
+		var format = (!this.format || this.format == 'default') ? this.$UI.$settings.dateFormat : this.format
 
 		Object.assign(options, {
 			formatter: {
diff --git a/src/components/form-inputs/calendar/datetime/index.ts b/src/components/form-inputs/calendar/datetime/index.ts
@@ -12,7 +12,7 @@ export class DateTime extends _DatetimeBase {
 	type = 'datetime'
 	icon = 'calendar'
 
-	@Watch('$ui.$settings')
+	@Watch('$UI.$settings')
 	onSettingsChanged(val: Settings, old: Settings) {
 		if (old.dateFormat === val.dateFormat && old.timeFormat === val.timeFormat)
 			return;
@@ -23,7 +23,7 @@ export class DateTime extends _DatetimeBase {
 
 	buildOptions(options) {
 
-		var format = (!this.format || this.format == 'default') ? this.$ui.$settings.dateFormat + ' ' + this.$ui.$settings.timeFormat : this.format
+		var format = (!this.format || this.format == 'default') ? this.$UI.$settings.dateFormat + ' ' + this.$UI.$settings.timeFormat : this.format
 
 		Object.assign(options, {
 			formatter: {
diff --git a/src/components/form-inputs/calendar/time/index.ts b/src/components/form-inputs/calendar/time/index.ts
@@ -11,15 +11,15 @@ export class Time extends _TimeBase {
 	type = 'time'
 	icon = 'time'
 
-	@Watch('$ui.$settings.timeFormat')
+	@Watch('$UI.$settings.timeFormat')
 	onSettingsChanged(val) {
 		$(this.$el)['calendar']('destroy');
 		this.setupUi();
 	}
 
 	buildOptions(options) {
 
-		var format = (!this.format || this.format == 'default') ? this.$ui.$settings.timeFormat : this.format
+		var format = (!this.format || this.format == 'default') ? this.$UI.$settings.timeFormat : this.format
 
 		Object.assign(options, {
 			formatter: {
diff --git a/src/components/form-inputs/currency/index.ts b/src/components/form-inputs/currency/index.ts
@@ -15,8 +15,8 @@ export class Currency extends _CurrencyBase {
 	}
 
 	buildOptions(options) {
-		let signPos : string = Util.pickNonEmpty(this.signPos, this.$ui.$settings.numeric.signPos)		
-		let sign : string = Util.pickNonEmpty(this.sign, this.$ui.$settings.numeric.sign)	
+		let signPos : string = Util.pickNonEmpty(this.signPos, this.$UI.$settings.numeric.signPos)		
+		let sign : string = Util.pickNonEmpty(this.sign, this.$UI.$settings.numeric.sign)	
 		return Object.assign(options, Util.decodeCurrencyProperties(sign, signPos))
 	}
 
diff --git a/src/components/form-inputs/numeric/index.ts b/src/components/form-inputs/numeric/index.ts
@@ -40,15 +40,15 @@ export class Numeric extends _NumericBase {
 		this.setupUI();
 	}
 
-	@Watch('$ui.$settings.numeric', true)
+	@Watch('$UI.$settings.numeric', true)
 	onSettingsChanged(val) {
 		$(this.$el).find('input').autoNumeric('destroy');
 		this.setupUI();
 	}
 	
 	
 	setupUI() {
-		var def = this.$ui.$settings.numeric
+		var def = this.$UI.$settings.numeric
 
 		var opt = {
 			aDec: Util.pickNonEmpty(this.decimalSeparator, def.decimalSeparator),
diff --git a/src/index.ts b/src/index.ts
@@ -8,19 +8,13 @@ import * as _ from 'lodash'
 import { register_all_components, register_all_filters, register_all_methods } from './register';
 
 
-
-
-
-
 /**
  * Main VueTypedUI Plugin Class
  * 
  * @class VueTypedUIOptions
  */
 class VueTypedUI {
 
-	$settings: Settings
-
 	constructor(vue: typeof Vue, options?: Options) {
 
 		const defaultOptions = <Options>{
@@ -34,28 +28,34 @@ class VueTypedUI {
 		if (options.toastr) {
 			_.each(options.toastr, (v, k) => {
 				toastr.options[k] = v
-			})			
+			})
 		}
-		
-		this.$settings = options.settings = vue['util'].extend(DefaultSettings, options.settings || {})
+
+		var settings = options.settings = vue['util'].extend(DefaultSettings, options.settings || {})		
+		var uiRoot = {
+			$settings: settings
+		}
+		vue['util'].defineReactive(Vue.prototype, '$UI', uiRoot)
+
+
 		VueTypedUI.prefix = options.prefix
-		
-		
+
+
 		register_all_components(vue, options.prefix)
-		register_all_filters(vue, options.prefix, this)
+		register_all_filters(vue, options.prefix, uiRoot)
 		register_all_methods(vue, this)
 
+		Object.defineProperty(vue.prototype, '$ui', {
+			get() { return this._ui; }
+		})
+
 	}
 
 	static prefix: string
 	static installed: boolean
 	static install(vue, options?: Options): Vue.PluginFunction<Options> {
 		if (this.installed) return;
 		var instance = new VueTypedUI(vue, options);
-
-		Object.defineProperty(Vue.prototype, '$ui', {
-			get() { return this._ui; }
-		})
 	}
 }
 
diff --git a/src/register.ts b/src/register.ts
@@ -38,10 +38,6 @@ export function register_all_methods(vue: typeof Vue, instance) {
 
 			mdls = _.merge(mdls, instance)
 
-			mdls['createValidationRule'] = (name: string, rule: Function) => {
-				$.fn.form.settings.rules[name] = rule
-			}
-
 			Vue['util'].defineReactive(this, '_ui', mdls)
 		}
 	})

Original file line number	Diff line number	Diff line change
`@@ -15,18 +15,21 @@ declare namespace VueTypedUI {`
`15`	`15`
`16`	`16`	`declare class VueTypedUI extends VueTypedUIMethods {`
`17`	`17`	`static install: Vue.PluginFunction<VueTypedUI.Options>`
`18`		`- $settings: VueTypedUI.Settings`
`19`	`18`
`20`	`19`	`createValidationRule(name: string, rule: Function)`
`21`	`20`	`alert: modules.Alert`
`22`	`21`	`toast: modules.Toastr`
`23`	`22`	`focus: modules.Focus`
	`23`	`+}`
`24`	`24`
	`25`	`+declare class VueTypedUIRoot {`
	`26`	`+ $settings: VueTypedUI.Settings`
`25`	`27`	`}`
`26`	`28`
`27`	`29`	`declare module "vue/types/vue" {`
`28`	`30`	`interface Vue {`
`29`	`31`	`$ui: VueTypedUI`
	`32`	`+ $UI: VueTypedUIRoot`
`30`	`33`	`}`
`31`	`34`	`}`
`32`	`35`
Original file line number	Diff line number	Diff line change
`@@ -15,8 +15,8 @@ export class Currency extends _CurrencyBase {`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`buildOptions(options) {`
`18`		`- let signPos : string = Util.pickNonEmpty(this.signPos, this.$ui.$settings.numeric.signPos)`
`19`		`- let sign : string = Util.pickNonEmpty(this.sign, this.$ui.$settings.numeric.sign)`
	`18`	`+ let signPos : string = Util.pickNonEmpty(this.signPos, this.$UI.$settings.numeric.signPos)`
	`19`	`+ let sign : string = Util.pickNonEmpty(this.sign, this.$UI.$settings.numeric.sign)`
`20`	`20`	`return Object.assign(options, Util.decodeCurrencyProperties(sign, signPos))`
`21`	`21`	`}`
`22`	`22`