@verbb/formie-browser 1.0.3 → 1.0.5

package/src/js/utils/i18n.ts

@@ -79,18 +79,197 @@ export function mergeFormieTranslations(translations: Record<string, string>): R
     return getFormieTranslations();
 }
 
-export function t(message: string, replacements: TranslationReplacements = {}): string {
-    let output = getTranslationStore()[message] || message;
+function parsePluralBranches(body: string): Record<string, string> {
+    const branches: Record<string, string> = {};
+    let index = 0;
+
+    while (index < body.length) {
+        while (index < body.length && /\s/.test(body[index])) {
+            index++;
+        }
+
+        if (index >= body.length) {
+            break;
+        }
+
+        const branchMatch = body.slice(index).match(/^(\w+|=\d+)\{/);
+
+        if (!branchMatch) {
+            break;
+        }
+
+        const key = branchMatch[1];
+        index += branchMatch[0].length;
+
+        let depth = 1;
+        const contentStart = index;
+
+        while (index < body.length && depth > 0) {
+            if (body[index] === '{') {
+                depth++;
+            } else if (body[index] === '}') {
+                depth--;
+            }
+
+            if (depth > 0) {
+                index++;
+            }
+        }
+
+        branches[key] = body.slice(contentStart, index);
+        index++;
+    }
+
+    return branches;
+}
+
+function selectPluralBranch(count: number, branches: Record<string, string>): string {
+    const exactKey = `=${count}`;
+
+    if (Object.prototype.hasOwnProperty.call(branches, exactKey)) {
+        return branches[exactKey];
+    }
+
+    if (typeof Intl !== 'undefined' && typeof Intl.PluralRules === 'function') {
+        const category = new Intl.PluralRules().select(count);
+
+        if (Object.prototype.hasOwnProperty.call(branches, category)) {
+            return branches[category];
+        }
+    }
+
+    if (count === 1 && Object.prototype.hasOwnProperty.call(branches, 'one')) {
+        return branches.one;
+    }
+
+    if (Object.prototype.hasOwnProperty.call(branches, 'other')) {
+        return branches.other;
+    }
+
+    const firstKey = Object.keys(branches)[0];
+
+    return firstKey ? branches[firstKey] : '';
+}
+
+function parsePluralExpression(message: string, startIndex: number): { param: string; body: string; endIndex: number } | null {
+    const headerMatch = message.slice(startIndex).match(/^\{(\w+),\s*plural,\s*/);
+
+    if (!headerMatch) {
+        return null;
+    }
+
+    const param = headerMatch[1];
+    const bodyStart = startIndex + headerMatch[0].length;
+    let index = bodyStart;
+
+    while (index < message.length) {
+        while (index < message.length && /\s/.test(message[index])) {
+            index++;
+        }
+
+        if (index >= message.length || message[index] === '}') {
+            break;
+        }
+
+        const branchMatch = message.slice(index).match(/^(\w+|=\d+)\{/);
 
-    // Keep replacement syntax intentionally small and predictable because these
-    // messages are often shared across PHP-rendered and JS-rendered validation UI.
-    output = output.replace(/{([a-zA-Z0-9]+)}/g, (match, key) => {
+        if (!branchMatch) {
+            return null;
+        }
+
+        index += branchMatch[0].length;
+
+        let depth = 1;
+
+        while (index < message.length && depth > 0) {
+            if (message[index] === '{') {
+                depth++;
+            } else if (message[index] === '}') {
+                depth--;
+            }
+
+            if (depth > 0) {
+                index++;
+            }
+        }
+
+        index++;
+    }
+
+    if (index >= message.length || message[index] !== '}') {
+        return null;
+    }
+
+    return {
+        param,
+        body: message.slice(bodyStart, index),
+        endIndex: index,
+    };
+}
+
+function formatPluralBlocks(message: string, replacements: TranslationReplacements): string {
+    let output = '';
+    let index = 0;
+
+    while (index < message.length) {
+        if (message[index] !== '{') {
+            output += message[index];
+            index++;
+            continue;
+        }
+
+        const parsed = parsePluralExpression(message, index);
+
+        if (!parsed) {
+            output += message[index];
+            index++;
+            continue;
+        }
+
+        const rawValue = replacements[parsed.param];
+        const count = typeof rawValue === 'number'
+            ? rawValue
+            : Number.parseInt(String(rawValue ?? ''), 10) || 0;
+        const branches = parsePluralBranches(parsed.body);
+        let selected = selectPluralBranch(count, branches);
+
+        selected = selected.replace(/#/g, String(count));
+
+        output += selected;
+        index = parsed.endIndex + 1;
+    }
+
+    return output;
+}
+
+function formatNumberBlocks(message: string, replacements: TranslationReplacements): string {
+    return message.replace(/\{(\w+),\s*number\}/g, (match, key) => {
+        if (!Object.prototype.hasOwnProperty.call(replacements, key)) {
+            return match;
+        }
+
+        const value = replacements[key];
+
+        return typeof value === 'number' ? value.toLocaleString() : String(value);
+    });
+}
+
+function replaceSimpleTokens(message: string, replacements: TranslationReplacements): string {
+    return message.replace(/\{(\w+)\}/g, (match, key) => {
         if (Object.prototype.hasOwnProperty.call(replacements, key)) {
             return String(replacements[key]);
         }
 
         return match;
     });
+}
+
+export function t(message: string, replacements: TranslationReplacements = {}): string {
+    let output = getTranslationStore()[message] || message;
+
+    output = formatPluralBlocks(output, replacements);
+    output = formatNumberBlocks(output, replacements);
+    output = replaceSimpleTokens(output, replacements);
 
     return output;
 }

package/src/js/validation/rules/email.ts

@@ -9,9 +9,10 @@ const email: ValidationRuleDefinition = {
         return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.value);
     },
     message: ({ input, label, t }) => {
-        return input.getAttribute('data-formie-pattern-email-message')
+        return input.getAttribute('data-formie-validation-email-message')
+            ?? input.getAttribute('data-formie-pattern-email-message')
             ?? input.getAttribute('data-pattern-email-message')
-            ?? t('{attribute} is not a valid email address.', { attribute: label });
+            ?? t('{label} is not a valid email address.', { label });
     },
 };
 

package/src/js/validation/rules/match.ts

@@ -16,8 +16,8 @@ const match: ValidationRuleDefinition = {
         const sourceField = sourceInput?.closest('[data-formie-field-handle]') as HTMLElement | null;
         const sourceLabel = getLabelText(sourceField);
 
-        return ctx.t('{name} must match {value}.', {
-            name: ctx.label,
+        return ctx.t('{label} must match {value}.', {
+            label: ctx.label,
             value: sourceLabel,
         });
     },

package/src/js/validation/rules/minmax.ts

@@ -29,18 +29,18 @@ const minmax: ValidationRuleDefinition = {
         const max = input.hasAttribute('max') ? parseFloat(input.getAttribute('max') || '') : null;
 
         if (min !== null && max !== null) {
-            return t('{attribute} must be between {min} and {max}.', { attribute: label, min, max });
+            return t('{label} must be between {min} and {max}.', { label, min, max });
         }
 
         if (min !== null) {
-            return t('{attribute} must be no less than {min}.', { attribute: label, min });
+            return t('{label} must be no less than {min}.', { label, min });
         }
 
         if (max !== null) {
-            return t('{attribute} must be no greater than {max}.', { attribute: label, max });
+            return t('{label} must be no greater than {max}.', { label, max });
         }
 
-        return t('{attribute} has an invalid value.', { attribute: label });
+        return t('{label} has an invalid value.', { label });
     },
 };
 

package/src/js/validation/rules/number.ts

@@ -35,20 +35,24 @@ const number: ValidationRuleDefinition = {
         const max = rule !== true && rule && typeof rule === 'object' && typeof rule.max === 'number' ? rule.max : null;
 
         if (min !== null && max !== null) {
-            return t('{attribute} must be between {min} and {max}.', { attribute: label, min, max });
+            return input.getAttribute('data-formie-validation-number-min-message')
+                ?? t('{label} must be between {min} and {max}.', { label, min, max });
         }
 
         if (min !== null) {
-            return t('{attribute} must be no less than {min}.', { attribute: label, min });
+            return input.getAttribute('data-formie-validation-number-min-message')
+                ?? t('{label} must be no less than {min}.', { label, min });
         }
 
         if (max !== null) {
-            return t('{attribute} must be no greater than {max}.', { attribute: label, max });
+            return input.getAttribute('data-formie-validation-number-max-message')
+                ?? t('{label} must be no greater than {max}.', { label, max });
         }
 
-        return input.getAttribute('data-formie-pattern-number-message')
+        return input.getAttribute('data-formie-validation-number-message')
+            ?? input.getAttribute('data-formie-pattern-number-message')
             ?? input.getAttribute('data-pattern-number-message')
-            ?? t('{attribute} is not a valid number.', { attribute: label });
+            ?? t('{label} is not a valid number.', { label });
     },
 };
 

package/src/js/validation/rules/pattern.ts

@@ -13,10 +13,10 @@ const pattern: ValidationRuleDefinition = {
     },
     message: ({ input, label, t }) => {
         const messages = {
-            email: t('{attribute} is not a valid email address.', { attribute: label }),
-            url: t('{attribute} is not a valid URL.', { attribute: label }),
-            number: t('{attribute} is not a valid number.', { attribute: label }),
-            default: t('{attribute} is not a valid format.', { attribute: label }),
+            email: t('{label} is not a valid email address.', { label }),
+            url: t('{label} is not a valid URL.', { label }),
+            number: t('{label} is not a valid number.', { label }),
+            default: t('{label} is not a valid format.', { label }),
         };
 
         return input.getAttribute(`data-formie-pattern-${input.type}-message`)

package/src/js/validation/rules/required.ts

@@ -23,7 +23,7 @@ const required: ValidationRuleDefinition = {
     message: ({ input, label, t }) => {
         return input.getAttribute('data-formie-required-message')
             ?? input.getAttribute('data-required-message')
-            ?? t('{attribute} cannot be blank.', { attribute: label });
+            ?? t('{label} cannot be blank.', { label });
     },
 };
 

package/src/js/validation/rules/url.ts

@@ -16,7 +16,7 @@ const url: ValidationRuleDefinition = {
     message: ({ input, label, t }) => {
         return input.getAttribute('data-formie-pattern-url-message')
             ?? input.getAttribute('data-pattern-url-message')
-            ?? t('{attribute} is not a valid URL.', { attribute: label });
+            ?? t('{label} is not a valid URL.', { label });
     },
 };
 

package/src/js/validation/validator.ts

@@ -1,3 +1,4 @@
+import { ensureFieldErrorContainer } from '#core/field-error-container';
 import { syncPageTabErrors } from '#core/page-tab-errors';
 import rules from '#validation/rules';
 import type {
@@ -320,12 +321,11 @@ export class FormieValidator {
         let errorMessages = fieldContainer.querySelector('[data-formie-field-errors]') as HTMLElement | null;
 
         if (!errorMessages) {
-            errorMessages = document.createElement('div');
-            errorMessages.setAttribute('data-formie-field-errors', 'true');
-            if (this.config.messagesClass.length) {
-                errorMessages.classList.add(...this.config.messagesClass);
-            }
-            fieldContainer.appendChild(errorMessages);
+            errorMessages = ensureFieldErrorContainer(fieldContainer, (container) => {
+                if (this.config.messagesClass.length) {
+                    container.classList.add(...this.config.messagesClass);
+                }
+            });
         }
 
         if (this.config.messagesClass.length) {
@@ -402,7 +402,7 @@ export class FormieValidator {
 
     getErrorMessage(input: ValidationInput, validatorName: string, validator: ValidatorDefinition, opts: ValidationContext): string {
         const errorMessage = typeof validator.errorMessage === 'function' ? validator.errorMessage(opts) : validator.errorMessage;
-        return errorMessage ?? t('{attribute} is invalid.', { attribute: opts.label });
+        return errorMessage ?? t('{label} is invalid.', { label: opts.label });
     }
 
     getErrors(): ValidationError[] {

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

@@ -1,37 +0,0 @@
-import { d as p, g as a } from "./index-BcqwpPNE.js";
-import { l as _ } from "./scripts-D9N2d5rN.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-KudsBCo2.js

@@ -1,26 +0,0 @@
-import { u as c } from "./index-BcqwpPNE.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-DlGSkQ3W.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-BmntPmnW.js";
-import { h as R, i as k, n as U, j as V, r as _ } from "./index-BcqwpPNE.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-CterYFok.js

@@ -1,34 +0,0 @@
-import { a as l, C as n } from "./index-BcqwpPNE.js";
-import { l as s } from "./scripts-D9N2d5rN.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
-};