@chefuicore/core 1.0.1 → 1.0.2

package/dist/index.js

@@ -11895,6 +11895,11 @@ let 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;
@@ -12164,9 +12169,94 @@ let 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);
@@ -12445,6 +12535,20 @@ let 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))
@@ -12478,6 +12582,8 @@ let 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);
@@ -12503,7 +12609,7 @@ let 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()}
@@ -12522,6 +12628,86 @@ let 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>
     `;
     }
@@ -12622,11 +12808,10 @@ let 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'}"
@@ -12644,20 +12829,31 @@ let 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>
     `;
     }
@@ -12669,7 +12865,9 @@ let 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}"
@@ -12944,7 +13142,7 @@ ChefUiDataGrid.styles = i$3 `
     .grid-container {
       border: 1px solid var(--dg-border);
       border-radius: 4px;
-      overflow: hidden;
+      overflow: visible;
       position: relative;
       background: #fff;
     }
@@ -13047,6 +13245,7 @@ ChefUiDataGrid.styles = i$3 `
       position: sticky;
       top: 0;
       z-index: 10;
+      overflow: visible;
     }
 
     .header-cell {
@@ -13059,7 +13258,7 @@ ChefUiDataGrid.styles = i$3 `
       border-right: 1px solid var(--dg-border);
       position: relative;
       user-select: none;
-      overflow: hidden;
+      overflow: visible;
       flex-shrink: 0;
     }
 
@@ -13253,16 +13452,14 @@ 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 {
@@ -13347,24 +13544,48 @@ 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;
@@ -13373,11 +13594,21 @@ 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;
@@ -13513,6 +13744,21 @@ __decorate([
 __decorate([
     r()
 ], ChefUiDataGrid.prototype, "_filterPopoverField", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_filterPopoverX", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_filterPopoverY", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_columnMenuField", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_columnMenuX", void 0);
+__decorate([
+    r()
+], ChefUiDataGrid.prototype, "_columnMenuY", void 0);
 __decorate([
     r()
 ], ChefUiDataGrid.prototype, "_densityMenuOpen", void 0);