@verbb/formie-browser 1.0.3 → 1.0.5

package/src/js/modules/fields/text-limit.ts

@@ -5,6 +5,7 @@ import { getTextLimitMetrics } from '@verbb/formie-core';
 import type { FormieModuleDefinition } from '#contracts/modules';
 import { getModuleFieldTarget, releaseFormValidators, retainFormValidators } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
+import { t } from '#utils/i18n';
 
 const INPUT_SELECTOR = 'input[data-formie-single-line-text-input], textarea[data-formie-multi-line-text-input]';
 const TEXT_LIMIT_VALIDATORS = [
@@ -15,8 +16,17 @@ const TEXT_LIMIT_VALIDATORS = [
 ] as const;
 const VALIDATOR_SCOPE = 'text-limit';
 const ALLOW_OVERTYPE_ATTR = 'data-formie-text-limit-allow-overtype';
+const TEXT_LIMIT_CHARACTERS_ALLOWED = '{count, plural, one{character allowed} other{characters allowed}}';
+const TEXT_LIMIT_CHARACTERS_LEFT = '{count, plural, one{character left} other{characters left}}';
+const TEXT_LIMIT_CHARACTERS_OVER = '{count, plural, one{character over limit} other{characters over limit}}';
+const TEXT_LIMIT_WORDS_ALLOWED = '{count, plural, one{word allowed} other{words allowed}}';
+const TEXT_LIMIT_WORDS_LEFT = '{count, plural, one{word left} other{words left}}';
+const TEXT_LIMIT_WORDS_OVER = '{count, plural, one{word over limit} other{words over limit}}';
 const limitTargetCache = new WeakMap<HTMLInputElement | HTMLTextAreaElement, HTMLElement | null>();
 
+type TextLimitUnit = 'character' | 'word';
+type TextLimitCounterState = 'allowed' | 'left' | 'over';
+
 ensureModuleStyles('text-limit', [textLimitCss]);
 
 type TextLimitOptions = {
@@ -69,10 +79,11 @@ function registerValidators(form: HTMLFormElement | null): void {
 
             return getTextLimitMetrics(input.value).graphemeCount >= limit;
         }, ({ label, input, t }) => {
-            return t('{attribute} must be no less than {min} characters.', {
-                attribute: label,
-                min: input.getAttribute('data-formie-min-chars') || '',
-            });
+            return input.getAttribute('data-formie-validation-min-characters-message')
+                || t('{label} must be no less than {min} characters.', {
+                    label,
+                    min: input.getAttribute('data-formie-min-chars') || '',
+                });
         });
 
         validator.addValidator('textMaxCharacterLimit', ({ input }) => {
@@ -92,10 +103,11 @@ function registerValidators(form: HTMLFormElement | null): void {
 
             return getTextLimitMetrics(input.value).graphemeCount <= limit;
         }, ({ label, input, t }) => {
-            return t('{attribute} must be no greater than {max} characters.', {
-                attribute: label,
-                max: input.getAttribute('data-formie-max-chars') || '',
-            });
+            return input.getAttribute('data-formie-validation-max-characters-message')
+                || t('{label} must be no greater than {max} characters.', {
+                    label,
+                    max: input.getAttribute('data-formie-max-chars') || '',
+                });
         });
 
         validator.addValidator('textMinWordLimit', ({ input }) => {
@@ -111,10 +123,11 @@ function registerValidators(form: HTMLFormElement | null): void {
 
             return getTextLimitMetrics(input.value).wordCount >= limit;
         }, ({ label, input, t }) => {
-            return t('{attribute} must be no less than {min} words.', {
-                attribute: label,
-                min: input.getAttribute('data-formie-min-words') || '',
-            });
+            return input.getAttribute('data-formie-validation-min-words-message')
+                || t('{label} must be no less than {min} words.', {
+                    label,
+                    min: input.getAttribute('data-formie-min-words') || '',
+                });
         });
 
         validator.addValidator('textMaxWordLimit', ({ input }) => {
@@ -134,10 +147,11 @@ function registerValidators(form: HTMLFormElement | null): void {
 
             return getTextLimitMetrics(input.value).wordCount <= limit;
         }, ({ label, input, t }) => {
-            return t('{attribute} must be no greater than {max} words.', {
-                attribute: label,
-                max: input.getAttribute('data-formie-max-words') || '',
-            });
+            return input.getAttribute('data-formie-validation-max-words-message')
+                || t('{label} must be no greater than {max} words.', {
+                    label,
+                    max: input.getAttribute('data-formie-max-words') || '',
+                });
         });
     });
 }
@@ -182,14 +196,65 @@ function getLimitTarget(input: HTMLInputElement | HTMLTextAreaElement): HTMLElem
     return target;
 }
 
