@verbb/formie-browser 1.0.0

package/src/js/modules/fields/calculations.ts

@@ -0,0 +1,273 @@
+import {
+    coerceCalculationVariables,
+    evaluateCalculationExpression,
+    getCalculationFormula,
+    getCalculationVariableEntries,
+    readCalculationVariableValue,
+    type CalculationOptions,
+    type CalculationVariable,
+    type CalculationVariableEntry,
+} from '@verbb/formie-core';
+
+import type { FormieModuleDefinition } from '#contracts/modules';
+import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';
+import { buildFieldValueRegistry, fieldKeyToInputName, normalizeFieldKey, resolveFieldReferenceLive } from '#utils/field-references';
+import { createDebug } from '#utils/debug';
+
+const INPUT_SELECTOR = 'input[data-formie-calculation-input]';
+const MODULE_ID = 'calculations';
+const debug = createDebug('fields', 'calculations');
+
+function resolveVariables(
+    root: Element,
+    variableEntries: CalculationVariableEntry[],
+    options: CalculationOptions,
+): Record<string, unknown> {
+    const registry = buildFieldValueRegistry(root);
+    const variables: Record<string, unknown> = {};
+
+    variableEntries.forEach(([variableKey, variable]) => {
+        const resolved = resolveFieldReferenceLive(variable.sourceKey || '', registry);
+        variables[variableKey] = readCalculationVariableValue(variable, resolved.value);
+    });
+
+    return coerceCalculationVariables(variables, options.formatting);
+}
+
+function getWatchNames(root: Element, variableEntries: CalculationVariableEntry[]): Set<string> {
+    const registry = buildFieldValueRegistry(root);
+    const watchNames = new Set<string>();
+
+    variableEntries.forEach(([, variable]) => {
+        const key = normalizeFieldKey(variable.sourceKey || '');
+        const entry = registry.get(key);
+
+        if (entry?.names?.length) {
+            entry.names.forEach((name) => {
+                watchNames.add(name);
+            });
+
+            return;
+        }
+
+        const fallback = fieldKeyToInputName(key);
+        if (fallback) {
+            watchNames.add(fallback);
+            watchNames.add(`${fallback}[]`);
+        }
+    });
+
+    return watchNames;
+}
+
+function bindCalculationsField(root: Element, field: HTMLElement, input: HTMLInputElement, options: CalculationOptions): () => void {
+    const formula = getCalculationFormula(options);
+    const variableEntries = getCalculationVariableEntries(options);
+    const sourceBindings = new Map<EventTarget, Map<string, EventListener>>();
+    let observer: MutationObserver | null = null;
+    let destroyed = false;
+    let evaluateQueued = false;
+    let rebindQueued = false;
+
+    const cleanupBindings = () => {
+        sourceBindings.forEach((listeners, target: EventTarget) => {
+            listeners.forEach((listener, eventName) => {
+                (target as Element).removeEventListener(eventName, listener);
+            });
+        });
+
+        sourceBindings.clear();
+    };
+
+    const dispatchCalculatedValueChanged = (valueChanged: boolean) => {
+        if (!valueChanged || destroyed) {
+            return;
+        }
+
+        queueMicrotask(() => {
+            if (destroyed) {
+                return;
+            }
+
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+            input.dispatchEvent(new Event('change', { bubbles: true }));
+        });
+    };
+
+    const evaluate = (isInit = false) => {
+        const variables = resolveVariables(root, variableEntries, options);
+        debug.log('Evaluate requested.', {
+            fieldHandle: field.getAttribute('data-formie-field-handle') || null,
+            isInit,
+        });
+        const beforeDetail = {
+            calculations: input,
+            init: isInit,
+            formula,
+            variables,
+        };
+
+        dispatchFieldEvent(field, MODULE_ID, 'before-evaluate', beforeDetail);
+
+        if (!beforeDetail.formula) {
+            const valueChanged = input.value !== '';
+            input.value = '';
+            dispatchCalculatedValueChanged(valueChanged);
+            return;
+        }
+
+        try {
+            const result = evaluateCalculationExpression(beforeDetail.formula, beforeDetail.variables, options);
+
+            const afterDetail = {
+                calculations: input,
+                init: isInit,
+                formula: beforeDetail.formula,
+                variables: beforeDetail.variables,
+                result,
+            };
+
+            dispatchFieldEvent(field, MODULE_ID, 'after-evaluate', afterDetail);
+            const nextValue = typeof afterDetail.result === 'string' || typeof afterDetail.result === 'number'
+                ? String(afterDetail.result)
+                : '';
+            const valueChanged = input.value !== nextValue;
+            input.value = nextValue;
+            debug.log('Evaluate complete.', {
+                fieldHandle: field.getAttribute('data-formie-field-handle') || null,
+                valueChanged,
+                nextValue,
+            });
+            dispatchCalculatedValueChanged(valueChanged);
+        } catch (error) {
+            const valueChanged = input.value !== '';
+            console.error('[formie] Failed to evaluate calculation.', error);
+            debug.warn('Evaluate failed.', {
+                fieldHandle: field.getAttribute('data-formie-field-handle') || null,
+                error: error instanceof Error ? error.message : error,
+            });
+            input.value = '';
+            dispatchCalculatedValueChanged(valueChanged);
+        }
+    };
+
+    const scheduleEvaluate = (isInit = false) => {
+        if (evaluateQueued || destroyed) {
+            return;
+        }
+
+        evaluateQueued = true;
+
+        queueMicrotask(() => {
+            evaluateQueued = false;
+            evaluate(isInit);
+        });
+    };
+
+    const bindSources = () => {
+        cleanupBindings();
+        const watchNames = getWatchNames(root, variableEntries);
+        debug.log('Binding variable watchers.', {
+            fieldHandle: field.getAttribute('data-formie-field-handle') || null,
+            watchCount: watchNames.size,
+        });
+
+        if (!watchNames.size) {
+            return;
+        }
+
+        const listener: EventListener = (event) => {
+            const target = event.target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null;
+            const name = target?.name || '';
+
+            if (!name || !watchNames.has(name)) {
+                return;
+            }
+
+            debug.log('Source change detected.', {
+                fieldHandle: field.getAttribute('data-formie-field-handle') || null,
+                sourceName: name,
+                eventType: event.type,
+            });
+            scheduleEvaluate(false);
+        };
+
+        ['input', 'change'].forEach((eventName) => {
+            root.addEventListener(eventName, listener);
+            const listeners = sourceBindings.get(root) || new Map<string, EventListener>();
+            listeners.set(eventName, listener);
+            sourceBindings.set(root, listeners);
+        });
+    };
+
+    const scheduleRebind = () => {
+        if (rebindQueued || destroyed) {
+            return;
+        }
+
+        rebindQueued = true;
+
+        queueMicrotask(() => {
+            rebindQueued = false;
+            bindSources();
+            scheduleEvaluate(false);
+        });
+    };
+
+    bindSources();
+    observer = new MutationObserver(() => {
+        scheduleRebind();
+    });
+    observer.observe(root, {
+        childList: true,
+        subtree: true,
+    });
+    evaluate(true);
+
+    return () => {
+        destroyed = true;
+        observer?.disconnect();
+        cleanupBindings();
+    };
+}
+
+export const calculationsModule: FormieModuleDefinition = {
+    id: MODULE_ID,
+    kind: 'field',
+    match: (ctx) => {
+        return !!ctx.target.querySelector(INPUT_SELECTOR);
+    },
+    setup: async(ctx) => {
+        const options = (ctx.options || {}) as CalculationOptions;
+        const fields = getModuleFieldContainers(ctx);
+        debug.log('Module setup.', {
+            fieldCount: fields.length,
+            formatting: options.formatting || null,
+        });
+        const cleanups = fields.map((field) => {
+            const input = field.querySelector(INPUT_SELECTOR);
+            if (!(input instanceof HTMLInputElement)) {
+                return () => {};
+            }
+
+            return bindCalculationsField(ctx.root, field, input, options);
+        });
+
+        await ctx.emit('formie:module:calculations:init', {
+            count: cleanups.length,
+        });
+
+        return {
+            destroy: () => {
+                debug.log('Module destroy.', {
+                    fieldCount: cleanups.length,
+                });
+                cleanups.forEach((cleanup) => {
+                    cleanup();
+                });
+
+                void ctx.emit('formie:module:calculations:destroy', {});
+            },
+        };
+    },
+};

