ezfw-core 1.0.0

package/components/EzComponent.ts

@@ -0,0 +1,89 @@
+import { EzBaseComponent, EzComponentConfig } from "./EzBaseComponent.js";
+
+declare const ez: {
+    _createChildElements(
+        items: EzComponentConfig[],
+        controller: string | null,
+        state: unknown,
+        css: string | null
+    ): Promise<Node[]>;
+};
+
+export type LayoutType = 'hbox' | 'vbox';
+
+export interface EzComponentExtendedConfig extends EzComponentConfig {
+    layout?: LayoutType;
+    flex?: string | number;
+    items?: EzComponentConfig[];
+    formData?: Record<string, unknown> | string;
+    onClick?: (e: MouseEvent, component: EzComponent) => void;
+}
+
+export class EzComponent extends EzBaseComponent {
+    declare config: EzComponentExtendedConfig;
+
+    constructor(config: EzComponentExtendedConfig = {}) {
+        super(config);
+        this.config = config;
+    }
+
+    async render(): Promise<HTMLElement> {
+        const el = document.createElement('div');
+        const { layout, style = {} } = this.config;
+
+        // 📦 Predefined layouts
+        if (layout === 'hbox') {
+            el.style.display = 'flex';
+            el.style.flexDirection = 'row';
+        }
+
+        if (layout === 'vbox') {
+            el.style.display = 'flex';
+            el.style.flexDirection = 'column';
+        }
+
+        // 🎨 Additional inline styles
+        Object.assign(el.style, style);
+
+        if (this.config.flex) {
+            el.style.flex = String(this.config.flex);
+        }
+
+        this.applyCls(el);
+        this.applyCommonBindings(el);
+
+        if (this.config.onClick) {
+            el.addEventListener('click', (e: MouseEvent) => {
+                this.config.onClick!(e, this);
+            });
+        }
+
+        // 🧩 Render children (async)
+        if (this.config.items) {
+            const items = this.config.items.map(item => {
+                if (!item.formData && this.config.formData) {
+                    return {
+                        ...item,
+                        formData: this.config.formData
+                    };
+                }
+                return item;
+            });
+
+            const children = await ez._createChildElements(
+                items,
+                this.config.controller || null,
+                null,
+                (typeof this.config.css === 'string' ? this.config.css : null) as string | null
+            );
+
+            for (const child of children) {
+                if (child instanceof Node) {
+                    el.appendChild(child);
+                }
+            }
+        }
+
+        return el;
+    }
+}

package/components/EzInput.module.scss

