ezfw-core 1.0.21 → 1.0.23

package/components/EzBaseComponent.ts

@@ -1,6 +1,7 @@
 import { effect } from '@preact/signals';
 import tooltipStyles from './tooltip/EzTooltip.module.scss';
 import { cx } from '../utils/cssModules.js';
+import { extractStyleShortcuts, mergeStyles, EzStyleShortcuts } from '../core/styleShortcuts.js';
 
 const tooltipCls = cx(tooltipStyles);
 
@@ -11,6 +12,7 @@ const tooltipCls = cx(tooltipStyles);
 declare const ez: {
     _controllers: Record<string, EzController | undefined>;
     getController(name: string): EzController | null;
+    getControllerSync(name: string): EzController | null;
     getDeepValue(obj: unknown, path: string[]): unknown;
     setDeepValue(obj: unknown, path: string[], value: unknown): void;
     _createElement(config: EzComponentConfig): Promise<HTMLElement>;
@@ -19,6 +21,7 @@ declare const ez: {
 
 interface EzController {
     state: Record<string, unknown>;
+    _computed?: Record<string, { value: unknown }>;
     [key: string]: unknown;
 }
 
@@ -46,6 +49,8 @@ interface BindConfig {
     text?: string | (() => string);
 }
 
+type StyleValue = string | number | undefined;
+
 export interface EzComponentConfig {
     controller?: string | null;
     bind?: string | BindConfig;
@@ -58,6 +63,73 @@ export interface EzComponentConfig {
     _styleModule?: StyleModule;
     onChange?: string | ((value: unknown) => void);
     itemRender?: (item: unknown, index: number, meta: ItemRenderMeta) => EzComponentConfig | null;
+
+    // Style shortcuts - Spacing
+    p?: StyleValue;
+    pt?: StyleValue;
+    pr?: StyleValue;
+    pb?: StyleValue;
+    pl?: StyleValue;
+    px?: StyleValue;
+    py?: StyleValue;
+    m?: StyleValue;
+    mt?: StyleValue;
+    mr?: StyleValue;
+    mb?: StyleValue;
+    ml?: StyleValue;
+    mx?: StyleValue;
+    my?: StyleValue;
+    gap?: StyleValue;
+
+    // Style shortcuts - Sizing
+    w?: StyleValue;
+    h?: StyleValue;
+    minW?: StyleValue;
+    maxW?: StyleValue;
+    minH?: StyleValue;
+    maxH?: StyleValue;
+
+    // Style shortcuts - Flexbox
+    justify?: string;
+    align?: string;
+    alignSelf?: string;
+    wrap?: string | boolean;
+
+    // Style shortcuts - Typography
+    fs?: StyleValue;
+    fw?: StyleValue;
+    ta?: string;
+    lh?: StyleValue;
+
+    // Style shortcuts - Visual
+    bg?: string;
+    color?: string;
+    rounded?: StyleValue | boolean;
+    br?: StyleValue | boolean;
+    brt?: StyleValue;
+    brb?: StyleValue;
+    brl?: StyleValue;
+    brr?: StyleValue;
+    brtl?: StyleValue;
+    brtr?: StyleValue;
+    brbl?: StyleValue;
+    brbr?: StyleValue;
+    shadow?: string;
+    opacity?: number;
+
+    // Style shortcuts - Layout
+    d?: string;
+    pos?: string;
+    z?: number;
+    overflow?: string;
+    top?: StyleValue;
+    right?: StyleValue;
+    bottom?: StyleValue;
+    left?: StyleValue;
+
+    // Wrapper for grouping shortcuts
+    ezStyle?: EzStyleShortcuts;
+
     [key: string]: unknown;
 }
 
@@ -292,10 +364,15 @@ export class EzBaseComponent {
             props = bind.data.split('.');
         }
 
+        // Track render version to cancel stale async renders
+        let currentRenderVersion = 0;
+
         const stop = effect(() => {
+            const renderVersion = ++currentRenderVersion;
+
             (async () => {
                 const itemFn = this.config.itemRender;
-                const controller = ez.getController(activeCtrl!);
+                const controller = ez.getControllerSync(activeCtrl!);
                 let data = ez.getDeepValue(controller?.state, props!) as unknown[] | unknown;
 
                 // If not found in state, check computed properties
@@ -311,6 +388,9 @@ export class EzBaseComponent {
                     data = [data];
                 }
 
+                // Check if this render is still current before modifying DOM
+                if (renderVersion !== currentRenderVersion) return;
+
                 el.innerHTML = '';
 
                 if (Array.isArray(data)) {
@@ -318,8 +398,10 @@ export class EzBaseComponent {
                     (el as HTMLElement & { _ezListRendered: boolean })._ezListRendered = true;
                     el.setAttribute("data-ez-list", "true");
 
-                    el.innerHTML = '';
                     for (let i = 0; i < data.length; i++) {
+                        // Check if render is still current before each iteration
+                        if (renderVersion !== currentRenderVersion) return;
+
                         if (data[i] == null) {
                             if (import.meta.env.DEV) {
                                 console.warn(`[Ez] bind.data: Item at index ${i} is null/undefined. Controller: "${activeCtrl}", path: "${props!.join('.')}". Skipping.`);
@@ -340,12 +422,16 @@ export class EzBaseComponent {
                         }
                         // Only inherit CSS if child doesn't have its own CSS module
                         const childHasOwnCss = childCfg.css ||
-                            (childCfg.eztype && ez.hasStyles(childCfg.eztype));
+                            (typeof childCfg.eztype === 'string' && ez.hasStyles(childCfg.eztype));
                         if (!childHasOwnCss && this.config.css) {
                             childCfg.css = this.config.css;
                             childCfg._styleModule = this.config._styleModule;
                         }
                         const childEl = await ez._createElement(childCfg);
+
+                        // Final check before appending
+                        if (renderVersion !== currentRenderVersion) return;
+
                         el.appendChild(childEl);
                     }
                 }
@@ -541,8 +627,17 @@ export class EzBaseComponent {
     }
 
     applyStyles(el: HTMLElement): void {
-        if (this.config.style && typeof this.config.style === 'object') {
-            Object.assign(el.style, this.config.style);
+        // Extract style shortcuts from config
+        const { styles: shortcutStyles } = extractStyleShortcuts(this.config as Record<string, unknown>);
+
+        // Merge shortcuts with explicit style (explicit style takes priority)
+        const finalStyles = mergeStyles(
+            shortcutStyles,
+            this.config.style as Record<string, string> | undefined
+        );
+
+        if (Object.keys(finalStyles).length > 0) {
+            Object.assign(el.style, finalStyles);
         }
     }
 

package/components/EzComponent.ts

@@ -29,7 +29,7 @@ export class EzComponent extends EzBaseComponent {
 
     async render(): Promise<HTMLElement> {
         const el = document.createElement('div');
-        const { layout, style = {} } = this.config;
+        const { layout } = this.config;
 
         // 📦 Predefined layouts
         if (layout === 'hbox') {
@@ -42,8 +42,8 @@ export class EzComponent extends EzBaseComponent {
             el.style.flexDirection = 'column';
         }
 
-        // 🎨 Additional inline styles
-        Object.assign(el.style, style);
+        // 🎨 Apply styles (includes shortcuts like p, m, bg, etc.)
+        this.applyStyles(el);
 
         if (this.config.flex) {
             el.style.flex = String(this.config.flex);

package/components/EzLabel.ts

@@ -1,5 +1,9 @@
 import { EzBaseComponent, EzBaseComponentConfig } from './EzBaseComponent.js';
 
+declare const ez: {
+    _createElement(config: unknown): Promise<HTMLElement>;
+};
+
 export interface EzLabelConfig extends EzBaseComponentConfig {
     text?: string;
 }
@@ -12,10 +16,15 @@ export class EzLabel extends EzBaseComponent {
         this.config = config;
     }
 
-    render(): HTMLSpanElement {
-        const el = document.createElement('span');
-        this.applyCommonBindings(el);
+    async render(): Promise<HTMLSpanElement> {
+        const el = await ez._createElement({
+            eztype: 'span',
+            text: this.config.text
+        }) as HTMLSpanElement;
+
+        this.applyCls(el);
         this.applyStyles(el);
+        this.applyCommonBindings(el);
 
         return el;
     }

package/components/avatar/EzAvatar.ts

@@ -4,6 +4,10 @@ import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
 
 const cls = cx(styles);
 
+declare const ez: {
+    _createElement(config: unknown): Promise<HTMLElement>;
+};
+
 const STATUS_MAP: Record<string, string> = {
     'online': 'statusOnline',
     'offline': 'statusOffline',
@@ -33,82 +37,108 @@ export class EzAvatar extends EzBaseComponent {
         this.config = config;
     }
 
-    render(): HTMLDivElement {
-        const el = document.createElement('div');
+    async render(): Promise<HTMLDivElement> {
+        const items: unknown[] = [];
 
-        el.classList.add(cls('avatar'));
+        // Image or initials
+        if (this.config.src) {
+            items.push({
+                eztype: 'img',
+                cls: cls('avatarImg'),
+                src: this.config.src,
+                alt: this.config.alt || this.config.name || ''
+            });
+        } else {
+            items.push({
+                eztype: 'span',
+                cls: cls('avatarInitials'),
+                text: this._getInitials()
+            });
+        }
 
-        if (this.config.width || this.config.height) {
-            const width = this.config.width || this.config.height;
-            const height = this.config.height || this.config.width;
+        // Status indicator
+        if (this.config.status) {
+            const statusClass = STATUS_MAP[this.config.status] || 'statusOffline';
+            items.push({
+                eztype: 'span',
+                cls: cls('avatarStatus', statusClass)
+            });
+        }
 
-            el.style.width = typeof width === 'number' ? `${width}px` : String(width);
-            el.style.height = typeof height === 'number' ? `${height}px` : String(height);
+        const el = await ez._createElement({
+            eztype: 'div',
+            cls: this._buildClasses(),
+            style: this._buildStyles(),
+            onClick: this.config.onClick ? (e: MouseEvent) => {
+                this.config.onClick!(e, this);
+            } : undefined,
+            items
+        }) as HTMLDivElement;
 
-            const sizeNum = typeof width === 'number' ? width : parseInt(String(width), 10);
-            if (sizeNum) {
-                el.style.fontSize = `${Math.round(sizeNum * 0.4)}px`;
-            }
-        }
-        else if (this.config.size) {
-            if (typeof this.config.size === 'number') {
-                el.style.width = `${this.config.size}px`;
-                el.style.height = `${this.config.size}px`;
-                el.style.fontSize = `${Math.round(this.config.size * 0.4)}px`;
-            }
-            else {
-                el.classList.add(cls(this.config.size));
+        // Handle image error - fallback to initials
+        if (this.config.src) {
+            const img = el.querySelector('img');
+            if (img) {
+                img.onerror = async () => {
+                    img.remove();
+                    const initialsEl = await ez._createElement({
+                        eztype: 'span',
+                        cls: cls('avatarInitials'),
+                        text: this._getInitials()
+                    });
+                    el.insertBefore(initialsEl, el.firstChild);
+                };
             }
         }
 
+        this.applyStyles(el);
+
+        return el;
+    }
+
+    private _buildClasses(): string[] {
+        const classes: string[] = [cls('avatar')];
+
         if (this.config.variant) {
-            el.classList.add(cls(this.config.variant));
+            classes.push(cls(this.config.variant));
         }
 
         if (this.config.color) {
-            el.classList.add(cls(this.config.color));
+            classes.push(cls(this.config.color));
         }
 
         if (this.config.onClick) {
-            el.classList.add(cls('clickable'));
-            el.addEventListener('click', e => {
-                this.config.onClick!(e, this);
-            });
+            classes.push(cls('clickable'));
         }
 
-        if (this.config.src) {
-            const img = document.createElement('img');
-            img.className = cls('avatarImg');
-            img.src = this.config.src;
-            img.alt = this.config.alt || this.config.name || '';
+        if (typeof this.config.size === 'string') {
+            classes.push(cls(this.config.size));
+        }
 
-            img.onerror = () => {
-                img.remove();
-                el.appendChild(this._createInitials());
-            };
+        return classes;
+    }
 
-            el.appendChild(img);
-        } else {
-            el.appendChild(this._createInitials());
-        }
+    private _buildStyles(): Record<string, string> | undefined {
+        const styles: Record<string, string> = {};
 
-        if (this.config.status) {
-            const status = document.createElement('span');
-            const statusClass = STATUS_MAP[this.config.status] || 'statusOffline';
-            status.className = cls('avatarStatus', statusClass);
-            el.appendChild(status);
-        }
+        if (this.config.width || this.config.height) {
+            const width = this.config.width || this.config.height;
+            const height = this.config.height || this.config.width;
 
-        this.applyStyles(el);
+            styles.width = typeof width === 'number' ? `${width}px` : String(width);
+            styles.height = typeof height === 'number' ? `${height}px` : String(height);
 
-        return el;
-    }
+            const sizeNum = typeof width === 'number' ? width : parseInt(String(width), 10);
+            if (sizeNum) {
+                styles.fontSize = `${Math.round(sizeNum * 0.4)}px`;
+            }
+        } else if (typeof this.config.size === 'number') {
+            styles.width = `${this.config.size}px`;
+            styles.height = `${this.config.size}px`;
+            styles.fontSize = `${Math.round(this.config.size * 0.4)}px`;
+        }
 
-    private _createInitials(): HTMLSpanElement {
-        const initialsEl = document.createElement('span');
-        initialsEl.className = cls('avatarInitials');
-        initialsEl.textContent = this._getInitials();
-        return initialsEl;
+        return Object.keys(styles).length > 0 ? styles : undefined;
     }
 
     private _getInitials(): string {

package/components/badge/EzBadge.ts

@@ -4,6 +4,10 @@ import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
 
 const cls = cx(styles);
 
+declare const ez: {
+    _createElement(config: unknown): Promise<HTMLElement>;
+};
+
 export interface EzBadgeConfig extends EzBaseComponentConfig {
     variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
     size?: 'sm' | 'lg';
@@ -21,53 +25,68 @@ export class EzBadge extends EzBaseComponent {
     declare config: EzBadgeConfig;
     declare el: HTMLSpanElement;
 
-    render(): HTMLSpanElement {
+    async render(): Promise<HTMLSpanElement> {
         const cfg = this.config;
 
-        const badge = document.createElement('span');
-        badge.className = cls(
+        const classes = cls(
             'badge',
             cfg.variant || 'default',
             cfg.size,
             cfg.pill && 'pill',
             cfg.outline && 'outline',
-            cfg.dot && 'dot'
+            cfg.dot && 'dot',
+            cfg.onClick && 'clickable'
         );
 
+        // Dot badge has no content
         if (cfg.dot) {
+            const badge = await ez._createElement({
+                eztype: 'span',
+                cls: classes
+            }) as HTMLSpanElement;
+
+            this.applyStyles(badge);
+            this.el = badge;
             return badge;
         }
 
+        const items: unknown[] = [];
+
         if (cfg.icon) {
-            const icon = document.createElement('i');
-            icon.className = cls('icon', cfg.icon);
-            badge.appendChild(icon);
+            items.push({
+                eztype: 'i',
+                cls: [cls('icon'), cfg.icon].join(' ')
+            });
         }
 
         if (cfg.text !== undefined) {
-            const text = document.createElement('span');
-            text.className = cls('text');
-            text.textContent = String(cfg.text);
-            badge.appendChild(text);
+            items.push({
+                eztype: 'span',
+                cls: cls('text'),
+                text: String(cfg.text)
+            });
         }
 
         if (cfg.closable) {
-            const close = document.createElement('button');
-            close.type = 'button';
-            close.className = cls('close');
-            close.innerHTML = '<i class="fa-solid fa-xmark"></i>';
-            close.addEventListener('click', (e: MouseEvent) => {
-                e.stopPropagation();
-                if (cfg.onClose) cfg.onClose(e);
-                badge.remove();
+            items.push({
+                eztype: 'button',
+                type: 'button',
+                cls: cls('close'),
+                items: [{ eztype: 'i', cls: 'fa-solid fa-xmark' }],
+                onClick: (e: MouseEvent) => {
+                    e.stopPropagation();
+                    if (cfg.onClose) cfg.onClose(e);
+                    this.el?.remove();
+                }
             });
-            badge.appendChild(close);
         }
 
-        if (cfg.onClick) {
-            badge.classList.add(cls('clickable'));
-            badge.addEventListener('click', cfg.onClick);
-        }
+        const badge = await ez._createElement({
+            eztype: 'span',
+            cls: classes,
+            onClick: cfg.onClick,
+            items
+        }) as HTMLSpanElement;
 
         this.applyStyles(badge);
         this.el = badge;

package/components/button/EzButton.ts

@@ -124,7 +124,7 @@ export class EzButton extends EzBaseComponent {
         return items;
     }
 
-    private _applyLoadingState(el: HTMLButtonElement, loading: boolean): void {
+    private async _applyLoadingState(el: HTMLButtonElement, loading: boolean): Promise<void> {
         const spinnerClass = cls('spinner');
 
         if (loading) {
@@ -132,8 +132,10 @@ export class EzButton extends EzBaseComponent {
             el.disabled = true;
 
             if (!el.querySelector(`.${spinnerClass}`)) {
-                const spinner = document.createElement('span');
-                spinner.className = spinnerClass;
+                const spinner = await ez._createElement({
+                    eztype: 'span',
+                    cls: spinnerClass
+                });
                 el.insertBefore(spinner, el.firstChild);
             }
         } else {

package/components/button/EzButtonGroup.ts

@@ -25,20 +25,17 @@ export class EzButtonGroup extends EzBaseComponent {
 
     async render(): Promise<HTMLDivElement> {
         const cfg = this.config;
-        const el = document.createElement('div');
-
-        el.classList.add(cls('buttonGroup'));
 
+        const classes = [cls('buttonGroup')];
         if (cfg.vertical) {
-            el.classList.add(cls('buttonGroupVertical'));
+            classes.push(cls('buttonGroupVertical'));
         }
 
-        if (Array.isArray(cfg.items)) {
-            for (const item of cfg.items) {
-                const child = await ez._createElement(item, cfg.controller || null, this);
-                el.appendChild(child);
-            }
-        }
+        const el = await ez._createElement({
+            eztype: 'div',
+            cls: classes.join(' '),
+            items: cfg.items || []
+        }, cfg.controller || null, this) as HTMLDivElement;
 
         this.applyStyles(el);
         this.el = el;

package/components/card/EzCard.ts

@@ -69,10 +69,11 @@ export class EzCard extends EzBaseComponent {
             result.push(this._buildHeader());
         }
 
-        // Body
+        // Body - propagate parent CSS to children
         result.push({
             eztype: 'div',
             cls: noPadding ? [cls('body'), cls('noPadding')] : cls('body'),
+            css: this.config.css,
             items: items
         });
 

package/components/chart/EzChart.ts

@@ -2,6 +2,7 @@ import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
 import styles from './EzChart.module.scss';
 
 declare const ez: {
+    _createElement(config: unknown): Promise<HTMLElement>;
     registerComponent(name: string, component: unknown): void;
 };
 
@@ -123,23 +124,27 @@ export class EzChart extends EzBaseComponent {
 
         const { height = 280, cls = '' } = this.config;
 
-        const el = document.createElement('div');
-        el.className = `${styles.container} ${cls}`.trim();
-        if (height) {
-            el.style.height = typeof height === 'number' ? `${height}px` : height;
-        }
-
-        const canvas = document.createElement('canvas');
-        el.appendChild(canvas);
-
-        this.applyStyles(el);
-
-        requestAnimationFrame(() => {
-            this._initChart(canvas);
-        });
+        const el = await ez._createElement({
+            eztype: 'div',
+            cls: [styles.container, cls].filter(Boolean).join(' '),
+            style: {
+                height: height ? (typeof height === 'number' ? `${height}px` : height) : undefined,
+                ...this.config.style as object
+            },
+            items: [
+                {
+                    eztype: 'canvas',
+                    _ezAfterRender: (canvas: HTMLCanvasElement) => {
+                        this._canvas = canvas;
+                        requestAnimationFrame(() => {
+                            this._initChart(canvas);
+                        });
+                    }
+                }
+            ]
+        }) as HTMLElement;
 
         this._el = el;
-        this._canvas = canvas;
         return el;
     }