package/src/js/modules/fields/checkbox-radio.ts

@@ -0,0 +1,295 @@
+import type { FormieModuleDefinition } from '#contracts/modules';
+import { dispatchFieldEvent, escapeSelectorValue, releaseFormValidators, retainFormValidators } from '#modules/fields/shared';
+import { createDebug } from '#utils/debug';
+
+const FIELD_SELECTOR = '[data-formie-checkboxes-field-layout], [data-formie-radio-field-layout]';
+const CHECKBOX_MINMAX_VALIDATOR = 'minmaxOptions';
+const MAX_DISABLED_ATTR = 'data-formie-checkbox-radio-max-disabled';
+const MODULE_ID = 'checkbox-radio';
+const VALIDATOR_SCOPE = 'checkbox-radio';
+const debug = createDebug('fields', 'checkbox-radio');
+
+function isToggleCheckbox(input: HTMLInputElement): boolean {
+    return input.hasAttribute('data-checkbox-toggle') || input.hasAttribute('data-formie-checkbox-toggle');
+}
+
+function getMinMaxRule(getRule: (rule: string) => unknown): { min: number | null; max: number | null } {
+    const rule = getRule(CHECKBOX_MINMAX_VALIDATOR);
+
+    if (!rule || rule === true || typeof rule !== 'object') {
+        return {
+            min: null,
+            max: null,
+        };
+    }
+
+    const candidate = rule as Record<string, unknown>;
+
+    return {
+        min: typeof candidate.min === 'number' ? candidate.min : null,
+        max: typeof candidate.max === 'number' ? candidate.max : null,
+    };
+}
+
+function registerValidators(form: HTMLFormElement | null): void {
+    // Several checkbox/radio module instances can exist in one form, but the
+    // custom validator should only be registered once per form lifecycle.
+    retainFormValidators(form, VALIDATOR_SCOPE, (validator) => {
+        validator.addValidator(
+            CHECKBOX_MINMAX_VALIDATOR,
+        ({ field, getRule }) => {
+            if (!field || !getRule(CHECKBOX_MINMAX_VALIDATOR)) {
+                return true;
+            }
+
+            const inputs = Array.from(field.querySelectorAll('input[type="checkbox"]')).filter((input): input is HTMLInputElement => {
+                return input instanceof HTMLInputElement && !isToggleCheckbox(input);
+            });
+            const selected = inputs.filter((input) => {
+                return input.checked;
+            }).length;
+            const { min, max } = getMinMaxRule(getRule);
+
+            if (min !== null && selected < min) {
+                return false;
+            }
+
+            if (max !== null && selected > max) {
+                return false;
+            }
+
+            return true;
+        },
+        ({ field, label, t, getRule }) => {
+            const { min, max } = field ? getMinMaxRule(getRule) : { min: null, max: null };
+
+            if (min !== null && max !== null) {
+                return t('{attribute} must select between {min} and {max}.', { attribute: label, min, max });
+            }
+
+            if (min !== null) {
+                return t('{attribute} must select no less than {min}.', { attribute: label, min });
+            }
+
+            if (max !== null) {
+                return t('{attribute} must select no greater than {max}.', { attribute: label, max });
+            }
+
+            return t('{attribute} has an invalid value.', { attribute: label });
+        },
+    );
+    });
+}
+
+function unregisterValidators(form: HTMLFormElement | null): void {
+    releaseFormValidators(form, VALIDATOR_SCOPE, [CHECKBOX_MINMAX_VALIDATOR]);
+}
+
+function syncCheckedAttribute(input: HTMLInputElement): void {
+    if (input.checked) {
+        input.setAttribute('checked', '');
+    } else {
+        input.removeAttribute('checked');
+    }
+}
+
+function syncRequiredCheckboxes(field: HTMLElement): void {
+    const requiredCheckboxes = Array.from(field.querySelectorAll('input[type="checkbox"][required][data-formie-checkbox-input]')).filter((input): input is HTMLInputElement => {
+        return input instanceof HTMLInputElement;
+    });
+
+    if (!requiredCheckboxes.length) {
+        return;
+    }
+
+    const hasCheckedValue = requiredCheckboxes.some((input) => {
+        return input.checked;
+    });
+
+    // Native required checkbox behavior is per-input, while Formie treats the
+    // field as one logical group. Toggle `required` to preserve that contract.
+    requiredCheckboxes.forEach((input) => {
+        if (hasCheckedValue) {
+            input.removeAttribute('required');
+            input.setAttribute('aria-required', 'false');
+            return;
+        }
+
+        input.setAttribute('required', 'true');
+        input.setAttribute('aria-required', 'true');
+    });
+}
+
+function enforceMaxOptions(field: HTMLElement): void {
+    const maxOptions = parseInt(field.closest('[data-formie-field-handle]')?.getAttribute('data-formie-max-options') || '', 10);
+
+    if (!(maxOptions > 0)) {
+        return;
+    }
+
+    const checkboxes = Array.from(field.querySelectorAll('input[type="checkbox"]')).filter((input): input is HTMLInputElement => {
+        return input instanceof HTMLInputElement && !isToggleCheckbox(input);
+    });
+
+    const checked = checkboxes.filter((input) => {
+        return input.checked;
+    });
+    const disableUnchecked = checked.length >= maxOptions;
+
+    // Disable only the unchecked options once the max is reached so the user can
+    // still back out of a choice without getting trapped in a disabled state.
+    checkboxes.forEach((input) => {
+        const shouldDisableForMax = disableUnchecked && !input.checked;
+        const wasDisabledForMax = input.hasAttribute(MAX_DISABLED_ATTR);
+
+        if (shouldDisableForMax) {
+            if (!input.disabled) {
+                input.disabled = true;
+                input.setAttribute(MAX_DISABLED_ATTR, 'true');
+            }
+
+            return;
+        }
+
+        if (wasDisabledForMax) {
+            input.disabled = false;
+            input.removeAttribute(MAX_DISABLED_ATTR);
+        }
+    });
+}
+
+function toggleCheckboxGroup(field: HTMLElement, toggle: HTMLInputElement): void {
+    const checkboxes = Array.from(field.querySelectorAll('input[type="checkbox"]')).filter((input): input is HTMLInputElement => {
+        return input instanceof HTMLInputElement && input !== toggle && !isToggleCheckbox(input);
+    });
+
+    checkboxes.forEach((input) => {
+        if (input.disabled && !input.checked) {
+            return;
+        }
+
+        // Re-emit change/input so downstream modules (conditions, calculations,
+        // validation) react exactly as if the user toggled each box manually.
+        input.checked = toggle.checked;
+        syncCheckedAttribute(input);
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+}
+
+function syncRadioGroup(input: HTMLInputElement, field: HTMLElement): void {
+    if (!input.checked || !input.name) {
+        syncCheckedAttribute(input);
+        return;
+    }
+
+    const group = Array.from(field.querySelectorAll(`input[type="radio"][name="${escapeSelectorValue(input.name)}"]`)).filter((radio): radio is HTMLInputElement => {
+        return radio instanceof HTMLInputElement;
+    });
+
+    group.forEach((radio) => {
+        syncCheckedAttribute(radio);
+    });
+}
+
+function bindField(field: HTMLElement): () => void {
+    const inputs = Array.from(field.querySelectorAll('input[type="checkbox"], input[type="radio"]')).filter((input): input is HTMLInputElement => {
+        return input instanceof HTMLInputElement;
+    });
+
+    if (!inputs.length) {
+        debug.log('No checkbox/radio inputs found for field.');
+        return () => {};
+    }
+
+    const listeners = inputs.map((input) => {
+        const eventName = input.type === 'radio' ? 'change' : 'click';
+        const handler = () => {
+            syncCheckedAttribute(input);
+
+            if (input.type === 'checkbox' && isToggleCheckbox(input)) {
+                toggleCheckboxGroup(field, input);
+            }
+
+            if (input.type === 'radio') {
+                syncRadioGroup(input, field);
+            }
+
+            syncRequiredCheckboxes(field);
+            enforceMaxOptions(field);
+            debug.log('Input interaction processed.', {
+                inputName: input.name,
+                inputType: input.type,
+                checked: input.checked,
+            });
+        };
+
+        input.addEventListener(eventName, handler);
+        syncCheckedAttribute(input);
+
+        return () => {
+            input.removeEventListener(eventName, handler);
+        };
+    });
+
+    syncRequiredCheckboxes(field);
+    enforceMaxOptions(field);
+    dispatchFieldEvent(field, MODULE_ID, 'init', {
+        checkboxRadio: field,
+    });
+
+    return () => {
+        listeners.forEach((unbind) => {
+            unbind();
+        });
+    };
+}
+
+export const checkboxRadioModule: FormieModuleDefinition = {
+    id: MODULE_ID,
+    kind: 'field',
+    match: (ctx) => {
+        return ctx.target instanceof HTMLElement && (
+            ctx.target.matches(FIELD_SELECTOR) ||
+            !!ctx.target.querySelector(FIELD_SELECTOR)
+        );
+    },
+    setup: async(ctx) => {
+        if (!(ctx.target instanceof HTMLElement)) {
+            return;
+        }
+
+        const fields = ctx.target.matches(FIELD_SELECTOR)
+            ? [ctx.target]
+            : Array.from(ctx.target.querySelectorAll(FIELD_SELECTOR)).filter((field): field is HTMLElement => {
+                return field instanceof HTMLElement;
+            });
+
+        registerValidators(ctx.form);
+        debug.log('Module setup.', {
+            fieldCount: fields.length,
+        });
+
+        const destroyBindings = fields.map((field) => {
+            return bindField(field);
+        });
+
+        await ctx.emit('formie:module:checkbox-radio:init', {
+            count: fields.length,
+        });
+
+        return {
+            destroy: () => {
+                destroyBindings.forEach((destroyBinding) => {
+                    destroyBinding();
+                });
+
+                unregisterValidators(ctx.form);
+                debug.log('Module destroy.', {
+                    fieldCount: fields.length,
+                });
+                void ctx.emit('formie:module:checkbox-radio:destroy', {});
+            },
+        };
+    },
+};

package/src/js/modules/fields/conditions/config.ts

@@ -0,0 +1,79 @@
+import type { ParsedConditionSettings, ConditionDefinition, ConditionSource } from '#modules/fields/conditions/types';
+
+export const CONDITION_SELECTOR = '[data-formie-conditions]';
+
+function parseConditionSource(value: unknown): ConditionSource | null {
+    if (!value || typeof value !== 'object') {
+        return null;
+    }
+
+    const candidate = value as Record<string, unknown>;
+    const transformerParams = candidate.transformerParams;
+
+    return {
+        raw: typeof candidate.raw === 'string' ? candidate.raw : '',
+        target: typeof candidate.target === 'string' ? candidate.target : '',
+        handle: typeof candidate.handle === 'string' ? candidate.handle : '',
+        selector: typeof candidate.selector === 'string' ? candidate.selector : '',
+        defaultValue: typeof candidate.defaultValue === 'string' ? candidate.defaultValue : '',
+        transformerId: typeof candidate.transformerId === 'string' ? candidate.transformerId : '',
+        transformerParams: transformerParams && typeof transformerParams === 'object'
+            ? Object.fromEntries(Object.entries(transformerParams as Record<string, unknown>).map(([key, item]) => {
+                return [key, String(item ?? '')];
+            }))
+            : {},
+        isValid: candidate.isValid !== false,
+    };
+}
+
+export function getConditionNodes(root: Element): Element[] {
+    const nodes = Array.from(root.querySelectorAll(CONDITION_SELECTOR));
+
+    if (root.matches(CONDITION_SELECTOR)) {
+        return [root, ...nodes];
+    }
+
+    return nodes;
+}
+
+export function parseConditionSettings(node: Element): ParsedConditionSettings | null {
+    const raw = node.getAttribute('data-formie-conditions');
+
+    if (!raw) {
+        return null;
+    }
+
+    try {
+        const parsed = JSON.parse(raw) as Record<string, unknown>;
+        const conditions = Array.isArray(parsed.conditions)
+            ? parsed.conditions.filter((condition): condition is ConditionDefinition => {
+                if (!condition || typeof condition !== 'object') {
+                    return false;
+                }
+
+                const candidate = condition as Record<string, unknown>;
+                return typeof candidate.field === 'string' && typeof candidate.condition === 'string';
+            }).map((condition) => {
+                const candidate = condition as Record<string, unknown>;
+
+                return {
+                    field: condition.field,
+                    source: parseConditionSource(candidate.source),
+                    condition: condition.condition,
+                    value: condition.value,
+                };
+            })
+            : [];
+
+        return {
+            showRule: parsed.showRule === 'hide' ? 'hide' : 'show',
+            conditionRule: parsed.conditionRule === 'any' ? 'any' : 'all',
+            clearOnHide: parsed.clearOnHide !== false,
+            isNested: Boolean(parsed.isNested),
+            conditions,
+        };
+    } catch (error) {
+        console.error('[formie] Invalid condition JSON.', error);
+        return null;
+    }
+}