ezfw-core 1.0.21 → 1.0.23

package/components/select/EzSelect.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 SelectOption {
     value: string | number;
     label: string;
@@ -40,71 +44,71 @@ export class EzSelect extends EzBaseComponent {
         this.onSelect = config.onSelect || null;
     }
 
-    render(): HTMLDivElement {
-        this.el = document.createElement('div');
-        this.el.className = cls('select');
-
+    async render(): Promise<HTMLDivElement> {
+        const classes = [cls('select')];
         if (this.config.cls) {
             const clsValue = this.config.cls;
             if (Array.isArray(clsValue)) {
-                clsValue.forEach(c => c && this.el.classList.add(c));
+                classes.push(...clsValue.filter(Boolean) as string[]);
             } else if (typeof clsValue === 'string') {
-                this.el.classList.add(clsValue);
+                classes.push(clsValue);
             }
         }
 
-        this._trigger = document.createElement('button');
-        this._trigger.type = 'button';
-        this._trigger.className = cls('selectTrigger');
-
-        this._triggerText = document.createElement('span');
-        this._triggerText.className = cls('selectTriggerText');
-        this._trigger.appendChild(this._triggerText);
-
-        const arrow = document.createElement('span');
-        arrow.className = cls('selectArrow');
-        arrow.innerHTML = '&#9662;';
-        this._trigger.appendChild(arrow);
-
-        this.el.appendChild(this._trigger);
-
-        this._dropdown = document.createElement('div');
-        this._dropdown.className = cls('selectDropdown');
+        this.el = await ez._createElement({
+            eztype: 'div',
+            cls: classes.join(' '),
+            items: [
+                {
+                    eztype: 'button',
+                    type: 'button',
+                    cls: cls('selectTrigger'),
+                    items: [
+                        { eztype: 'span', cls: cls('selectTriggerText') },
+                        { eztype: 'span', cls: cls('selectArrow'), html: '&#9662;' }
+                    ]
+                },
+                {
+                    eztype: 'div',
+                    cls: cls('selectDropdown')
+                }
+            ]
+        }) as HTMLDivElement;
+
+        this._trigger = this.el.querySelector(`.${cls('selectTrigger')}`);
+        this._triggerText = this.el.querySelector(`.${cls('selectTriggerText')}`);
+        this._dropdown = this.el.querySelector(`.${cls('selectDropdown')}`);
 
         this._buildOptions();
-        this.el.appendChild(this._dropdown);
-
         this._updateDisplay();
         this._bindEvents();
 
         return this.el;
     }
 
-    private _buildOptions(): void {
+    private async _buildOptions(): Promise<void> {
         if (!this._dropdown) return;
         this._dropdown.innerHTML = '';
 
-        this.options.forEach(opt => {
-            const item = document.createElement('div');
-            item.className = cls('selectOption');
-
+        for (const opt of this.options) {
             const value = typeof opt === 'object' ? opt.value : opt;
             const label = typeof opt === 'object' ? opt.label : String(opt);
 
-            item.dataset.value = String(value);
-            item.textContent = label;
-
-            if (value === this.value) {
-                item.classList.add(cls('isSelected'));
-            }
-
-            item.addEventListener('click', (e) => {
-                e.stopPropagation();
-                this._selectOption(value);
+            const item = await ez._createElement({
+                eztype: 'div',
+                cls: value === this.value
+                    ? [cls('selectOption'), cls('isSelected')].join(' ')
+                    : cls('selectOption'),
+                'data-value': String(value),
+                text: label,
+                onClick: (e: MouseEvent) => {
+                    e.stopPropagation();
+                    this._selectOption(value);
+                }
             });
 
-            this._dropdown!.appendChild(item);
-        });
+            this._dropdown.appendChild(item);
+        }
     }
 
     private _updateDisplay(): void {
@@ -150,7 +154,7 @@ export class EzSelect extends EzBaseComponent {
             }
         };
 
-        document.addEventListener('click', this._outsideClickHandler);
+        document.addEventListener('click', this._outsideClickHandler, true);
 
         this._trigger.addEventListener('keydown', (e) => {
             if (e.key === 'Enter' || e.key === ' ') {
@@ -232,7 +236,7 @@ export class EzSelect extends EzBaseComponent {
 
     destroy(): void {
         if (this._outsideClickHandler) {
-            document.removeEventListener('click', this._outsideClickHandler);
+            document.removeEventListener('click', this._outsideClickHandler, true);
         }
     }
 }

package/components/skeleton/EzSkeleton.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 EzSkeletonConfig extends EzBaseComponentConfig {
     variant?: 'text' | 'circle' | 'rectangular';
     animation?: 'pulse' | 'wave' | 'none';
@@ -18,53 +22,54 @@ export interface EzSkeletonConfig extends EzBaseComponentConfig {
 export class EzSkeleton extends EzBaseComponent {
     declare config: EzSkeletonConfig;
 
-    render(): HTMLElement {
+    async render(): Promise<HTMLElement> {
         const cfg = this.config;
 
         if (cfg.count && cfg.count > 1) {
-            const wrapper = document.createElement('div');
-            wrapper.className = cls('skeletonGroup');
-
-            if (cfg.gap) {
-                wrapper.style.gap = typeof cfg.gap === 'number' ? `${cfg.gap}px` : cfg.gap;
-            }
-
+            const skeletonItems: unknown[] = [];
             for (let i = 0; i < cfg.count; i++) {
-                const skeleton = this._createSkeleton(cfg);
-                wrapper.appendChild(skeleton);
+                skeletonItems.push(this._buildSkeletonConfig(cfg));
             }
 
+            const wrapper = await ez._createElement({
+                eztype: 'div',
+                cls: cls('skeletonGroup'),
+                style: cfg.gap ? { gap: typeof cfg.gap === 'number' ? `${cfg.gap}px` : cfg.gap } : undefined,
+                items: skeletonItems
+            }) as HTMLElement;
+
             return wrapper;
         }
 
-        return this._createSkeleton(cfg);
+        return await ez._createElement(this._buildSkeletonConfig(cfg)) as HTMLElement;
     }
 
-    private _createSkeleton(cfg: EzSkeletonConfig): HTMLElement {
-        const skeleton = document.createElement('div');
-        skeleton.className = cls(
-            'skeleton',
-            cfg.variant || 'text',
-            cfg.animation || 'pulse',
-            cfg.rounded && 'rounded'
-        );
+    private _buildSkeletonConfig(cfg: EzSkeletonConfig): unknown {
+        const style: Record<string, string> = {};
 
         if (cfg.width) {
-            skeleton.style.width = typeof cfg.width === 'number' ? `${cfg.width}px` : cfg.width;
+            style.width = typeof cfg.width === 'number' ? `${cfg.width}px` : cfg.width;
         }
 
         if (cfg.height) {
-            skeleton.style.height = typeof cfg.height === 'number' ? `${cfg.height}px` : cfg.height;
+            style.height = typeof cfg.height === 'number' ? `${cfg.height}px` : cfg.height;
         }
 
         if (cfg.variant === 'circle') {
             const size = cfg.size || 40;
-            skeleton.style.width = `${size}px`;
-            skeleton.style.height = `${size}px`;
+            style.width = `${size}px`;
+            style.height = `${size}px`;
         }
 
-        this.applyStyles(skeleton);
-
-        return skeleton;
+        return {
+            eztype: 'div',
+            cls: cls(
+                'skeleton',
+                cfg.variant || 'text',
+                cfg.animation || 'pulse',
+                cfg.rounded && 'rounded'
+            ),
+            style: Object.keys(style).length > 0 ? style : undefined
+        };
     }
 }

package/components/switch/EzSwitch.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 EzSwitchConfig extends EzBaseComponentConfig {
     size?: 'sm' | 'lg';
     disabled?: boolean;
@@ -21,63 +25,67 @@ export class EzSwitch 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(
-            'switch',
-            cfg.size,
-            cfg.disabled && 'disabled',
-            cfg.labelPosition === 'left' && 'labelLeft'
-        );
-
-        const input = document.createElement('input');
-        input.type = 'checkbox';
-        input.className = cls('input');
-        input.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 track = document.createElement('span');
-        track.className = cls('track');
-
-        const thumb = document.createElement('span');
-        thumb.className = cls('thumb');
-        track.appendChild(thumb);
-
-        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.value,
+                disabled: cfg.disabled,
+                name: cfg.name
+            },
+            {
+                eztype: 'span',
+                cls: cls('track'),
+                items: [{ eztype: 'span', cls: cls('thumb') }]
             }
-        });
-
-        wrapper.appendChild(input);
-        wrapper.appendChild(track);
+        ];
 
         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(
+                'switch',
+                cfg.size,
+                cfg.disabled && 'disabled',
+                cfg.labelPosition === 'left' && 'labelLeft'
+            ),
+            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/tabs/EzTabPanel.ts

@@ -4,6 +4,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, parent: unknown): Promise<Node[]>;
 };
 
 const cls = cx(styles);
@@ -134,19 +135,19 @@ export class EzTabPanel extends EzBaseComponent {
 
     async render(): Promise<HTMLElement> {
         const cfg = this.config;
-        const el = document.createElement('div');
 
-        el.classList.add(cls('tabPanel'));
+        const el = await ez._createElement({
+            eztype: 'div',
+            cls: cls('tabPanel', cfg.variant),
+            style: cfg.style,
+            items: [
+                { eztype: 'div', cls: cls('tabHeader') },
+                { eztype: 'div', cls: cls('tabContent') }
+            ]
+        }, cfg.controller || null, this) as HTMLElement;
 
-        if (cfg.variant) {
-            el.classList.add(cls(cfg.variant));
-        }
-
-        this._headerEl = document.createElement('div');
-        this._headerEl.classList.add(cls('tabHeader'));
-
-        this._contentEl = document.createElement('div');
-        this._contentEl.classList.add(cls('tabContent'));
+        this._headerEl = el.querySelector(`.${cls('tabHeader')}`);
+        this._contentEl = el.querySelector(`.${cls('tabContent')}`);
 
         const tabs = cfg.tabs || [];
 
@@ -160,10 +161,6 @@ export class EzTabPanel extends EzBaseComponent {
             await this._createTab(tab, i);
         }
 
-        el.appendChild(this._headerEl);
-        el.appendChild(this._contentEl);
-
-        this.applyStyles(el);
         this.el = el;
 
         if (activeTabId != null) {
@@ -178,53 +175,60 @@ export class EzTabPanel extends EzBaseComponent {
         return el;
     }
 
-    private async _createTab(tab: TabConfig, index: number): Promise<string | number> {
-        const tabId = tab.id ?? index;
-
-        this._tabConfigs.set(tabId, tab);
-
-        const tabBtn = document.createElement('button');
-        tabBtn.classList.add(cls('tab'));
-        tabBtn.setAttribute('data-tab-id', String(tabId));
+    private _buildTabButtonConfig(tab: TabConfig, tabId: string | number): unknown {
+        const buttonItems: unknown[] = [];
 
         if (tab.icon) {
-            const icon = document.createElement('i');
-            icon.className = tab.icon;
-            tabBtn.appendChild(icon);
+            buttonItems.push({ eztype: 'i', cls: tab.icon });
         }
 
         if (tab.title) {
-            const span = document.createElement('span');
-            span.textContent = tab.title;
-            tabBtn.appendChild(span);
+            buttonItems.push({ eztype: 'span', text: tab.title });
         }
 
         if (tab.closable) {
-            const closeBtn = document.createElement('span');
-            closeBtn.classList.add(cls('tabClose'));
-            closeBtn.innerHTML = '<i class="fa-solid fa-xmark"></i>';
-            closeBtn.addEventListener('click', (e) => {
-                e.stopPropagation();
-                this.removeTab(tabId);
+            buttonItems.push({
+                eztype: 'span',
+                cls: cls('tabClose'),
+                items: [{ eztype: 'i', cls: 'fa-solid fa-xmark' }],
+                onClick: (e: MouseEvent) => {
+                    e.stopPropagation();
+                    this.removeTab(tabId);
+                }
             });
-            tabBtn.appendChild(closeBtn);
         }
 
-        tabBtn.addEventListener('click', () => this.setActiveTab(tabId));
-        this._headerEl!.appendChild(tabBtn);
-        this._tabElements.set(tabId, tabBtn);
+        return {
+            eztype: 'button',
+            type: 'button',
+            cls: cls('tab'),
+            'data-tab-id': String(tabId),
+            items: buttonItems,
+            onClick: () => this.setActiveTab(tabId)
+        };
+    }
 
-        const pane = document.createElement('div');
-        pane.classList.add(cls('tabPane'));
-        pane.setAttribute('data-tab-id', String(tabId));
+    private async _buildTabPaneConfig(tab: TabConfig, tabId: string | number): Promise<unknown> {
+        return {
+            eztype: 'div',
+            cls: cls('tabPane'),
+            'data-tab-id': String(tabId),
+            items: tab.items || []
+        };
+    }
 
-        if (Array.isArray(tab.items)) {
-            for (const item of tab.items) {
-                const child = await ez._createElement(item, this.config.controller || null, this);
-                pane.appendChild(child);
-            }
-        }
+    private async _createTab(tab: TabConfig, index: number): Promise<string | number> {
+        const tabId = tab.id ?? index;
+
+        this._tabConfigs.set(tabId, tab);
+
+        const tabBtnConfig = this._buildTabButtonConfig(tab, tabId);
+        const tabBtn = await ez._createElement(tabBtnConfig, null, this) as HTMLElement;
+        this._headerEl!.appendChild(tabBtn);
+        this._tabElements.set(tabId, tabBtn);
 
+        const paneConfig = await this._buildTabPaneConfig(tab, tabId);
+        const pane = await ez._createElement(paneConfig, this.config.controller || null, this) as HTMLElement;
         this._contentEl!.appendChild(pane);
         this._contentElements.set(tabId, pane);
 

package/components/textarea/EzTextarea.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 EzTextareaConfig extends EzBaseComponentConfig {
     size?: 'sm' | 'lg';
     disabled?: boolean;
@@ -29,77 +33,88 @@ export class EzTextarea extends EzBaseComponent {
     private _error: HTMLDivElement | null = null;
     private _counter: HTMLDivElement | null = null;
 
-    render(): HTMLDivElement {
+    async render(): Promise<HTMLDivElement> {
         const cfg = this.config;
 
-        const wrapper = document.createElement('div');
-        wrapper.className = cls(
-            'textareaGroup',
-            cfg.size,
-            cfg.disabled && 'disabled',
-            cfg.resize === false && 'noResize',
-            cfg.rows && 'hasRows'
-        );
-
-        const textarea = document.createElement('textarea');
-        textarea.className = cls('textarea');
-        textarea.placeholder = cfg.placeholder || '';
-        if (cfg.value !== undefined) textarea.value = cfg.value;
-
-        if (cfg.rows) textarea.rows = cfg.rows;
-        const paddingY = cfg.size === 'sm' ? 16 : cfg.size === 'lg' ? 24 : 20;
-        if (cfg.minRows) textarea.style.minHeight = `calc(${cfg.minRows * 1.5}em + ${paddingY}px)`;
-        if (cfg.maxRows) textarea.style.maxHeight = `calc(${cfg.maxRows * 1.5}em + ${paddingY}px)`;
-        if (cfg.maxLength) textarea.maxLength = cfg.maxLength;
-        if (cfg.disabled) textarea.disabled = true;
-        if (cfg.readonly) textarea.readOnly = true;
-
         if (cfg.name && cfg.formData) {
             this.config.bind = `${cfg.formData}.${cfg.name}`;
         }
 
-        if (cfg.name) {
-            textarea.setAttribute('data-ez-field', cfg.name);
+        const paddingY = cfg.size === 'sm' ? 16 : cfg.size === 'lg' ? 24 : 20;
+        const textareaStyle: Record<string, string> = {};
+        if (cfg.minRows) textareaStyle.minHeight = `calc(${cfg.minRows * 1.5}em + ${paddingY}px)`;
+        if (cfg.maxRows) textareaStyle.maxHeight = `calc(${cfg.maxRows * 1.5}em + ${paddingY}px)`;
+
+        const items: unknown[] = [
+            {
+                eztype: 'textarea',
+                cls: cls('textarea'),
+                placeholder: cfg.placeholder || '',
+                value: cfg.value,
+                rows: cfg.rows,
+                maxLength: cfg.maxLength,
+                disabled: cfg.disabled,
+                readOnly: cfg.readonly,
+                'data-ez-field': cfg.name,
+                style: Object.keys(textareaStyle).length > 0 ? textareaStyle : undefined
+            }
+        ];
+
+        if (cfg.showCount) {
+            items.push({
+                eztype: 'div',
+                cls: cls('counter')
+            });
         }
 
-        this.applyCommonBindings(textarea);
+        items.push({
+            eztype: 'div',
+            cls: cls('fieldError')
+        });
 
-        const onChange = this._createOnChangeHandler();
+        const wrapper = await ez._createElement({
+            eztype: 'div',
+            cls: cls(
+                'textareaGroup',
+                cfg.size,
+                cfg.disabled && 'disabled',
+                cfg.resize === false && 'noResize',
+                cfg.rows && 'hasRows'
+            ),
+            items
+        }) as HTMLDivElement;
 
-        textarea.addEventListener('input', e => {
-            if (onChange) {
-                onChange((e.target as HTMLTextAreaElement).value);
-            }
+        this._wrapper = wrapper;
+        this._textarea = wrapper.querySelector('textarea');
+        this._error = wrapper.querySelector(`.${cls('fieldError')}`);
+        this._counter = wrapper.querySelector(`.${cls('counter')}`);
 
-            if (cfg.autoResize) {
-                this._autoResize(textarea);
-            }
+        if (this._textarea) {
+            this.applyCommonBindings(this._textarea);
 
-            if (cfg.showCount && this._counter) {
-                this._updateCounter((e.target as HTMLTextAreaElement).value.length);
-            }
-        });
+            const onChange = this._createOnChangeHandler();
 
-        wrapper.appendChild(textarea);
+            this._textarea.addEventListener('input', e => {
+                if (onChange) {
+                    onChange((e.target as HTMLTextAreaElement).value);
+                }
 
-        if (cfg.showCount) {
-            const counter = document.createElement('div');
-            counter.className = cls('counter');
-            this._counter = counter;
-            this._updateCounter(0);
-            wrapper.appendChild(counter);
-        }
+                if (cfg.autoResize) {
+                    this._autoResize(this._textarea!);
+                }
 
-        const error = document.createElement('div');
-        error.className = cls('fieldError');
-        wrapper.appendChild(error);
+                if (cfg.showCount && this._counter) {
+                    this._updateCounter((e.target as HTMLTextAreaElement).value.length);
+                }
+            });
 
-        this._wrapper = wrapper;
-        this._textarea = textarea;
-        this._error = error;
+            if (cfg.showCount) {
+                this._updateCounter(0);
+            }
 
-        if (cfg.autoResize) {
-            requestAnimationFrame(() => this._autoResize(textarea));
+            if (cfg.autoResize) {
+                requestAnimationFrame(() => this._autoResize(this._textarea!));
+            }
         }
 
         return wrapper;