@verbb/formie-browser 1.0.7 → 1.0.9

package/src/js/core/submit-result-state.ts

@@ -1,7 +1,7 @@
 import type { FormAction } from '#contracts/common';
 import type { FormSubmitResult } from '#contracts/schema';
 import { dispatchFormieDomEvent } from '#core/dom-events';
-import { dispatchPageClientEventForSubmit } from '#core/page-client-event';
+import { dispatchPageClientEventForSubmit, dispatchResolvedClientEvents } from '#core/page-client-event';
 import { syncPageTabErrors } from '#core/page-tab-errors';
 import { addThemeClasses, removeThemeClasses, toggleThemeClasses } from '#theme/theme-classes';
 import { createDebug } from '#utils/debug';
@@ -335,6 +335,18 @@ export function applyPageState(form: HTMLFormElement, nextPageId: string): void
         toggleThemeClasses(tab, form, 'tabCurrent', isCurrent);
         toggleThemeClasses(tab, form, 'tabComplete', isComplete);
 
+        const tabLink = tab.querySelector('[data-formie-tab-link]');
+
+        if (tabLink) {
+            toggleThemeClasses(tabLink, form, 'tabLinkCurrent', isCurrent);
+
+            if (isCurrent) {
+                removeThemeClasses(tabLink, form, 'tabLinkInactive');
+            } else {
+                addThemeClasses(tabLink, form, 'tabLinkInactive');
+            }
+        }
+
         if (isCurrent) {
             tab.setAttribute('aria-current', 'page');
         } else {
@@ -568,7 +580,11 @@ export function applySubmitResultState(form: HTMLFormElement, result: FormSubmit
         return;
     }
 
-    dispatchPageClientEventForSubmit(form, action);
+    if (Array.isArray(result.clientEvents) && result.clientEvents.length > 0) {
+        dispatchResolvedClientEvents(form, result.clientEvents);
+    } else {
+        dispatchPageClientEventForSubmit(form, action);
+    }
 
     if (result.nextPage?.id) {
         // Advancing pages is treated as a fresh validation cycle for the next page.

package/src/js/core/submit-result-ui.ts

@@ -367,6 +367,31 @@ export function renderFormErrors(form: HTMLFormElement, formErrors: string[]): v
     });
 }
 
+function isPaymentFollowUpResult(result: FormSubmitResult): boolean {
+    if (result.ok || result.keepSubmitLoading !== true) {
+        return false;
+    }
+
+    const meta = (result.meta || {}) as Record<string, unknown>;
+    const paymentStatus = String(meta.paymentStatus || '');
+
+    return paymentStatus === 'actionRequired' || paymentStatus === 'pending';
+}
+
+export function renderFormNotice(form: HTMLFormElement, message: string): void {
+    const container = ensureFormErrorContainer(form);
+    const messageContainer = ensureFormErrorMessageContainer(form, container);
+
+    addThemeClasses(container, form, 'errors');
+
+    const noticeNode = document.createElement('div');
+    noticeNode.setAttribute('data-formie-notice', 'true');
+    noticeNode.setAttribute('role', 'status');
+    addThemeClasses(noticeNode, form, 'message');
+    noticeNode.textContent = message;
+    messageContainer.appendChild(noticeNode);
+}
+
 function shouldRenderSuccessMessage(form: HTMLFormElement, result: FormSubmitResult): boolean {
     if (!result.message || result.nextPage || result.redirect) {
         // Page changes and redirects are transitional outcomes, not terminal
@@ -432,15 +457,28 @@ export function applySubmitResultUi(form: HTMLFormElement, result: FormSubmitRes
         return;
     }
 
-    if (result.fieldErrors) {
-        renderFieldErrors(form, result.fieldErrors);
-    }
+    if (!result.ok) {
+        if (isPaymentFollowUpResult(result)) {
+            const meta = (result.meta || {}) as Record<string, unknown>;
+            const message = String(meta.paymentMessage || '').trim();
 
-    if (result.formErrors?.length) {
-        renderFormErrors(form, result.formErrors);
-    } else if (!result.fieldErrors && result.message) {
-        renderFormErrors(form, [result.message]);
-    }
+            if (message) {
+                renderFormNotice(form, message);
+            }
+
+            return;
+        }
+
+        if (result.fieldErrors) {
+            renderFieldErrors(form, result.fieldErrors);
+        }
 
-    focusFirstValidationError(form);
+        if (result.formErrors?.length) {
+            renderFormErrors(form, result.formErrors);
+        } else if (!result.fieldErrors && result.message) {
+            renderFormErrors(form, [result.message]);
+        }
+
+        focusFirstValidationError(form);
+    }
 }

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

@@ -21,6 +21,9 @@ export const builtinFieldModuleLoaders: Record<string, () => Promise<FormieModul
     'rich-text': () => import('#modules/fields/rich-text').then((module) => module.richTextModule),
     'signature': () => import('#modules/fields/signature').then((module) => module.signatureModule),
     'summary': () => import('#modules/fields/summary').then((module) => module.summaryModule),
+    'survey-likert': () => import('#modules/fields/survey-likert').then((module) => module.surveyLikertModule),
+    'survey-rank': () => import('#modules/fields/survey-rank').then((module) => module.surveyRankModule),
+    'survey-rating': () => import('#modules/fields/survey-rating').then((module) => module.surveyRatingModule),
     'table': () => import('#modules/fields/table').then((module) => module.tableModule),
     'text-limit': () => import('#modules/fields/text-limit').then((module) => module.textLimitModule),
 };

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