@@ -0,0 +1,183 @@
+// ==========================================================
+// EzInput - CSS Module
+// ==========================================================
+
+.inputGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+
+.inputRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  background: var(--ez-input-bg, #ffffff);
+  border: 1px solid var(--ez-input-border, #e2e8f0);
+  border-radius: var(--ez-radius-md, 6px);
+
+  padding: 0 12px;
+  height: 36px;
+
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+  &:hover {
+    border-color: var(--ez-text-tertiary, #94a3b8);
+  }
+
+  &:focus-within {
+    border-color: var(--ez-input-border-focus, #005871);
+    box-shadow: 0 0 0 2px var(--ez-primary-light, rgba(0, 88, 113, 0.15));
+  }
+}
+
+.icon {
+  color: var(--ez-text-tertiary, #94a3b8);
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.input {
+  flex: 1;
+  min-width: 0;
+
+  height: 100%;
+  padding: 0;
+
+  font-family: inherit;
+  font-size: 13px;
+  color: var(--ez-input-text, #1e293b);
+
+  background: transparent;
+  border: none;
+  outline: none;
+
+  &::placeholder {
+    color: var(--ez-input-placeholder, #94a3b8);
+  }
+
+  &:disabled {
+    color: var(--ez-text-tertiary, #94a3b8);
+    cursor: not-allowed;
+  }
+
+  &[readonly] {
+    color: var(--ez-text-secondary, #64748b);
+  }
+}
+
+// ----------------------------------------------------------
+// Disabled state
+// ----------------------------------------------------------
+.disabled {
+  background: var(--ez-surface-primary, #f8fafc);
+  cursor: not-allowed;
+
+  &:hover {
+    border-color: var(--ez-input-border, #e2e8f0);
+  }
+
+  .icon {
+    opacity: 0.5;
+  }
+}
+
+// ----------------------------------------------------------
+// Error state
+// ----------------------------------------------------------
+.hasError {
+  .inputRow {
+    border-color: var(--ez-danger, #dc2626);
+
+    &:focus-within {
+      border-color: var(--ez-danger, #dc2626);
+      box-shadow: 0 0 0 2px var(--ez-danger-light, rgba(220, 38, 38, 0.15));
+    }
+  }
+}
+
+.fieldError {
+  display: none;
+  font-size: 12px;
+  color: var(--ez-danger, #dc2626);
+  padding-left: 2px;
+}
+
+.fieldErrorVisible {
+  display: block;
+}
+
+// ----------------------------------------------------------
+// Sizes
+// ----------------------------------------------------------
+.sm {
+  .inputRow {
+    height: 30px;
+    padding: 0 10px;
+  }
+
+  .input {
+    font-size: 12px;
+  }
+
+  .icon {
+    font-size: 12px;
+  }
+}
+
+.lg {
+  .inputRow {
+    height: 44px;
+    padding: 0 14px;
+  }
+
+  .input {
+    font-size: 14px;
+  }
+
+  .icon {
+    font-size: 16px;
+  }
+}
+
+// ----------------------------------------------------------
+// Variants
+// ----------------------------------------------------------
+.filled {
+  .inputRow {
+    background: var(--ez-surface-primary, #f1f5f9);
+    border-color: transparent;
+
+    &:hover {
+      background: var(--ez-surface-tertiary, #e2e8f0);
+    }
+
+    &:focus-within {
+      background: var(--ez-input-bg, #ffffff);
+      border-color: var(--ez-input-border-focus, #005871);
+    }
+  }
+}
+
+.underline {
+  .inputRow {
+    border-radius: 0;
+    border: none;
+    border-bottom: 1px solid var(--ez-input-border, #e2e8f0);
+    padding: 0 4px;
+
+    &:focus-within {
+      border-color: var(--ez-input-border-focus, #005871);
+      box-shadow: 0 1px 0 0 var(--ez-input-border-focus, #005871);
+    }
+  }
+}
+
+// ----------------------------------------------------------
+// Block mode (full width)
+// ----------------------------------------------------------
+.block {
+  width: 100%;
+}

package/components/EzInput.ts

@@ -0,0 +1,104 @@
+import styles from './EzInput.module.scss';
+import { cx } from '../utils/cssModules.js';
+import { EzBaseComponent, EzBaseComponentConfig } from './EzBaseComponent.js';
+
+const cls = cx(styles);
+
+export interface EzInputConfig extends EzBaseComponentConfig {
+    size?: 'sm' | 'lg';
+    variant?: 'filled' | 'underline';
+    block?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    icon?: string;
+    inputType?: string;
+    placeholder?: string;
+    value?: string | number;
+    name?: string;
+    formData?: string;
+}
+
+export class EzInput extends EzBaseComponent {
+    declare config: EzInputConfig;
+
+    private _wrapper: HTMLDivElement | null = null;
+    private _error: HTMLDivElement | null = null;
+
+    render(): HTMLDivElement {
+        const cfg = this.config;
+
+        const wrapper = document.createElement('div');
+        wrapper.className = cls(
+            'inputGroup',
+            cfg.size,
+            cfg.variant,
+            cfg.block && 'block',
+            cfg.disabled && 'disabled'
+        );
+
+        const error = document.createElement('div');
+        error.className = cls('fieldError');
+        wrapper.appendChild(error);
+
+        const row = document.createElement('div');
+        row.className = cls('inputRow');
+
+        if (cfg.icon) {
+            const icon = document.createElement('i');
+            icon.className = cls('icon', `fa fa-${cfg.icon}`);
+            row.appendChild(icon);
+        }
+
+        const input = document.createElement('input');
+        input.className = cls('input');
+        input.type = cfg.inputType || 'text';
+        input.placeholder = cfg.placeholder || '';
+        if (cfg.value !== undefined) input.value = String(cfg.value);
+
+        if (cfg.name && cfg.formData) {
+            this.config.bind = `${cfg.formData}.${cfg.name}`;
+        }
+
+        if (cfg.name) {
+            input.setAttribute('data-ez-field', cfg.name);
+        }
+
+        if (cfg.disabled) input.disabled = true;
+        if (cfg.readonly) input.readOnly = true;
+
+        this.applyCommonBindings(input);
+        this.applyStyles(input);
+
+        const onChange = this._createOnChangeHandler();
+
+        input.addEventListener('input', e => {
+            if (onChange) {
+                onChange((e.target as HTMLInputElement).value);
+            }
+        });
+
+        row.appendChild(input);
+        wrapper.appendChild(row);
+
+        this._wrapper = wrapper;
+        this._error = error;
+
+        return wrapper;
+    }
+
+    showError(message: string): void {
+        if (this._wrapper && this._error) {
+            this._wrapper.classList.add(cls('hasError'));
+            this._error.classList.add(cls('fieldErrorVisible'));
+            this._error.textContent = message;
+        }
+    }
+
+    clearError(): void {
+        if (this._wrapper && this._error) {
+            this._wrapper.classList.remove(cls('hasError'));
+            this._error.classList.remove(cls('fieldErrorVisible'));
+            this._error.textContent = '';
+        }
+    }
+}

package/components/EzLabel.ts

@@ -0,0 +1,22 @@
+import { EzBaseComponent, EzBaseComponentConfig } from './EzBaseComponent.js';
+
+export interface EzLabelConfig extends EzBaseComponentConfig {
+    text?: string;
+}
+
+export class EzLabel extends EzBaseComponent {
+    declare config: EzLabelConfig;
+
+    constructor(config: EzLabelConfig = {}) {
+        super(config);
+        this.config = config;
+    }
+
+    render(): HTMLSpanElement {
+        const el = document.createElement('span');
+        this.applyCommonBindings(el);
+        this.applyStyles(el);
+
+        return el;
+    }
+}

package/components/EzOutlet.ts

@@ -0,0 +1,181 @@
+import { EzBaseComponent, EzBaseComponentConfig } from './EzBaseComponent.js';
+
+declare const ez: {
+    get(name: string): ViewDefinition | null;
+    getController(name: string): Promise<EzController | null>;
+    _createElement(config: unknown, controller?: string | null, parent?: unknown): Promise<HTMLElement & { __ezInstance?: EzBaseComponent }>;
+};
+
+interface ViewDefinition {
+    template?: (props: unknown) => unknown;
+    controller?: string;
+    [key: string]: unknown;
+}
+
+interface EzController {
+    onRouteChange?: (route: RouteInfo) => Promise<void>;
+    [key: string]: unknown;
+}
+
+interface RouteInfo {
+    fullPath: string;
+    params: Record<string, string>;
+    chain: unknown[];
+}
+
+export interface EzOutletConfig extends EzBaseComponentConfig {
+    name?: string;
+    stretch?: boolean;
+    layout?: 'vbox' | 'hbox';
+    flex?: number | string;
+}
+
+export class EzOutlet extends EzBaseComponent {
+    declare config: EzOutletConfig;
+    declare el: HTMLElement;
+
+    name: string;
+    private _currentInstance: EzBaseComponent | null = null;
+    private _currentView: string | null = null;
+    private _currentParams: Record<string, string> | null = null;
+
+    constructor(config: EzOutletConfig = {}) {
+        super(config);
+        this.name = config.name || 'default';
+    }
+
+    async render(): Promise<HTMLElement> {
+        const el = document.createElement('div');
+
+        const classes: string[] = [];
+        if (this.config.cls) {
+            classes.push(this.config.cls as string);
+        }
+        if (this.config.stretch) {
+            classes.push('ez-outlet');
+        }
+        if (classes.length) {
+            el.className = classes.join(' ');
+        }
+
+        if (this.config.stretch || this.config.layout === 'vbox') {
+            el.style.display = 'flex';
+            el.style.flexDirection = 'column';
+        }
+
+        if (this.config.stretch || this.config.flex) {
+            el.style.flex = String(this.config.flex ?? 1);
+            el.style.minHeight = '0';
+            el.style.overflow = 'auto';
+        }
+
+        this.el = el;
+        return el;
+    }
+
+    async open(view: string | null, params: Record<string, string> = {}, chain: unknown[] = []): Promise<void> {
+        if (!view) {
+            this.close();
+            return;
+        }
+
+        if (this._currentView === view && this._currentInstance) {
+            const def = ez.get(view);
+            const paramsChanged = JSON.stringify(this._currentParams) !== JSON.stringify(params);
+
+            const isTemplateBased = typeof def?.template === 'function';
+
+            if (isTemplateBased) {
+                if (!paramsChanged) {
+                    return;
+                }
+            } else if (def?.controller) {
+                const ctrl = await ez.getController(def.controller);
+                if (ctrl?.onRouteChange) {
+                    this._currentParams = params;
+                    await ctrl.onRouteChange({
+                        fullPath: window.location.pathname,
+                        params,
+                        chain
+                    });
+                    return;
+                }
+            }
+
+            if (!paramsChanged) {
+                return;
+            }
+        }
+
+        if (this._currentInstance) {
+            this._currentInstance.destroy?.();
+            this.el.innerHTML = '';
+            this._currentInstance = null;
+        }
+
+        const el = await ez._createElement(
+            {
+                eztype: view,
+                routeParams: params,
+                props: { routeParams: params }
+            },
+            null,
+            this
+        );
+
+        this.el.appendChild(el);
+
+        this._currentInstance = el.__ezInstance || null;
+        this._currentView = view;
+        this._currentParams = params;
+
+        const def = ez.get(view);
+        if (def?.controller) {
+            const ctrl = await ez.getController(def.controller);
+            if (ctrl?.onRouteChange) {
+                await ctrl.onRouteChange({
+                    fullPath: window.location.pathname,
+                    params,
+                    chain
+                });
+            }
+        }
+    }
+
+    close(): void {
+        if (this._currentInstance) {
+            this._currentInstance.destroy?.();
+            this.el.innerHTML = '';
+            this._currentInstance = null;
+        }
+        this._currentView = null;
+        this._currentParams = null;
+    }
+
+    getCurrentView(): string | null {
+        return this._currentView;
+    }
+
+    getCurrentParams(): Record<string, string> | null {
+        return this._currentParams;
+    }
+
+    isOpen(): boolean {
+        return this._currentInstance !== null;
+    }
+
+    getInstance(): EzBaseComponent | null {
+        return this._currentInstance;
+    }
+
+    destroy(): void {
+        if (this._currentInstance) {
+            this._currentInstance.destroy?.();
+            this._currentInstance = null;
+        }
+        this._currentView = null;
+        this._currentParams = null;
+
+        super.destroy();
+    }
+}