ezfw-core 1.0.21 → 1.0.23

package/components/checkbox/EzCheckbox.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 EzCheckboxConfig extends EzBaseComponentConfig {
     size?: 'sm' | 'lg';
     disabled?: boolean;
@@ -21,62 +25,62 @@ export class EzCheckbox extends EzBaseComponent {
     private _input: HTMLInputElement | null = null;
     private _error: HTMLDivElement | null = null;
 
-    render(): HTMLLabelElement {
+    async render(): Promise<HTMLLabelElement> {
         const cfg = this.config;
 
-        const wrapper = document.createElement('label');
-        wrapper.className = cls(
-            'checkbox',
-            cfg.size,
-            cfg.disabled && 'disabled'
-        );
-
-        const input = document.createElement('input');
-        input.type = 'checkbox';
-        input.className = cls('input');
-        input.checked = !!(cfg.checked ?? cfg.value);
-
-        if (cfg.disabled) input.disabled = true;
-        if (cfg.name) input.name = cfg.name;
-
         if (cfg.name && cfg.formData) {
             this.config.bind = `${cfg.formData}.${cfg.name}`;
         }
 
-        const box = document.createElement('span');
-        box.className = cls('box');
-
-        const check = document.createElement('i');
-        check.className = cls('check', 'fa-solid fa-check');
-        box.appendChild(check);
-
-        this.applyCommonBindings(input);
-
-        const onChange = this._createOnChangeHandler();
-
-        input.addEventListener('change', e => {
-            if (onChange) {
-                onChange((e.target as HTMLInputElement).checked);
+        const items: unknown[] = [
+            {
+                eztype: 'input',
+                type: 'checkbox',
+                cls: cls('input'),
+                checked: !!(cfg.checked ?? cfg.value),
+                disabled: cfg.disabled,
+                name: cfg.name
+            },
+            {
+                eztype: 'span',
+                cls: cls('box'),
+                items: [{ eztype: 'i', cls: [cls('check'), 'fa-solid fa-check'].join(' ') }]
             }
-        });
-
-        wrapper.appendChild(input);
-        wrapper.appendChild(box);
+        ];
 
         if (cfg.label) {
-            const label = document.createElement('span');
-            label.className = cls('label');
-            label.textContent = cfg.label;
-            wrapper.appendChild(label);
+            items.push({
+                eztype: 'span',
+                cls: cls('label'),
+                text: cfg.label
+            });
         }
 
-        const error = document.createElement('div');
-        error.className = cls('fieldError');
-        wrapper.appendChild(error);
+        items.push({
+            eztype: 'div',
+            cls: cls('fieldError')
+        });
+
+        const wrapper = await ez._createElement({
+            eztype: 'label',
+            cls: cls('checkbox', cfg.size, cfg.disabled && 'disabled'),
+            items
+        }) as HTMLLabelElement;
 
         this._wrapper = wrapper;
-        this._input = input;
-        this._error = error;
+        this._input = wrapper.querySelector('input');
+        this._error = wrapper.querySelector(`.${cls('fieldError')}`);
+
+        if (this._input) {
+            this.applyCommonBindings(this._input);
+
+            const onChange = this._createOnChangeHandler();
+            this._input.addEventListener('change', e => {
+                if (onChange) {
+                    onChange((e.target as HTMLInputElement).checked);
+                }
+            });
+        }
 
         return wrapper;
     }

package/components/dataview/EzDataView.ts

@@ -3,6 +3,7 @@ import { createEzStore } from '../store/EzStore.js';
 import buttonStyles from '../button/EzButton.module.scss';
 
 declare const ez: {
+    _createElement(config: unknown, controller?: string | null, parent?: unknown): Promise<HTMLElement>;
     _createChildElements(items: unknown[], controller: string | null, state: unknown): Promise<Node[]>;
     getControllerSync(name: string): EzController | null;
     define(name: string, component: unknown): void;
@@ -311,36 +312,20 @@ export class EzDataView extends EzBaseComponent {
     }
 
     async render(): Promise<HTMLElement> {
-        const el = document.createElement('div');
-
-        el.style.display = 'flex';
-        el.style.flexDirection = 'column';
-        el.style.minHeight = '0';
-
-        if (this.config.flex) {
-            el.style.flex = String(this.config.flex);
-        }
-
-        if (this.config.style) {
-            Object.assign(el.style, this.config.style);
-        }
-
-        this.applyCls(el);
-
         const items = (this.config as { items?: unknown[] }).items;
-        if (items) {
-            const children = await ez._createChildElements(
-                items,
-                this.config.controller || null,
-                null
-            );
-
-            for (const child of children) {
-                if (child instanceof Node) {
-                    el.appendChild(child);
-                }
-            }
-        }
+
+        const el = await ez._createElement({
+            eztype: 'div',
+            cls: this.config.cls,
+            style: {
+                display: 'flex',
+                flexDirection: 'column',
+                minHeight: '0',
+                flex: this.config.flex ? String(this.config.flex) : undefined,
+                ...this.config.style as object
+            },
+            items: items || []
+        }, this.config.controller || null, this) as HTMLElement;
 
         this.el = el;
 

package/components/dataview/modes/EzDataViewCards.ts

@@ -1,6 +1,7 @@
 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[]>;
     define(name: string, component: unknown): void;
 };
@@ -63,28 +64,56 @@ export class EzDataViewCards extends EzBaseComponent {
     }
 
     async render(): Promise<HTMLElement> {
-        const el = document.createElement('div');
-        el.className = 'ez-dataview-cards';
-        el.style.display = 'flex';
-        el.style.flexDirection = 'column';
-        el.style.flex = '1';
-        el.style.minHeight = '0';
-        el.style.overflow = 'hidden';
-
-        this._cardsContainer = document.createElement('div');
-        this._cardsContainer.className = 'ez-dataview-cards-grid';
-        this._applyGridStyles();
-
-        this._footerEl = document.createElement('div');
-        this._footerEl.className = 'ez-dataview-cards-footer';
-        this._footerEl.style.padding = '12px 16px';
-        this._footerEl.style.borderTop = '1px solid var(--ez-border)';
-        this._footerEl.style.display = 'flex';
-        this._footerEl.style.alignItems = 'center';
-        this._footerEl.style.gap = '16px';
-
-        el.appendChild(this._cardsContainer);
-        el.appendChild(this._footerEl);
+        const { columns = 'auto', minWidth = 300, gap = 16 } = this._cardsConfig;
+
+        const gridTemplate = columns === 'auto'
+            ? `repeat(auto-fill, minmax(${minWidth}px, 1fr))`
+            : `repeat(${columns}, 1fr)`;
+
+        const el = await ez._createElement({
+            eztype: 'div',
+            cls: 'ez-dataview-cards',
+            style: {
+                display: 'flex',
+                flexDirection: 'column',
+                flex: '1',
+                minHeight: '0',
+                overflow: 'hidden'
+            },
+            items: [
+                {
+                    eztype: 'div',
+                    cls: 'ez-dataview-cards-grid',
+                    style: {
+                        display: 'grid',
+                        gridTemplateColumns: gridTemplate,
+                        gap: `${gap}px`,
+                        padding: '16px',
+                        flex: '1',
+                        overflowY: 'auto',
+                        minHeight: '0',
+                        alignContent: 'start'
+                    },
+                    _ezAfterRender: (container: HTMLElement) => {
+                        this._cardsContainer = container;
+                    }
+                },
+                {
+                    eztype: 'div',
+                    cls: 'ez-dataview-cards-footer',
+                    style: {
+                        padding: '12px 16px',
+                        borderTop: '1px solid var(--ez-border)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '16px'
+                    },
+                    _ezAfterRender: (footer: HTMLElement) => {
+                        this._footerEl = footer;
+                    }
+                }
+            ]
+        }, this.config.controller || null, this) as HTMLElement;
 
         if (this._store) {
             this._unsubscribers.push(
@@ -106,25 +135,6 @@ export class EzDataViewCards extends EzBaseComponent {
         return el;
     }
 
-    private _applyGridStyles(): void {
-        if (!this._cardsContainer) return;
-
-        const { columns = 'auto', minWidth = 300, gap = 16 } = this._cardsConfig;
-
-        const gridTemplate = columns === 'auto'
-            ? `repeat(auto-fill, minmax(${minWidth}px, 1fr))`
-            : `repeat(${columns}, 1fr)`;
-
-        this._cardsContainer.style.display = 'grid';
-        this._cardsContainer.style.gridTemplateColumns = gridTemplate;
-        this._cardsContainer.style.gap = `${gap}px`;
-        this._cardsContainer.style.padding = '16px';
-        this._cardsContainer.style.flex = '1';
-        this._cardsContainer.style.overflowY = 'auto';
-        this._cardsContainer.style.minHeight = '0';
-        this._cardsContainer.style.alignContent = 'start';
-    }
-
     private _onLoadingChange(loading: boolean): void {
         if (loading) {
             this._showLoading();

package/components/dataview/modes/EzDataViewGrid.ts

@@ -1,6 +1,7 @@
 import { EzBaseComponent, EzBaseComponentConfig } from '../../EzBaseComponent.js';
 
 declare const ez: {
+    _createElement(config: unknown): Promise<HTMLElement>;
     _createChildElements(items: unknown[], controller: string | null, state: unknown): Promise<Node[]>;
     define(name: string, component: unknown): void;
 };
@@ -62,8 +63,10 @@ export class EzDataViewGrid extends EzBaseComponent {
             return this.el;
         }
 
-        const el = document.createElement('div');
-        el.textContent = 'Failed to render grid';
+        const el = await ez._createElement({
+            eztype: 'div',
+            text: 'Failed to render grid'
+        }) as HTMLElement;
         this.el = el;
         return el;
     }

package/components/datepicker/EzDatePicker.ts

@@ -397,7 +397,7 @@ export class EzDatePicker extends EzBaseComponent {
                 this._close();
             }
         };
-        document.addEventListener('click', this._outsideClickHandler);
+        document.addEventListener('click', this._outsideClickHandler, true);
 
         this._input.addEventListener('keydown', (e) => {
             if (e.key === 'Escape') {
@@ -509,7 +509,7 @@ export class EzDatePicker 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/dialog/EzDialog.ts

@@ -58,114 +58,131 @@ export class EzDialog extends EzBaseComponent {
             _dialogInstance
         } = props as EzDialogConfig['props'] & { [key: string]: unknown };
 
-        // Create overlay
-        const overlay = document.createElement('div');
-        overlay.className = css('overlay');
-
-        // Create dialog
-        const dialog = document.createElement('div');
-        dialog.className = css('dialog', size);
+        const dialogItems: unknown[] = [];
 
         // Header
         if (title || icon || closable || maximizable) {
-            const header = document.createElement('div');
-            header.className = css('header');
+            const headerItems: unknown[] = [];
 
             if (icon) {
-                const iconEl = document.createElement('div');
-                iconEl.className = css('headerIcon', iconVariant);
-                iconEl.innerHTML = `<i class="${icon}"></i>`;
-                header.appendChild(iconEl);
+                headerItems.push({
+                    eztype: 'div',
+                    cls: css('headerIcon', iconVariant),
+                    items: [{ eztype: 'i', cls: icon }]
+                });
             }
 
             if (title) {
-                const titleEl = document.createElement('h3');
-                titleEl.className = css('title');
-                titleEl.textContent = title;
-                header.appendChild(titleEl);
+                headerItems.push({
+                    eztype: 'h3',
+                    cls: css('title'),
+                    text: title
+                });
             }
 
             // Spacer
-            const spacer = document.createElement('div');
-            spacer.style.flex = '1';
-            header.appendChild(spacer);
+            headerItems.push({
+                eztype: 'div',
+                style: { flex: '1' }
+            });
 
             if (maximizable) {
-                const maxBtn = document.createElement('button');
-                maxBtn.className = css('headerBtn');
-                maxBtn.innerHTML = '<i class="fa-solid fa-expand"></i>';
-                maxBtn.onclick = () => _dialogInstance?.toggleMaximize();
-                header.appendChild(maxBtn);
+                headerItems.push({
+                    eztype: 'button',
+                    cls: css('headerBtn'),
+                    items: [{ eztype: 'i', cls: 'fa-solid fa-expand' }],
+                    onClick: () => _dialogInstance?.toggleMaximize()
+                });
             }
 
             if (closable) {
-                const closeBtn = document.createElement('button');
-                closeBtn.className = css('headerBtn');
-                closeBtn.innerHTML = '<i class="fa-solid fa-xmark"></i>';
-                closeBtn.onclick = () => _dialogInstance?.close();
-                header.appendChild(closeBtn);
+                headerItems.push({
+                    eztype: 'button',
+                    cls: css('headerBtn'),
+                    items: [{ eztype: 'i', cls: 'fa-solid fa-xmark' }],
+                    onClick: () => _dialogInstance?.close()
+                });
             }
 
-            dialog.appendChild(header);
+            dialogItems.push({
+                eztype: 'div',
+                cls: css('header'),
+                items: headerItems
+            });
         }
 
         // Body
-        const body = document.createElement('div');
-        body.className = css('body');
+        const bodyItems: unknown[] = [];
 
         if (message) {
-            const messageEl = document.createElement('p');
-            messageEl.className = css('message');
-            messageEl.textContent = message;
-            body.appendChild(messageEl);
+            bodyItems.push({
+                eztype: 'p',
+                cls: css('message'),
+                text: message
+            });
         }
 
         if (items && items.length > 0) {
-            const children = await ez._createChildElements(items, null, null);
-            for (const child of children) {
-                if (child instanceof Node) {
-                    body.appendChild(child);
+            const itemCss = (props as Record<string, unknown>).css;
+            if (itemCss) {
+                for (const item of items) {
+                    const itemWithCss = { ...(item as Record<string, unknown>) };
+                    if (!itemWithCss.css) {
+                        itemWithCss.css = itemCss;
+                    }
+                    bodyItems.push(itemWithCss);
                 }
+            } else {
+                bodyItems.push(...items);
             }
         }
 
-        dialog.appendChild(body);
+        dialogItems.push({
+            eztype: 'div',
+            cls: css('body'),
+            items: bodyItems
+        });
 
         // Footer with buttons
         let buttonList = buttons;
         if (typeof buttons === 'function') {
-            buttonList = buttons(_dialogInstance);
+            buttonList = (buttons as (instance: DialogInstance | undefined) => DialogButton[])(_dialogInstance);
         }
 
         if (Array.isArray(buttonList) && buttonList.length > 0) {
-            const footer = document.createElement('div');
-            footer.className = css('footer');
-
-            for (const btn of buttonList) {
-                const buttonConfig = {
-                    eztype: 'EzButton',
-                    text: btn.text,
-                    variant: btn.variant || 'secondary',
-                    onClick: () => {
-                        if (btn.onClick) {
-                            btn.onClick(_dialogInstance!);
-                        }
-                        if (btn.value !== undefined) {
-                            _dialogInstance?.close(btn.value);
-                        } else if (!btn.onClick) {
-                            _dialogInstance?.close();
-                        }
+            const footerItems = buttonList.map(btn => ({
+                eztype: 'EzButton',
+                text: btn.text,
+                variant: btn.variant || 'secondary',
+                onClick: () => {
+                    if (btn.onClick) {
+                        btn.onClick(_dialogInstance!);
                     }
-                };
-
-                const buttonEl = await ez._createElement(buttonConfig);
-                footer.appendChild(buttonEl);
-            }
+                    if (btn.value !== undefined) {
+                        _dialogInstance?.close(btn.value);
+                    } else if (!btn.onClick) {
+                        _dialogInstance?.close();
+                    }
+                }
+            }));
 
-            dialog.appendChild(footer);
+            dialogItems.push({
+                eztype: 'div',
+                cls: css('footer'),
+                items: footerItems
+            });
         }
 
-        overlay.appendChild(dialog);
+        const overlay = await ez._createElement({
+            eztype: 'div',
+            cls: css('overlay'),
+            items: [{
+                eztype: 'div',
+                cls: css('dialog', size),
+                items: dialogItems
+            }]
+        }) as HTMLDivElement;
+
         return overlay;
     }
 }