From 35eea3a9af1677e31abb4b6dd0381aba0571d751 Mon Sep 17 00:00:00 2001 From: jelhan Date: Fri, 20 Nov 2015 19:40:52 +0100 Subject: [PATCH] Introduces inputWrapperClass, an element which wraps input fields, errors and help texts. This is needed for columns in bootstrap horizontal from. Example usage: ``` // routes/application.js import Ember from 'ember'; export default Ember.Route.extend({ beforeModel() { this.set('inputWrapperClass', 'col-sm-10'); this.set('labelClass', 'col-sm-2'); this.set('formClass', 'form-horizontal'); }, fmConfig: Ember.inject.service('fm-config') }); ``` You will have a bootstrap horizontal form. Column offset are not handeled automatically for fields without a label (fm-checkbox, fm-submit) or if label property is empty. As this seems to be to much bootstrap specific for this general form-builder libary. Together with #36 we could make a nice horizontal bootstrap form like this one: http://getbootstrap.com/css/#forms-horizontal ``` {{#fm-form}} {{fm-field label='Email'}} {{fm-field label='Password'}} {{fm-checkbox label='Remember me' inputWrapperClass='col-sm-10 col-sm-offset-2'}} {{#fm-submit inputWrapperClass='col-sm-10 col-sm-offset-2'}} Sign in {{/fm-submit}} {{/fm-form}} ``` Of course you should have service configuration set like above. --- addon/components/fm-checkbox.js | 4 +- addon/components/fm-field.js | 1 + addon/components/fm-radio-group.js | 4 +- addon/components/fm-submit.js | 1 + addon/services/fm-config.js | 1 + .../ember-form-master-2000/fm-checkbox.hbs | 30 +++---- .../ember-form-master-2000/fm-field.hbs | 82 ++++++++++--------- .../ember-form-master-2000/fm-radio-group.hbs | 14 ++-- .../ember-form-master-2000/fm-submit.hbs | 22 ++--- tests/dummy/app/routes/application.js | 3 +- 10 files changed, 88 insertions(+), 74 deletions(-) diff --git a/addon/components/fm-checkbox.js b/addon/components/fm-checkbox.js index ee7a75f..278a610 100644 --- a/addon/components/fm-checkbox.js +++ b/addon/components/fm-checkbox.js @@ -29,5 +29,7 @@ export default Ember.Component.extend({ userInteraction() { this.set('shouldShowErrors', true); } - } + }, + + inputWrapperClass: Ember.computed.reads('fmConfig.inputWrapperClass') }); diff --git a/addon/components/fm-field.js b/addon/components/fm-field.js index c75b28e..82b2de6 100644 --- a/addon/components/fm-field.js +++ b/addon/components/fm-field.js @@ -11,6 +11,7 @@ export default Ember.Component.extend({ labelClass: Ember.computed.reads('fmConfig.labelClass'), textareaClass: Ember.computed.reads('fmConfig.textareaClass'), wrapperClass: Ember.computed.reads('fmConfig.wrapperClass'), + inputWrapperClass: Ember.computed.reads('fmConfig.inputWrapperClass'), init: function() { if(!this.get('optionValuePath')) { diff --git a/addon/components/fm-radio-group.js b/addon/components/fm-radio-group.js index ab8bb4b..39b45aa 100644 --- a/addon/components/fm-radio-group.js +++ b/addon/components/fm-radio-group.js @@ -22,5 +22,7 @@ export default Ember.Component.extend({ userInteraction() { this.set('shouldShowErrors', true); } - } + }, + + inputWrapperClass: Ember.computed.reads('fmConfig.inputWrapperClass') }); diff --git a/addon/components/fm-submit.js b/addon/components/fm-submit.js index 04aa347..77f5dce 100644 --- a/addon/components/fm-submit.js +++ b/addon/components/fm-submit.js @@ -8,6 +8,7 @@ export default Ember.Component.extend({ init: function() { this._super(this); }, + inputWrapperClass: Ember.computed.reads('fmConfig.inputWrapperClass'), submitButtonClass: Ember.computed.reads('fmConfig.submitButtonClass'), wrapperClass: Ember.computed.reads('fmConfig.wrapperClass'), tagName: 'div' diff --git a/addon/services/fm-config.js b/addon/services/fm-config.js index ff042e4..19a5240 100644 --- a/addon/services/fm-config.js +++ b/addon/services/fm-config.js @@ -6,6 +6,7 @@ export default Ember.Service.extend({ wrapperClass: 'form-group', labelClass: 'control-label', inputClass: 'form-control', + inputWrapperClass: '', textareaClass: 'form-control', selectClass: 'form-control', formClass: 'form-vertical', diff --git a/addon/templates/components/ember-form-master-2000/fm-checkbox.hbs b/addon/templates/components/ember-form-master-2000/fm-checkbox.hbs index 2e46159..2464748 100644 --- a/addon/templates/components/ember-form-master-2000/fm-checkbox.hbs +++ b/addon/templates/components/ember-form-master-2000/fm-checkbox.hbs @@ -1,17 +1,19 @@ -
+
+
- + - {{#if showErrors}} - {{fm-errortext errors=errors}} - {{/if}} + {{#if showErrors}} + {{fm-errortext errors=errors}} + {{/if}} -
+
+
\ No newline at end of file diff --git a/addon/templates/components/ember-form-master-2000/fm-field.hbs b/addon/templates/components/ember-form-master-2000/fm-field.hbs index 1cb989e..4466103 100644 --- a/addon/templates/components/ember-form-master-2000/fm-field.hbs +++ b/addon/templates/components/ember-form-master-2000/fm-field.hbs @@ -2,47 +2,49 @@ {{/if}} -{{#if isBasicInput}} - {{fm-input - type=type - value=value - classNameBindings='errorClass inputClass' - maxlength=maxlength - placeholder=placeholder - onUserInteraction='userInteraction' - }} -{{/if}} +
+ {{#if isBasicInput}} + {{fm-input + type=type + value=value + classNameBindings='errorClass inputClass' + maxlength=maxlength + placeholder=placeholder + onUserInteraction='userInteraction' + }} + {{/if}} -{{#if isSelect}} - {{fm-select - content=content - optionValuePath=optionValuePath - optionLabelPath=optionLabelPath - prompt=prompt - value=value - action=(action 'selectAction') - onUserInteraction='userInteraction' - }} -{{/if}} + {{#if isSelect}} + {{fm-select + content=content + optionValuePath=optionValuePath + optionLabelPath=optionLabelPath + prompt=prompt + value=value + action=(action 'selectAction') + onUserInteraction='userInteraction' + }} + {{/if}} -{{#if isTextarea}} - {{fm-textarea - value=value - classNameBindings='errorClass textareaClass' - placeholder=placeholder - rows=rows - cols=cols - maxlength=maxlength - spellcheck=spellcheck - disabled=disabled - onUserInteraction='userInteraction' - }} -{{/if}} + {{#if isTextarea}} + {{fm-textarea + value=value + classNameBindings='errorClass textareaClass' + placeholder=placeholder + rows=rows + cols=cols + maxlength=maxlength + spellcheck=spellcheck + disabled=disabled + onUserInteraction='userInteraction' + }} + {{/if}} -{{#if showErrors}} - {{fm-errortext errors=errors}} -{{/if}} + {{#if showErrors}} + {{fm-errortext errors=errors}} + {{/if}} -{{#if helptext}} - {{fm-helptext helptext=helptext}} -{{/if}} + {{#if helptext}} + {{fm-helptext helptext=helptext}} + {{/if}} +
\ No newline at end of file diff --git a/addon/templates/components/ember-form-master-2000/fm-radio-group.hbs b/addon/templates/components/ember-form-master-2000/fm-radio-group.hbs index 945972a..ed948b2 100644 --- a/addon/templates/components/ember-form-master-2000/fm-radio-group.hbs +++ b/addon/templates/components/ember-form-master-2000/fm-radio-group.hbs @@ -2,12 +2,14 @@ {{/if}} -{{#each content as |option|}} +
+ {{#each content as |option|}} - {{fm-radio content=option onUserInteraction='userInteraction' optionLabelPath=optionLabelPath optionValuePath=optionValuePath}} + {{fm-radio content=option onUserInteraction='userInteraction' optionLabelPath=optionLabelPath optionValuePath=optionValuePath}} -{{/each}} + {{/each}} -{{#if showErrors}} - {{fm-errortext errors=errors}} -{{/if}} + {{#if showErrors}} + {{fm-errortext errors=errors}} + {{/if}} +
diff --git a/addon/templates/components/ember-form-master-2000/fm-submit.hbs b/addon/templates/components/ember-form-master-2000/fm-submit.hbs index 61aef54..23b64c1 100644 --- a/addon/templates/components/ember-form-master-2000/fm-submit.hbs +++ b/addon/templates/components/ember-form-master-2000/fm-submit.hbs @@ -1,10 +1,12 @@ - +
+ +
diff --git a/tests/dummy/app/routes/application.js b/tests/dummy/app/routes/application.js index d1e1a24..d94f0a0 100644 --- a/tests/dummy/app/routes/application.js +++ b/tests/dummy/app/routes/application.js @@ -1,7 +1,6 @@ import Ember from 'ember'; export default Ember.Route.extend({ - model: function() { return Ember.RSVP.hash({ exampleModel: Ember.Object.create(), @@ -77,4 +76,4 @@ export default Ember.Route.extend({ } -}); \ No newline at end of file +});