@verbb/formie-browser 1.0.3 → 1.0.5

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

@@ -12,9 +12,21 @@ import {
 import type { FormieModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';
 import { buildFieldValueRegistry, fieldKeyToInputName, normalizeFieldKey, resolveFieldReferenceLive } from '#utils/field-references';
+import { getRowScopedWatchNames, resolveRowScopedFieldReference, type RowScopeParams } from '#utils/field-references.row-scope';
 import { createDebug } from '#utils/debug';
 
 const INPUT_SELECTOR = 'input[data-formie-calculation-input]';
+
+function getRowScopeParams(variable: CalculationVariable): RowScopeParams {
+    const scoped = variable as CalculationVariable & RowScopeParams;
+
+    return {
+        scope: scoped.scope,
+        index: scoped.index,
+        rows: scoped.rows,
+        fieldKind: scoped.fieldKind,
+    };
+}
 const MODULE_ID = 'calculations';
 const debug = createDebug('fields', 'calculations');
 
@@ -27,6 +39,15 @@ function resolveVariables(
     const variables: Record<string, unknown> = {};
 
     variableEntries.forEach(([variableKey, variable]) => {
+        const scopeParams = getRowScopeParams(variable);
+        const scope = String(scopeParams.scope || '').trim();
+
+        if (scope) {
+            const resolved = resolveRowScopedFieldReference(variable.sourceKey || '', scopeParams, registry);
+            variables[variableKey] = readCalculationVariableValue(variable, resolved.value);
+            return;
+        }
+
         const resolved = resolveFieldReferenceLive(variable.sourceKey || '', registry);
         variables[variableKey] = readCalculationVariableValue(variable, resolved.value);
     });
@@ -39,6 +60,17 @@ function getWatchNames(root: Element, variableEntries: CalculationVariableEntry[
     const watchNames = new Set<string>();
 
     variableEntries.forEach(([, variable]) => {
+        const scopeParams = getRowScopeParams(variable);
+        const scope = String(scopeParams.scope || '').trim();
+
+        if (scope) {
+            getRowScopedWatchNames(variable.sourceKey || '', scopeParams, registry).forEach((name) => {
+                watchNames.add(name);
+            });
+
+            return;
+        }
+
         const key = normalizeFieldKey(variable.sourceKey || '');
         const entry = registry.get(key);
 

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

@@ -31,6 +31,14 @@ function getMinMaxRule(getRule: (rule: string) => unknown): { min: number | null
     };
 }
 
+function getSelectedOptionCount(field: HTMLElement): number {
+    return Array.from(field.querySelectorAll('input[type="checkbox"]')).filter((input): input is HTMLInputElement => {
+        return input instanceof HTMLInputElement && !isToggleCheckbox(input);
+    }).filter((input) => {
+        return input.checked;
+    }).length;
+}
+
 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.
@@ -42,12 +50,7 @@ function registerValidators(form: HTMLFormElement | null): void {
                 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 selected = getSelectedOptionCount(field);
             const { min, max } = getMinMaxRule(getRule);
 
             if (min !== null && selected < min) {
@@ -61,21 +64,24 @@ function registerValidators(form: HTMLFormElement | null): void {
             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 (!field) {
+                return t('{label} has an invalid value.', { label });
             }
 
-            if (min !== null) {
-                return t('{attribute} must select no less than {min}.', { attribute: label, min });
+            const selected = getSelectedOptionCount(field);
+            const { min, max } = getMinMaxRule(getRule);
+
+            if (min !== null && selected < min) {
+                return field.getAttribute('data-formie-validation-min-options-message')
+                    ?? t('{label} should contain at least {min, number} {min, plural, one{option} other{options}}.', { label, min });
             }
 
-            if (max !== null) {
-                return t('{attribute} must select no greater than {max}.', { attribute: label, max });
+            if (max !== null && selected > max) {
+                return field.getAttribute('data-formie-validation-max-options-message')
+                    ?? t('{label} should contain at most {max, number} {max, plural, one{option} other{options}}.', { label, max });
             }
 
-            return t('{attribute} has an invalid value.', { attribute: label });
+            return t('{label} has an invalid value.', { label });
         },
     );
     });

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

@@ -0,0 +1,188 @@
+import TomSelect from 'tom-select/dist/esm/tom-select.complete.js';
+
+import type { FormieModuleDefinition } from '#contracts/modules';
+import comboboxThemeCss from '#theme-css/fields/_combobox.css?inline';
+import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';
+import { ensureModuleStyles } from '#modules/styles';
+import { createDebug } from '#utils/debug';
+
+const SELECT_SELECTOR = 'select[data-formie-combobox-input]';
+const MODULE_ID = 'combobox';
+const debug = createDebug('fields', 'combobox');
+
+ensureModuleStyles(MODULE_ID, [comboboxThemeCss]);
+
+const NATIVE_THEME_CLASSES = [
+    'formie-select',
+    'formie-dropdown-input',
+    'formie-input-error',
+] as const;
+
+export type FormieComboboxOptions = {
+    multiple?: boolean;
+    placeholder?: string | null;
+};
+
+type TomSelectInstance = InstanceType<typeof TomSelect> & {
+    wrapper: HTMLElement;
+    dropdown?: HTMLElement;
+};
+
+type SelectElement = HTMLSelectElement & {
+    _formieTomSelect?: TomSelectInstance;
+};
+
+function stripNativeThemeClasses(select: HTMLSelectElement): string[] {
+    const removed: string[] = [];
+
+    NATIVE_THEME_CLASSES.forEach((className) => {
+        if (select.classList.contains(className)) {
+            select.classList.remove(className);
+            removed.push(className);
+        }
+    });
+
+    return removed;
+}
+
+function restoreNativeThemeClasses(select: HTMLSelectElement, classNames: string[]): void {
+    classNames.forEach((className) => {
+        select.classList.add(className);
+    });
+}
+
+function cleanLeakedThemeClasses(element: HTMLElement): void {
+    NATIVE_THEME_CLASSES.forEach((className) => {
+        element.classList.remove(className);
+    });
+}
+
+function resolvePlaceholder(select: HTMLSelectElement, configuredPlaceholder?: string | null): string | null {
+    const configured = configuredPlaceholder?.trim();
+
+    if (configured) {
+        return configured;
+    }
+
+    const emptyOption = select.querySelector('option[value=""]');
+
+    return emptyOption?.textContent?.trim() || null;
+}
+
+function removeEmptyOptionFromCombobox(instance: TomSelectInstance): void {
+    if (instance.options['']) {
+        instance.removeOption('', true);
+    }
+}
+
+export function initFormieCombobox(select: SelectElement, options: FormieComboboxOptions = {}): () => void {
+    select._formieTomSelect?.destroy();
+
+    const multiple = options.multiple === true;
+    const restoredClasses = stripNativeThemeClasses(select);
+    const placeholder = resolvePlaceholder(select, options.placeholder);
+
+    const mergedOptions: Record<string, unknown> = {
+        create: false,
+        maxItems: multiple ? null : 1,
+        plugins: multiple ? ['remove_button'] : [],
+        hideSelected: multiple ? true : null,
+        clearAfterSelect: multiple,
+        closeAfterSelect: !multiple,
+        allowEmptyOption: !multiple,
+        openOnFocus: true,
+        diacritics: true,
+        // Tom Select copies the native select class attribute onto its wrapper,
+        // which would duplicate Formie select chrome if left on the <select>.
+        copyClassesToDropdown: false,
+        wrapperClass: 'ts-wrapper formie-combobox',
+        onChange: () => {
+            // Mirror Tom Select changes back through the native select so validation,
+            // conditions, and calculations respond to combobox-driven updates.
+            select.dispatchEvent(new Event('input', { bubbles: true }));
+            select.dispatchEvent(new Event('change', { bubbles: true }));
+        },
+    };
+
+    if (placeholder) {
+        mergedOptions.placeholder = placeholder;
+    }
+
+    dispatchFieldEvent(select, MODULE_ID, 'before-init', {
+        select,
+        options: mergedOptions,
+    });
+
+    const instance = new TomSelect(select, mergedOptions) as TomSelectInstance;
+    removeEmptyOptionFromCombobox(instance);
+    cleanLeakedThemeClasses(instance.wrapper);
+
+    if (instance.dropdown) {
+        cleanLeakedThemeClasses(instance.dropdown);
+    }
+
+    // Tom Select keeps the native select as a preceding sibling; ensure it never
+    // remains visible once enhanced (notably for multi-select listboxes).
+    select.style.display = 'none';
+
+    select._formieTomSelect = instance;
+
+    debug.log('Initialized.', {
+        inputName: select.name,
+        multiple,
+    });
+
+    dispatchFieldEvent(select, MODULE_ID, 'after-init', {
+        combobox: instance,
+        options: mergedOptions,
+    });
+
+    return () => {
+        instance.destroy();
+        select.style.removeProperty('display');
+        restoreNativeThemeClasses(select, restoredClasses);
+        delete select._formieTomSelect;
+        debug.log('Destroyed.', {
+            inputName: select.name,
+        });
+    };
+}
+
+export const comboboxModule: FormieModuleDefinition = {
+    id: MODULE_ID,
+    kind: 'field',
+    match: (ctx) => {
+        return !!ctx.target.querySelector(SELECT_SELECTOR);
+    },
+    setup: async (ctx) => {
+        const options = (ctx.options || {}) as FormieComboboxOptions;
+        const fields = getModuleFieldContainers(ctx);
+        const cleanups = fields.map((field) => {
+            const select = field.querySelector(SELECT_SELECTOR);
+
+            if (!(select instanceof HTMLSelectElement)) {
+                debug.warn('Field missing combobox select; skipping.');
+                return () => { };
+            }
+
+            return initFormieCombobox(select as SelectElement, options);
+        });
+
+        debug.log('Module setup.', { fieldCount: fields.length });
+
+        await ctx.emit('formie:module:combobox:init', {
+            count: cleanups.length,
+        });
+
+        return {
+            destroy: () => {
+                cleanups.forEach((cleanup) => {
+                    cleanup();
+                });
+
+                debug.log('Module destroy.', { fieldCount: fields.length });
+                void ctx.emit('formie:module:combobox:destroy', {});
+            },
+        };
+    },
+};