@verbb/formie-browser 1.0.4 → 1.0.6

package/src/js/submit/pipeline.ts

@@ -250,7 +250,17 @@ export async function runSubmitPipeline(
                 const errors = options.validator.submit(final ? ctx.form : scope, { final });
 
                 if (errors.length > 0) {
-                    errors[0]?.input.focus();
+                    const firstErrorInput = errors[0]?.input;
+
+                    if (firstErrorInput) {
+                        firstErrorInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+                        try {
+                            firstErrorInput.focus({ preventScroll: true });
+                        } catch {
+                            firstErrorInput.focus();
+                        }
+                    }
 
                     return {
                         ok: false,

package/src/js/utils/country-from-ip.ts

@@ -0,0 +1,54 @@
+export type CountryFromIpResponse = {
+    countryCode?: string | null;
+    countryName?: string | null;
+};
+
+const DEFAULT_COUNTRY_FROM_IP_ACTION = 'formie/address/country-from-ip';
+
+let cachedLookup: Promise<CountryFromIpResponse | null> | null = null;
+
+function buildActionUrl(action: string): string {
+    return new URL(action.startsWith('/') ? action : `/actions/${action}`, window.location.origin).toString();
+}
+
+export async function fetchCountryFromIp(
+    action: string = DEFAULT_COUNTRY_FROM_IP_ACTION,
+): Promise<CountryFromIpResponse | null> {
+    if (!cachedLookup) {
+        cachedLookup = (async () => {
+            try {
+                const response = await fetch(buildActionUrl(action), {
+                    headers: {
+                        Accept: 'application/json',
+                    },
+                });
+
+                if (!response.ok) {
+                    return null;
+                }
+
+                const data = await response.json() as CountryFromIpResponse;
+
+                if (!data?.countryCode) {
+                    return null;
+                }
+
+                return data;
+            } catch {
+                return null;
+            }
+        })();
+    }
+
+    return cachedLookup;
+}
+
+export function createGeoIpLookup(
+    action: string = DEFAULT_COUNTRY_FROM_IP_ACTION,
+): (callback: (countryCode: string) => void) => void {
+    return (callback) => {
+        void fetchCountryFromIp(action).then((data) => {
+            callback(data?.countryCode?.toLowerCase() || '');
+        });
+    };
+}

package/src/js/utils/field-references.row-scope.ts

@@ -0,0 +1,303 @@
+import { fieldKeyToInputName, normalizeFieldKey } from '#utils/field-references.keys';
+import { resolveFieldReferenceLive } from '#utils/field-references.resolver';
+import type { FieldValueRegistry, ResolveFieldValueResult } from '#utils/field-references.types';
+
+export type RowScopeParams = {
+    scope?: string;
+    index?: string | number;
+    rows?: string;
+    fieldKind?: string;
+};
+
+const ROW_SCOPE_VALUES = new Set(['first', 'last', 'index', 'all', 'count', 'rows']);
+
+function escapeRegExp(value: string): string {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+export function parseRowsExpression(expression: string, rowCount: number): number[] {
+    const normalized = String(expression || '').trim().toLowerCase();
+
+    if (!normalized || rowCount <= 0) {
+        return [];
+    }
+
+    if (normalized === 'even') {
+        const indices: number[] = [];
+
+        for (let row = 1; row <= rowCount; row++) {
+            if (row % 2 === 0) {
+                indices.push(row - 1);
+            }
+        }
+
+        return indices;
+    }
+
+    if (normalized === 'odd') {
+        const indices: number[] = [];
+
+        for (let row = 1; row <= rowCount; row++) {
+            if (row % 2 === 1) {
+                indices.push(row - 1);
+            }
+        }
+
+        return indices;
+    }
+
+    const everyMatch = normalized.match(/^every:(\d+)$/);
+
+    if (everyMatch) {
+        const step = Math.max(1, Number.parseInt(everyMatch[1] || '1', 10));
+        const indices: number[] = [];
+
+        for (let row = 1; row <= rowCount; row += step) {
+            indices.push(row - 1);
+        }
+
+        return indices;
+    }
+
+    const indices: number[] = [];
+
+    normalized.split(/\s*,\s*/).forEach((segment) => {
+        const trimmed = segment.trim();
+
+        if (!trimmed) {
+            return;
+        }
+
+        const rangeMatch = trimmed.match(/^(\d+)\s*-\s*(\d+)$/);
+
+        if (rangeMatch) {
+            let start = Number.parseInt(rangeMatch[1] || '0', 10);
+            let end = Number.parseInt(rangeMatch[2] || '0', 10);
+
+            if (start > end) {
+                [start, end] = [end, start];
+            }
+
+            for (let row = start; row <= end; row++) {
+                if (row >= 1 && row <= rowCount) {
+                    indices.push(row - 1);
+                }
+            }
+
+            return;
+        }
+
+        const row = Number.parseInt(trimmed, 10);
+
+        if (Number.isFinite(row) && row >= 1 && row <= rowCount) {
+            indices.push(row - 1);
+        }
+    });
+
+    return [...new Set(indices)].sort((left, right) => left - right);
+}
+
+function resolveColumnSelector(sourceKey: string): { fieldKey: string; columnKey: string } {
+    const normalized = normalizeFieldKey(sourceKey);
+    const parts = normalized.split('.').filter(Boolean);
+
+    if (parts.length < 2) {
+        return {
+            fieldKey: normalized,
+            columnKey: parts[parts.length - 1] || '',
+        };
+    }
+
+    if (parts.length >= 3 && /^\d+$/.test(parts[1] || '')) {
+        return {
+            fieldKey: parts[0] || '',
+            columnKey: parts.slice(2).join('.'),
+        };
+    }
+
+    return {
+        fieldKey: parts[0] || '',
+        columnKey: parts.slice(1).join('.'),
+    };
+}
+
+function listColumnCellKeys(fieldKey: string, columnKey: string, registry: FieldValueRegistry): string[] {
+    const pattern = new RegExp(`^${escapeRegExp(fieldKey)}\\.(\\d+)\\.${escapeRegExp(columnKey)}$`);
+
+    return [...registry.keys()]
+        .filter((key) => pattern.test(key))
+        .sort((left, right) => {
+            const leftRow = Number.parseInt(left.split('.')[1] || '0', 10);
+            const rightRow = Number.parseInt(right.split('.')[1] || '0', 10);
+
+            return leftRow - rightRow;
+        });
+}
+
+function readCellValue(key: string, registry: FieldValueRegistry): string | string[] {
+    return resolveFieldReferenceLive(key, registry).value;
+}
+
+export function getRowScopedWatchNames(
+    sourceKey: string,
+    params: RowScopeParams,
+    registry: FieldValueRegistry,
+): Set<string> {
+    const watchNames = new Set<string>();
+    const { fieldKey, columnKey } = resolveColumnSelector(sourceKey);
+    const scope = String(params.scope || '').trim().toLowerCase();
+
+    if (!fieldKey || !columnKey || !ROW_SCOPE_VALUES.has(scope)) {
+        const fallback = fieldKeyToInputName(sourceKey);
+
+        if (fallback) {
+            watchNames.add(fallback);
+            watchNames.add(`${fallback}[]`);
+        }
+
+        return watchNames;
+    }
+
+    const cellKeys = listColumnCellKeys(fieldKey, columnKey, registry);
+
+    cellKeys.forEach((cellKey) => {
+        const entry = registry.get(cellKey);
+
+        if (entry?.names?.length) {
+            entry.names.forEach((name) => {
+                watchNames.add(name);
+            });
+
+            return;
+        }
+
+        const fallback = fieldKeyToInputName(cellKey);
+
+        if (fallback) {
+            watchNames.add(fallback);
+            watchNames.add(`${fallback}[]`);
+        }
+    });
+
+    return watchNames;
+}
+
+export function resolveRowScopedFieldReference(
+    sourceKey: string,
+    params: RowScopeParams,
+    registry: FieldValueRegistry,
+): ResolveFieldValueResult {
+    const scope = String(params.scope || '').trim().toLowerCase();
+
+    if (!scope || !ROW_SCOPE_VALUES.has(scope)) {
+        return resolveFieldReferenceLive(sourceKey, registry);
+    }
+
+    const { fieldKey, columnKey } = resolveColumnSelector(sourceKey);
+
+    if (!fieldKey || !columnKey) {
+        return resolveFieldReferenceLive(sourceKey, registry);
+    }
+
+    const cellKeys = listColumnCellKeys(fieldKey, columnKey, registry);
+    const rowValues = cellKeys.map((cellKey) => readCellValue(cellKey, registry));
+
+    if (scope === 'count') {
+        return {
+            key: `${fieldKey}.${columnKey}`,
+            value: String(cellKeys.length),
+            found: true,
+        };
+    }
+
+    if (scope === 'first') {
+        const key = cellKeys[0] || `${fieldKey}.0.${columnKey}`;
+
+        return {
+            key,
+            value: rowValues[0] ?? '',
+            found: cellKeys.length > 0,
+        };
+    }
+
+    if (scope === 'last') {
+        const key = cellKeys[cellKeys.length - 1] || `${fieldKey}.0.${columnKey}`;
+
+        return {
+            key,
+            value: rowValues[rowValues.length - 1] ?? '',
+            found: cellKeys.length > 0,
+        };
+    }
+
+    if (scope === 'index') {
+        const index = Number.parseInt(String(params.index ?? '0'), 10);
+        const key = `${fieldKey}.${index}.${columnKey}`;
+
+        return resolveFieldReferenceLive(key, registry);
+    }
+
+    if (scope === 'all') {
+        const values = rowValues.flatMap((value) => {
+            if (Array.isArray(value)) {
+                return value;
+            }
+
+            if (value === '') {
+                return [];
+            }
+
+            return [value];
+        });
+
+        return {
+            key: `${fieldKey}.${columnKey}`,
+            value: values,
+            found: values.length > 0,
+        };
+    }
+
+    if (scope === 'rows') {
+        const indices = parseRowsExpression(String(params.rows || ''), cellKeys.length);
+
+        if (indices.length === 0) {
+            return {
+                key: `${fieldKey}.${columnKey}`,
+                value: '',
+                found: false,
+            };
+        }
+
+        if (indices.length === 1) {
+            const key = cellKeys[indices[0]] || `${fieldKey}.${indices[0]}.${columnKey}`;
+
+            return {
+                key,
+                value: rowValues[indices[0]] ?? '',
+                found: true,
+            };
+        }
+
+        const values = indices.flatMap((index) => {
+            const value = rowValues[index];
+
+            if (Array.isArray(value)) {
+                return value;
+            }
+
+            if (value === '') {
+                return [];
+            }
+
+            return [value];
+        });
+
+        return {
+            key: `${fieldKey}.${columnKey}`,
+            value: values,
+            found: values.length > 0,
+        };
+    }
+
+    return resolveFieldReferenceLive(sourceKey, registry);
+}

package/src/js/utils/field-references.ts

@@ -2,6 +2,7 @@ export { normalizeFieldKey, fieldKeyToInputName, inputNameToFieldKey } from '#ut
 export { parseFieldReference } from '#utils/field-references.parser';
 export { buildFieldValueRegistry } from '#utils/field-references.registry';
 export { resolveFieldReferenceLive, resolveFieldReferenceFromFormData } from '#utils/field-references.resolver';
+export { getRowScopedWatchNames, parseRowsExpression, resolveRowScopedFieldReference } from '#utils/field-references.row-scope';
 export type {
     FieldReferenceTransform,
     FieldValueRegistry,

package/src/vendor.d.ts

@@ -94,7 +94,7 @@ declare module 'signature_pad' {
         on(): void;
         removeEventListener(eventName: string, listener: EventListener): void;
         toDataURL(type?: string, encoderOptions?: number): string;
-        fromDataURL(dataUrl: string): void;
+        fromDataURL(dataUrl: string, options?: Record<string, unknown>): Promise<void>;
         isEmpty(): boolean;
     }
 }

package/dist/chunks/address-finder-BU4roxT6.js

@@ -1,37 +0,0 @@
-import { d as p, g as a } from "./index-D6npYxvr.js";
-import { l as _ } from "./scripts-CKTFtxPO.js";
-const f = "FORMIE_ADDRESS_FINDER_SCRIPT", g = p({
-  id: "address-finder",
-  load: async () => _("AddressFinder", {
-    id: f,
-    src: "https://api.addressfinder.io/assets/v3/widget.js",
-    async: !0,
-    defer: !0
-  }),
-  mount: ({ api: t, field: u, services: e, provider: s }) => {
-    const n = e.input.getAutocomplete();
-    if (!n || typeof t > "u" || !t.Widget)
-      throw new Error("AddressFinder API not ready");
-    const i = s.apiKey || "", r = s.countryCode || "au", o = new t.Widget(
-      n,
-      i,
-      r,
-      s.widgetOptions
-    );
-    return o.on("result:select", (l, d) => {
-      d.address_line_2 ? (e.input.setValue("address1", d.address_line_2), e.input.setValue("address2", d.address_line_1)) : (e.input.setValue("address1", d.address_line_1 || ""), e.input.setValue("address2", "")), e.input.setValue("city", d.locality_name || ""), e.input.setValue("zip", d.postcode || ""), e.input.setValue("state", d.state_territory || ""), e.input.setValue("country", r), u.dispatchEvent(
-        new CustomEvent(a("address-finder", "populate"), {
-          bubbles: !0,
-          detail: {
-            addressProvider: "address-finder",
-            fullAddress: l,
-            metaData: d
-          }
-        })
-      );
-    }), o;
-  }
-});
-export {
-  g as addressFinderModule
-};

package/dist/chunks/bpoint-uNg5j6rt.js

@@ -1,26 +0,0 @@
-import { v as c } from "./index-D6npYxvr.js";
-const p = c({
-  id: "bpoint",
-  defaultRequiredInputSuffixes: ["bpointToken"],
-  load: async () => null,
-  onBeforeAuthorize: async ({ field: e, services: t }) => {
-    if ((e.querySelector('input[name$="[bpointToken]"]')?.value || "").trim() !== "")
-      return !0;
-    const o = e.querySelector('[data-bpoint-card="cardholder-name"]')?.value?.trim() || "", r = e.querySelector('[data-bpoint-card="card-number"]')?.value?.replace(/\s+/g, "") || "", u = e.querySelector('[data-bpoint-card="expiry-date"]')?.value || "", a = e.querySelector('[data-bpoint-card="security-code"]')?.value?.trim() || "", n = (u.match(/\d/g) || []).join("").slice(0, 4);
-    if (!r || n.length !== 4 || !a)
-      return t.addError("Please provide valid card details to continue."), !1;
-    const i = {
-      cardholderName: o,
-      cardNumber: r,
-      expiryDate: n,
-      cvn: a
-    };
-    return t.updateInputs("bpointToken", JSON.stringify(i)), !0;
-  },
-  onAfterSubmit: async ({ services: e }) => {
-    e.updateInputs("bpointToken", "");
-  }
-});
-export {
-  p as bpointModule
-};

package/dist/chunks/calculations-C9t6Zop9.js

@@ -1,147 +0,0 @@
-import { j as H, _ as A, $ as D, U as N, F as T } from "./index-BEsfee-D.js";
-import { g as K, d as L } from "./shared--BU5CFoL.js";
-import { h as R, i as k, n as U, j as V, r as _ } from "./index-D6npYxvr.js";
-const S = "input[data-formie-calculation-input]", y = "calculations", g = R("fields", "calculations");
-function j(e, r, t) {
-  const a = k(e), o = {};
-  return r.forEach(([u, i]) => {
-    const d = _(i.sourceKey || "", a);
-    o[u] = N(i, d.value);
-  }), T(o, t.formatting);
-}
-function z(e, r) {
-  const t = k(e), a = /* @__PURE__ */ new Set();
-  return r.forEach(([, o]) => {
-    const u = U(o.sourceKey || ""), i = t.get(u);
-    if (i?.names?.length) {
-      i.names.forEach((f) => {
-        a.add(f);
-      });
-      return;
-    }
-    const d = V(u);
-    d && (a.add(d), a.add(`${d}[]`));
-  }), a;
-}
-function B(e, r, t, a) {
-  const o = H(a), u = A(a), i = /* @__PURE__ */ new Map();
-  let d = null, f = !1, v = !1, h = !1;
-  const p = () => {
-    i.forEach((s, m) => {
-      s.forEach((n, l) => {
-        m.removeEventListener(l, n);
-      });
-    }), i.clear();
-  }, b = (s) => {
-    !s || f || queueMicrotask(() => {
-      f || (t.dispatchEvent(new Event("input", { bubbles: !0 })), t.dispatchEvent(new Event("change", { bubbles: !0 })));
-    });
-  }, w = (s = !1) => {
-    const m = j(e, u, a);
-    g.log("Evaluate requested.", {
-      fieldHandle: r.getAttribute("data-formie-field-handle") || null,
-      isInit: s
-    });
-    const n = {
-      calculations: t,
-      init: s,
-      formula: o,
-      variables: m
-    };
-    if (L(r, y, "before-evaluate", n), !n.formula) {
-      const l = t.value !== "";
-      t.value = "", b(l);
-      return;
-    }
-    try {
-      const l = D(n.formula, n.variables, a), c = {
-        calculations: t,
-        init: s,
-        formula: n.formula,
-        variables: n.variables,
-        result: l
-      };
-      L(r, y, "after-evaluate", c);
-      const E = typeof c.result == "string" || typeof c.result == "number" ? String(c.result) : "", F = t.value !== E;
-      t.value = E, g.log("Evaluate complete.", {
-        fieldHandle: r.getAttribute("data-formie-field-handle") || null,
-        valueChanged: F,
-        nextValue: E
-      }), b(F);
-    } catch (l) {
-      const c = t.value !== "";
-      console.error("[formie] Failed to evaluate calculation.", l), g.warn("Evaluate failed.", {
-        fieldHandle: r.getAttribute("data-formie-field-handle") || null,
-        error: l instanceof Error ? l.message : l
-      }), t.value = "", b(c);
-    }
-  }, M = (s = !1) => {
-    v || f || (v = !0, queueMicrotask(() => {
-      v = !1, w(s);
-    }));
-  }, C = () => {
-    p();
-    const s = z(e, u);
-    if (g.log("Binding variable watchers.", {
-      fieldHandle: r.getAttribute("data-formie-field-handle") || null,
-      watchCount: s.size
-    }), !s.size)
-      return;
-    const m = (n) => {
-      const c = n.target?.name || "";
-      !c || !s.has(c) || (g.log("Source change detected.", {
-        fieldHandle: r.getAttribute("data-formie-field-handle") || null,
-        sourceName: c,
-        eventType: n.type
-      }), M(!1));
-    };
-    ["input", "change"].forEach((n) => {
-      e.addEventListener(n, m);
-      const l = i.get(e) || /* @__PURE__ */ new Map();
-      l.set(n, m), i.set(e, l);
-    });
-  }, q = () => {
-    h || f || (h = !0, queueMicrotask(() => {
-      h = !1, C(), M(!1);
-    }));
-  };
-  return C(), d = new MutationObserver(() => {
-    q();
-  }), d.observe(e, {
-    childList: !0,
-    subtree: !0
-  }), w(!0), () => {
-    f = !0, d?.disconnect(), p();
-  };
-}
-const Q = {
-  id: y,
-  kind: "field",
-  match: (e) => !!e.target.querySelector(S),
-  setup: async (e) => {
-    const r = e.options || {}, t = K(e);
-    g.log("Module setup.", {
-      fieldCount: t.length,
-      formatting: r.formatting || null
-    });
-    const a = t.map((o) => {
-      const u = o.querySelector(S);
-      return u instanceof HTMLInputElement ? B(e.root, o, u, r) : () => {
-      };
-    });
-    return await e.emit("formie:module:calculations:init", {
-      count: a.length
-    }), {
-      destroy: () => {
-        g.log("Module destroy.", {
-          fieldCount: a.length
-        }), a.forEach((o) => {
-          o();
-        }), e.emit("formie:module:calculations:destroy", {});
-      }
-    };
-  }
-};
-export {
-  Q as calculationsModule
-};

package/dist/chunks/captcha-eu-BAPzHNts.js

@@ -1,34 +0,0 @@
-import { a as l, C as n } from "./index-D6npYxvr.js";
-import { l as s } from "./scripts-CKTFtxPO.js";
-async function c(e) {
-  const t = String(e.endPoint || "https://www.captcha.eu").trim().replace(/\/+$/, "");
-  return s("KROT", {
-    id: "FORMIE_CAPTCHA_EU_SCRIPT",
-    src: `${t}/sdk.js`,
-    async: !0,
-    defer: !0,
-    timeoutMs: n
-  });
-}
-const h = l({
-  id: "captcha-eu",
-  defaultPlaceholderSelector: "[data-captcha-eu-placeholder]",
-  defaultTokenFieldNames: ["captcha-eu-token"],
-  load: ({ options: e }) => c(e.provider),
-  mount: ({ api: e, container: t, provider: o, services: a }) => (e.init(), e.setup(String(o.publicKey || "")), e.WidgetV2.render(t), e.on("CPT_OK", (r) => {
-    a.tokens.write(JSON.stringify(r.detail || {}), {
-      container: t
-    }), a.errors.clear();
-  }, t), e.on("CPT_EXPIRED", () => {
-    a.tokens.clear(), a.errors.clear();
-  }, t), t),
-  screen: async ({ placeholder: e, services: t, stageCtx: o }) => {
-    if (!await t.tokens.wait()) {
-      const r = t.errors.getDefaultMessage();
-      t.errors.show(r, e), o.abort(r);
-    }
-  }
-});
-export {
-  h as captchaEuModule
-};