ember-headless-form 0.0.0

package/dist/components/-private/types.d.ts

@@ -0,0 +1,48 @@
+/**
+ * What the user can pass as @data
+ */
+type UserData = object;
+/**
+ * The subset of properties of DATA, whose keys are strings (and not number or symbol)
+ * Only this data is useable in the form
+ */
+type FormData<DATA extends UserData = UserData> = OnlyStringKeys<DATA>;
+/**
+ * Returns the type of all keys of DATA, that are also strings. Only strings can be used as field @name
+ */
+type FormKey<DATA extends UserData> = keyof DATA & string;
+/**
+ * Generic interface for all validation errors
+ */
+interface ValidationError<T = unknown> {
+    type: string;
+    value: T;
+    message?: string;
+}
+type ErrorRecord<DATA extends FormData, KEY extends FormKey<DATA> = FormKey<DATA>> = Partial<Record<KEY, ValidationError<DATA[KEY]>[]>>;
+/**
+ * Callback used for form level validation
+ */
+type FormValidateCallback<DATA extends FormData> = (formData: DATA) => undefined | ErrorRecord<DATA> | Promise<undefined | ErrorRecord<DATA>>;
+/**
+ * Callback used for field level validation
+ */
+type FieldValidateCallback<DATA extends FormData, KEY extends FormKey<DATA> = FormKey<DATA>> = (fieldValue: DATA[KEY], fieldName: KEY, formData: DATA) => undefined | ValidationError<DATA[KEY]>[] | Promise<undefined | ValidationError<DATA[KEY]>[]>;
+/**
+ * Internal structure to track used fields
+ * @private
+ */
+interface FieldRegistrationData<DATA extends FormData, KEY extends FormKey<DATA> = FormKey<DATA>> {
+    validate?: FieldValidateCallback<DATA, KEY>;
+}
+/**
+ * For internal field registration
+ * @private
+ */
+type RegisterFieldCallback<DATA extends FormData, KEY extends FormKey<DATA> = FormKey<DATA>> = (name: KEY, field: FieldRegistrationData<DATA, KEY>) => void;
+type UnregisterFieldCallback<DATA extends FormData, KEY extends FormKey<DATA> = FormKey<DATA>> = (name: KEY) => void;
+/**
+ * Mapper type to construct subset of objects, whose keys are only strings (and not number or symbol)
+ */
+type OnlyStringKeys<T extends object> = Pick<T, keyof T & string>;
+export { UserData, FormData, FormKey, ValidationError, ErrorRecord, FormValidateCallback, FieldValidateCallback, FieldRegistrationData, RegisterFieldCallback, UnregisterFieldCallback, OnlyStringKeys };

package/dist/components/-private/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/dist/components/-private/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/-private/utils.d.ts

@@ -0,0 +1,3 @@
+import { ErrorRecord, FormData, FormKey } from "./types.js";
+declare function mergeErrorRecord<DATA extends FormData, KEY extends FormKey<DATA> = FormKey<DATA>>(...records: Array<ErrorRecord<DATA, KEY> | undefined>): ErrorRecord<DATA, KEY>;
+export { mergeErrorRecord };

package/dist/components/-private/utils.js

@@ -0,0 +1,16 @@
+function mergeErrorRecord(...records) {
+  const errors = {};
+  for (const record of records) {
+    if (!record) {
+      continue;
+    }
+    for (const [name, fieldErrors] of Object.entries(record)) {
+      const existingFieldErrors = errors[name];
+      errors[name] = existingFieldErrors ? [...existingFieldErrors, ...fieldErrors] : fieldErrors;
+    }
+  }
+  return errors;
+}
+
+export { mergeErrorRecord };
+//# sourceMappingURL=utils.js.map

