@verbb/formie-browser 1.0.2 → 1.0.4

package/src/js/modules/fields/file-upload.ts

@@ -1,9 +1,9 @@
 import fileUploadCss from '#theme-css/fields/_file.css?inline';
 
 import type { FormieModuleDefinition } from '#contracts/modules';
-import { dispatchFieldEvent, getModuleFieldTarget, releaseFormValidators, retainFormValidators } from '#modules/fields/shared';
+import { dispatchFieldEvent, releaseFormValidators, retainFormValidators } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
-import { getFileUploadEventName, getFormStateEventName } from '#utils/event-names';
+import { getFieldModuleEventName, getFileUploadEventName, getFormStateEventName } from '#utils/event-names';
 import { requestJson } from '#utils/http';
 
 const INPUT_SELECTOR = 'input[type="file"][data-formie-file-input]';
@@ -20,6 +20,8 @@ const FILE_VALIDATORS = [
 ] as const;
 const VALIDATOR_SCOPE = 'file-upload';
 const MODULE_ID = 'file-upload';
+const REPEATER_INIT_ROW_EVENT = getFieldModuleEventName('repeater', 'init-row');
+const FIELD_HANDLE_SELECTOR = '[data-formie-field-handle]';
 
 ensureModuleStyles(MODULE_ID, [fileUploadCss]);
 
@@ -237,9 +239,10 @@ function registerValidators(form: HTMLFormElement | null): void {
 
             return input.files.length <= limit;
         }, ({ input, t }) => {
-            return t('Choose up to {files} files.', {
-                files: input.getAttribute('data-formie-file-limit') || '',
-            });
+            return input.getAttribute('data-formie-validation-max-files-message')
+                ?? t('Choose up to {files} files.', {
+                    files: input.getAttribute('data-formie-file-limit') || '',
+                });
         });
 
         validator.addValidator('fileSizeMinLimit', ({ input }) => {
@@ -254,9 +257,10 @@ function registerValidators(form: HTMLFormElement | null): void {
                 return file.size >= sizeBytes;
             });
         }, ({ input, t }) => {
-            return t('File must be larger than {filesize} MB.', {
-                filesize: input.getAttribute('data-formie-size-min-limit') || '',
-            });
+            return input.getAttribute('data-formie-validation-min-file-size-message')
+                ?? t('File must be larger than {filesize} MB.', {
+                    filesize: input.getAttribute('data-formie-size-min-limit') || '',
+                });
         });
 
         validator.addValidator('fileSizeMaxLimit', ({ input }) => {
@@ -271,9 +275,10 @@ function registerValidators(form: HTMLFormElement | null): void {
                 return file.size <= sizeBytes;
             });
         }, ({ input, t }) => {
-            return t('File must be smaller than {filesize} MB.', {
-                filesize: input.getAttribute('data-formie-size-max-limit') || '',
-            });
+            return input.getAttribute('data-formie-validation-max-file-size-message')
+                ?? t('File must be smaller than {filesize} MB.', {
+                    filesize: input.getAttribute('data-formie-size-max-limit') || '',
+                });
         });
     });
 }
@@ -366,6 +371,47 @@ function updateUploadedAssetInputs(field: HTMLElement, input: HTMLInputElement,
     input.value = '';
 }
 
