ezfw-core 1.0.21 → 1.0.23

package/components/kanban/state/EzKanbanDragDrop.ts

@@ -0,0 +1,226 @@
+import type { KanbanCard, NormalizedColumn, DragContext } from '../EzKanbanTypes.js';
+import type { EzKanbanController } from './EzKanbanController.js';
+
+export class EzKanbanDragDrop {
+    private _controller: EzKanbanController;
+    private _boardEl: HTMLElement | null = null;
+
+    constructor(controller: EzKanbanController) {
+        this._controller = controller;
+    }
+
+    setBoardElement(el: HTMLElement): void {
+        this._boardEl = el;
+    }
+
+    handleCardDragStart(e: DragEvent, card: KanbanCard, columnId: string): void {
+        const context: DragContext = {
+            type: 'card',
+            item: card,
+            sourceColumnId: columnId,
+            sourceIndex: this._controller.findCardIndex(card.id, columnId),
+            isDragging: true
+        };
+
+        this._controller.setDragContext(context);
+
+        e.dataTransfer!.effectAllowed = 'move';
+        e.dataTransfer!.setData('application/json', JSON.stringify({
+            type: 'card',
+            cardId: card.id,
+            columnId
+        }));
+
+        const cardEl = (e.target as HTMLElement).closest('.ez-kanban-card');
+        if (cardEl) {
+            cardEl.classList.add('is-dragging');
+            e.dataTransfer!.setDragImage(cardEl, 20, 20);
+        }
+    }
+
+    handleCardDragOver(e: DragEvent, targetColumnId: string): void {
+        const context = this._controller.getDragContext();
+        if (!context || context.type !== 'card') return;
+
+        e.preventDefault();
+        e.dataTransfer!.dropEffect = 'move';
+
+        const cardEl = (e.target as HTMLElement).closest('.ez-kanban-card');
+        const columnEl = (e.target as HTMLElement).closest('.ez-kanban-column');
+
+        this._clearDropIndicators();
+
+        if (cardEl && !cardEl.classList.contains('is-dragging')) {
+            const rect = cardEl.getBoundingClientRect();
+            const midY = rect.top + rect.height / 2;
+
+            if (e.clientY < midY) {
+                cardEl.classList.add('drop-above');
+            } else {
+                cardEl.classList.add('drop-below');
+            }
+        } else if (columnEl) {
+            const cardsContainer = columnEl.querySelector('.ez-kanban-column-cards');
+            if (cardsContainer && cardsContainer.children.length === 0) {
+                cardsContainer.classList.add('drop-empty');
+            }
+        }
+    }
+
+    handleCardDragLeave(e: DragEvent): void {
+        const cardEl = (e.target as HTMLElement).closest('.ez-kanban-card');
+        if (cardEl) {
+            cardEl.classList.remove('drop-above', 'drop-below');
+        }
+
+        const cardsContainer = (e.target as HTMLElement).closest('.ez-kanban-column-cards');
+        if (cardsContainer) {
+            cardsContainer.classList.remove('drop-empty');
+        }
+    }
+
+    handleCardDrop(e: DragEvent, targetColumnId: string, cardsContainer: HTMLElement): void {
+        e.preventDefault();
+
+        const context = this._controller.getDragContext();
+        if (!context || context.type !== 'card') return;
+
+        const card = context.item as KanbanCard;
+        const targetIndex = this._getDropIndex(e, cardsContainer);
+
+        this._controller.moveCard(card.id, targetColumnId, targetIndex);
+        this._cleanup();
+    }
+
+    handleCardDragEnd(): void {
+        this._cleanup();
+    }
+
+    handleColumnDragStart(e: DragEvent, column: NormalizedColumn): void {
+        const columns = this._controller.state.columns;
+        const sourceIndex = columns.findIndex(c => c._id === column._id);
+
+        const context: DragContext = {
+            type: 'column',
+            item: column,
+            sourceColumnId: null,
+            sourceIndex,
+            isDragging: true
+        };
+
+        this._controller.setDragContext(context);
+
+        e.dataTransfer!.effectAllowed = 'move';
+        e.dataTransfer!.setData('application/json', JSON.stringify({
+            type: 'column',
+            columnId: column._id
+        }));
+
+        const columnEl = (e.target as HTMLElement).closest('.ez-kanban-column');
+        if (columnEl) {
+            columnEl.classList.add('is-dragging');
+        }
+    }
+
+    handleColumnDragOver(e: DragEvent, targetColumn: NormalizedColumn): void {
+        const context = this._controller.getDragContext();
+        if (!context || context.type !== 'column') return;
+
+        e.preventDefault();
+        e.dataTransfer!.dropEffect = 'move';
+
+        const columnEl = (e.target as HTMLElement).closest('.ez-kanban-column');
+        if (!columnEl || columnEl.classList.contains('is-dragging')) return;
+
+        this._clearColumnDropIndicators();
+
+        const rect = columnEl.getBoundingClientRect();
+        const midX = rect.left + rect.width / 2;
+
+        if (e.clientX < midX) {
+            columnEl.classList.add('drop-before');
+        } else {
+            columnEl.classList.add('drop-after');
+        }
+    }
+
+    handleColumnDrop(e: DragEvent, targetColumn: NormalizedColumn): void {
+        e.preventDefault();
+
+        const context = this._controller.getDragContext();
+        if (!context || context.type !== 'column') return;
+
+        const sourceColumn = context.item as NormalizedColumn;
+        const columns = this._controller.state.columns;
+
+        const columnEl = (e.target as HTMLElement).closest('.ez-kanban-column');
+        const rect = columnEl?.getBoundingClientRect();
+        const isDropBefore = rect && e.clientX < rect.left + rect.width / 2;
+
+        let targetIndex = columns.findIndex(c => c._id === targetColumn._id);
+        if (!isDropBefore) targetIndex++;
+
+        const sourceIndex = columns.findIndex(c => c._id === sourceColumn._id);
+        if (sourceIndex < targetIndex) targetIndex--;
+
+        this._controller.moveColumn(sourceColumn._id, targetIndex);
+        this._cleanup();
+    }
+
+    handleColumnDragEnd(): void {
+        this._cleanup();
+    }
+
+    private _getDropIndex(e: DragEvent, cardsContainer: HTMLElement): number {
+        const cards = cardsContainer.querySelectorAll('.ez-kanban-card:not(.is-dragging)');
+        let index = cards.length;
+
+        for (let i = 0; i < cards.length; i++) {
+            const rect = cards[i].getBoundingClientRect();
+            if (e.clientY < rect.top + rect.height / 2) {
+                index = i;
+                break;
+            }
+        }
+
+        return index;
+    }
+
+    private _clearDropIndicators(): void {
+        if (!this._boardEl) return;
+
+        this._boardEl.querySelectorAll('.ez-kanban-card').forEach(el => {
+            el.classList.remove('drop-above', 'drop-below');
+        });
+
+        this._boardEl.querySelectorAll('.ez-kanban-column-cards').forEach(el => {
+            el.classList.remove('drop-empty');
+        });
+    }
+
+    private _clearColumnDropIndicators(): void {
+        if (!this._boardEl) return;
+
+        this._boardEl.querySelectorAll('.ez-kanban-column').forEach(el => {
+            el.classList.remove('drop-before', 'drop-after');
+        });
+    }
+
+    private _cleanup(): void {
+        if (this._boardEl) {
+            this._boardEl.querySelectorAll('.ez-kanban-card').forEach(el => {
+                el.classList.remove('is-dragging', 'drop-above', 'drop-below');
+            });
+
+            this._boardEl.querySelectorAll('.ez-kanban-column').forEach(el => {
+                el.classList.remove('is-dragging', 'drop-before', 'drop-after');
+            });
+
+            this._boardEl.querySelectorAll('.ez-kanban-column-cards').forEach(el => {
+                el.classList.remove('drop-empty');
+            });
+        }
+
+        this._controller.setDragContext(null);
+    }
+}

