0.2 release.

dist/amd/form/checkbox.js

@@ -0,0 +1,56 @@
+define(
+ ["ember","./group","./checkbox","../mixins/control","exports"],
+ function(__dependency1__, __dependency2__, __dependency3__, __dependency4__, __exports__) {
+ "use strict";
+ var Checkbox = __dependency1__.Checkbox;
+ var Handlebars = __dependency1__.Handlebars;
+ var FormGroupComponent = __dependency2__["default"] || __dependency2__;
+ var FormCheckboxComponent = __dependency3__["default"] || __dependency3__;
+ var ControlMixin = __dependency4__["default"] || __dependency4__;
+
+ /*
+ Form Input
+
+ Syntax:
+ {{em-checkbox property="property name"}}
+ */
+ var CheckboxComponent;
+
+ CheckboxComponent = FormGroupComponent.extend({
+ v_icons: false,
+ validations: false,
+ yieldInLabel: true,
+ controlView: Checkbox.extend(ControlMixin, {
+ "class": false,
+ model: Em.computed.alias('parentView.parentView.model'),
+ propertyName: Em.computed.alias('parentView.parentView.propertyName'),
+ init: function() {
+ this._super();
+ return Em.Binding.from("model." + (this.get('propertyName'))).to('checked').connect(this);
+ }
+ }),
+ wrapperClass: (function() {
+ if (this.get('form.form_layout') === 'horizontal') {
+ return 'col-sm-offset-2 col-sm-10';
+ }
+ }).property('form.form_layout'),
+ labelWrapperClass: (function() {
+ if (this.get('form.form_layout') === 'horizontal') {
+ return 'checkbox';
+ }
+ return null;
+ }).property('form.form_layout'),
+ "class": (function() {
+ if (this.get('form.form_layout') !== 'horizontal') {
+ return 'checkbox';
+ }
+ return 'form-group';
+ }).property('form.form_layout')
+ });
+
+ Handlebars.helper('em-checkbox', function(options) {
+ return Handlebars.helpers.view.call(this, CheckboxComponent, options);
+ });
+
+ __exports__["default"] = CheckboxComponent;
+ });

dist/amd/form/control_help.js

@@ -0,0 +1,56 @@
+define(
+ ["ember","../mixins/in_form","../mixins/has_property","exports"],
+ function(__dependency1__, __dependency2__, __dependency3__, __exports__) {
+ "use strict";
+ var Component = __dependency1__.Component;
+ var Binding = __dependency1__.Binding;
+ var Handlebars = __dependency1__.Handlebars;
+ var InFormMixin = __dependency2__["default"] || __dependency2__;
+ var HasPropertyMixin = __dependency3__["default"] || __dependency3__;
+
+ /*
+ Form Control Help
+
+ Renders a textual help of the control.
+
+ Note: currently must be a direct descendant of a form-group or 'property' must be explicitly defined
+
+ Syntax:
+ {{em-form-control-help}}
+ */
+ var FormControlHelpComponent;
+
+ FormControlHelpComponent = Component.extend(InFormMixin, HasPropertyMixin, {
+ tagName: 'span',
+ classNames: ['help-block'],
+ classNameBindings: ['extraClass', 'horiClassCalc'],
+ layoutName: 'components/form-control-help',
+ text: void 0,
+ extraClass: void 0,
+ horiClass: 'col-sm-offset-2 col-sm-10',
+ horiClassCalc: (function() {
+ if (this.get('form.isHorizontal') && this.get('horiClass')) {
+ return this.get('horiClass');
+ }
+ }).property('form.isHorizontal'),
+ init: function() {
+ this._super();
+ return Binding.from('model.errors.' + this.get('propertyName')).to('errors').connect(this);
+ },
+ helpText: (function() {
+ return this.get('errors.firstObject') || this.get('text');
+ }).property('text', 'errors.firstObject'),
+ hasHelp: (function() {
+ var _ref;
+ return ((_ref = this.get('helpText')) != null ? _ref.length : void 0) > 0;
+ }).property('helpText'),
+ hasError: (function() {
+ var _ref;
+ return (_ref = this.get('errors')) != null ? _ref.length : void 0;
+ }).property('errors.length')
+ });
+
+ Handlebars.helper('em-form-control-help', FormControlHelpComponent);
+
+ __exports__["default"] = FormControlHelpComponent;
+ });

dist/amd/form/form.js

