ezfw-core 1.0.21 → 1.0.23

package/components/dropdown/EzDropdown.ts

@@ -40,26 +40,36 @@ export class EzDropdown extends EzBaseComponent {
     async render(): Promise<HTMLDivElement> {
         const cfg = this.config;
 
-        const wrapper = document.createElement('div');
-        wrapper.className = cls('dropdown');
+        const wrapperItems: unknown[] = [];
 
         if (cfg.trigger) {
-            const triggerEl = await ez._createElement(cfg.trigger);
-            triggerEl.classList.add(cls('trigger'));
-            triggerEl.addEventListener('click', (e) => {
-                e.stopPropagation();
-                this._toggle();
+            wrapperItems.push({
+                ...cfg.trigger as object,
+                cls: cls('trigger'),
+                onClick: (e: MouseEvent) => {
+                    e.stopPropagation();
+                    this._toggle();
+                }
             });
-            wrapper.appendChild(triggerEl);
-            this._triggerEl = triggerEl;
         }
 
-        const menu = document.createElement('div');
-        menu.className = cls('menu');
-        menu.style.opacity = '0';
-        menu.style.visibility = 'hidden';
+        const wrapper = await ez._createElement({
+            eztype: 'div',
+            cls: cls('dropdown'),
+            items: wrapperItems
+        }) as HTMLDivElement;
+
+        this._triggerEl = wrapper.querySelector(`.${cls('trigger')}`);
+
+        // Build menu items
+        const menuItems = await this._buildMenuItems(cfg.items || []);
 
-        this._buildItems(menu, cfg.items || []);
+        const menu = await ez._createElement({
+            eztype: 'div',
+            cls: cls('menu'),
+            style: { opacity: '0', visibility: 'hidden' },
+            items: menuItems
+        }) as HTMLDivElement;
 
         document.body.appendChild(menu);
 
@@ -73,7 +83,7 @@ export class EzDropdown extends EzBaseComponent {
                 this._close();
             }
         };
-        document.addEventListener('click', this._onOutsideClick);
+        document.addEventListener('click', this._onOutsideClick, true);
 
         this._onEscape = (e: KeyboardEvent) => {
             if (e.key === 'Escape' && this._isOpen) {
@@ -85,65 +95,69 @@ export class EzDropdown extends EzBaseComponent {
         return wrapper;
     }
 
-    private _buildItems(menu: HTMLDivElement, items: DropdownItem[]): void {
-        items.forEach(item => {
+    private _buildMenuItems(items: DropdownItem[]): unknown[] {
+        const menuItems: unknown[] = [];
+
+        for (const item of items) {
             if (item.divider) {
-                const divider = document.createElement('div');
-                divider.className = cls('divider');
-                menu.appendChild(divider);
-                return;
+                menuItems.push({
+                    eztype: 'div',
+                    cls: cls('divider')
+                });
+                continue;
             }
 
             if (item.header) {
-                const header = document.createElement('div');
-                header.className = cls('header');
-                header.textContent = item.header;
-                menu.appendChild(header);
-                return;
+                menuItems.push({
+                    eztype: 'div',
+                    cls: cls('header'),
+                    text: item.header
+                });
+                continue;
             }
 
-            const menuItem = document.createElement('button');
-            menuItem.type = 'button';
-            menuItem.className = cls(
-                'item',
-                item.danger && 'danger',
-                item.disabled && 'disabled'
-            );
-
-            if (item.disabled) {
-                menuItem.disabled = true;
-            }
+            const buttonItems: unknown[] = [];
 
             if (item.icon) {
-                const icon = document.createElement('i');
-                icon.className = cls('itemIcon', item.icon);
-                menuItem.appendChild(icon);
+                buttonItems.push({
+                    eztype: 'i',
+                    cls: [cls('itemIcon'), item.icon].join(' ')
+                });
             }
 
-            const text = document.createElement('span');
-            text.className = cls('itemText');
-            text.textContent = item.text || '';
-            menuItem.appendChild(text);
+            buttonItems.push({
+                eztype: 'span',
+                cls: cls('itemText'),
+                text: item.text || ''
+            });
 
             if (item.shortcut) {
-                const shortcut = document.createElement('span');
-                shortcut.className = cls('shortcut');
-                shortcut.textContent = item.shortcut;
-                menuItem.appendChild(shortcut);
+                buttonItems.push({
+                    eztype: 'span',
+                    cls: cls('shortcut'),
+                    text: item.shortcut
+                });
             }
 
-            menuItem.addEventListener('click', (e) => {
-                if (item.disabled) return;
-                if (item.onClick) {
-                    item.onClick(e);
-                }
-                if (item.closeOnClick !== false) {
-                    this._close();
+            menuItems.push({
+                eztype: 'button',
+                type: 'button',
+                cls: cls('item', item.danger && 'danger', item.disabled && 'disabled'),
+                disabled: item.disabled,
+                items: buttonItems,
+                onClick: (e: MouseEvent) => {
+                    if (item.disabled) return;
+                    if (item.onClick) {
+                        item.onClick(e);
+                    }
+                    if (item.closeOnClick !== false) {
+                        this._close();
+                    }
                 }
             });
+        }
 
-            menu.appendChild(menuItem);
-        });
+        return menuItems;
     }
 
     private _toggle(): void {
@@ -222,7 +236,7 @@ export class EzDropdown extends EzBaseComponent {
 
     destroy(): void {
         if (this._onOutsideClick) {
-            document.removeEventListener('click', this._onOutsideClick);
+            document.removeEventListener('click', this._onOutsideClick, true);
         }
         if (this._onEscape) {
             document.removeEventListener('keydown', this._onEscape);

package/components/form/EzForm.ts

@@ -67,34 +67,6 @@ export class EzForm extends EzBaseComponent {
     }
 
     async render(): Promise<HTMLFormElement> {
-        const el = document.createElement('form');
-        el.className = (this.config.cls as string) || '';
-        el.style.display = 'flex';
-        el.style.flexDirection = 'column';
-        el.style.gap = this.config.gap ?? 'var(--ez-spacing-md, 12px)';
-
-        this.applyStyles(el);
-
-        el.addEventListener('submit', (e: Event) => {
-            e.preventDefault();
-            this._submitted = true;
-
-            if (!this.validate()) {
-                this._applyErrors();
-                return;
-            }
-
-            this._clearErrors();
-            this._handleSubmit();
-        });
-
-        el.addEventListener('input', () => {
-            if (!this._submitted) return;
-
-            this.validate();
-            this._applyErrors();
-        });
-
         const controllerName = this.config.controller;
 
         if (!this._initialFormDataCaptured) {
@@ -102,6 +74,8 @@ export class EzForm extends EzBaseComponent {
             this._initialFormDataCaptured = true;
         }
 
+        const formItems: unknown[] = [];
+
         if (Array.isArray(this.config.items)) {
             const items = this.config.items;
             const layout = this.config.layout;
@@ -117,9 +91,7 @@ export class EzForm extends EzBaseComponent {
 
                 let itemIndex = 0;
                 for (const rowCount of layout) {
-                    const row = document.createElement('div');
-                    row.style.display = 'flex';
-                    row.style.gap = this.config.gap ?? 'var(--ez-spacing-md, 12px)';
+                    const rowItems: unknown[] = [];
 
                     for (let i = 0; i < rowCount; i++) {
                         const itemCfg = items[itemIndex++];
@@ -129,21 +101,57 @@ export class EzForm extends EzBaseComponent {
                             finalCfg.flex = 1;
                         }
 
-                        const child = await ez._createElement(finalCfg, controllerName, this);
-                        row.appendChild(child);
+                        rowItems.push(finalCfg);
                     }
 
-                    el.appendChild(row);
+                    formItems.push({
+                        eztype: 'div',
+                        style: {
+                            display: 'flex',
+                            gap: this.config.gap ?? 'var(--ez-spacing-md, 12px)'
+                        },
+                        items: rowItems
+                    });
                 }
             } else {
                 for (const itemCfg of items) {
-                    const finalCfg = this._prepareItemConfig(itemCfg);
-                    const child = await ez._createElement(finalCfg, controllerName, this);
-                    el.appendChild(child);
+                    formItems.push(this._prepareItemConfig(itemCfg));
                 }
             }
         }
 
+        const el = await ez._createElement({
+            eztype: 'form',
+            cls: this.config.cls,
+            style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: this.config.gap ?? 'var(--ez-spacing-md, 12px)',
+                ...this.config.style as object
+            },
+            items: formItems
+        }, controllerName, this) as HTMLFormElement;
+
+        el.addEventListener('submit', (e: Event) => {
+            e.preventDefault();
+            this._submitted = true;
+
+            if (!this.validate()) {
+                this._applyErrors();
+                return;
+            }
+
+            this._clearErrors();
+            this._handleSubmit();
+        });
+
+        el.addEventListener('input', () => {
+            if (!this._submitted) return;
+
+            this.validate();
+            this._applyErrors();
+        });
+
         this.el = el;
         return el;
     }

package/components/kanban/EzKanban.module.scss

@@ -0,0 +1,221 @@
+.kanban {
+    --ez-kanban-bg: var(--ez-surface-primary, #f1f5f9);
+    --ez-kanban-column-bg: var(--ez-surface-secondary, #ffffff);
+    --ez-kanban-card-bg: var(--ez-surface-secondary, #ffffff);
+    --ez-kanban-border: var(--ez-border, #e2e8f0);
+    --ez-kanban-text: var(--ez-text-primary, #1e293b);
+    --ez-kanban-text-secondary: var(--ez-text-secondary, #475569);
+    --ez-kanban-text-muted: var(--ez-text-tertiary, #94a3b8);
+    --ez-kanban-primary: var(--ez-primary, #005871);
+    --ez-kanban-radius: 8px;
+    --ez-kanban-column-gap: 16px;
+    --ez-kanban-card-gap: 8px;
+
+    --ez-kanban-priority-critical: #dc2626;
+    --ez-kanban-priority-high: #ea580c;
+    --ez-kanban-priority-medium: #ca8a04;
+    --ez-kanban-priority-low: #16a34a;
+
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    background: var(--ez-kanban-bg);
+    border-radius: var(--ez-kanban-radius);
+    overflow: hidden;
+}
+
+.elevated {
+    border: 1px solid var(--ez-kanban-border);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
+}
+
+.flat {
+    border: none;
+    background: transparent;
+}
+
+.outlined {
+    border: 1px solid var(--ez-kanban-border);
+}
+
+:global {
+    .ez-kanban-toolbar {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 16px;
+        border-bottom: 1px solid var(--ez-kanban-border);
+        background: var(--ez-kanban-column-bg);
+    }
+
+    .ez-kanban-board {
+        display: flex;
+        flex: 1;
+        min-height: 0;
+        padding: 16px;
+        gap: var(--ez-kanban-column-gap);
+        overflow-x: auto;
+        overflow-y: hidden;
+    }
+
+    .ez-kanban-column {
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+        background: var(--ez-kanban-column-bg);
+        border-radius: var(--ez-kanban-radius);
+        border: 1px solid var(--ez-kanban-border);
+        min-height: 0;
+        max-height: 100%;
+        transition: box-shadow 0.15s, opacity 0.15s;
+
+        &.is-dragging {
+            opacity: 0.5;
+        }
+
+        &.drop-before {
+            box-shadow: -3px 0 0 0 var(--ez-kanban-primary);
+        }
+
+        &.drop-after {
+            box-shadow: 3px 0 0 0 var(--ez-kanban-primary);
+        }
+    }
+
+    .ez-kanban-column-header {
+        display: flex;
+        align-items: center;
+        padding: 12px 16px;
+        border-bottom: 1px solid var(--ez-kanban-border);
+        gap: 8px;
+        cursor: grab;
+
+        &:active {
+            cursor: grabbing;
+        }
+
+        .column-title {
+            font-weight: 600;
+            font-size: 14px;
+            color: var(--ez-kanban-text);
+            flex: 1;
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .column-count {
+            background: var(--ez-surface-tertiary, #f1f5f9);
+            border-radius: 10px;
+            padding: 2px 8px;
+            font-size: 12px;
+            font-weight: 500;
+            color: var(--ez-kanban-text-secondary);
+
+            &.at-limit {
+                background: var(--ez-kanban-priority-high);
+                color: white;
+            }
+        }
+
+        .column-actions {
+            display: flex;
+            gap: 4px;
+            opacity: 0;
+            transition: opacity 0.15s;
+        }
+
+        &:hover .column-actions {
+            opacity: 1;
+        }
+
+        .column-action {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 28px;
+            height: 28px;
+            border: none;
+            background: transparent;
+            border-radius: 6px;
+            color: var(--ez-kanban-text-muted);
+            cursor: pointer;
+            transition: background 0.15s, color 0.15s;
+
+            &:hover {
+                background: var(--ez-surface-tertiary, #f1f5f9);
+                color: var(--ez-kanban-text);
+            }
+
+            &.column-action--danger:hover {
+                background: #fef2f2;
+                color: #dc2626;
+            }
+        }
+    }
+
+    .ez-kanban-column-cards {
+        flex: 1;
+        overflow-y: auto;
+        padding: 8px;
+        display: flex;
+        flex-direction: column;
+        gap: var(--ez-kanban-card-gap);
+        min-height: 60px;
+
+        &:empty::after {
+            content: 'No cards';
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 24px;
+            color: var(--ez-kanban-text-muted);
+            font-size: 13px;
+        }
+
+        &.drop-empty {
+            background: rgba(0, 88, 113, 0.05);
+            border: 2px dashed var(--ez-kanban-primary);
+            border-radius: 6px;
+
+            &::after {
+                content: 'Drop here';
+                color: var(--ez-kanban-primary);
+            }
+        }
+    }
+
+    .ez-kanban-add-card,
+    .ez-kanban-add-column {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        padding: 10px;
+        margin: 8px;
+        border: 1px dashed var(--ez-kanban-border);
+        border-radius: 6px;
+        background: transparent;
+        color: var(--ez-kanban-text-muted);
+        font-size: 13px;
+        cursor: pointer;
+        transition: all 0.15s;
+
+        &:hover {
+            background: var(--ez-surface-primary, #f8fafc);
+            color: var(--ez-kanban-primary);
+            border-color: var(--ez-kanban-primary);
+        }
+    }
+
+    .ez-kanban-add-column {
+        flex-shrink: 0;
+        width: 280px;
+        min-width: 250px;
+        height: 60px;
+        margin: 0;
+        align-self: flex-start;
+    }
+}