@samline/forms 2.6.0 → 2.7.0

package/dist/browser/index.cjs

@@ -58,6 +58,22 @@ var createAppend = (state2, helpers) => ({ tag, content, class: className, atSta
   return node;
 };
 
+// src/api/add-cleanup.ts
+var createAddCleanup = (state2, _helpers) => (cleanup) => {
+  if (state2.isDestroyed) {
+    cleanup();
+    return () => void 0;
+  }
+  const registration = () => cleanup();
+  state2.cleanups.add(registration);
+  let active = true;
+  return () => {
+    if (!active) return;
+    active = false;
+    state2.cleanups.delete(registration);
+  };
+};
+
 // src/api/auto-submit.ts
 var createAutoSubmit = (state2, helpers) => (next = true) => {
   state2.autoSubmitEnabled = next !== false;
@@ -485,12 +501,24 @@ var createDestroy = (state2, _helpers) => () => {
   }
   state2.mutationObserver?.disconnect();
   state2.mutationObserver = null;
+  const cleanups = Array.from(state2.cleanups).reverse();
+  state2.cleanups.clear();
+  for (const cleanup of cleanups) {
+    try {
+      cleanup();
+    } catch (error) {
+      console.error("[forms] cleanup failed", error);
+    }
+  }
   state2.watchedFields.clear();
   state2.subscribers.clear();
   state2.submitHandlers.clear();
   state2.fieldCache.clear();
   state2.manualErrors = {};
   state2.validationErrors = {};
+  state2.validationGroupErrors = {};
+  state2.validationElementErrors.clear();
+  state2.pendingSubmitCount = 0;
   cleanupFormatRegistry(state2);
 };
 
@@ -557,6 +585,7 @@ var createEmptyFormState = () => ({
   isValid: true,
   isValidated: false,
   autoSubmit: false,
+  isSubmitting: false,
   submitCount: 0
 });
 var cloneErrors = (errors) => Object.fromEntries(
@@ -588,6 +617,7 @@ var createGetState = (state2, helpers) => () => {
     isValid: Object.keys(errors).length === 0,
     isValidated: state2.isValidated,
     autoSubmit: state2.autoSubmitEnabled,
+    isSubmitting: state2.pendingSubmitCount > 0,
     submitCount: state2.submitCount
   };
 };
@@ -785,12 +815,14 @@ var createReset = (state2, helpers) => () => {
   resetFormattedFields(state2);
   state2.manualErrors = {};
   state2.validationErrors = {};
+  state2.validationGroupErrors = {};
+  state2.validationElementErrors.clear();
   clearAttributes(state2.element, [
     state2.attributes.error,
     state2.attributes.filled,
     "aria-invalid"
   ]);
-  if (state2.isValidated) helpers.syncVisualState();
+  helpers.syncVisualState();
   helpers.notifySubscribers();
   return state2.api;
 };
@@ -901,14 +933,29 @@ var valuesAreEqual = (left, right) => {
   }
   return left === right;
 };
-var validateFieldValue = (field, value, rules, values) => {
+var DECIMAL_PATTERN = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)$/;
+var parseStrictNumber = (value) => {
+  if (typeof value !== "string") return void 0;
+  const candidate = value.trim();
+  if (!DECIMAL_PATTERN.test(candidate)) return void 0;
+  const number = Number(candidate);
+  return Number.isFinite(number) ? number : void 0;
+};
+var validateValue = (field, value, rules, values, contextOverrides = {}) => {
   const errors = [];
-  const context = { field, value, values };
+  const context = {
+    field,
+    value,
+    values,
+    ...contextOverrides
+  };
   const required = resolveRule(rules.required);
   const minLength = resolveRule(rules.minLength);
   const maxLength = resolveRule(rules.maxLength);
   const pattern = resolveRule(rules.pattern);
-  const sameAs = resolveRule(rules.sameAs);
+  const numeric = resolveRule(rules.numeric);
+  const min = resolveRule(rules.min);
+  const max = resolveRule(rules.max);
   if (required.value && !hasValue(value)) {
     errors.push(required.message ?? "This field is required.");
   }
@@ -926,10 +973,17 @@ var validateFieldValue = (field, value, rules, values) => {
       errors.push(pattern.message ?? "Value does not match the required pattern.");
     }
   }
