@verbb/formie-browser 1.0.0

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

@@ -0,0 +1,166 @@
+const CONDITION_DISABLED_ATTR = 'data-formie-conditions-disabled';
+const PRESERVED_DISABLED_ATTR = 'data-formie-preserve-disabled';
+const CONDITIONAL_HIDDEN_ATTR = 'data-formie-conditionally-hidden';
+const PAGE_HIDDEN_ATTR = 'data-formie-page-hidden';
+const CONDITIONAL_HIDDEN_CLASS = 'formie-conditionally-hidden';
+const PAGE_HIDDEN_CLASS = 'formie-page-hidden';
+const ROW_HIDDEN_ATTR = 'data-formie-row-hidden';
+const ROW_HIDDEN_CLASS = 'formie-row-hidden';
+const FIELD_COUNT_ATTR = 'data-formie-field-count';
+const ROW_SELECTOR = '[data-formie-row], [data-formie-subfield-row], [data-formie-nested-field-row]';
+const FIELD_SELECTOR = ':scope > [data-formie-field]';
+
+function clearConditionNodeValues(node: Element): void {
+    node.querySelectorAll('input, select, textarea').forEach((element) => {
+        if (!(element instanceof HTMLInputElement) &&
+            !(element instanceof HTMLSelectElement) &&
+            !(element instanceof HTMLTextAreaElement)) {
+            return;
+        }
+
+        if (element instanceof HTMLInputElement) {
+            if (element.type === 'checkbox' || element.type === 'radio') {
+                element.checked = false;
+            } else if (element.type !== 'hidden') {
+                element.value = '';
+            }
+        }
+
+        if (element instanceof HTMLSelectElement) {
+            if (element.multiple) {
+                Array.from(element.options).forEach((option) => {
+                    option.selected = false;
+                });
+            } else {
+                element.selectedIndex = 0;
+            }
+        }
+
+        if (element instanceof HTMLTextAreaElement) {
+            element.value = '';
+        }
+    });
+}
+
+function setVisibilityState(node: Element, hidden: boolean): boolean {
+    const isPage = node.hasAttribute('data-formie-page');
+    const hiddenAttr = isPage ? PAGE_HIDDEN_ATTR : CONDITIONAL_HIDDEN_ATTR;
+    const hiddenClass = isPage ? PAGE_HIDDEN_CLASS : CONDITIONAL_HIDDEN_CLASS;
+    const wasHidden = node.hasAttribute(hiddenAttr);
+
+    if (hidden) {
+        if (!wasHidden) {
+            node.setAttribute(hiddenAttr, 'true');
+        }
+
+        if (!node.classList.contains(hiddenClass)) {
+            node.classList.add(hiddenClass);
+        }
+    } else {
+        if (wasHidden) {
+            node.removeAttribute(hiddenAttr);
+        }
+
+        if (node.classList.contains(hiddenClass)) {
+            node.classList.remove(hiddenClass);
+        }
+    }
+
+    return wasHidden !== hidden;
+}
+
+function syncDisabledState(node: Element, hidden: boolean): void {
+    node.querySelectorAll('input, textarea, select').forEach((input) => {
+        if (hidden) {
+            if (!input.hasAttribute(CONDITION_DISABLED_ATTR)) {
+                if (input.hasAttribute('disabled')) {
+                    input.setAttribute(PRESERVED_DISABLED_ATTR, 'true');
+                }
+
+                input.setAttribute(CONDITION_DISABLED_ATTR, 'true');
+            }
+
+            input.setAttribute('disabled', 'true');
+            return;
+        }
+
+        if (!input.hasAttribute(CONDITION_DISABLED_ATTR)) {
+            return;
+        }
+
+        if (input.hasAttribute(PRESERVED_DISABLED_ATTR)) {
+            input.setAttribute('disabled', 'true');
+            input.removeAttribute(PRESERVED_DISABLED_ATTR);
+        } else {
+            input.removeAttribute('disabled');
+        }
+
+        input.removeAttribute(CONDITION_DISABLED_ATTR);
+    });
+}
+
+function isFieldVisible(field: Element): boolean {
+    return !field.hasAttribute(CONDITIONAL_HIDDEN_ATTR)
+        && !field.hasAttribute(PAGE_HIDDEN_ATTR)
+        && !field.hasAttribute(ROW_HIDDEN_ATTR)
+        && !field.hasAttribute('hidden');
+}
+
+function syncRowState(row: Element): void {
+    const directFields = Array.from(row.querySelectorAll(FIELD_SELECTOR));
+    const visibleFieldCount = directFields.filter((field) => {
+        return isFieldVisible(field);
+    }).length;
+
+    if (visibleFieldCount > 0) {
+        const visibleCount = String(visibleFieldCount);
+
+        if (row.getAttribute(FIELD_COUNT_ATTR) !== visibleCount) {
+            row.setAttribute(FIELD_COUNT_ATTR, visibleCount);
+        }
+
+        if (row.hasAttribute(ROW_HIDDEN_ATTR)) {
+            row.removeAttribute(ROW_HIDDEN_ATTR);
+        }
+
+        if (row.classList.contains(ROW_HIDDEN_CLASS)) {
+            row.classList.remove(ROW_HIDDEN_CLASS);
+        }
+
+        return;
+    }
+
+    if (row.hasAttribute(FIELD_COUNT_ATTR)) {
+        row.removeAttribute(FIELD_COUNT_ATTR);
+    }
+
+    if (!row.hasAttribute(ROW_HIDDEN_ATTR)) {
+        row.setAttribute(ROW_HIDDEN_ATTR, 'true');
+    }
+
+    if (!row.classList.contains(ROW_HIDDEN_CLASS)) {
+        row.classList.add(ROW_HIDDEN_CLASS);
+    }
+}
+
+function syncAncestorRows(node: Element): void {
+    let currentRow = node.closest(ROW_SELECTOR);
+
+    while (currentRow) {
+        syncRowState(currentRow);
+        currentRow = currentRow.parentElement?.closest(ROW_SELECTOR) || null;
+    }
+}
+
+export function applyConditionVisibility(node: Element, hidden: boolean, clearOnHide: boolean): boolean {
+    const stateChanged = setVisibilityState(node, hidden);
+
+    syncDisabledState(node, hidden);
+    syncAncestorRows(node);
+
+    if (hidden && clearOnHide && stateChanged) {
+        clearConditionNodeValues(node);
+    }
+
+    return stateChanged;
+}

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