package/dist/components/-private/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/-private/utils.ts"],"sourcesContent":["import type { ErrorRecord, FormData, FormKey, ValidationError } from './types';\n\nexport function mergeErrorRecord<\n  DATA extends FormData,\n  KEY extends FormKey<DATA> = FormKey<DATA>\n>(\n  ...records: Array<ErrorRecord<DATA, KEY> | undefined>\n): ErrorRecord<DATA, KEY> {\n  const errors: ErrorRecord<DATA, KEY> = {};\n\n  for (const record of records) {\n    if (!record) {\n      continue;\n    }\n\n    for (const [name, fieldErrors] of Object.entries(record) as [\n      // TS does not infer the types correctly here, fieldErrors would be unknown, not sure why\n      KEY,\n      ValidationError<DATA[KEY]>[]\n    ][]) {\n      const existingFieldErrors = errors[name];\n\n      errors[name] = existingFieldErrors\n        ? [...existingFieldErrors, ...fieldErrors]\n        : fieldErrors;\n    }\n  }\n\n  return errors;\n}\n"],"names":["mergeErrorRecord","records","errors","record","name","fieldErrors","Object","entries","existingFieldErrors"],"mappings":"AAEO,SAASA,gBAAgB,CAI9B,GAAGC,OAAkD,EAC7B;EACxB,MAAMC,MAA8B,GAAG,EAAE,CAAA;AAEzC,EAAA,KAAK,MAAMC,MAAM,IAAIF,OAAO,EAAE;IAC5B,IAAI,CAACE,MAAM,EAAE;AACX,MAAA,SAAA;AACF,KAAA;AAEA,IAAA,KAAK,MAAM,CAACC,IAAI,EAAEC,WAAW,CAAC,IAAIC,MAAM,CAACC,OAAO,CAACJ,MAAM,CAAC,EAInD;AACH,MAAA,MAAMK,mBAAmB,GAAGN,MAAM,CAACE,IAAI,CAAC,CAAA;AAExCF,MAAAA,MAAM,CAACE,IAAI,CAAC,GAAGI,mBAAmB,GAC9B,CAAC,GAAGA,mBAAmB,EAAE,GAAGH,WAAW,CAAC,GACxCA,WAAW,CAAA;AACjB,KAAA;AACF,GAAA;AAEA,EAAA,OAAOH,MAAM,CAAA;AACf;;;;"}

package/dist/components/headless-form.d.ts

@@ -0,0 +1,123 @@
+import Component from '@glimmer/component';
+import FieldComponent from "./-private/field.js";
+import { HeadlessFormFieldComponentSignature } from "./-private/field.js";
+import { ErrorRecord, FieldRegistrationData, FieldValidateCallback, FormData, FormKey, FormValidateCallback, UserData } from "./-private/types.js";
+import { ComponentLike, ModifierLike, WithBoundArgs } from '@glint/template';
+type ValidateOn = 'change' | 'focusout' | 'submit' | 'input';
+interface HeadlessFormComponentSignature<DATA extends UserData> {
+    Element: HTMLFormElement;
+    Args: {
+        data?: DATA;
+        validateOn?: ValidateOn;
+        revalidateOn?: ValidateOn;
+        validate?: FormValidateCallback<FormData<DATA>>;
+        onSubmit?: (data: FormData<DATA>) => void;
+        onInvalid?: (data: FormData<DATA>, errors: ErrorRecord<FormData<DATA>>) => void;
+    };
+    Blocks: {
+        default: [
+            {
+                field: WithBoundArgs<typeof FieldComponent<DATA>, 'data' | 'set' | 'errors' | 'registerField' | 'unregisterField' | 'triggerValidationFor' | 'fieldValidationEvent' | 'fieldRevalidationEvent'>;
+            }
+        ];
+    };
+}
+/**
+ * This internal data structure maintains information about each field that is registered to the form by `registerField`.
+ */
+declare class FieldData<DATA extends FormData, KEY extends FormKey<DATA> = FormKey<DATA>> {
+    constructor(fieldRegistration: FieldRegistrationData<DATA, KEY>);
+    /**
+     * 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.
+     */
+    validationEnabled: boolean;
+    /**
+     * The *field* level validation callback passed to the field as in `<form.field @name="foo" @validate={{this.validateCallback}}>`
+     */
+    validate?: FieldValidateCallback<DATA, KEY>;
+}
+declare class HeadlessFormComponent<DATA extends UserData> extends Component<HeadlessFormComponentSignature<DATA>> {
+    FieldComponent: ComponentLike<HeadlessFormFieldComponentSignature<DATA>>;
+    on: import("@ember/modifier").OnModifier;
+    formElement?: HTMLFormElement;
+    registerForm: ModifierLike<unknown>;
+    /**
+     * A copy of the passed `@data` stored internally, which is only passed back to the component consumer after a (successful) form submission.
+     */
+    internalData: DATA;
+    fields: Map<FormKey<FormData<DATA>>, FieldData<FormData<DATA>, FormKey<FormData<DATA>>>>;
+    /**
+     * The last result of calling `this.validate()`.
+     */
+    lastValidationResult?: ErrorRecord<FormData<DATA>>;
+    /**
+     * 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`
+     */
+    showAllValidations: boolean;
+    get validateOn(): ValidateOn;
+    get revalidateOn(): ValidateOn;
+    /**
+     * Return the event type that will be listened on for dynamic validation (i.e. *before* submitting)
+     */
+    get fieldValidationEvent(): 'focusout' | 'change' | 'input' | undefined;
+    /**
+     * Return the event type that will be listened on for dynamic *re*validation, i.e. updating the validation status of a field that has been previously marked as invalid
+     */
+    get fieldRevalidationEvent(): 'focusout' | 'change' | 'input' | undefined;
+    /**
+     * Return true if validation has happened (by submitting or by an `@validateOn` event being triggered) and at least one field is invalid
+     */
+    get hasValidationErrors(): boolean;
+    /**
+     * 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.
+     */
+    /**
+     * 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.
+     */
+    validate(): Promise<ErrorRecord<FormData<DATA>>>;
+    validateNative(): ErrorRecord<FormData<DATA>> | undefined;
+    /**
+     * Return a mapping of field to validation errors, for all fields that are invalid *and* for which validation errors should be visible.
+     * Validation errors will be visible for a certain field, if validation errors for *all* fields are visible, which is the case when trying to submit the form,
+     * or when that field has triggered the event given by `@validateOn` for showing validation errors before submitting, e.g. on blur.
+     */
+    get visibleErrors(): ErrorRecord<FormData<DATA>> | undefined;
+    /**
+     * Given a field name, return if eventual errors for the field should be visible. See `visibleErrors` for further details.
+     */
+    /**
+     * Given a field name, return if eventual errors for the field should be visible. See `visibleErrors` for further details.
+     */
+    showErrorsFor(field: FormKey<FormData<DATA>>): boolean;
+    onSubmit(e: Event): Promise<void>;
+    registerField(name: FormKey<FormData<DATA>>, field: FieldRegistrationData<FormData<DATA>>): void;
+    unregisterField(name: FormKey<FormData<DATA>>): void;
+    set<KEY extends FormKey<FormData<DATA>>>(key: KEY, value: DATA[KEY]): void;
+    /**
+     * Handle the `@validateOn` event for a certain field, e.g. "blur".
+     * Associating the event with a field is done by looking at the event target's `name` attribute, which must match one of the `<form.field @name="...">` invocations by the user's template.
+     * Validation will be triggered, and the particular field will be marked to show eventual validation errors.
+     */
+    /**
+     * Handle the `@validateOn` event for a certain field, e.g. "blur".
+     * Associating the event with a field is done by looking at the event target's `name` attribute, which must match one of the `<form.field @name="...">` invocations by the user's template.
+     * Validation will be triggered, and the particular field will be marked to show eventual validation errors.
+     */
+    handleFieldValidation(e: Event | string): Promise<void>;
+    /**
+     * Handle the `@revalidateOn` event for a certain field, e.g. "blur".
+     * Associating the event with a field is done by looking at the event target's `name` attribute, which must match one of the `<form.field @name="...">` invocations by the user's template.
+     * When a field has been already marked to show validation errors by `@validateOn`, then for revalidation another validation will be triggered.
+     *
+     * The use case here is to allow this to happen more frequently than the initial validation, e.g. `@validateOn="blur" @revalidateOn="change"`.
+     */
+    /**
+     * Handle the `@revalidateOn` event for a certain field, e.g. "blur".
+     * Associating the event with a field is done by looking at the event target's `name` attribute, which must match one of the `<form.field @name="...">` invocations by the user's template.
+     * When a field has been already marked to show validation errors by `@validateOn`, then for revalidation another validation will be triggered.
+     *
+     * The use case here is to allow this to happen more frequently than the initial validation, e.g. `@validateOn="blur" @revalidateOn="change"`.
+     */
+    handleFieldRevalidation(e: Event): Promise<void>;
+}
+export { HeadlessFormComponentSignature, HeadlessFormComponent as default };

package/dist/components/headless-form.js

@@ -0,0 +1,258 @@
+import _initializerDefineProperty from '@babel/runtime/helpers/esm/initializerDefineProperty';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _applyDecoratedDescriptor from '@babel/runtime/helpers/esm/applyDecoratedDescriptor';
+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 { assert, warn } from '@ember/debug';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { waitFor } from '@ember/test-waiters';
+import { modifier } from 'ember-modifier';
+import { TrackedObject } from 'tracked-built-ins';
+import HeadlessFormFieldComponent from './-private/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    )\n  }}\n</form>");
+
+var _class, _descriptor, _class3, _descriptor2, _descriptor3;
+/**
+ * This internal data structure maintains information about each field that is registered to the form by `registerField`.
+ */
+let FieldData = (_class = class FieldData {
+  constructor(fieldRegistration) {
+    _initializerDefineProperty(this, "validationEnabled", _descriptor, this);
+    _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,
+  writable: true,
+  initializer: function () {
+    return false;
+  }
+})), _class);
+let HeadlessFormComponent = (_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", new TrackedObject(this.args.data ?? {}));
+    _defineProperty(this, "fields", new Map());
+    _initializerDefineProperty(this, "lastValidationResult", _descriptor2, this);
+    _initializerDefineProperty(this, "showAllValidations", _descriptor3, this);
+  }
+  get validateOn() {
+    return this.args.validateOn ?? 'submit';
+  }
+  get revalidateOn() {
+    return this.args.revalidateOn ?? 'change';
+  }
+
+  /**
+   * Return the event type that will be listened on for dynamic validation (i.e. *before* submitting)
+   */
+  get fieldValidationEvent() {
+    const {
+      validateOn
+    } = this;
+    return validateOn === 'submit' ?
+    // no need for dynamic validation, as validation always happens on submit
+    undefined : validateOn;
+  }
+
+  /**
+   * Return the event type that will be listened on for dynamic *re*validation, i.e. updating the validation status of a field that has been previously marked as invalid
+   */
+  get fieldRevalidationEvent() {
+    const {
+      validateOn,
+      revalidateOn
+    } = this;
+    return revalidateOn === 'submit' ?
+    // no need for dynamic validation, as validation always happens on submit
+    undefined :
+    // when validation happens more frequently than revalidation, then we can ignore revalidation, because the validation handler will already cover us
+    validateOn === 'input' || validateOn === 'change' && revalidateOn === 'focusout' || validateOn === revalidateOn ? undefined : revalidateOn;
+  }
+
+  /**
+   * Return true if validation has happened (by submitting or by an `@validateOn` event being triggered) and at least one field is invalid
+   */
+  get hasValidationErrors() {
+    // Only consider validation errors for which we actually have a field rendered
+    return this.lastValidationResult ? Object.keys(this.lastValidationResult).some(name => this.fields.has(name)) : false;
+  }
+
+  /**
+   * 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);
+    const customFieldValidations = [];
+    for (const [name, field] of this.fields) {
+      const fieldValidationResult = await field.validate?.(this.internalData[name], name, this.internalData);
+      if (fieldValidationResult) {
+        customFieldValidations.push({
+          [name]: fieldValidationResult
+        });
+      }
+    }
+    return mergeErrorRecord(nativeValidation, customFormValidation, ...customFieldValidations);
+  }
+  validateNative() {
+    const form = this.formElement;
+    assert('Form element expected to be present. If you see this, please report it as a bug to ember-headless-form!', form);
+    if (form.checkValidity()) {
+      return;
+    }
+    const errors = {};
+    for (const el of form.elements) {
+      // This is just to make TS happy, as we need to access properties on el that only form elements have, but elements in `form.elements` are just typed as plain `Element`. Should never occur in reality.
+      assert('Unexpected form element. If you see this, please report it as a bug to ember-headless-form!', el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement || el instanceof HTMLButtonElement || el instanceof HTMLFieldSetElement || el instanceof HTMLObjectElement || el instanceof HTMLOutputElement);
+      if (el.validity.valid) {
+        continue;
+      }
+      const name = el.name;
+      if (this.fields.has(name)) {
+        errors[name] = [{
+          type: 'native',
+          value: this.internalData[name],
+          message: el.validationMessage
+        }];
+      } else {
+        warn(`An invalid form element with name "${name}" was detected, but this name is not used as a form field. It will be ignored for validation. Make sure to apply the correct name to custom form elements that participate in form validation!`, {
+          id: 'headless-form.invalid-control-for-unknown-field'
+        });
+      }
+    }
+    return errors;
+  }
+
+  /**
+   * Return a mapping of field to validation errors, for all fields that are invalid *and* for which validation errors should be visible.
+   * Validation errors will be visible for a certain field, if validation errors for *all* fields are visible, which is the case when trying to submit the form,
+   * or when that field has triggered the event given by `@validateOn` for showing validation errors before submitting, e.g. on blur.
+   */
+  get visibleErrors() {
+    if (!this.lastValidationResult) {
+      return undefined;
+    }
+    const visibleErrors = {};
+    for (const [field, errors] of Object.entries(this.lastValidationResult)) {
+      if (this.showErrorsFor(field)) {
+        visibleErrors[field] = errors;
+      }
+    }
+    return visibleErrors;
+  }
+
+  /**
+   * Given a field name, return if eventual errors for the field should be visible. See `visibleErrors` for further details.
+   */
+  showErrorsFor(field) {
+    return this.showAllValidations || (this.fields.get(field)?.validationEnabled ?? false);
+  }
+  async onSubmit(e) {
+    e.preventDefault();
+    this.lastValidationResult = await this.validate();
+    this.showAllValidations = true;
+    if (!this.hasValidationErrors) {
+      this.args.onSubmit?.(this.internalData);
+    } else {
+      assert('Validation errors expected to be present. If you see this, please report it as a bug to ember-headless-form!', this.lastValidationResult);
+      this.args.onInvalid?.(this.internalData, this.lastValidationResult);
+    }
+  }
+  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));
+    this.fields.set(name, new FieldData(field));
+  }
+  unregisterField(name) {
+    this.fields.delete(name);
+  }
+  set(key, value) {
+    this.internalData[key] = value;
+  }
+
+  /**
+   * Handle the `@validateOn` event for a certain field, e.g. "blur".
+   * Associating the event with a field is done by looking at the event target's `name` attribute, which must match one of the `<form.field @name="...">` invocations by the user's template.
+   * Validation will be triggered, and the particular field will be marked to show eventual validation errors.
+   */
+  async handleFieldValidation(e) {
+    let name;
+    if (typeof e === 'string') {
+      name = e;
+    } else {
+      const {
+        target
+      } = e;
+      name = target.name;
+    }
+    if (name) {
+      const field = this.fields.get(name);
+      if (field) {
+        this.lastValidationResult = await this.validate();
+        field.validationEnabled = true;
+      }
+    } else if (e instanceof Event) {
+      warn(`An event of type "${e.type}" was received by headless-form, which is supposed to trigger validations for a certain field. But the name of that field could not be determined. Make sure that your control element has a \`name\` attribute matching the field, or use the yielded \`{{field.captureEvents}}\` to capture the events.`, {
+        id: 'headless-form.validation-event-for-unknown-field'
+      });
+    }
+  }
+
+  /**
+   * Handle the `@revalidateOn` event for a certain field, e.g. "blur".
+   * Associating the event with a field is done by looking at the event target's `name` attribute, which must match one of the `<form.field @name="...">` invocations by the user's template.
+   * When a field has been already marked to show validation errors by `@validateOn`, then for revalidation another validation will be triggered.
+   *
+   * The use case here is to allow this to happen more frequently than the initial validation, e.g. `@validateOn="blur" @revalidateOn="change"`.
+   */
+  async handleFieldRevalidation(e) {
+    const {
+      target
+    } = e;
+    const {
+      name
+    } = target;
+    if (name) {
+      if (this.showErrorsFor(name)) {
+        this.lastValidationResult = await this.validate();
+      }
+    } else {
+      warn(`An event of type "${e.type}" was received by headless-form, which is supposed to trigger validations for a certain field. But the name of that field could not be determined. Make sure that your control element has a \`name\` attribute matching the field, or use the yielded \`{{field.captureEvents}}\` to capture the events.`, {
+        id: 'headless-form.validation-event-for-unknown-field'
+      });
+    }
+  }
+}, (_descriptor2 = _applyDecoratedDescriptor(_class3.prototype, "lastValidationResult", [tracked], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+}), _descriptor3 = _applyDecoratedDescriptor(_class3.prototype, "showAllValidations", [tracked], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function () {
+    return false;
+  }
+}), _applyDecoratedDescriptor(_class3.prototype, "validate", [waitFor], Object.getOwnPropertyDescriptor(_class3.prototype, "validate"), _class3.prototype), _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);
+
+export { HeadlessFormComponent as default };
+//# sourceMappingURL=headless-form.js.map

