@chefuicore/core 1.0.1 → 1.0.2

package/dist/components/chef-ui-data-grid.d.ts

@@ -41,6 +41,11 @@ export declare class ChefUiDataGrid extends LitElement {
     private _containerHeight;
     private _activeFilterColumn;
     private _filterPopoverField;
+    private _filterPopoverX;
+    private _filterPopoverY;
+    private _columnMenuField;
+    private _columnMenuX;
+    private _columnMenuY;
     private _densityMenuOpen;
     private _columnsMenuOpen;
     private _exportMenuOpen;
@@ -73,6 +78,13 @@ export declare class ChefUiDataGrid extends LitElement {
     private _computeAggregation;
     private _handleSort;
     private _openFilterPopover;
+    private _openColumnMenu;
+    private _closeColumnMenu;
+    private _columnMenuSort;
+    private _columnMenuUnsort;
+    private _columnMenuFilter;
+    private _columnMenuHide;
+    private _columnMenuManageColumns;
     private _updateFilter;
     private _removeFilter;
     private _handleQuickFilter;
@@ -99,6 +111,7 @@ export declare class ChefUiDataGrid extends LitElement {
     private _exportCsv;
     private _exportExcel;
     private _changeDensity;
+    private _handleGridClick;
     private _getColumnWidth;
     private _getCellValue;
     private _getDisplayValue;
@@ -108,9 +121,12 @@ export declare class ChefUiDataGrid extends LitElement {
     private _getFilterForField;
     static styles: import("lit").CSSResult;
     render(): import("lit-html").TemplateResult<1>;
+    private _renderFilterPopoverOverlay;
+    private _renderColumnMenu;
     private _renderToolbar;
     private _renderHeader;
     private _renderHeaderCell;
+    private _renderColumnsPanel;
     private _renderFilterPopover;
     private _renderBody;
     private _renderRow;

package/dist/components/chef-ui-data-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chef-ui-data-grid.d.ts","sourceRoot":"","sources":["../../src/components/chef-ui-data-grid.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"chef-ui-data-grid.d.ts","sourceRoot":"","sources":["../../src/components/chef-ui-data-grid.ts"],"names":[],"mappings":"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"}

package/dist/index.cjs

@@ -11897,6 +11897,11 @@ exports.ChefUiDataGrid = class ChefUiDataGrid extends i {
         // UI state
         this._activeFilterColumn = null;
         this._filterPopoverField = null;
+        this._filterPopoverX = 0;
+        this._filterPopoverY = 0;
+        this._columnMenuField = null;
+        this._columnMenuX = 0;
+        this._columnMenuY = 0;
         this._densityMenuOpen = false;
         this._columnsMenuOpen = false;
         this._exportMenuOpen = false;
@@ -12166,9 +12171,94 @@ exports.ChefUiDataGrid = class ChefUiDataGrid extends i {
         this.dispatchEvent(new CustomEvent('sort-change', { detail: { sortModel: this._sortModel } }));
     }
     // ── Filtering ──
-    _openFilterPopover(field) {
-        this._filterPopoverField = this._filterPopoverField === field ? null : field;
-        this._closeAllMenus('filter');
+    _openFilterPopover(field, e) {
+        // Close other menus first
+        this._densityMenuOpen = false;
+        this._columnsMenuOpen = false;
+        this._exportMenuOpen = false;
+        this._contextMenuField = null;
+        if (this._filterPopoverField === field) {
+            this._filterPopoverField = null;
+            return;
+        }
+        // Calculate position relative to grid-container
+        const icon = e.currentTarget;
+        const gridContainer = this.shadowRoot.querySelector('.grid-container');
+        if (icon && gridContainer) {
+            const iconRect = icon.getBoundingClientRect();
+            const gridRect = gridContainer.getBoundingClientRect();
+            this._filterPopoverX = iconRect.left - gridRect.left;
+            this._filterPopoverY = iconRect.bottom - gridRect.top + 4;
+        }
+        this._filterPopoverField = field;
+    }
+    // ── Column Header Menu ──
+    _openColumnMenu(field, e) {
+        e.stopPropagation();
+        // Close other menus
+        this._filterPopoverField = null;
+        this._densityMenuOpen = false;
+        this._columnsMenuOpen = false;
+        this._exportMenuOpen = false;
+        if (this._columnMenuField === field) {
+            this._columnMenuField = null;
+            return;
+        }
+        const btn = e.currentTarget;
+        const gridContainer = this.shadowRoot.querySelector('.grid-container');
+        if (btn && gridContainer) {
+            const btnRect = btn.getBoundingClientRect();
+            const gridRect = gridContainer.getBoundingClientRect();
+            this._columnMenuX = btnRect.left - gridRect.left;
+            this._columnMenuY = btnRect.bottom - gridRect.top + 4;
+        }
+        this._columnMenuField = field;
+    }
+    _closeColumnMenu() {
+        this._columnMenuField = null;
+    }
+    _columnMenuSort(field, dir) {
+        // Set sort to specific direction
+        this._sortModel = [{ field, sort: dir }];
+        this.dispatchEvent(new CustomEvent('sort-change', { detail: { sortModel: this._sortModel } }));
+        this._closeColumnMenu();
+    }
+    _columnMenuUnsort(field) {
+        this._sortModel = this._sortModel.filter(s => s.field !== field);
+        this.dispatchEvent(new CustomEvent('sort-change', { detail: { sortModel: this._sortModel } }));
+        this._closeColumnMenu();
+    }
+    _columnMenuFilter(field) {
+        this._closeColumnMenu();
+        // Open filter popover — we need to calculate position from the header cell
+        const headerCells = this.shadowRoot.querySelectorAll('.header-cell');
+        const gridContainer = this.shadowRoot.querySelector('.grid-container');
+        const col = this._visibleColumns.find(c => c.field === field);
+        if (!col || !gridContainer)
+            return;
+        const colIdx = this._visibleColumns.indexOf(col);
+        const adjustedIdx = this.checkboxSelection ? colIdx + 1 : colIdx;
+        const headerCell = headerCells[adjustedIdx];
+        if (headerCell) {
+            const cellRect = headerCell.getBoundingClientRect();
+            const gridRect = gridContainer.getBoundingClientRect();
+            this._filterPopoverX = cellRect.left - gridRect.left;
+            this._filterPopoverY = cellRect.bottom - gridRect.top + 4;
+        }
+        this._filterPopoverField = field;
+    }
+    _columnMenuHide(field) {
+        const newHidden = new Set(this._hiddenColumns);
+        newHidden.add(field);
+        this._hiddenColumns = newHidden;
+        this.dispatchEvent(new CustomEvent('column-visibility-change', {
+            detail: { hiddenColumns: Array.from(newHidden) },
+        }));
+        this._closeColumnMenu();
+    }
+    _columnMenuManageColumns() {
+        this._closeColumnMenu();
+        this._columnsMenuOpen = true;
     }
     _updateFilter(field, operator, value) {
         const items = this._filterModel.items.filter(i => i.field !== field);
@@ -12447,6 +12537,20 @@ exports.ChefUiDataGrid = class ChefUiDataGrid extends i {
         this.density = d;
         this._densityMenuOpen = false;
     }
+    // ── Grid Click ──
+    _handleGridClick(e) {
+        const path = e.composedPath();
+        // Don't close menus if user clicked inside an overlay/popover/dropdown
+        const insideOverlay = path.some(el => el instanceof HTMLElement && (el.classList?.contains('filter-popover') ||
+            el.classList?.contains('column-menu') ||
+            el.classList?.contains('dropdown') ||
+            el.classList?.contains('filter-icon') ||
+            el.classList?.contains('toolbar-btn') ||
+            el.classList?.contains('column-menu-btn')));
+        if (!insideOverlay) {
+            this._closeAllMenus();
+        }
+    }
     // ── Helpers ──
     _getColumnWidth(field) {
         if (this._columnWidths.has(field))
@@ -12480,6 +12584,8 @@ exports.ChefUiDataGrid = class ChefUiDataGrid extends i {
             this._exportMenuOpen = false;
         if (except !== 'context')
             this._contextMenuField = null;
+        if (except !== 'columnMenu')
+            this._columnMenuField = null;
     }
     _getSortDirection(field) {
         const s = this._sortModel.find(s => s.field === field);
@@ -12505,7 +12611,7 @@ exports.ChefUiDataGrid = class ChefUiDataGrid extends i {
         aria-rowcount="${this._totalRowCount}"
         aria-colcount="${this._visibleColumns.length}"
         @keydown="${this._handleGridKeydown}"
-        @click="${() => this._closeAllMenus()}"
+        @click="${(e) => this._handleGridClick(e)}"
       >
         ${this.showToolbar ? this._renderToolbar() : A}
         ${this._renderHeader()}
@@ -12524,6 +12630,86 @@ exports.ChefUiDataGrid = class ChefUiDataGrid extends i {
           ` : this._renderBody()}
         </div>
         ${this._renderFooter()}
+        ${this._filterPopoverField ? this._renderFilterPopoverOverlay() : A}
+        ${this._columnMenuField ? this._renderColumnMenu() : A}
+        ${this._columnsMenuOpen && !this.showToolbar ? this._renderColumnsPanel() : A}
+      </div>
+    `;
+    }
+    // ── Filter Popover Overlay ──
+    _renderFilterPopoverOverlay() {
+        const col = this.columns.find(c => c.field === this._filterPopoverField);
+        if (!col)
+            return A;
+        return this._renderFilterPopover(col);
+    }
+    // ── Column Header Menu ──
+    _renderColumnMenu() {
+        const field = this._columnMenuField;
+        const col = this.columns.find(c => c.field === field);
+        if (!col)
+            return A;
+        const sortDir = this._getSortDirection(field);
+        const isSortable = this.sortable && col.sortable !== false;
+        const isFilterable = this.filterable && col.filterable !== false;
+        const isPinnable = col.pinnable !== false;
+        const isHideable = col.hideable !== false;
+        const isPinnedLeft = (this.pinnedColumns.left || []).includes(field);
+        const isPinnedRight = (this.pinnedColumns.right || []).includes(field);
+        return b `
+      <div class="column-menu"
+        style="left:${this._columnMenuX}px; top:${this._columnMenuY}px"
+        @click="${(e) => e.stopPropagation()}">
+
+        ${isSortable ? b `
+          <button class="column-menu-item" @click="${() => this._columnMenuSort(field, 'asc')}">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+            Sort by ASC
+          </button>
+          <button class="column-menu-item" @click="${() => this._columnMenuSort(field, 'desc')}">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>
+            Sort by DESC
+          </button>
+          ${sortDir ? b `
+            <button class="column-menu-item" @click="${() => this._columnMenuUnsort(field)}">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              Unsort
+            </button>
+          ` : A}
+          <div class="column-menu-divider"></div>
+        ` : A}
+
+        ${isPinnable ? b `
+          <button class="column-menu-item" @click="${() => { this._pinColumn(field, isPinnedLeft ? 'none' : 'left'); this._closeColumnMenu(); }}">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 4.5L7.5 12l3 3L18 7.5"/><path d="M2 22l5.5-5.5"/></svg>
+            ${isPinnedLeft ? 'Unpin from left' : 'Pin to left'}
+          </button>
+          <button class="column-menu-item" @click="${() => { this._pinColumn(field, isPinnedRight ? 'none' : 'right'); this._closeColumnMenu(); }}">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 4.5L16.5 12l-3 3L6 7.5"/><path d="M22 22l-5.5-5.5"/></svg>
+            ${isPinnedRight ? 'Unpin from right' : 'Pin to right'}
+          </button>
+          <div class="column-menu-divider"></div>
+        ` : A}
+
+        ${isFilterable ? b `
+          <button class="column-menu-item" @click="${() => this._columnMenuFilter(field)}">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
+            Filter
+          </button>
+          <div class="column-menu-divider"></div>
+        ` : A}
+
+        ${isHideable ? b `
+          <button class="column-menu-item" @click="${() => this._columnMenuHide(field)}">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
+            Hide column
+          </button>
+        ` : A}
+
+        <button class="column-menu-item" @click="${() => this._columnMenuManageColumns()}">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
+          Manage columns
+        </button>
       </div>
     `;
     }
@@ -12624,11 +12810,10 @@ exports.ChefUiDataGrid = class ChefUiDataGrid extends i {
         const sortDir = this._getSortDirection(col.field);
         const sortIdx = this._getSortIndex(col.field);
         const isSortable = this.sortable && col.sortable !== false;
-        const isFilterable = this.filterable && col.filterable !== false;
         const hasFilter = this._getFilterForField(col.field) !== undefined;
         const isReorderable = this.reorderableColumns;
         const isResizable = this.resizableColumns && col.resizable !== false;
-        const isFilterOpen = this._filterPopoverField === col.field;
+        const isMenuOpen = this._columnMenuField === col.field;
         return b `
       <div class="header-cell ${isSortable ? 'sortable' : ''}"
         style="width:${width}px; height:${this._effectiveHeaderHeight}px; text-align:${col.headerAlign || col.align || 'left'}"
@@ -12646,20 +12831,31 @@ exports.ChefUiDataGrid = class ChefUiDataGrid extends i {
           <span class="sort-icon">${sortDir === 'asc' ? '↑' : '↓'}</span>
           ${this._sortModel.length > 1 ? b `<span class="sort-index">${sortIdx + 1}</span>` : A}
         ` : A}
+        ${hasFilter ? b `<span class="sort-icon" style="color:var(--dg-primary);font-size:10px">⧫</span>` : A}
 
-        ${isFilterable ? b `
-          <svg class="filter-icon ${hasFilter || isFilterOpen ? 'active' : ''}"
-            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-            @click="${(e) => { e.stopPropagation(); this._openFilterPopover(col.field); }}">
-            <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
-          </svg>
-        ` : A}
+        <button class="column-menu-btn ${isMenuOpen ? 'active' : ''}"
+          @click="${(e) => this._openColumnMenu(col.field, e)}">⋮</button>
 
         ${isResizable ? b `
           <div class="resize-handle" @mousedown="${(e) => this._startResize(col.field, e)}"></div>
         ` : A}
-
-        ${isFilterOpen ? this._renderFilterPopover(col) : A}
+      </div>
+    `;
+    }
+    // ── Standalone Columns Panel ──
+    _renderColumnsPanel() {
+        return b `
+      <div class="column-menu"
+        style="right:8px; top:${this._effectiveHeaderHeight + 8}px; left:auto; max-height:300px; overflow-y:auto"
+        @click="${(e) => e.stopPropagation()}">
+        ${this.columns.filter(c => c.hideable !== false).map(col => b `
+          <label class="column-menu-item" style="cursor:pointer">
+            <input type="checkbox" style="cursor:pointer"
+              ?checked="${!this._hiddenColumns.has(col.field)}"
+              @change="${() => this._toggleColumnVisibility(col.field)}" />
+            ${col.headerName || col.field}
+          </label>
+        `)}
       </div>
     `;
     }
@@ -12671,7 +12867,9 @@ exports.ChefUiDataGrid = class ChefUiDataGrid extends i {
         const currentOp = existing?.operator || getDefaultOperator(type);
         const currentVal = existing?.value ?? '';
         return b `
-      <div class="filter-popover" @click="${(e) => e.stopPropagation()}">
+      <div class="filter-popover"
+        style="left:${this._filterPopoverX}px; top:${this._filterPopoverY}px"
+        @click="${(e) => e.stopPropagation()}">
         <div class="filter-popover-title">Filter: ${col.headerName || col.field}</div>
         <select
           .value="${currentOp}"
@@ -12946,7 +13144,7 @@ exports.ChefUiDataGrid.styles = i$3 `
     .grid-container {
       border: 1px solid var(--dg-border);
       border-radius: 4px;
-      overflow: hidden;
+      overflow: visible;
       position: relative;
       background: #fff;
     }
@@ -13049,6 +13247,7 @@ exports.ChefUiDataGrid.styles = i$3 `
       position: sticky;
       top: 0;
       z-index: 10;
+      overflow: visible;
     }
 
     .header-cell {
@@ -13061,7 +13260,7 @@ exports.ChefUiDataGrid.styles = i$3 `
       border-right: 1px solid var(--dg-border);
       position: relative;
       user-select: none;
-      overflow: hidden;
+      overflow: visible;
       flex-shrink: 0;
     }
 
@@ -13255,16 +13454,14 @@ exports.ChefUiDataGrid.styles = i$3 `
     /* ── Filter Popover ── */
     .filter-popover {
       position: absolute;
-      top: 100%;
-      left: 0;
-      margin-top: 4px;
       background: #fff;
       border: 1px solid var(--dg-border);
       border-radius: 8px;
-      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
-      z-index: 200;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.18);
+      z-index: 1000;
       padding: 16px;
       min-width: 280px;
+      max-width: 340px;
     }
 
     .filter-popover-title {
@@ -13349,24 +13546,48 @@ exports.ChefUiDataGrid.styles = i$3 `
       font-size: 14px;
     }
 
-    /* ── Context Menu ── */
-    .header-context-menu {
+    /* ── Column Menu Button ── */
+    .column-menu-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: 4px;
+      color: #999;
+      font-size: 16px;
+      flex-shrink: 0;
+      margin-left: 2px;
+      padding: 0;
+      transition: background 0.15s, color 0.15s;
+      font-family: var(--dg-font);
+      line-height: 1;
+    }
+
+    .column-menu-btn:hover { background: rgba(0,0,0,0.08); color: var(--dg-text); }
+    .column-menu-btn.active { background: rgba(0,0,0,0.08); color: var(--dg-primary); }
+
+    /* ── Column Menu ── */
+    .column-menu {
       position: absolute;
-      top: 100%;
-      right: 4px;
       background: #fff;
       border: 1px solid var(--dg-border);
-      border-radius: 6px;
-      box-shadow: 0 4px 16px rgba(0,0,0,0.12);
-      z-index: 200;
-      padding: 4px 0;
-      min-width: 140px;
+      border-radius: 8px;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.18);
+      z-index: 1000;
+      padding: 6px 0;
+      min-width: 200px;
     }
 
-    .context-item {
-      display: block;
+    .column-menu-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
       width: 100%;
-      padding: 8px 16px;
+      padding: 9px 16px;
       border: none;
       background: none;
       cursor: pointer;
@@ -13375,11 +13596,21 @@ exports.ChefUiDataGrid.styles = i$3 `
       transition: background 0.15s;
       font-family: var(--dg-font);
       color: var(--dg-text);
+      white-space: nowrap;
+    }
+
+    .column-menu-item:hover { background: #f5f5f5; }
+
+    .column-menu-item svg {
+      width: 18px;
+      height: 18px;
+      flex-shrink: 0;
+      color: #666;
     }
 
-    .context-item:hover { background: #f5f5f5; }
+    .column-menu-item:hover svg { color: var(--dg-text); }
 
-    .context-divider {
+    .column-menu-divider {
       height: 1px;
       background: var(--dg-border);
       margin: 4px 0;
@@ -13515,6 +13746,21 @@ __decorate([
 __decorate([
     r()
 ], exports.ChefUiDataGrid.prototype, "_filterPopoverField", void 0);
+__decorate([
+    r()
+], exports.ChefUiDataGrid.prototype, "_filterPopoverX", void 0);
+__decorate([
+    r()
+], exports.ChefUiDataGrid.prototype, "_filterPopoverY", void 0);
+__decorate([
+    r()
+], exports.ChefUiDataGrid.prototype, "_columnMenuField", void 0);
+__decorate([
+    r()
+], exports.ChefUiDataGrid.prototype, "_columnMenuX", void 0);
+__decorate([
+    r()
+], exports.ChefUiDataGrid.prototype, "_columnMenuY", void 0);
 __decorate([
     r()
 ], exports.ChefUiDataGrid.prototype, "_densityMenuOpen", void 0);