@@ -0,0 +1,44 @@
+import { evaluateConditionDefinition, finalizeConditionEvaluation } from '@verbb/formie-core';
+
+import type { ConditionDefinition, ParsedConditionSettings, ConditionInput } from '#modules/fields/conditions/types';
+import { resolveConditionSource } from '#modules/fields/conditions/references';
+import { readConditionValues } from '#modules/fields/conditions/values';
+
+function isInputVisible(input: ConditionInput): boolean {
+    if (
+        input.closest('[data-formie-conditionally-hidden]')
+        || input.closest('[data-formie-page-hidden]')
+        || input.closest('[hidden]')
+        || input.closest('[aria-hidden="true"]')
+    ) {
+        return false;
+    }
+
+    return !!(input.offsetWidth || input.offsetHeight || input.getClientRects().length);
+}
+
+function getConditionVisibility(inputs: ConditionInput[]): boolean | null {
+    if (!inputs.length) {
+        return null;
+    }
+
+    return inputs.some((input) => {
+        return isInputVisible(input);
+    });
+}
+
+export function evaluateConditionSettings(
+    settings: ParsedConditionSettings,
+    getConditionInputs: (condition: ConditionDefinition) => Array<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
+): { finalResult: boolean; shouldHide: boolean } {
+    const groupedResults = settings.conditions.map((condition) => {
+        const inputs = getConditionInputs(condition);
+        const source = resolveConditionSource(condition);
+
+        return evaluateConditionDefinition(condition, readConditionValues(inputs, source), {
+            visibility: getConditionVisibility(inputs),
+        });
+    });
+
+    return finalizeConditionEvaluation(settings, groupedResults);
+}

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

