@verbb/formie-browser 1.0.4 → 1.0.5

package/src/js/modules/fields/custom-link.ts

@@ -0,0 +1,95 @@
+import type { FormieModuleDefinition } from '#contracts/modules';
+import { getModuleFieldTarget, observeMatchingElements } from '#modules/fields/shared';
+
+const MODULE_ID = 'custom-link';
+const LINK_SELECTOR = '[data-formie-custom-link]';
+
+type LinkInputAttributes = {
+    type: string;
+    inputMode: string;
+    autocomplete: string;
+};
+
+function flag(element: HTMLElement, name: string): boolean {
+    return element.getAttribute(name) === '1';
+}
+
+function getValueInputAttributes(link: HTMLElement, type: string): LinkInputAttributes {
+    if (type === 'email') {
+        return {
+            type: 'email',
+            inputMode: 'email',
+            autocomplete: 'email',
+        };
+    }
+
+    if (type === 'tel' || type === 'sms') {
+        return {
+            type: 'tel',
+            inputMode: 'tel',
+            autocomplete: 'tel',
+        };
+    }
+
+    const strictUrl = !flag(link, 'data-formie-custom-link-allow-root-relative') &&
+        !flag(link, 'data-formie-custom-link-allow-anchors') &&
+        !flag(link, 'data-formie-custom-link-allow-custom-schemes');
+
+    return {
+        type: strictUrl ? 'url' : 'text',
+        inputMode: 'url',
+        autocomplete: 'url',
+    };
+}
+
+function isCustomLink(element: Element): element is HTMLElement {
+    return element instanceof HTMLElement && element.matches(LINK_SELECTOR);
+}
+
+function initCustomLink(link: HTMLElement): () => void {
+    const typeInput = link.querySelector('[data-formie-custom-link-type]');
+    const valueInput = link.querySelector('[data-formie-custom-link-value]');
+
+    if (!(typeInput instanceof HTMLSelectElement) || !(valueInput instanceof HTMLInputElement)) {
+        return () => {};
+    }
+
+    const syncValueInput = (): void => {
+        const attributes = getValueInputAttributes(link, typeInput.value);
+        valueInput.type = attributes.type;
+        valueInput.inputMode = attributes.inputMode;
+        valueInput.setAttribute('autocomplete', attributes.autocomplete);
+    };
+
+    syncValueInput();
+    typeInput.addEventListener('change', syncValueInput);
+
+    return () => {
+        typeInput.removeEventListener('change', syncValueInput);
+    };
+}
+
+export const customLinkModule: FormieModuleDefinition = {
+    id: MODULE_ID,
+    kind: 'field',
+    match: ({ target }) => {
+        return target instanceof Element && (
+            target.matches(LINK_SELECTOR) ||
+            !!target.querySelector(LINK_SELECTOR)
+        );
+    },
+    setup: async(ctx) => {
+        const field = getModuleFieldTarget(ctx);
+        const root = field || ctx.target;
+
+        if (!(root instanceof Element)) {
+            return;
+        }
+
+        const cleanup = observeMatchingElements(root, LINK_SELECTOR, isCustomLink, initCustomLink);
+
+        return {
+            destroy: cleanup,
+        };
+    },
+};

package/src/js/modules/fields/custom-maps.ts