+function getFormHandle(form: HTMLFormElement | null): string {
+    if (!form) {
+        return '';
+    }
+
+    const handleInput = form.querySelector('input[name="handle"]');
+
+    if (handleInput instanceof HTMLInputElement && handleInput.value.trim()) {
+        return handleInput.value.trim();
+    }
+
+    return form.getAttribute('data-formie-handle')?.trim() || '';
+}
+
+function buildHydrateFormData(field: HTMLElement, input: HTMLInputElement, assetIds: number[]): FormData {
+    const form = input.form;
+    const body = new FormData();
+    const handle = getFormHandle(form);
+    const fieldHandle = getFieldHandle(field);
+
+    if (handle) {
+        body.append('handle', handle);
+    }
+
+    if (fieldHandle) {
+        body.append('fieldHandle', fieldHandle);
+    }
+
+    const submissionUidInput = form?.querySelector('input[name="submissionUid"]');
+
+    if (submissionUidInput instanceof HTMLInputElement && submissionUidInput.value.trim()) {
+        body.append('submissionUid', submissionUidInput.value.trim());
+    }
+
+    assetIds.forEach((assetId) => {
+        body.append('assetIds[]', String(assetId));
+    });
+
+    return body;
+}
+
 async function hydrateUploadedAssets(field: HTMLElement, input: HTMLInputElement, uploadedAssets: UploadedAsset[]): Promise<UploadedAsset[]> {
     const assetIds = uploadedAssets.map((asset) => {
         return asset.assetId;
@@ -378,14 +424,9 @@ async function hydrateUploadedAssets(field: HTMLElement, input: HTMLInputElement
     }
 
     const hydrateEndpoint = input.getAttribute(HYDRATE_ENDPOINT_ATTR)?.trim() || '/actions/formie/file-upload/hydrate';
-    const body = new FormData();
-    assetIds.forEach((assetId) => {
-        body.append('assetIds[]', String(assetId));
-    });
-
     const response = await requestJson<FileUploadHydrateResponse>(hydrateEndpoint, {
         method: 'POST',
-        body,
+        body: buildHydrateFormData(field, input, assetIds),
     });
     const hydratedAssets = normalizeUploadedAssets(response.assets);
 
@@ -504,6 +545,118 @@ function getUploadedAssetsFromEvent(event: Event, matcher: FileUploadEventMatche
     return [];
 }
 
+function getFieldContainer(input: HTMLInputElement): HTMLElement | null {
+    const field = input.closest(FIELD_HANDLE_SELECTOR);
+
+    return field instanceof HTMLElement ? field : null;
+}
+
+function collectFileUploadInputs(root: ParentNode): HTMLInputElement[] {
+    return Array.from(root.querySelectorAll(INPUT_SELECTOR)).filter((input): input is HTMLInputElement => {
+        return input instanceof HTMLInputElement;
+    });
+}
+
+function bindFileUploadInput(field: HTMLElement, input: HTMLInputElement, form: HTMLFormElement | null): () => void {
+    const state: FileUploadState = {
+        field,
+        input,
+        summaryRoot: ensureSummaryRoot(field, input),
+        uploadedAssets: mergeUploadedAssets(
+            readUploadedAssetsFromHiddenInputs(field, input),
+            readSummaryItems(field.querySelector('[data-formie-file-summary]') as HTMLElement | null),
+        ),
+        pendingFiles: [],
+        hydrationToken: 0,
+    };
+    const syncPendingFiles = () => {
+        state.pendingFiles = Array.from(input.files || []).map((file) => {
+            return file.name;
+        });
+        renderSummary(state);
+    };
+    const syncUploadedAssets = async(uploadedAssets: UploadedAsset[]) => {
+        state.hydrationToken += 1;
+        const hydrationToken = state.hydrationToken;
+        state.pendingFiles = [];
+        state.uploadedAssets = uploadedAssets;
+        updateUploadedAssetInputs(field, input, uploadedAssets);
+        renderSummary(state);
+
+        try {
+            const hydratedAssets = await hydrateUploadedAssets(field, input, uploadedAssets);
+
+            if (hydrationToken !== state.hydrationToken) {
+                return;
+            }
+
+            state.uploadedAssets = hydratedAssets;
+            renderSummary(state);
+            dispatchFieldEvent(field, MODULE_ID, 'uploaded-assets-sync', {
+                fileUpload: field,
+                assets: hydratedAssets,
+            });
+        } catch (error) {
+            console.error('[formie] Failed to hydrate uploaded file details.', error);
+        }
+    };
+    const resetUploadedAssets = () => {
+        state.hydrationToken += 1;
+        state.pendingFiles = [];
+        state.uploadedAssets = [];
+        updateUploadedAssetInputs(field, input, []);
+        renderSummary(state);
+    };
+    const uploadedAssetHandler = (event: Event) => {
+        const fieldHandle = getFieldHandle(field);
+
+        if (!fieldHandle) {
+            return;
+        }
+
+        const uploadedAssets = getUploadedAssetsFromEvent(event, {
+            fieldHandle,
+            inputKey: getFileUploadKey(input),
+            inputName: input.name,
+            pendingFiles: state.pendingFiles,
+        });
+
+        if (!uploadedAssets.length) {
+            return;
+        }
+
+        void syncUploadedAssets(uploadedAssets);
+    };
+    const resetHandler = () => {
+        resetUploadedAssets();
+    };
+
+    input.addEventListener('change', syncPendingFiles);
+    form?.addEventListener(FILE_UPLOAD_EVENT, uploadedAssetHandler as EventListener);
+    form?.addEventListener(FORM_RESET_EVENT, resetHandler as EventListener);
+
+    const syncInitialState = () => {
+        const assetIdsFromDom = readUploadedAssetsFromHiddenInputs(field, input);
+        const summaryItems = readSummaryItems(state.summaryRoot);
+        state.uploadedAssets = mergeUploadedAssets(assetIdsFromDom, summaryItems);
+
+        if (state.uploadedAssets.some((asset) => asset.assetId && !asset.filename)) {
+            void syncUploadedAssets(state.uploadedAssets);
+            return;
+        }
+
+        renderSummary(state);
+    };
+
+    syncInitialState();
+
+    return () => {
+        input.removeEventListener('change', syncPendingFiles);
+        form?.removeEventListener(FILE_UPLOAD_EVENT, uploadedAssetHandler as EventListener);
+        form?.removeEventListener(FORM_RESET_EVENT, resetHandler as EventListener);
+    };
+}
+
 export const fileUploadModule: FormieModuleDefinition = {
     id: MODULE_ID,
     kind: 'field',
@@ -511,111 +664,53 @@ export const fileUploadModule: FormieModuleDefinition = {
         return !!ctx.target.querySelector(INPUT_SELECTOR);
     },
     setup: async(ctx) => {
-        const field = getModuleFieldTarget(ctx);
-        const scope = field || ctx.target;
-        const inputs = Array.from(scope.querySelectorAll(INPUT_SELECTOR)).filter((input): input is HTMLInputElement => {
-            return input instanceof HTMLInputElement;
-        });
         const form = ctx.form;
+        const boundInputs = new WeakSet<HTMLInputElement>();
+        const unbinds: Array<() => void> = [];
 
-        registerValidators(form);
-
-        const unbinds = inputs.map((input) => {
-            if (!(field instanceof HTMLElement)) {
-                return () => {};
-            }
-
-            const state: FileUploadState = {
-                field,
-                input,
-                summaryRoot: ensureSummaryRoot(field, input),
-                uploadedAssets: mergeUploadedAssets(
-                    readUploadedAssetsFromHiddenInputs(field, input),
-                    readSummaryItems(field.querySelector('[data-formie-file-summary]') as HTMLElement | null)
-                ),
-                pendingFiles: [],
-                hydrationToken: 0,
-            };
-            const syncPendingFiles = () => {
-                state.pendingFiles = Array.from(input.files || []).map((file) => {
-                    return file.name;
-                });
-                renderSummary(state);
-            };
-            const syncUploadedAssets = async(uploadedAssets: UploadedAsset[]) => {
-                state.hydrationToken += 1;
-                const hydrationToken = state.hydrationToken;
-                state.pendingFiles = [];
-                state.uploadedAssets = uploadedAssets;
-                updateUploadedAssetInputs(field, input, uploadedAssets);
-                renderSummary(state);
-
-                try {
-                    const hydratedAssets = await hydrateUploadedAssets(field, input, uploadedAssets);
-
-                    if (hydrationToken !== state.hydrationToken) {
-                        return;
-                    }
-
-                    state.uploadedAssets = hydratedAssets;
-                    renderSummary(state);
-                    dispatchFieldEvent(field, MODULE_ID, 'uploaded-assets-sync', {
-                        fileUpload: field,
-                        assets: hydratedAssets,
-                    });
-                } catch (error) {
-                    console.error('[formie] Failed to hydrate uploaded file details.', error);
-                }
-            };
-            const resetUploadedAssets = () => {
-                state.hydrationToken += 1;
-                state.pendingFiles = [];
-                state.uploadedAssets = [];
-                updateUploadedAssetInputs(field, input, []);
-                renderSummary(state);
-            };
-            const uploadedAssetHandler = (event: Event) => {
-                const fieldHandle = getFieldHandle(field);
-
-                if (!fieldHandle) {
+        const bindInputsInRoot = (root: ParentNode) => {
+            collectFileUploadInputs(root).forEach((input) => {
+                if (boundInputs.has(input)) {
                     return;
                 }
 
-                const uploadedAssets = getUploadedAssetsFromEvent(event, {
-                    fieldHandle,
-                    inputKey: getFileUploadKey(input),
-                    inputName: input.name,
-                    pendingFiles: state.pendingFiles,
-                });
+                const field = getFieldContainer(input);
 
-                if (!uploadedAssets.length) {
+                if (!field) {
                     return;
                 }
 
-                void syncUploadedAssets(uploadedAssets);
-            };
-            const resetHandler = () => {
-                resetUploadedAssets();
-            };
+                boundInputs.add(input);
+                unbinds.push(bindFileUploadInput(field, input, form));
+            });
+        };
 
-            input.addEventListener('change', syncPendingFiles);
-            form?.addEventListener(FILE_UPLOAD_EVENT, uploadedAssetHandler as EventListener);
-            form?.addEventListener(FORM_RESET_EVENT, resetHandler as EventListener);
-            renderSummary(state);
+        registerValidators(form);
+        bindInputsInRoot(ctx.target);
 
-            return () => {
-                input.removeEventListener('change', syncPendingFiles);
-                form?.removeEventListener(FILE_UPLOAD_EVENT, uploadedAssetHandler as EventListener);
-                form?.removeEventListener(FORM_RESET_EVENT, resetHandler as EventListener);
-            };
-        });
+        const repeaterInitRowHandler = (event: Event) => {
+            const detail = (event as CustomEvent<unknown>).detail;
+
+            if (!isRecord(detail)) {
+                return;
+            }
+
+            const row = detail.row;
+
+            if (row instanceof HTMLElement) {
+                bindInputsInRoot(row);
+            }
+        };
+
+        form?.addEventListener(REPEATER_INIT_ROW_EVENT, repeaterInitRowHandler as EventListener);
 
         await ctx.emit('formie:module:file-upload:init', {
-            count: inputs.length,
+            count: unbinds.length,
         });
 
         return {
             destroy: () => {
+                form?.removeEventListener(REPEATER_INIT_ROW_EVENT, repeaterInitRowHandler as EventListener);
                 unbinds.forEach((unbind) => {
                     unbind();
                 });

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

@@ -3,6 +3,7 @@ import type { FormSubmitResult } from '#contracts/schema';
 import { EventBus } from '#events/event-bus';
 import { submitForm } from '#transport/forms-api';
 import { createDebug } from '#utils/debug';
+import { getFormPages, getValidationScope } from '#validation/scope';
 import type { FormieValidator } from '#validation/validator';
 
 export type SubmitPipelineContext = {
@@ -30,32 +31,6 @@ function getAbortedResult(stage: SubmitStage, reason?: string): FormSubmitResult
     };
 }
 
-function getPages(form: HTMLFormElement): HTMLElement[] {
-    return Array.from(form.querySelectorAll('[data-formie-page]')) as HTMLElement[];
-}
-
-function getValidationScope(form: HTMLFormElement): { scope: Element; final: boolean } {
-    const pages = getPages(form);
-
-    if (!pages.length) {
-        return {
-            scope: form,
-            final: true,
-        };
-    }
-
-    // Multi-page submits validate the visible page until the user reaches the
-    // final step, where hidden earlier pages are included again.
-    const currentPage = pages.find((page) => {
-        return !page.hasAttribute('data-formie-page-hidden');
-    }) || pages[pages.length - 1];
-
-    return {
-        scope: currentPage,
-        final: currentPage === pages[pages.length - 1],
-    };
-}
-
 function isSubmittableControl(element: Element): element is HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement {
     return element instanceof HTMLInputElement
         || element instanceof HTMLSelectElement
@@ -172,7 +147,7 @@ function appendMissingFieldClears(formData: FormData, fieldNames: Set<string>):
 }
 
 function buildSubmitFormData(form: HTMLFormElement, action: FormAction): FormData {
-    const pages = getPages(form);
+    const pages = getFormPages(form);
     const currentPage = pages.find((page) => {
         return !page.hasAttribute('data-formie-page-hidden');
     }) || null;
@@ -200,7 +175,7 @@ function isFinalSubmitAttempt(form: HTMLFormElement, action: FormAction): boolea
         return false;
     }
 
-    const pages = getPages(form);
+    const pages = getFormPages(form);
 
     if (!pages.length) {
         return true;