@@ -0,0 +1,82 @@
+define(
+ ["ember","../utils/utils","exports"],
+ function(__dependency1__, __dependency2__, __exports__) {
+ "use strict";
+ var Component = __dependency1__.Component;
+ var Handlebars = __dependency1__.Handlebars;
+ var Utils = __dependency2__["default"] || __dependency2__;
+
+ /*
+ Form View
+
+ A component for rendering a form element.
+
+ Syntax:
+ {{em-form
+ //The layout of the form
+ form_layout="form|inline|horizontal"
+ //The model bound to the form if any
+ model="some_model_instance"
+ //The action to be invoked on the controller when a form is submitted.
+ action="some_action"
+ //if true a submit button will be rendered
+ submit_button=true|false
+ //if true validation icons will be rendered
+ v_icons=true|false
+ }}
+ */
+ var FormComponent;
+
+ FormComponent = Component.extend({
+ tagName: 'form',
+ layoutName: 'components/form',
+ classNameBindings: ['form_layout_class'],
+ attributeBindings: ['role'],
+ role: 'form',
+ form_layout_class: (function() {
+ switch (this.get('form_layout')) {
+ case 'horizontal':
+ case 'inline':
+ return "form-" + (this.get('form_layout'));
+ default:
+ return 'form';
+ }
+ }).property('form_layout'),
+ isDefaultLayout: Utils.createBoundSwitchAccessor('form', 'form_layout', 'form'),
+ isInline: Utils.createBoundSwitchAccessor('inline', 'form_layout', 'form'),
+ isHorizontal: Utils.createBoundSwitchAccessor('horizontal', 'form_layout', 'form'),
+ action: 'submit',
+ model: void 0,
+ form_layout: 'form',
+ submit_button: true,
+ v_icons: true,
+
+ /*
+ Form submit
+ 
+ Optionally execute model validations and perform a form submission.
+ */
+ submit: function(e) {
+ var promise;
+ if (e) {
+ e.preventDefault();
+ }
+ if (Ember.isNone(this.get('model.validate'))) {
+ return this.get('targetObject').send(this.get('action'));
+ } else {
+ promise = this.get('model').validate();
+ return promise.then((function(_this) {
+ return function() {
+ if (_this.get('model.isValid')) {
+ return _this.get('targetObject').send(_this.get('action'));
+ }
+ };
+ })(this));
+ }
+ }
+ });
+
+ Handlebars.helper('em-form', FormComponent);
+
+ __exports__["default"] = FormComponent;
+ });

dist/amd/form/group.js

@@ -0,0 +1,90 @@
+define(
+ ["ember","../mixins/in_form","../mixins/has_property","../mixins/has_property_validation","exports"],
+ function(__dependency1__, __dependency2__, __dependency3__, __dependency4__, __exports__) {
+ "use strict";
+ var Component = __dependency1__.Component;
+ var InFormMixin = __dependency2__["default"] || __dependency2__;
+ var HasPropertyMixin = __dependency3__["default"] || __dependency3__;
+ var HasPropertyValidationMixin = __dependency4__["default"] || __dependency4__;
+
+ /*
+ Form Group
+
+ Wraps labels, controls and help message for optimum spacing and validation styles.
+ A wrapper for a single input with its assistances views such as label, help message.
+
+ A form group can yield the control's view after or within a label, this is dependent on the control
+ required layout and is defined byt he yieldInLabel property
+
+
+ Syntax:
+ {{em-form-group
+ //The state of the form group
+ status="none|error|warning|success"
+ //If true the control view is yieled within the label
+ yieldInLabel=true|false
+ //If true validation icons will be rendered, by default inherited from the form
+ v_icons: true
+ //Label of the form group, default is a human friendly form of the property name
+ label="Some label"
+ }}
+ */
+ var FormGroupComponent;
+
+ FormGroupComponent = Component.extend(InFormMixin, HasPropertyMixin, HasPropertyValidationMixin, {
+ tagName: 'div',
+ layoutName: 'components/form-group',
+ "class": 'form-group',
+ classNameBindings: ['class', 'hasSuccess', 'hasWarning', 'hasError', 'v_icons:has-feedback'],
+ attributeBindings: ['disabled'],
+ hasSuccess: (function() {
+ return this.get('validations') && this.get('status') === 'success' && this.get('canShowErrors');
+ }).property('status', 'canShowErrors'),
+ hasWarning: (function() {
+ return this.get('validations') && this.get('status') === 'warning' && this.get('canShowErrors');
+ }).property('status', 'canShowErrors'),
+ hasError: (function() {
+ return this.get('validations') && this.get('status') === 'error' && this.get('canShowErrors');
+ }).property('status', 'canShowErrors'),
+ v_icons: Em.computed.alias('form.v_icons'),
+ v_success_icon: 'fa fa-check',
+ v_warn_icon: 'fa fa-exclamation-triangle',
+ v_error_icon: 'fa fa-times',
+ validations: true,
+ yieldInLabel: false,
+ v_icon: (function() {
+ if (!this.get('canShowErrors')) {
+ return;
+ }
+ switch (this.get('status')) {
+ case 'success':
+ return this.get('v_success_icon');
+ case 'warning':
+ case 'warn':
+ return this.get('v_warn_icon');
+ case 'error':
+ return this.get('v_error_icon');
+ default:
+ return null;
+ }
+ }).property('status', 'canShowErrors'),
+ init: function() {
+ return this._super();
+ },
+
+ /*
+ Observes the helpHasErrors of the help control and modify the 'status' property accordingly.
+ */
+
+ /*
+ Listen to the focus out of the form group and display the errors
+ */
+ focusOut: function() {
+ return this.set('canShowErrors', true);
+ }
+ });
+
+ Em.Handlebars.helper('em-form-group', FormGroupComponent);
+
+ __exports__["default"] = FormGroupComponent;
+ });

