ezfw-core 1.0.21 → 1.0.23

package/components/kanban/EzKanban.ts

@@ -0,0 +1,222 @@
+import styles from './EzKanban.module.scss';
+import { cx } from '../../utils/cssModules.js';
+import { EzBaseComponent } from '../EzBaseComponent.js';
+import { EzKanbanController } from './state/EzKanbanController.js';
+import { EzKanbanDragDrop } from './state/EzKanbanDragDrop.js';
+import type {
+    EzKanbanConfig,
+    KanbanCard,
+    KanbanColumn,
+    CardMoveEvent,
+    CardCreateEvent,
+    CardUpdateEvent,
+    CardDeleteEvent
+} from './EzKanbanTypes.js';
+
+import './board/EzKanbanBoard.js';
+import './column/EzKanbanColumn.js';
+import './card/EzKanbanCard.js';
+import './card/EzKanbanCardEditor.js';
+
+const cls = cx(styles);
+
+declare const ez: {
+    _createElement(config: unknown): Promise<HTMLElement>;
+    define(name: string, cls: unknown): void;
+};
+
+export class EzKanban extends EzBaseComponent {
+    declare config: EzKanbanConfig;
+
+    private _controller: EzKanbanController;
+    private _dragDrop: EzKanbanDragDrop;
+    private _el: HTMLElement | null = null;
+    private _unsubscribers: Array<() => void> = [];
+
+    constructor(config: EzKanbanConfig = {}) {
+        super(config);
+        this._controller = new EzKanbanController(config);
+        this._dragDrop = new EzKanbanDragDrop(this._controller);
+
+        this._setupEventForwarding();
+    }
+
+    get controller(): EzKanbanController {
+        return this._controller;
+    }
+
+    async render(): Promise<HTMLElement> {
+        const variant = this.config.variant || 'elevated';
+        const items: unknown[] = [];
+
+        // Toolbar
+        if (this.config.filterable || this.config.searchable) {
+            items.push(this._buildToolbarConfig());
+        }
+
+        // Board
+        items.push({
+            eztype: 'EzKanbanBoard',
+            kanbanController: this._controller,
+            kanbanDragDrop: this._dragDrop,
+            kanbanConfig: this.config
+        });
+
+        const el = await ez._createElement({
+            eztype: 'div',
+            cls: cls('kanban', variant),
+            items
+        }) as HTMLElement;
+
+        this._el = el;
+
+        if (this.config.autoLoad !== false && this.config.remote) {
+            queueMicrotask(() => this._controller.load());
+        }
+
+        return el;
+    }
+
+    private _buildToolbarConfig(): unknown {
+        const toolbarItems: unknown[] = [];
+
+        if (this.config.searchable) {
+            toolbarItems.push({
+                eztype: 'EzInput',
+                placeholder: 'Search cards...',
+                icon: 'search',
+                style: { width: '240px' },
+                onInput: (value: string) => {
+                    this._controller.setFilters({ search: value });
+                }
+            });
+        }
+
+        if (this.config.filterable) {
+            toolbarItems.push({
+                eztype: 'div',
+                style: { flex: '1' }
+            });
+
+            if (this.config.availableAssignees?.length) {
+                toolbarItems.push({
+                    eztype: 'button',
+                    cls: 'ez-kanban-filter-btn',
+                    items: [
+                        { eztype: 'i', cls: 'fa-solid fa-filter' },
+                        { eztype: 'span', text: ' Filters' }
+                    ]
+                });
+            }
+        }
+
+        return {
+            eztype: 'div',
+            cls: 'ez-kanban-toolbar',
+            items: toolbarItems
+        };
+    }
+
+    private _setupEventForwarding(): void {
+        this._unsubscribers.push(
+            this._controller.on('cardmove', (payload) => {
+                this.config.onCardMove?.(payload as CardMoveEvent);
+            })
+        );
+
+        this._unsubscribers.push(
+            this._controller.on('cardcreate', (payload) => {
+                this.config.onCardCreate?.(payload as CardCreateEvent);
+            })
+        );
+
+        this._unsubscribers.push(
+            this._controller.on('cardupdate', (payload) => {
+                this.config.onCardUpdate?.(payload as CardUpdateEvent);
+            })
+        );
+
+        this._unsubscribers.push(
+            this._controller.on('carddelete', (payload) => {
+                this.config.onCardDelete?.(payload as CardDeleteEvent);
+            })
+        );
+
+        this._unsubscribers.push(
+            this._controller.on('columncreate', (payload) => {
+                this.config.onColumnCreate?.(payload as KanbanColumn);
+            })
+        );
+
+        this._unsubscribers.push(
+            this._controller.on('columnupdate', (payload) => {
+                this.config.onColumnUpdate?.(payload as KanbanColumn);
+            })
+        );
+
+        this._unsubscribers.push(
+            this._controller.on('columndelete', (payload) => {
+                this.config.onColumnDelete?.(payload as KanbanColumn);
+            })
+        );
+    }
+
+    async load(): Promise<void> {
+        return this._controller.load();
+    }
+
+    async reload(): Promise<void> {
+        return this._controller.reload();
+    }
+
+    setData(columns: KanbanColumn[], cards: KanbanCard[]): void {
+        this._controller.setData(columns, cards);
+    }
+
+    addCard(columnId: string | number, cardData: Partial<KanbanCard>): KanbanCard {
+        return this._controller.addCard(columnId, cardData);
+    }
+
+    updateCard(cardId: string | number, updates: Partial<KanbanCard>): KanbanCard | null {
+        return this._controller.updateCard(cardId, updates);
+    }
+
+    deleteCard(cardId: string | number): KanbanCard | null {
+        return this._controller.deleteCard(cardId);
+    }
+
+    moveCard(cardId: string | number, toColumnId: string | number, toIndex: number): void {
+        this._controller.moveCard(cardId, toColumnId, toIndex);
+    }
+
+    addColumn(columnData: Partial<KanbanColumn>): void {
+        this._controller.addColumn(columnData);
+    }
+
+    updateColumn(columnId: string | number, updates: Partial<KanbanColumn>): void {
+        this._controller.updateColumn(columnId, updates);
+    }
+
+    deleteColumn(columnId: string | number): void {
+        this._controller.deleteColumn(columnId);
+    }
+
+    setFilters(filters: { search?: string; assignees?: (string | number)[]; labels?: (string | number)[] }): void {
+        this._controller.setFilters(filters);
+    }
+
+    clearFilters(): void {
+        this._controller.clearFilters();
+    }
+
+    findCard(cardId: string | number): KanbanCard | null {
+        return this._controller.findCard(cardId);
+    }
+
+    destroy(): void {
+        this._unsubscribers.forEach(fn => fn());
+        this._unsubscribers = [];
+    }
+}
+
+ez.define('EzKanban', EzKanban);

