@verbb/formie-web-components 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## 1.0.0
+
+- Initial public release.

package/LICENSE.md

@@ -0,0 +1,40 @@
+Copyright © Verbb
+
+Permission is hereby granted to any person obtaining a copy of this software
+(the “Software”) to use, copy, modify, merge, publish and/or distribute copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+1. **Don’t plagiarize.** The above copyright notice and this license shall be
+   included in all copies or substantial portions of the Software.
+
+2. **Don’t use the same license on more than one project.** Each licensed copy
+   of the Software shall be actively installed in no more than one production
+   environment at a time.
+
+3. **Don’t mess with the licensing features.** Software features related to
+   licensing shall not be altered or circumvented in any way, including (but
+   not limited to) license validation, payment prompts, feature restrictions,
+   and update eligibility.
+
+4. **Pay up.** Payment shall be made immediately upon receipt of any notice,
+   prompt, reminder, or other message indicating that a payment is owed.
+
+5. **Follow the law.** All use of the Software shall not violate any applicable
+   law or regulation, nor infringe the rights of any other person or entity.
+
+Failure to comply with the foregoing conditions will automatically and
+immediately result in termination of the permission granted hereby. This
+license does not include any right to receive updates to the Software or
+technical support. Licensees bear all risk related to the quality and
+performance of the Software and any modifications made or obtained to it,
+including liability for actual and consequential harm, such as loss or
+corruption of data, and any necessary service, repair, or correction.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER
+LIABILITY, INCLUDING SPECIAL, INCIDENTAL AND CONSEQUENTIAL DAMAGES, WHETHER IN
+AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,49 @@
+# @verbb/formie-web-components
+
+Custom elements for Formie’s browser runtime:
+
+- **`formie-form`** — server-rendered forms via `@verbb/formie-browser` (`createFormieClient`, themes, server-rendered markup).
+- **`formie-core-form`** — Definition + `@verbb/formie-core` runtime (REST/GraphQL envelope load, Lit field tree, optional registry overrides).
+- **`formie-internal-signature`** — Internal element used by the core form renderer for draw-signature fields (registered with the public elements).
+
+## Install
+
+```bash
+npm install @verbb/formie-browser @verbb/formie-web-components
+```
+
+(`@verbb/formie-core` is a dependency of this package.)
+
+## Usage
+
+```ts
+import { registerFormieWebComponents } from '@verbb/formie-web-components';
+import '@verbb/formie-browser/css/formie.css';
+
+registerFormieWebComponents();
+```
+
+Server-rendered forms:
+
+```html
+<formie-form
+  form-handle="contactForm"
+  endpoint="https://your-craft.test/actions/formie/server/forms/render"
+></formie-form>
+```
+
+Client-rendered runtime UI:
+
+```html
+<formie-core-form
+  form-handle="contactForm"
+  endpoint="https://your-craft.test"
+  transport="rest"
+></formie-core-form>
+```
+
+## Public API
+
+Import from `@verbb/formie-web-components` only. CSS continues to come from `@verbb/formie-browser`.
+
+Advanced: `FormieRegistry`, `renderFormView`, `FORMIE_CONTROL_VALUE_EVENT`, etc., for custom field controls, optional per-field hosts, and layout regions.

package/dist/field-utils.d.ts

@@ -0,0 +1,4 @@
+import { type FrontendFieldDefinition } from '@verbb/formie-core';
+export declare function isFieldDefinition(candidate: unknown): candidate is FrontendFieldDefinition;
+export declare function resolveFieldRendererType(field: FrontendFieldDefinition): FrontendFieldDefinition['type'];
+//# sourceMappingURL=field-utils.d.ts.map

package/dist/field-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-utils.d.ts","sourceRoot":"","sources":["../src/field-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAE5F,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,OAAO,GAAG,SAAS,IAAI,uBAAuB,CAE1F;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,uBAAuB,GAAG,uBAAuB,CAAC,MAAM,CAAC,CAyBxG"}

package/dist/form-element.d.ts

@@ -0,0 +1,53 @@
+import type { FormAction, FormEndpointPayload, FormMountOptions, FormieFormInstance, FormSubmitResult } from '@verbb/formie-browser';
+export type FormieFormElementOptions = {
+    baseUrl?: string;
+} & Partial<FormMountOptions>;
+export declare class FormieFormElement extends HTMLElement {
+    static get observedAttributes(): string[];
+    private client;
+    private mountRoot;
+    private mountedInstance;
+    private optionState;
+    private mountScheduled;
+    private eventUnsubs;
+    constructor();
+    /** Lazily create client + mount container (not in the constructor). */
+    private ensureInitialized;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get baseUrl(): string | undefined;
+    set baseUrl(value: string | undefined);
+    get transport(): FormMountOptions["transport"] | undefined;
+    set transport(value: FormMountOptions['transport'] | undefined);
+    get theme(): FormMountOptions["theme"] | undefined;
+    set theme(value: FormMountOptions['theme'] | undefined);
+    get themeConfig(): FormMountOptions["themeConfig"] | undefined;
+    set themeConfig(value: FormMountOptions['themeConfig'] | undefined);
+    get payload(): FormEndpointPayload | undefined;
+    set payload(value: FormEndpointPayload | undefined);
+    get formHandle(): string | undefined;
+    set formHandle(value: string | undefined);
+    get endpoint(): string | undefined;
+    set endpoint(value: string | undefined);
+    get staticCache(): boolean | undefined;
+    set staticCache(value: boolean | undefined);
+    get refreshTokens(): boolean | undefined;
+    set refreshTokens(value: boolean | undefined);
+    get locale(): string | undefined;
+    set locale(value: string | undefined);
+    get siteId(): number | undefined;
+    set siteId(value: number | undefined);
+    get autoVisible(): boolean | undefined;
+    set autoVisible(value: boolean | undefined);
+    get mode(): FormMountOptions["mode"] | undefined;
+    set mode(value: FormMountOptions['mode'] | undefined);
+    getInstance(): FormieFormInstance | null;
+    submit(action?: FormAction): Promise<FormSubmitResult | null>;
+    private buildOptions;
+    private bindInstanceEvents;
+    private scheduleMount;
+    private mount;
+    private unmount;
+}
+//# sourceMappingURL=form-element.d.ts.map