@@ -0,0 +1,165 @@
+import { escapeSelectorValue } from '#modules/fields/shared';
+import type { ConditionDefinition, ConditionInput, ConditionSource } from '#modules/fields/conditions/types';
+import { fieldKeyToInputName } from '#utils/field-references';
+
+export const CONDITION_INPUT_SELECTOR = 'input, select, textarea';
+
+const ROW_SCOPE_SELECTOR = '[data-formie-repeater-item], [data-formie-table-row]';
+
+function isConditionInput(element: Element): element is ConditionInput {
+    return element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement;
+}
+
+function getNodeRowToken(node: Element): string | null {
+    const nodeInput = node.querySelector(CONDITION_INPUT_SELECTOR);
+
+    if (!nodeInput) {
+        return null;
+    }
+
+    const name = nodeInput.getAttribute('name') || '';
+    const tokens = Array.from(name.matchAll(/\[(\d+)\]/g));
+
+    if (!tokens.length) {
+        return null;
+    }
+
+    return tokens[tokens.length - 1]?.[1] || null;
+}
+
+function getRowScope(node: Element): Element | null {
+    return node.closest(ROW_SCOPE_SELECTOR);
+}
+
+function getFieldInputs(fieldNode: Element): ConditionInput[] {
+    return Array.from(fieldNode.querySelectorAll(CONDITION_INPUT_SELECTOR)).filter((element): element is ConditionInput => {
+        return isConditionInput(element);
+    });
+}
+
+function getInputNameTokens(input: ConditionInput): string[] {
+    const name = input.getAttribute('name') || '';
+    return Array.from(name.matchAll(/\[([^\]]+)\]/g)).map((match) => {
+        return match[1] || '';
+    }).filter(Boolean);
+}
+
+function matchesSelectorPath(input: ConditionInput, selector: string): boolean {
+    if (!selector) {
+        return true;
+    }
+
+    const selectorTokens = selector.split(/[.:]/).filter(Boolean);
+
+    if (!selectorTokens.length) {
+        return true;
+    }
+
+    const inputTokens = getInputNameTokens(input);
+
+    if (inputTokens.length < selectorTokens.length) {
+        return false;
+    }
+
+    return selectorTokens.every((token, index) => {
+        return inputTokens[inputTokens.length - selectorTokens.length + index] === token;
+    });
+}
+
+function filterInputsBySelector(inputs: ConditionInput[], selector: string): ConditionInput[] {
+    if (!selector) {
+        return inputs;
+    }
+
+    const matchedInputs = inputs.filter((input) => {
+        return matchesSelectorPath(input, selector);
+    });
+
+    return matchedInputs.length ? matchedInputs : inputs;
+}
+
+function preferSameRow<TElement extends Element>(targetNode: Element, candidates: TElement[]): TElement[] {
+    const targetRow = getRowScope(targetNode);
+
+    if (!targetRow) {
+        return candidates;
+    }
+
+    const sameRowCandidates = candidates.filter((candidate) => {
+        return getRowScope(candidate) === targetRow;
+    });
+
+    return sameRowCandidates.length ? sameRowCandidates : candidates;
+}
+
+export function resolveConditionSource(condition: ConditionDefinition): ConditionSource | null {
+    if (condition.source?.target === 'field' && condition.source.handle) {
+        return condition.source;
+    }
+
+    return null;
+}
+
+export function queryConditionInputs(
+    root: Element,
+    targetNode: Element,
+    condition: ConditionDefinition,
+): ConditionInput[] {
+    const source = resolveConditionSource(condition);
+
+    if (!source || source.target !== 'field' || !source.handle) {
+        return [];
+    }
+
+    const escapedFieldHandle = escapeSelectorValue(source.handle);
+    const fieldMatches = Array.from(root.querySelectorAll(`[data-formie-field-handle="${escapedFieldHandle}"]`));
+
+    if (fieldMatches.length) {
+        return preferSameRow(targetNode, fieldMatches).flatMap((fieldNode) => {
+            return filterInputsBySelector(getFieldInputs(fieldNode), source.selector);
+        });
+    }
+
+    const sourceInputName = fieldKeyToInputName(source.handle);
+    const exactName = escapeSelectorValue(sourceInputName);
+    const direct = Array.from(root.querySelectorAll(`[name="${exactName}"]`)).filter((element): element is ConditionInput => {
+        return isConditionInput(element);
+    });
+    const multi = Array.from(root.querySelectorAll(`[name="${exactName}[]"]`)).filter((element): element is ConditionInput => {
+        return isConditionInput(element);
+    });
+
+    if (direct.length || multi.length) {
+        return preferSameRow(targetNode, [...direct, ...multi]);
+    }
+
+    if (!source.handle.includes('__ROW__')) {
+        return [];
+    }
+
+    const rowToken = getNodeRowToken(targetNode);
+
+    if (rowToken) {
+        const rowFieldName = fieldKeyToInputName(source.handle.replace(/__ROW__/g, rowToken));
+        const escapedRowFieldName = escapeSelectorValue(rowFieldName);
+        const rowDirect = Array.from(root.querySelectorAll(`[name="${escapedRowFieldName}"]`)).filter((element): element is ConditionInput => {
+            return isConditionInput(element);
+        });
+        const rowMulti = Array.from(root.querySelectorAll(`[name="${escapedRowFieldName}[]"]`)).filter((element): element is ConditionInput => {
+            return isConditionInput(element);
+        });
+
+        if (rowDirect.length || rowMulti.length) {
+            return [...rowDirect, ...rowMulti];
+        }
+    }
+
+    const regexString = fieldKeyToInputName(source.handle)
+        .replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+        .replace(/__ROW__/g, '\\d+');
+    const regex = new RegExp(regexString);
+
+    return Array.from(root.querySelectorAll('[name]')).filter((element): element is ConditionInput => {
+        return isConditionInput(element) && regex.test(element.getAttribute('name') || '');
+    });
+}

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