package/dist/components/headless-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"headless-form.js","sources":["../../src/components/headless-form.hbs.js","../../src/components/headless-form.ts"],"sourcesContent":["import { precompileTemplate } from \"@ember/template-compilation\";\nexport default 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    )\\n  }}\\n</form>\")","import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { assert, warn } from '@ember/debug';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport { waitFor } from '@ember/test-waiters';\n\nimport { modifier } from 'ember-modifier';\nimport { TrackedObject } from 'tracked-built-ins';\n\nimport FieldComponent from './-private/field';\nimport { mergeErrorRecord } from './-private/utils';\n\nimport type { HeadlessFormFieldComponentSignature } from './-private/field';\nimport type {\n  ErrorRecord,\n  FieldRegistrationData,\n  FieldValidateCallback,\n  FormData,\n  FormKey,\n  FormValidateCallback,\n  UserData,\n  ValidationError,\n} from './-private/types';\nimport type {\n  ComponentLike,\n  ModifierLike,\n  WithBoundArgs,\n} from '@glint/template';\n\ntype ValidateOn = 'change' | 'focusout' | 'submit' | 'input';\n\nexport interface HeadlessFormComponentSignature<DATA extends UserData> {\n  Element: HTMLFormElement;\n  Args: {\n    data?: DATA;\n    validateOn?: ValidateOn;\n    revalidateOn?: ValidateOn;\n    validate?: FormValidateCallback<FormData<DATA>>;\n    onSubmit?: (data: FormData<DATA>) => void;\n    onInvalid?: (\n      data: FormData<DATA>,\n      errors: ErrorRecord<FormData<DATA>>\n    ) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        field: WithBoundArgs<\n          typeof FieldComponent<DATA>,\n          | 'data'\n          | 'set'\n          | 'errors'\n          | 'registerField'\n          | 'unregisterField'\n          | 'triggerValidationFor'\n          | 'fieldValidationEvent'\n          | 'fieldRevalidationEvent'\n        >;\n      }\n    ];\n  };\n}\n\n/**\n * This internal data structure maintains information about each field that is registered to the form by `registerField`.\n */\nclass FieldData<\n  DATA extends FormData,\n  KEY extends FormKey<DATA> = FormKey<DATA>\n> {\n  constructor(fieldRegistration: FieldRegistrationData<DATA, KEY>) {\n    this.validate = fieldRegistration.validate;\n  }\n\n  /**\n   * 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.\n   */\n  @tracked validationEnabled = false;\n\n  /**\n   * The *field* level validation callback passed to the field as in `<form.field @name=\"foo\" @validate={{this.validateCallback}}>`\n   */\n  validate?: FieldValidateCallback<DATA, KEY>;\n}\n\nexport default class HeadlessFormComponent<\n  DATA extends UserData\n> extends Component<HeadlessFormComponentSignature<DATA>> {\n  FieldComponent: ComponentLike<HeadlessFormFieldComponentSignature<DATA>> =\n    FieldComponent;\n\n  // we cannot use (modifier \"on\") directly in the template due to https://github.com/emberjs/ember.js/issues/19869\n  on = on;\n\n  formElement?: HTMLFormElement;\n\n  registerForm = modifier((el: HTMLFormElement, _p: []) => {\n    this.formElement = el;\n  }) as unknown as ModifierLike<unknown>; // @todo getting Glint errors without this. Try again with Glint 1.0 (beta)!\n\n  /**\n   * A copy of the passed `@data` stored internally, which is only passed back to the component consumer after a (successful) form submission.\n   */\n  internalData: DATA = new TrackedObject(this.args.data ?? {}) as DATA;\n\n  fields = new Map<FormKey<FormData<DATA>>, FieldData<FormData<DATA>>>();\n\n  /**\n   * The last result of calling `this.validate()`.\n   */\n  @tracked lastValidationResult?: ErrorRecord<FormData<DATA>>;\n\n  /**\n   * 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`\n   */\n  @tracked showAllValidations = false;\n\n  get validateOn(): ValidateOn {\n    return this.args.validateOn ?? 'submit';\n  }\n\n  get revalidateOn(): ValidateOn {\n    return this.args.revalidateOn ?? 'change';\n  }\n\n  /**\n   * Return the event type that will be listened on for dynamic validation (i.e. *before* submitting)\n   */\n  get fieldValidationEvent(): 'focusout' | 'change' | 'input' | undefined {\n    const { validateOn } = this;\n\n    return validateOn === 'submit'\n      ? // no need for dynamic validation, as validation always happens on submit\n        undefined\n      : validateOn;\n  }\n\n  /**\n   * Return the event type that will be listened on for dynamic *re*validation, i.e. updating the validation status of a field that has been previously marked as invalid\n   */\n  get fieldRevalidationEvent(): 'focusout' | 'change' | 'input' | undefined {\n    const { validateOn, revalidateOn } = this;\n\n    return revalidateOn === 'submit'\n      ? // no need for dynamic validation, as validation always happens on submit\n        undefined\n      : // when validation happens more frequently than revalidation, then we can ignore revalidation, because the validation handler will already cover us\n      validateOn === 'input' ||\n        (validateOn === 'change' && revalidateOn === 'focusout') ||\n        validateOn === revalidateOn\n      ? undefined\n      : revalidateOn;\n  }\n\n  /**\n   * Return true if validation has happened (by submitting or by an `@validateOn` event being triggered) and at least one field is invalid\n   */\n  get hasValidationErrors(): boolean {\n    // Only consider validation errors for which we actually have a field rendered\n    return this.lastValidationResult\n      ? Object.keys(this.lastValidationResult).some((name) =>\n          this.fields.has(name as FormKey<FormData<DATA>>)\n        )\n      : false;\n  }\n\n  /**\n   * 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.\n   */\n  @waitFor\n  async validate(): Promise<ErrorRecord<FormData<DATA>>> {\n    const nativeValidation = this.validateNative();\n    const customFormValidation = await this.args.validate?.(this.internalData);\n    const customFieldValidations: ErrorRecord<FormData<DATA>>[] = [];\n\n    for (const [name, field] of this.fields) {\n      const fieldValidationResult = await field.validate?.(\n        this.internalData[name],\n        name,\n        this.internalData\n      );\n\n      if (fieldValidationResult) {\n        customFieldValidations.push({\n          [name]: fieldValidationResult,\n        } as ErrorRecord<FormData<DATA>>);\n      }\n    }\n\n    return mergeErrorRecord(\n      nativeValidation,\n      customFormValidation,\n      ...customFieldValidations\n    );\n  }\n\n  validateNative(): ErrorRecord<FormData<DATA>> | undefined {\n    const form = this.formElement;\n\n    assert(\n      'Form element expected to be present. If you see this, please report it as a bug to ember-headless-form!',\n      form\n    );\n\n    if (form.checkValidity()) {\n      return;\n    }\n\n    const errors: ErrorRecord<FormData<DATA>> = {};\n\n    for (const el of form.elements) {\n      // This is just to make TS happy, as we need to access properties on el that only form elements have, but elements in `form.elements` are just typed as plain `Element`. Should never occur in reality.\n      assert(\n        'Unexpected form element. If you see this, please report it as a bug to ember-headless-form!',\n        el instanceof HTMLInputElement ||\n          el instanceof HTMLTextAreaElement ||\n          el instanceof HTMLSelectElement ||\n          el instanceof HTMLButtonElement ||\n          el instanceof HTMLFieldSetElement ||\n          el instanceof HTMLObjectElement ||\n          el instanceof HTMLOutputElement\n      );\n\n      if (el.validity.valid) {\n        continue;\n      }\n\n      const name = el.name as FormKey<FormData<DATA>>;\n\n      if (this.fields.has(name)) {\n        errors[name] = [\n          {\n            type: 'native',\n            value: this.internalData[name],\n            message: el.validationMessage,\n          },\n        ];\n      } else {\n        warn(\n          `An invalid form element with name \"${name}\" was detected, but this name is not used as a form field. It will be ignored for validation. Make sure to apply the correct name to custom form elements that participate in form validation!`,\n          { id: 'headless-form.invalid-control-for-unknown-field' }\n        );\n      }\n    }\n\n    return errors;\n  }\n\n  /**\n   * Return a mapping of field to validation errors, for all fields that are invalid *and* for which validation errors should be visible.\n   * Validation errors will be visible for a certain field, if validation errors for *all* fields are visible, which is the case when trying to submit the form,\n   * or when that field has triggered the event given by `@validateOn` for showing validation errors before submitting, e.g. on blur.\n   */\n  get visibleErrors(): ErrorRecord<FormData<DATA>> | undefined {\n    if (!this.lastValidationResult) {\n      return undefined;\n    }\n\n    const visibleErrors: ErrorRecord<FormData<DATA>> = {};\n\n    for (const [field, errors] of Object.entries(this.lastValidationResult) as [\n      FormKey<FormData<DATA>>,\n      ValidationError<FormData<DATA>[FormKey<FormData<DATA>>]>[]\n    ][]) {\n      if (this.showErrorsFor(field)) {\n        visibleErrors[field] = errors;\n      }\n    }\n\n    return visibleErrors;\n  }\n\n  /**\n   * Given a field name, return if eventual errors for the field should be visible. See `visibleErrors` for further details.\n   */\n  showErrorsFor(field: FormKey<FormData<DATA>>): boolean {\n    return (\n      this.showAllValidations ||\n      (this.fields.get(field)?.validationEnabled ?? false)\n    );\n  }\n\n  @action\n  async onSubmit(e: Event): Promise<void> {\n    e.preventDefault();\n\n    this.lastValidationResult = await this.validate();\n    this.showAllValidations = true;\n\n    if (!this.hasValidationErrors) {\n      this.args.onSubmit?.(this.internalData);\n    } else {\n      assert(\n        'Validation errors expected to be present. If you see this, please report it as a bug to ember-headless-form!',\n        this.lastValidationResult\n      );\n      this.args.onInvalid?.(this.internalData, this.lastValidationResult);\n    }\n  }\n\n  @action\n  registerField(\n    name: FormKey<FormData<DATA>>,\n    field: FieldRegistrationData<FormData<DATA>>\n  ): void {\n    assert(\n      `You passed @name=\"${String(\n        name\n      )}\" to the form field, but this is already in use. Names of form fields must be unique!`,\n      !this.fields.has(name)\n    );\n    this.fields.set(name, new FieldData(field));\n  }\n\n  @action\n  unregisterField(name: FormKey<FormData<DATA>>): void {\n    this.fields.delete(name);\n  }\n\n  @action\n  set<KEY extends FormKey<FormData<DATA>>>(key: KEY, value: DATA[KEY]): void {\n    this.internalData[key] = value;\n  }\n\n  /**\n   * Handle the `@validateOn` event for a certain field, e.g. \"blur\".\n   * Associating the event with a field is done by looking at the event target's `name` attribute, which must match one of the `<form.field @name=\"...\">` invocations by the user's template.\n   * Validation will be triggered, and the particular field will be marked to show eventual validation errors.\n   */\n  @action\n  async handleFieldValidation(e: Event | string): Promise<void> {\n    let name: string;\n\n    if (typeof e === 'string') {\n      name = e;\n    } else {\n      const { target } = e;\n\n      name = (target as HTMLInputElement).name;\n    }\n\n    if (name) {\n      const field = this.fields.get(name as FormKey<FormData<DATA>>);\n\n      if (field) {\n        this.lastValidationResult = await this.validate();\n        field.validationEnabled = true;\n      }\n    } else if (e instanceof Event) {\n      warn(\n        `An event of type \"${e.type}\" was received by headless-form, which is supposed to trigger validations for a certain field. But the name of that field could not be determined. Make sure that your control element has a \\`name\\` attribute matching the field, or use the yielded \\`{{field.captureEvents}}\\` to capture the events.`,\n        { id: 'headless-form.validation-event-for-unknown-field' }\n      );\n    }\n  }\n\n  /**\n   * Handle the `@revalidateOn` event for a certain field, e.g. \"blur\".\n   * Associating the event with a field is done by looking at the event target's `name` attribute, which must match one of the `<form.field @name=\"...\">` invocations by the user's template.\n   * When a field has been already marked to show validation errors by `@validateOn`, then for revalidation another validation will be triggered.\n   *\n   * The use case here is to allow this to happen more frequently than the initial validation, e.g. `@validateOn=\"blur\" @revalidateOn=\"change\"`.\n   */\n  @action\n  async handleFieldRevalidation(e: Event): Promise<void> {\n    const { target } = e;\n    const { name } = target as HTMLInputElement;\n\n    if (name) {\n      if (this.showErrorsFor(name as FormKey<FormData<DATA>>)) {\n        this.lastValidationResult = await this.validate();\n      }\n    } else {\n      warn(\n        `An event of type \"${e.type}\" was received by headless-form, which is supposed to trigger validations for a certain field. But the name of that field could not be determined. Make sure that your control element has a \\`name\\` attribute matching the field, or use the yielded \\`{{field.captureEvents}}\\` to capture the events.`,\n        { id: 'headless-form.validation-event-for-unknown-field' }\n      );\n    }\n  }\n}\n"],"names":["precompileTemplate","FieldData","constructor","fieldRegistration","validate","tracked","HeadlessFormComponent","Component","FieldComponent","on","modifier","el","_p","formElement","TrackedObject","args","data","Map","validateOn","revalidateOn","fieldValidationEvent","undefined","fieldRevalidationEvent","hasValidationErrors","lastValidationResult","Object","keys","some","name","fields","has","nativeValidation","validateNative","customFormValidation","internalData","customFieldValidations","field","fieldValidationResult","push","mergeErrorRecord","form","assert","checkValidity","errors","elements","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","HTMLButtonElement","HTMLFieldSetElement","HTMLObjectElement","HTMLOutputElement","validity","valid","type","value","message","validationMessage","warn","id","visibleErrors","entries","showErrorsFor","showAllValidations","get","validationEnabled","onSubmit","e","preventDefault","onInvalid","registerField","String","set","unregisterField","delete","key","handleFieldValidation","target","Event","handleFieldRevalidation","waitFor","action"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export type { InputType } from "./components/-private/control/input.js";

package/dist/index.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/template-registry.d.ts

@@ -0,0 +1,5 @@
+import HeadlessFormComponent from "./components/headless-form.js";
+interface Registry {
+    HeadlessForm: typeof HeadlessFormComponent;
+}
+export { Registry as default };

package/dist/template-registry.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=template-registry.js.map

package/dist/template-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template-registry.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}