feat(addon/components/paper-form): converts to a glimmer component.

addon/components/paper-button.js

@@ -3,7 +3,6 @@
  */
 import Focusable from './-focusable';
 import { action } from '@ember/object';
-import { assert } from '@ember/debug';
 
 /**
  * @class PaperButton
@@ -34,14 +33,12 @@ export default class PaperButton extends Focusable {
   constructor(owner, args) {
     super(owner, args);
 
-    this.shouldRegister = this.args.shouldRegister || false;
+    this.shouldRegister = this.args.shouldRegister ?? false;
     this.skipProxy = this.args.skipProxy || false;
-    if (this.shouldRegister) {
-      assert(
-        'A parent component should be supplied to <PaperButton> when shouldRegister=true',
-        this.args.parentComponent
-      );
-      this.parent = this.args.parentComponent;
+
+    let parentComponent = this.args.parentComponent;
+    if (parentComponent && this.shouldRegister) {
+      this.parent = parentComponent;
     }
   }
 
@@ -53,8 +50,9 @@ export default class PaperButton extends Focusable {
     this.element = element;
     this.registerListeners(element);
 
-    if (this.shouldRegister) {
-      this.parent.registerChild(this);
+    let parent = this.parent;
+    if (parent && this.shouldRegister) {
+      parent.registerChild(this);
     }
   }
 
@@ -76,8 +74,9 @@ export default class PaperButton extends Focusable {
   willDestroy() {
     super.willDestroy(...arguments);
 
-    if (this.shouldRegister) {
-      this.parent.unregisterChild(this);
+    let parent = this.parent;
+    if (parent && this.shouldRegister) {
+      parent.unregisterChild(this);
     }
   }
 

addon/components/paper-checkbox.js

@@ -51,15 +51,12 @@ export default class PaperCheckbox extends Focusable {
     super(owner, args);
 
     this.labelId = `${guidFor(args)}-label`;
-    this.shouldRegister = this.args.shouldRegister || false;
+    this.shouldRegister = this.args.shouldRegister ?? false;
     this.skipProxy = this.args.skipProxy || false;
 
-    if (this.shouldRegister) {
-      assert(
-        'A parent component should be supplied to <PaperCheckbox> when shouldRegister=true',
-        this.args.parentComponent
-      );
-      this.parent = this.args.parentComponent;
+    let parentComponent = this.args.parentComponent;
+    if (parentComponent && this.shouldRegister) {
+      this.parent = parentComponent;
     }
 
     assert(
@@ -76,8 +73,9 @@ export default class PaperCheckbox extends Focusable {
     this.element = element;
     this.registerListeners(element);
 
-    if (this.shouldRegister) {
-      this.parent.registerChild(this);
+    let parent = this.parent;
+    if (parent && this.shouldRegister) {
+      parent.registerChild(this);
     }
   }
 
@@ -96,8 +94,9 @@ export default class PaperCheckbox extends Focusable {
   willDestroy() {
     super.willDestroy(...arguments);
 
-    if (this.shouldRegister) {
-      this.parent.unregisterChild(this);
+    let parent = this.parent;
+    if (parent && this.shouldRegister) {
+      parent.unregisterChild(this);
     }
   }
 

addon/components/paper-form.hbs

@@ -1,23 +1,30 @@
-{{! template-lint-disable no-action }}
-{{yield (hash
-  isValid=this.isValid
-  isInvalid=this.isInvalid
-  isTouched=this.isTouched
-  isInvalidAndTouched=this.isInvalidAndTouched
-  input=(component this.inputComponent
-    parentComponent=this
-    onValidityChange=(action "localOnValidityChange")
-  )
-  submit-button=(component this.submitButtonComponent
-    type="submit"
-  )
-  select=(component this.selectComponent
-  	parentComponent=this
-  	onValidityChange=(action "localOnValidityChange")
-  )
-  autocomplete=(component this.autocompleteComponent
-  	parentComponent=this
-  	onValidityChange=(action "localOnValidityChange")
-  )
-  onSubmit=(action "localOnSubmit")
-)}}
+<form class={{@class}} {{on 'submit' this.submit}} ...attributes>
+  {{yield
+    (hash
+      isValid=this.isValid
+      isInvalid=this.isInvalid
+      isTouched=this.isTouched
+      isInvalidAndTouched=this.isInvalidAndTouched
+      input=(component
+        this.inputComponent
+        parentComponent=this
+        onValidityChange=this.localOnValidityChange
+        shouldRegister=true
+      )
+      submit-button=(component this.submitButtonComponent type='submit')
+      select=(component
+        this.selectComponent
+        parentComponent=this
+        onValidityChange=this.localOnValidityChange
+        shouldRegister=true
+      )
+      autocomplete=(component
+        this.autocompleteComponent
+        parentComponent=this
+        onValidityChange=this.localOnValidityChange
+      )
+      onSubmit=this.localOnSubmit
+      parent=this
+    )
+  }}
+</form>

addon/components/paper-form.js

@@ -1,71 +1,126 @@
-/* eslint-disable ember/classic-decorator-no-classic-methods, ember/no-classic-components, ember/no-computed-properties-in-native-classes, ember/no-mixins */
-import { tagName } from '@ember-decorators/component';
-import { action, computed } from '@ember/object';
-import { and, not } from '@ember/object/computed';
-
-import Component from '@ember/component';
-import ParentMixin from 'ember-paper/mixins/parent-mixin';
-import { invokeAction } from 'ember-paper/utils/invoke-action';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { A } from '@ember/array';
 
 /**
  * @class PaperForm
- * @extends Ember.Component
- * @uses ParentMixin
+ * @extends Component
  */
