ezfw-core 1.0.0

package/components/form/EzForm.ts

@@ -0,0 +1,364 @@
+import { EzBaseComponent, EzBaseComponentConfig } from "../EzBaseComponent.js";
+import { validateField, EzValidators } from "./EzValidators.js";
+
+declare const ez: {
+    _createElement(config: unknown, controller?: string | null, parent?: unknown): Promise<HTMLElement>;
+    getControllerSync(name: string): EzController | null;
+    getDeepValue(obj: unknown, path: string[]): unknown;
+};
+
+interface EzController {
+    state: Record<string, unknown>;
+    [key: string]: unknown;
+}
+
+interface FormItemConfig {
+    name?: string;
+    eztype?: string;
+    validate?: unknown;
+    required?: boolean | ((data: FormData) => boolean);
+    requiredMessage?: string;
+    items?: FormItemConfig[];
+    flex?: number;
+    formData?: string;
+    css?: string | unknown;
+    [key: string]: unknown;
+}
+
+interface DefaultsConfig {
+    eztype?: string;
+    [key: string]: unknown;
+}
+
+type FormData = Record<string, unknown>;
+
+type OnSubmitFunction = (
+    dirtyData: FormData,
+    formData: FormData,
+    form: EzForm
+) => void;
+
+export interface EzFormConfig extends EzBaseComponentConfig {
+    formData?: string;
+    gap?: string;
+    layout?: number[];
+    defaults?: DefaultsConfig;
+    onSubmit?: string | OnSubmitFunction;
+    items?: FormItemConfig[];
+}
+
+interface ResolvedFormData {
+    controller: EzController;
+    props: string[];
+}
+
+export class EzForm extends EzBaseComponent {
+    declare config: EzFormConfig;
+    declare el: HTMLFormElement;
+
+    private _initialFormData: FormData | null = null;
+    private _submitted: boolean = false;
+    private _errors: Record<string, string> = {};
+    private _initialFormDataCaptured: boolean = false;
+
+    constructor(config: EzFormConfig = {}) {
+        super(config);
+        this.config = config;
+    }
+
+    async render(): Promise<HTMLFormElement> {
+        const el = document.createElement('form');
+        el.className = (this.config.cls as string) || '';
+        el.style.display = 'flex';
+        el.style.flexDirection = 'column';
+        el.style.gap = this.config.gap ?? 'var(--ez-spacing-md, 12px)';
+
+        this.applyStyles(el);
+
+        el.addEventListener('submit', (e: Event) => {
+            e.preventDefault();
+            this._submitted = true;
+
+            if (!this.validate()) {
+                this._applyErrors();
+                return;
+            }
+
+            this._clearErrors();
+            this._handleSubmit();
+        });
+
+        el.addEventListener('input', () => {
+            if (!this._submitted) return;
+
+            this.validate();
+            this._applyErrors();
+        });
+
+        const controllerName = this.config.controller;
+
+        if (!this._initialFormDataCaptured) {
+            this._captureInitialFormData();
+            this._initialFormDataCaptured = true;
+        }
+
+        if (Array.isArray(this.config.items)) {
+            const items = this.config.items;
+            const layout = this.config.layout;
+
+            if (Array.isArray(layout)) {
+                const expectedCount = layout.reduce((sum, n) => sum + n, 0);
+                if (items.length !== expectedCount) {
+                    throw new Error(
+                        `EzForm layout mismatch: layout expects ${expectedCount} items ` +
+                        `(${layout.join(' + ')} = ${expectedCount}), but got ${items.length} items`
+                    );
+                }
+
+                let itemIndex = 0;
+                for (const rowCount of layout) {
+                    const row = document.createElement('div');
+                    row.style.display = 'flex';
+                    row.style.gap = this.config.gap ?? 'var(--ez-spacing-md, 12px)';
+
+                    for (let i = 0; i < rowCount; i++) {
+                        const itemCfg = items[itemIndex++];
+                        const finalCfg = this._prepareItemConfig(itemCfg);
+
+                        if (finalCfg.flex === undefined && rowCount > 1) {
+                            finalCfg.flex = 1;
+                        }
+
+                        const child = await ez._createElement(finalCfg, controllerName, this);
+                        row.appendChild(child);
+                    }
+
+                    el.appendChild(row);
+                }
+            } else {
+                for (const itemCfg of items) {
+                    const finalCfg = this._prepareItemConfig(itemCfg);
+                    const child = await ez._createElement(finalCfg, controllerName, this);
+                    el.appendChild(child);
+                }
+            }
+        }
+
+        this.el = el;
+        return el;
+    }
+
+    private _prepareItemConfig(itemCfg: FormItemConfig): FormItemConfig {
+        const finalCfg: FormItemConfig = {
+            ...itemCfg,
+            formData: this.config.formData,
+        };
+
+        if (this.config.css && !finalCfg.css) {
+            finalCfg.css = this.config.css;
+        }
+
+        if (!finalCfg.eztype) {
+            finalCfg.eztype = this.config.defaults?.eztype || 'EzInput';
+        }
+
+        return finalCfg;
+    }
+
+    isDirty(): boolean {
+        if (!this._initialFormData) return false;
+
+        const current = this.getFormData();
+        if (!current) return false;
+
+        return !this._shallowEqual(current, this._initialFormData);
+    }
+
+    private _shallowEqual(a: FormData | null, b: FormData | null): boolean {
+        const aKeys = Object.keys(a || {});
+        const bKeys = Object.keys(b || {});
+
+        if (aKeys.length !== bKeys.length) return false;
+
+        for (const k of aKeys) {
+            if (a?.[k] !== b?.[k]) return false;
+        }
+
+        return true;
+    }
+
+    private _resolveFormData(): ResolvedFormData | null {
+        if (!this.config.formData) return null;
+
+        const formData = this.config.formData.includes(':')
+            ? this.config.formData
+            : `${this.config.controller}:${this.config.formData}`;
+
+        const [controllerName, path] = formData.split(':');
+        const controller = ez.getControllerSync(controllerName);
+        if (!controller?.state) return null;
+
+        const props = path.split('.');
+        return {
+            controller,
+            props
+        };
+    }
+
+    getFormData(): FormData | null {
+        const resolved = this._resolveFormData();
+        if (!resolved) return null;
+
+        return ez.getDeepValue(
+            resolved.controller.state,
+            resolved.props
+        ) as FormData | null;
+    }
+
+    setFormData(data: FormData = {}): void {
+        const resolved = this._resolveFormData();
+        if (!resolved) return;
+
+        const target = ez.getDeepValue(resolved.controller.state, resolved.props) as FormData | null;
+        if (!target) return;
+
+        Object.keys(target).forEach(k => delete target[k]);
+        Object.entries(data).forEach(([k, v]) => target[k] = v);
+    }
+
+    private _cloneFormData(obj: unknown): FormData {
+        return JSON.parse(JSON.stringify(obj ?? {}));
+    }
+
+    resetFormData(): void {
+        if (!this._initialFormData) return;
+        this.setFormData(this._initialFormData);
+    }
+
+    private _captureInitialFormData(): void {
+        const resolved = this._resolveFormData();
+        if (!resolved) return;
+
+        const { controller, props } = resolved;
+        const current = ez.getDeepValue(controller.state, props);
+
+        this._initialFormData = this._cloneFormData(current);
+    }
+
+    validate(): boolean {
+        this._errors = {};
+
+        const data = this.getFormData();
+        if (!data) return true;
+
+        for (const item of this._getFormItems()) {
+            const name = item.name;
+            if (!name) continue;
+
+            const value = data[name];
+
+            if (item.validate) {
+                let validateConfig = item.validate;
+
+                if (typeof validateConfig === 'object' && item.required !== undefined) {
+                    validateConfig = { required: item.required, ...validateConfig as object };
+                }
+
+                const result = validateField(value, validateConfig as Parameters<typeof validateField>[1], data);
+                if (!result.valid) {
+                    this._errors[name] = result.message || 'Invalid';
+                    continue;
+                }
+            }
+
+            if (!item.validate && item.required) {
+                let isRequired = false;
+
+                if (item.required === true) {
+                    isRequired = true;
+                } else if (typeof item.required === 'function') {
+                    isRequired = item.required(data);
+                }
+
+                if (isRequired && !EzValidators.required(value)) {
+                    this._errors[name] = item.requiredMessage || 'This field is required';
+                }
+            }
+        }
+
+        return Object.keys(this._errors).length === 0;
+    }
+
+    private _getFormItems(items: FormItemConfig[] = this.config.items || [], out: FormItemConfig[] = []): FormItemConfig[] {
+        for (const item of items) {
+            if (item.name) out.push(item);
+            if (Array.isArray(item.items)) {
+                this._getFormItems(item.items, out);
+            }
+        }
+        return out;
+    }
+
+    private _applyErrors(): void {
+        this.el.querySelectorAll('[data-ez-field]').forEach((input: Element) => {
+            const name = input.getAttribute('data-ez-field');
+            const wrapper = input.closest('.ez-input-group');
+            if (!wrapper || !name) return;
+
+            const errorEl = wrapper.querySelector('.ez-field-error');
+            const row = wrapper.querySelector('.ez-input-row');
+
+            if (this._errors[name]) {
+                wrapper.classList.add('has-error');
+                if (errorEl) errorEl.textContent = this._errors[name];
+                if (row) row.classList.add('ez-error');
+            } else {
+                wrapper.classList.remove('has-error');
+                if (row) row.classList.remove('ez-error');
+                if (errorEl) errorEl.textContent = '';
+            }
+        });
+    }
+
+    private _clearErrors(): void {
+        this._errors = {};
+
+        this.el.querySelectorAll('.ez-input-group').forEach((wrapper: Element) => {
+            wrapper.classList.remove('has-error');
+
+            const row = wrapper.querySelector('.ez-input-row');
+            if (row) row.classList.remove('ez-error');
+
+            const errorEl = wrapper.querySelector('.ez-field-error');
+            if (errorEl) errorEl.textContent = '';
+        });
+    }
+
+    private _handleSubmit(): void {
+        if (typeof this.config.onSubmit === 'function') {
+            this.config.onSubmit(this.getDirtyData(), this.getFormData() || {}, this);
+        } else if (typeof this.config.onSubmit === 'string') {
+            const controller = ez.getControllerSync(this.config.controller as string);
+            const method = controller?.[this.config.onSubmit] as OnSubmitFunction | undefined;
+            method?.(this.getDirtyData(), this.getFormData() || {}, this);
+        } else {
+            throw new Error('EzForm: onSubmit is not defined');
+        }
+    }
+
+    getDirtyData(): FormData {
+        const current = this.getFormData() || {};
+        const initial = this._initialFormData || {};
+        const dirty: FormData = {};
+
+        const allKeys = new Set([...Object.keys(initial), ...Object.keys(current)]);
+
+        for (const key of allKeys) {
+            if (current[key] !== initial[key]) {
+                dirty[key] = current[key];
+            }
+        }
+
+        return dirty;
+    }
+}