@kodaris/krubble-components 1.0.55 → 1.0.56

package/dist/krubble-components.bundled.js

@@ -4059,6 +4059,7 @@ let KRTable = class KRTable extends i$2 {
         this._filterPanelTab = 'filter';
         this._buckets = new Map();
         this._filterPanelPos = { top: 0, left: 0 };
+        this._sorts = [];
         this._resizing = null;
         this._resizeObserver = null;
         this._searchPositionLocked = false;
@@ -4248,7 +4249,7 @@ let KRTable = class KRTable extends i$2 {
         const request = {
             page: this._page - 1,
             size: this._pageSize,
-            sorts: [],
+            sorts: this._sorts,
             filterFields: [],
             queryFields: [],
             facetFields: []
@@ -4288,7 +4289,7 @@ let KRTable = class KRTable extends i$2 {
         const request = {
             page: this._page - 1,
             size: this._pageSize,
-            sorts: [],
+            sorts: this._sorts,
             filterFields: [],
             queryFields: [],
             facetFields: []
@@ -4587,6 +4588,77 @@ let KRTable = class KRTable extends i$2 {
         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) {
@@ -4780,6 +4852,7 @@ let KRTable = class KRTable extends i$2 {
     _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',
@@ -5267,10 +5340,14 @@ let KRTable = class KRTable extends i$2 {
                   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()}
@@ -5679,9 +5756,7 @@ KRTable.styles = [krBaseCSS, i$5 `
     .header-cell {
       position: sticky;
       top: 0;
-      z-index: 2;
       height: 48px;
-      line-height: 48px;
       padding: 0 16px;
       white-space: nowrap;
       box-sizing: border-box;
@@ -5691,8 +5766,8 @@ KRTable.styles = [krBaseCSS, i$5 `
       border-right: 1px solid #e5e7ebba;
       font-weight: 600;
       color: #374151;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      display: flex;
+      align-items: center;
     }
 
     .header-cell__resize {
@@ -5702,21 +5777,52 @@ KRTable.styles = [krBaseCSS, i$5 `
       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 {
@@ -6182,6 +6288,9 @@ __decorate$9([
 __decorate$9([
     r$1()
 ], KRTable.prototype, "_buckets", void 0);
+__decorate$9([
+    r$1()
+], KRTable.prototype, "_sorts", void 0);
 __decorate$9([
     n$1({ type: Object })
 ], KRTable.prototype, "def", void 0);