package/components/panel/EzPanel.ts

@@ -3,7 +3,7 @@ import { cx } from '../../utils/cssModules.js';
 import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
 
 declare const ez: {
-    _createChildElements(items: unknown[], controller: string | null, state: unknown, css?: string | null): Promise<Node[]>;
+    _createElement(config: unknown): Promise<HTMLElement>;
 };
 
 const cls = cx(styles);
@@ -33,96 +33,87 @@ export class EzPanel extends EzBaseComponent {
     async render(): Promise<HTMLElement> {
         const cfg = this.config;
 
-        const panel = document.createElement('div');
-        panel.className = cls(
-            'panel',
-            cfg.variant,
-            cfg.noPadding && 'noPadding',
-            cfg.collapsible && 'collapsible',
-            cfg.collapsed && 'collapsed'
-        );
+        const panelItems: unknown[] = [];
 
+        // Header
         if (cfg.title || cfg.icon || cfg.tools || cfg.badge !== undefined) {
-            const header = document.createElement('div');
-            header.className = cls('header');
+            const headerItems: unknown[] = [];
 
             if (cfg.icon) {
-                const icon = document.createElement('i');
-                icon.className = cls('icon', cfg.icon);
-                header.appendChild(icon);
+                headerItems.push({
+                    eztype: 'i',
+                    cls: [cls('icon'), cfg.icon].join(' ')
+                });
             }
 
             if (cfg.title) {
-                const title = document.createElement('span');
-                title.className = cls('title');
-                title.textContent = cfg.title;
-                header.appendChild(title);
+                headerItems.push({
+                    eztype: 'span',
+                    cls: cls('title'),
+                    text: cfg.title
+                });
             }
 
             if (cfg.badge !== undefined) {
-                const badge = document.createElement('span');
-                badge.className = cls('badge');
-                badge.textContent = String(cfg.badge);
-                header.appendChild(badge);
+                headerItems.push({
+                    eztype: 'span',
+                    cls: cls('badge'),
+                    text: String(cfg.badge)
+                });
             }
 
-            const spacer = document.createElement('span');
-            spacer.className = cls('spacer');
-            header.appendChild(spacer);
+            headerItems.push({
+                eztype: 'span',
+                cls: cls('spacer')
+            });
 
             if (cfg.tools && cfg.tools.length > 0) {
-                const tools = document.createElement('div');
-                tools.className = cls('tools');
-
-                const toolEls = await ez._createChildElements(
-                    cfg.tools,
-                    cfg.controller || null,
-                    null,
-                    (cfg.css as string) || null
-                );
-                for (const toolEl of toolEls) {
-                    if (toolEl instanceof Node) {
-                        tools.appendChild(toolEl);
-                    }
-                }
-                header.appendChild(tools);
+                headerItems.push({
+                    eztype: 'div',
+                    cls: cls('tools'),
+                    items: cfg.tools
+                });
             }
 
             if (cfg.collapsible) {
-                const toggle = document.createElement('button');
-                toggle.type = 'button';
-                toggle.className = cls('toggle');
-                toggle.innerHTML = '<i class="fa-solid fa-chevron-down"></i>';
-                toggle.addEventListener('click', () => this.toggleCollapse());
-                header.appendChild(toggle);
+                headerItems.push({
+                    eztype: 'button',
+                    type: 'button',
+                    cls: cls('toggle'),
+                    items: [{ eztype: 'i', cls: 'fa-solid fa-chevron-down' }],
+                    onClick: () => this.toggleCollapse()
+                });
             }
 
-            panel.appendChild(header);
+            panelItems.push({
+                eztype: 'div',
+                cls: cls('header'),
+                items: headerItems
+            });
         }
 
-        const body = document.createElement('div');
-        body.className = cls('body');
-
-        if (cfg.items && cfg.items.length > 0) {
-            const children = await ez._createChildElements(
-                cfg.items,
-                cfg.controller || null,
-                null,
-                (cfg.css as string) || null
-            );
-            for (const child of children) {
-                if (child instanceof Node) {
-                    body.appendChild(child);
-                }
-            }
-        }
-
-        panel.appendChild(body);
+        // Body
+        panelItems.push({
+            eztype: 'div',
+            cls: cls('body'),
+            items: cfg.items || []
+        });
+
+        const panel = await ez._createElement({
+            eztype: 'div',
+            cls: cls(
+                'panel',
+                cfg.variant,
+                cfg.noPadding && 'noPadding',
+                cfg.collapsible && 'collapsible',
+                cfg.collapsed && 'collapsed'
+            ),
+            style: cfg.style,
+            items: panelItems
+        }) as HTMLElement;
 
         this._panel = panel;
-        this._body = body;
-
-        this.applyStyles(panel);
+        this._body = panel.querySelector(`.${cls('body')}`);
 
         return panel;
     }

package/components/picker/EzPicker.module.scss

@@ -0,0 +1,14 @@
+.picker {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+
+    &.vertical {
+        flex-direction: column;
+    }
+}
+
+.option {
+    cursor: pointer;
+    transition: all 0.15s ease;
+}

package/components/picker/EzPicker.ts

@@ -0,0 +1,118 @@
+import styles from './EzPicker.module.scss';
+import { cx } from '../../utils/cssModules.js';
+import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
+
+const css = cx(styles);
+
+declare const ez: {
+    define(name: string, component: unknown): void;
+    _createElement(config: unknown, controller?: string | null, parent?: unknown): Promise<HTMLElement>;
+};
+
+interface EzPickerConfig extends EzBaseComponentConfig {
+    options?: unknown[];
+    value?: unknown;
+    onChange?: (value: unknown) => void;
+    optionRender?: (option: unknown, selected: boolean) => unknown;
+    layout?: 'horizontal' | 'vertical';
+    gap?: number | string;
+}
+
+export class EzPicker extends EzBaseComponent {
+    static eztype = 'EzPicker';
+    declare config: EzPickerConfig;
+    private _selected: unknown;
+    private _container: HTMLDivElement | null = null;
+    private _options: unknown[] = [];
+    private _optionRender: ((option: unknown, selected: boolean) => unknown) | undefined;
+    private _onChange: ((value: unknown) => void) | undefined;
+    private _cssModule: string | undefined;
+
+    async render(): Promise<HTMLDivElement> {
+        const props = (this.config.props || {}) as Record<string, unknown>;
+        this._options = (props.options || this.config.options || []) as unknown[];
+        this._selected = props.value ?? this.config.value;
+        this._onChange = (props.onChange || this.config.onChange) as ((value: unknown) => void) | undefined;
+        this._optionRender = (props.optionRender || this.config.optionRender) as ((option: unknown, selected: boolean) => unknown) | undefined;
+        this._cssModule = ((props.css as string | undefined) || this.config.css) as string | undefined;
+
+        const layout = (props.layout || this.config.layout || 'horizontal') as 'horizontal' | 'vertical';
+        const gap = (props.gap ?? this.config.gap) as number | string | undefined;
+
+        const optionConfigs = await this._buildOptionConfigs();
+
+        const container = await ez._createElement({
+            eztype: 'div',
+            cls: css('picker', layout),
+            style: gap ? { gap: typeof gap === 'number' ? `${gap}px` : gap } : undefined,
+            items: optionConfigs
+        }, this.config.controller || null, this) as HTMLDivElement;
+
+        this._container = container;
+
+        return container;
+    }
+
+    private async _buildOptionConfigs(): Promise<unknown[]> {
+        const configs: unknown[] = [];
+
+        for (const option of this._options) {
+            const isSelected = option === this._selected;
+
+            if (this._optionRender) {
+                const config = this._optionRender(option, isSelected) as Record<string, unknown>;
+                if (config) {
+                    if (this._cssModule && !config.css) {
+                        config.css = this._cssModule;
+                    }
+                    configs.push({
+                        eztype: 'div',
+                        cls: css('option'),
+                        items: [config],
+                        onClick: () => this._selectOption(option)
+                    });
+                }
+            } else {
+                configs.push({
+                    eztype: 'div',
+                    cls: css('option'),
+                    text: String(option),
+                    onClick: () => this._selectOption(option)
+                });
+            }
+        }
+
+        return configs;
+    }
+
+    private async _renderOptions(): Promise<void> {
+        if (!this._container) return;
+
+        this._container.innerHTML = '';
+
+        const optionConfigs = await this._buildOptionConfigs();
+        for (const config of optionConfigs) {
+            const el = await ez._createElement(config);
+            this._container.appendChild(el);
+        }
+    }
+
+    private async _selectOption(option: unknown): Promise<void> {
+        if (option === this._selected) return;
+
+        this._selected = option;
+
+        // Re-render to update selected state
+        await this._renderOptions();
+
+        if (this._onChange) {
+            this._onChange(option);
+        }
+    }
+
+    getValue(): unknown {
+        return this._selected;
+    }
+}
+
+ez.define('EzPicker', EzPicker);

package/components/radio/EzRadio.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 RadioOption {
     value: string | number;
     label: string;
@@ -27,18 +31,10 @@ export class EzRadio extends EzBaseComponent {
     private _inputs: HTMLInputElement[] = [];
     private _error: HTMLDivElement | null = null;
 
-    render(): HTMLDivElement {
+    async render(): Promise<HTMLDivElement> {
         const cfg = this.config;
         const options = cfg.options || [];
 
-        const wrapper = document.createElement('div');
-        wrapper.className = cls(
-            'radioGroup',
-            cfg.size,
-            cfg.disabled && 'disabled',
-            cfg.layout === 'horizontal' && 'horizontal'
-        );
-
         if (cfg.name && cfg.formData) {
             this.config.bind = `${cfg.formData}.${cfg.name}`;
         }
@@ -46,53 +42,72 @@ export class EzRadio extends EzBaseComponent {
         const onChange = this._createOnChangeHandler();
         const groupName = cfg.name || `radio-${Date.now()}`;
 
-        this._inputs = [];
-
-        options.forEach((option) => {
+        const radioItems = options.map((option) => {
             const optValue = typeof option === 'object' ? option.value : option;
             const optLabel = typeof option === 'object' ? option.label : String(option);
             const optDisabled = typeof option === 'object' ? option.disabled : false;
 
-            const label = document.createElement('label');
-            label.className = cls(
-                'radio',
-                (cfg.disabled || optDisabled) && 'disabled'
-            );
+            return {
+                eztype: 'label',
+                cls: cls('radio', (cfg.disabled || optDisabled) && 'disabled'),
+                items: [
+                    {
+                        eztype: 'input',
+                        type: 'radio',
+                        cls: cls('input'),
+                        name: groupName,
+                        value: String(optValue),
+                        checked: cfg.value === optValue,
+                        disabled: cfg.disabled || optDisabled
+                    },
+                    {
+                        eztype: 'span',
+                        cls: cls('circle'),
+                        items: [{ eztype: 'span', cls: cls('dot') }]
+                    },
+                    {
+                        eztype: 'span',
+                        cls: cls('label'),
+                        text: optLabel
+                    }
+                ]
+            };
+        });
 
-            const input = document.createElement('input');
-            input.type = 'radio';
-            input.className = cls('input');
-            input.name = groupName;
-            input.value = String(optValue);
-            input.checked = cfg.value === optValue;
+        radioItems.push({
+            eztype: 'div',
+            cls: cls('fieldError'),
+            items: []
+        });
 
-            if (cfg.disabled || optDisabled) input.disabled = true;
+        const wrapper = await ez._createElement({
+            eztype: 'div',
+            cls: cls(
+                'radioGroup',
+                cfg.size,
+                cfg.disabled && 'disabled',
+                cfg.layout === 'horizontal' && 'horizontal'
+            ),
+            items: radioItems
+        }) as HTMLDivElement;
 
-            const circle = document.createElement('span');
-            circle.className = cls('circle');
+        this._wrapper = wrapper;
+        this._inputs = Array.from(wrapper.querySelectorAll('input[type="radio"]'));
+        this._error = wrapper.querySelector(`.${cls('fieldError')}`);
 
-            const dot = document.createElement('span');
-            dot.className = cls('dot');
-            circle.appendChild(dot);
+        // Setup change handlers
+        this._inputs.forEach((input, index) => {
+            const option = options[index];
+            const optValue = typeof option === 'object' ? option.value : option;
 
             input.addEventListener('change', e => {
                 if ((e.target as HTMLInputElement).checked && onChange) {
                     onChange(optValue);
                 }
             });
-
-            label.appendChild(input);
-            label.appendChild(circle);
-
-            const text = document.createElement('span');
-            text.className = cls('label');
-            text.textContent = optLabel;
-            label.appendChild(text);
-
-            wrapper.appendChild(label);
-            this._inputs.push(input);
         });
 
+        // Apply initial binding value
         if (this.config.bind) {
             const binding = this._resolveBinding();
             if (binding) {
@@ -108,13 +123,6 @@ export class EzRadio extends EzBaseComponent {
             }
         }
 
-        const error = document.createElement('div');
-        error.className = cls('fieldError');
-        wrapper.appendChild(error);
-
-        this._wrapper = wrapper;
-        this._error = error;
-
         return wrapper;
     }