ember-headless-form 1.0.0-beta.1 → 1.0.0-beta.3

package/dist/components/headless-form.js

@@ -5,8 +5,9 @@ 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';
 import { action, set } from '@ember/object';
 import { TrackedAsyncData } from 'ember-async-data';
@@ -15,8 +16,6 @@ import { TrackedObject } from 'tracked-built-ins';
 import HeadlessFormFieldComponent from '../-private/components/field.js';
 import { mergeErrorRecord } from '../-private/utils.js';
 
-var TEMPLATE = precompileTemplate("<form\n  novalidate\n  ...attributes\n  {{this.registerForm}}\n  {{on \'submit\' this.onSubmit}}\n  {{(if\n    this.fieldValidationEvent\n    (modifier this.on this.fieldValidationEvent this.handleFieldValidation)\n  )}}\n  {{(if\n    this.fieldRevalidationEvent\n    (modifier this.on this.fieldRevalidationEvent this.handleFieldRevalidation)\n  )}}\n>\n  {{yield\n    (hash\n      Field=(component\n        (ensure-safe-component this.FieldComponent)\n        data=this.internalData\n        set=this.set\n        errors=this.visibleErrors\n        registerField=this.registerField\n        unregisterField=this.unregisterField\n        triggerValidationFor=this.handleFieldValidation\n        fieldValidationEvent=this.fieldValidationEvent\n        fieldRevalidationEvent=this.fieldRevalidationEvent\n      )\n      validationState=this.validationState\n      submissionState=this.submissionState\n      isInvalid=this.hasValidationErrors\n      rawErrors=this.visibleErrors\n    )\n  }}\n</form>");
-
 var _class, _descriptor, _class3, _descriptor2, _descriptor3, _descriptor4;
 /**
  * This internal data structure maintains information about each field that is registered to the form by `registerField`.
@@ -69,20 +68,100 @@ let FieldData = (_class = class FieldData {
  * </HeadlessForm>
  * ```
  */
-let HeadlessFormComponent = (_class3 = class HeadlessFormComponent extends Component {
+let HeadlessFormComponent = setComponentTemplate(precompileTemplate(`
+    <form
+      novalidate
+      ...attributes
+      {{this.registerForm}}
+      {{on "submit" this.onSubmit}}
+      {{on "reset" this.onReset}}
+      {{this.onValidation this.fieldValidationEvent this.handleFieldValidation}}
+      {{this.onValidation
+        this.fieldRevalidationEvent
+        this.handleFieldRevalidation
+      }}
+    >
+      {{yield
+        (hash
+          Field=(component
+            this.FieldComponent
+            data=this.effectiveData
+            set=this.set
+            errors=this.visibleErrors
+            registerField=this.registerField
+            unregisterField=this.unregisterField
+            triggerValidationFor=this.handleFieldValidation
+            fieldValidationEvent=this.fieldValidationEvent
+            fieldRevalidationEvent=this.fieldRevalidationEvent
+          )
+          validationState=this.validationState
+          submissionState=this.submissionState
+          isInvalid=this.hasValidationErrors
+          rawErrors=this.visibleErrors
+          submit=this.onSubmit
+          reset=this.onReset
+        )
+      }}
+    </form>
+  `, {
+  strictMode: true,
+  scope: () => ({
+    on,
+    hash
+  })
+}), (_class3 = class HeadlessFormComponent extends Component {
   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 ?? {}));
+    _defineProperty(this, "internalData", new TrackedObject({}));
     _defineProperty(this, "fields", new Map());
     _initializerDefineProperty(this, "validationState", _descriptor2, this);
     _initializerDefineProperty(this, "submissionState", _descriptor3, this);
     _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';
@@ -134,11 +213,11 @@ let HeadlessFormComponent = (_class3 = class HeadlessFormComponent extends Compo
    * Call the passed validation callbacks, defined both on the whole form as well as on field level, and return the merged result for all fields.
    */
   async validate() {
-    const nativeValidation = this.validateNative();
-    const customFormValidation = await this.args.validate?.(this.internalData, Array.from(this.fields.keys()));
+    const nativeValidation = this.args.ignoreNativeValidation !== true ? this.validateNative() : {};
+    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
@@ -169,7 +248,7 @@ let HeadlessFormComponent = (_class3 = class HeadlessFormComponent extends Compo
       if (this.fields.has(name)) {
         errors[name] = [{
           type: 'native',
-          value: this.internalData[name],
+          value: this.effectiveData[name],
           message: el.validationMessage
         }];
       } else {
@@ -206,17 +285,25 @@ let HeadlessFormComponent = (_class3 = class HeadlessFormComponent extends Compo
     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), this);
       }
     } 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));
@@ -226,8 +313,8 @@ let HeadlessFormComponent = (_class3 = class HeadlessFormComponent extends Compo
     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);
   }
 
   /**
@@ -282,7 +369,7 @@ let HeadlessFormComponent = (_class3 = class HeadlessFormComponent extends Compo
       });
     }
   }
-}, (_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,
@@ -299,8 +386,7 @@ let HeadlessFormComponent = (_class3 = class HeadlessFormComponent extends Compo
   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);
-setComponentTemplate(TEMPLATE, HeadlessFormComponent);
+}), _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