feat(form): add ux form and form-row utility

add ux-form component
add form row layout class

Author: serifine

src/form/ux-form-theme.css

@@ -0,0 +1,22 @@
+styles.form {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+styles.form .form-row {
+  display: flex;
+  flex-direction: row;
+}
+
+styles.form .form-row>* {    
+  margin: 0 8px;
+}
+
+styles.form .form-row>*:last-child {
+  margin-right: 0;
+}
+
+styles.form .form-row>*:first-child {
+  margin-left: 0;
+}

src/form/ux-form-theme.ts

@@ -0,0 +1,9 @@
+import { styles } from '../styles/decorators';
+
+@styles()
+export class UxFormTheme {
+  public background: string = 'transparent';
+  public foreground: string;
+
+  public formPadding: 8;
+}

src/form/ux-form.html

@@ -0,0 +1,5 @@
+<template role="form" styles.form>
+  <require from="./ux-form-theme"></require>
+
+  <slot></slot>
+</template>

src/form/ux-form.ts

@@ -0,0 +1,36 @@
+import { customElement, bindable, ViewResources, View, processAttributes } from 'aurelia-templating';
+import { inject } from 'aurelia-dependency-injection';
+import { StyleEngine } from '../styles/style-engine';
+import { Themable } from '../styles/themable';
+import { processDesignAttributes } from '../designs/design-attributes';
+
+@inject(ViewResources, StyleEngine)
+@customElement('ux-form')
+@processAttributes(processDesignAttributes)
+
+export class UxForm implements Themable {
+    @bindable public theme = null;
+
+    public view: View;
+
+    constructor(public resources: ViewResources, private styleEngine: StyleEngine) { }
+
+    public created(_: any, myView: View) {
+        this.view = myView;
+    }
+
+    public bind() {
+        if (this.theme) {
+            this.styleEngine.applyTheme(this, this.theme);
+        }
+    }
+
+    // public attached() { }
+
+    // public detached() { }
+
+
+    public themeChanged(newValue: any) {
+        this.styleEngine.applyTheme(this, newValue);
+    }
+}

src/index.ts

@@ -1,22 +1,24 @@
-import {FrameworkConfiguration} from 'aurelia-framework';
-import {AureliaUX} from './aurelia-ux';
+import { FrameworkConfiguration } from 'aurelia-framework';
+import { AureliaUX } from './aurelia-ux';
 
-export {swatches} from './colors/swatches';
-export {shadows} from './colors/shadows';
-export {UxButtonTheme} from './button/ux-button-theme';
-export {UxInputTheme} from './input/ux-input-theme';
-export {UxInputInfoTheme} from './input-info/ux-input-info-theme';
-export {UxTextareaTheme} from './textarea/ux-textarea-theme';
+export { swatches } from './colors/swatches';
+export { shadows } from './colors/shadows';
+export { UxButtonTheme } from './button/ux-button-theme';
+export { UxInputTheme } from './input/ux-input-theme';
+export { UxInputInfoTheme } from './input-info/ux-input-info-theme';
+export { UxTextareaTheme } from './textarea/ux-textarea-theme';
+export { UxFormTheme } from './form/ux-form-theme';
 export * from './styles/decorators';
-export {AureliaUX} from './aurelia-ux';
-export {UXConfiguration} from './ux-configuration';
+export { AureliaUX } from './aurelia-ux';
+export { UXConfiguration } from './ux-configuration';
 
 export function configure(config: FrameworkConfiguration, callback?: (config: AureliaUX) => Promise<any>) {
   config.globalResources([
     './button/ux-button',
     './input/ux-input',
     './input-info/ux-input-info',
-    './textarea/ux-textarea'
+    './textarea/ux-textarea',
+    './form/ux-form'
   ]);
 
   const ux = config.container.get(AureliaUX) as AureliaUX;