package/components/kanban/EzKanbanTypes.ts

@@ -0,0 +1,166 @@
+export type KanbanPriority = 'critical' | 'high' | 'medium' | 'low' | 'none';
+
+export interface KanbanLabel {
+    id: string | number;
+    text: string;
+    color: string;
+}
+
+export interface KanbanAssignee {
+    id: string | number;
+    name: string;
+    avatar?: string;
+    email?: string;
+}
+
+export interface KanbanCard {
+    id: string | number;
+    columnId: string | number;
+    title: string;
+    description?: string;
+    priority?: KanbanPriority;
+    labels?: KanbanLabel[];
+    assignee?: KanbanAssignee | null;
+    assignees?: KanbanAssignee[];
+    dueDate?: string | Date | null;
+    order?: number;
+    coverImage?: string;
+    attachments?: number;
+    comments?: number;
+    checklist?: { total: number; completed: number };
+    createdAt?: string | Date;
+    updatedAt?: string | Date;
+    [key: string]: unknown;
+}
+
+export interface KanbanColumn {
+    id: string | number;
+    title: string;
+    order?: number;
+    color?: string;
+    limit?: number;
+    collapsed?: boolean;
+    locked?: boolean;
+}
+
+export interface NormalizedColumn extends KanbanColumn {
+    _id: string;
+    cards: KanbanCard[];
+}
+
+export interface DragContext {
+    type: 'card' | 'column';
+    item: KanbanCard | NormalizedColumn;
+    sourceColumnId: string | null;
+    sourceIndex: number;
+    isDragging: boolean;
+}
+
+export interface DropTarget {
+    columnId: string;
+    index: number;
+    position: 'before' | 'after';
+}
+
+export interface KanbanFilterConfig {
+    search?: string;
+    assignees?: (string | number)[];
+    labels?: (string | number)[];
+    priorities?: KanbanPriority[];
+    dueDateRange?: { from?: Date; to?: Date };
+}
+
+export interface KanbanRemoteConfig {
+    api: string;
+    source?: {
+        columnsPath?: string;
+        cardsPath?: string;
+    };
+}
+
+export interface CardMoveEvent {
+    card: KanbanCard;
+    fromColumnId: string | number;
+    toColumnId: string | number;
+    fromIndex: number;
+    toIndex: number;
+}
+
+export interface CardCreateEvent {
+    card: KanbanCard;
+    columnId: string | number;
+}
+
+export interface CardUpdateEvent {
+    card: KanbanCard;
+    changes: Partial<KanbanCard>;
+}
+
+export interface CardDeleteEvent {
+    card: KanbanCard;
+    columnId: string | number;
+}
+
+export interface EzKanbanConfig {
+    columns?: KanbanColumn[];
+    cards?: KanbanCard[];
+    remote?: KanbanRemoteConfig;
+    autoLoad?: boolean;
+
+    variant?: 'elevated' | 'flat' | 'outlined';
+    columnWidth?: number;
+    columnMinWidth?: number;
+    columnMaxWidth?: number;
+    cardGap?: number;
+
+    columnsReorderable?: boolean;
+    cardsReorderable?: boolean;
+    columnsDeletable?: boolean;
+    columnsEditable?: boolean;
+    cardsEditable?: boolean;
+    cardsDeletable?: boolean;
+    addColumnEnabled?: boolean;
+    addCardEnabled?: boolean;
+
+    showLabels?: boolean;
+    showAssignee?: boolean;
+    showDueDate?: boolean;
+    showPriority?: boolean;
+    showChecklist?: boolean;
+    showAttachments?: boolean;
+    showComments?: boolean;
+    showCoverImage?: boolean;
+
+    filterable?: boolean;
+    searchable?: boolean;
+    filters?: KanbanFilterConfig;
+
+    cardRender?: (card: KanbanCard, column: NormalizedColumn) => unknown;
+
+    onCardMove?: (event: CardMoveEvent) => void | Promise<void>;
+    onCardCreate?: (event: CardCreateEvent) => void | Promise<void>;
+    onCardUpdate?: (event: CardUpdateEvent) => void | Promise<void>;
+    onCardDelete?: (event: CardDeleteEvent) => void | Promise<void>;
+    onCardClick?: (card: KanbanCard) => void;
+    onCardDoubleClick?: (card: KanbanCard) => void;
+    onColumnCreate?: (column: KanbanColumn) => void | Promise<void>;
+    onColumnUpdate?: (column: KanbanColumn) => void | Promise<void>;
+    onColumnDelete?: (column: KanbanColumn) => void | Promise<void>;
+
+    availableLabels?: KanbanLabel[];
+    availableAssignees?: KanbanAssignee[];
+
+    id?: string;
+    cls?: string | string[];
+    style?: Partial<CSSStyleDeclaration>;
+    flex?: number;
+    [key: string]: unknown;
+}
+
+export interface KanbanControllerState {
+    columns: NormalizedColumn[];
+    loading: boolean;
+    error: Error | null;
+    filters: KanbanFilterConfig;
+    dragContext: DragContext | null;
+}

