@samline/forms 2.3.4 → 2.6.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);
@@ -62,6 +62,10 @@ var createAppend = (state2, helpers) => ({ tag, content, class: className, atSta
 // 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;
@@ -272,6 +276,11 @@ var readInputType = (event) => {
   const candidate = event;
   return typeof candidate.inputType === "string" ? candidate.inputType : void 0;
 };
+var buildAutoInterpretedOptions = (formatOptions) => ({
+  ...formatOptions ?? {},
+  interpretInputAs: "auto"
+});
+var shouldForceAutoInterpretation = (formatOptions) => formatOptions?.interpretInputAs === void 0;
 var buildHandler = (visible, mirror, formatFn, formatType, formatOptions) => {
   const handler = (event) => {
     if (!visible.isConnected || !mirror.isConnected) return;
@@ -280,7 +289,8 @@ var buildHandler = (visible, mirror, formatFn, formatType, formatOptions) => {
     if (!isVisible && !isMirror) return;
     const rawInput = isMirror ? mirror.value : visible.value;
     const inputType = readInputType(event);
-    const { formatted, raw } = formatFn(rawInput, formatType, formatOptions);
+    const sourceOptions = isMirror && shouldForceAutoInterpretation(formatOptions) ? buildAutoInterpretedOptions(formatOptions) : formatOptions;
+    const { formatted, raw } = formatFn(rawInput, formatType, sourceOptions);
     if (!formatted && !raw) {
       visible.value = "";
       if (mirror.value !== "") mirror.value = "";
@@ -292,6 +302,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);
@@ -329,6 +345,8 @@ var applyFormat = async (state2, helpers, config) => {
         visible,
         mirror,
         mirrorIsOwned,
+        defaultVisible: null,
+        defaultRaw: null,
         handler: UNBOUND
       };
       bucket.set(fieldName, entry);
@@ -341,6 +359,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;
@@ -365,11 +387,22 @@ var applyFormat = async (state2, helpers, config) => {
     entry.handler = handler;
     const initial = entry.visible.value;
     if (initial !== "") {
-      const { formatted, raw } = formatter.format(initial, formatType, formatOptions);
+      const initialOptions = shouldForceAutoInterpretation(formatOptions) ? buildAutoInterpretedOptions(formatOptions) : formatOptions;
+      const { formatted, raw } = formatter.format(initial, formatType, initialOptions);
       applyFormattedValue(entry.visible, entry.mirror, formatted, raw);
     } 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) => {
@@ -476,19 +509,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) => {
@@ -570,8 +608,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);
@@ -618,6 +656,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;
   }
@@ -667,6 +708,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;
@@ -676,7 +724,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) => {
@@ -735,9 +783,14 @@ 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]);
+  clearAttributes(state2.element, [
+    state2.attributes.error,
+    state2.attributes.filled,
+    "aria-invalid"
+  ]);
   if (state2.isValidated) helpers.syncVisualState();
   helpers.notifySubscribers();
   return state2.api;
@@ -778,8 +831,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;
 };
 
@@ -844,6 +896,12 @@ var toPatternTarget = (value) => {
   }
   return "";
 };
+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 validateFieldValue = (field, value, rules, values) => {
   const errors = [];
   const context = { field, value, values };
@@ -851,6 +909,7 @@ var validateFieldValue = (field, value, rules, values) => {
   const minLength = resolveRule(rules.minLength);
   const maxLength = resolveRule(rules.maxLength);
   const pattern = resolveRule(rules.pattern);
+  const sameAs = resolveRule(rules.sameAs);
   if (required.value && !hasValue(value)) {
     errors.push(required.message ?? "This field is required.");
   }
@@ -860,8 +919,19 @@ 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 (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}.`);
+    }
   }
   const custom = rules.validate ? Array.isArray(rules.validate) ? rules.validate : [rules.validate] : [];
   for (const validator of custom) {
@@ -923,6 +993,15 @@ var createFormController = (target, options = {}) => {
     formattedFields: /* @__PURE__ */ new Map(),
     api: null
   };
+  const validationDependents = /* @__PURE__ */ new Map();
+  for (const [field, rules] of Object.entries(state2.validators)) {
+    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);
+  }
   const notifySubscribers = () => {
     if (!state2.api) return;
     const snapshot = state2.api.getState();
@@ -941,10 +1020,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);
@@ -980,6 +1058,8 @@ var createFormController = (target, options = {}) => {
       for (const field of fields) {
         applyBooleanAttribute(field, attributes.filled, isFieldFilled(field));
         applyBooleanAttribute(field, attributes.error, hasError);
+        if (hasError) field.setAttribute("aria-invalid", "true");
+        else field.removeAttribute("aria-invalid");
       }
     }
   };
@@ -1006,6 +1086,21 @@ var createFormController = (target, options = {}) => {
       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);
@@ -1051,14 +1146,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 = {};
@@ -1068,8 +1170,23 @@ 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 field = getFieldsByName(displayName).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)
@@ -1128,7 +1245,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();
   }
@@ -1158,6 +1275,7 @@ var newForm = (input) => {
     console.error("Form ID is required");
     return;
   }
+  available[id]?.destroy();
   const controller = form(id, { ...options });
   available[id] = controller;
   return controller;