-@tagName('form')
-export default class PaperForm extends Component.extend(ParentMixin) {
-  inputComponent = 'paper-input';
-  submitButtonComponent = 'paper-button';
-  selectComponent = 'paper-select';
-  autocompleteComponent = 'paper-autocomplete';
+export default class PaperForm extends Component {
+  /**
+   * inputComponent specifies the component to be yielded as an input field.
+   * @type {string}
+   */
+  inputComponent;
+  /**
+   * submitButtonComponent specifies the component to be yielded as a submit button.
+   * @type {string}
+   */
+  submitButtonComponent;
+  /**
+   * selectComponent specifies the component to be yielded as a select field.
+   * @type {string}
+   */
+  selectComponent;
+  /**
+   * autocompleteComponent specifies the component to be yielded as an autocomplete field.
+   * @type {string}
+   */
+  autocompleteComponent;
+
+  /**
+   * Array of form components
+   * @type {A}
+   */
+  @tracked children = A([]);
+  /**
+   * Used to track whether the forms validity has changed from the last check in.
+   * @type {boolean}
+   */
+  @tracked lastIsTouched = false;
+  /**
+   * Used to track whether the forms validity has changed from the last check in.
+   * @type {boolean}
+   */
+  @tracked lastIsValid = false;
+
+  constructor() {
+    super(...arguments);
 
-  @not('isInvalid')
-  isValid;
+    this.inputComponent = this.args.inputComponent || 'paper-input';
+    this.submitButtonComponent =
+      this.args.submitButtonComponent || 'paper-button';
+    this.selectComponent = this.args.selectComponent || 'paper-select';
+    this.autocompleteComponent =
+      this.args.autocompleteComponent || 'paper-autocomplete';
+  }
+
+  /**
+   * Registers a child form component
+   * @param {Component} child - The form component to register
+   */
+  @action registerChild(child) {
+    this.children.pushObject(child);
+  }
+  /**
+   * Removes a registered child form component
+   * @param {Component} child - The form component to unregister
+   */
+  @action unregisterChild(child) {
+    this.children.removeObject(child);
+  }
+
+  get isValid() {
+    return !this.isInvalid;
+  }
 
-  @computed('childComponents.@each.isInvalid')
   get isInvalid() {
-    return this.childComponents.isAny('isInvalid');
+    return this.children.isAny('validation.isInvalid');
   }
 
-  @computed('childComponents.@each.isTouched')
   get isTouched() {
-    return this.childComponents.isAny('isTouched');
+    return this.children.isAny('validation.isTouched');
   }
 
-  @and('isInvalid', 'isTouched')
-  isInvalidAndTouched;
+  get isInvalidAndTouched() {
+    return this.isInvalid && this.isTouched;
+  }
 
-  submit() {
-    this.send('localOnSubmit');
-    return false;
+  @action submit(event) {
+    this.localOnSubmit();
+    event.preventDefault();
   }
 
-  @action
-  localOnValidityChange() {
+  @action localOnValidityChange() {
     if (
       this.lastIsValid !== this.isValid ||
       this.lastIsTouched !== this.isTouched
     ) {
-      invokeAction(
-        this,
-        'onValidityChange',
-        this.isValid,
-        this.isTouched,
-        this.isInvalidAndTouched
-      );
-      this.set('lastIsValid', this.isValid);
-      this.set('lastIsTouched', this.isTouched);
+      if (this.args.onValidityChange) {
+        this.args.onValidityChange(
+          this.isValid,
+          this.isTouched,
+          this.isInvalidAndTouched
+        );
+      }
+
+      this.lastIsValid = this.isValid;
+      this.lastIsTouched = this.isTouched;
     }
   }
 
-  @action
-  localOnSubmit() {
+  @action localOnSubmit() {
     if (this.isInvalid) {
-      this.childComponents.setEach('isTouched', true);
-      invokeAction(this, 'onInvalid');
+      this.children.setEach('validation.isTouched', true);
+      if (this.args.onInvalid) {
+        this.args.onInvalid();
+      }
     } else {
-      invokeAction(this, 'onSubmit');
-      this.childComponents.setEach('isTouched', false);
+      if (this.args.onSubmit) {
+        this.args.onSubmit();
+      }
+      this.children.setEach('validation.isTouched', false);
     }
   }
 }