package/components/kanban/board/EzKanbanBoard.ts

@@ -0,0 +1,117 @@
+import { EzBaseComponent } from '../../EzBaseComponent.js';
+import type { EzKanbanController } from '../state/EzKanbanController.js';
+import type { EzKanbanDragDrop } from '../state/EzKanbanDragDrop.js';
+import type { EzKanbanConfig, NormalizedColumn } from '../EzKanbanTypes.js';
+
+declare const ez: {
+    _createElement(config: unknown): Promise<HTMLElement>;
+    define(name: string, cls: unknown): void;
+    dialog: {
+        prompt(opts: { title: string; placeholder: string }): Promise<string | null>;
+    };
+};
+
+interface EzKanbanBoardConfig {
+    kanbanController: EzKanbanController;
+    kanbanDragDrop: EzKanbanDragDrop;
+    kanbanConfig: EzKanbanConfig;
+    [key: string]: unknown;
+}
+
+export class EzKanbanBoard extends EzBaseComponent {
+    declare config: EzKanbanBoardConfig;
+
+    private _el: HTMLElement | null = null;
+    private _unsubscribers: Array<() => void> = [];
+
+    async render(): Promise<HTMLElement> {
+        const { kanbanController, kanbanDragDrop, kanbanConfig } = this.config;
+
+        const items: unknown[] = [];
+
+        // Add columns
+        const columns = kanbanController.state.columns;
+        for (const column of columns) {
+            items.push({
+                eztype: 'EzKanbanColumn',
+                column,
+                kanbanController,
+                kanbanDragDrop,
+                kanbanConfig
+            });
+        }
+
+        // Add column button
+        if (kanbanConfig.addColumnEnabled !== false) {
+            items.push({
+                eztype: 'button',
+                cls: 'ez-kanban-add-column',
+                items: [
+                    { eztype: 'i', cls: 'fa-solid fa-plus' },
+                    { eztype: 'span', text: 'Add Column' }
+                ],
+                onClick: () => this._handleAddColumn()
+            });
+        }
+
+        const el = await ez._createElement({
+            eztype: 'div',
+            cls: 'ez-kanban-board',
+            items
+        }) as HTMLElement;
+
+        this._el = el;
+        kanbanDragDrop.setBoardElement(el);
+
+        const unsubscribe = kanbanController.on('datachange', () => {
+            this._renderColumns();
+        });
+        this._unsubscribers.push(unsubscribe);
+
+        return el;
+    }
+
+    private async _handleAddColumn(): Promise<void> {
+        const { kanbanController } = this.config;
+        const name = await ez.dialog.prompt({
+            title: 'New Column',
+            placeholder: 'Column name'
+        });
+        if (name) {
+            kanbanController.addColumn({ title: name });
+        }
+    }
+
+    private async _renderColumns(): Promise<void> {
+        if (!this._el) return;
+
+        const { kanbanController, kanbanDragDrop, kanbanConfig } = this.config;
+        const columns = kanbanController.state.columns;
+
+        const existingAddBtn = this._el.querySelector('.ez-kanban-add-column');
+        const existingColumns = this._el.querySelectorAll('.ez-kanban-column');
+        existingColumns.forEach(col => col.remove());
+
+        for (const column of columns) {
+            const columnEl = await ez._createElement({
+                eztype: 'EzKanbanColumn',
+                column,
+                kanbanController,
+                kanbanDragDrop,
+                kanbanConfig
+            });
+            if (existingAddBtn) {
+                this._el.insertBefore(columnEl, existingAddBtn);
+            } else {
+                this._el.appendChild(columnEl);
+            }
+        }
+    }
+
+    destroy(): void {
+        this._unsubscribers.forEach(fn => fn());
+        this._unsubscribers = [];
+    }
+}
+
+ez.define('EzKanbanBoard', EzKanbanBoard);

