ezfw-core 1.0.16 → 1.0.17

package/components/EzBaseComponent.ts

@@ -14,6 +14,7 @@ declare const ez: {
     getDeepValue(obj: unknown, path: string[]): unknown;
     setDeepValue(obj: unknown, path: string[], value: unknown): void;
     _createElement(config: EzComponentConfig): Promise<HTMLElement>;
+    hasStyles(name: string): boolean;
 };
 
 interface EzController {
@@ -41,6 +42,8 @@ interface BindConfig {
     visible?: string;
     cls?: string | (() => string);
     html?: string | (() => string);
+    style?: Record<string, string> | (() => Record<string, string>);
+    text?: string | (() => string);
 }
 
 export interface EzComponentConfig {
@@ -218,6 +221,8 @@ export class EzBaseComponent {
             this._applyDataBind(el, bind, ctrl);
             this._applyVisibleBind(el, bind);
             this._applyClsBind(el, bind);
+            this._applyStyleBind(el, bind);
+            this._applyTextBind(el, bind);
             this._applyHtmlBind(el, bind);
         }
     }
@@ -290,7 +295,13 @@ export class EzBaseComponent {
         const stop = effect(() => {
             (async () => {
                 const itemFn = this.config.itemRender;
-                let data = ez.getDeepValue(ez.getController(activeCtrl!)?.state, props!) as unknown[] | unknown;
+                const controller = ez.getController(activeCtrl!);
+                let data = ez.getDeepValue(controller?.state, props!) as unknown[] | unknown;
+
+                // If not found in state, check computed properties
+                if (data == null && props?.length === 1 && controller?._computed?.[props[0]]) {
+                    data = controller._computed[props[0]].value;
+                }
 
                 if (data == null) {
                     return;
@@ -327,7 +338,10 @@ export class EzBaseComponent {
                         if (!childCfg.controller) {
                             childCfg.controller = activeCtrl;
                         }
-                        if (!childCfg.css && this.config.css) {
+                        // Only inherit CSS if child doesn't have its own CSS module
+                        const childHasOwnCss = childCfg.css ||
+                            (childCfg.eztype && ez.hasStyles(childCfg.eztype));
+                        if (!childHasOwnCss && this.config.css) {
                             childCfg.css = this.config.css;
                             childCfg._styleModule = this.config._styleModule;
                         }
@@ -472,6 +486,60 @@ export class EzBaseComponent {
         this._effects!.push(stop);
     }
 
+    private _applyStyleBind(el: HTMLElement, bind: BindConfig): void {
+        if (!bind.style) return;
+
+        let prevStyles: Record<string, string> = {};
+
+        const stop = effect(() => {
+            let next = bind.style;
+
+            if (typeof next === 'function') {
+                next = next();
+            }
+
+            if (typeof next !== 'object' || next === null) {
+                next = {};
+            }
+
+            // Remove previous styles that are not in the new object
+            for (const key of Object.keys(prevStyles)) {
+                if (!(key in next)) {
+                    (el.style as unknown as Record<string, string>)[key] = '';
+                }
+            }
+
+            // Apply new styles (supports camelCase like 'backgroundColor')
+            for (const [key, value] of Object.entries(next)) {
+                (el.style as unknown as Record<string, string>)[key] = value;
+            }
+
+            prevStyles = { ...next };
+        });
+
+        this._effects!.push(stop);
+    }
+
+    private _applyTextBind(el: HTMLElement, bind: BindConfig): void {
+        if (!bind.text) return;
+
+        const stop = effect(() => {
+            let next = bind.text;
+
+            if (typeof next === 'function') {
+                next = next();
+            }
+
+            if (typeof next !== 'string') {
+                next = String(next ?? '');
+            }
+
+            el.textContent = next;
+        });
+
+        this._effects!.push(stop);
+    }
+
     applyStyles(el: HTMLElement): void {
         if (this.config.style && typeof this.config.style === 'object') {
             Object.assign(el.style, this.config.style);

package/components/checkbox/EzCheckbox.ts

@@ -8,6 +8,7 @@ export interface EzCheckboxConfig extends EzBaseComponentConfig {
     size?: 'sm' | 'lg';
     disabled?: boolean;
     value?: boolean;
+    checked?: boolean;
     name?: string;
     formData?: string;
     label?: string;
@@ -33,7 +34,7 @@ export class EzCheckbox extends EzBaseComponent {
         const input = document.createElement('input');
         input.type = 'checkbox';
         input.className = cls('input');
-        input.checked = !!cfg.value;
+        input.checked = !!(cfg.checked ?? cfg.value);
 
         if (cfg.disabled) input.disabled = true;
         if (cfg.name) input.name = cfg.name;

package/components/input/EzInput.ts

@@ -0,0 +1,168 @@
+import styles from './EzInput.module.scss';
+import { cx } from '../../utils/cssModules.js';
+import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
+
+const cls = cx(styles);
+
+declare const ez: {
+    _createElement(config: unknown): Promise<HTMLElement>;
+};
+
+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;
+    onKeydown?: ((e: KeyboardEvent) => void) | string;
+    onKeyup?: ((e: KeyboardEvent) => void) | string;
+    onEnter?: ((value: string) => void) | string;
+}
+
+export class EzInput extends EzBaseComponent {
+    declare config: EzInputConfig;
+    declare el: HTMLDivElement;
+
+    private _input: HTMLInputElement | null = null;
+    private _error: HTMLDivElement | null = null;
+
+    async render(): Promise<HTMLDivElement> {
+        const cfg = this.config;
+
+        // Build input config
+        const inputConfig: Record<string, unknown> = {
+            eztype: 'input',
+            cls: cls('input'),
+            type: cfg.inputType || 'text',
+            placeholder: cfg.placeholder || '',
+            disabled: cfg.disabled,
+            readonly: cfg.readonly,
+            value: cfg.value !== undefined ? String(cfg.value) : undefined,
+            style: cfg.style
+        };
+
+        // Handle form binding
+        if (cfg.name && cfg.formData) {
+            this.config.bind = `${cfg.formData}.${cfg.name}`;
+        }
+
+        if (cfg.name) {
+            inputConfig['data-ez-field'] = cfg.name;
+        }
+
+        // Handle keyboard events
+        if (cfg.onKeydown && typeof cfg.onKeydown === 'function') {
+            inputConfig.onKeyDown = cfg.onKeydown;
+        }
+
+        if (cfg.onKeyup && typeof cfg.onKeyup === 'function') {
+            inputConfig.onKeyUp = cfg.onKeyup;
+        }
+
+        // Build items array
+        const rowItems: unknown[] = [];
+
+        if (cfg.icon) {
+            rowItems.push({
+                eztype: 'i',
+                cls: [cls('icon'), `fa fa-${cfg.icon}`].join(' ')
+            });
+        }
+
+        rowItems.push(inputConfig);
+
+        // Create wrapper using ez._createElement
+        const wrapper = await ez._createElement({
+            eztype: 'div',
+            cls: this._buildClasses(),
+            items: [
+                {
+                    eztype: 'div',
+                    cls: cls('fieldError')
+                },
+                {
+                    eztype: 'div',
+                    cls: cls('inputRow'),
+                    items: rowItems
+                }
+            ]
+        }) as HTMLDivElement;
+
+        // Get references
+        this._error = wrapper.querySelector(`.${cls('fieldError')}`) as HTMLDivElement;
+        this._input = wrapper.querySelector('input') as HTMLInputElement;
+
+        // Apply bindings and onChange handler
+        if (this._input) {
+            this.applyCommonBindings(this._input);
+
+            const onChange = this._createOnChangeHandler();
+            if (onChange) {
+                this._input.addEventListener('input', e => {
+                    onChange((e.target as HTMLInputElement).value);
+                });
+            }
+
+            // Handle onEnter
+            if (cfg.onEnter && typeof cfg.onEnter === 'function') {
+                const onEnterFn = cfg.onEnter;
+                this._input.addEventListener('keydown', e => {
+                    if (e.key === 'Enter') {
+                        onEnterFn(this._input!.value);
+                    }
+                });
+            }
+        }
+
+        this.el = wrapper;
+        return wrapper;
+    }
+
+    private _buildClasses(): string {
+        const cfg = this.config;
+        const classes: string[] = [cls('inputGroup')];
+
+        if (cfg.size) classes.push(cls(cfg.size));
+        if (cfg.variant) classes.push(cls(cfg.variant));
+        if (cfg.block) classes.push(cls('block'));
+        if (cfg.disabled) classes.push(cls('disabled'));
+
+        return classes.join(' ');
+    }
+
+    showError(message: string): void {
+        if (this.el && this._error) {
+            this.el.classList.add(cls('hasError'));
+            this._error.classList.add(cls('fieldErrorVisible'));
+            this._error.textContent = message;
+        }
+    }
+
+    clearError(): void {
+        if (this.el && this._error) {
+            this.el.classList.remove(cls('hasError'));
+            this._error.classList.remove(cls('fieldErrorVisible'));
+            this._error.textContent = '';
+        }
+    }
+
+    getValue(): string {
+        return this._input?.value || '';
+    }
+
+    setValue(value: string): void {
+        if (this._input) {
+            this._input.value = value;
+        }
+    }
+
+    focus(): void {
+        this._input?.focus();
+    }
+}

package/core/ez.ts

@@ -346,6 +346,10 @@ const ez: EzFramework = {
         });
     },
 
+    getStylesSync(name: string): Record<string, string> | null {
+        return this._stylesCache[name] || null;
+    },
+
     async resolveStyles(name: string): Promise<Record<string, string> | null> {
         if (this._stylesCache[name]) {
             return this._stylesCache[name];

package/core/loader.ts

@@ -273,6 +273,11 @@ export class EzLoader {
         }
 
         this.ez.registerComponent(eztype, exported);
+
+        // Pre-resolve CSS module if it exists (will be cached for sync access later)
+        if (this.ez.hasStyles(eztype)) {
+            await this.ez.resolveStyles(eztype);
+        }
     }
 
     async resolveController(name: string | object | null): Promise<unknown> {

package/core/renderer.ts

@@ -634,10 +634,12 @@ export class EzRenderer {
 
             let merged: ComponentConfig = { ...Registered as ComponentConfig, ...rest };
 
+            // Auto-detect CSS module if component has one
             if (!merged.css && this.ez.hasStyles(eztype)) {
                 merged.css = eztype;
             }
 
+            // Load style module if css is set but module not loaded yet
             if (merged.css && !merged._styleModule) {
                 merged._styleModule = (await this.ez.resolveStyles(merged.css)) || undefined;
             }
@@ -663,8 +665,12 @@ export class EzRenderer {
             if (typeof merged.template === 'function' && !targetIsClassComponent) {
                 const inheritedCss = merged.css;
                 const inheritedStyleModule = merged._styleModule;
+                const inheritedCls = merged.cls;
+                const inheritedLayout = merged.layout;
+                const inheritedEztype = merged.eztype;
+                const inheritedStyle = merged.style;
 
-                const tpl = merged.template(config.props || {}, this.ez._controllers[activeController], controllerState);
+                const tpl = merged.template(merged, this.ez._controllers[activeController], controllerState);
                 if (!tpl || typeof tpl !== 'object') {
                     throw new EzError({
                         code: 'EZ_TEMPLATE_001',
@@ -681,6 +687,18 @@ export class EzRenderer {
                     merged.css = inheritedCss;
                     merged._styleModule = inheritedStyleModule;
                 }
+                if (inheritedCls && !merged.cls) {
+                    merged.cls = inheritedCls;
+                }
+                if (inheritedLayout && !merged.layout) {
+                    merged.layout = inheritedLayout;
+                }
+                if (inheritedEztype && !merged.eztype) {
+                    merged.eztype = inheritedEztype;
+                }
+                if (inheritedStyle && !merged.style) {
+                    merged.style = inheritedStyle;
+                }
             }
 
             el = await this.createElement(merged, activeController, controllerState);
@@ -766,7 +784,10 @@ export class EzRenderer {
                 localItem._ezSourcePath = parentSource || undefined;
             }
 
-            if (parentCss && !localItem.css) {
+            // Only inherit CSS if child doesn't have its own CSS module
+            const childHasOwnCss = localItem.css ||
+                (localItem.eztype && this.ez.hasStyles(localItem.eztype));
+            if (parentCss && !childHasOwnCss) {
                 localItem.css = parentCss;
             }
 

package/core/state.ts

@@ -1,9 +1,13 @@
 import { deepSignal } from 'deepsignal';
+import { computed, type ReadonlySignal } from '@preact/signals';
 import { EzError } from './EzError.js';
 
 export interface ControllerDefinition {
     state?: Record<string, unknown>;
+    computed?: Record<string, () => unknown>;
+    _computed?: Record<string, ReadonlySignal<unknown>>;
     getState?: (key?: string) => unknown;
+    getComputed?: (key: string) => unknown;
     [key: string]: unknown;
 }
 
@@ -48,6 +52,25 @@ export class EzState {
             return (definition.state as Record<string, unknown>)[key];
         };
 
+        // Process computed properties
+        if (definition.computed) {
+            definition._computed = {};
+            for (const [key, fn] of Object.entries(definition.computed)) {
+                const computedSignal = computed(() => fn.call(definition));
+                definition._computed[key] = computedSignal;
+
+                // Make computed accessible directly on controller (e.g., ctrl.filteredTodos)
+                Object.defineProperty(definition, key, {
+                    get: () => computedSignal.value,
+                    enumerable: true
+                });
+            }
+
+            definition.getComputed = (key: string) => {
+                return definition._computed?.[key]?.value;
+            };
+        }
+
         this.ez._controllers[name] = definition;
     }
 

package/modules.ts

@@ -4,7 +4,7 @@
 export const frameworkModules: Record<string, () => Promise<unknown>> = {
     // Core components
     './components/EzComponent.ts': () => import('./components/EzComponent.js'),
-    './components/EzInput.ts': () => import('./components/EzInput.js'),
+    './components/EzInput.ts': () => import('./components/input/EzInput.js'),
     './components/EzLabel.ts': () => import('./components/EzLabel.js'),
     './components/EzOutlet.ts': () => import('./components/EzOutlet.js'),
     './components/EzBaseComponent.ts': () => import('./components/EzBaseComponent.js'),
@@ -82,7 +82,7 @@ export const frameworkModules: Record<string, () => Promise<unknown>> = {
 };
 
 export const frameworkStyles: Record<string, () => Promise<unknown>> = {
-    './components/EzInput.module.scss': () => import('./components/EzInput.module.scss'),
+    './components/EzInput.module.scss': () => import('./components/input/EzInput.module.scss'),
     './components/button/EzButton.module.scss': () => import('./components/button/EzButton.module.scss'),
     './components/card/EzCard.module.scss': () => import('./components/card/EzCard.module.scss'),
     './components/avatar/EzAvatar.module.scss': () => import('./components/avatar/EzAvatar.module.scss'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ezfw-core",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "Ez Framework - A declarative component framework for building modern web applications",
   "type": "module",
   "main": "./core/ez.ts",

package/components/EzInput.ts

@@ -1,132 +0,0 @@
-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;
-    onKeydown?: (e: KeyboardEvent, ctrl: unknown) => void;
-    onKeyup?: (e: KeyboardEvent, ctrl: unknown) => void;
-    onEnter?: (value: string, ctrl: unknown) => void;
-}
-
-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);
-            }
-        });
-
-        const getController = () => {
-            const ctrlName = this.config.controller;
-            return ctrlName ? ez.getControllerSync(ctrlName) : null;
-        };
-
-        if (cfg.onKeydown) {
-            input.addEventListener('keydown', e => {
-                cfg.onKeydown!(e, getController());
-            });
-        }
-
-        if (cfg.onKeyup) {
-            input.addEventListener('keyup', e => {
-                cfg.onKeyup!(e, getController());
-            });
-        }
-
-        if (cfg.onEnter) {
-            input.addEventListener('keydown', e => {
-                if (e.key === 'Enter') {
-                    cfg.onEnter!(input.value, getController());
-                }
-            });
-        }
-
-        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 = '';
-        }
-    }
-}