@verbb/formie-browser 1.0.0

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

@@ -0,0 +1,197 @@
+import tableCss from '#theme/fields/_table.css?inline';
+
+import type { FormieModuleDefinition } from '#contracts/modules';
+import { dispatchFieldEvent, getTemplateSource, getTemplateSourceHtml } from '#modules/fields/shared';
+import { ensureModuleStyles } from '#modules/styles';
+import { sleep } from '#utils/async';
+
+const FIELD_SELECTOR = '[data-formie-table-field-layout]';
+const TABLE_SELECTOR = '[data-formie-table]';
+const TABLE_BODY_SELECTOR = '[data-formie-table-body]';
+const ROW_SELECTOR = '[data-formie-table-row]';
+const ADD_SELECTOR = '[data-formie-table-add]';
+const REMOVE_SELECTOR = '[data-formie-table-remove]';
+const TEMPLATE_ID_ATTR = 'data-formie-template-id';
+const ROW_ID_ATTR = 'data-formie-table-row-id';
+const MODULE_ID = 'table';
+
+ensureModuleStyles(MODULE_ID, [tableCss]);
+
+type TableOptions = {
+    static?: boolean;
+};
+
+function getTemplate(field: HTMLElement, templateId?: string | null): HTMLElement | HTMLTemplateElement | HTMLScriptElement | null {
+    return getTemplateSource(field, templateId);
+}
+
+function getRowCount(field: HTMLElement): number {
+    return field.querySelectorAll(ROW_SELECTOR).length;
+}
+
+function getNextRowId(field: HTMLElement): number {
+    return Array.from(field.querySelectorAll(ROW_SELECTOR)).reduce((max, row) => {
+        const current = parseInt((row as HTMLElement).getAttribute(ROW_ID_ATTR) || '', 10);
+        return Number.isNaN(current) ? max : Math.max(max, current + 1);
+    }, 0);
+}
+
+function syncAddButton(addButton: HTMLButtonElement | null, rowCount: number): void {
+    if (!addButton) {
+        return;
+    }
+
+    const maxRows = parseInt(addButton.getAttribute('data-formie-max-rows') || '', 10);
+    addButton.disabled = maxRows > 0 && rowCount >= maxRows;
+}
+
+function bindTableField(field: HTMLElement, options: TableOptions): () => void {
+    const table = field.querySelector(TABLE_SELECTOR);
+    const tbody = field.querySelector(TABLE_BODY_SELECTOR);
+    const addButton = field.querySelector(ADD_SELECTOR);
+
+    if (!(table instanceof HTMLElement) || !(tbody instanceof HTMLElement)) {
+        return () => {};
+    }
+
+    const removeHandlers = new Map<HTMLElement, EventListener>();
+    // Tables use a monotonically increasing row token so newly-added rows keep a
+    // stable name/index even if earlier rows were removed.
+    let rowCounter = getNextRowId(field);
+
+    const bindRemoveButtons = () => {
+        field.querySelectorAll(REMOVE_SELECTOR).forEach((button) => {
+            if (!(button instanceof HTMLElement) || removeHandlers.has(button)) {
+                return;
+            }
+
+            const handler: EventListener = (event) => {
+                event.preventDefault();
+                const row = button.closest(ROW_SELECTOR);
+                if (!(row instanceof HTMLElement)) {
+                    return;
+                }
+
+                const minRows = parseInt((addButton instanceof HTMLButtonElement ? addButton.getAttribute('data-formie-min-rows') : '') || '', 10);
+                if (minRows > 0 && getRowCount(field) <= minRows) {
+                    return;
+                }
+
+                row.remove();
+                syncAddButton(addButton instanceof HTMLButtonElement ? addButton : null, getRowCount(field));
+                dispatchFieldEvent(field, MODULE_ID, 'remove', {
+                    table: field,
+                    row,
+                });
+            };
+
+            button.addEventListener('click', handler);
+            removeHandlers.set(button, handler);
+        });
+    };
+
+    const addRow = async() => {
+        if (options.static || !(addButton instanceof HTMLButtonElement)) {
+            return;
+        }
+
+        const handle = addButton.getAttribute('data-formie-table-add');
+        if (!handle) {
+            return;
+        }
+
+        const templateId = addButton.getAttribute(TEMPLATE_ID_ATTR) || field.getAttribute(TEMPLATE_ID_ATTR);
+
+        const maxRows = parseInt(addButton.getAttribute('data-formie-max-rows') || '', 10);
+        if (maxRows > 0 && getRowCount(field) >= maxRows) {
+            return;
+        }
+
+        const template = getTemplate(field, templateId);
+        if (!template) {
+            return;
+        }
+
+        const html = getTemplateSourceHtml(template).replaceAll('__ROW__', String(rowCounter++));
+        const row = document.createElement('tr');
+        row.setAttribute('data-formie-table-row', 'true');
+        row.setAttribute(ROW_ID_ATTR, String(rowCounter - 1));
+        row.innerHTML = html;
+        tbody.appendChild(row);
+
+        // Delay follow-up wiring long enough for nested controls/modules inside the
+        // new row to exist before downstream listeners react to append events.
+        await sleep(50);
+        bindRemoveButtons();
+        syncAddButton(addButton, getRowCount(field));
+        dispatchFieldEvent(field, MODULE_ID, 'append', {
+            table: field,
+            row,
+        });
+    };
+
+    const addHandler = (event: Event) => {
+        event.preventDefault();
+        void addRow();
+    };
+
+    if (addButton instanceof HTMLButtonElement && !options.static) {
+        addButton.addEventListener('click', addHandler);
+    }
+
+    bindRemoveButtons();
+    syncAddButton(addButton instanceof HTMLButtonElement ? addButton : null, getRowCount(field));
+    dispatchFieldEvent(field, MODULE_ID, 'init', {
+        table: field,
+    });
+
+    return () => {
+        if (addButton instanceof HTMLButtonElement) {
+            addButton.removeEventListener('click', addHandler);
+        }
+
+        removeHandlers.forEach((handler, button) => {
+            button.removeEventListener('click', handler);
+        });
+    };
+}
+
+export const tableModule: 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) => {
+        const options = (ctx.options || {}) as TableOptions;
+        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;
+            });
+
+        const destroyBindings = fields.map((field) => {
+            return bindTableField(field, options);
+        });
+
+        await ctx.emit('formie:module:table:init', {
+            count: fields.length,
+        });
+
+        return {
+            destroy: () => {
+                destroyBindings.forEach((destroyBinding) => {
+                    destroyBinding();
+                });
+                void ctx.emit('formie:module:table:destroy', {});
+            },
+        };
+    },
+};

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