dist/amd/form/input.js

@@ -0,0 +1,46 @@
+define(
+ ["./group","../mixins/control","exports"],
+ function(__dependency1__, __dependency2__, __exports__) {
+ "use strict";
+ var FormGroupComponent = __dependency1__["default"] || __dependency1__;
+ var ControlMixin = __dependency2__["default"] || __dependency2__;
+
+ /*
+ Form Input
+
+ Syntax:
+ {{em-input property="property name"}}
+ */
+ var FormInputComponent;
+
+ FormInputComponent = FormGroupComponent.extend({
+ controlView: Em.TextField.extend(ControlMixin, {
+ attributeBindings: ['placeholder', 'required', 'autofocus', 'disabled'],
+ placeholder: Em.computed.alias('parentView.placeholder'),
+ required: Em.computed.alias('parentView.required'),
+ autofocus: Em.computed.alias('parentView.autofocus'),
+ disabled: Em.computed.alias('parentView.disabled'),
+ type: Em.computed.alias('parentView.type'),
+ model: Em.computed.alias('parentView.model'),
+ propertyName: Em.computed.alias('parentView.propertyName')
+ }),
+ property: void 0,
+ label: void 0,
+ placeholder: void 0,
+ required: void 0,
+ autofocus: void 0,
+ disabled: void 0,
+ controlWrapper: (function() {
+ if (this.get('form.form_layout') === 'horizontal') {
+ return 'col-sm-10';
+ }
+ return null;
+ }).property('form.form_layout')
+ });
+
+ Ember.Handlebars.helper('em-input', function(options) {
+ return Ember.Handlebars.helpers.view.call(this, FormInputComponent, options);
+ });
+
+ __exports__["default"] = FormGroupComponent;
+ });

dist/amd/form/label.js

@@ -0,0 +1,50 @@
+define(
+ ["ember","../mixins/in_form","exports"],
+ function(__dependency1__, __dependency2__, __exports__) {
+ "use strict";
+ var Component = __dependency1__.Component;
+ var InFormMixin = __dependency2__["default"] || __dependency2__;
+
+ /*
+ Form Label
+
+ When styled with bootstrap, when form is rendered horizontally, the label require the 'extraClass' property to
+ be set to a value such 'col-sm-2' to be aligned properly.
+
+ Syntax:
+ {{em-form-label
+ text="Some label"
+ extraClass="col-sm-2"
+ }}
+
+ Or can serve as a block helper for elements that needs to be wrapped within label element.
+ {{#em-form-label text="Active?"}}
+ {{em-checkbox}}
+ {{/em-form-label}}
+ */
+ var FormLabelComponent;
+
+ FormLabelComponent = Ember.Component.extend(InFormMixin, {
+ tagName: 'label',
+ layoutName: 'components/form-label',
+ classNames: ['control-label'],
+ classNameBindings: ['extraClass', 'inlineClassCalc', 'horiClassCalc'],
+ attributeBindings: ['for'],
+ horiClass: 'col-sm-2',
+ horiClassCalc: (function() {
+ if (this.get('form.isHorizontal') && this.get('horiClass')) {
+ return this.get('horiClass');
+ }
+ }).property('form.isHorizontal'),
+ inlineClass: 'sr-only',
+ inlineClassCalc: (function() {
+ if (this.get('form.isInline') && this.get('inlineClass')) {
+ return this.get('inlineClass');
+ }
+ }).property('form.form_layout')
+ });
+
+ Ember.Handlebars.helper('em-form-label', FormLabelComponent);
+
+ __exports__["default"] = FormLabelComponent;
+ });