spike

components.form-for.js

import Ember from 'ember';

const PRIMITIVE_INPUTS = {
  input: 'input-field',
  select: 'select-field',
}

const FormFor = Ember.Component.extend({
  init() {
    this._super(...arguments);
    this.publicAPI = {};
    this.fieldComponents = [
      {
        as: 'input',
        component: 'input-field'
      },
    ];
  }
});

FormFor.reopenClass({
  positionalParams: ['model']
})

export default FormFor;

components.gecko-field.js

import Ember from 'ember';

const WrapperInput = Ember.Component.extend({
  init() {
    this._super(...arguments)
    this.test = {
      foo: 'foo'
    }
  },
   
  nearestParentWithModel: Ember.computed({
    get() {
	    return this.nearestWithProperty('model');
    }
  }),
  
  value: Ember.computed('nearestParentWithModel.model', {
    get() {
      return this.get('nearestParentWithModel').get(`model.${this.get('property')}`)
    },
    set(k, v) {
      this.set(`nearestParentWithModel.model.${this.get('property')}`, v);      
      return v
    }
  })
});

WrapperInput.reopenClass({
  positionalParams: ['property']
});

export default WrapperInput;

components.horizontal-controls.js

import Ember from 'ember';

export default Ember.Component.extend({
  mouseEnter() {
  },
  
  mouseLeave() {
    
  }
});

components.input-field.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: '',
  init() {
    this._super(...arguments)
    debugger;
  }
});

components.vertical-controls.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  foo: {
    name: 'Emberjs'
  }
});

helpers.assign-extra.js

import Ember from 'ember';

export function assignExtra(params/*, hash*/) {
	Object.assign(params[0], params[1]);
}

export default Ember.Helper.helper(assignExtra);

helpers.dynamic-hash.js

import Ember from 'ember';

export function dynamicHash(params/*, hash*/) {
  return { [params[0]]: params[1]};
}

export default Ember.Helper.helper(dynamicHash);

helpers.foo-bar.js

import Ember from 'ember';

export function fooBar(params/*, hash*/) {
  Object.assign(params[0].args.named, params[1])
  return params[0]
}


export default Ember.Helper.helper(fooBar);

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.input-field input {
  border-color: red;
}

templates.application.hbs

<h1>Welcome to {{foo.name}}</h1>

{{#form-for foo class="foo" layout="horizontal-controls" as |f|}}
  {{f.input "name"
    class="input-field"
    id="input-field"
    label="Name"
    hint="y"
  }}
{{/form-for}}

templates.components.form-for.hbs

{{#each fieldComponents as |fieldComponent|}}
	{{assign-extra publicAPI (
  	dynamic-hash fieldComponent.as (component "gecko-field" as=fieldComponent.component layout=layout)
  )}}
{{/each}}

{{yield publicAPI}}

templates.components.gecko-field.hbs

{{#component layout label=label hint=hint errors=erros}}
	{{component (foo-bar (component as) test)}}
{{/component}}

templates.components.horizontal-controls.hbs

<label>{{label}}</label>
{{yield}}

templates.components.input-field.hbs

{{input
  value=value
  type=type
  class=class
  required=required 
}}

templates.components.vertical-controls.hbs

<div><label>{{label}}</label></div>
{{yield}}

twiddle.json

{
  "version": "0.13.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}