ezfw-core 1.0.38 → 1.0.39

package/components/EzBaseComponent.js

@@ -366,12 +366,7 @@ export class EzBaseComponent {
                         result = left == right;
                         break;
                 }
-                if (result) {
-                    el.removeAttribute('data-ez-hidden');
-                }
-                else {
-                    el.setAttribute('data-ez-hidden', '');
-                }
+                el.style.display = result ? '' : 'none';
             });
             this._effects.push(stop);
         }
@@ -397,12 +392,7 @@ export class EzBaseComponent {
             }
             const stop = effect(() => {
                 const result = !!ez.getDeepValue(ez._controllers[activeCtrl]?.state, props);
-                if (result) {
-                    el.removeAttribute('data-ez-hidden');
-                }
-                else {
-                    el.setAttribute('data-ez-hidden', '');
-                }
+                el.style.display = result ? '' : 'none';
             });
             this._effects.push(stop);
         }

package/components/EzBaseComponent.ts

@@ -558,12 +558,12 @@ export class EzBaseComponent {
                 const state = ez._controllers[controllerName]?.state;
                 const left = ez.getDeepValue(state, props) as number | string;
 
-                // Parse boolean, null, undefined literals
-                let right: string | number | boolean | null | undefined = rightExpr;
-                if (rightExpr === 'true') right = true;
-                else if (rightExpr === 'false') right = false;
-                else if (rightExpr === 'null') right = null;
-                else if (rightExpr === 'undefined') right = undefined;
+                // Parse boolean, null, undefined literals
+                let right: string | number | boolean | null | undefined = rightExpr;
+                if (rightExpr === 'true') right = true;
+                else if (rightExpr === 'false') right = false;
+                else if (rightExpr === 'null') right = null;
+                else if (rightExpr === 'undefined') right = undefined;
                 else if (!isNaN(Number(rightExpr))) right = Number(rightExpr);
 
                 let result = true;
@@ -576,11 +576,7 @@ export class EzBaseComponent {
                     case '==': result = left == right; break;
                 }
 
-                if (result) {
-                    el.removeAttribute('data-ez-hidden');
-                } else {
-                    el.setAttribute('data-ez-hidden', '');
-                }
+                el.style.display = result ? '' : 'none';
             });
             this._effects!.push(stop);
         } else {
@@ -606,11 +602,7 @@ export class EzBaseComponent {
 
             const stop = effect(() => {
                 const result = !!ez.getDeepValue(ez._controllers[activeCtrl!]?.state, props);
-                if (result) {
-                    el.removeAttribute('data-ez-hidden');
-                } else {
-                    el.setAttribute('data-ez-hidden', '');
-                }
+                el.style.display = result ? '' : 'none';
             });
             this._effects!.push(stop);
         }

package/components/components/EzBaseComponent.d.ts

@@ -0,0 +1,177 @@
+import { EzStyleShortcuts } from '../core/styleShortcuts.js';
+interface EzController {
+    state: Record<string, unknown>;
+    _computed?: Record<string, {
+        value: unknown;
+    }>;
+    [key: string]: unknown;
+}
+interface StyleModule {
+    [className: string]: string;
+}
+type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+type TooltipVariant = 'dark' | 'light';
+interface TooltipConfig {
+    text?: string;
+    component?: EzComponentConfig;
+    position?: TooltipPosition;
+    variant?: TooltipVariant;
+    delay?: number;
+}
+interface BindConfig {
+    value?: string;
+    data?: string;
+    visible?: string;
+    cls?: string | (() => string);
+    html?: string | (() => string);
+    sanitizeHtml?: boolean;
+    style?: Record<string, string> | (() => Record<string, string>);
+    text?: string | (() => string);
+    [key: string]: unknown;
+}
+type StyleValue = string | number | undefined;
+export interface EzComponentConfig {
+    controller?: string | null;
+    bind?: string | BindConfig;
+    text?: string | number;
+    cls?: string | string[];
+    style?: Partial<CSSStyleDeclaration>;
+    tooltip?: string | TooltipConfig;
+    props?: Record<string, unknown>;
+    css?: string | unknown;
+    _styleModule?: StyleModule;
+    onChange?: string | ((value: unknown) => void);
+    itemRender?: (item: unknown, index: number, meta: ItemRenderMeta) => EzComponentConfig | null;
+    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;
+    w?: StyleValue;
+    h?: StyleValue;
+    minW?: StyleValue;
+    maxW?: StyleValue;
+    minH?: StyleValue;
+    maxH?: StyleValue;
+    justify?: string;
+    align?: string;
+    alignSelf?: string;
+    wrap?: string | boolean;
+    fs?: StyleValue;
+    fw?: StyleValue;
+    ta?: string;
+    lh?: StyleValue;
+    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;
+    d?: string;
+    pos?: string;
+    z?: number;
+    overflow?: string;
+    top?: StyleValue;
+    right?: StyleValue;
+    bottom?: StyleValue;
+    left?: StyleValue;
+    ezStyle?: EzStyleShortcuts;
+    showOnHover?: boolean;
+    [key: string]: unknown;
+}
+export type EzBaseComponentConfig = EzComponentConfig;
+interface ItemRenderMeta {
+    isFirst: boolean;
+    isLast: boolean;
+    isEven: boolean;
+}
+interface ResolvedBinding {
+    controller: EzController;
+    path: string[];
+}
+type EffectCleanup = () => void;
+type DomListenerCleanup = () => void;
+export declare class EzBaseComponent {
+    config: EzComponentConfig;
+    props: Record<string, unknown>;
+    el: HTMLElement | null;
+    controller: EzController | null;
+    protected _effects?: EffectCleanup[];
+    protected _domListeners?: DomListenerCleanup[];
+    protected _children?: EzBaseComponent[];
+    protected _tooltip?: HTMLDivElement;
+    protected _tooltipCleanup?: () => void;
+    protected _activateHandler?: (e: Event) => void;
+    protected _showOnHoverCleanup?: () => void;
+    constructor(config?: EzComponentConfig);
+    /**
+     * Lifecycle method called when component becomes active/visible.
+     * Override in subclasses to handle activation (e.g., reload data).
+     * Triggered by parent containers like EzTabPanel via 'ez-activate' event.
+     */
+    onActivate(): void;
+    /**
+     * Setup activation listener on element.
+     * Call this in render() after element is created.
+     */
+    protected _setupActivateListener(el: HTMLElement): void;
+    protected _resolveController(): Promise<void>;
+    /**
+     * Resolve binding configuration to get controller and path.
+     * Supports:
+     * - String: "form.username" or "ControllerName:form.username"
+     * - Object: { value: "form.username" }
+     */
+    protected _resolveBinding(): ResolvedBinding | null;
+    /**
+     * Create onChange handler from config or binding.
+     * Priority: function > string method name > auto from binding
+     */
+    protected _createOnChangeHandler(): ((value: unknown) => void) | null;
+    applyCommonBindings(el: HTMLElement): void;
+    private _applyValueBind;
+    private _applyDataBind;
+    private _applyVisibleBind;
+    private _applyClsBind;
+    private _applyHtmlBind;
+    private _applyStyleBind;
+    private _applyTextBind;
+    applyStyles(el: HTMLElement): void;
+    /**
+     * Apply static cls with CSS module resolution
+     */
+    applyCls(el: HTMLElement): void;
+    /**
+     * Apply tooltip if configured.
+     * Tooltip is created lazily on first hover to avoid DOM pollution.
+     * Supports text tooltips: tooltip: "Hello" or tooltip: { text: "Hello" }
+     * Supports component tooltips: tooltip: { component: { eztype: 'MyCard', props: {...} } }
+     */
+    applyTooltip(el: HTMLElement): void;
+    /**
+     * Apply showOnHover behavior.
+     * Element is hidden by default and revealed when parent is hovered.
+     * Must be called AFTER element is added to DOM (needs parentElement).
+     */
+    applyShowOnHover(el: HTMLElement): void;
+    destroy(): void;
+}
+export {};