@@ -11,6 +11,8 @@ import { requestText } from '#utils/http';
 const BLOCKS_SELECTOR = '[data-formie-summary-blocks]';
 const CONTAINER_SELECTOR = '[data-formie-summary-container]';
 const SUMMARY_ACTION = 'formie/fields/get-summary-html';
+const THEME_CONFIG_ATTR = 'data-formie-theme-config';
+const FRONTEND_THEME_ATTR = 'data-formie-frontend-theme';
 const MODULE_ID = 'summary';
 const debug = createDebug('fields', 'summary');
 
@@ -18,6 +20,8 @@ ensureModuleStyles(MODULE_ID, [summaryCss]);
 
 type SummaryRequestState = {
     accessToken: string | null;
+    themeConfig: string | null;
+    frontendTheme: string | null;
 };
 
 function getSummaryRequestUrl(): string {
@@ -27,12 +31,14 @@ function getSummaryRequestUrl(): string {
     return url.toString();
 }
 
-function getSummaryRequestState(field: HTMLElement): SummaryRequestState {
+function getSummaryRequestState(field: HTMLElement, form: HTMLFormElement): SummaryRequestState {
     const summaryTokenInput = field.querySelector('[data-formie-summary-token]') as HTMLInputElement | null;
     const accessToken = summaryTokenInput?.value?.trim() || null;
 
     return {
         accessToken,
+        themeConfig: form.getAttribute(THEME_CONFIG_ATTR)?.trim() || null,
+        frontendTheme: form.getAttribute(FRONTEND_THEME_ATTR)?.trim() || null,
     };
 }
 
@@ -47,6 +53,14 @@ async function requestSummaryHtml(form: HTMLFormElement, state: SummaryRequestSt
     formData.set('action', SUMMARY_ACTION);
     formData.set('accessToken', state.accessToken);
 
+    if (state.themeConfig) {
+        formData.set('themeConfig', state.themeConfig);
+    }
+
+    if (state.frontendTheme) {
+        formData.set('frontendTheme', state.frontendTheme);
+    }
+
     return requestText(getSummaryRequestUrl(), {
         method: 'POST',
         body: formData,
@@ -101,7 +115,7 @@ function initSummaryField(field: HTMLElement, root: Element): () => void {
         toggleThemeClasses(blocks, form, 'loading', false);
     };
 
-    const initialState = getSummaryRequestState(field);
+    const initialState = getSummaryRequestState(field, form);
     setLoadingState(!!initialState.accessToken);
 
     const queueFetch = (): void => {
@@ -114,7 +128,7 @@ function initSummaryField(field: HTMLElement, root: Element): () => void {
     };
 
     const fetchSummary = debounce(async() => {
-        const state = getSummaryRequestState(field);
+        const state = getSummaryRequestState(field, form);
 
         if (!getBlocks() || !state.accessToken) {
             debug.warn('Missing state for fetch.', state);

package/src/js/modules/fields/survey-likert.ts

@@ -0,0 +1,50 @@
+import surveyPresentationsCss from '#theme-css/fields/_survey-presentations.css?inline';
+
+import type { FormieModuleDefinition } from '#contracts/modules';
+import { ensureModuleStyles } from '#modules/styles';
+import { createDebug } from '#utils/debug';
+
+const FIELD_SELECTOR = '[data-formie-likert-field-layout]';
+const MODULE_ID = 'survey-likert';
+const debug = createDebug('fields', 'survey-likert');
+
+ensureModuleStyles(MODULE_ID, [surveyPresentationsCss]);
+
+export const surveyLikertModule: FormieModuleDefinition = {
+    id: MODULE_ID,
+    kind: 'field',
+    match: (ctx) => {
+        return ctx.target instanceof HTMLElement && (
+            ctx.target.matches(FIELD_SELECTOR) ||
+            !!ctx.target.querySelector(FIELD_SELECTOR)
+        );
+    },
+    setup: async(ctx) => {
+        if (!(ctx.target instanceof HTMLElement)) {
+            return;
+        }
+
+        const fields = ctx.target.matches(FIELD_SELECTOR)
+            ? [ctx.target]
+            : Array.from(ctx.target.querySelectorAll(FIELD_SELECTOR)).filter((field): field is HTMLElement => {
+                return field instanceof HTMLElement;
+            });
+
+        debug.log('Module setup.', {
+            fieldCount: fields.length,
+        });
+
+        await ctx.emit('formie:module:survey-likert:init', {
+            count: fields.length,
+        });
+
+        return {
+            destroy: () => {
+                debug.log('Module destroy.', {
+                    fieldCount: fields.length,
+                });
+                void ctx.emit('formie:module:survey-likert:destroy', {});
+            },
+        };
+    },
+};

package/src/js/modules/fields/survey-rank.ts

@@ -0,0 +1,385 @@
+import surveyPresentationsCss from '#theme-css/fields/_survey-presentations.css?inline';
+
+import type { FormieModuleDefinition } from '#contracts/modules';
+import { dispatchFieldEvent } from '#modules/fields/shared';
+import { ensureModuleStyles } from '#modules/styles';
+import { createDebug } from '#utils/debug';
+
+const FIELD_SELECTOR = '[data-formie-survey-rank]';
+const LIST_SELECTOR = '[data-formie-survey-rank-list]';
+const ITEM_SELECTOR = '[data-formie-survey-rank-item]';
+const HANDLE_SELECTOR = '[data-formie-rank-handle]';
+const PLACEHOLDER_CLASS = 'formie-rank-placeholder';
+/** Insert before a sibling once the ghost centre crosses this fraction of its height (below 0.5 swaps earlier). */
+const PLACEHOLDER_SWAP_RATIO = 0.42;
+const MODULE_ID = 'survey-rank';
+const debug = createDebug('fields', 'survey-rank');
+
+ensureModuleStyles(MODULE_ID, [surveyPresentationsCss]);
+
+type PointerOffset = {
+    x: number;
+    y: number;
+};
+
+type GhostStyleSnapshot = {
+    position: string;
+    left: string;
+    top: string;
+    width: string;
+    zIndex: string;
+    pointerEvents: string;
+    margin: string;
+};
+
+function syncRankInputs(list: HTMLElement): void {
+    list.querySelectorAll(ITEM_SELECTOR).forEach((item, index) => {
+        if (!(item instanceof HTMLElement)) {
+            return;
+        }
+
+        item.querySelectorAll('input[data-formie-rank-input]').forEach((input) => {
+            if (input instanceof HTMLInputElement) {
+                input.dataset.formieRankOrder = String(index);
+            }
+        });
+    });
+}
+
+function getRankItems(list: HTMLElement): HTMLElement[] {
+    return Array.from(list.querySelectorAll(ITEM_SELECTOR)).filter((item): item is HTMLElement => {
+        return item instanceof HTMLElement;
+    });
+}
+
+function getPlaceholderIndex(list: HTMLElement, placeholder: HTMLElement): number {
+    return Array.from(list.children).indexOf(placeholder);
+}
+
+function getRankListSiblings(
+    list: HTMLElement,
+    placeholder: HTMLElement,
+    draggedItem: HTMLElement,
+): HTMLElement[] {
+    return Array.from(list.children).filter((child): child is HTMLElement => {
+        return child instanceof HTMLElement
+            && child !== placeholder
+            && child !== draggedItem;
+    });
+}
+
+function getVerticalOverlapHeight(ghostRect: DOMRect, targetRect: DOMRect): number {
+    return Math.max(0, Math.min(ghostRect.bottom, targetRect.bottom) - Math.max(ghostRect.top, targetRect.top));
+}
+
+function getGhostReferenceY(draggedItem: HTMLElement): number {
+    const rect = draggedItem.getBoundingClientRect();
+
+    return rect.top + (rect.height / 2);
+}
+
+function getPlaceholderTargetIndex(
+    draggedItem: HTMLElement,
+    list: HTMLElement,
+    placeholder: HTMLElement,
+    draggingDown: boolean,
+): number {
+    const ghostRect = draggedItem.getBoundingClientRect();
+    const referenceY = getGhostReferenceY(draggedItem);
+    const siblings = getRankListSiblings(list, placeholder, draggedItem);
+
+    for (let index = 0; index < siblings.length; index += 1) {
+        const rect = siblings[index].getBoundingClientRect();
+        const swapLine = rect.top + (rect.height * PLACEHOLDER_SWAP_RATIO);
+        const overlapRatio = getVerticalOverlapHeight(ghostRect, rect) / rect.height;
+
+        if (overlapRatio >= PLACEHOLDER_SWAP_RATIO) {
+            if (draggingDown) {
+                return Math.min(index + 1, siblings.length);
+            }
+
+            return index;
+        }
+
+        if (referenceY < swapLine) {
+            return index;
+        }
+    }
+
+    return siblings.length;
+}
+
+function movePlaceholderToIndex(
+    list: HTMLElement,
+    placeholder: HTMLElement,
+    draggedItem: HTMLElement,
+    targetIndex: number,
+): void {
+    const siblings = getRankListSiblings(list, placeholder, draggedItem);
+    const reference = siblings[targetIndex] ?? null;
+
+    if (reference) {
+        list.insertBefore(placeholder, reference);
+        return;
+    }
+
+    list.appendChild(placeholder);
+}
+
+function createPlaceholder(list: HTMLElement, item: HTMLElement): HTMLElement {
+    const placeholder = document.createElement('li');
+
+    placeholder.className = PLACEHOLDER_CLASS;
+    placeholder.setAttribute('data-formie-rank-placeholder', 'true');
+    placeholder.setAttribute('aria-hidden', 'true');
+    placeholder.style.height = `${item.offsetHeight}px`;
+    list.insertBefore(placeholder, item);
+
+    return placeholder;
+}
+
+function captureGhostStyles(item: HTMLElement): GhostStyleSnapshot {
+    return {
+        position: item.style.position,
+        left: item.style.left,
+        top: item.style.top,
+        width: item.style.width,
+        zIndex: item.style.zIndex,
+        pointerEvents: item.style.pointerEvents,
+        margin: item.style.margin,
+    };
+}
+
+function applyGhostStyles(item: HTMLElement, rect: DOMRect): void {
+    item.style.position = 'fixed';
+    item.style.left = `${rect.left}px`;
+    item.style.top = `${rect.top}px`;
+    item.style.width = `${rect.width}px`;
+    item.style.zIndex = '1000';
+    item.style.pointerEvents = 'none';
+    item.style.margin = '0';
+}
+
+function updateGhostPosition(item: HTMLElement, event: PointerEvent, offset: PointerOffset): void {
+    item.style.left = `${event.clientX - offset.x}px`;
+    item.style.top = `${event.clientY - offset.y}px`;
+}
+
+function restoreGhostStyles(item: HTMLElement, snapshot: GhostStyleSnapshot): void {
+    item.style.position = snapshot.position;
+    item.style.left = snapshot.left;
+    item.style.top = snapshot.top;
+    item.style.width = snapshot.width;
+    item.style.zIndex = snapshot.zIndex;
+    item.style.pointerEvents = snapshot.pointerEvents;
+    item.style.margin = snapshot.margin;
+}
+
+function bindRankField(field: HTMLElement): () => void {
+    const list = field.querySelector(LIST_SELECTOR);
+
+    if (!(list instanceof HTMLElement)) {
+        debug.warn('Missing rank list; skipping field.');
+        return () => {};
+    }
+
+    let draggedItem: HTMLElement | null = null;
+    let placeholder: HTMLElement | null = null;
+    let ghostStyleSnapshot: GhostStyleSnapshot | null = null;
+    let pointerOffset: PointerOffset | null = null;
+    let activeCaptureTarget: HTMLElement | null = null;
+    let activePointerId: number | null = null;
+    let lastTargetIndex: number | null = null;
+    let startPlaceholderIndex: number | null = null;
+    let lastGhostReferenceY: number | null = null;
+    let didReorder = false;
+    const cleanups: Array<() => void> = [];
+
+    const finishDrag = () => {
+        if (draggedItem && placeholder) {
+            list.insertBefore(draggedItem, placeholder);
+            placeholder.remove();
+        } else if (placeholder) {
+            placeholder.remove();
+        }
+
+        if (draggedItem && ghostStyleSnapshot) {
+            restoreGhostStyles(draggedItem, ghostStyleSnapshot);
+            draggedItem.removeAttribute('data-formie-rank-dragging');
+        }
+
+        if (activeCaptureTarget && activePointerId !== null) {
+            try {
+                activeCaptureTarget.releasePointerCapture(activePointerId);
+            } catch {
+                // Pointer capture may already be released.
+            }
+        }
+
+        draggedItem = null;
+        placeholder = null;
+        ghostStyleSnapshot = null;
+        pointerOffset = null;
+        activeCaptureTarget = null;
+        activePointerId = null;
+        lastTargetIndex = null;
+        startPlaceholderIndex = null;
+        lastGhostReferenceY = null;
+        list.removeAttribute('data-formie-rank-sorting');
+
+        if (didReorder) {
+            syncRankInputs(list);
+            dispatchFieldEvent(field, MODULE_ID, 'reorder', {
+                rankField: field,
+            });
+        }
+
+        didReorder = false;
+    };
+
+    const onPointerMove = (event: PointerEvent) => {
+        if (!draggedItem || !placeholder || !pointerOffset || event.pointerId !== activePointerId) {
+            return;
+        }
+
+        event.preventDefault();
+
+        updateGhostPosition(draggedItem, event, pointerOffset);
+
+        const referenceY = getGhostReferenceY(draggedItem);
+        const draggingDown = lastGhostReferenceY === null || referenceY >= lastGhostReferenceY;
+
+        lastGhostReferenceY = referenceY;
+
+        const targetIndex = getPlaceholderTargetIndex(draggedItem, list, placeholder, draggingDown);
+
+        if (targetIndex === lastTargetIndex) {
+            return;
+        }
+
+        lastTargetIndex = targetIndex;
+        movePlaceholderToIndex(list, placeholder, draggedItem, targetIndex);
+    };
+
+    const onPointerUp = (event: PointerEvent) => {
+        if (event.pointerId !== activePointerId) {
+            return;
+        }
+
+        document.removeEventListener('pointermove', onPointerMove);
+        document.removeEventListener('pointerup', onPointerUp);
+        document.removeEventListener('pointercancel', onPointerUp);
+
+        if (placeholder && startPlaceholderIndex !== null) {
+            didReorder = getPlaceholderIndex(list, placeholder) !== startPlaceholderIndex;
+        }
+
+        finishDrag();
+    };
+
+    getRankItems(list).forEach((item) => {
+        if (!item.querySelector(HANDLE_SELECTOR)) {
+            return;
+        }
+
+        const onPointerDown = (event: PointerEvent) => {
+            if (event.button !== 0) {
+                return;
+            }
+
+            if (event.target instanceof HTMLInputElement) {
+                return;
+            }
+
+            event.preventDefault();
+
+            const rect = item.getBoundingClientRect();
+
+            draggedItem = item;
+            activeCaptureTarget = item;
+            activePointerId = event.pointerId;
+            pointerOffset = {
+                x: event.clientX - rect.left,
+                y: event.clientY - rect.top,
+            };
+            ghostStyleSnapshot = captureGhostStyles(item);
+            placeholder = createPlaceholder(list, item);
+            startPlaceholderIndex = getPlaceholderIndex(list, placeholder);
+            didReorder = false;
+
+            applyGhostStyles(item, rect);
+            item.setAttribute('data-formie-rank-dragging', 'true');
+            list.setAttribute('data-formie-rank-sorting', 'true');
+            item.setPointerCapture(event.pointerId);
+            lastGhostReferenceY = getGhostReferenceY(item);
+            lastTargetIndex = getPlaceholderTargetIndex(item, list, placeholder, true);
+
+            document.addEventListener('pointermove', onPointerMove);
+            document.addEventListener('pointerup', onPointerUp);
+            document.addEventListener('pointercancel', onPointerUp);
+        };
+
+        item.addEventListener('pointerdown', onPointerDown);
+        cleanups.push(() => {
+            item.removeEventListener('pointerdown', onPointerDown);
+        });
+    });
+
+    syncRankInputs(list);
+
+    return () => {
+        document.removeEventListener('pointermove', onPointerMove);
+        document.removeEventListener('pointerup', onPointerUp);
+        document.removeEventListener('pointercancel', onPointerUp);
+        cleanups.forEach((cleanup) => {
+            cleanup();
+        });
+        finishDrag();
+    };
+}
+
+export const surveyRankModule: FormieModuleDefinition = {
+    id: MODULE_ID,
+    kind: 'field',
+    match: (ctx) => {
+        return ctx.target instanceof HTMLElement && (
+            ctx.target.matches(FIELD_SELECTOR) ||
+            !!ctx.target.querySelector(FIELD_SELECTOR)
+        );
+    },
+    setup: async(ctx) => {
+        if (!(ctx.target instanceof HTMLElement)) {
+            return;
+        }
+
+        const fields = ctx.target.matches(FIELD_SELECTOR)
+            ? [ctx.target]
+            : Array.from(ctx.target.querySelectorAll(FIELD_SELECTOR)).filter((field): field is HTMLElement => {
+                return field instanceof HTMLElement;
+            });
+
+        debug.log('Module setup.', {
+            fieldCount: fields.length,
+        });
+
+        const destroyBindings = fields.map((field) => {
+            return bindRankField(field);
+        });
+
+        await ctx.emit('formie:module:survey-rank:init', {
+            count: fields.length,
+        });
+
+        return {
+            destroy: () => {
+                destroyBindings.forEach((destroyBinding) => {
+                    destroyBinding();
+                });
+                debug.log('Module destroy.', {
+                    fieldCount: fields.length,
+                });
+                void ctx.emit('formie:module:survey-rank:destroy', {});
+            },
+        };
+    },
+};