ezfw-core 1.0.0

package/components/grid/EzGridContainer.ts

@@ -0,0 +1,104 @@
+// EzGrid/EzGridContainer.ts
+
+import { EzBaseComponent, EzComponentConfig } from '../EzBaseComponent.js';
+
+declare const ez: {
+    _createChildElements(
+        items: EzComponentConfig[],
+        controller: string | null,
+        state: unknown,
+        css: string | null
+    ): Promise<Node[]>;
+};
+
+type LayoutType = 'hbox' | 'vbox';
+
+export interface EzGridContainerConfig extends Omit<EzComponentConfig, 'controller'> {
+    layout?: LayoutType;
+    flex?: string | number;
+    items?: any[];
+    attrs?: Record<string, string | number | boolean | null | undefined>;
+    onClick?: (e: MouseEvent, component: EzGridContainer) => void;
+    onDblClick?: (e: MouseEvent, component: EzGridContainer) => void;
+    onContextMenu?: (e: MouseEvent, component: EzGridContainer) => void;
+    controller?: string | null;
+    css?: string | null;
+}
+
+export class EzGridContainer extends EzBaseComponent {
+    declare config: any; // EzGridContainerConfig - relaxed for subclass compatibility
+
+    constructor(config: EzGridContainerConfig = {}) {
+        super(config as any);
+        this.config = config;
+    }
+
+    async render(): Promise<HTMLDivElement> {
+        const el = document.createElement('div');
+
+        const { layout, style = {} } = this.config;
+
+        if (layout === 'hbox') {
+            el.style.display = 'flex';
+            el.style.flexDirection = 'row';
+        }
+
+        if (layout === 'vbox') {
+            el.style.display = 'flex';
+            el.style.flexDirection = 'column';
+        }
+
+        const attrs = this.config.attrs;
+        if (attrs && typeof attrs === 'object') {
+            Object.entries(attrs).forEach(([k, v]) => {
+                if (v != null) el.setAttribute(k, String(v));
+            });
+        }
+
+        Object.assign(el.style, style);
+
+        if (this.config.flex) {
+            el.style.flex = String(this.config.flex);
+        }
+
+        this.applyCls(el);
+
+        if (this.config.onClick) {
+            el.addEventListener('click', (e: MouseEvent) => {
+                this.config.onClick!(e, this);
+            });
+        }
+
+        if (this.config.onDblClick) {
+            el.addEventListener('dblclick', (e: MouseEvent) => {
+                this.config.onDblClick!(e, this);
+            });
+        }
+
+        if (typeof this.config.onContextMenu === 'function') {
+            el.addEventListener('contextmenu', (e: MouseEvent) => {
+                e.preventDefault();
+                e.stopPropagation();
+
+                this.config.onContextMenu!(e, this);
+            });
+        }
+
+        if (this.config.items) {
+            const children = await ez._createChildElements(
+                this.config.items,
+                this.config.controller || null,
+                null,
+                this.config.css || null
+            );
+
+            for (const child of children) {
+                if (child instanceof Node) {
+                    el.appendChild(child);
+                }
+            }
+        }
+
+        return el;
+    }
+}

package/components/grid/body/EzGridBody.scss

