Finished Paper Form Component

addon/components/paper-form-container.js

@@ -0,0 +1,24 @@
+import Ember from 'ember';
+const { Component } = Ember;
+
+export default Component.extend({
+  tagName: '',
+  attributeBindings: ['style'],
+  style: 'width:100%',
+  onChange: null,
+  customValidations: [],
+  hasValidation: Ember.computed('min', 'max', 'errorMessages', 'maxlength', 'required', 'customValidations', function() {
+    return this.get('min') || this.get('max') || this.get('errorMessages') || this.get('maxlength') || this.get('required') || this.get('customValidations');
+  }),
+  didUpdateAttrs(params) {
+    if (params.oldAttrs.isTouched === params.newAttrs.isTouched) {
+      return;
+    }
+    this.set('touched', this.get('isTouched'));
+  },
+  actions: {
+    callOnInvalid(status) {
+      this.get('onInvalid')(status);
+    }
+  }
+});

addon/components/paper-form.js

@@ -0,0 +1,46 @@
+import Ember from 'ember';
+const { Component } = Ember;
+
+export default Component.extend({
+  tagName: '',
+  classNames: [],
+  attributeBindings: ['style'],
+  style: 'width:100%',
+  numberOfInvalids: 0,
+  isValid: Ember.computed('numberOfInvalids', function() {
+    return this.get('numberOfInvalids') === 0;
+  }),
+  isInvalid: Ember.computed('isValid', function() {
+    return !this.get('isValid');
+  }),
+  sendToParent: Ember.on('init', Ember.observer('isValid', function() {
+    if (!this.get('parentAction')) {
+      return;
+    }
+    this.get('parentAction')(this.get('isValid'));
+  })),
+  actions: {
+    onInvalid(status) {
+      if (status || status === null) {
+        this.set('numberOfInvalids', this.get('numberOfInvalids') + 1);
+      } else {
+        if (this.get('numberOfInvalids') === 0) {
+          return;
+        }
+        this.set('numberOfInvalids', this.get('numberOfInvalids') - 1);
+      }
+    },
+    submit() {
+      if (this.get('isInvalid')) {
+        this.set('isTouched', false);
+        this.set('isTouched', true);
+        return;
+      }
+      if (this.get('parentSubmit')) {
+        this.get('parentSubmit')();
+      }
+      this.set('isTouched', true);
+      this.set('isTouched', false);
+    }
+  }
+});

app/components/paper-form-container.js

@@ -0,0 +1,3 @@
+import PaperForm from 'ember-paper/components/paper-form-container';
+
+export default PaperForm;

app/components/paper-form.js

@@ -0,0 +1,3 @@
+import PaperForm from 'ember-paper/components/paper-form';
+
+export default PaperForm;

app/templates/components/paper-form-container.hbs

@@ -0,0 +1 @@
+{{paper-input type=type flex=flex label=label value=value onChange=onChange disabled=disabled min=min max=max errorMessages=errorMessages maxlength=maxlength required=required icon=icon hideAllMessages=hideAllMessages passThru=passThru onBlur=onBlur onFocus=onFocus onKeyDown=onKeyDown customValidations=customValidations class=class errors=errors isTouched=touched onInvalid=(if hasValidation (action 'callOnInvalid') null)}}

app/templates/components/paper-form.hbs

@@ -0,0 +1 @@
+{{yield (hash validStatus=isValid isInvalid=isInvalid input=(component "paper-form-container" isTouched=isTouched onInvalid=(action 'onInvalid')) submit=(action 'submit'))}}

tests/integration/components/paper-form-container-test.js

@@ -0,0 +1,24 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('paper-form-container', 'Integration | Component | paper form container', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{paper-form-container}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  // this.render(hbs`
+  //   {{#paper-form-container}}
+  //     template block text
+  //   {{/paper-form-container}}
+  // `);
+
+  // assert.equal(this.$().text().trim(), 'template block text');
+});

tests/integration/components/paper-form-test.js

@@ -0,0 +1,24 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('paper-form', 'Integration | Component | paper form', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{paper-form}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#paper-form}}
+      template block text
+    {{/paper-form}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});