ezfw-core 1.0.0

package/components/grid/body/EzGridCell.ts

@@ -0,0 +1,211 @@
+// EzGrid/body/EzGridCell.ts
+
+import { EzGridContainer, EzGridContainerConfig } from '../EzGridContainer.js';
+import type { NormalizedColumn, RowData } from '../types.js';
+import type { EzGridSelection } from '../state/EzGridSelection.js';
+import type { RowContext } from './EzGridRow.js';
+
+export interface EzGridCellConfig extends EzGridContainerConfig {
+    row: any;
+    column: NormalizedColumn;
+    columnIndex?: number;
+    rowCtx?: RowContext | null;
+    selection?: EzGridSelection | null;
+    grid?: any;
+}
+
+export class EzGridCell extends EzGridContainer {
+    declare config: EzGridCellConfig;
+
+    row: any;
+    column: NormalizedColumn;
+    value: any;
+
+    constructor(config: EzGridCellConfig = {} as EzGridCellConfig) {
+        super(config);
+
+        const { row, column } = this.config;
+
+        this.row = row;
+        this.column = column || {} as NormalizedColumn;
+
+        // base class
+        this.config.cls = ['ez-grid-cell'] as any;
+
+        // width / flex
+        if (this.column.width != null) {
+            this.config.style = {
+                width: `${this.column.width}px`
+            };
+        } else {
+            this.config.flex = this.column.flex ?? 1;
+        }
+
+        this.value = this.column.index
+            ? this.row?.[this.column.index]
+            : null;
+
+        // decide content
+        this._buildContent();
+    }
+
+    async render(): Promise<HTMLDivElement> {
+        // CASE selection: define content BEFORE render
+        if (this.column.type === 'selection') {
+            const grid = this.config.grid;
+            const checked = grid?.isSelected?.(this.config.row);
+            const selectionWidth = this.column.width ?? 36;
+
+            this.config.style = {
+                width: `${selectionWidth}px`,
+                minWidth: `${selectionWidth}px`,
+                maxWidth: `${selectionWidth}px`,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+            };
+
+            this.config.items = [{
+                eztype: 'input',
+                attrs: {
+                    type: 'checkbox'
+                },
+                _ezAfterRender: (el: HTMLInputElement) => {
+                    el.checked = !!checked;
+                },
+                onClick: (e: MouseEvent) => {
+                    e.stopPropagation();
+                    grid?.toggleRow(this.config.row, this.config.rowCtx?.index);
+                }
+            }];
+        }
+
+        const el = await super.render();
+
+        const { row, column, rowCtx } = this.config;
+        const controller = (rowCtx?.grid as any)?.controller;
+
+        controller?.afterCellRender?.(
+            el,
+            this.value,
+            row,
+            column,
+            rowCtx
+        );
+
+        return el;
+    }
+
+    private _buildContent(): void {
+
+        const { row, column, rowCtx } = this.config;
+        const value = this.value;
+
+        const controller = (rowCtx?.grid as any)?.controller;
+
+        const res = controller?.beforeCellRender?.(
+            value,
+            row,
+            column,
+            rowCtx
+        );
+
+        if (res === false) {
+            this.config.style = {
+                display: 'none'
+            };
+            return;
+        }
+
+        const col = this.column;
+
+        // 1️⃣ ACTIONS
+        if (col.type === 'actions') {
+            this._buildActions();
+            return;
+        }
+
+        // 2️⃣ CUSTOM RENDER
+        if (typeof col.render === 'function') {
+            const rendered = col.render(value, row, this as any);
+
+            if (rendered == null) {
+                return;
+            }
+
+            // if returns EZ config
+            if (typeof rendered === 'object') {
+                this.config.items = [rendered];
+                return;
+            }
+
+            // string / number
+            this.config.items = [{
+                eztype: 'EzComponent',
+                cls: 'ez-grid-cell-inner',
+                text: String(rendered)
+            }];
+
+            return;
+        }
+
+        // 3️⃣ WRAP (number of lines)
+        if (col.wrap) {
+            this._buildWrappedText(value, typeof col.wrap === 'number' ? col.wrap : 3);
+            return;
+        }
+
+        // 4️⃣ DEFAULT
+        this.config.items = [{
+            eztype: 'EzComponent',
+            cls: 'ez-grid-cell-inner',
+            text: value ?? ''
+        }];
+    }
+
+    private _buildWrappedText(value: any, lines: number = 3): void {
+        (this.config.cls as string[]).push('ez-grid-cell-wrap');
+
+        this.config.items = [{
+            eztype: 'EzComponent',
+            cls: 'ez-grid-cell-inner',
+            text: value ?? '',
+            style: {
+                webkitLineClamp: String(lines)
+            }
+        }];
+    }
+
+    private _buildActions(): void {
+        (this.config.cls as string[]).push('ez-grid-cell-actions');
+        this.config.layout = 'hbox';
+
+        this.config.items = ((this.column as any).actions || []).map((action: any) => {
+            let cfg = action;
+
+            if (typeof action === 'function') {
+                cfg = action(this.row, this);
+            }
+
+            if (!cfg) return null;
+
+            if (cfg.eztype) {
+                return cfg;
+            }
+
+            return {
+                eztype: 'EzComponent',
+                cls: [
+                    'ez-grid-action',
+                    cfg.danger && 'is-danger'
+                ],
+                text: cfg.icon,
+                attrs: { title: cfg.tooltip },
+                onClick: (e: MouseEvent) => {
+                    e.stopPropagation();
+                    cfg.onClick?.(this.row, this);
+                }
+            };
+        });
+    }
+}

