@verbb/formie-browser 1.0.0

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

@@ -0,0 +1,115 @@
+import { applyConditionSource } from '#modules/fields/conditions/transforms';
+import type { ConditionInput, ConditionSource } from '#modules/fields/conditions/types';
+
+function getInputKey(input: ConditionInput, index: number): string {
+    return input.name || `__condition_input_${index}`;
+}
+
+function getInputLabel(input: HTMLInputElement): string {
+    const explicitLabel = input.id
+        ? input.ownerDocument.querySelector(`label[for="${input.id}"]`)?.textContent?.trim()
+        : '';
+
+    if (explicitLabel) {
+        return explicitLabel;
+    }
+
+    return input.closest('label')?.textContent?.trim() || '';
+}
+
+function readInputGroupValues(inputs: ConditionInput[], selector = ''): string[] {
+    const firstInput = inputs[0];
+
+    if (!firstInput) {
+        return [];
+    }
+
+    if (firstInput instanceof HTMLInputElement) {
+        if (firstInput.type === 'checkbox') {
+            const checkedInputs = inputs.filter((input): input is HTMLInputElement => {
+                return input instanceof HTMLInputElement && input.checked;
+            });
+
+            if (selector === 'label') {
+                return checkedInputs.map((input) => {
+                    return getInputLabel(input);
+                }).filter(Boolean);
+            }
+
+            return checkedInputs.map((input) => {
+                return input.value;
+            });
+        }
+
+        if (firstInput.type === 'radio') {
+            const checkedInputs = inputs.filter((input): input is HTMLInputElement => {
+                return input instanceof HTMLInputElement && input.checked;
+            });
+
+            if (selector === 'label') {
+                return checkedInputs.map((input) => {
+                    return getInputLabel(input);
+                }).filter(Boolean);
+            }
+
+            return checkedInputs.map((input) => {
+                return input.value;
+            });
+        }
+
+        if (firstInput.type === 'file') {
+            return Array.from(firstInput.files || []).map((file) => {
+                return file.name;
+            });
+        }
+    }
+
+    if (firstInput instanceof HTMLSelectElement && firstInput.multiple) {
+        if (selector === 'label') {
+            return Array.from(firstInput.selectedOptions).map((option) => {
+                return option.label || option.text;
+            });
+        }
+
+        return Array.from(firstInput.selectedOptions).map((option) => {
+            return option.value;
+        });
+    }
+
+    if (firstInput instanceof HTMLSelectElement && selector === 'label') {
+        return Array.from(firstInput.selectedOptions).map((option) => {
+            return option.label || option.text;
+        });
+    }
+
+    return inputs.map((input) => {
+        return input.value;
+    });
+}
+
+export function getConditionInputEventNames(_input: ConditionInput): string[] {
+    return ['input', 'change'];
+}
+
+export function readConditionValues(inputs: ConditionInput[], source: ConditionSource | null = null): string[] {
+    const groupedInputs = new Map<string, ConditionInput[]>();
+
+    inputs.forEach((input, index) => {
+        const key = getInputKey(input, index);
+        const existing = groupedInputs.get(key) || [];
+        existing.push(input);
+        groupedInputs.set(key, existing);
+    });
+
+    const rawValues = Array.from(groupedInputs.values()).flatMap((group) => {
+        return readInputGroupValues(group, source?.selector || '');
+    });
+
+    return applyConditionSource(rawValues, source);
+}
+
+export function isConditionValueEmpty(values: string[]): boolean {
+    return values.length === 0 || values.every((value) => {
+        return value.trim() === '';
+    });
+}

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

