@uibit/form 0.1.0

package/dist/form.js

@@ -0,0 +1,449 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing } from 'lit';
+import { customElement, msg, UIBitElement } from '@uibit/core';
+import { property, state } from 'lit/decorators.js';
+import { styles } from './styles';
+/**
+ * A declarative form wrapper that wraps a native `<form>` and adds wizards,
+ * submit lifecycle states, and dirty checking.
+ *
+ * @slot - Default slot where the native `<form>` element is placed.
+ * @slot success - Custom success template displayed upon successful submission.
+ * @slot error - Custom error template displayed upon failed submission.
+ */
+let Form = class Form extends UIBitElement {
+    constructor() {
+        super(...arguments);
+        /** Opt-in warning prompt if the user tries to leave the page with unsaved changes. */
+        this.warnUnsaved = false;
+        /** Active wizard step (1-indexed). Only active if multiple fieldsets exist. */
+        this.step = 1;
+        /** The total number of steps/fieldsets detected in the form. */
+        this.stepsCount = 0;
+        this._stepTitles = [];
+        this._maxVisitedStep = 1;
+        /** Tracks whether the form has unsaved changes. */
+        this.dirty = false;
+        /** Submission state: 'idle', 'pending', 'success', or 'error'. */
+        this.status = 'idle';
+        this._slottedFormEl = null;
+        this._initialValues = new Map();
+        this._formListenersCleanups = [];
+        // ── Form Actions ───────────────────────────────────────────────
+        this._isResetting = false;
+    }
+    static { this.styles = styles; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.listen(window, 'beforeunload', this._onBeforeUnload.bind(this));
+        this.listen(this, 'input', this._onFormInput.bind(this));
+        this.listen(this, 'change', this._onFormInput.bind(this));
+        this.listen(this, 'click', this._onFormClick.bind(this));
+        this._observer = new MutationObserver(() => {
+            this._initializeForm();
+            this.requestUpdate();
+        });
+        this._observer.observe(this, { childList: true, subtree: true });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._observer) {
+            this._observer.disconnect();
+        }
+        this._cleanupFormListeners();
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this._initializeForm();
+    }
+    _cleanupFormListeners() {
+        for (const cleanup of this._formListenersCleanups) {
+            cleanup();
+        }
+        this._formListenersCleanups = [];
+    }
+    _initializeForm() {
+        this._detectSlottedForm();
+        this._detectSteps();
+        this._captureInitialValues();
+    }
+    _detectSlottedForm() {
+        const form = this.querySelector('form');
+        if (form !== this._slottedFormEl) {
+            this._cleanupFormListeners();
+            this._slottedFormEl = form;
+            if (this._slottedFormEl) {
+                // Intercept submit and reset on the slotted form element
+                const submitCleanup = this.listen(this._slottedFormEl, 'submit', this._onSubmit.bind(this));
+                const resetCleanup = this.listen(this._slottedFormEl, 'reset', this.reset.bind(this));
+                this._formListenersCleanups.push(submitCleanup, resetCleanup);
+            }
+        }
+    }
+    _detectSteps() {
+        if (!this._slottedFormEl) {
+            this.stepsCount = 0;
+            this._stepTitles = [];
+            return;
+        }
+        const fieldsets = this._slottedFormEl.querySelectorAll('fieldset');
+        this.stepsCount = fieldsets.length;
+        this._stepTitles = Array.from(fieldsets).map((fieldset, idx) => {
+            const legend = fieldset.querySelector('legend');
+            let title = fieldset.getAttribute('data-step-title') || '';
+            if (!title && legend) {
+                title = legend.textContent?.trim() || '';
+                title = title.replace(/^step\s+\d+:\s*/i, '');
+            }
+            return title || `Step ${idx + 1}`;
+        });
+        this._updateStepVisibility();
+    }
+    _updateStepVisibility() {
+        if (this.stepsCount <= 1 || !this._slottedFormEl)
+            return;
+        const fieldsets = this._slottedFormEl.querySelectorAll('fieldset');
+        fieldsets.forEach((fieldset, idx) => {
+            if (idx + 1 === this.step) {
+                fieldset.style.display = '';
+                fieldset.removeAttribute('disabled');
+            }
+            else {
+                fieldset.style.display = 'none';
+                fieldset.setAttribute('disabled', 'true');
+            }
+        });
+    }
+    _getFormElements() {
+        if (!this._slottedFormEl)
+            return [];
+        return Array.from(this._slottedFormEl.querySelectorAll('input, select, textarea'));
+    }
+    _captureInitialValues() {
+        const elements = this._getFormElements();
+        for (const key of this._initialValues.keys()) {
+            if (!elements.includes(key)) {
+                this._initialValues.delete(key);
+            }
+        }
+        for (const el of elements) {
+            if (!this._initialValues.has(el)) {
+                this._initialValues.set(el, this._getElementValue(el));
+            }
+        }
+    }
+    _getElementValue(el) {
+        if (el instanceof HTMLInputElement) {
+            if (el.type === 'checkbox') {
+                return el.checked;
+            }
+            if (el.type === 'radio') {
+                return el.checked ? el.value : null;
+            }
+            return el.value;
+        }
+        if (el instanceof HTMLSelectElement) {
+            if (el.multiple) {
+                return Array.from(el.selectedOptions).map(opt => opt.value);
+            }
+            return el.value;
+        }
+        return el.value;
+    }
+    _onFormInput() {
+        this._checkDirty();
+    }
+    _checkDirty() {
+        const elements = this._getFormElements();
+        let isDirty = false;
+        for (const el of elements) {
+            const initial = this._initialValues.get(el);
+            const current = this._getElementValue(el);
+            if (Array.isArray(initial) && Array.isArray(current)) {
+                if (initial.length !== current.length ||
+                    !initial.every((val, idx) => current[idx] === val)) {
+                    isDirty = true;
+                    break;
+                }
+            }
+            else if (el.type === 'radio') {
+                if (initial !== current) {
+                    isDirty = true;
+                    break;
+                }
+            }
+            else if (initial !== current) {
+                isDirty = true;
+                break;
+            }
+        }
+        this.dirty = isDirty;
+    }
+    _onBeforeUnload(e) {
+        if (this.warnUnsaved && this.dirty) {
+            e.preventDefault();
+            e.returnValue = msg('You have unsaved changes. Are you sure you want to leave?');
+            return e.returnValue;
+        }
+    }
+    _onSlotChange() {
+        this._initializeForm();
+        this.requestUpdate();
+    }
+    // ── Step Navigation ────────────────────────────────────────────
+    nextStep() {
+        if (this.step < this.stepsCount && this._slottedFormEl) {
+            const currentFieldset = this._slottedFormEl.querySelectorAll('fieldset')[this.step - 1];
+            if (currentFieldset) {
+                const inputs = currentFieldset.querySelectorAll('input, select, textarea');
+                let allValid = true;
+                for (const input of Array.from(inputs)) {
+                    if (!input.checkValidity()) {
+                        input.reportValidity();
+                        allValid = false;
+                        break;
+                    }
+                }
+                if (!allValid)
+                    return;
+            }
+            this.step++;
+            if (this.step > this._maxVisitedStep) {
+                this._maxVisitedStep = this.step;
+            }
+            this._updateStepVisibility();
+            this.dispatchCustomEvent('uibit-step-change', { step: this.step });
+        }
+    }
+    prevStep() {
+        if (this.step > 1) {
+            this.step--;
+            this._updateStepVisibility();
+            this.dispatchCustomEvent('uibit-step-change', { step: this.step });
+        }
+    }
+    goToStep(stepNum) {
+        if (stepNum >= 1 && stepNum <= this.stepsCount && stepNum <= this._maxVisitedStep) {
+            // Validate current step if trying to skip forward
+            if (stepNum > this.step && this._slottedFormEl) {
+                for (let i = this.step; i < stepNum; i++) {
+                    const fieldset = this._slottedFormEl.querySelectorAll('fieldset')[i - 1];
+                    if (fieldset) {
+                        const inputs = fieldset.querySelectorAll('input, select, textarea');
+                        let allValid = true;
+                        for (const input of Array.from(inputs)) {
+                            if (!input.checkValidity()) {
+                                input.reportValidity();
+                                allValid = false;
+                                break;
+                            }
+                        }
+                        if (!allValid)
+                            return;
+                    }
+                }
+            }
+            this.step = stepNum;
+            if (this.step > this._maxVisitedStep) {
+                this._maxVisitedStep = this.step;
+            }
+            this._updateStepVisibility();
+            this.dispatchCustomEvent('uibit-step-change', { step: this.step });
+        }
+    }
+    reset() {
+        if (this._isResetting)
+            return;
+        this._isResetting = true;
+        try {
+            if (this._slottedFormEl) {
+                this._slottedFormEl.reset();
+            }
+            const elements = this._getFormElements();
+            for (const el of elements) {
+                const initial = this._initialValues.get(el);
+                if (initial !== undefined) {
+                    if (el instanceof HTMLInputElement && el.type === 'checkbox') {
+                        el.checked = !!initial;
+                    }
+                    else if (el instanceof HTMLInputElement && el.type === 'radio') {
+                        el.checked = el.value === initial;
+                    }
+                    else {
+                        el.value = initial;
+                    }
+                }
+            }
+            this.dirty = false;
+            this.status = 'idle';
+            this.step = 1;
+            this._maxVisitedStep = 1;
+            this._updateStepVisibility();
+            this.dispatchCustomEvent('uibit-reset');
+        }
+        finally {
+            this._isResetting = false;
+        }
+    }
+    async submit() {
+        if (!this._slottedFormEl)
+            return;
+        if (!this._slottedFormEl.checkValidity()) {
+            this._slottedFormEl.reportValidity();
+            return;
+        }
+        const action = this._slottedFormEl.getAttribute('action');
+        const method = this._slottedFormEl.getAttribute('method') || 'POST';
+        if (action) {
+            this.status = 'pending';
+            const formData = new FormData(this._slottedFormEl);
+            try {
+                const response = await fetch(action, {
+                    method: method,
+                    body: method.toUpperCase() === 'GET' ? undefined : formData,
+                });
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                this.status = 'success';
+                this.dirty = false;
+                this._initialValues.clear();
+                this._captureInitialValues();
+                this.dispatchCustomEvent('uibit-submit-success', { response });
+            }
+            catch (error) {
+                this.status = 'error';
+                this.dispatchCustomEvent('uibit-submit-error', { error });
+            }
+        }
+        else {
+            this._slottedFormEl.submit();
+        }
+    }
+    _onSubmit(e) {
+        e.preventDefault();
+        if (this.stepsCount > 1 && this.step < this.stepsCount) {
+            this.nextStep();
+        }
+        else {
+            this.submit();
+        }
+    }
+    _onFormClick(e) {
+        const path = e.composedPath();
+        const nextBtn = path.find((el) => el instanceof HTMLElement && el.hasAttribute('data-uibit-form-next'));
+        if (nextBtn) {
+            e.preventDefault();
+            this.nextStep();
+            return;
+        }
+        const prevBtn = path.find((el) => el instanceof HTMLElement && el.hasAttribute('data-uibit-form-prev'));
+        if (prevBtn) {
+            e.preventDefault();
+            this.prevStep();
+            return;
+        }
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('step')) {
+            this._updateStepVisibility();
+        }
+    }
+    render() {
+        return html `
+      ${this.stepsCount > 1
+            ? html `
+            <div class="wizard-header" part="wizard-header">
+              <div class="wizard-meta" part="wizard-meta">
+                <slot name="wizard-info">
+                  <span class="wizard-step-info" part="wizard-step-info">
+                    <span class="wizard-step-num" part="wizard-step-num">${this.step}</span>
+                    <span class="wizard-step-sep" part="wizard-step-sep">/</span>
+                    <span class="wizard-step-total" part="wizard-step-total">${this.stepsCount}</span>
+                  </span>
+                </slot>
+                <slot name="step-title-${this.step}">
+                  <span class="wizard-step-title" part="wizard-step-title">
+                    ${this._stepTitles[this.step - 1] || ''}
+                  </span>
+                </slot>
+              </div>
+              <slot name="wizard-controls">
+                <div class="wizard-controls" part="wizard-controls">
+                  <button
+                    type="button"
+                    class="wizard-back-btn ${this.step === 1 ? 'disabled-control' : ''}"
+                    part="wizard-back-btn"
+                    ?disabled="${this.step === 1}"
+                    @click="${this.prevStep}"
+                    aria-label="Go to previous step"
+                  >
+                    <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
+                  </button>
+                  <button
+                    type="button"
+                    class="wizard-next-btn ${this.step === this.stepsCount ? 'disabled-control' : ''}"
+                    part="wizard-next-btn"
+                    ?disabled="${this.step === this.stepsCount}"
+                    @click="${this.nextStep}"
+                    aria-label="Go to next step"
+                  >
+                    <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
+                  </button>
+                </div>
+              </slot>
+            </div>
+          `
+            : nothing}
+
+      <div class="state-content" data-state="pending">
+        <slot name="loading"></slot>
+      </div>
+
+      <div class="state-content" data-state="success">
+        <slot name="success"></slot>
+      </div>
+
+      ${this.status === 'error'
+            ? html `
+            <div class="error-banner" role="alert">
+              <slot name="error"></slot>
+            </div>
+          `
+            : nothing}
+
+      <slot @slotchange="${this._onSlotChange}"></slot>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, attribute: 'warn-unsaved' })
+], Form.prototype, "warnUnsaved", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], Form.prototype, "step", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'steps-count' })
+], Form.prototype, "stepsCount", void 0);
+__decorate([
+    state()
+], Form.prototype, "_stepTitles", void 0);
+__decorate([
+    state()
+], Form.prototype, "_maxVisitedStep", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Form.prototype, "dirty", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Form.prototype, "status", void 0);
+Form = __decorate([
+    customElement('uibit-form')
+], Form);
+export { Form };
+//# sourceMappingURL=form.js.map

package/dist/form.js.map

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

package/dist/frameworks/angular/index.ts

@@ -0,0 +1,45 @@
+import { Component, ChangeDetectionStrategy, ElementRef, input, effect, booleanAttribute, numberAttribute } from '@angular/core';
+import '@uibit/form';
+import type { Form as HTMLElementClass } from '@uibit/form';
+
+@Component({
+  selector: 'uibit-form',
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true
+})
+export class NgxForm {
+  constructor(private el: ElementRef<HTMLElementClass>) {
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.warnUnsaved = this.warnUnsaved();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.step = this.step();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.stepsCount = this.stepsCount();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.dirty = this.dirty();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.status = this.status();
+      }
+    });
+  }
+
+  readonly warnUnsaved = input<boolean, any>(false, { transform: booleanAttribute });
+  readonly step = input<number, any>(1, { transform: numberAttribute });
+  readonly stepsCount = input<number, any>(0, { transform: numberAttribute });
+  readonly dirty = input<boolean, any>(false, { transform: booleanAttribute });
+  readonly status = input<'idle' | 'pending' | 'success' | 'error', any>('idle');
+}

package/dist/frameworks/astro/index.d.ts

@@ -0,0 +1,10 @@
+import type { Form as HTMLElementClass } from '@uibit/form';
+import '@uibit/form';
+
+declare global {
+  namespace astroHTML.JSX {
+    interface IntrinsicElements {
+      'uibit-form': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
+    }
+  }
+}

package/dist/frameworks/nuxt/index.ts

@@ -0,0 +1,7 @@
+import { defineNuxtPlugin } from '#app';
+
+export default defineNuxtPlugin(() => {
+  if (process.client) {
+    import('@uibit/form');
+  }
+});

package/dist/frameworks/preact/index.d.ts

@@ -0,0 +1,17 @@
+import type { JSX } from 'preact';
+import type { Form as HTMLElementClass } from '@uibit/form';
+import '@uibit/form';
+
+declare module 'preact' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-form': JSX.HTMLAttributes<HTMLElementClass> & {
+      warnUnsaved?: boolean;
+      step?: number;
+      stepsCount?: number;
+      dirty?: boolean;
+      status?: 'idle' | 'pending' | 'success' | 'error';
+      };
+    }
+  }
+}

package/dist/frameworks/qwik/index.tsx

@@ -0,0 +1,10 @@
+import { component$, Slot } from '@builder.io/qwik';
+import '@uibit/form';
+
+export const Form = component$<any>((props) => {
+  return (
+    <uibit-form {...props}>
+      <Slot />
+    </uibit-form>
+  );
+});

package/dist/frameworks/react/index.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes, ClassAttributes } from 'react';
+import type { Form as HTMLElementClass } from '@uibit/form';
+import '@uibit/form';
+
+declare global {
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        'uibit-form': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
+          children?: React.ReactNode;
+          class?: string;
+      warnUnsaved?: boolean;
+      step?: number;
+      stepsCount?: number;
+      dirty?: boolean;
+      status?: 'idle' | 'pending' | 'success' | 'error';
+        };
+      }
+    }
+  }
+}

package/dist/frameworks/solid/index.d.ts

@@ -0,0 +1,18 @@
+import type { JSX } from 'solid-js';
+import type { Form as HTMLElementClass } from '@uibit/form';
+import '@uibit/form';
+
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-form': Partial<HTMLElementClass> & JSX.HTMLAttributes<HTMLElementClass> & {
+              warnUnsaved?: boolean;
+      step?: number;
+      stepsCount?: number;
+      dirty?: boolean;
+      status?: 'idle' | 'pending' | 'success' | 'error';
+
+      };
+    }
+  }
+}

package/dist/frameworks/stencil/index.d.ts

@@ -0,0 +1,16 @@
+import type { Form as HTMLElementClass } from '@uibit/form';
+import '@uibit/form';
+
+declare module '@stencil/core' {
+  export namespace JSX {
+    interface IntrinsicElements {
+      'uibit-form': HTMLElementClass & {
+    warnUnsaved?: boolean;
+    step?: number;
+    stepsCount?: number;
+    dirty?: boolean;
+    status?: 'idle' | 'pending' | 'success' | 'error';
+      };
+    }
+  }
+}