package/components/kanban/card/EzKanbanCard.module.scss

@@ -0,0 +1,173 @@
+.card {
+    position: relative;
+    background: var(--ez-kanban-card-bg, #ffffff);
+    border: 1px solid var(--ez-kanban-border, #e2e8f0);
+    border-radius: 6px;
+    padding: 12px;
+    cursor: pointer;
+    transition: box-shadow 0.15s, transform 0.1s, opacity 0.15s;
+
+    &:hover {
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    }
+
+    &:global(.is-dragging) {
+        opacity: 0.6;
+        transform: rotate(2deg);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+    }
+
+    &:global(.drop-above) {
+        margin-top: 40px;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: -24px;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: var(--ez-kanban-primary, #005871);
+            border-radius: 2px;
+        }
+    }
+
+    &:global(.drop-below) {
+        margin-bottom: 40px;
+
+        &::after {
+            content: '';
+            position: absolute;
+            bottom: -24px;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: var(--ez-kanban-primary, #005871);
+            border-radius: 2px;
+        }
+    }
+}
+
+.critical {
+    border-left: 3px solid var(--ez-kanban-priority-critical, #dc2626);
+}
+
+.high {
+    border-left: 3px solid var(--ez-kanban-priority-high, #ea580c);
+}
+
+.medium {
+    border-left: 3px solid var(--ez-kanban-priority-medium, #ca8a04);
+}
+
+.low {
+    border-left: 3px solid var(--ez-kanban-priority-low, #16a34a);
+}
+
+.cover {
+    width: calc(100% + 24px);
+    margin: -12px -12px 12px;
+    border-radius: 6px 6px 0 0;
+    height: 120px;
+    object-fit: cover;
+}
+
+.labels {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-bottom: 8px;
+}
+
+.label {
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 500;
+    color: #fff;
+}
+
+.title {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--ez-kanban-text, #1e293b);
+    line-height: 1.4;
+    margin-bottom: 4px;
+    word-break: break-word;
+}
+
+.description {
+    font-size: 12px;
+    color: var(--ez-kanban-text-secondary, #475569);
+    line-height: 1.5;
+    margin-bottom: 8px;
+}
+
+.footer {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-top: 8px;
+    font-size: 12px;
+    color: var(--ez-kanban-text-muted, #94a3b8);
+}
+
+.dueDate {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    i {
+        font-size: 11px;
+    }
+}
+
+.overdue {
+    color: var(--ez-kanban-priority-critical, #dc2626);
+}
+
+.meta {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    i {
+        font-size: 11px;
+    }
+}
+
+.assignees {
+    display: flex;
+    margin-left: auto;
+}
+
+.avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: var(--ez-kanban-primary, #005871);
+    color: white;
+    font-size: 10px;
+    font-weight: 600;
+    margin-left: -6px;
+    border: 2px solid var(--ez-kanban-card-bg, #ffffff);
+    overflow: hidden;
+
+    &:first-child {
+        margin-left: 0;
+    }
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+.avatarMore {
+    background: var(--ez-surface-tertiary, #f1f5f9);
+    color: var(--ez-kanban-text-secondary, #475569);
+}