@samline/forms 2.4.0 → 2.7.0

package/dist/index.cjs

@@ -45,7 +45,7 @@ var createAppend = (state2, helpers) => ({ tag, content, class: className, atSta
   helpers.clearFieldCache();
   if (className) {
     const classSelector = className.trim().split(/\s+/)[0];
-    const existing = classSelector ? state2.element.querySelector(`.${classSelector}`) : null;
+    const existing = classSelector ? state2.element.getElementsByClassName(classSelector)[0] : null;
     existing?.remove();
   }
   const node = document.createElement(tag);
@@ -59,9 +59,29 @@ 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;
+  if (!state2.autoSubmitEnabled && state2.autoSubmitTimer) {
+    clearTimeout(state2.autoSubmitTimer);
+    state2.autoSubmitTimer = null;
+  }
   state2.autoSubmitDebounce = typeof next === "object" && next ? next.debounce ?? 0 : 0;
   helpers.notifySubscribers();
   return state2.api;
@@ -298,6 +318,12 @@ var buildHandler = (visible, mirror, formatFn, formatType, formatOptions) => {
 };
 var applyFormat = async (state2, helpers, config) => {
   if (!state2.element || !state2.api) return;
+  if (Array.isArray(config.field) && config.displayField) {
+    console.error(
+      "[samline/forms] `displayField` can only be used when `field` is a string."
+    );
+    return;
+  }
   const formatType = config.type;
   const formatOptions = config.options;
   const fieldNames = resolveFieldNames(config);
@@ -335,6 +361,8 @@ var applyFormat = async (state2, helpers, config) => {
         visible,
         mirror,
         mirrorIsOwned,
+        defaultVisible: null,
+        defaultRaw: null,
         handler: UNBOUND
       };
       bucket.set(fieldName, entry);
@@ -347,6 +375,10 @@ var applyFormat = async (state2, helpers, config) => {
     }
   }
   const formatter = await loadFormatter();
+  if (state2.isDestroyed) {
+    rollbackPhase1(phase1Entries, bucket, state2.formattedFields);
+    return;
+  }
   if (!formatter) {
     rollbackPhase1(phase1Entries, bucket, state2.formattedFields);
     return;
@@ -377,6 +409,16 @@ var applyFormat = async (state2, helpers, config) => {
     } else if (entry.mirrorIsOwned && entry.mirror.value !== "") {
       entry.mirror.value = "";
     }
+    entry.defaultVisible = entry.visible.value;
+    entry.defaultRaw = entry.mirror.value;
+  }
+};
+var resetFormattedFields = (state2) => {
+  const bucket = registry.get(state2);
+  if (!bucket) return;
+  for (const entry of bucket.values()) {
+    if (entry.defaultVisible !== null) entry.visible.value = entry.defaultVisible;
+    if (entry.defaultRaw !== null) entry.mirror.value = entry.defaultRaw;
   }
 };
 var rollbackPhase1 = (entries, bucket, registry2) => {
@@ -460,12 +502,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);
 };
 