-function renderCounter(target: HTMLElement, remaining: number, unit: 'character' | 'word'): void {
+function getTextLimitCounterState(
+    input: HTMLInputElement | HTMLTextAreaElement,
+    remaining: number,
+    unit: TextLimitUnit,
+): TextLimitCounterState {
+    const isEmpty = unit === 'character' ? input.value === '' : input.value.trim() === '';
+
+    if (isEmpty) {
+        return 'allowed';
+    }
+
+    if (remaining < 0) {
+        return 'over';
+    }
+
+    return 'left';
+}
+
+function getTextLimitCounterMessageKey(unit: TextLimitUnit, state: TextLimitCounterState): string {
+    if (unit === 'character') {
+        if (state === 'allowed') {
+            return TEXT_LIMIT_CHARACTERS_ALLOWED;
+        }
+
+        if (state === 'over') {
+            return TEXT_LIMIT_CHARACTERS_OVER;
+        }
+
+        return TEXT_LIMIT_CHARACTERS_LEFT;
+    }
+
+    if (state === 'allowed') {
+        return TEXT_LIMIT_WORDS_ALLOWED;
+    }
+
+    if (state === 'over') {
+        return TEXT_LIMIT_WORDS_OVER;
+    }
+
+    return TEXT_LIMIT_WORDS_LEFT;
+}
+
+function renderCounter(
+    target: HTMLElement,
+    input: HTMLInputElement | HTMLTextAreaElement,
+    remaining: number,
+    limit: number,
+    unit: TextLimitUnit,
+): void {
+    const state = getTextLimitCounterState(input, remaining, unit);
+    const displayCount = state === 'allowed' ? limit : Math.abs(remaining);
     const number = document.createElement('span');
-    number.className = remaining < 0 ? 'formie-limit-number formie-limit-number-error' : 'formie-limit-number';
-    number.textContent = String(remaining);
+    number.className = state === 'over' ? 'formie-limit-number formie-limit-number-error' : 'formie-limit-number';
+    number.textContent = String(displayCount);
+    const messageKey = getTextLimitCounterMessageKey(unit, state);
 
     target.replaceChildren(
         number,
-        document.createTextNode(` ${Math.abs(remaining) === 1 ? unit : `${unit}s`} left`)
+        document.createTextNode(` ${t(messageKey, { count: displayCount })}`)
     );
 }
 
@@ -206,14 +271,14 @@ function updateCounter(input: HTMLInputElement | HTMLTextAreaElement): void {
 
     if (maxChars > 0) {
         const remaining = maxChars - metrics.graphemeCount;
-        renderCounter(target, remaining, 'character');
+        renderCounter(target, input, remaining, maxChars, 'character');
 
         return;
     }
 
     if (maxWords > 0) {
         const remaining = maxWords - metrics.wordCount;
-        renderCounter(target, remaining, 'word');
+        renderCounter(target, input, remaining, maxWords, 'word');
     }
 }
 

package/src/js/submit/pipeline.ts

@@ -250,7 +250,17 @@ export async function runSubmitPipeline(
                 const errors = options.validator.submit(final ? ctx.form : scope, { final });
 
                 if (errors.length > 0) {
-                    errors[0]?.input.focus();
+                    const firstErrorInput = errors[0]?.input;
+
+                    if (firstErrorInput) {
+                        firstErrorInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+                        try {
+                            firstErrorInput.focus({ preventScroll: true });
+                        } catch {
+                            firstErrorInput.focus();
+                        }
+                    }
 
                     return {
                         ok: false,

package/src/js/utils/country-from-ip.ts

@@ -0,0 +1,54 @@
+export type CountryFromIpResponse = {
+    countryCode?: string | null;
+    countryName?: string | null;
+};
+
+const DEFAULT_COUNTRY_FROM_IP_ACTION = 'formie/address/country-from-ip';
+
+let cachedLookup: Promise<CountryFromIpResponse | null> | null = null;
+
+function buildActionUrl(action: string): string {
+    return new URL(action.startsWith('/') ? action : `/actions/${action}`, window.location.origin).toString();
+}
+
+export async function fetchCountryFromIp(
+    action: string = DEFAULT_COUNTRY_FROM_IP_ACTION,
+): Promise<CountryFromIpResponse | null> {
+    if (!cachedLookup) {
+        cachedLookup = (async () => {
+            try {
+                const response = await fetch(buildActionUrl(action), {
+                    headers: {
+                        Accept: 'application/json',
+                    },
+                });
+
+                if (!response.ok) {
+                    return null;
+                }
+
+                const data = await response.json() as CountryFromIpResponse;
+
+                if (!data?.countryCode) {
+                    return null;
+                }
+
+                return data;
+            } catch {
+                return null;
+            }
+        })();
+    }
+
+    return cachedLookup;
+}
+
+export function createGeoIpLookup(
+    action: string = DEFAULT_COUNTRY_FROM_IP_ACTION,
+): (callback: (countryCode: string) => void) => void {
+    return (callback) => {
+        void fetchCountryFromIp(action).then((data) => {
+            callback(data?.countryCode?.toLowerCase() || '');
+        });
+    };
+}

package/src/js/utils/field-references.row-scope.ts

@@ -0,0 +1,303 @@
+import { fieldKeyToInputName, normalizeFieldKey } from '#utils/field-references.keys';
+import { resolveFieldReferenceLive } from '#utils/field-references.resolver';
+import type { FieldValueRegistry, ResolveFieldValueResult } from '#utils/field-references.types';
+
+export type RowScopeParams = {
+    scope?: string;
+    index?: string | number;
+    rows?: string;
+    fieldKind?: string;
+};
+
+const ROW_SCOPE_VALUES = new Set(['first', 'last', 'index', 'all', 'count', 'rows']);
+
+function escapeRegExp(value: string): string {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+export function parseRowsExpression(expression: string, rowCount: number): number[] {
+    const normalized = String(expression || '').trim().toLowerCase();
+
+    if (!normalized || rowCount <= 0) {
+        return [];
+    }
+
+    if (normalized === 'even') {
+        const indices: number[] = [];
+
+        for (let row = 1; row <= rowCount; row++) {
+            if (row % 2 === 0) {
+                indices.push(row - 1);
+            }
+        }
+
+        return indices;
+    }
+
+    if (normalized === 'odd') {
+        const indices: number[] = [];
+
+        for (let row = 1; row <= rowCount; row++) {
+            if (row % 2 === 1) {
+                indices.push(row - 1);
+            }
+        }
+
+        return indices;
+    }
+
+    const everyMatch = normalized.match(/^every:(\d+)$/);
+
+    if (everyMatch) {
+        const step = Math.max(1, Number.parseInt(everyMatch[1] || '1', 10));
+        const indices: number[] = [];
+
+        for (let row = 1; row <= rowCount; row += step) {
+            indices.push(row - 1);
+        }
+
+        return indices;
+    }
+
+    const indices: number[] = [];
+
+    normalized.split(/\s*,\s*/).forEach((segment) => {
+        const trimmed = segment.trim();
+
+        if (!trimmed) {
+            return;
+        }
+
+        const rangeMatch = trimmed.match(/^(\d+)\s*-\s*(\d+)$/);
+
+        if (rangeMatch) {
+            let start = Number.parseInt(rangeMatch[1] || '0', 10);
+            let end = Number.parseInt(rangeMatch[2] || '0', 10);
+
+            if (start > end) {
+                [start, end] = [end, start];
+            }
+
+            for (let row = start; row <= end; row++) {
+                if (row >= 1 && row <= rowCount) {
+                    indices.push(row - 1);
+                }
+            }
+
+            return;
+        }
+
+        const row = Number.parseInt(trimmed, 10);
+
+        if (Number.isFinite(row) && row >= 1 && row <= rowCount) {
+            indices.push(row - 1);
+        }
+    });
+
+    return [...new Set(indices)].sort((left, right) => left - right);
+}
+
+function resolveColumnSelector(sourceKey: string): { fieldKey: string; columnKey: string } {
+    const normalized = normalizeFieldKey(sourceKey);
+    const parts = normalized.split('.').filter(Boolean);
+
+    if (parts.length < 2) {
+        return {
+            fieldKey: normalized,
+            columnKey: parts[parts.length - 1] || '',
+        };
+    }
+
+    if (parts.length >= 3 && /^\d+$/.test(parts[1] || '')) {
+        return {
+            fieldKey: parts[0] || '',
+            columnKey: parts.slice(2).join('.'),
+        };
+    }
+
+    return {
+        fieldKey: parts[0] || '',
+        columnKey: parts.slice(1).join('.'),
+    };
+}
+
+function listColumnCellKeys(fieldKey: string, columnKey: string, registry: FieldValueRegistry): string[] {
+    const pattern = new RegExp(`^${escapeRegExp(fieldKey)}\\.(\\d+)\\.${escapeRegExp(columnKey)}$`);
+
+    return [...registry.keys()]
+        .filter((key) => pattern.test(key))
+        .sort((left, right) => {
+            const leftRow = Number.parseInt(left.split('.')[1] || '0', 10);
+            const rightRow = Number.parseInt(right.split('.')[1] || '0', 10);
+
+            return leftRow - rightRow;
+        });
+}
+
+function readCellValue(key: string, registry: FieldValueRegistry): string | string[] {
+    return resolveFieldReferenceLive(key, registry).value;
+}
+
+export function getRowScopedWatchNames(
+    sourceKey: string,
+    params: RowScopeParams,
+    registry: FieldValueRegistry,
+): Set<string> {
+    const watchNames = new Set<string>();
+    const { fieldKey, columnKey } = resolveColumnSelector(sourceKey);
+    const scope = String(params.scope || '').trim().toLowerCase();
+
+    if (!fieldKey || !columnKey || !ROW_SCOPE_VALUES.has(scope)) {
+        const fallback = fieldKeyToInputName(sourceKey);
+
+        if (fallback) {
+            watchNames.add(fallback);
+            watchNames.add(`${fallback}[]`);
+        }
+
+        return watchNames;
+    }
+
+    const cellKeys = listColumnCellKeys(fieldKey, columnKey, registry);
+
+    cellKeys.forEach((cellKey) => {
+        const entry = registry.get(cellKey);
+
+        if (entry?.names?.length) {
+            entry.names.forEach((name) => {
+                watchNames.add(name);
+            });
+
+            return;
+        }
+
+        const fallback = fieldKeyToInputName(cellKey);
+
+        if (fallback) {
+            watchNames.add(fallback);
+            watchNames.add(`${fallback}[]`);
+        }
+    });
+
+    return watchNames;
+}
+
+export function resolveRowScopedFieldReference(
+    sourceKey: string,
+    params: RowScopeParams,
+    registry: FieldValueRegistry,
+): ResolveFieldValueResult {
+    const scope = String(params.scope || '').trim().toLowerCase();
+
+    if (!scope || !ROW_SCOPE_VALUES.has(scope)) {
+        return resolveFieldReferenceLive(sourceKey, registry);
+    }
+
+    const { fieldKey, columnKey } = resolveColumnSelector(sourceKey);
+
+    if (!fieldKey || !columnKey) {
+        return resolveFieldReferenceLive(sourceKey, registry);
+    }
+
+    const cellKeys = listColumnCellKeys(fieldKey, columnKey, registry);
+    const rowValues = cellKeys.map((cellKey) => readCellValue(cellKey, registry));
+
+    if (scope === 'count') {
+        return {
+            key: `${fieldKey}.${columnKey}`,
+            value: String(cellKeys.length),
+            found: true,
+        };
+    }
+
+    if (scope === 'first') {
+        const key = cellKeys[0] || `${fieldKey}.0.${columnKey}`;
+
+        return {
+            key,
+            value: rowValues[0] ?? '',
+            found: cellKeys.length > 0,
+        };
+    }
+
+    if (scope === 'last') {
+        const key = cellKeys[cellKeys.length - 1] || `${fieldKey}.0.${columnKey}`;
+
+        return {
+            key,
+            value: rowValues[rowValues.length - 1] ?? '',
+            found: cellKeys.length > 0,
+        };
+    }
+
+    if (scope === 'index') {
+        const index = Number.parseInt(String(params.index ?? '0'), 10);
+        const key = `${fieldKey}.${index}.${columnKey}`;
+
+        return resolveFieldReferenceLive(key, registry);
+    }
+
+    if (scope === 'all') {
+        const values = rowValues.flatMap((value) => {
+            if (Array.isArray(value)) {
+                return value;
+            }
+
+            if (value === '') {
+                return [];
+            }
+
+            return [value];
+        });
+
+        return {
+            key: `${fieldKey}.${columnKey}`,
+            value: values,
+            found: values.length > 0,
+        };
+    }
+
+    if (scope === 'rows') {
+        const indices = parseRowsExpression(String(params.rows || ''), cellKeys.length);
+
+        if (indices.length === 0) {
+            return {
+                key: `${fieldKey}.${columnKey}`,
+                value: '',
+                found: false,
+            };
+        }
+
+        if (indices.length === 1) {
+            const key = cellKeys[indices[0]] || `${fieldKey}.${indices[0]}.${columnKey}`;
+
+            return {
+                key,
+                value: rowValues[indices[0]] ?? '',
+                found: true,
+            };
+        }
+
+        const values = indices.flatMap((index) => {
+            const value = rowValues[index];
+
+            if (Array.isArray(value)) {
+                return value;
+            }
+
+            if (value === '') {
+                return [];
+            }
+
+            return [value];
+        });
+
+        return {
+            key: `${fieldKey}.${columnKey}`,
+            value: values,
+            found: values.length > 0,
+        };
+    }
+
+    return resolveFieldReferenceLive(sourceKey, registry);
+}

package/src/js/utils/field-references.ts

@@ -2,6 +2,7 @@ export { normalizeFieldKey, fieldKeyToInputName, inputNameToFieldKey } from '#ut
 export { parseFieldReference } from '#utils/field-references.parser';
 export { buildFieldValueRegistry } from '#utils/field-references.registry';
 export { resolveFieldReferenceLive, resolveFieldReferenceFromFormData } from '#utils/field-references.resolver';
+export { getRowScopedWatchNames, parseRowsExpression, resolveRowScopedFieldReference } from '#utils/field-references.row-scope';
 export type {
     FieldReferenceTransform,
     FieldValueRegistry,