@@ -0,0 +1,283 @@
+// ==========================================================
+// EzGridBody
+// ==========================================================
+
+.ez-grid {
+  .ez-grid-body {
+    flex: 1;
+    overflow-y: auto;
+    min-height: 0;
+  }
+
+  // ----------------------------------------------------------
+  // Rows
+  // ----------------------------------------------------------
+  .ez-grid-row {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    border-bottom: 1px solid var(--ez-grid-border-light);
+    cursor: pointer;
+
+    background-color: var(--ez-grid-bg);
+
+    transition: background-color 0.1s ease;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    // Zebra striping - alternating row colors
+    &:nth-child(even) {
+      background-color: var(--ez-grid-surface);
+    }
+
+    &:hover {
+      background-color: var(--ez-grid-surface-hover);
+    }
+
+    // Selected state - uses theme primary color
+    &.is-selected {
+      background-color: var(--ez-grid-row-selected);
+      border-left: 3px solid var(--ez-grid-primary);
+
+      .ez-grid-cell:first-child {
+        padding-left: 9px; // compensate for border
+      }
+
+      &:nth-child(even) {
+        background-color: var(--ez-grid-row-selected);
+      }
+
+      &:hover {
+        background-color: var(--ez-grid-primary-light);
+      }
+    }
+
+    // Keyboard focus state - subtle indicator for keyboard navigation only
+    &.is-focused {
+      background-color: var(--ez-grid-surface-hover);
+      box-shadow: inset 3px 0 0 var(--ez-grid-primary);
+    }
+
+    // Combined focused + selected
+    &.is-focused.is-selected {
+      background-color: var(--ez-grid-primary-light);
+      box-shadow: inset 3px 0 0 var(--ez-grid-primary);
+    }
+  }
+
+  // Focus styling for grid body - remove default outline
+  .ez-grid-body:focus,
+  .ez-grid-body:focus-visible {
+    outline: none;
+  }
+
+  // ----------------------------------------------------------
+  // Virtual scrolling
+  // ----------------------------------------------------------
+  .ez-grid-body--virtual {
+    position: relative;
+
+    .ez-grid-virtual-container {
+      position: relative;
+    }
+
+    .ez-grid-row {
+      position: absolute;
+      left: 0;
+      right: 0;
+    }
+  }
+
+  // ----------------------------------------------------------
+  // Cells
+  // ----------------------------------------------------------
+  .ez-grid-cell {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+
+    padding: 8px 12px;
+    min-height: 40px;
+    box-sizing: border-box;
+
+    font-size: var(--ez-grid-font-size);
+    color: var(--ez-grid-text);
+
+    // CRITICAL: Allow flex item to shrink below content size
+    min-width: 0;
+    overflow: hidden;
+
+    // Text overflow only applies to text content, not components
+    .ez-grid-cell-inner {
+      flex: 1;
+      min-width: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    // Wrap mode: multi-line text (line count set via inline style)
+    &.ez-grid-cell-wrap {
+      align-items: flex-start;
+
+      .ez-grid-cell-inner {
+        white-space: normal;
+        word-break: break-word;
+
+        // Line clamp with ellipsis (-webkit-line-clamp set via inline style)
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  // ----------------------------------------------------------
+  // Empty state
+  // ----------------------------------------------------------
+  .ez-grid-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    padding: 48px 24px;
+    color: var(--ez-grid-text-muted);
+    font-size: var(--ez-grid-font-size);
+    text-align: center;
+    min-height: 120px;
+  }
+
+  // ----------------------------------------------------------
+  // Loading state
+  // ----------------------------------------------------------
+  .ez-grid-loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    padding: 48px 24px;
+    min-height: 120px;
+    gap: 12px;
+  }
+
+  .ez-grid-loading-spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid var(--ez-grid-border-light);
+    border-top-color: var(--ez-grid-primary);
+    border-radius: 50%;
+    animation: ez-grid-spin 0.8s linear infinite;
+  }
+
+  .ez-grid-loading-text {
+    color: var(--ez-grid-text-muted);
+    font-size: var(--ez-grid-font-size);
+  }
+
+  @keyframes ez-grid-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  // ----------------------------------------------------------
+  // Error state
+  // ----------------------------------------------------------
+  .ez-grid-error {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    padding: 48px 24px;
+    min-height: 120px;
+    gap: 12px;
+    text-align: center;
+  }
+
+  .ez-grid-error-icon {
+    font-size: 32px;
+    color: var(--ez-grid-danger);
+  }
+
+  .ez-grid-error-message {
+    color: var(--ez-grid-text);
+    font-size: var(--ez-grid-font-size);
+    max-width: 400px;
+  }
+
+  .ez-grid-error-retry {
+    margin-top: 8px;
+    padding: 8px 16px;
+    background-color: var(--ez-grid-primary);
+    color: white;
+    border: none;
+    border-radius: var(--ez-grid-radius-sm);
+    font-size: var(--ez-grid-font-size);
+    cursor: pointer;
+    transition: background-color 0.15s ease, filter 0.15s ease;
+
+    &:hover {
+      filter: brightness(0.9);
+    }
+  }
+
+  // ----------------------------------------------------------
+  // Action cells
+  // ----------------------------------------------------------
+  .ez-grid-cell-actions {
+    display: flex;
+    justify-content: center;
+    gap: 4px;
+  }
+
+  .ez-grid-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 28px;
+    height: 28px;
+    padding: 0;
+
+    cursor: pointer;
+    border-radius: var(--ez-grid-radius-sm);
+    border: none;
+    background: transparent;
+
+    color: var(--ez-grid-text-secondary);
+
+    transition: all 0.15s ease;
+
+    &:hover {
+      background-color: var(--ez-grid-surface-hover);
+      color: var(--ez-grid-text);
+    }
+
+    &.is-danger:hover {
+      background-color: var(--ez-grid-danger-light);
+      color: var(--ez-grid-danger);
+    }
+  }
+
+  // ----------------------------------------------------------
+  // Selection checkbox
+  // ----------------------------------------------------------
+  .ez-grid-cell-select {
+    display: flex;
+    justify-content: center;
+    padding: 0;
+
+    input[type='checkbox'] {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+      accent-color: var(--ez-grid-primary);
+    }
+  }
+}