@@ -0,0 +1,339 @@
+import type { FormieModuleDefinition } from '#contracts/modules';
+import type * as Leaflet from 'leaflet';
+import leafletCss from 'leaflet/dist/leaflet.css?inline';
+import { getModuleFieldTarget, observeMatchingElements } from '#modules/fields/shared';
+import { ensureModuleStyles } from '#modules/styles';
+
+const MODULE_ID = 'custom-maps';
+const MAPS_SELECTOR = '[data-formie-custom-maps]';
+
+ensureModuleStyles(MODULE_ID, [leafletCss]);
+
+type LatLng = {
+    lat: number;
+    lng: number;
+};
+
+type MapsSettings = {
+    mapTiles?: string;
+    mapToken?: string | Record<string, string>;
+    geoService?: string;
+    geoToken?: string | Record<string, string>;
+    defaultLat?: number | null;
+    defaultLng?: number | null;
+    defaultZoom?: number | null;
+    minZoom?: number | null;
+    maxZoom?: number | null;
+    country?: string | null;
+};
+
+type MapsElements = {
+    root: HTMLElement;
+    canvas: HTMLElement | null;
+    searchInput: HTMLInputElement | null;
+    addressInput: HTMLInputElement | null;
+    latInput: HTMLInputElement | null;
+    lngInput: HTMLInputElement | null;
+    zoomInput: HTMLInputElement | null;
+    partsInput: HTMLInputElement | null;
+    currentLocationButton: HTMLButtonElement | null;
+};
+
+type NominatimResult = {
+    display_name?: string;
+    lat?: string;
+    lon?: string;
+    address?: Record<string, string | undefined>;
+};
+
+let leafletPromise: Promise<typeof Leaflet> | null = null;
+
+function isCustomMaps(element: Element): element is HTMLElement {
+    return element instanceof HTMLElement && element.matches(MAPS_SELECTOR);
+}
+
+function parseSettings(root: HTMLElement): MapsSettings {
+    const raw = root.getAttribute('data-formie-custom-maps-settings');
+
+    if (!raw) {
+        return {};
+    }
+
+    try {
+        return JSON.parse(raw) as MapsSettings;
+    } catch {
+        return {};
+    }
+}
+
+function findElements(root: HTMLElement): MapsElements {
+    return {
+        root,
+        canvas: root.querySelector<HTMLElement>('[data-formie-custom-maps-canvas]'),
+        searchInput: root.querySelector<HTMLInputElement>('[data-formie-custom-maps-search]'),
+        addressInput: root.querySelector<HTMLInputElement>('[data-formie-custom-map-address]'),
+        latInput: root.querySelector<HTMLInputElement>('[data-formie-custom-map-lat]'),
+        lngInput: root.querySelector<HTMLInputElement>('[data-formie-custom-map-lng]'),
+        zoomInput: root.querySelector<HTMLInputElement>('[data-formie-custom-map-zoom]'),
+        partsInput: root.querySelector<HTMLInputElement>('[data-formie-custom-maps-parts]'),
+        currentLocationButton: root.querySelector<HTMLButtonElement>('[data-formie-custom-maps-current-location]'),
+    };
+}
+
+function toNumber(value: string | number | null | undefined): number | null {
+    if (value === null || value === undefined || value === '') {
+        return null;
+    }
+
+    const number = Number(value);
+
+    return Number.isFinite(number) ? number : null;
+}
+
+function getCurrentLatLng(elements: MapsElements, settings: MapsSettings): LatLng {
+    return {
+        lat: toNumber(elements.latInput?.value) ?? settings.defaultLat ?? 51.272154,
+        lng: toNumber(elements.lngInput?.value) ?? settings.defaultLng ?? 0.514951,
+    };
+}
+
+function getCurrentZoom(elements: MapsElements, settings: MapsSettings): number {
+    return toNumber(elements.zoomInput?.value) ?? settings.defaultZoom ?? 15;
+}
+
+function setValue(input: HTMLInputElement | null, value: string | number | null | undefined): void {
+    if (!input) {
+        return;
+    }
+
+    input.value = value === null || value === undefined ? '' : String(value);
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+}
+
+function syncCoordinates(elements: MapsElements, latLng: LatLng, zoom?: number): void {
+    setValue(elements.latInput, latLng.lat);
+    setValue(elements.lngInput, latLng.lng);
+
+    if (zoom !== undefined) {
+        setValue(elements.zoomInput, zoom);
+    }
+}
+
+function loadLeaflet(): Promise<typeof Leaflet> {
+    if (!leafletPromise) {
+        leafletPromise = import('leaflet');
+    }
+
+    return leafletPromise;
+}
+
+function getRasterTileUrl(settings: MapsSettings): string {
+    switch (settings.mapTiles) {
+        case 'openstreetmap':
+        case 'wikimedia':
+            return 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png';
+        case 'carto.light_all':
+            return 'https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
+        case 'carto.dark_all':
+            return 'https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png';
+        case 'carto.rastertiles/voyager':
+        default:
+            return 'https://a.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png';
+    }
+}
+
+function mapNominatimParts(address: Record<string, string | undefined> | undefined): Record<string, string> {
+    if (!address) {
+        return {};
+    }
+
+    return {
+        number: address.house_number || '',
+        address: address.road || address.pedestrian || address.footway || address.path || address.neighbourhood || '',
+        city: address.city || address.town || address.village || address.suburb || '',
+        postcode: address.postcode || '',
+        county: address.county || '',
+        state: address.state || address.state_district || '',
+        country: address.country || '',
+    };
+}
+
+async function searchNominatim(query: string, settings: MapsSettings): Promise<{ latLng: LatLng; address: string; parts: Record<string, string> } | null> {
+    const params = new URLSearchParams({
+        format: 'jsonv2',
+        limit: '1',
+        addressdetails: '1',
+        q: query,
+    });
+
+    if (settings.country) {
+        params.set('countrycodes', settings.country.toLowerCase());
+    }
+
+    const response = await fetch(`https://nominatim.openstreetmap.org/search?${params.toString()}`);
+
+    if (!response.ok) {
+        return null;
+    }
+
+    const results = await response.json() as NominatimResult[];
+    const result = results[0];
+    const lat = toNumber(result?.lat);
+    const lng = toNumber(result?.lon);
+
+    if (!result || lat === null || lng === null) {
+        return null;
+    }
+
+    return {
+        latLng: { lat, lng },
+        address: result.display_name || query,
+        parts: mapNominatimParts(result.address),
+    };
+}
+
+function applySearchResult(elements: MapsElements, result: { latLng: LatLng; address: string; parts: Record<string, string> }, zoom: number): void {
+    setValue(elements.addressInput, result.address);
+    setValue(elements.searchInput, result.address);
+    setValue(elements.partsInput, JSON.stringify(result.parts));
+    syncCoordinates(elements, result.latLng, zoom);
+}
+
+async function initLeafletMap(elements: MapsElements, settings: MapsSettings): Promise<() => void> {
+    if (!elements.canvas) {
+        return () => {};
+    }
+
+    const L = await loadLeaflet();
+    const initialLatLng = getCurrentLatLng(elements, settings);
+    const initialZoom = getCurrentZoom(elements, settings);
+    const map = L.map(elements.canvas, {
+        minZoom: settings.minZoom ?? 3,
+        maxZoom: settings.maxZoom ?? 18,
+    }).setView([initialLatLng.lat, initialLatLng.lng], initialZoom);
+    const marker = L.marker([initialLatLng.lat, initialLatLng.lng], {
+        draggable: true,
+    }).addTo(map);
+
+    L.tileLayer(getRasterTileUrl(settings), {
+        maxZoom: settings.maxZoom ?? 18,
+        attribution: '&copy; OpenStreetMap contributors, &copy; CARTO',
+    }).addTo(map);
+
+    map.on('click', (event) => {
+        marker.setLatLng([event.latlng.lat, event.latlng.lng]);
+        syncCoordinates(elements, event.latlng, map.getZoom());
+    });
+
+    marker.on('dragend', (event) => {
+        const latLng = event.target.getLatLng();
+        syncCoordinates(elements, latLng, map.getZoom());
+    });
+
+    const submitSearch = async(): Promise<void> => {
+        const query = elements.searchInput?.value.trim();
+
+        if (!query) {
+            return;
+        }
+
+        const result = await searchNominatim(query, settings);
+
+        if (!result) {
+            return;
+        }
+
+        const zoom = getCurrentZoom(elements, settings);
+        applySearchResult(elements, result, zoom);
+        map.setView([result.latLng.lat, result.latLng.lng], zoom);
+        marker.setLatLng([result.latLng.lat, result.latLng.lng]);
+    };
+
+    const onSearchKeydown = (event: KeyboardEvent): void => {
+        if (event.key !== 'Enter') {
+            return;
+        }
+
+        event.preventDefault();
+        void submitSearch();
+    };
+
+    const onSearchBlur = (): void => {
+        void submitSearch();
+    };
+
+    elements.searchInput?.addEventListener('keydown', onSearchKeydown);
+    elements.searchInput?.addEventListener('blur', onSearchBlur);
+
+    const onCurrentLocationClick = (): void => {
+        navigator.geolocation?.getCurrentPosition((position) => {
+            const latLng = {
+                lat: position.coords.latitude,
+                lng: position.coords.longitude,
+            };
+            const zoom = getCurrentZoom(elements, settings);
+
+            syncCoordinates(elements, latLng, zoom);
+            map.setView([latLng.lat, latLng.lng], zoom);
+            marker.setLatLng([latLng.lat, latLng.lng]);
+        });
+    };
+
+    elements.currentLocationButton?.addEventListener('click', onCurrentLocationClick);
+
+    return () => {
+        elements.searchInput?.removeEventListener('keydown', onSearchKeydown);
+        elements.searchInput?.removeEventListener('blur', onSearchBlur);
+        elements.currentLocationButton?.removeEventListener('click', onCurrentLocationClick);
+        map.remove();
+    };
+}
+
+function initCustomMaps(root: HTMLElement): () => void {
+    const elements = findElements(root);
+    const settings = parseSettings(root);
+    let cleanup: (() => void) | null = null;
+    let destroyed = false;
+
+    if (root.getAttribute('data-formie-custom-map-hide-map') !== '1') {
+        void initLeafletMap(elements, settings).then((destroy) => {
+            if (destroyed) {
+                destroy();
+                return;
+            }
+
+            cleanup = destroy;
+        });
+    }
+
+    return () => {
+        destroyed = true;
+        cleanup?.();
+    };
+}
+
+export const customMapsModule: FormieModuleDefinition = {
+    id: MODULE_ID,
+    kind: 'field',
+    match: ({ target }) => {
+        return target instanceof Element && (
+            target.matches(MAPS_SELECTOR) ||
+            !!target.querySelector(MAPS_SELECTOR)
+        );
+    },
+    setup: async(ctx) => {
+        const field = getModuleFieldTarget(ctx);
+        const root = field || ctx.target;
+
+        if (!(root instanceof Element)) {
+            return;
+        }
+
+        const cleanup = observeMatchingElements(root, MAPS_SELECTOR, isCustomMaps, initCustomMaps);
+
+        return {
+            destroy: cleanup,
+        };
+    },
+};