-  if (sameAs.value !== void 0) {
-    const otherValue = values[sameAs.value];
-    if (hasValue(value) && hasValue(otherValue) && !valuesAreEqual(value, otherValue)) {
-      errors.push(sameAs.message ?? `Value must match ${sameAs.value}.`);
+  if (hasValue(value) && (numeric.value || min.value !== void 0 || max.value !== void 0)) {
+    const number = parseStrictNumber(value);
+    if (number === void 0) {
+      errors.push(numeric.message ?? "Value must be a number.");
+    } else {
+      if (min.value !== void 0 && number < min.value) {
+        errors.push(min.message ?? `Minimum value is ${min.value}.`);
+      }
+      if (max.value !== void 0 && number > max.value) {
+        errors.push(max.message ?? `Maximum value is ${max.value}.`);
+      }
     }
   }
   const custom = rules.validate ? Array.isArray(rules.validate) ? rules.validate : [rules.validate] : [];
@@ -940,6 +994,37 @@ var validateFieldValue = (field, value, rules, values) => {
   }
   return errors;
 };
+var validateFieldValueDetailed = (field, value, rules, values, items) => {
+  const groupErrors = validateValue(field, value, rules, values);
+  const sameAs = resolveRule(rules.sameAs);
+  if (sameAs.value !== void 0) {
+    const otherValue = values[sameAs.value];
+    if (hasValue(value) && hasValue(otherValue) && !valuesAreEqual(value, otherValue)) {
+      groupErrors.push(sameAs.message ?? `Value must match ${sameAs.value}.`);
+    }
+  }
+  const itemErrors = [];
+  if (rules.each) {
+    const sourceItems = items ?? (Array.isArray(value) ? value.map((entry) => ({
+      value: typeof entry === "string" ? entry : [entry]
+    })) : [{ value }]);
+    sourceItems.forEach((item, index) => {
+      const overrides = {
+        index
+      };
+      if (item.element) overrides.element = item.element;
+      const messages = validateValue(field, item.value, rules.each, values, overrides);
+      if (messages.length === 0) return;
+      const error = {
+        index,
+        messages
+      };
+      if (item.element) error.element = item.element;
+      itemErrors.push(error);
+    });
+  }
+  return { groupErrors, itemErrors };
+};
 
 // src/core/controller.ts
 var DEFAULT_ATTRIBUTES = {
@@ -970,25 +1055,35 @@ var createFormController = (target, options = {}) => {
     fieldCache: /* @__PURE__ */ new Map(),
     manualErrors: {},
     validationErrors: {},
+    validationGroupErrors: {},
+    validationElementErrors: /* @__PURE__ */ new Map(),
     isValidated: Boolean(normalizedOptions.autoValidate),
     autoSubmitEnabled: false,
     autoSubmitDebounce: 0,
     submitCount: 0,
+    pendingSubmitCount: 0,
     autoSubmitTimer: null,
     isDestroyed: false,
     listeners: [],
     mutationObserver: null,
+    cleanups: /* @__PURE__ */ new Set(),
     formattedFields: /* @__PURE__ */ new Map(),
     api: null
   };
   const validationDependents = /* @__PURE__ */ new Map();
   for (const [field, rules] of Object.entries(state2.validators)) {
+    const sources = /* @__PURE__ */ new Set();
     const sameAs = rules.sameAs;
-    if (sameAs === void 0) continue;
-    const source = typeof sameAs === "string" ? sameAs : sameAs.value;
-    const dependents = validationDependents.get(source) ?? /* @__PURE__ */ new Set();
-    dependents.add(field);
-    validationDependents.set(source, dependents);
+    if (sameAs !== void 0) {
+      sources.add(typeof sameAs === "string" ? sameAs : sameAs.value);
+    }
+    if (typeof rules.dependsOn === "string") sources.add(rules.dependsOn);
+    else rules.dependsOn?.forEach((source) => sources.add(source));
+    for (const source of sources) {
+      const dependents = validationDependents.get(source) ?? /* @__PURE__ */ new Set();
+      dependents.add(field);
+      validationDependents.set(source, dependents);
+    }
   }
   const notifySubscribers = () => {
     if (!state2.api) return;
@@ -1037,18 +1132,21 @@ var createFormController = (target, options = {}) => {
   const syncVisualState = (names) => {
     if (!state2.element) return;
     const sourceNames = names ?? getTrackedFieldNames();
-    const errors = getMergedErrors();
     for (const name of sourceNames) {
       const displayName = resolveDisplayNameForName(state2, name);
       const canonical = resolveCanonicalForName(state2, name) ?? name;
       const fields = getFieldsByName(displayName);
-      const hasError = Boolean(errors[canonical]?.length);
-      for (const field of fields) {
+      const hasGroupError = Boolean(
+        state2.validationGroupErrors[canonical]?.length || state2.manualErrors[canonical]?.length
+      );
+      const elementErrors = state2.validationElementErrors.get(canonical);
+      fields.forEach((field) => {
+        const hasError = hasGroupError || Boolean(elementErrors?.get(field)?.length);
         applyBooleanAttribute(field, attributes.filled, isFieldFilled(field));
         applyBooleanAttribute(field, attributes.error, hasError);
         if (hasError) field.setAttribute("aria-invalid", "true");
         else field.removeAttribute("aria-invalid");
-      }
+      });
     }
   };
   void readFieldValue;
@@ -1057,17 +1155,38 @@ var createFormController = (target, options = {}) => {
     const targetNames = names ?? Object.keys(state2.validators);
     const values = getValues();
     const nextValidationErrors = names ? cloneErrors(state2.validationErrors) : {};
+    const nextGroupErrors = names ? cloneErrors(state2.validationGroupErrors) : {};
+    const nextElementErrors = names ? new Map(state2.validationElementErrors) : /* @__PURE__ */ new Map();
     for (const name of targetNames) {
       const rules = state2.validators[name];
       if (!rules) {
         delete nextValidationErrors[name];
+        delete nextGroupErrors[name];
+        nextElementErrors.delete(name);
         continue;
       }
-      const messages = validateFieldValue(name, values[name], rules, values);
+      const fields = getFieldsByName(name);
+      const displayFields = getFieldsByName(resolveDisplayNameForName(state2, name));
+      const items = fields.map((field, index) => ({
+        value: readFieldValue([field]),
+        element: displayFields[index] ?? field
+      }));
+      const result = validateFieldValueDetailed(name, values[name], rules, values, items);
+      const messages = [...result.groupErrors, ...result.itemErrors.flatMap((item) => item.messages)];
       if (messages.length > 0) nextValidationErrors[name] = messages;
       else delete nextValidationErrors[name];
+      if (result.groupErrors.length > 0) nextGroupErrors[name] = result.groupErrors;
+      else delete nextGroupErrors[name];
+      const perElement = /* @__PURE__ */ new Map();
+      result.itemErrors.forEach((item) => {
+        if (item.element) perElement.set(item.element, item.messages);
+      });
+      if (perElement.size > 0) nextElementErrors.set(name, perElement);
+      else nextElementErrors.delete(name);
     }
     state2.validationErrors = nextValidationErrors;
+    state2.validationGroupErrors = nextGroupErrors;
+    state2.validationElementErrors = nextElementErrors;
     syncVisualState(names);
     return {
       isValid: Object.keys(getMergedErrors()).length === 0,
@@ -1161,7 +1280,13 @@ var createFormController = (target, options = {}) => {
     if (!validation.isValid) {
       for (const name of Object.keys(validation.errors)) {
         const displayName = resolveDisplayNameForName(state2, name);
-        const field = getFieldsByName(displayName).find((candidate2) => {
+        const fields = getFieldsByName(displayName);
+        const elementErrors = state2.validationElementErrors.get(name);
+        const field = fields.find((candidate2) => {
+          if (!candidate2.isConnected || candidate2.disabled || candidate2.hidden) return false;
+          if (candidate2 instanceof HTMLInputElement && candidate2.type === "hidden") return false;
+          return elementErrors?.has(candidate2);
+        }) ?? fields.find((candidate2) => {
           if (!candidate2.isConnected || candidate2.disabled || candidate2.hidden) return false;
           return !(candidate2 instanceof HTMLInputElement && candidate2.type === "hidden");
         });
@@ -1176,18 +1301,35 @@ var createFormController = (target, options = {}) => {
     const submitter = candidate.submitter instanceof HTMLElement ? candidate.submitter : null;
     const { data, formData } = parseFormData(state2.element, submitter);
     const snapshot = state2.api.getState();
-    handlers.forEach(
-      (handler) => handler.callback(state2.element, data, formData, snapshot)
-    );
+    const pending = [];
+    let synchronousError;
+    let hasSynchronousError = false;
+    try {
+      for (const handler of handlers) {
+        const result = handler.callback(state2.element, data, formData, snapshot);
+        if (result && typeof result.then === "function") pending.push(Promise.resolve(result));
+      }
+    } catch (error) {
+      synchronousError = error;
+      hasSynchronousError = true;
+    }
+    if (pending.length > 0) {
+      state2.pendingSubmitCount += 1;
+      notifySubscribers();
+      void Promise.allSettled(pending).then(() => {
+        state2.pendingSubmitCount = Math.max(0, state2.pendingSubmitCount - 1);
+        if (!state2.isDestroyed) notifySubscribers();
+      });
+    }
+    if (hasSynchronousError) throw synchronousError;
   };
   const startMutationObserver = () => {
     if (!state2.element || typeof MutationObserver === "undefined") return;
     state2.mutationObserver = new MutationObserver(() => {
       clearFieldCache();
       if (state2.isValidated) {
-        syncVisualState();
         validateNames();
-      }
+      } else syncVisualState();
       notifySubscribers();
     });
     state2.mutationObserver.observe(state2.element, {
@@ -1208,6 +1350,7 @@ var createFormController = (target, options = {}) => {
       return state2.options;
     },
     onSubmit: createOnSubmit(state2, helpers),
+    addCleanup: createAddCleanup(state2, helpers),
     watch: createWatch(state2, helpers),
     observe: createObserve(state2, helpers),
     unwatch: createUnwatch(state2, helpers),
@@ -1245,10 +1388,8 @@ var createFormController = (target, options = {}) => {
       api.format(config);
     }
   }
-  if (state2.isValidated) {
-    syncVisualState();
-    validateNames();
-  }
+  if (state2.isValidated) validateNames();
+  else syncVisualState();
   return api;
 };