@samline/forms 2.2.3 → 2.3.0

package/dist/index.cjs

@@ -91,33 +91,45 @@ var cssEscape = (value) => {
   }
   return value.replace(/([!"#$%&'()*+,./:;<=>?@\[\\\]^`{|}~])/g, "\\$1");
 };
-var findRawMirror = (form2, fieldName) => {
+var findVisibleField = (form2, displayName) => {
+  const node = form2.querySelector(
+    `[name="${cssEscape(displayName)}"]:not([type="hidden"])`
+  );
+  if (node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement) {
+    return node;
+  }
+  return null;
+};
+var findHiddenMirror = (form2, fieldName) => {
   const byAttr = form2.querySelector(
     `[${FORMATTER_RAW_ATTRIBUTE}="${cssEscape(fieldName)}"]`
   );
   if (byAttr) return byAttr;
   const byName = form2.querySelector(
-    `[name="${cssEscape(`${fieldName}_raw`)}"]`
+    `input[type="hidden"][name="${cssEscape(fieldName)}"]`
   );
   if (byName) return byName;
-  const byNameOld = form2.querySelector(
-    `[name="${cssEscape(`${fieldName}Raw`)}"]`
-  );
-  if (byNameOld) return byNameOld;
   return null;
 };
-var ensureRawMirror = (form2, fieldName) => {
-  const existing = findRawMirror(form2, fieldName);
+var ensureHiddenMirror = (form2, fieldName) => {
+  const existing = findHiddenMirror(form2, fieldName);
   if (existing) return existing;
   const input = document.createElement("input");
   input.type = "hidden";
-  input.name = `${fieldName}_raw`;
+  input.name = fieldName;
   input.setAttribute("aria-hidden", "true");
   input.tabIndex = -1;
   input.setAttribute(FORMATTER_RAW_ATTRIBUTE, fieldName);
   form2.appendChild(input);
   return input;
 };
+var renameVisibleField = (visible, displayName) => {
+  if (visible.name === displayName) return;
+  visible.name = displayName;
+};
+var restoreVisibleName = (visible, originalName) => {
+  visible.name = originalName;
+};
 var applyFormattedValue = (visible, mirror, formatted, raw, inputType) => {
   const rawInput = visible.value;
   const caret = clamp(
@@ -235,6 +247,7 @@ var loadFormatter = () => {
 };
 
 // src/api/format.ts
+var UNBOUND = null;
 var registry = /* @__PURE__ */ new WeakMap();
 var getRegistry = (state2) => {
   let bucket = registry.get(state2);
@@ -245,97 +258,126 @@ var getRegistry = (state2) => {
   return bucket;
 };
 var resolveFieldNames = (config) => Array.isArray(config.field) ? config.field : [config.field];
-var addListener = (state2, target, type, handler) => {
-  target.addEventListener(type, handler);
-  state2.listeners.push({ element: target, type, handler });
+var addListener = (state2, target, type, handler, useCapture) => {
+  if (useCapture) {
+    target.addEventListener(type, handler, { capture: true });
+  } else {
+    target.addEventListener(type, handler);
+  }
+  const entry = { element: target, type, handler };
+  if (useCapture !== void 0) entry.capture = useCapture;
+  state2.listeners.push(entry);
 };
-var buildHandler = (field, mirror, formatFn, formatType, formatOptions, mirrorFieldName) => {
+var readInputType = (event) => {
+  const candidate = event;
+  return typeof candidate.inputType === "string" ? candidate.inputType : void 0;
+};
+var buildHandler = (visible, mirror, formatFn, formatType, formatOptions) => {
   const handler = (event) => {
-    if (!field.isConnected) return;
-    if (event.target !== field) return;
-    const rawInput = event.target.value;
+    if (!visible.isConnected || !mirror.isConnected) return;
+    const isVisible = event.target === visible;
+    const isMirror = event.target === mirror;
+    if (!isVisible && !isMirror) return;
+    const rawInput = isMirror ? mirror.value : visible.value;
     const inputType = readInputType(event);
     const { formatted, raw } = formatFn(rawInput, formatType, formatOptions);
     if (!formatted && !raw) {
-      field.value = "";
-      if (mirror && mirror.value !== "") mirror.value = "";
+      visible.value = "";
+      if (mirror.value !== "") mirror.value = "";
       return;
     }
-    applyFormattedValue(field, mirror, formatted, raw, inputType);
-    void mirrorFieldName;
+    applyFormattedValue(visible, mirror, formatted, raw, inputType);
   };
   return handler;
 };
-var readInputType = (event) => {
-  const candidate = event;
-  return typeof candidate.inputType === "string" ? candidate.inputType : void 0;
-};
 var applyFormat = async (state2, helpers, config) => {
   if (!state2.element || !state2.api) return;
-  const formatter = await loadFormatter();
-  if (!formatter) return;
   const formatType = config.type;
   const formatOptions = config.options;
   const fieldNames = resolveFieldNames(config);
   const bucket = getRegistry(state2);
   for (const fieldName of fieldNames) {
-    const fields = helpers.getFieldsByName(fieldName);
-    if (fields.length === 0) continue;
-    const writable = fields.filter(
-      (f) => f instanceof HTMLInputElement && f.type !== "checkbox" && f.type !== "radio" && f.type !== "file" && f.type !== "submit" && f.type !== "button" || f instanceof HTMLTextAreaElement
+    const displayName = config.displayField ?? `${fieldName}_displayed`;
+    const canonicalFields = helpers.getFieldsByName(fieldName);
+    const candidates = canonicalFields.filter(
+      (f) => f instanceof HTMLInputElement && f.type !== "hidden" || f instanceof HTMLTextAreaElement
     );
-    if (writable.length === 0) continue;
-    for (const field of writable) {
-      const existing = bucket.get(fieldName);
-      const mirrorName = config.rawField ?? `${fieldName}_raw`;
-      let mirror = findRawMirror(state2.element, fieldName) ?? null;
-      const mirrorIsOwned = !mirror;
-      if (!mirror) mirror = ensureRawMirror(state2.element, fieldName);
-      if (mirror && mirror.name !== mirrorName) mirror.name = mirrorName;
-      const trackerMirrorName = mirror?.name ?? mirrorName;
-      if (existing) {
-        existing.mirrorName = trackerMirrorName;
-        existing.mirrorIsOwned = mirrorIsOwned;
-        state2.formattedFields.set(fieldName, {
-          config,
-          mirrorName: trackerMirrorName,
-          mirrorIsOwned
-        });
-        const current = field.value;
-        if (current !== "") {
-          const { formatted, raw } = formatter.format(current, formatType, formatOptions);
-          applyFormattedValue(field, mirror, formatted, raw);
-        }
-        continue;
-      }
-      const handler = buildHandler(
-        field,
-        mirror,
-        formatter.format,
-        formatType,
-        formatOptions,
-        trackerMirrorName
-      );
-      addListener(state2, state2.element, "input", handler);
-      bucket.set(fieldName, {
-        fields: /* @__PURE__ */ new Set([field]),
-        mirrorName: trackerMirrorName,
-        handler,
+    let visible = candidates[0] ?? null;
+    if (!visible) {
+      visible = findVisibleField(state2.element, displayName);
+    }
+    if (!visible) continue;
+    const existing = bucket.get(fieldName);
+    let mirror = findHiddenMirror(state2.element, fieldName);
+    const mirrorIsOwned = !mirror;
+    if (!mirror) mirror = ensureHiddenMirror(state2.element, fieldName);
+    renameVisibleField(visible, displayName);
+    if (existing) {
+      existing.displayName = displayName;
+      existing.mirrorIsOwned = mirrorIsOwned;
+      state2.formattedFields.set(fieldName, {
+        config,
+        displayName,
         mirrorIsOwned
       });
+    } else {
+      bucket.set(fieldName, {
+        canonicalName: fieldName,
+        displayName,
+        visible,
+        mirror,
+        mirrorIsOwned,
+        handler: UNBOUND
+      });
       state2.formattedFields.set(fieldName, {
         config,
-        mirrorName: trackerMirrorName,
+        displayName,
         mirrorIsOwned
       });
-      const initial = field.value;
-      if (initial !== "") {
-        const { formatted, raw } = formatter.format(initial, formatType, formatOptions);
-        applyFormattedValue(field, mirror, formatted, raw);
-      } else if (mirrorIsOwned && mirror && mirror.value !== "") {
-        mirror.value = "";
+    }
+  }
+  const formatter = await loadFormatter();
+  if (!formatter) {
+    rollbackPhase1(bucket, state2.formattedFields);
+    return;
+  }
+  for (const [, entry] of bucket) {
+    if (entry.handler !== UNBOUND) {
+      const current = entry.visible.value;
+      if (current !== "") {
+        const { formatted, raw } = formatter.format(current, formatType, formatOptions);
+        applyFormattedValue(entry.visible, entry.mirror, formatted, raw);
       }
+      continue;
+    }
+    const handler = buildHandler(
+      entry.visible,
+      entry.mirror,
+      formatter.format,
+      formatType,
+      formatOptions
+    );
+    addListener(state2, state2.element, "input", handler, true);
+    entry.handler = handler;
+    const initial = entry.visible.value;
+    if (initial !== "") {
+      const { formatted, raw } = formatter.format(initial, formatType, formatOptions);
+      applyFormattedValue(entry.visible, entry.mirror, formatted, raw);
+    } else if (entry.mirrorIsOwned && entry.mirror.value !== "") {
+      entry.mirror.value = "";
+    }
+  }
+};
+var rollbackPhase1 = (bucket, registry2) => {
+  for (const [fieldName, entry] of bucket) {
+    if (entry.visible.isConnected) {
+      restoreVisibleName(entry.visible, fieldName);
     }
+    if (entry.mirrorIsOwned && entry.mirror.isConnected) {
+      entry.mirror.remove();
+    }
+    bucket.delete(fieldName);
+    registry2.delete(fieldName);
   }
 };
 var createFormat = (state2, helpers) => (config) => {
@@ -345,6 +387,14 @@ var createFormat = (state2, helpers) => (config) => {
   return state2.api;
 };
 var createFormatAll = createFormat;
+var resolveCanonicalForName = (state2, name) => {
+  const bucket = registry.get(state2);
+  if (!bucket) return null;
+  for (const [canonical, entry] of bucket) {
+    if (canonical === name || entry.displayName === name) return canonical;
+  }
+  return null;
+};
 var cleanupFormatRegistry = (state2) => {
   if (!state2.element) {
     registry.delete(state2);
@@ -356,10 +406,14 @@ var cleanupFormatRegistry = (state2) => {
     return;
   }
   for (const [fieldName, entry] of bucket) {
-    state2.element.removeEventListener("input", entry.handler);
-    if (entry.mirrorIsOwned) {
-      const mirror = findRawMirror(state2.element, entry.mirrorName);
-      mirror?.remove();
+    if (entry.handler !== UNBOUND) {
+      state2.element.removeEventListener("input", entry.handler, true);
+    }
+    if (entry.visible.isConnected) {
+      restoreVisibleName(entry.visible, fieldName);
+    }
+    if (entry.mirrorIsOwned && entry.mirror.isConnected) {
+      entry.mirror.remove();
     }
     bucket.delete(fieldName);
     state2.formattedFields.delete(fieldName);
@@ -372,7 +426,12 @@ var createDestroy = (state2, _helpers) => () => {
   if (state2.isDestroyed) return;
   state2.isDestroyed = true;
   for (const listener of state2.listeners) {
-    listener.element.removeEventListener(listener.type, listener.handler);
+    const options = listener.capture ? { capture: true } : void 0;
+    if (options) {
+      listener.element.removeEventListener(listener.type, listener.handler, options);
+    } else {
+      listener.element.removeEventListener(listener.type, listener.handler);
+    }
   }
   state2.listeners.length = 0;
   if (state2.autoSubmitTimer) {
@@ -820,9 +879,15 @@ var createFormController = (target, options = {}) => {
     const snapshot = state2.api.getState();
     state2.subscribers.forEach((listener) => listener(snapshot));
   };
-  const addListener2 = (node, type, handler) => {
-    node.addEventListener(type, handler);
-    state2.listeners.push({ element: node, type, handler });
+  const addListener2 = (node, type, handler, capture) => {
+    if (capture) {
+      node.addEventListener(type, handler, { capture: true });
+    } else {
+      node.addEventListener(type, handler);
+    }
+    const entry = { element: node, type, handler };
+    if (capture !== void 0) entry.capture = capture;
+    state2.listeners.push(entry);
   };
   const clearFieldCache = () => state2.fieldCache.clear();
   const getFieldsByName = (name) => {
@@ -838,6 +903,12 @@ var createFormController = (target, options = {}) => {
     for (const field of getNamedFields(state2.element)) {
       names.add(field.name);
     }
+    for (const [canonical, entry] of state2.formattedFields) {
+      names.add(canonical);
+      if (entry.displayName && entry.displayName !== canonical) {
+        names.add(entry.displayName);
+      }
+    }
     return Array.from(names);
   };
   const getValues = () => {
@@ -923,14 +994,16 @@ var createFormController = (target, options = {}) => {
     const name = target2.name;
     if (!name) return;
     clearFieldCache();
+    const canonical = resolveCanonicalForName(state2, name) ?? name;
     if (normalizedOptions.clearManualErrorsOnChange) {
-      delete state2.manualErrors[name];
+      delete state2.manualErrors[canonical];
     }
-    syncVisualState([name]);
-    if (state2.isValidated && state2.validators[name]) {
-      validateNames([name]);
+    syncVisualState([canonical]);
+    if (state2.isValidated && state2.validators[canonical]) {
+      validateNames([canonical]);
     }
-    emitFieldWatchers(name);
+    emitFieldWatchers(canonical);
+    if (canonical !== name) emitFieldWatchers(name);
     notifySubscribers();
     scheduleAutoSubmit();
   };