ember-headless-form 1.0.0-beta.2 → 1.0.0

package/dist/components/headless-form.js

@@ -5,7 +5,7 @@ import '@babel/runtime/helpers/esm/initializerWarningHelper';
 import { setComponentTemplate } from '@ember/component';
 import { precompileTemplate } from '@ember/template-compilation';
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
+import { tracked, cached } from '@glimmer/tracking';
 import { assert, warn } from '@ember/debug';
 import { hash } from '@ember/helper';
 import { on } from '@ember/modifier';
@@ -22,14 +22,16 @@ var _class, _descriptor, _class3, _descriptor2, _descriptor3, _descriptor4;
  */
 let FieldData = (_class = class FieldData {
   constructor(fieldRegistration) {
+    /**
+     * tracked state that enabled a dynamic validation of a field *before* the whole form is submitted, e.g. by `@validateOn="blur" and the blur event being triggered for that particular field.
+     */
     _initializerDefineProperty(this, "validationEnabled", _descriptor, this);
+    /**
+     * The *field* level validation callback passed to the field as in `<form.field @name="foo" @validate={{this.validateCallback}}>`
+     */
     _defineProperty(this, "validate", void 0);
     this.validate = fieldRegistration.validate;
   }
-
-  /**
-   * tracked state that enabled a dynamic validation of a field *before* the whole form is submitted, e.g. by `@validateOn="blur" and the blur event being triggered for that particular field.
-   */
 }, (_descriptor = _applyDecoratedDescriptor(_class.prototype, "validationEnabled", [tracked], {
   configurable: true,
   enumerable: true,
@@ -74,22 +76,18 @@ let HeadlessFormComponent = setComponentTemplate(precompileTemplate(`
       ...attributes
       {{this.registerForm}}
       {{on "submit" this.onSubmit}}
-      {{(if
-        this.fieldValidationEvent
-        (modifier this.on this.fieldValidationEvent this.handleFieldValidation)
-      )}}
-      {{(if
+      {{on "reset" this.onReset}}
+      {{this.onValidation this.fieldValidationEvent this.handleFieldValidation}}
+      {{this.onValidation
         this.fieldRevalidationEvent
-        (modifier
-          this.on this.fieldRevalidationEvent this.handleFieldRevalidation
-        )
-      )}}
+        this.handleFieldRevalidation
+      }}
     >
       {{yield
         (hash
           Field=(component
             this.FieldComponent
-            data=this.internalData
+            data=this.effectiveData
             set=this.set
             errors=this.visibleErrors
             registerField=this.registerField
@@ -102,6 +100,8 @@ let HeadlessFormComponent = setComponentTemplate(precompileTemplate(`
           submissionState=this.submissionState
           isInvalid=this.hasValidationErrors
           rawErrors=this.visibleErrors
+          submit=this.onSubmit
+          reset=this.onReset
         )
       }}
     </form>
@@ -115,16 +115,61 @@ let HeadlessFormComponent = setComponentTemplate(precompileTemplate(`
   constructor(...args) {
     super(...args);
     _defineProperty(this, "FieldComponent", HeadlessFormFieldComponent);
-    _defineProperty(this, "on", on);
     _defineProperty(this, "formElement", void 0);
     _defineProperty(this, "registerForm", modifier((el, _p) => {
       this.formElement = el;
     }));
-    _defineProperty(this, "internalData", this.args.dataMode == 'mutable' && this.args.data ? this.args.data : new TrackedObject(this.args.data ?? {}));
+    /**
+     * A copy of the passed `@data` stored internally, which is only passed back to the component consumer after a (successful) form submission.
+     */
+    _defineProperty(this, "internalData", new TrackedObject({}));
     _defineProperty(this, "fields", new Map());
     _initializerDefineProperty(this, "validationState", _descriptor2, this);
     _initializerDefineProperty(this, "submissionState", _descriptor3, this);
+    /**
+     * When this is set to true by submitting the form, eventual validation errors are show for *all* field, regardless of their individual dynamic validation status in `FieldData#validationEnabled`
+     */
     _initializerDefineProperty(this, "showAllValidations", _descriptor4, this);
+    _defineProperty(this, "onValidation", modifier((el, [eventName, handler]) => {
+      if (eventName) {
+        el.addEventListener(eventName, handler);
+        return () => el.removeEventListener(eventName, handler);
+      }
+    }));
+  }
+  get effectiveData() {
+    const obj = this.args.data ?? {};
+    if (this.args.dataMode === 'mutable') {
+      return obj;
+    }
+    const {
+      internalData
+    } = this;
+    return new Proxy(obj, {
+      get(target, prop) {
+        return prop in internalData ? internalData[prop] : Reflect.get(target, prop);
+      },
+      set(target, property, value) {
+        return Reflect.set(internalData, property, value);
+      },
+      has(target, prop) {
+        return prop in internalData ? true : Reflect.has(target, prop);
+      },
+      getOwnPropertyDescriptor(target, prop) {
+        return Reflect.getOwnPropertyDescriptor(prop in internalData ? internalData : target, prop);
+      },
+      ownKeys(target) {
+        return [...Reflect.ownKeys(target), ...Reflect.ownKeys(internalData)]
+        // return only unique values
+        .filter((value, index, array) => array.indexOf(value) === index);
+      },
+      deleteProperty(target, prop) {
+        if (prop in internalData) {
+          delete internalData[prop];
+        }
+        return true;
+      }
+    });
   }
   get validateOn() {
     return this.args.validateOn ?? 'submit';
@@ -177,10 +222,10 @@ let HeadlessFormComponent = setComponentTemplate(precompileTemplate(`
    */
   async validate() {
     const nativeValidation = this.args.ignoreNativeValidation !== true ? this.validateNative() : {};
-    const customFormValidation = await this.args.validate?.(this.internalData, Array.from(this.fields.keys()));
+    const customFormValidation = await this.args.validate?.(this.effectiveData, Array.from(this.fields.keys()));
     const customFieldValidations = [];
     for (const [name, field] of this.fields) {
-      const fieldValidationResult = await field.validate?.(this.internalData[name], name, this.internalData);
+      const fieldValidationResult = await field.validate?.(this.effectiveData[name], name, this.effectiveData);
       if (fieldValidationResult) {
         customFieldValidations.push({
           [name]: fieldValidationResult
@@ -191,7 +236,7 @@ let HeadlessFormComponent = setComponentTemplate(precompileTemplate(`
   }
   async _validate() {
     const promise = this.validate();
-    this.validationState = new TrackedAsyncData(promise, this);
+    this.validationState = new TrackedAsyncData(promise);
     return promise;
   }
   validateNative() {
@@ -211,7 +256,7 @@ let HeadlessFormComponent = setComponentTemplate(precompileTemplate(`
       if (this.fields.has(name)) {
         errors[name] = [{
           type: 'native',
-          value: this.internalData[name],
+          value: this.effectiveData[name],
           message: el.validationMessage
         }];
       } else {
@@ -248,17 +293,25 @@ let HeadlessFormComponent = setComponentTemplate(precompileTemplate(`
     return this.showAllValidations || (this.fields.get(field)?.validationEnabled ?? false);
   }
   async onSubmit(e) {
-    e.preventDefault();
+    e?.preventDefault();
     await this._validate();
     this.showAllValidations = true;
     if (!this.hasValidationErrors) {
       if (this.args.onSubmit) {
-        this.submissionState = new TrackedAsyncData(this.args.onSubmit(this.internalData), this);
+        this.submissionState = new TrackedAsyncData(this.args.onSubmit(this.effectiveData));
       }
     } else {
       assert('Validation errors expected to be present. If you see this, please report it as a bug to ember-headless-form!', this.validationState?.isResolved);
-      this.args.onInvalid?.(this.internalData, this.validationState.value);
+      this.args.onInvalid?.(this.effectiveData, this.validationState.value);
+    }
+  }
+  async onReset(e) {
+    e?.preventDefault();
+    for (const key of Object.keys(this.internalData)) {
+      delete this.internalData[key];
     }
+    this.validationState = undefined;
+    this.submissionState = undefined;
   }
   registerField(name, field) {
     assert(`You passed @name="${String(name)}" to the form field, but this is already in use. Names of form fields must be unique!`, !this.fields.has(name));
@@ -268,8 +321,8 @@ let HeadlessFormComponent = setComponentTemplate(precompileTemplate(`
     this.fields.delete(name);
   }
   set(key, value) {
-    // when @mutableData is set, our internalData is something we don't control, i.e. might require old-school set() to be on the safe side
-    set(this.internalData, key, value);
+    // when @mutableData is set, our effectiveData is something we don't control, i.e. might require old-school set() to be on the safe side
+    set(this.effectiveData, key, value);
   }
 
   /**
@@ -324,7 +377,7 @@ let HeadlessFormComponent = setComponentTemplate(precompileTemplate(`
       });
     }
   }
-}, (_descriptor2 = _applyDecoratedDescriptor(_class3.prototype, "validationState", [tracked], {
+}, (_applyDecoratedDescriptor(_class3.prototype, "effectiveData", [cached], Object.getOwnPropertyDescriptor(_class3.prototype, "effectiveData"), _class3.prototype), _descriptor2 = _applyDecoratedDescriptor(_class3.prototype, "validationState", [tracked], {
   configurable: true,
   enumerable: true,
   writable: true,
@@ -341,8 +394,7 @@ let HeadlessFormComponent = setComponentTemplate(precompileTemplate(`
   initializer: function () {
     return false;
   }
-}), _applyDecoratedDescriptor(_class3.prototype, "onSubmit", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "onSubmit"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "registerField", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "registerField"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "unregisterField", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "unregisterField"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "set", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "set"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "handleFieldValidation", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "handleFieldValidation"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "handleFieldRevalidation", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "handleFieldRevalidation"), _class3.prototype)), _class3));
- // eslint-disable-next-line @typescript-eslint/no-unused-vars -- workaround for unknown modifier helper: https://github.com/typed-ember/glint/issues/410
+}), _applyDecoratedDescriptor(_class3.prototype, "onSubmit", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "onSubmit"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "onReset", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "onReset"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "registerField", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "registerField"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "unregisterField", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "unregisterField"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "set", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "set"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "handleFieldValidation", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "handleFieldValidation"), _class3.prototype), _applyDecoratedDescriptor(_class3.prototype, "handleFieldRevalidation", [action], Object.getOwnPropertyDescriptor(_class3.prototype, "handleFieldRevalidation"), _class3.prototype)), _class3));
 
 export { HeadlessFormComponent as default };
 //# sourceMappingURL=headless-form.js.map