@verbb/formie-browser 1.0.7 → 1.0.8

package/src/js/core/page-client-event.ts

@@ -3,11 +3,17 @@ import { createDebug } from '#utils/debug';
 const debug = createDebug('general', 'page-client-event');
 
 const CLIENT_EVENT_ATTR = 'data-formie-client-event';
+const PENDING_CLIENT_EVENTS_ATTR = 'data-formie-pending-client-events';
 
 type ClientEventPayload = {
     fields?: Array<{ label?: string; value?: string }>;
 };
 
+export type ResolvedClientEvent = {
+    event: string;
+    payload: Record<string, string>;
+};
+
 function escapePageIdForSelector(pageId: string): string {
     if (typeof window !== 'undefined' && window.CSS?.escape) {
         return window.CSS.escape(pageId);
@@ -70,11 +76,83 @@ function buildPayloadObject(fields: Array<{ label?: string; value?: string }>):
     return out;
 }
 
+function normalizeResolvedClientEvents(events: unknown): ResolvedClientEvent[] {
+    if (!Array.isArray(events)) {
+        return [];
+    }
+
+    return events
+        .map((item) => {
+            if (!item || typeof item !== 'object') {
+                return null;
+            }
+
+            const record = item as ResolvedClientEvent;
+            const eventName = typeof record.event === 'string' ? record.event.trim() : '';
+            const payload = record.payload && typeof record.payload === 'object' ? record.payload : null;
+
+            if (!eventName || !payload) {
+                return null;
+            }
+
+            return {
+                event: eventName,
+                payload,
+            };
+        })
+        .filter((item): item is ResolvedClientEvent => item !== null);
+}
+
+export function dispatchResolvedClientEvents(form: HTMLFormElement, events: ResolvedClientEvent[]): void {
+    if (!events.length) {
+        return;
+    }
+
+    const win = window as Window & { dataLayer?: unknown[] };
+    win.dataLayer = win.dataLayer || [];
+
+    events.forEach((item) => {
+        win.dataLayer!.push(item.payload);
+
+        form.dispatchEvent(new CustomEvent('formie:client-event', {
+            bubbles: true,
+            detail: {
+                event: item.event,
+                payload: item.payload,
+            },
+        }));
+    });
+
+    debug.log('Dispatched resolved client events.', {
+        count: events.length,
+        events: events.map((item) => item.event),
+    });
+}
+
+export function dispatchPendingClientEventsFromForm(form: HTMLFormElement): void {
+    const rawAttr = form.getAttribute(PENDING_CLIENT_EVENTS_ATTR);
+
+    if (!rawAttr?.trim()) {
+        return;
+    }
+
+    try {
+        const parsed = JSON.parse(rawAttr) as unknown;
+        const events = normalizeResolvedClientEvents(parsed);
+
+        if (events.length) {
+            dispatchResolvedClientEvents(form, events);
+        }
+    } catch {
+        debug.warn('Invalid pending client events JSON on form element.');
+    } finally {
+        form.removeAttribute(PENDING_CLIENT_EVENTS_ATTR);
+    }
+}
+
 /**
- * When the builder enables JavaScript events for a page, the theme emits
- * `data-formie-client-event` on that page's section. On each successful
- * **submit** (not back/save), push the configured key/value object to
- * `window.dataLayer` (when present) and dispatch `formie:client-event`.
+ * Legacy static page attribute dispatch. Prefer server-resolved `clientEvents`
+ * from the submit response when available.
  */
 export function dispatchPageClientEventForSubmit(form: HTMLFormElement, action: string): void {
     if (action !== 'submit') {
@@ -112,18 +190,8 @@ export function dispatchPageClientEventForSubmit(form: HTMLFormElement, action:
     }
 
     const payload = buildPayloadObject(config.fields);
-    const win = window as Window & { dataLayer?: unknown[] };
-
-    win.dataLayer = win.dataLayer || [];
-    win.dataLayer.push(payload);
-
-    form.dispatchEvent(new CustomEvent('formie:client-event', {
-        bubbles: true,
-        detail: { payload },
-    }));
-
-    debug.log('Dispatched page client event.', {
-        pageId,
-        keys: Object.keys(payload),
-    });
+    dispatchResolvedClientEvents(form, [{
+        event: typeof payload.event === 'string' && payload.event !== '' ? payload.event : 'formPageSubmission',
+        payload,
+    }]);
 }

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';
@@ -568,7 +568,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/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', {});
+            },
+        };
+    },
+};