package/dist/form-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-element.d.ts","sourceRoot":"","sources":["../src/form-element.ts"],"names":[],"mappings":"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"}

package/dist/formie-core-form.d.ts

@@ -0,0 +1,33 @@
+import { type FrontendFormInstance } from '@verbb/formie-core';
+import { LitElement } from 'lit';
+import { type FormieRegistry } from './registry.js';
+export declare class FormieCoreForm extends LitElement {
+    endpoint: string;
+    formHandle: string;
+    siteId?: number;
+    transport: 'rest' | 'graphql';
+    fetchCredentials: RequestCredentials;
+    formClass: string;
+    loadingMessage: string;
+    /** Per-instance UI registry (defaults to {@link getFormieRegistry}). */
+    registry: FormieRegistry | undefined;
+    private loadError;
+    private booting;
+    private snapshot;
+    private instance;
+    private unsubscribers;
+    private loadGeneration;
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    protected willUpdate(changed: Map<PropertyKey, unknown>): void;
+    /** Form instance after a successful load; `null` while loading or after teardown. */
+    getFormieInstance(): FrontendFormInstance | null;
+    /** Reload envelope + form instance from the server. */
+    reload(): Promise<void>;
+    private get resolvedRegistry();
+    private teardown;
+    private bootstrap;
+    protected render(): import("lit-html").TemplateResult;
+}
+//# sourceMappingURL=formie-core-form.d.ts.map

package/dist/formie-core-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formie-core-form.d.ts","sourceRoot":"","sources":["../src/formie-core-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAOH,KAAK,oBAAoB,EAE5B,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGjC,OAAO,EAAmD,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AASrG,qBAAa,cAAe,SAAQ,UAAU;IACd,QAAQ,SAAM;IAEY,UAAU,SAAM;IAiBtE,MAAM,CAAC,EAAE,MAAM,CAAC;IAYhB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAU;IAcvC,gBAAgB,EAAE,kBAAkB,CAAiB;IAEA,SAAS,SAAM;IAEV,cAAc,SAAmB;IAE3F,wEAAwE;IACxC,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAC;IAE5D,OAAO,CAAC,SAAS,CAAuB;IAExC,OAAO,CAAC,OAAO,CAAS;IAExB,OAAO,CAAC,QAAQ,CAAkC;IAE3D,OAAO,CAAC,QAAQ,CAAqC;IAErD,OAAO,CAAC,aAAa,CAAyB;IAE9C,OAAO,CAAC,cAAc,CAAK;IAElB,gBAAgB,IAAI,WAAW,GAAG,gBAAgB;IAIlD,oBAAoB,IAAI,IAAI;IAK5B,iBAAiB,IAAI,IAAI;cAKf,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI;IAcvE,qFAAqF;IACrF,iBAAiB,IAAI,oBAAoB,GAAG,IAAI;IAIhD,uDAAuD;IACjD,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAI7B,OAAO,KAAK,gBAAgB,GAE3B;IAED,OAAO,CAAC,QAAQ;YAWF,SAAS;cAqFJ,MAAM;CAmC5B"}

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+export type { FormieFormElementOptions } from './form-element.js';
+export { FormieFormElement } from './form-element.js';
+export type { FormieRegionKey, FormieFieldControlElement, FormieFieldElement } from './types.js';
+export { FORMIE_CONTROL_VALUE_EVENT } from './types.js';
+export { assertValidCustomElementName, createFormieRegistry, FormieRegistry, getFormieRegistry, } from './registry.js';
+export type { FormieRenderHost, RenderViewContext } from './render-view.js';
+export { renderErrorView, renderFormView, renderLoadingView } from './render-view.js';
+export { FormieCoreForm } from './formie-core-form.js';
+export { FormieInternalSignature } from './signature-element.js';
+export { isFieldDefinition, resolveFieldRendererType } from './field-utils.js';
+/**
+ * Registers all Formie custom elements: `formie-form` (server-rendered forms via formie-browser),
+ * `formie-core-form` (definition-driven UI), and `formie-internal-signature`.
+ * Safe to call more than once.
+ */
+export declare function registerFormieWebComponents(): void;
+export { createFormieClient } from '@verbb/formie-browser';
+export type { FormAction, FormDefinitionPayload, FormEndpointPayload, FormEventUnsubscribe, FormMountOptions, FormieClient, FormieFormInstance, FormSubmitResult, } from '@verbb/formie-browser';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,YAAY,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,YAAY,EAAE,eAAe,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AACjG,OAAO,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EACH,4BAA4B,EAC5B,oBAAoB,EACpB,cAAc,EACd,iBAAiB,GACpB,MAAM,eAAe,CAAC;AACvB,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAI/E;;;;GAIG;AACH,wBAAgB,2BAA2B,IAAI,IAAI,CAkBlD;AAED,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,YAAY,EACR,UAAU,EACV,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACpB,gBAAgB,EAChB,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,GACnB,MAAM,uBAAuB,CAAC"}