package/components/grid/body/EzGridRow.ts

@@ -0,0 +1,196 @@
+// EzGrid/body/EzGridRow.ts
+
+import { EzGridContainer, EzGridContainerConfig } from '../EzGridContainer.js';
+import type {
+    NormalizedColumn,
+    RowData,
+    RowKeyFn,
+    RowCallback,
+    RowContextMenuCallback,
+    RowRenderContext,
+    EzGridController,
+    EzGridRef
+} from '../types.js';
+import type { EzGridSelection } from '../state/EzGridSelection.js';
+
+export type RowContext = RowRenderContext;
+
+export interface EzGridRowConfig extends Omit<EzGridContainerConfig, 'controller'> {
+    row: RowData;
+    index?: number;
+    rowCount?: number;
+    columns?: NormalizedColumn[];
+    rowKey?: RowKeyFn;
+    selection?: EzGridSelection | null;
+    rowHeight?: number;
+    onRowClick?: RowCallback;
+    onRowDoubleClick?: RowCallback;
+    onRowContextMenu?: RowContextMenuCallback;
+    controller?: EzGridController;
+    grid?: EzGridRef;
+}
+
+export class EzGridRow extends EzGridContainer {
+    declare config: EzGridRowConfig;
+
+    row: RowData;
+    columns: NormalizedColumn[];
+    selection: EzGridSelection | null;
+    rowId: string | number | null;
+    isSelected: boolean;
+
+    constructor(config: EzGridRowConfig = {} as EzGridRowConfig) {
+        super(config as EzGridContainerConfig);
+
+        const {
+            row,
+            columns,
+            rowKey,
+            selection,
+            rowHeight
+        } = this.config;
+
+        this.row = row;
+        this.columns = columns || [];
+        this.selection = selection || null;
+
+        this.rowId = rowKey
+            ? (typeof rowKey === 'function' ? rowKey(row) : (row as any)[rowKey as any])
+            : null;
+
+        this.isSelected =
+            this.rowId != null &&
+            !!this.selection?.selected?.has?.(String(this.rowId));
+
+        // base classes
+        this.config.cls = ['ez-grid-row'] as any;
+        if (this.isSelected) (this.config.cls as string[]).push('is-selected');
+
+        // horizontal layout
+        this.config.layout = 'hbox';
+
+        // fixed height (if exists)
+        if (rowHeight != null) {
+            this.config.style = {
+                height: `${rowHeight}px`,
+                minHeight: `${rowHeight}px`,
+                maxHeight: `${rowHeight}px`,
+                overflow: 'hidden'
+            };
+        }
+
+        // attrs
+        if (this.rowId != null) {
+            this.config.attrs = {
+                'data-ez-row-id': this.rowId
+            };
+        }
+
+        // events
+        this._bindEvents();
+
+        // cells
+        this.config.items = this.columns.map((col, columnIndex) => ({
+            eztype: 'EzGridCell',
+            row: this.row,
+            column: col,
+            columnIndex,
+            rowCtx: null,
+            selection: this.selection,
+            grid: this.config.grid
+        }));
+
+    }
+
+    async render(): Promise<HTMLDivElement> {
+        const {
+            index,
+            row,
+            columns,
+            controller,
+            grid
+        } = this.config;
+
+        const rowCount = this.config.rowCount ?? 0;
+
+        const ctx: RowContext = {
+            index: index ?? 0,
+            row,
+            rowId: this.rowId,
+            columns: columns ?? [],
+            grid: grid as any,
+            rowEl: null,
+
+            isFirst: index === 0,
+            isLast: index === rowCount - 1
+        };
+
+        if (Array.isArray(this.config.items)) {
+            for (const item of this.config.items) {
+                (item as any).rowCtx = ctx;
+            }
+        }
+
+        const res = controller?.beforeRowRender?.(row, ctx);
+
+        if (res === false) {
+            const el = document.createElement('div');
+            el.style.display = 'none';
+            return el;
+        }
+
+        const el = await super.render();
+
+        ctx.rowEl = el;
+
+        controller?.afterRowRender?.(el, row, ctx);
+
+        if (this.config.grid?.isSelected?.(this.config.row)) {
+            el.classList.add('is-selected');
+        }
+
+        return el;
+    }
+
+
+    private _bindEvents(): void {
+        const grid = this.config.grid;
+
+        // NOTE: Selection is handled by the onClick passed from EzGridBody._createRowConfig
+        // We only need to bind the double-click and context menu events here
+
+        // Wrap onRowClick if provided (user callback only, not selection)
+        const userOnRowClick = this.config.onRowClick;
+        if (userOnRowClick) {
+            const existingClick = this.config.onClick;
+            this.config.onClick = (e: MouseEvent) => {
+                if (typeof existingClick === 'function') {
+                    existingClick(e, this);
+                }
+                userOnRowClick(this.config.row, {
+                    rowKey: this.rowId,
+                    index: this.config.index,
+                    grid
+                });
+            };
+        }
+
+        this.config.onDblClick = (e: MouseEvent) => {
+            this.config.onRowDoubleClick?.(this.config.row, {
+                rowKey: this.rowId,
+                index: this.config.index,
+                grid
+            });
+        };
+
+        this.config.onContextMenu = (e: MouseEvent) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            this.config.onRowContextMenu?.(this.config.row, {
+                rowKey: this.rowId,
+                grid
+            });
+        };
+    }
+}