@@ -0,0 +1,229 @@
+import type { FormieModuleDefinition } from '#contracts/modules';
+import { CONDITION_SELECTOR, getConditionNodes, parseConditionSettings } from '#modules/fields/conditions/config';
+import { applyConditionVisibility } from '#modules/fields/conditions/effects';
+import { evaluateConditionSettings } from '#modules/fields/conditions/evaluator';
+import { queryConditionInputs } from '#modules/fields/conditions/references';
+import type { ConditionEntry, ConditionInput } from '#modules/fields/conditions/types';
+import { getConditionInputEventNames } from '#modules/fields/conditions/values';
+import { createDebug } from '#utils/debug';
+
+const MAX_EVALUATION_PASSES = 4;
+const debug = createDebug('conditions');
+
+function uniqueConditionInputs(inputs: ConditionInput[]): ConditionInput[] {
+    const seenInputs = new Set<ConditionInput>();
+
+    return inputs.filter((input) => {
+        if (seenInputs.has(input)) {
+            return false;
+        }
+
+        seenInputs.add(input);
+        return true;
+    });
+}
+
+export const conditionsModule: FormieModuleDefinition = {
+    id: 'conditions',
+    kind: 'field',
+    match: (ctx) => {
+        return ctx.target instanceof HTMLElement && (
+            ctx.target.matches(CONDITION_SELECTOR) ||
+            !!ctx.target.querySelector(CONDITION_SELECTOR)
+        );
+    },
+    setup: async(ctx) => {
+        const scopeRoot = ctx.target instanceof HTMLElement ? ctx.target : ctx.root;
+
+        if (!getConditionNodes(scopeRoot).length) {
+            debug.log('No condition nodes in scope.');
+            return;
+        }
+
+        const sourceUnbinds: Array<() => void> = [];
+        let entries: ConditionEntry[] = [];
+        let evaluationQueued = false;
+        let rebuildQueued = false;
+
+        const cleanupSourceBindings = (): void => {
+            sourceUnbinds.forEach((unbind) => {
+                unbind();
+            });
+            sourceUnbinds.length = 0;
+        };
+
+        const buildEntries = (): ConditionEntry[] => {
+            return getConditionNodes(scopeRoot).flatMap((node) => {
+                const settings = parseConditionSettings(node);
+
+                if (!settings || !settings.conditions.length) {
+                    return [];
+                }
+
+                const sourceInputs = uniqueConditionInputs(settings.conditions.flatMap((condition) => {
+                    return queryConditionInputs(scopeRoot, node, condition);
+                }));
+
+                return [{
+                    node,
+                    settings,
+                    sourceInputs,
+                }];
+            });
+        };
+
+        const runEvaluationPass = (): boolean => {
+            let hasStateChanges = false;
+
+            entries.forEach((entry) => {
+                const result = evaluateConditionSettings(entry.settings, (condition) => {
+                    return queryConditionInputs(scopeRoot, entry.node, condition);
+                });
+
+                const stateChanged = applyConditionVisibility(entry.node, result.shouldHide, entry.settings.clearOnHide);
+                hasStateChanges = hasStateChanges || stateChanged;
+                debug.log('Condition evaluated.', {
+                    shouldHide: result.shouldHide,
+                    finalResult: result.finalResult,
+                    stateChanged,
+                });
+
+                void ctx.emit('formie:conditions:evaluated', {
+                    node: entry.node,
+                    shouldHide: result.shouldHide,
+                    finalResult: result.finalResult,
+                    clearOnHide: entry.settings.clearOnHide,
+                });
+            });
+
+            return hasStateChanges;
+        };
+
+        const evaluateAll = (): void => {
+            for (let pass = 0; pass < MAX_EVALUATION_PASSES; pass += 1) {
+                if (!runEvaluationPass()) {
+                    break;
+                }
+
+                if (pass === MAX_EVALUATION_PASSES - 1) {
+                    debug.warn('Reached max evaluation passes.', { maxPasses: MAX_EVALUATION_PASSES });
+                }
+            }
+        };
+
+        const scheduleEvaluateAll = (): void => {
+            if (evaluationQueued) {
+                return;
+            }
+
+            evaluationQueued = true;
+
+            queueMicrotask(() => {
+                evaluationQueued = false;
+                evaluateAll();
+            });
+        };
+
+        const bindSourceInputs = (): void => {
+            uniqueConditionInputs(entries.flatMap((entry) => {
+                return entry.sourceInputs;
+            })).forEach((input) => {
+                const handler = () => {
+                    scheduleEvaluateAll();
+                };
+
+                getConditionInputEventNames(input).forEach((eventName) => {
+                    input.addEventListener(eventName, handler);
+                });
+
+                sourceUnbinds.push(() => {
+                    getConditionInputEventNames(input).forEach((eventName) => {
+                        input.removeEventListener(eventName, handler);
+                    });
+                });
+            });
+
+            if (ctx.form) {
+                const resetHandler = () => {
+                    window.setTimeout(() => {
+                        scheduleEvaluateAll();
+                    }, 0);
+                };
+
+                ctx.form.addEventListener('reset', resetHandler);
+                sourceUnbinds.push(() => {
+                    ctx.form?.removeEventListener('reset', resetHandler);
+                });
+            }
+        };
+
+        const rebuild = (): void => {
+            cleanupSourceBindings();
+            entries = buildEntries();
+            bindSourceInputs();
+            debug.log('Rebuilt condition graph.', {
+                entryCount: entries.length,
+            });
+            scheduleEvaluateAll();
+        };
+
+        const scheduleRebuild = (): void => {
+            if (rebuildQueued) {
+                return;
+            }
+
+            rebuildQueued = true;
+
+            queueMicrotask(() => {
+                rebuildQueued = false;
+                rebuild();
+            });
+        };
+
+        const observer = new MutationObserver((mutations) => {
+            const shouldRebuild = mutations.some((mutation) => {
+                return mutation.type === 'childList' && (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0);
+            });
+            const shouldEvaluate = mutations.some((mutation) => {
+                return mutation.type === 'attributes';
+            });
+
+            if (shouldRebuild) {
+                scheduleRebuild();
+            } else if (shouldEvaluate) {
+                scheduleEvaluateAll();
+            }
+        });
+
+        observer.observe(scopeRoot, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: [
+                'class',
+                'style',
+                'hidden',
+                'aria-hidden',
+                'data-formie-conditionally-hidden',
+                'data-formie-page-hidden',
+                'data-formie-row-hidden',
+            ],
+        });
+
+        rebuild();
+
+        await ctx.emit('formie:module:conditions:init', {
+            count: entries.length,
+        });
+        debug.log('Module setup complete.', { entryCount: entries.length });
+
+        return {
+            destroy: () => {
+                cleanupSourceBindings();
+                observer.disconnect();
+                debug.log('Module destroy.');
+                void ctx.emit('formie:module:conditions:destroy', {});
+            },
+        };
+    },
+};