package/src/js/modules/fields/date-picker.ts

@@ -8,18 +8,20 @@ import { ensureModuleStyles } from '#modules/styles';
 import { createDebug } from '#utils/debug';
 
 const INPUT_SELECTOR = 'input[data-formie-date-datepicker-input]';
+const RANGE_START_SELECTOR = 'input[data-formie-date-range-start-input]';
+const RANGE_END_SELECTOR = 'input[data-formie-date-range-end-input]';
 const MODULE_ID = 'date-picker';
 const debug = createDebug('fields', 'date-picker');
 
-ensureModuleStyles(MODULE_ID, [flatpickrCss]);
-
 type DatePickerOptions = {
+    includeFlatpickrCss?: boolean;
     datePickerOptions?: Array<{ label?: string; value?: unknown }>;
     dateFormat?: string;
     timeFormat?: string;
     getIsDate?: boolean;
     getIsTime?: boolean;
     getIsDateTime?: boolean;
+    collectMode?: string;
     locale?: string;
     minDate?: string | null;
     maxDate?: string | null;
@@ -34,6 +36,11 @@ type FlatpickrInput = HTMLInputElement & {
     _formieFlatpickr?: FlatpickrInstanceLike;
 };
 
+type FlatpickrChangeInstance = {
+    input: HTMLInputElement;
+    altInput?: HTMLInputElement;
+};
+
 function attributesPlugin() {
     return (instance: { input: HTMLInputElement; altInput?: HTMLInputElement | undefined; loadedPlugins: string[] }) => {
         return {
@@ -168,9 +175,61 @@ function getCustomOptions(options: DatePickerOptions): Record<string, unknown> {
     return result;
 }
 
+function pad(value: number): string {
+    return String(value).padStart(2, '0');
+}
+
+function formatSubmissionDate(date: Date, options: DatePickerOptions): string {
+    const year = date.getFullYear();
+    const month = pad(date.getMonth() + 1);
+    const day = pad(date.getDate());
+
+    if (!options.getIsTime && !options.getIsDateTime) {
+        return `${year}-${month}-${day}`;
+    }
+
+    const hours = pad(date.getHours());
+    const minutes = pad(date.getMinutes());
+    const seconds = pad(date.getSeconds());
+
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+
+function parseSubmissionDate(value: string): Date | null {
+    const parsed = new Date(value);
+
+    if (Number.isNaN(parsed.getTime())) {
+        return null;
+    }
+
+    return parsed;
+}
+
+function syncRangeHiddenInputs(
+    selectedDates: Date[],
+    startInput: HTMLInputElement | null,
+    endInput: HTMLInputElement | null,
+    options: DatePickerOptions,
+): void {
+    if (startInput) {
+        startInput.value = selectedDates[0] ? formatSubmissionDate(selectedDates[0], options) : '';
+        startInput.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+
+    if (endInput) {
+        endInput.value = selectedDates[1] ? formatSubmissionDate(selectedDates[1], options) : '';
+        endInput.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+}
+
 function initDatePicker(input: FlatpickrInput, options: DatePickerOptions): () => void {
     input._formieFlatpickr?.destroy();
 
+    const fieldContainer = input.closest('[data-formie-field-handle]');
+    const isRange = options.collectMode === 'range' || input.hasAttribute('data-formie-date-range-input');
+    const startInput = fieldContainer?.querySelector(RANGE_START_SELECTOR);
+    const endInput = fieldContainer?.querySelector(RANGE_END_SELECTOR);
+
     const defaultOptions: Record<string, unknown> = {
         disableMobile: true,
         allowInput: true,
@@ -183,7 +242,16 @@ function initDatePicker(input: FlatpickrInput, options: DatePickerOptions): () =
         maxDate: normalizeOffsetDate(options.maxDate, 'max'),
         plugins: [attributesPlugin()],
         locale: getLocale(options.locale),
-        onChange: (_selectedDates: unknown, _dateStr: string, instance: { input: HTMLInputElement; altInput?: HTMLInputElement }) => {
+        onChange: (selectedDates: Date[], _dateStr: string, instance: FlatpickrChangeInstance) => {
+            if (isRange) {
+                syncRangeHiddenInputs(
+                    selectedDates,
+                    startInput instanceof HTMLInputElement ? startInput : null,
+                    endInput instanceof HTMLInputElement ? endInput : null,
+                    options,
+                );
+            }
+
             // Mirror changes back through bubbling input events so validation,
             // conditions, and calculations respond to picker-driven updates.
             instance.input.dispatchEvent(new Event('input', { bubbles: true }));
@@ -204,11 +272,30 @@ function initDatePicker(input: FlatpickrInput, options: DatePickerOptions): () =
         defaultOptions.noCalendar = true;
     }
 
+    if (isRange) {
+        defaultOptions.mode = 'range';
+
+        const startDate = startInput instanceof HTMLInputElement && startInput.value
+            ? parseSubmissionDate(startInput.value)
+            : null;
+        const endDate = endInput instanceof HTMLInputElement && endInput.value
+            ? parseSubmissionDate(endInput.value)
+            : null;
+
+        if (startDate) {
+            defaultOptions.defaultDate = endDate ? [startDate, endDate] : [startDate];
+        }
+    }
+
     const mergedOptions = {
         ...defaultOptions,
         ...getCustomOptions(options),
     };
 
+    if (isRange) {
+        mergedOptions.mode = 'range';
+    }
+
     dispatchFieldEvent(input, MODULE_ID, 'before-init', {
         datepicker: input,
         options: mergedOptions,
@@ -218,6 +305,7 @@ function initDatePicker(input: FlatpickrInput, options: DatePickerOptions): () =
     input._formieFlatpickr = instance;
     debug.log('Initialized.', {
         inputName: input.name,
+        isRange,
     });
 
     dispatchFieldEvent(input, MODULE_ID, 'after-init', {
@@ -242,6 +330,11 @@ export const datePickerModule: FormieModuleDefinition = {
     },
     setup: async (ctx) => {
         const options = (ctx.options || {}) as DatePickerOptions;
+
+        if (options.includeFlatpickrCss !== false) {
+            ensureModuleStyles(MODULE_ID, [flatpickrCss]);
+        }
+
         const fields = getModuleFieldContainers(ctx);
         const cleanups = fields.map((field) => {
             const input = field.querySelector(INPUT_SELECTOR);

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

@@ -5,11 +5,17 @@ export const builtinFieldModuleLoaders: Record<string, () => Promise<FormieModul
     // truth for lazy-loading first-party field enhancements.
     'calculations': () => import('#modules/fields/calculations').then((module) => module.calculationsModule),
     'checkbox-radio': () => import('#modules/fields/checkbox-radio').then((module) => module.checkboxRadioModule),
+    'combobox': () => import('#modules/fields/combobox').then((module) => module.comboboxModule),
     'conditions': () => import('#modules/fields/conditions').then((module) => module.conditionsModule),
+    'custom-google-maps': () => import('#modules/fields/custom-google-maps').then((module) => module.customGoogleMapsModule),
+    'custom-link': () => import('#modules/fields/custom-link').then((module) => module.customLinkModule),
+    'custom-maps': () => import('#modules/fields/custom-maps').then((module) => module.customMapsModule),
     'date-picker': () => import('#modules/fields/date-picker').then((module) => module.datePickerModule),
     'file-upload': () => import('#modules/fields/file-upload').then((module) => module.fileUploadModule),
     'hidden': () => import('#modules/fields/hidden').then((module) => module.hiddenModule),
     'phone-country': () => import('#modules/fields/phone-country').then((module) => module.phoneCountryModule),
+    'address-country': () => import('#modules/fields/address-country').then((module) => module.addressCountryModule),
+    'address-state': () => import('#modules/fields/address-state').then((module) => module.addressStateModule),
     'repeater': () => import('#modules/fields/repeater').then((module) => module.repeaterModule),
     'rich-text': () => import('#modules/fields/rich-text').then((module) => module.richTextModule),
     'signature': () => import('#modules/fields/signature').then((module) => module.signatureModule),

package/src/js/modules/fields/phone-country.ts

@@ -4,6 +4,7 @@ import intlTelInputCss from 'intl-tel-input/styles?inline';
 import type { FormieModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, getModuleFieldContainers, releaseFormValidators, retainFormValidators } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
+import { createGeoIpLookup } from '#utils/country-from-ip';
 import { createDebug } from '#utils/debug';
 
 const PHONE_SELECTOR = 'input[type="tel"][data-formie-phone-input]';
@@ -18,6 +19,8 @@ ensureModuleStyles(MODULE_ID, [intlTelInputCss]);
 type PhoneCountryOptions = {
     countryDefaultValue?: string;
     countryAllowed?: string[];
+    countryPreselectFromIp?: boolean;
+    countryFromIpAction?: string;
     language?: string;
 };
 
@@ -111,6 +114,9 @@ function buildOptions(options: PhoneCountryOptions): Record<string, unknown> {
 
     if (options.countryDefaultValue) {
         intlOptions.initialCountry = options.countryDefaultValue.toLowerCase();
+    } else if (options.countryPreselectFromIp) {
+        intlOptions.initialCountry = 'auto';
+        intlOptions.geoIpLookup = createGeoIpLookup(options.countryFromIpAction);
     }
 
     if (Array.isArray(intlOptions.onlyCountries) && typeof intlOptions.initialCountry === 'string') {

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,