package/components/grid/filter/EzGridFilters.scss

@@ -0,0 +1,78 @@
+// ==========================================================
+// EzGridFilters
+// ==========================================================
+
+.ez-grid-filters {
+  display: flex;
+  align-items: center;
+
+  background-color: var(--ez-grid-bg);
+  border-bottom: 1px solid var(--ez-grid-border-light);
+
+  min-height: 44px;
+
+  // ----------------------------------------------------------
+  // One filter cell per column
+  // ----------------------------------------------------------
+  .ez-grid-filter-cell {
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    height: 44px;
+    padding: var(--ez-grid-cell-padding);
+    box-sizing: border-box;
+
+    white-space: nowrap;
+    overflow: hidden;
+
+    // Subtle vertical separator
+    &:not(:last-child)::after {
+      content: '';
+      position: absolute;
+      top: 10px;
+      right: 0;
+      width: 1px;
+      height: calc(100% - 20px);
+      background-color: var(--ez-grid-border-light);
+    }
+
+    // --------------------------------------------------------
+    // Default input styling
+    // --------------------------------------------------------
+    input,
+    select {
+      flex: 1;
+      min-width: 0;
+      height: 32px;
+
+      padding: 0 10px;
+
+      font-size: var(--ez-grid-font-size);
+      font-weight: var(--ez-grid-font-weight);
+      color: var(--ez-grid-text);
+
+      background-color: var(--ez-grid-bg);
+      border: 1px solid var(--ez-grid-border);
+      border-radius: var(--ez-grid-radius-sm);
+
+      outline: none;
+
+      transition: border-color 0.15s ease,
+                  box-shadow 0.15s ease;
+
+      &::placeholder {
+        color: var(--ez-grid-text-muted);
+      }
+
+      &:hover {
+        border-color: var(--ez-grid-text-muted);
+      }
+
+      &:focus {
+        border-color: var(--ez-grid-primary);
+        box-shadow: 0 0 0 2px var(--ez-grid-primary-light);
+      }
+    }
+  }
+}