Directiva focus, InputAttrsNormalizer

@salix/app/src/styles/margin.scss

@@ -28,13 +28,13 @@ html [margin-small-bottom], .margin-small-bottom {
   margin-bottom: $margin-small;
 }
 html [margin-small-v], .margin-small-v {
-  margin-left: $margin-small;
-  margin-right: $margin-small;
-}
-html [margin-small-h], .margin-small-h {
   margin-top: $margin-small;
   margin-bottom: $margin-small;
 }
+html [margin-small-h], .margin-small-h {
+  margin-left: $margin-small;
+  margin-right: $margin-small;
+}
 
 /* Medium */
 
@@ -54,13 +54,13 @@ html [margin-medium-bottom], .margin-medium-bottom {
   margin-bottom: $margin-medium;
 }
 html [margin-medium-v], .margin-medium-v {
-  margin-left: $margin-medium;
-  margin-right: $margin-medium;
-}
-html [margin-medium-h], .margin-medium-h {
   margin-top: $margin-medium;
   margin-bottom: $margin-medium;
 }
+html [margin-medium-h], .margin-medium-h {
+  margin-left: $margin-medium;
+  margin-right: $margin-medium;
+}
 
 /* Large */
 
@@ -80,10 +80,10 @@ html [margin-large-bottom], .margin-large-bottom {
   margin-bottom: $margin-large;
 }
 html [margin-large-v], .margin-large-v {
-  margin-left: $margin-large;
-  margin-right: $margin-large;
-}
-html [margin-large-h], .margin-large-h {
   margin-top: $margin-large;
   margin-bottom: $margin-large;
 }
+html [margin-large-h], .margin-large-h {
+  margin-left: $margin-large;
+  margin-right: $margin-large;
+}

@salix/app/src/styles/padding.scss

@@ -28,13 +28,13 @@ html [pad-small-bottom], .pad-small-bottom {
   padding-bottom: $pad-small;
 }
 html [pad-small-v], .pad-small-v {
-  padding-left: $pad-small;
-  padding-right: $pad-small;
-}
-html [pad-small-h], .pad-small-h {
   padding-top: $pad-small;
   padding-bottom: $pad-small;
 }
+html [pad-small-h], .pad-small-h {
+  padding-left: $pad-small;
+  padding-right: $pad-small;
+}
 
 /* Medium */
 
@@ -54,13 +54,13 @@ html [pad-medium-bottom], .pad-medium-bottom {
   padding-bottom: $pad-medium;
 }
 html [pad-medium-v], .pad-medium-v {
-  padding-left: $pad-medium;
-  padding-right: $pad-medium;
-}
-html [pad-medium-h], .pad-medium-h {
   padding-top: $pad-medium;
   padding-bottom: $pad-medium;
 }
+html [pad-medium-h], .pad-medium-h {
+  padding-left: $pad-medium;
+  padding-right: $pad-medium;
+}
 
 /* Large */
 
@@ -80,10 +80,10 @@ html [pad-large-bottom], .pad-large-bottom {
   padding-bottom: $pad-large;
 }
 html [pad-large-v], .pad-large-v {
-  padding-left: $pad-large;
-  padding-right: $pad-large;
-}
-html [pad-large-h], .pad-large-h {
   padding-top: $pad-large;
   padding-bottom: $pad-large;
 }
+html [pad-large-h], .pad-large-h {
+  padding-left: $pad-large;
+  padding-right: $pad-large;
+}

@salix/core/src/check/check.js

@@ -1,16 +1,18 @@
 import {module as _module} from '../module';
 import * as resolveFactory from '../resolveDefaultComponents';
+import * as normalizerFactory from '../inputAttrsNormalizer';
 import * as util from '../util';
 
 const _NAME = 'check';
 export const NAME = util.getName(_NAME);
 
