@verbb/formie-browser 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verbb/formie-browser",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -20,7 +20,7 @@
   "bugs": {
     "url": "https://github.com/verbb/formie/issues"
   },
-  "homepage": "https://docs.verbb.io/formie/packages/browser",
+  "homepage": "https://docs.verbb.io/formie/browser",
   "engines": {
     "node": ">=20.0.0"
   },
@@ -28,7 +28,8 @@
     "**/*.css"
   ],
   "imports": {
-    "#theme/*": "./src/css/theme/*",
+    "#theme/*": "./src/js/theme/*",
+    "#theme-css/*": "./src/css/theme/*",
     "#theme-base/*": "./src/css/theme-base/*",
     "#icons/*": "./src/icons/*",
     "#contracts/*": "./src/js/contracts/*",
@@ -36,7 +37,6 @@
     "#core/*": "./src/js/core/*",
     "#events/*": "./src/js/events/*",
     "#modules/*": "./src/js/modules/*",
-    "#theme/*": "./src/js/theme/*",
     "#submit/*": "./src/js/submit/*",
     "#transport/*": "./src/js/transport/*",
     "#utils/*": "./src/js/utils/*",
@@ -65,7 +65,7 @@
     "vite": "^8.0.10"
   },
   "dependencies": {
-    "@verbb/formie-core": "1.0.0",
+    "@verbb/formie-core": "1.0.2",
     "@friendlycaptcha/sdk": "^1.0.0",
     "@placekit/autocomplete-js": "^2.2.1",
     "expression-language": "^2.5.4",

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

@@ -1,4 +1,4 @@
-import fileUploadCss from '#theme/fields/_file.css?inline';
+import fileUploadCss from '#theme-css/fields/_file.css?inline';
 
 import type { FormieModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, getModuleFieldTarget, releaseFormValidators, retainFormValidators } from '#modules/fields/shared';

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

@@ -1,4 +1,4 @@
-import repeaterCss from '#theme/fields/_repeater.css?inline';
+import repeaterCss from '#theme-css/fields/_repeater.css?inline';
 
 import type { FormieModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, getTemplateSource, getTemplateSourceHtml } from '#modules/fields/shared';

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

@@ -1,7 +1,7 @@
 import { exec, init as initPell } from 'pell';
 import pellCss from 'pell/dist/pell.min.css?inline';
-import tokensCss from '#theme/_tokens.css?inline';
-import richTextCss from '#theme/fields/_rich-text.css?inline';
+import tokensCss from '#theme-css/_tokens.css?inline';
+import richTextCss from '#theme-css/fields/_rich-text.css?inline';
 import alignCenterIcon from '#icons/rich-text/aligncenter.svg?raw';
 import alignLeftIcon from '#icons/rich-text/alignleft.svg?raw';
 import alignRightIcon from '#icons/rich-text/alignright.svg?raw';

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

@@ -1,5 +1,5 @@
 import SignaturePad from 'signature_pad';
-import signatureCss from '#theme/fields/_signature.css?inline';
+import signatureCss from '#theme-css/fields/_signature.css?inline';
 
 import type { FormieModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';

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

@@ -1,4 +1,4 @@
-import summaryCss from '#theme/fields/_summary.css?inline';
+import summaryCss from '#theme-css/fields/_summary.css?inline';
 
 import type { FormieModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';

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

@@ -1,4 +1,4 @@
-import tableCss from '#theme/fields/_table.css?inline';
+import tableCss from '#theme-css/fields/_table.css?inline';
 
 import type { FormieModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, getTemplateSource, getTemplateSourceHtml } from '#modules/fields/shared';

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

@@ -1,4 +1,4 @@
-import textLimitCss from '#theme/fields/_text-limit.css?inline';
+import textLimitCss from '#theme-css/fields/_text-limit.css?inline';
 
 import { getTextLimitMetrics } from '@verbb/formie-core';
 

package/src/js/modules/payments/paypal.ts

@@ -1,4 +1,4 @@
-import paypalCss from '#theme/integrations/_paypal.css?inline';
+import paypalCss from '#theme-css/integrations/_paypal.css?inline';
 
 import { definePaymentModule } from '#modules/payments/api';
 import { ensureModuleStyles } from '#modules/styles';

package/src/js/modules/payments/payway.ts

@@ -1,4 +1,4 @@
-import paywayCss from '#theme/integrations/_payway.css?inline';
+import paywayCss from '#theme-css/integrations/_payway.css?inline';
 
 import { definePaymentModule } from '#modules/payments/api';
 import { ensureModuleStyles } from '#modules/styles';

package/src/js/modules/payments/stripe.ts

@@ -1,4 +1,4 @@
-import stripeCss from '#theme/integrations/_stripe.css?inline';
+import stripeCss from '#theme-css/integrations/_stripe.css?inline';
 
 import { definePaymentModule } from '#modules/payments/api';
 import { ensureModuleStyles } from '#modules/styles';

package/dist/chunks/address-finder-DfMCiW89.js

@@ -1,47 +0,0 @@
-import { n as getAddressProviderEventName } from "./event-names-DamGPtXR.js";
-import { t as defineAddressModule } from "./api-CbqEMQT5.js";
-import { r as loadScriptAndEnsureGlobal } from "./scripts-BGD_iU_6.js";
-//#region src/js/modules/address/address-finder.ts
-var SCRIPT_ID = "FORMIE_ADDRESS_FINDER_SCRIPT";
-var addressFinderModule = defineAddressModule({
-	id: "address-finder",
-	load: async () => {
-		return loadScriptAndEnsureGlobal("AddressFinder", {
-			id: SCRIPT_ID,
-			src: "https://api.addressfinder.io/assets/v3/widget.js",
-			async: true,
-			defer: true
-		});
-	},
-	mount: ({ api, field, services, provider }) => {
-		const input = services.input.getAutocomplete();
-		if (!input || typeof api === "undefined" || !api.Widget) throw new Error("AddressFinder API not ready");
-		const apiKey = provider.apiKey || "";
-		const countryCode = provider.countryCode || "au";
-		const widget = new api.Widget(input, apiKey, countryCode, provider.widgetOptions);
-		widget.on("result:select", (fullAddress, metaData) => {
-			if (metaData.address_line_2) {
-				services.input.setValue("address1", metaData.address_line_2);
-				services.input.setValue("address2", metaData.address_line_1);
-			} else {
-				services.input.setValue("address1", metaData.address_line_1 || "");
-				services.input.setValue("address2", "");
-			}
-			services.input.setValue("city", metaData.locality_name || "");
-			services.input.setValue("zip", metaData.postcode || "");
-			services.input.setValue("state", metaData.state_territory || "");
-			services.input.setValue("country", countryCode);
-			field.dispatchEvent(new CustomEvent(getAddressProviderEventName("address-finder", "populate"), {
-				bubbles: true,
-				detail: {
-					addressProvider: "address-finder",
-					fullAddress,
-					metaData
-				}
-			}));
-		});
-		return widget;
-	}
-});
-//#endregion
-export { addressFinderModule };

package/dist/chunks/api-CbqEMQT5.js

@@ -1,181 +0,0 @@
-import { t as createDebug } from "./debug-KnZeKYBI.js";
-//#region src/js/modules/address/constants.ts
-/** Default selector for the autocomplete input within an address field. */
-var DEFAULT_AUTOCOMPLETE_SELECTOR = "[data-formie-address-autocomplete-input]";
-var ADDRESS_LOCATION_SELECTOR = "[data-formie-address-location]";
-/** Selector for address sub-field inputs used when populating from provider. */
-var ADDRESS_SELECTORS = {
-	autoComplete: "[data-formie-address-autocomplete-input]",
-	address1: "[data-formie-address-line1-input]",
-	address2: "[data-formie-address-line2-input]",
-	address3: "[data-formie-address-line3-input]",
-	city: "[data-formie-address-city-input]",
-	state: "[data-formie-address-state-input]",
-	zip: "[data-formie-address-zip-input]",
-	country: "[data-formie-address-country-input]"
-};
-//#endregion
-//#region src/js/modules/address/host.ts
-var ADDRESS_OPTION_KEYS = new Set(["handle"]);
-function getAddressProviderHandle(id, options) {
-	return (typeof options.handle === "string" && options.handle.trim() !== "" ? options.handle.trim() : "") || id;
-}
-function normalizeAddressModuleOptions(id, rawOptions) {
-	const options = rawOptions || {};
-	const provider = Object.entries(options).reduce((carry, [key, value]) => {
-		if (ADDRESS_OPTION_KEYS.has(key)) return carry;
-		carry[key] = value;
-		return carry;
-	}, {});
-	return {
-		handle: getAddressProviderHandle(id, options),
-		provider
-	};
-}
-function bindDomEvent(target, eventName, callback) {
-	target.addEventListener(eventName, callback);
-	return () => {
-		target.removeEventListener(eventName, callback);
-	};
-}
-function createAddressHostServices(ctx) {
-	const field = ctx.target;
-	const form = ctx.form;
-	const root = ctx.root;
-	const autocompleteSelector = DEFAULT_AUTOCOMPLETE_SELECTOR;
-	return {
-		root,
-		field,
-		form,
-		input: {
-			getAutocomplete: () => {
-				return field.querySelector(autocompleteSelector);
-			},
-			setValue: (selectorKey, value, fallback) => {
-				const selector = ADDRESS_SELECTORS[selectorKey];
-				const el = field.querySelector(selector);
-				if (el) el.value = value || fallback || "";
-			}
-		},
-		location: {
-			getButton: () => {
-				return field.querySelector(ADDRESS_LOCATION_SELECTOR);
-			},
-			onUseLocation: (callback) => {
-				const btn = field.querySelector(ADDRESS_LOCATION_SELECTOR);
-				if (!btn) return () => {};
-				const handler = (e) => {
-					e.preventDefault();
-					if (!navigator.geolocation) return;
-					navigator.geolocation.getCurrentPosition(callback, () => {}, { enableHighAccuracy: true });
-				};
-				btn.addEventListener("click", handler);
-				return () => {
-					btn.removeEventListener("click", handler);
-				};
-			}
-		},
-		events: { onField: (eventName, callback) => bindDomEvent(field, eventName, callback) }
-	};
-}
-//#endregion
-//#region src/js/modules/address/factories.ts
-var debug = createDebug("address");
-function isTargetVisible(element) {
-	const node = element;
-	return !node.closest("[data-formie-page-hidden]") && !node.closest("[hidden]");
-}
-function createManagedAddressModule(adapter) {
-	return {
-		id: adapter.id,
-		kind: "address",
-		match: (ctx) => {
-			return !!ctx.target.querySelector("[data-formie-address-autocomplete-input]");
-		},
-		setup: async (ctx) => {
-			const options = normalizeAddressModuleOptions(adapter.id, ctx.options || {});
-			const services = createAddressHostServices(ctx);
-			debug.log("Setup module.", { moduleId: adapter.id });
-			const setupCtx = {
-				...ctx,
-				options,
-				services
-			};
-			const cleanups = [];
-			let apiPromise = null;
-			let widget = null;
-			if (!services.input.getAutocomplete()) {
-				console.warn(`[formie] Address module "${adapter.id}" skipped: no autocomplete input found in target. Ensure the Address field has the Auto-Complete subfield enabled.`);
-				debug.warn("Autocomplete input missing; skipping module.", { moduleId: adapter.id });
-				return { destroy: () => {} };
-			}
-			const getApi = async () => {
-				if (!apiPromise) {
-					debug.log("Loading provider API.", { moduleId: adapter.id });
-					apiPromise = adapter.load(setupCtx);
-				}
-				return apiPromise;
-			};
-			const ensureMounted = async () => {
-				if (widget || !isTargetVisible(ctx.target)) return;
-				const api = await getApi();
-				widget = await adapter.mount({
-					api,
-					field: ctx.target,
-					services,
-					options,
-					provider: options.provider
-				});
-				debug.log("Widget mounted.", { moduleId: adapter.id });
-			};
-			if (isTargetVisible(ctx.target)) await ensureMounted();
-			["formie:page:navigate:after", "formie:submit:result"].forEach((eventName) => {
-				const handleVisibility = () => {
-					ensureMounted();
-				};
-				ctx.root.addEventListener(eventName, handleVisibility);
-				cleanups.push(() => {
-					ctx.root.removeEventListener(eventName, handleVisibility);
-				});
-			});
-			const locationCleanup = services.location.onUseLocation((position) => {
-				if (!adapter.onCurrentLocation) return;
-				(async () => {
-					await ensureMounted();
-					if (!widget) return;
-					const api = await getApi();
-					await adapter.onCurrentLocation?.(position, {
-						api,
-						widget,
-						field: ctx.target,
-						services,
-						options,
-						provider: options.provider
-					});
-				})();
-			});
-			if (locationCleanup) cleanups.push(locationCleanup);
-			return { destroy: async () => {
-				debug.log("Destroying module.", { moduleId: adapter.id });
-				cleanups.forEach((c) => c());
-				if (widget && adapter.unmount) {
-					const api = await getApi();
-					await adapter.unmount({
-						api,
-						widget,
-						field: ctx.target,
-						services,
-						options,
-						provider: options.provider
-					});
-					debug.log("Widget unmounted.", { moduleId: adapter.id });
-				}
-			} };
-		}
-	};
-}
-//#endregion
-//#region src/js/modules/address/api.ts
-var defineAddressModule = createManagedAddressModule;
-//#endregion
-export { ADDRESS_SELECTORS as n, defineAddressModule as t };