@@ -483,19 +537,24 @@ var createDisableAutoSubmit = (state2, helpers) => () => {
 // src/core/serialize.ts
 var isEmptyFile = (value) => value instanceof File && value.size === 0 && value.name === "";
 var appendValue = (data, key, value) => {
-  const current = data[key];
-  if (current === void 0) {
-    data[key] = value;
+  if (!Object.prototype.hasOwnProperty.call(data, key)) {
+    Object.defineProperty(data, key, {
+      value,
+      writable: true,
+      enumerable: true,
+      configurable: true
+    });
     return;
   }
+  const current = data[key];
   if (Array.isArray(current)) {
     current.push(value);
     return;
   }
   data[key] = [current, value];
 };
-var parseFormData = (formElement) => {
-  const raw = new FormData(formElement);
+var parseFormData = (formElement, submitter) => {
+  const raw = submitter ? new FormData(formElement, submitter) : new FormData(formElement);
   const formData = new FormData();
   const data = {};
   raw.forEach((value, key) => {
@@ -527,6 +586,7 @@ var createEmptyFormState = () => ({
   isValid: true,
   isValidated: false,
   autoSubmit: false,
+  isSubmitting: false,
   submitCount: 0
 });
 var cloneErrors = (errors) => Object.fromEntries(
@@ -558,6 +618,7 @@ var createGetState = (state2, helpers) => () => {
     isValid: Object.keys(errors).length === 0,
     isValidated: state2.isValidated,
     autoSubmit: state2.autoSubmitEnabled,
+    isSubmitting: state2.pendingSubmitCount > 0,
     submitCount: state2.submitCount
   };
 };
@@ -577,8 +638,8 @@ var resolveFormElement = (target) => {
   }
   return null;
 };
-var getNamedFields = (form2) => Array.from(form2.querySelectorAll("input[name], select[name], textarea[name]")).filter(
-  isFormFieldElement
+var getNamedFields = (form2) => Array.from(form2.elements).filter(
+  (element) => isFormFieldElement(element) && Boolean(element.name)
 );
 var queryNamedFields = (form2, name) => getNamedFields(form2).filter((field) => field.name === name);
 var isFieldElement = (value) => isFormFieldElement(value);
@@ -625,6 +686,9 @@ var readFieldValue = (fields) => {
     }
     return fields.map((f) => f.value);
   }
+  if (first instanceof HTMLSelectElement && first.multiple) {
+    return Array.from(first.selectedOptions, (option) => option.value);
+  }
   if (first instanceof HTMLSelectElement || first instanceof HTMLTextAreaElement) {
     return first.value;
   }
@@ -674,6 +738,13 @@ var writeFieldValue = (fields, value) => {
       field.value = normalizedValue;
       continue;
     }
+    if (field instanceof HTMLSelectElement && field.multiple) {
+      const selectedValues = normalizedArray ?? [normalizedValue];
+      for (const option of field.options) {
+        option.selected = selectedValues.includes(option.value);
+      }
+      continue;
+    }
     if (distributeArray && normalizedArray) {
       field.value = normalizedArray[index] ?? "";
       continue;
@@ -683,7 +754,7 @@ var writeFieldValue = (fields, value) => {
 };
 var clearAttributes = (form2, attributes) => {
   for (const attribute of attributes) {
-    form2.querySelectorAll(`[${attribute}]`).forEach((node) => node.removeAttribute(attribute));
+    getNamedFields(form2).forEach((field) => field.removeAttribute(attribute));
   }
 };
 var submitForm = (form2) => {
@@ -742,10 +813,17 @@ var createPrefill = (state2, _helpers) => (fieldName) => {
 var createReset = (state2, helpers) => () => {
   if (!state2.element) return state2.api;
   state2.element.reset();
+  resetFormattedFields(state2);
   state2.manualErrors = {};
   state2.validationErrors = {};
-  clearAttributes(state2.element, [state2.attributes.error, state2.attributes.filled]);
-  if (state2.isValidated) helpers.syncVisualState();
+  state2.validationGroupErrors = {};
+  state2.validationElementErrors.clear();
+  clearAttributes(state2.element, [
+    state2.attributes.error,
+    state2.attributes.filled,
+    "aria-invalid"
+  ]);
+  helpers.syncVisualState();
   helpers.notifySubscribers();
   return state2.api;
 };
@@ -785,8 +863,7 @@ var createSetValue = (state2, helpers) => (name, value) => {
   writeFieldValue(fields, value);
   const firstField = fields[0];
   if (!firstField) return state2.api;
-  const eventType = firstField instanceof HTMLSelectElement || firstField instanceof HTMLInputElement && (firstField.type === "checkbox" || firstField.type === "radio") ? "change" : "input";
-  firstField.dispatchEvent(new Event(eventType, { bubbles: true }));
+  firstField.dispatchEvent(new Event("input", { bubbles: true }));
   return state2.api;
 };
 
@@ -851,13 +928,35 @@ var toPatternTarget = (value) => {
   }
   return "";
 };
-var validateFieldValue = (field, value, rules, values) => {
+var valuesAreEqual = (left, right) => {
+  if (Array.isArray(left) && Array.isArray(right)) {
+    return left.length === right.length && left.every((entry, index) => entry === right[index]);
+  }
+  return left === right;
+};
+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 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.");
   }
@@ -867,8 +966,26 @@ var validateFieldValue = (field, value, rules, values) => {
   if (maxLength.value !== void 0 && getValueLength(value) > maxLength.value) {
     errors.push(maxLength.message ?? `Maximum length is ${maxLength.value}.`);
   }
-  if (pattern.value && hasValue(value) && !pattern.value.test(toPatternTarget(value))) {
-    errors.push(pattern.message ?? "Value does not match the required pattern.");
+  if (pattern.value && hasValue(value)) {
+    pattern.value.lastIndex = 0;
+    const matches = pattern.value.test(toPatternTarget(value));
+    pattern.value.lastIndex = 0;
+    if (!matches) {
+      errors.push(pattern.message ?? "Value does not match the required pattern.");
+    }
+  }
+  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] : [];
   for (const validator of custom) {
@@ -878,6 +995,41 @@ 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 };
+};
+var validateFieldValue = (field, value, rules, values) => {
+  const result = validateFieldValueDetailed(field, value, rules, values);
+  return [...result.groupErrors, ...result.itemErrors.flatMap((item) => item.messages)];
+};
 var validateValues = (values, schema) => {
   const errors = {};
   for (const [field, rules] of Object.entries(schema)) {
@@ -919,17 +1071,36 @@ 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) {
+      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;
     const snapshot = state2.api.getState();
@@ -948,10 +1119,9 @@ var createFormController = (target, options = {}) => {
   const clearFieldCache = () => state2.fieldCache.clear();
   const getFieldsByName = (name) => {
     if (!state2.element) return [];
-    if (!state2.fieldCache.has(name)) {
-      state2.fieldCache.set(name, queryNamedFields(state2.element, name));
-    }
-    return state2.fieldCache.get(name) ?? [];
+    const fields = queryNamedFields(state2.element, name);
+    state2.fieldCache.set(name, fields);
+    return fields;
   };
   const getTrackedFieldNames = () => {
     if (!state2.element) return Object.keys(state2.validators);
@@ -978,16 +1148,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;
@@ -996,23 +1171,59 @@ 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,
       errors: cloneErrors(getMergedErrors())
     };
   };
+  const getAffectedValidationNames = (name) => {
+    const affected = [];
+    const pending = [name];
+    const visited = /* @__PURE__ */ new Set();
+    for (let index = 0; index < pending.length; index += 1) {
+      const current = pending[index];
+      if (visited.has(current)) continue;
+      visited.add(current);
+      affected.push(current);
+      for (const dependent of validationDependents.get(current) ?? []) {
+        if (!visited.has(dependent)) pending.push(dependent);
+      }
+    }
+    return affected;
+  };
   const emitFieldWatchers = (name) => {
     if (!state2.element || !state2.api) return;
     const callbacks = state2.watchedFields.get(name);
@@ -1058,14 +1269,21 @@ var createFormController = (target, options = {}) => {
       delete state2.manualErrors[canonical];
     }
     syncVisualState([displayName]);
-    if (state2.isValidated && state2.validators[canonical]) {
-      validateNames([canonical]);
+    const affectedValidationNames = getAffectedValidationNames(canonical);
+    if (state2.isValidated && affectedValidationNames.some((field) => state2.validators[field] !== void 0)) {
+      validateNames(affectedValidationNames);
     }
     emitFieldWatchers(canonical);
     if (canonical !== name) emitFieldWatchers(name);
     notifySubscribers();
     scheduleAutoSubmit();
   };
+  const handleExternalDelegatedEvent = (event) => {
+    const target2 = event.target;
+    if (!(target2 instanceof Element) || !isFieldElement(target2)) return;
+    if (target2.form !== state2.element || state2.element?.contains(target2)) return;
+    handleDelegatedEvent(event);
+  };
   const handleSubmitEvent = (event) => {
     if (!state2.element || state2.isDestroyed || !state2.api) return;
     if (normalizedOptions.clearErrorsOnSubmit) state2.manualErrors = {};
@@ -1075,21 +1293,59 @@ var createFormController = (target, options = {}) => {
     if (shouldPrevent) event.preventDefault();
     state2.submitCount += 1;
     notifySubscribers();
-    if (!validation.isValid) return;
-    const { data, formData } = state2.api.getData();
+    if (!validation.isValid) {
+      for (const name of Object.keys(validation.errors)) {
+        const displayName = resolveDisplayNameForName(state2, name);
+        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");
+        });
+        if (field) {
+          field.focus();
+          break;
+        }
+      }
+      return;
+    }
+    const candidate = event;
+    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, {
@@ -1110,6 +1366,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),
@@ -1135,7 +1392,7 @@ var createFormController = (target, options = {}) => {
   state2.api = api;
   if (state2.element) {
     addListener2(state2.element, "input", handleDelegatedEvent);
-    addListener2(state2.element, "change", handleDelegatedEvent);
+    addListener2(document, "input", handleExternalDelegatedEvent);
     addListener2(state2.element, "submit", handleSubmitEvent);
     startMutationObserver();
   }
@@ -1147,10 +1404,8 @@ var createFormController = (target, options = {}) => {
       api.format(config);
     }
   }
-  if (state2.isValidated) {
-    syncVisualState();
-    validateNames();
-  }
+  if (state2.isValidated) validateNames();
+  else syncVisualState();
   return api;
 };
 
@@ -1165,6 +1420,7 @@ var newForm = (input) => {
     console.error("Form ID is required");
     return;
   }
+  available[id]?.destroy();
   const controller = form(id, { ...options });
   available[id] = controller;
   return controller;