-directive.$inject =[resolveFactory.NAME];
-export function directive (resolve){
+directive.$inject =[resolveFactory.NAME, normalizerFactory.NAME];
+export function directive (resolve, normalizer){
     return{
         require:'E',
-        template: function(_,attr){
-           return resolve.getTemplate(_NAME, attr);
+        template: function(_,attrs){
+            normalizer.normalize (attrs);
+           return resolve.getTemplate(_NAME, attrs);
         }
     }
 }

@salix/core/src/check/check.mdl.html

@@ -1,4 +1,4 @@
 <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
-	<input type="checkbox" name="*[name]*" class="*[className]*" ng-model="*[model]*.*[name]*" *[enabled]*>
+	<input type="checkbox" name="*[name]*" class="*[className]*" name="*[name]*" ng-model="*[model]*" rule="*[rule]*" *[enabled]* *[focus]*>
 	<span class="mdl-checkbox__label">*[label]*</span>
 </label>

@salix/core/src/combo/combo.js

@@ -1,17 +1,19 @@
 import {module} from '../module';
 import * as resolveFactory from '../resolveDefaultComponents';
+import * as normalizerFactory from '../inputAttrsNormalizer';
 import * as util from '../util';
 
 const _NAME = 'combo';
 export const NAME = util.getName(_NAME);
 
-directive.$inject = [resolveFactory.NAME];
-export function directive(resolve) {
+directive.$inject = [resolveFactory.NAME, normalizerFactory.NAME];
+export function directive(resolve, normalizer) {
     return {
         require: 'E',
         transclude: true,
-        template: function(_, attr) {
-            return resolve.getTemplate(_NAME, attr);
+        template: function(_, attrs) {
+            normalizer.normalize (attrs);
+            return resolve.getTemplate(_NAME, attrs);
         }
     };
 }

@salix/core/src/combo/combo.mdl.html

@@ -1,5 +1,5 @@
 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-	<select class="mdl-textfield__input" class="*[className]*" name="*[name]*" ng-model="*[model]*.*[name]*" *[enabled]* ng-transclude>
+	<select class="mdl-textfield__input" class="*[className]*" name="*[name]*" ng-model="*[model]*" rule="*[rule]*" *[enabled]* ng-transclude>
 	</select>
 	<label class="mdl-textfield__label">*[label]*</label>
 </div>

@salix/core/src/core.js

@@ -8,6 +8,9 @@ export {NAME as RESOLVEDEFAULTCOMPONENT, ResolveDefaultComponent} from './resolv
 export {NAME as INTERPOLATE, Interpolate} from './interpolate'
 export {NAME as ROUTES_LOADER, RoutesLoader} from './routesLoader'
 
+export {NAME as FOCUS, directive as Focus} from './focus'
+export {NAME as RULE, directive as Rule} from './rule'
+
 export {NAME as BUTTON, directive as ButtonDirective} from './button/button'
 export {NAME as BUTTON_MDL, factory as buttonMdl} from './button/button.mdl'
 export {NAME as BUTTON_BT, factory as buttonBt} from './button/button.bt'
@@ -39,7 +42,4 @@ export {NAME as DATE_PICKER, directive as DatePickerDirective} from './date-pick
 export {NAME as DATE_PICKER_MDL, factory as datePickerMdl} from './date-picker/date-picker.mdl'
 
 export {NAME as TITLE, COMPONENT as TITLE_COMPONENT} from './title/title'
-
-
-
-
+export {NAME as SUBTITLE, COMPONENT as SUBTITLE_COMPONENT} from './subtitle/subtitle'

@salix/core/src/date-picker/date-picker.js

@@ -1,16 +1,18 @@
 import {module} from '../module';
 import * as resolveFactory from '../resolveDefaultComponents';
+import * as normalizerFactory from '../inputAttrsNormalizer';
 import * as util from '../util';
 
 const _NAME = 'datePicker';
 export const NAME = util.getName(_NAME);
 
-directive.$inject = [resolveFactory.NAME];
-export function directive(resolve) {
+directive.$inject = [resolveFactory.NAME, normalizerFactory.NAME];
+export function directive(resolve, normalizer) {
     return {
         require: 'E',
-        template: function(_, attr) {
-            return resolve.getTemplate(_NAME, attr);
+        template: function(_, attrs) {
+            normalizer.normalize (attrs);
+            return resolve.getTemplate(_NAME, attrs);
         }
     };
 }

@salix/core/src/date-picker/date-picker.mdl.html

@@ -1,4 +1,4 @@
 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-	<input class="mdl-textfield__input *[className]*" type="text" name="*[name]*" ng-model="*[model]*.*[name]*" *[enabled]*>
+	<input class="mdl-textfield__input *[className]*" type="text" name="*[name]*" ng-model="*[model]*" rule="*[rule]*" *[enabled]*>
 	<label class="mdl-textfield__label">*[label]*</label>
 </div>

@salix/core/src/focus.js

@@ -0,0 +1,16 @@
+import {module} from './module';
+
+export const NAME = 'vnFocus';
+export function directive() {
+    return {
+        restrict: 'A',
+        link: function (scope, elements, attrs){
+            let element = elements[0];
+            element.focus();
+            let len = element.value ? element.value.length : 0;
+            element.setSelectionRange(0, len);
+            //element.select();
+        }
+    };
+}
+module.directive(NAME, directive);

@salix/core/src/inputAttrsNormalizer.js

@@ -0,0 +1,30 @@
+import {module} from './module';
+
+export const NAME = 'vnInputAttrsNormalizer';
+export class InputAttrsNormalizer {
+	constructor () {}
+	$get(){
+        return {
+            normalize: function(attrs) {
+                if (!attrs.entity)
+                    throw new Error(`Attribute 'entity' not defined on input`);
+                if (!attrs.field)
+                    throw new Error(`Attribute 'field' not defined on input`);
+
+                if (attrs.model === undefined)
+                    attrs.model = `${attrs.entity}.model.${attrs.field}`;
+                if (attrs.rule === undefined)
+                    attrs.rule = `${attrs.entity}.${attrs.field}`;
+                if (attrs.label === undefined)
+                    attrs.label = `${attrs.entity}.${attrs.field}`;
+                if (attrs.name === undefined)
+                    attrs.name = attrs.field;
+
+                if (attrs.focus !== undefined)
+                    attrs.focus = 'vn-focus';
+            }
+        };
+	}
+}
+
+module.provider (NAME, () => new InputAttrsNormalizer ())

@salix/core/src/password/password.js

@@ -1,16 +1,18 @@
 import {module} from '../module';
 import * as resolveFactory from '../resolveDefaultComponents';
+import * as normalizerFactory from '../inputAttrsNormalizer';
 import * as util from '../util';
 
 const _NAME = 'password';
 export const NAME = util.getName(_NAME);
 
-directive.$inject =[resolveFactory.NAME];
-export function directive (resolve){
+directive.$inject =[resolveFactory.NAME, normalizerFactory.NAME];
+export function directive (resolve, normalizer){
     return{
         require:'E',
-        template: function(_,attr){
-           return resolve.getTemplate(_NAME, attr);
+        template: function(_, attrs){
+            normalizer.normalize (attrs);
+            return resolve.getTemplate(_NAME, attrs);
         }
     }
 }

@salix/core/src/password/password.mdl.html

@@ -1,4 +1,4 @@
 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-	<input class="*[className]*" type="password" name="*[name]*" ng-model="*[model]*.*[name]*" *[enabled]*>
+	<input class="*[className]*" type="password" name="*[name]*" ng-model="*[model]*" rule="*[rule]*" *[enabled]* *[focus]*>
 	<label class="mdl-textfield__label">*[label]*</label>
 </div>

@salix/core/src/resolveDefaultComponents.js

@@ -14,7 +14,7 @@ export class ResolveDefaultComponent {
     }
     $get($injector,vnInterpolate) {
         return {
-            getTemplate:function(name ,attr) {
+            getTemplate:function(name, attrs) {
                 this._frameworkName = 'Mdl';
                 let _name = util.getFactoryName( name + this._frameworkName);
                 let defaultfactory = $injector.has(_name) ? $injector.get(_name) : undefined;
@@ -25,7 +25,7 @@ export class ResolveDefaultComponent {
 
                 let defaultValues = defaultfactory.default;
                 let template = defaultfactory.template;
-                let scope = Object.assign(defaultValues || {},attr||{});
+                let scope = Object.assign({}, defaultValues || {}, attrs || {});
                 return template && vnInterpolate(template)(scope);
             }
         };

@salix/core/src/rule.js

@@ -0,0 +1,11 @@
+import {module} from './module';
+
+export const NAME = 'vnRule';
+export function directive() {
+    return {
+        restrict: 'A',
+        link: function (attrs, element){
+        } 
+    };
+}
+module.directive(NAME, directive);

@salix/core/src/subtitle/subtitle.html

@@ -0,0 +1,2 @@
+<h5 style="margin-top: 0;" class="border-dashed-top pad-medium-v" level="*[level]*" ng-transclude>
+</h5>

@salix/core/src/subtitle/subtitle.js

@@ -0,0 +1,9 @@
+import template from './subtitle.html';
+import {module} from '../module';
+
+export const NAME = "vnSubtitle";
+export const COMPONENT = {
+    template: template,
+    transclude: true
+};
+module.component(NAME, COMPONENT);

@salix/core/src/textfield/textfield.js

@@ -1,16 +1,18 @@
 import {module as _module} from '../module';
 import * as resolveFactory from '../resolveDefaultComponents';
+import * as normalizerFactory from '../inputAttrsNormalizer';
 import * as util from '../util';
 
 const _NAME = 'textfield';
 export const NAME = util.getName(_NAME);
 
-directive.$inject =[resolveFactory.NAME];
-export function directive (resolve){
+directive.$inject =[resolveFactory.NAME, normalizerFactory.NAME];
+export function directive (resolve, normalizer){
     return{
         require:'E',
-        template: function(_,attr){
-           return resolve.getTemplate(_NAME, attr);
+        template: function(_, attrs){
+            normalizer.normalize (attrs);
+            return resolve.getTemplate(_NAME, attrs);
         }
     }
 }

@salix/core/src/textfield/textfield.mdl.html

@@ -1,4 +1,4 @@
 <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-	<input class="*[className]*" type="*[type]*" name="*[name]*" ng-model="*[model]*.*[name]*" *[enabled]* *[focus]*>
+	<input class="*[className]*" type="*[type]*" name="*[name]*" ng-model="*[model]*" rule="*[rule]*" *[enabled]* *[focus]*>
 	<label class="mdl-textfield__label">*[label]*</label>
 </div>

@salix/core/src/textfield/textfield.mdl.js

@@ -16,10 +16,8 @@ export function factory() {
         default: {
             label: DEFAULT_LABEL,
             name: 'textfield',
-            enabled: 'enabled',
             className: DEFAULT_CLASS,
-            type: DEFAULT_TYPE,
-            model: '$ctrl.model'
+            type: DEFAULT_TYPE
         }
     }
 }

@salix/crud/src/client/basic-data/index.js

@@ -11,7 +11,8 @@ export const COMPONENT = {
                 json => console.error(json.data.error.message)
             );
         };
-    }
+    },
+    controllerAs: 'client'
 };
 COMPONENT.controller.$inject = ['$http'];
 module.component(NAME, COMPONENT);

@salix/login/src/login/login.html

@@ -3,9 +3,9 @@
 	<div class="box">
 		<img src="./logo.svg"/>
 		<form name="form" ng-submit="login.submit()">
-			<vn-textfield label="User" name="email" model="login.model"></vn-textfield>
-			<vn-password label="Password" name="password" model="login.model"></vn-password>
-			<vn-check label="Do not close session" name="remember" model="login.model"></vn-check>
+			<vn-textfield label="User" entity="login" field="email"></vn-textfield>
+			<vn-password label="Password" entity="login" field="password"></vn-password>
+			<vn-check label="Do not close session" entity="login" field="remember"></vn-check>
 			<div class="footer">
 				<vn-submit label="Enter"></vn-submit>
 				<vn-spinner id="spinner"></vn-spinner>

docker-compose.yml

@@ -1,22 +1,22 @@
 version: '2'
 services:
-  account:
-    build:
-        context: ./@salix-services/account
-    ports:
-          - "3000:3000"
-  client:
-    build:
-        context: ./@salix-services/client
-    ports: 
-           - "3002:3002"
-  nginx:
-    build: 
-        context: ./@salix
-    ports: 
-          - "8080:8080"
-  salix:
-    build: 
-        context: ./@salix-services/salix
-    ports: 
-          - "3001:3001"
+    salix:
+        build: 
+            context: ./services/salix
+        ports: 
+            - "3001:3001"
+    account:
+        build:
+            context: ./services/account
+        ports:
+            - "3000:3000"
+    nginx:
+        build: 
+            context: ./@salix
+        ports: 
+            - "8080:8080"
+    client:
+        build:
+            context: ./services/client
+        ports: 
+            - "3002:3002"