@axenstudio/axen-form 0.1.17 → 0.1.19

package/dist/core/formStore.cjs

@@ -1,6 +1,17 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const pathUtils = require("./pathUtils.cjs");
+function valuesEqual(a, b) {
+  if (Object.is(a, b)) return true;
+  if (a instanceof Date || b instanceof Date) return a instanceof Date && b instanceof Date && a.getTime() === b.getTime();
+  if (a === null || b === null || typeof a !== "object" || typeof b !== "object") return false;
+  if (Array.isArray(a) !== Array.isArray(b)) return false;
+  const left = a;
+  const right = b;
+  const keys = Object.keys(left);
+  if (keys.length !== Object.keys(right).length) return false;
+  return keys.every((key) => Object.prototype.hasOwnProperty.call(right, key) && valuesEqual(left[key], right[key]));
+}
 function createFormStore(options) {
   const {
     initialValues,
@@ -12,6 +23,9 @@ function createFormStore(options) {
     values: structuredClone(initialValues),
     errors: {},
     touched: {},
+    validationStatus: "unvalidated",
+    fieldValidationStatus: {},
+    isValidating: false,
     dirty: false,
     isSubmitting: false,
     submitCount: 0,
@@ -20,6 +34,9 @@ function createFormStore(options) {
   const subscribers = /* @__PURE__ */ new Set();
   const fieldSubscribers = /* @__PURE__ */ new Map();
   let validationSchema = options.validationSchema;
+  let valuesRevision = 0;
+  let formRequest = 0;
+  const fieldRequests = /* @__PURE__ */ new Map();
   if (validationAdapter && options.fields && !validationSchema) {
     validationSchema = validationAdapter.buildSchema(options.fields);
   }
@@ -48,16 +65,53 @@ function createFormStore(options) {
     var _a;
     (_a = fieldSubscribers.get(name)) == null ? void 0 : _a.forEach((fn) => fn());
   }
+  function notifyAllFields() {
+    for (const name of fieldSubscribers.keys()) notifyField(name);
+    notify();
+  }
+  function notifyValuePath(path) {
+    const related = (key) => key === path || key.startsWith(`${path}.`) || key.startsWith(`${path}[`) || path.startsWith(`${key}.`) || path.startsWith(`${key}[`);
+    for (const key of fieldSubscribers.keys()) if (related(key)) notifyField(key);
+    notify();
+  }
   function setFieldValue(name, value) {
+    const nextValues = pathUtils.set(state.values, name, value);
+    const statuses = { ...state.fieldValidationStatus, [name]: "unvalidated" };
+    const dependents = (options.fields ?? []).filter((field) => {
+      var _a;
+      return field.name !== name && ((_a = field.rules) == null ? void 0 : _a.countryField) === name;
+    });
+    const errors = { ...state.errors };
+    for (const field of dependents) {
+      statuses[field.name] = "unvalidated";
+      delete errors[field.name];
+    }
+    valuesRevision += 1;
     state = {
       ...state,
-      values: pathUtils.set(state.values, name, value),
-      dirty: true
+      values: nextValues,
+      errors,
+      dirty: !valuesEqual(nextValues, state.initialValues),
+      validationStatus: "unvalidated",
+      isValidating: false,
+      fieldValidationStatus: statuses
     };
-    notifyField(name);
-    notify();
+    for (const field of options.fields ?? []) {
+      if (field.hidden && state.errors[field.name] && (typeof field.hidden === "function" ? field.hidden(nextValues) : field.hidden)) {
+        setFieldError(field.name, void 0);
+      }
+    }
+    notifyValuePath(name);
+    for (const field of dependents) notifyField(field.name);
     if (validateOnChange && validationAdapter && validationSchema) {
-      runFieldValidation(name);
+      const revision = valuesRevision;
+      for (const fieldName of [name, ...dependents.map((field) => field.name)]) {
+        void runFieldValidation(fieldName).catch((error) => {
+          if (revision === valuesRevision) {
+            setFieldError(fieldName, error instanceof Error ? error.message : "Validation failed");
+          }
+        });
+      }
     }
   }
   function setFieldTouched(name, touched = true) {
@@ -68,28 +122,84 @@ function createFormStore(options) {
     notifyField(name);
     notify();
     if (validateOnBlur && touched && validationAdapter && validationSchema) {
-      runFieldValidation(name);
+      const revision = valuesRevision;
+      void runFieldValidation(name).catch((error) => {
+        if (revision === valuesRevision) setFieldError(name, error instanceof Error ? error.message : "Validation failed");
+      });
     }
   }
   function setFieldError(name, error) {
-    const next = { ...state.errors };
-    if (error) {
-      next[name] = error;
-    } else {
-      delete next[name];
-    }
-    state = { ...state, errors: next };
+    const errors = { ...state.errors };
+    if (error) errors[name] = error;
+    else delete errors[name];
+    state = {
+      ...state,
+      errors,
+      validationStatus: Object.keys(errors).length ? "invalid" : "unvalidated",
+      isValidating: false,
+      fieldValidationStatus: { ...state.fieldValidationStatus, [name]: error ? "invalid" : "unvalidated" }
+    };
     notifyField(name);
     notify();
   }
   function setValues(values) {
-    state = { ...state, values, dirty: true };
-    notify();
-    subscribers.forEach((fn) => fn());
+    valuesRevision += 1;
+    state = {
+      ...state,
+      values,
+      dirty: !valuesEqual(values, state.initialValues),
+      validationStatus: "unvalidated",
+      isValidating: false,
+      fieldValidationStatus: {}
+    };
+    notifyAllFields();
   }
   function setErrors(errors) {
-    state = { ...state, errors };
-    notify();
+    state = {
+      ...state,
+      errors,
+      validationStatus: Object.keys(errors).length ? "invalid" : "unvalidated",
+      isValidating: false,
+      fieldValidationStatus: {}
+    };
+    notifyAllFields();
+  }
+  function setFieldArrayValue(name, items, origins) {
+    const remap = (entries) => {
+      const result = {};
+      for (const [path, value] of Object.entries(entries)) {
+        if (!path.startsWith(name)) {
+          result[path] = value;
+          continue;
+        }
+        const suffix = path.slice(name.length);
+        const match = /^(?:\.(\d+)|\[(\d+)\])(?=\.|\[|$)/.exec(suffix);
+        if (!match) {
+          result[path] = value;
+          continue;
+        }
+        const oldIndex = Number(match[1] ?? match[2]);
+        const tail = suffix.slice(match[0].length);
+        for (let i = 0; i < origins.length; i++) {
+          if (origins[i] !== oldIndex) continue;
+          result[`${name}${match[1] !== void 0 ? `.${i}` : `[${i}]`}${tail}`] = value;
+        }
+      }
+      return result;
+    };
+    const values = pathUtils.set(state.values, name, items);
+    valuesRevision += 1;
+    state = {
+      ...state,
+      values,
+      dirty: !valuesEqual(values, state.initialValues),
+      errors: remap(state.errors),
+      touched: remap(state.touched),
+      validationStatus: "unvalidated",
+      isValidating: false,
+      fieldValidationStatus: remap(state.fieldValidationStatus)
+    };
+    notifyValuePath(name);
   }
   function resetForm(nextValues) {
     const newValues = nextValues ? { ...state.initialValues, ...nextValues } : structuredClone(state.initialValues);
@@ -97,29 +207,94 @@ function createFormStore(options) {
       values: newValues,
       errors: {},
       touched: {},
+      validationStatus: "unvalidated",
+      fieldValidationStatus: {},
+      isValidating: false,
       dirty: false,
       isSubmitting: false,
       submitCount: state.submitCount,
-      initialValues: state.initialValues
+      initialValues: nextValues ? structuredClone(newValues) : state.initialValues
     };
-    notify();
+    valuesRevision += 1;
+    notifyAllFields();
   }
   async function validateForm() {
     if (!validationAdapter || !validationSchema) return {};
-    const errors = await validationAdapter.validate(validationSchema, state.values);
-    state = { ...state, errors };
+    const revision = valuesRevision;
+    const request = ++formRequest;
+    state = { ...state, validationStatus: "validating", isValidating: true };
     notify();
-    for (const name of fieldSubscribers.keys()) {
-      notifyField(name);
+    try {
+      const errors = await validationAdapter.validate(validationSchema, state.values);
+      if (revision !== valuesRevision || request !== formRequest) return state.errors;
+      const statuses = { ...state.fieldValidationStatus };
+      for (const field of options.fields ?? []) statuses[field.name] = errors[field.name] ? "invalid" : "valid";
+      state = {
+        ...state,
+        errors,
+        validationStatus: Object.keys(errors).length ? "invalid" : "valid",
+        isValidating: false,
+        fieldValidationStatus: statuses
+      };
+      notify();
+      for (const name of fieldSubscribers.keys()) notifyField(name);
+      return errors;
+    } catch (error) {
+      if (revision === valuesRevision && request === formRequest) {
+        state = { ...state, validationStatus: "unvalidated", isValidating: false };
+        notify();
+      }
+      throw error;
     }
-    return errors;
   }
   async function validateField(name) {
+    var _a;
     if (!(validationAdapter == null ? void 0 : validationAdapter.validateField) || !validationSchema) return void 0;
+    const revision = valuesRevision;
+    const request = (fieldRequests.get(name) ?? 0) + 1;
+    fieldRequests.set(name, request);
+    const config = (_a = options.fields) == null ? void 0 : _a.find((field) => field.name === name);
+    const hidden = (config == null ? void 0 : config.hidden) && (typeof config.hidden === "function" ? config.hidden(state.values) : config.hidden);
+    if (hidden) {
+      setFieldError(name, void 0);
+      state = { ...state, fieldValidationStatus: { ...state.fieldValidationStatus, [name]: "valid" } };
+      notifyField(name);
+      notify();
+      return void 0;
+    }
+    state = {
+      ...state,
+      fieldValidationStatus: { ...state.fieldValidationStatus, [name]: "validating" },
+      validationStatus: state.validationStatus === "validating" ? "validating" : "unvalidated"
+    };
+    notifyField(name);
+    notify();
     const fieldValue = pathUtils.get(state.values, name);
-    const error = await validationAdapter.validateField(validationSchema, name, fieldValue);
-    setFieldError(name, error);
-    return error;
+    try {
+      const error = await validationAdapter.validateField(validationSchema, name, fieldValue, state.values);
+      if (revision === valuesRevision && request === fieldRequests.get(name)) {
+        const errors = { ...state.errors };
+        if (error) errors[name] = error;
+        else delete errors[name];
+        state = {
+          ...state,
+          errors,
+          validationStatus: state.validationStatus === "validating" ? "validating" : Object.keys(errors).length ? "invalid" : "unvalidated",
+          fieldValidationStatus: { ...state.fieldValidationStatus, [name]: error ? "invalid" : "valid" }
+        };
+        notifyField(name);
+        notify();
+        return error;
+      }
+      return state.errors[name];
+    } catch (error) {
+      if (revision === valuesRevision && request === fieldRequests.get(name)) {
+        state = { ...state, fieldValidationStatus: { ...state.fieldValidationStatus, [name]: "unvalidated" } };
+        notifyField(name);
+        notify();
+      }
+      throw error;
+    }
   }
   async function runFieldValidation(name) {
     if (validationAdapter == null ? void 0 : validationAdapter.validateField) {
@@ -129,27 +304,18 @@ function createFormStore(options) {
     }
   }
   async function submitForm(onSubmit) {
+    if (state.isSubmitting) return;
     state = { ...state, isSubmitting: true, submitCount: state.submitCount + 1 };
     notify();
-    touchAllFields();
-    const errors = await validateForm();
-    for (const name of Object.keys(state.touched)) {
-      notifyField(name);
-    }
-    if (Object.keys(errors).length > 0) {
-      state = { ...state, isSubmitting: false };
-      notify();
-      return;
-    }
-    const handler = onSubmit ?? options.onSubmit;
-    if (handler) {
-      try {
-        await handler(state.values);
-      } finally {
-        state = { ...state, isSubmitting: false };
-        notify();
-      }
-    } else {
+    try {
+      touchAllFields();
+      const revision = valuesRevision;
+      const errors = await validateForm();
+      for (const name of Object.keys(state.touched)) notifyField(name);
+      if (revision !== valuesRevision || Object.keys(errors).length > 0) return;
+      const handler = onSubmit ?? options.onSubmit;
+      if (handler) await handler(state.values);
+    } finally {
       state = { ...state, isSubmitting: false };
       notify();
     }
@@ -188,6 +354,7 @@ function createFormStore(options) {
     setFieldError,
     setValues,
     setErrors,
+    setFieldArrayValue,
     resetForm,
     validateForm,
     validateField,

package/dist/core/formStore.d.ts

@@ -1,8 +1,11 @@
-import { FieldConfig, ValidationAdapter } from '../types';
+import { FieldConfig, ValidationAdapter, ValidationStatus } from '../types';
 export interface FormState<TValues extends Record<string, unknown> = Record<string, unknown>> {
     values: TValues;
     errors: Record<string, string>;
     touched: Record<string, boolean>;
+    validationStatus: ValidationStatus;
+    fieldValidationStatus: Record<string, ValidationStatus>;
+    isValidating: boolean;
     dirty: boolean;
     isSubmitting: boolean;
     submitCount: number;
@@ -27,6 +30,7 @@ export declare function createFormStore<TValues extends Record<string, unknown>>
     setFieldError: (name: string, error: string | undefined) => void;
     setValues: (values: TValues) => void;
     setErrors: (errors: Record<string, string>) => void;
+    setFieldArrayValue: (name: string, items: unknown[], origins: Array<number | null>) => void;
     resetForm: (nextValues?: Partial<TValues>) => void;
     validateForm: () => Promise<Record<string, string>>;
     validateField: (name: string) => Promise<string | undefined>;
@@ -37,4 +41,3 @@ export declare function createFormStore<TValues extends Record<string, unknown>>
     getFieldTouched: (name: string) => boolean;
 };
 export type FormStore<TValues extends Record<string, unknown> = Record<string, unknown>> = ReturnType<typeof createFormStore<TValues>>;
-//# sourceMappingURL=formStore.d.ts.map