package/src/js/modules/fields/date-picker.ts

@@ -0,0 +1,272 @@
+import flatpickr from 'flatpickr';
+import * as flatpickrLocales from 'flatpickr/dist/l10n/index.js';
+import flatpickrCss from 'flatpickr/dist/flatpickr.css?inline';
+
+import type { FormieModuleDefinition } from '#contracts/modules';
+import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';
+import { ensureModuleStyles } from '#modules/styles';
+import { createDebug } from '#utils/debug';
+
+const INPUT_SELECTOR = 'input[data-formie-date-datepicker-input]';
+const MODULE_ID = 'date-picker';
+const debug = createDebug('fields', 'date-picker');
+
+ensureModuleStyles(MODULE_ID, [flatpickrCss]);
+
+type DatePickerOptions = {
+    datePickerOptions?: Array<{ label?: string; value?: unknown }>;
+    dateFormat?: string;
+    timeFormat?: string;
+    getIsDate?: boolean;
+    getIsTime?: boolean;
+    getIsDateTime?: boolean;
+    locale?: string;
+    minDate?: string | null;
+    maxDate?: string | null;
+    availableDaysOfWeek?: string[] | number[] | '*';
+};
+
+type FlatpickrInstanceLike = {
+    destroy: () => void;
+};
+
+type FlatpickrInput = HTMLInputElement & {
+    _formieFlatpickr?: FlatpickrInstanceLike;
+};
+
+function attributesPlugin() {
+    return (instance: { input: HTMLInputElement; altInput?: HTMLInputElement | undefined; loadedPlugins: string[] }) => {
+        return {
+            onReady: () => {
+                if (!instance.altInput) {
+                    return;
+                }
+
+                // Flatpickr's alt input becomes the visible control, so copy the
+                // original accessibility/data attributes onto it before removing
+                // them from the hidden transport input.
+                const excludedAttributes = new Set(['type', 'name', 'value']);
+                instance.input.getAttributeNames().forEach((attribute) => {
+                    if (excludedAttributes.has(attribute)) {
+                        return;
+                    }
+
+                    const value = instance.input.getAttribute(attribute);
+                    if (value !== null) {
+                        instance.altInput?.setAttribute(attribute, value);
+                    }
+
+                    instance.input.removeAttribute(attribute);
+                });
+
+                instance.loadedPlugins.push('formie-attributes');
+            },
+        };
+    };
+}
+
+function normalizeOffsetDate(input: string | null | undefined, type: 'min' | 'max'): Date | null {
+    if (!input) {
+        return null;
+    }
+
+    if (!Number.isNaN(Date.parse(input))) {
+        return new Date(input);
+    }
+
+    // Form config may express relative min/max bounds like "+2 weeks", which are
+    // resolved at runtime against the visitor's current date.
+    const match = input.trim().match(/^([+-]?\d+)\s*(day|days|week|weeks|month|months|year|years)$/i);
+    if (!match) {
+        return null;
+    }
+
+    const amount = parseInt(match[1] || '0', 10);
+    const unit = (match[2] || '').toLowerCase();
+    const date = new Date();
+
+    switch (unit) {
+        case 'day':
+        case 'days':
+            date.setDate(date.getDate() + amount);
+            break;
+        case 'week':
+        case 'weeks':
+            date.setDate(date.getDate() + (amount * 7));
+            break;
+        case 'month':
+        case 'months':
+            date.setMonth(date.getMonth() + amount);
+            break;
+        case 'year':
+        case 'years':
+            date.setFullYear(date.getFullYear() + amount);
+            break;
+        default:
+            return null;
+    }
+
+    if (type === 'min') {
+        date.setHours(0, 0, 0, 0);
+    } else {
+        date.setHours(23, 59, 59, 999);
+    }
+
+    return date;
+}
+
+function prepareFormat(options: DatePickerOptions): string {
+    const format = options.getIsDate
+        ? (options.dateFormat || '')
+        : options.getIsTime
+            ? (options.timeFormat || '')
+            : `${options.dateFormat || ''} ${options.timeFormat || ''}`.trim();
+
+    // Translate Formie/PHP-ish format tokens into the subset flatpickr expects.
+    return format
+        .replaceAll('A', 'K')
+        .replaceAll('a', 'K')
+        .replaceAll('s', 'S')
+        .replaceAll('g', 'h')
+        .replaceAll('h', 'G');
+}
+
+function getLocale(locale: string | undefined): unknown {
+    if (!locale || locale === 'en') {
+        return 'en';
+    }
+
+    const localeMap = flatpickrLocales as Record<string, unknown>;
+    return localeMap[locale] ?? localeMap.default ?? 'en';
+}
+
+function getDisabledWeekdayHandler(availableDaysOfWeek: DatePickerOptions['availableDaysOfWeek']) {
+    if (!availableDaysOfWeek || availableDaysOfWeek === '*') {
+        return undefined;
+    }
+
+    const allowedDays = availableDaysOfWeek.map((value) => {
+        return Number(value);
+    });
+
+    return (date: Date) => {
+        return !allowedDays.includes(date.getDay());
+    };
+}
+
+function getCustomOptions(options: DatePickerOptions): Record<string, unknown> {
+    const result: Record<string, unknown> = {};
+
+    (options.datePickerOptions || []).forEach((entry) => {
+        if (!entry.label) {
+            return;
+        }
+
+        result[entry.label] = entry.value;
+    });
+
+    return result;
+}
+
+function initDatePicker(input: FlatpickrInput, options: DatePickerOptions): () => void {
+    input._formieFlatpickr?.destroy();
+
+    const defaultOptions: Record<string, unknown> = {
+        disableMobile: true,
+        allowInput: true,
+        altInput: true,
+        altFormat: prepareFormat(options),
+        dateFormat: 'Y-m-d H:i:S',
+        hourIncrement: 1,
+        minuteIncrement: 1,
+        minDate: normalizeOffsetDate(options.minDate, 'min'),
+        maxDate: normalizeOffsetDate(options.maxDate, 'max'),
+        plugins: [attributesPlugin()],
+        locale: getLocale(options.locale),
+        onChange: (_selectedDates: unknown, _dateStr: string, instance: { input: HTMLInputElement; altInput?: HTMLInputElement }) => {
+            // Mirror changes back through bubbling input events so validation,
+            // conditions, and calculations respond to picker-driven updates.
+            instance.input.dispatchEvent(new Event('input', { bubbles: true }));
+            instance.altInput?.dispatchEvent(new Event('input', { bubbles: true }));
+        },
+    };
+
+    const disableWeekdays = getDisabledWeekdayHandler(options.availableDaysOfWeek);
+    if (disableWeekdays) {
+        defaultOptions.disable = [disableWeekdays];
+    }
+
+    if (options.getIsTime || options.getIsDateTime) {
+        defaultOptions.enableTime = true;
+    }
+
+    if (options.getIsTime) {
+        defaultOptions.noCalendar = true;
+    }
+
+    const mergedOptions = {
+        ...defaultOptions,
+        ...getCustomOptions(options),
+    };
+
+    dispatchFieldEvent(input, MODULE_ID, 'before-init', {
+        datepicker: input,
+        options: mergedOptions,
+    });
+
+    const instance = flatpickr(input, mergedOptions) as FlatpickrInstanceLike;
+    input._formieFlatpickr = instance;
+    debug.log('Initialized.', {
+        inputName: input.name,
+    });
+
+    dispatchFieldEvent(input, MODULE_ID, 'after-init', {
+        datepicker: instance,
+        options: mergedOptions,
+    });
+
+    return () => {
+        instance.destroy();
+        delete input._formieFlatpickr;
+        debug.log('Destroyed.', {
+            inputName: input.name,
+        });
+    };
+}
+
+export const datePickerModule: FormieModuleDefinition = {
+    id: MODULE_ID,
+    kind: 'field',
+    match: (ctx) => {
+        return !!ctx.target.querySelector(INPUT_SELECTOR);
+    },
+    setup: async (ctx) => {
+        const options = (ctx.options || {}) as DatePickerOptions;
+        const fields = getModuleFieldContainers(ctx);
+        const cleanups = fields.map((field) => {
+            const input = field.querySelector(INPUT_SELECTOR);
+            if (!(input instanceof HTMLInputElement)) {
+                debug.warn('Field missing date input; skipping.');
+                return () => { };
+            }
+
+            return initDatePicker(input as FlatpickrInput, options);
+        });
+        debug.log('Module setup.', { fieldCount: fields.length });
+
+        await ctx.emit('formie:module:date-picker:init', {
+            count: cleanups.length,
+        });
+
+        return {
+            destroy: () => {
+                cleanups.forEach((cleanup) => {
+                    cleanup();
+                });
+
+                debug.log('Module destroy.', { fieldCount: fields.length });
+                void ctx.emit('formie:module:date-picker:destroy', {});
+            },
+        };
+    },
+};