@kodaris/krubble-components 1.0.55 → 1.0.56

package/dist/krubble-components.umd.js

@@ -4065,6 +4065,7 @@
           this._filterPanelTab = 'filter';
           this._buckets = new Map();
           this._filterPanelPos = { top: 0, left: 0 };
+          this._sorts = [];
           this._resizing = null;
           this._resizeObserver = null;
           this._searchPositionLocked = false;
@@ -4254,7 +4255,7 @@
           const request = {
               page: this._page - 1,
               size: this._pageSize,
-              sorts: [],
+              sorts: this._sorts,
               filterFields: [],
               queryFields: [],
               facetFields: []
@@ -4294,7 +4295,7 @@
           const request = {
               page: this._page - 1,
               size: this._pageSize,
-              sorts: [],
+              sorts: this._sorts,
               filterFields: [],
               queryFields: [],
               facetFields: []
@@ -4593,6 +4594,77 @@
           document.addEventListener('mouseup', this._handleResizeEnd);
       }
       // ----------------------------------------------------------------------------
+      // Sorting
+      // ----------------------------------------------------------------------------
+      _handleSortClick(e, column) {
+          if (e.shiftKey) {
+              // Multi-sort: add or cycle existing
+              const existingIndex = this._sorts.findIndex(s => s.sortBy === column.id);
+              if (existingIndex === -1) {
+                  this._sorts.push({ sortBy: column.id, sortDirection: 'asc' });
+              }
+              else {
+                  const existing = this._sorts[existingIndex];
+                  if (existing.sortDirection === 'asc') {
+                      existing.sortDirection = 'desc';
+                  }
+                  else {
+                      // on third click, remove sorting for the column
+                      this._sorts.splice(existingIndex, 1);
+                  }
+              }
+              this.requestUpdate();
+          }
+          else {
+              // Single sort: replace all
+              let existing = null;
+              if (this._sorts.length === 1) {
+                  existing = this._sorts.find(s => s.sortBy === column.id);
+              }
+              if (!existing) {
+                  this._sorts = [{ sortBy: column.id, sortDirection: 'asc' }];
+              }
+              else if (existing.sortDirection === 'asc') {
+                  this._sorts = [{ sortBy: column.id, sortDirection: 'desc' }];
+              }
+              else {
+                  this._sorts = [];
+              }
+          }
+          this._page = 1;
+          this._fetch();
+      }
+      _renderSortIndicator(column) {
+          if (!column.sortable) {
+              return A;
+          }
+          const sortIndex = this._sorts.findIndex(s => s.sortBy === column.id);
+          if (sortIndex === -1) {
+              // Ghost arrow: visible only on hover via CSS
+              return b `
+        <span class="header-cell__sort" @click=${(e) => this._handleSortClick(e, column)}>
+          <svg class="header-cell__sort-arrow header-cell__sort-arrow--ghost" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/>
+          </svg>
+        </span>
+      `;
+          }
+          let arrowStyle = {};
+          if (this._sorts[sortIndex].sortDirection === 'desc') {
+              arrowStyle = { transform: 'rotate(180deg)' };
+          }
+          return b `
+      <span class="header-cell__sort" @click=${(e) => this._handleSortClick(e, column)}>
+        <svg class="header-cell__sort-arrow" viewBox="0 0 24 24" fill="currentColor" style=${o$1(arrowStyle)}>
+          <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/>
+        </svg>
+        ${this._sorts.length > 1 ? b `
+          <span class="header-cell__sort-priority">${sortIndex + 1}</span>
+        ` : A}
+      </span>
+    `;
+      }
+      // ----------------------------------------------------------------------------
       // Header
       // ----------------------------------------------------------------------------
       _handleAction(action) {
@@ -4786,6 +4858,7 @@
       _getHeaderCellClasses(column, index) {
           return {
               'header-cell': true,
+              'header-cell--sortable': !!column.sortable,
               'header-cell--align-center': column.align === 'center',
               'header-cell--align-right': column.align === 'right',
               'header-cell--sticky-left': column.sticky === 'left',
@@ -5273,10 +5346,14 @@
                   class=${e$1(this._getHeaderCellClasses(col, i))}
                   style=${o$1(this._getCellStyle(col, i))}
                   data-column-id=${col.id}
-                >${col.label ?? col.id}${col.resizable !== false ? b `<div
+                >
+                  <span class="header-cell__label">${col.label ?? col.id}</span>
+                  ${this._renderSortIndicator(col)}
+                  ${col.resizable !== false ? b `<div
                       class="header-cell__resize"
                       @mousedown=${(e) => this._handleResizeStart(e, col.id)}
-                    ></div>` : A}</div>
+                    ></div>` : A}
+                </div>
               `)}
             </div>
             ${this._renderFilterRow()}
@@ -5685,9 +5762,7 @@
     .header-cell {
       position: sticky;
       top: 0;
-      z-index: 2;
       height: 48px;
-      line-height: 48px;
       padding: 0 16px;
       white-space: nowrap;
       box-sizing: border-box;
@@ -5697,8 +5772,8 @@
       border-right: 1px solid #e5e7ebba;
       font-weight: 600;
       color: #374151;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      display: flex;
+      align-items: center;
     }
 
     .header-cell__resize {
@@ -5708,21 +5783,52 @@
       bottom: 0;
       width: 14px;
       cursor: col-resize;
+      z-index: 10;
+    }
+
+    .header-cell--sortable {
+      user-select: none;
+    }
+
+    .header-cell__label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
+      line-height: 48px;
+    }
+
+    .header-cell__sort {
+      flex-grow: 1;
       display: flex;
       align-items: center;
-      justify-content: center;
-      z-index: 10;
+      height: 100%;
+      margin-left: 6px;
+      cursor: pointer;
     }
 
-    .header-cell__resize::after {
-      content: '';
-      width: 2px;
-      height: 20px;
-      background: #c6c6cd;
+    .header-cell__sort-arrow {
+      width: 16px;
+      height: 16px;
+      color: #374151;
+      stroke: currentColor;
+      stroke-width: 1px;
     }
 
-    .header-cell:last-child .header-cell__resize::after {
-      display: none;
+    .header-cell__sort-arrow--ghost {
+      opacity: 0;
+      color: #374151;
+      transition: opacity 0.15s;
+    }
+
+    .header-cell--sortable:hover .header-cell__sort-arrow--ghost {
+      opacity: 0.4;
+    }
+
+    .header-cell__sort-priority {
+      font-size: 10px;
+      font-weight: 600;
+      color: #374151;
+      line-height: 1;
     }
 
     .cell {
@@ -6188,6 +6294,9 @@
   __decorate$9([
       r$1()
   ], exports.KRTable.prototype, "_buckets", void 0);
+  __decorate$9([
+      r$1()
+  ], exports.KRTable.prototype, "_sorts", void 0);
   __decorate$9([
       n$1({ type: Object })
   ], exports.KRTable.prototype, "def", void 0);