ezfw-core 1.0.21 → 1.0.23

package/components/timepicker/EzTimePicker.ts

@@ -442,7 +442,7 @@ export class EzTimePicker extends EzBaseComponent {
                 this._close();
             }
         };
-        document.addEventListener('click', this._outsideClickHandler);
+        document.addEventListener('click', this._outsideClickHandler, true);
 
         this._input.addEventListener('keydown', (e) => {
             if (e.key === 'Escape') {
@@ -530,7 +530,7 @@ export class EzTimePicker extends EzBaseComponent {
 
     destroy(): void {
         if (this._outsideClickHandler) {
-            document.removeEventListener('click', this._outsideClickHandler);
+            document.removeEventListener('click', this._outsideClickHandler, true);
         }
         if (this._dropdown && this._dropdown.parentNode) {
             this._dropdown.parentNode.removeChild(this._dropdown);

package/components/tooltip/EzTooltip.ts

@@ -3,6 +3,7 @@ import { cx } from '../../utils/cssModules.js';
 import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
 
 declare const ez: {
+    _createElement(config: unknown, controller?: string | null, parent?: unknown): Promise<HTMLElement>;
     _createChildElements(items: unknown[], controller: string | null, state: unknown): Promise<Node[]>;
 };
 
@@ -33,34 +34,25 @@ export class EzTooltip extends EzBaseComponent {
     async render(): Promise<HTMLElement> {
         const cfg = this.config;
 
-        const wrapper = document.createElement('div');
-        wrapper.className = cls('tooltipWrapper');
-
-        if (cfg.items && cfg.items.length > 0) {
-            const children = await ez._createChildElements(
-                cfg.items,
-                this.config.controller || null,
-                null
-            );
-            for (const child of children) {
-                if (child instanceof Node) {
-                    wrapper.appendChild(child);
-                }
-            }
-        }
-
-        const tooltip = document.createElement('div');
-        tooltip.className = cls(
-            'tooltip',
-            cfg.variant || 'dark'
-        );
-        tooltip.textContent = cfg.text || '';
-        tooltip.style.opacity = '0';
-        tooltip.style.visibility = 'hidden';
-
-        const arrow = document.createElement('div');
-        arrow.className = cls('arrow');
-        tooltip.appendChild(arrow);
+        const wrapper = await ez._createElement({
+            eztype: 'div',
+            cls: cls('tooltipWrapper'),
+            items: cfg.items || [],
+            onMouseEnter: () => this._scheduleShow(),
+            onMouseLeave: () => this._scheduleHide(),
+            onFocus: () => this._scheduleShow(),
+            onBlur: () => this._scheduleHide()
+        }, this.config.controller || null, this) as HTMLElement;
+
+        const tooltip = await ez._createElement({
+            eztype: 'div',
+            cls: cls('tooltip', cfg.variant || 'dark'),
+            text: cfg.text || '',
+            style: { opacity: '0', visibility: 'hidden' },
+            items: [
+                { eztype: 'div', cls: cls('arrow') }
+            ]
+        }) as HTMLElement;
 
         document.body.appendChild(tooltip);
 
@@ -70,11 +62,6 @@ export class EzTooltip extends EzBaseComponent {
         this._delay = cfg.delay ?? 200;
         this._hideDelay = cfg.hideDelay ?? 0;
 
-        wrapper.addEventListener('mouseenter', () => this._scheduleShow());
-        wrapper.addEventListener('mouseleave', () => this._scheduleHide());
-        wrapper.addEventListener('focus', () => this._scheduleShow(), true);
-        wrapper.addEventListener('blur', () => this._scheduleHide(), true);
-
         return wrapper;
     }
 

package/core/ez.ts

@@ -152,7 +152,9 @@ export interface EzFramework {
     registerComponent(eztype: string, cls: unknown): void;
     installModules(mods: Record<string, () => Promise<unknown>>): void;
     installStyles(styles: Record<string, () => Promise<unknown>>): void;
+    readonly _modules: Record<string, () => Promise<unknown>>;
     hasStyles(name: string): boolean;
+    getStylesSync(name: string): Record<string, string> | null;
     resolveStyles(name: string): Promise<Record<string, string> | null>;
     get(name: string): unknown;
     getController(name: string): Promise<ControllerDefinition> | ControllerDefinition;
@@ -337,6 +339,11 @@ const ez: EzFramework = {
         this._styles = styles;
     },
 
+    // Expose modules for island hydration runtime
+    get _modules(): Record<string, () => Promise<unknown>> {
+        return this._loader?.getModules() || {};
+    },
+
     hasStyles(name: string): boolean {
         if (!name || !this._styles) return false;
         const lowerName = name.toLowerCase();

package/core/loader.ts

@@ -65,6 +65,8 @@ interface EzInstance {
     };
     _router?: EzRouter;
     registerComponent(name: string, component: unknown): void;
+    hasStyles(name: string): boolean;
+    resolveStyles(name: string): Promise<Record<string, string> | null>;
 }
 
 export class EzLoader {

package/core/renderer.ts

@@ -2,11 +2,14 @@ import { EzError } from './EzError.js';
 import { EzBaseComponent, EzBaseComponentConfig } from '../components/EzBaseComponent.js';
 import tooltipStyles from '../components/tooltip/EzTooltip.module.scss';
 import { cx } from '../utils/cssModules.js';
+import { extractStyleShortcuts, mergeStyles, ALL_SHORTCUT_KEYS, EzStyleShortcuts } from './styleShortcuts.js';
 
 const tooltipCls = cx(tooltipStyles);
 
 export type LazyMode = 'visible' | 'idle';
 
+type StyleValue = string | number | undefined;
+
 export interface ComponentConfig extends EzBaseComponentConfig {
     eztype?: string;
     controller?: string;
@@ -40,6 +43,72 @@ export interface ComponentConfig extends EzBaseComponentConfig {
     routeParams?: Record<string, string>;
     layout?: string;
     style?: Record<string, string>;
+
+    // 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;
 }
 
 interface TooltipConfig {
@@ -457,6 +526,7 @@ export class EzRenderer {
 
         const registeredController = typeof Registered === 'object' ? Registered.controller : null;
         const activeController = config.controller || registeredController || controllerName || '';
+
         await this.ez._loader.resolveController(activeController);
 
         this.ez._context.controller = activeController;
@@ -670,7 +740,8 @@ export class EzRenderer {
                 const inheritedEztype = merged.eztype;
                 const inheritedStyle = merged.style;
 
-                const tpl = merged.template(merged, this.ez._controllers[activeController], controllerState);
+                const templateProps = merged.props || merged;
+                const tpl = merged.template(templateProps, this.ez._controllers[activeController], controllerState);
                 if (!tpl || typeof tpl !== 'object') {
                     throw new EzError({
                         code: 'EZ_TEMPLATE_001',
@@ -699,6 +770,11 @@ export class EzRenderer {
                 if (inheritedStyle && !merged.style) {
                     merged.style = inheritedStyle;
                 }
+
+                // Load style module for template result if css is set but module not loaded
+                if (merged.css && !merged._styleModule) {
+                    merged._styleModule = (await this.ez.resolveStyles(merged.css)) || undefined;
+                }
             }
 
             el = await this.createElement(merged, activeController, controllerState);
@@ -776,9 +852,9 @@ export class EzRenderer {
         const parentSource = (inheritedState as { _ezSourcePath?: string })?._ezSourcePath || null;
 
         for (const item of items) {
-            const localItem = item?.controller
-                ? this.cloneConfig(item)
-                : { ...this.cloneConfig(item), controller: controllerName };
+            // Don't override controller here - let createElement resolve it
+            // based on: config.controller > registeredController > controllerName
+            const localItem = this.cloneConfig(item);
 
             if (!localItem._ezSourcePath) {
                 localItem._ezSourcePath = parentSource || undefined;

package/core/styleShortcuts.ts

@@ -0,0 +1,418 @@
+type StyleValue = string | number | undefined;
+
+interface StyleShortcuts {
+    // 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;
+
+    // Sizing
+    w?: StyleValue;
+    h?: StyleValue;
+    minW?: StyleValue;
+    maxW?: StyleValue;
+    minH?: StyleValue;
+    maxH?: StyleValue;
+
+    // Flexbox
+    justify?: string;
+    align?: string;
+    alignSelf?: string;
+    wrap?: string | boolean;
+
+    // Typography
+    fs?: StyleValue;
+    fw?: StyleValue;
+    ta?: string;
+    lh?: StyleValue;
+
+    // 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;
+
+    // Layout
+    d?: string;
+    pos?: string;
+    z?: number;
+    overflow?: string;
+    top?: StyleValue;
+    right?: StyleValue;
+    bottom?: StyleValue;
+    left?: StyleValue;
+
+    // Wrapper for grouping shortcuts
+    ezStyle?: Omit<StyleShortcuts, 'ezStyle'>;
+}
+
+const SHADOW_PRESETS: Record<string, string> = {
+    none: 'none',
+    sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+    md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+    lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+    xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+    '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)'
+};
+
+const FRACTION_MAP: Record<string, string> = {
+    'full': '100%',
+    'half': '50%',
+    '1/2': '50%',
+    '1/3': '33.333333%',
+    '2/3': '66.666667%',
+    '1/4': '25%',
+    '2/4': '50%',
+    '3/4': '75%',
+    '1/5': '20%',
+    '2/5': '40%',
+    '3/5': '60%',
+    '4/5': '80%',
+    '1/6': '16.666667%',
+    '5/6': '83.333333%',
+    'auto': 'auto',
+    'fit': 'fit-content',
+    'min': 'min-content',
+    'max': 'max-content',
+    'screen': '100vh',
+    'screenW': '100vw'
+};
+
+const JUSTIFY_MAP: Record<string, string> = {
+    start: 'flex-start',
+    end: 'flex-end',
+    center: 'center',
+    between: 'space-between',
+    around: 'space-around',
+    evenly: 'space-evenly',
+    stretch: 'stretch'
+};
+
+const ALIGN_MAP: Record<string, string> = {
+    start: 'flex-start',
+    end: 'flex-end',
+    center: 'center',
+    baseline: 'baseline',
+    stretch: 'stretch'
+};
+
+function convertValue(value: StyleValue, defaultUnit: string = 'rem'): string {
+    if (value === undefined || value === null) return '';
+
+    if (typeof value === 'string') {
+        if (FRACTION_MAP[value]) {
+            return FRACTION_MAP[value];
+        }
+        return value;
+    }
+
+    if (typeof value === 'number') {
+        if (value === 0) return '0';
+        return `${value}${defaultUnit}`;
+    }
+
+    return String(value);
+}
+
+function convertPixelValue(value: StyleValue): string {
+    if (value === undefined || value === null) return '';
+
+    if (typeof value === 'string') {
+        if (FRACTION_MAP[value]) {
+            return FRACTION_MAP[value];
+        }
+        return value;
+    }
+
+    if (typeof value === 'number') {
+        if (value === 0) return '0';
+        return `${value}px`;
+    }
+
+    return String(value);
+}
+
+export function extractStyleShortcuts(config: Record<string, unknown>): {
+    styles: Record<string, string>;
+    cleanConfig: Record<string, unknown>;
+} {
+    const cleanConfig: Record<string, unknown> = {};
+
+    const shortcutKeys = new Set([
+        'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py',
+        'm', 'mt', 'mr', 'mb', 'ml', 'mx', 'my',
+        'gap', 'w', 'h', 'minW', 'maxW', 'minH', 'maxH',
+        'justify', 'align', 'alignSelf', 'wrap',
+        'fs', 'fw', 'ta', 'lh',
+        'bg', 'color', 'rounded', 'br', 'brt', 'brb', 'brl', 'brr',
+        'brtl', 'brtr', 'brbl', 'brbr', 'shadow', 'opacity',
+        'd', 'pos', 'z', 'overflow',
+        'top', 'right', 'bottom', 'left',
+        'ezStyle'
+    ]);
+
+    for (const key in config) {
+        if (!shortcutKeys.has(key)) {
+            cleanConfig[key] = config[key];
+        }
+    }
+
+    // Merge ezStyle with top-level shortcuts (top-level takes priority)
+    const ezStyleObj = (config.ezStyle as Record<string, unknown>) || {};
+    const mergedShortcuts = { ...ezStyleObj, ...config } as StyleShortcuts;
+    delete (mergedShortcuts as Record<string, unknown>).ezStyle;
+
+    const shortcuts = mergedShortcuts;
+    const styles: Record<string, string> = {};
+
+    // Padding
+    if (shortcuts.p !== undefined) {
+        styles.padding = convertValue(shortcuts.p);
+    }
+    if (shortcuts.pt !== undefined) {
+        styles.paddingTop = convertValue(shortcuts.pt);
+    }
+    if (shortcuts.pr !== undefined) {
+        styles.paddingRight = convertValue(shortcuts.pr);
+    }
+    if (shortcuts.pb !== undefined) {
+        styles.paddingBottom = convertValue(shortcuts.pb);
+    }
+    if (shortcuts.pl !== undefined) {
+        styles.paddingLeft = convertValue(shortcuts.pl);
+    }
+    if (shortcuts.px !== undefined) {
+        const val = convertValue(shortcuts.px);
+        styles.paddingLeft = val;
+        styles.paddingRight = val;
+    }
+    if (shortcuts.py !== undefined) {
+        const val = convertValue(shortcuts.py);
+        styles.paddingTop = val;
+        styles.paddingBottom = val;
+    }
+
+    // Margin
+    if (shortcuts.m !== undefined) {
+        styles.margin = convertValue(shortcuts.m);
+    }
+    if (shortcuts.mt !== undefined) {
+        styles.marginTop = convertValue(shortcuts.mt);
+    }
+    if (shortcuts.mr !== undefined) {
+        styles.marginRight = convertValue(shortcuts.mr);
+    }
+    if (shortcuts.mb !== undefined) {
+        styles.marginBottom = convertValue(shortcuts.mb);
+    }
+    if (shortcuts.ml !== undefined) {
+        styles.marginLeft = convertValue(shortcuts.ml);
+    }
+    if (shortcuts.mx !== undefined) {
+        const val = convertValue(shortcuts.mx);
+        styles.marginLeft = val;
+        styles.marginRight = val;
+    }
+    if (shortcuts.my !== undefined) {
+        const val = convertValue(shortcuts.my);
+        styles.marginTop = val;
+        styles.marginBottom = val;
+    }
+
+    // Gap
+    if (shortcuts.gap !== undefined) {
+        styles.gap = convertValue(shortcuts.gap);
+    }
+
+    // Sizing
+    if (shortcuts.w !== undefined) {
+        styles.width = convertPixelValue(shortcuts.w);
+    }
+    if (shortcuts.h !== undefined) {
+        styles.height = convertPixelValue(shortcuts.h);
+    }
+    if (shortcuts.minW !== undefined) {
+        styles.minWidth = convertPixelValue(shortcuts.minW);
+    }
+    if (shortcuts.maxW !== undefined) {
+        styles.maxWidth = convertPixelValue(shortcuts.maxW);
+    }
+    if (shortcuts.minH !== undefined) {
+        styles.minHeight = convertPixelValue(shortcuts.minH);
+    }
+    if (shortcuts.maxH !== undefined) {
+        styles.maxHeight = convertPixelValue(shortcuts.maxH);
+    }
+
+    // Flexbox
+    if (shortcuts.justify !== undefined) {
+        styles.justifyContent = JUSTIFY_MAP[shortcuts.justify] || shortcuts.justify;
+    }
+    if (shortcuts.align !== undefined) {
+        styles.alignItems = ALIGN_MAP[shortcuts.align] || shortcuts.align;
+    }
+    if (shortcuts.alignSelf !== undefined) {
+        styles.alignSelf = ALIGN_MAP[shortcuts.alignSelf] || shortcuts.alignSelf;
+    }
+    if (shortcuts.wrap !== undefined) {
+        if (typeof shortcuts.wrap === 'boolean') {
+            styles.flexWrap = shortcuts.wrap ? 'wrap' : 'nowrap';
+        } else {
+            styles.flexWrap = shortcuts.wrap;
+        }
+    }
+
+    // Typography
+    if (shortcuts.fs !== undefined) {
+        styles.fontSize = convertValue(shortcuts.fs);
+    }
+    if (shortcuts.fw !== undefined) {
+        styles.fontWeight = String(shortcuts.fw);
+    }
+    if (shortcuts.ta !== undefined) {
+        styles.textAlign = shortcuts.ta;
+    }
+    if (shortcuts.lh !== undefined) {
+        styles.lineHeight = typeof shortcuts.lh === 'number'
+            ? String(shortcuts.lh)
+            : shortcuts.lh;
+    }
+
+    // Visual
+    if (shortcuts.bg !== undefined) {
+        styles.background = shortcuts.bg;
+    }
+    if (shortcuts.color !== undefined) {
+        styles.color = shortcuts.color;
+    }
+    // Border radius - rounded and br are aliases
+    const brValue = shortcuts.br ?? shortcuts.rounded;
+    if (brValue !== undefined) {
+        if (typeof brValue === 'boolean') {
+            if (brValue) {
+                styles.borderRadius = '0.5rem';
+            }
+        } else {
+            styles.borderRadius = convertValue(brValue);
+        }
+    }
+    if (shortcuts.brt !== undefined) {
+        const val = convertValue(shortcuts.brt);
+        styles.borderTopLeftRadius = val;
+        styles.borderTopRightRadius = val;
+    }
+    if (shortcuts.brb !== undefined) {
+        const val = convertValue(shortcuts.brb);
+        styles.borderBottomLeftRadius = val;
+        styles.borderBottomRightRadius = val;
+    }
+    if (shortcuts.brl !== undefined) {
+        const val = convertValue(shortcuts.brl);
+        styles.borderTopLeftRadius = val;
+        styles.borderBottomLeftRadius = val;
+    }
+    if (shortcuts.brr !== undefined) {
+        const val = convertValue(shortcuts.brr);
+        styles.borderTopRightRadius = val;
+        styles.borderBottomRightRadius = val;
+    }
+    if (shortcuts.brtl !== undefined) {
+        styles.borderTopLeftRadius = convertValue(shortcuts.brtl);
+    }
+    if (shortcuts.brtr !== undefined) {
+        styles.borderTopRightRadius = convertValue(shortcuts.brtr);
+    }
+    if (shortcuts.brbl !== undefined) {
+        styles.borderBottomLeftRadius = convertValue(shortcuts.brbl);
+    }
+    if (shortcuts.brbr !== undefined) {
+        styles.borderBottomRightRadius = convertValue(shortcuts.brbr);
+    }
+    if (shortcuts.shadow !== undefined) {
+        styles.boxShadow = SHADOW_PRESETS[shortcuts.shadow] || shortcuts.shadow;
+    }
+    if (shortcuts.opacity !== undefined) {
+        styles.opacity = String(shortcuts.opacity);
+    }
+
+    // Layout
+    if (shortcuts.d !== undefined) {
+        styles.display = shortcuts.d;
+    }
+    if (shortcuts.pos !== undefined) {
+        styles.position = shortcuts.pos;
+    }
+    if (shortcuts.z !== undefined) {
+        styles.zIndex = String(shortcuts.z);
+    }
+    if (shortcuts.overflow !== undefined) {
+        styles.overflow = shortcuts.overflow;
+    }
+
+    // Position values
+    if (shortcuts.top !== undefined) {
+        styles.top = convertPixelValue(shortcuts.top);
+    }
+    if (shortcuts.right !== undefined) {
+        styles.right = convertPixelValue(shortcuts.right);
+    }
+    if (shortcuts.bottom !== undefined) {
+        styles.bottom = convertPixelValue(shortcuts.bottom);
+    }
+    if (shortcuts.left !== undefined) {
+        styles.left = convertPixelValue(shortcuts.left);
+    }
+
+    return { styles, cleanConfig };
+}
+
+export function mergeStyles(
+    shortcutStyles: Record<string, string>,
+    configStyles?: Record<string, string>
+): Record<string, string> {
+    if (!configStyles || Object.keys(configStyles).length === 0) {
+        return shortcutStyles;
+    }
+    // configStyles has priority over shortcuts
+    return { ...shortcutStyles, ...configStyles };
+}
+
+export type EzStyleShortcuts = Omit<StyleShortcuts, 'ezStyle'>;
+
+export const ALL_SHORTCUT_KEYS = [
+    'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py',
+    'm', 'mt', 'mr', 'mb', 'ml', 'mx', 'my',
+    'gap', 'w', 'h', 'minW', 'maxW', 'minH', 'maxH',
+    'justify', 'align', 'alignSelf', 'wrap',
+    'fs', 'fw', 'ta', 'lh',
+    'bg', 'color', 'rounded', 'br', 'brt', 'brb', 'brl', 'brr',
+    'brtl', 'brtr', 'brbl', 'brbr', 'shadow', 'opacity',
+    'd', 'pos', 'z', 'overflow',
+    'top', 'right', 'bottom', 'left',
+    'ezStyle'
+] as const;
+
+export type ShortcutKey = typeof ALL_SHORTCUT_KEYS[number];

package/package.json

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