@@ -0,0 +1,280 @@
+import textLimitCss from '#theme/fields/_text-limit.css?inline';
+
+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';
+
+const INPUT_SELECTOR = 'input[data-formie-single-line-text-input], textarea[data-formie-multi-line-text-input]';
+const TEXT_LIMIT_VALIDATORS = [
+    'textMinCharacterLimit',
+    'textMaxCharacterLimit',
+    'textMinWordLimit',
+    'textMaxWordLimit',
+] as const;
+const VALIDATOR_SCOPE = 'text-limit';
+const ALLOW_OVERTYPE_ATTR = 'data-formie-text-limit-allow-overtype';
+const limitTargetCache = new WeakMap<HTMLInputElement | HTMLTextAreaElement, HTMLElement | null>();
+
+ensureModuleStyles('text-limit', [textLimitCss]);
+
+type TextLimitOptions = {
+    allowOvertype?: boolean;
+};
+
+function isTextLimitInput(input: Element): input is HTMLInputElement | HTMLTextAreaElement {
+    return input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement;
+}
+
+function getLimitValue(input: HTMLInputElement | HTMLTextAreaElement, attribute: string): number {
+    return parseInt(input.getAttribute(attribute) || '', 10) || 0;
+}
+
+function hasAnyLimitAttributes(input: HTMLInputElement | HTMLTextAreaElement): boolean {
+    return input.hasAttribute('data-formie-min-chars') ||
+        input.hasAttribute('data-formie-max-chars') ||
+        input.hasAttribute('data-formie-min-words') ||
+        input.hasAttribute('data-formie-max-words');
+}
+
+function hasCounterLimitAttributes(input: HTMLInputElement | HTMLTextAreaElement): boolean {
+    return input.hasAttribute('data-formie-max-chars') || input.hasAttribute('data-formie-max-words');
+}
+
+function allowsOvertype(input: HTMLInputElement | HTMLTextAreaElement): boolean {
+    return input.hasAttribute(ALLOW_OVERTYPE_ATTR);
+}
+
+function hasNoRawValue(input: HTMLInputElement | HTMLTextAreaElement): boolean {
+    // Character limits count literal spaces, so only skip validation for a
+    // truly empty control, not whitespace-only input.
+    return input.value === '';
+}
+
+function registerValidators(form: HTMLFormElement | null): void {
+    // Register once per form even when many text-limit fields mount, otherwise
+    // the validator would evaluate identical limit rules multiple times.
+    retainFormValidators(form, VALIDATOR_SCOPE, (validator) => {
+        validator.addValidator('textMinCharacterLimit', ({ input }) => {
+            if (!isTextLimitInput(input)) {
+                return true;
+            }
+
+            const limit = getLimitValue(input, 'data-formie-min-chars');
+
+            if (!limit || hasNoRawValue(input)) {
+                return true;
+            }
+
+            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') || '',
+            });
+        });
+
+        validator.addValidator('textMaxCharacterLimit', ({ input }) => {
+            if (!isTextLimitInput(input)) {
+                return true;
+            }
+
+            if (allowsOvertype(input)) {
+                return true;
+            }
+
+            const limit = getLimitValue(input, 'data-formie-max-chars');
+
+            if (!limit || hasNoRawValue(input)) {
+                return true;
+            }
+
+            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') || '',
+            });
+        });
+
+        validator.addValidator('textMinWordLimit', ({ input }) => {
+            if (!isTextLimitInput(input)) {
+                return true;
+            }
+
+            const limit = getLimitValue(input, 'data-formie-min-words');
+
+            if (!limit || input.value.trim() === '') {
+                return true;
+            }
+
+            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') || '',
+            });
+        });
+
+        validator.addValidator('textMaxWordLimit', ({ input }) => {
+            if (!isTextLimitInput(input)) {
+                return true;
+            }
+
+            if (allowsOvertype(input)) {
+                return true;
+            }
+
+            const limit = getLimitValue(input, 'data-formie-max-words');
+
+            if (!limit || input.value.trim() === '') {
+                return true;
+            }
+
+            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') || '',
+            });
+        });
+    });
+}
+
+function unregisterValidators(form: HTMLFormElement | null): void {
+    releaseFormValidators(form, VALIDATOR_SCOPE, TEXT_LIMIT_VALIDATORS);
+}
+
+function getLimitTarget(input: HTMLInputElement | HTMLTextAreaElement): HTMLElement | null {
+    if (limitTargetCache.has(input)) {
+        return limitTargetCache.get(input) || null;
+    }
+
+    const field = input.closest('[data-formie-field-handle]') as HTMLElement | null;
+
+    if (!field) {
+        limitTargetCache.set(input, null);
+        return null;
+    }
+
+    const existingTarget = field.querySelector('[data-formie-limit-text]') as HTMLElement | null;
+    if (existingTarget) {
+        limitTargetCache.set(input, existingTarget);
+        return existingTarget;
+    }
+
+    const control = field.querySelector('[data-formie-field-control]') as HTMLElement | null;
+    const target = document.createElement('div');
+    target.className = 'formie-field-limit formie-limit-text';
+    target.setAttribute('data-formie-field-limit', 'true');
+    target.setAttribute('data-formie-limit-text', 'true');
+
+    if (control?.parentElement) {
+        control.insertAdjacentElement('afterend', target);
+        limitTargetCache.set(input, target);
+        return target;
+    }
+
+    field.appendChild(target);
+    limitTargetCache.set(input, target);
+
+    return target;
+}
+
+function renderCounter(target: HTMLElement, remaining: number, unit: 'character' | 'word'): void {
+    const number = document.createElement('span');
+    number.className = remaining < 0 ? 'formie-limit-number formie-limit-number-error' : 'formie-limit-number';
+    number.textContent = String(remaining);
+
+    target.replaceChildren(
+        number,
+        document.createTextNode(` ${Math.abs(remaining) === 1 ? unit : `${unit}s`} left`)
+    );
+}
+
+function updateCounter(input: HTMLInputElement | HTMLTextAreaElement): void {
+    const maxChars = getLimitValue(input, 'data-formie-max-chars');
+    const maxWords = getLimitValue(input, 'data-formie-max-words');
+    const target = getLimitTarget(input);
+
+    if (!target) {
+        return;
+    }
+
+    const metrics = getTextLimitMetrics(input.value);
+
+    if (maxChars > 0) {
+        const remaining = maxChars - metrics.graphemeCount;
+        renderCounter(target, remaining, 'character');
+
+        return;
+    }
+
+    if (maxWords > 0) {
+        const remaining = maxWords - metrics.wordCount;
+        renderCounter(target, remaining, 'word');
+    }
+}
+
+export const textLimitModule: FormieModuleDefinition = {
+    id: 'text-limit',
+    kind: 'field',
+    match: (ctx) => {
+        return !!ctx.target.querySelector(INPUT_SELECTOR);
+    },
+    setup: async (ctx) => {
+        const options = (ctx.options || {}) as TextLimitOptions;
+        const field = getModuleFieldTarget(ctx);
+        const inputs = Array.from((field || ctx.target).querySelectorAll(INPUT_SELECTOR)).filter((input): input is HTMLInputElement | HTMLTextAreaElement => {
+            return (input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement) && hasAnyLimitAttributes(input);
+        });
+        const counterInputs = inputs.filter((input) => {
+            return hasCounterLimitAttributes(input);
+        });
+
+        if (options.allowOvertype) {
+            inputs.forEach((input) => {
+                input.setAttribute(ALLOW_OVERTYPE_ATTR, 'true');
+            });
+        }
+
+        registerValidators(ctx.form);
+
+        const unbinds = counterInputs.map((input) => {
+            const handler = () => {
+                updateCounter(input);
+            };
+
+            input.addEventListener('input', handler);
+            input.addEventListener('change', handler);
+            updateCounter(input);
+
+            return () => {
+                input.removeEventListener('input', handler);
+                input.removeEventListener('change', handler);
+            };
+        });
+
+        await ctx.emit('formie:module:text-limit:init', {
+            count: inputs.length,
+        });
+
+        return {
+            destroy: () => {
+                unbinds.forEach((unbind) => {
+                    unbind();
+                });
+
+                if (options.allowOvertype) {
+                    inputs.forEach((input) => {
+                        input.removeAttribute(ALLOW_OVERTYPE_ATTR);
+                    });
+                }
+
+                unregisterValidators(ctx.form);
+                void ctx.emit('formie:module:text-limit:destroy', {});
+            },
+        };
+    },
+};