1.1.0

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "aurelia-form",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "Makes working with forms just a tad more pleasant.",
   "keywords": [
     "aurelia",

dist/amd/aurelia-form.js

@@ -26,7 +26,7 @@ define(['exports', './decorator/index', 'aurelia-view-manager', 'aurelia-logging
 
     var defaultComponents = ['aurelia-form', 'form-element', 'form-label', 'form-button', 'form-help', 'form-error', 'form-group', 'entity-form'];
 
-    var defaultElements = ['input', 'checkbox', 'radio', 'select', 'textarea'];
+    var defaultElements = ['input', 'checkbox', 'radio', 'select', 'textarea', 'association'];
 
     aurelia.globalResources.apply(aurelia, ['./attribute/prefixed'].concat(defaultComponents.map(function (component) {
       return './component/' + component;
@@ -44,6 +44,7 @@ define(['exports', './decorator/index', 'aurelia-view-manager', 'aurelia-logging
   var config = exports.config = {
     'aurelia-form': {
       defaultElement: 'input',
+      defaultBehavior: 'regular',
       elements: {},
       validation: {},
 

dist/amd/component/aurelia-form.js

@@ -80,6 +80,7 @@ define(['exports', 'aurelia-framework', 'aurelia-config', 'aurelia-view-manager'
       this.buttonEnabled = config.submitButton.enabled;
       this.buttonOptions = config.submitButton.options;
       this.buttonLabel = config.submitButton.label;
+      this.behavior = config.defaultBehavior;
 
       var validation = config.validation;
 
@@ -148,7 +149,13 @@ define(['exports', 'aurelia-framework', 'aurelia-config', 'aurelia-view-manager'
       this.updateFormGroups();
     };
 
-    AureliaForm.prototype.behaviorChanged = function behaviorChanged() {
+    AureliaForm.prototype.behaviorChanged = function behaviorChanged(newValue) {
+      if (!newValue) {
+        this.behavior = this.config.defaultBehavior;
+
+        return;
+      }
+
       this.updateFormGroups();
     };
 
@@ -160,7 +167,9 @@ define(['exports', 'aurelia-framework', 'aurelia-config', 'aurelia-view-manager'
       }
 
       this.formGroups.forEach(function (group) {
-        group.behavior = _this2.behavior;
+        if (_this2.behavior) {
+          group.behavior = _this2.behavior;
+        }
 
         if (group.name) {
           _this2.mapped[group.name] = group;
@@ -171,9 +180,7 @@ define(['exports', 'aurelia-framework', 'aurelia-config', 'aurelia-view-manager'
     return AureliaForm;
   }(), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'behavior', [_aureliaFramework.bindable], {
     enumerable: true,
-    initializer: function initializer() {
-      return '';
-    }
+    initializer: null
   }), _descriptor2 = _applyDecoratedDescriptor(_class2.prototype, 'classes', [_aureliaFramework.bindable], {
     enumerable: true,
     initializer: function initializer() {

dist/amd/component/entity-form.js

@@ -99,14 +99,37 @@ define(['exports', 'aurelia-framework', 'aurelia-view-manager', '../metadata'],
     _createClass(EntityForm, [{
       key: 'elements',
       get: function get() {
-        var types = this.entity.getMeta().metadata.types;
+        var entityMeta = {};
+
+        if (typeof this.entity.getMeta === 'function') {
+          entityMeta = this.entity.getMeta().metadata;
+        }
+
+        var types = entityMeta.types || {};
+        var associations = entityMeta.associations || {};
         var fields = _metadata.Metadata.forTarget(this.entity).fetch('fields', {});
 
-        return Object.keys(types).map(function (field) {
+        return Object.keys(this.entity).map(function (name) {
+          var field = fields[name] || {};
+          var association = associations[name];
+          var options = field.options || {};
+          var element = types[name] || 'input';
+
+          if (association) {
+            element = 'association';
+            options.resource = association.entity;
+            options.multiple = association.type === 'collection';
+          }
+
+          if (field.element) {
+            element = field.element;
+          }
+
           return {
-            element: types[field],
-            field: field,
-            meta: fields[field] || {}
+            element: element,
+            field: name,
+            meta: field,
+            options: options
           };
         }).sort(function (left, right) {
           var leftPosition = left.meta.position || 0;

dist/amd/component/form-association.js

@@ -0,0 +1,84 @@
+define(['exports', 'aurelia-framework', 'aurelia-view-manager'], function (exports, _aureliaFramework, _aureliaViewManager) {
+  'use strict';
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.FormAssociation = undefined;
+
+  function _initDefineProp(target, property, descriptor, context) {
+    if (!descriptor) return;
+    Object.defineProperty(target, property, {
+      enumerable: descriptor.enumerable,
+      configurable: descriptor.configurable,
+      writable: descriptor.writable,
+      value: descriptor.initializer ? descriptor.initializer.call(context) : void 0
+    });
+  }
+
+
+
+  function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
+    var desc = {};
+    Object['ke' + 'ys'](descriptor).forEach(function (key) {
+      desc[key] = descriptor[key];
+    });
+    desc.enumerable = !!desc.enumerable;
+    desc.configurable = !!desc.configurable;
+
+    if ('value' in desc || desc.initializer) {
+      desc.writable = true;
+    }
+
+    desc = decorators.slice().reverse().reduce(function (desc, decorator) {
+      return decorator(target, property, desc) || desc;
+    }, desc);
+
+    if (context && desc.initializer !== void 0) {
+      desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
+      desc.initializer = undefined;
+    }
+
+    if (desc.initializer === void 0) {
+      Object['define' + 'Property'](target, property, desc);
+      desc = null;
+    }
+
+    return desc;
+  }
+
+  function _initializerWarningHelper(descriptor, context) {
+    throw new Error('Decorating class property failed. Please ensure that transform-class-properties is enabled.');
+  }
+
+  var _dec, _dec2, _dec3, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5;
+
+  var FormAssociation = exports.FormAssociation = (_dec = (0, _aureliaViewManager.resolvedView)('spoonx/form', 'form-association'), _dec2 = (0, _aureliaFramework.customElement)('form-association'), _dec3 = (0, _aureliaFramework.bindable)({ defaultBindingMode: _aureliaFramework.bindingMode.twoWay }), _dec(_class = _dec2(_class = (_class2 = function FormAssociation() {
+
+
+    _initDefineProp(this, 'value', _descriptor, this);
+
+    _initDefineProp(this, 'name', _descriptor2, this);
+
+    _initDefineProp(this, 'options', _descriptor3, this);
+
+    _initDefineProp(this, 'disabled', _descriptor4, this);
+
+    _initDefineProp(this, 'placeholder', _descriptor5, this);
+  }, (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'value', [_dec3], {
+    enumerable: true,
+    initializer: null
+  }), _descriptor2 = _applyDecoratedDescriptor(_class2.prototype, 'name', [_aureliaFramework.bindable], {
+    enumerable: true,
+    initializer: null
+  }), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, 'options', [_aureliaFramework.bindable], {
+    enumerable: true,
+    initializer: null
+  }), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, 'disabled', [_aureliaFramework.bindable], {
+    enumerable: true,
+    initializer: null
+  }), _descriptor5 = _applyDecoratedDescriptor(_class2.prototype, 'placeholder', [_aureliaFramework.bindable], {
+    enumerable: true,
+    initializer: null
+  })), _class2)) || _class) || _class);
+});

dist/amd/component/form-element.js

@@ -99,7 +99,7 @@ define(['exports', 'aurelia-config', 'aurelia-framework', 'aurelia-view-manager'
 
       this.setAttributes(element);
       this.DOMElement.appendChild(element);
-      this.templatingEngine.enhance({ element: element, bindingContext: this });
+      this.templatingEngine.enhance({ element: element, bindingContext: this }).attached();
     };
 
     FormElement.prototype.setAttributes = function setAttributes(DOMElement) {

dist/amd/component/form-group.js

@@ -1,4 +1,4 @@
-define(['exports', 'aurelia-framework', 'aurelia-view-manager'], function (exports, _aureliaFramework, _aureliaViewManager) {
+define(['exports', 'aurelia-framework', 'aurelia-view-manager', 'aurelia-config'], function (exports, _aureliaFramework, _aureliaViewManager, _aureliaConfig) {
   'use strict';
 
   Object.defineProperty(exports, "__esModule", {
@@ -51,10 +51,10 @@ define(['exports', 'aurelia-framework', 'aurelia-view-manager'], function (expor
     throw new Error('Decorating class property failed. Please ensure that transform-class-properties is enabled.');
   }
 
-  var _dec, _dec2, _dec3, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8, _descriptor9, _descriptor10, _descriptor11, _descriptor12, _descriptor13, _descriptor14, _descriptor15, _descriptor16, _descriptor17, _descriptor18;
+  var _dec, _dec2, _dec3, _dec4, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8, _descriptor9, _descriptor10, _descriptor11, _descriptor12, _descriptor13, _descriptor14, _descriptor15, _descriptor16, _descriptor17, _descriptor18, _descriptor19;
 
-  var FormGroup = exports.FormGroup = (_dec = (0, _aureliaViewManager.resolvedView)('spoonx/form', 'form-group'), _dec2 = (0, _aureliaFramework.customElement)('form-group'), _dec3 = (0, _aureliaFramework.bindable)({ defaultBindingMode: _aureliaFramework.bindingMode.twoWay }), _dec(_class = _dec2(_class = (_class2 = function () {
-    function FormGroup() {
+  var FormGroup = exports.FormGroup = (_dec = (0, _aureliaViewManager.resolvedView)('spoonx/form', 'form-group'), _dec2 = (0, _aureliaFramework.customElement)('form-group'), _dec3 = (0, _aureliaFramework.inject)(_aureliaConfig.Configuration.of('aurelia-form')), _dec4 = (0, _aureliaFramework.bindable)({ defaultBindingMode: _aureliaFramework.bindingMode.twoWay }), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = function () {
+    function FormGroup(config) {
 
 
       _initDefineProp(this, 'value', _descriptor, this);
@@ -87,11 +87,16 @@ define(['exports', 'aurelia-framework', 'aurelia-view-manager'], function (expor
 
       _initDefineProp(this, 'required', _descriptor15, this);
 
-      _initDefineProp(this, 'multiple', _descriptor16, this);
+      _initDefineProp(this, 'options', _descriptor16, this);
 
-      _initDefineProp(this, 'selectOptions', _descriptor17, this);
+      _initDefineProp(this, 'multiple', _descriptor17, this);
 
-      _initDefineProp(this, 'optionLabel', _descriptor18, this);
+      _initDefineProp(this, 'selectOptions', _descriptor18, this);
+
+      _initDefineProp(this, 'optionLabel', _descriptor19, this);
+
+      this.config = config;
+      this.behavior = config.defaultBehavior;
     }
 
     FormGroup.prototype.is = function is(oneOf, then, source) {
@@ -112,7 +117,7 @@ define(['exports', 'aurelia-framework', 'aurelia-view-manager'], function (expor
     };
 
     return FormGroup;
-  }(), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'value', [_dec3], {
+  }(), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'value', [_dec4], {
     enumerable: true,
     initializer: function initializer() {
       return null;
@@ -169,18 +174,21 @@ define(['exports', 'aurelia-framework', 'aurelia-view-manager'], function (expor
   }), _descriptor15 = _applyDecoratedDescriptor(_class2.prototype, 'required', [_aureliaFramework.bindable], {
     enumerable: true,
     initializer: null
-  }), _descriptor16 = _applyDecoratedDescriptor(_class2.prototype, 'multiple', [_aureliaFramework.bindable], {
+  }), _descriptor16 = _applyDecoratedDescriptor(_class2.prototype, 'options', [_aureliaFramework.bindable], {
+    enumerable: true,
+    initializer: null
+  }), _descriptor17 = _applyDecoratedDescriptor(_class2.prototype, 'multiple', [_aureliaFramework.bindable], {
     enumerable: true,
     initializer: function initializer() {
       return false;
     }
-  }), _descriptor17 = _applyDecoratedDescriptor(_class2.prototype, 'selectOptions', [_aureliaFramework.bindable], {
+  }), _descriptor18 = _applyDecoratedDescriptor(_class2.prototype, 'selectOptions', [_aureliaFramework.bindable], {
     enumerable: true,
     initializer: function initializer() {
       return [];
     }
-  }), _descriptor18 = _applyDecoratedDescriptor(_class2.prototype, 'optionLabel', [_aureliaFramework.bindable], {
+  }), _descriptor19 = _applyDecoratedDescriptor(_class2.prototype, 'optionLabel', [_aureliaFramework.bindable], {
     enumerable: true,
     initializer: null
-  })), _class2)) || _class) || _class);
+  })), _class2)) || _class) || _class) || _class);
 });

dist/amd/component/view/bootstrap/entity-form.html

@@ -14,7 +14,7 @@
       repeat.for="element of elements"
       show.bind="isVisible(element.field) && !element.meta.noRender"
       label.bind="element.meta.label || element.field"
-      element.bind="element.meta.element || element.element"
+      element.bind="element.element"
       name.bind="element.field"
       placeholder.bind="element.meta.placeholder || ''"
       autofocus.bind="element.meta.autofocus || false"
@@ -23,6 +23,7 @@
       required.bind="element.meta.required || false"
       type.bind="element.meta.type || 'text'"
       value.bind="entity[element.field]"
+      options.bind="element.options"
     ></form-group>
 
     <slot name="after"></slot>

dist/amd/component/view/bootstrap/form-association.html

@@ -0,0 +1,15 @@
+<template>
+  <association-select
+    resource.bind="options.resource"
+    value.bind="value"
+    name.bind="name"
+    multiple.bind="options.multiple"
+    property.bind="options.property || 'name'"
+    identifier.bind="options.identifier || 'id'"
+    criteria.bind="options.criteria || {}"
+    disabled.bind="disabled"
+    placeholder-text.bind="placeholder"
+    hide-placeholder.bind="options.hidePlaceholder || false"
+    selectable-placeholder.bind="options.selectablePlaceholder || false"
+  ></association-select>
+</template>

dist/amd/component/view/bootstrap/form-group.html

@@ -20,6 +20,7 @@
               autofocus.bind="autofocus"
               disabled.bind="disabled"
               readonly.bind="readonly"
+              options.bind="options"
               required.bind="required"
               type.bind="type"
               value.bind="value"
@@ -45,6 +46,7 @@
               autofocus.bind="autofocus"
               disabled.bind="disabled"
               readonly.bind="readonly"
+              options.bind="options"
               required.bind="required"
               type.bind="type"
               value.bind="value"
@@ -62,6 +64,7 @@
             autofocus.bind="autofocus"
             disabled.bind="disabled"
             readonly.bind="readonly"
+            options.bind="options"
             required.bind="required"
             multiple.bind="multiple"
             select-options.bind="selectOptions"

dist/amd/decorator/index.js

@@ -1,4 +1,4 @@
-define(['exports', './placeholder', './label', './element', './position', './autofocus', './disabled', './readonly', './required', './noRender', './inputType'], function (exports, _placeholder, _label, _element, _position, _autofocus, _disabled, _readonly, _required, _noRender, _inputType) {
+define(['exports', './placeholder', './label', './element', './position', './autofocus', './disabled', './readonly', './required', './noRender', './inputType', './options'], function (exports, _placeholder, _label, _element, _position, _autofocus, _disabled, _readonly, _required, _noRender, _inputType, _options) {
   'use strict';
 
   Object.defineProperty(exports, "__esModule", {
@@ -64,4 +64,10 @@ define(['exports', './placeholder', './label', './element', './position', './aut
       return _inputType.inputType;
     }
   });
+  Object.defineProperty(exports, 'options', {
+    enumerable: true,
+    get: function () {
+      return _options.options;
+    }
+  });
 });

dist/amd/decorator/options.js

@@ -0,0 +1,13 @@
+define(['exports', './field'], function (exports, _field) {
+  'use strict';
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.options = options;
+  function options() {
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    return (0, _field.field)(value, 'options');
+  }
+});