@@ -0,0 +1,206 @@
+import type { ConditionSource } from '#modules/fields/conditions/types';
+
+function stringifyValue(value: unknown): string {
+    if (value == null) {
+        return '';
+    }
+
+    return String(value);
+}
+
+function toBoolean(value: unknown): boolean {
+    if (typeof value === 'boolean') {
+        return value;
+    }
+
+    if (typeof value === 'number') {
+        return value !== 0;
+    }
+
+    const normalized = stringifyValue(value).trim().toLowerCase();
+
+    if (!normalized || ['0', 'false', 'no', 'off'].includes(normalized)) {
+        return false;
+    }
+
+    return true;
+}
+
+function toTitleCase(value: string): string {
+    return value.toLowerCase().replace(/\b\w/g, (match) => {
+        return match.toUpperCase();
+    });
+}
+
+function formatNumber(value: number, params: Record<string, string>): string {
+    const decimals = Number.isFinite(Number(params.decimals)) ? Number(params.decimals) : 0;
+    const decimalPoint = params.decimalPoint ?? '.';
+    const thousandsSeparator = params.thousandsSeparator ?? ',';
+    const fixed = value.toFixed(decimals);
+    const [integerPart, decimalPart = ''] = fixed.split('.');
+    const groupedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSeparator);
+
+    if (decimals === 0) {
+        return groupedInteger;
+    }
+
+    return `${groupedInteger}${decimalPoint}${decimalPart}`;
+}
+
+function pad(value: number): string {
+    return String(value).padStart(2, '0');
+}
+
+function formatDate(value: Date, pattern: string): string {
+    const replacements: Array<[string, string]> = [
+        ['Y', String(value.getFullYear())],
+        ['m', pad(value.getMonth() + 1)],
+        ['d', pad(value.getDate())],
+        ['j', String(value.getDate())],
+        ['H', pad(value.getHours())],
+        ['h', pad(((value.getHours() + 11) % 12) + 1)],
+        ['i', pad(value.getMinutes())],
+        ['A', value.getHours() >= 12 ? 'PM' : 'AM'],
+        ['F', value.toLocaleString(undefined, { month: 'long' })],
+    ];
+
+    return replacements.reduce((formatted, [token, replacement]) => {
+        return formatted.replaceAll(token, replacement);
+    }, pattern);
+}
+
+function resolveDateFormatPattern(preset: string): string {
+    switch (preset) {
+        case 'datetimeUs12':
+            return 'm/d/Y h:i A';
+        case 'datetimeEu12':
+            return 'd/m/Y h:i A';
+        case 'datetimeEu24':
+            return 'd/m/Y H:i';
+        case 'datetimeIso24':
+            return 'Y-m-d H:i';
+        case 'dateUs':
+            return 'm/d/Y';
+        case 'dateEu':
+            return 'd/m/Y';
+        case 'isoDate':
+            return 'Y-m-d';
+        case 'dateLong':
+            return 'F j, Y';
+        case 'time12':
+            return 'h:i A';
+        case 'time24':
+            return 'H:i';
+        default:
+            return '';
+    }
+}
+
+function applyTransformer(value: string, source: ConditionSource): string {
+    const transformerId = source.transformerId;
+    const params = source.transformerParams;
+
+    switch (transformerId) {
+        case 'round':
+        case 'floor':
+        case 'ceil': {
+            const number = Number(value);
+
+            if (!Number.isFinite(number)) {
+                return value;
+            }
+
+            if (transformerId === 'round') {
+                return String(Math.round(number));
+            }
+
+            if (transformerId === 'floor') {
+                return String(Math.floor(number));
+            }
+
+            return String(Math.ceil(number));
+        }
+
+        case 'format': {
+            const number = Number(value);
+
+            if (Number.isFinite(number) && value.trim() !== '') {
+                return formatNumber(number, params);
+            }
+
+            const preset = params.preset || '';
+            const pattern = preset === 'custom' ? (params.pattern || '') : resolveDateFormatPattern(preset);
+
+            if (!pattern) {
+                return value;
+            }
+
+            const date = new Date(value);
+
+            if (Number.isNaN(date.getTime())) {
+                return value;
+            }
+
+            return formatDate(date, pattern);
+        }
+
+        case 'lower':
+            return value.toLowerCase();
+
+        case 'upper':
+            return value.toUpperCase();
+
+        case 'title':
+            return toTitleCase(value);
+
+        case 'capitalize':
+            return value ? value.charAt(0).toUpperCase() + value.slice(1) : value;
+
+        case 'replace': {
+            const search = params.search || '';
+
+            if (!search) {
+                return value;
+            }
+
+            return value.split(search).join(params.replace || '');
+        }
+
+        case 'truncate': {
+            const length = Math.max(1, Number.parseInt(params.length || '50', 10) || 50);
+            const suffix = params.suffix || '...';
+
+            if (value.length <= length) {
+                return value;
+            }
+
+            return `${value.slice(0, Math.max(0, length - suffix.length))}${suffix}`;
+        }
+
+        case 'map':
+            return toBoolean(value) ? (params.trueLabel || 'Yes') : (params.falseLabel || 'No');
+
+        default:
+            return value;
+    }
+}
+
+export function applyConditionSource(values: string[], source: ConditionSource | null): string[] {
+    if (!source) {
+        return values;
+    }
+
+    const transformedValues = source.transformerId
+        ? values.map((value) => {
+            return applyTransformer(value, source);
+        })
+        : values;
+
+    if ((transformedValues.length === 0 || transformedValues.every((value) => {
+        return value.trim() === '';
+    })) && source.defaultValue) {
+        return [source.defaultValue];
+    }
+
+    return transformedValues;
+}

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

@@ -0,0 +1,33 @@
+export type ConditionInput = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+
+export type ConditionSource = {
+    raw: string;
+    target: string;
+    handle: string;
+    selector: string;
+    defaultValue: string;
+    transformerId: string;
+    transformerParams: Record<string, string>;
+    isValid: boolean;
+};
+
+export type ConditionDefinition = {
+    field: string;
+    source?: ConditionSource | null;
+    condition: string;
+    value?: unknown;
+};
+
+export type ParsedConditionSettings = {
+    showRule: 'show' | 'hide';
+    conditionRule: 'all' | 'any';
+    clearOnHide: boolean;
+    isNested: boolean;
+    conditions: ConditionDefinition[];
+};
+
+export type ConditionEntry = {
+    node: Element;
+    settings: ParsedConditionSettings;
+    sourceInputs: ConditionInput[];
+};