@kodaris/krubble-components 1.0.55 → 1.0.57

package/dist/krubble-components.umd.js

@@ -3019,6 +3019,7 @@
       greater_than_equal: { key: 'greater_than_equal', type: 'comparison', dataTypes: ['number', 'date'], label: 'Greater than or equal' },
       between: { key: 'between', type: 'range', dataTypes: ['number', 'date'], label: 'Between' },
       in: { key: 'in', type: 'list', dataTypes: ['string', 'number'], label: 'In' },
+      n_in: { key: 'n_in', type: 'list', dataTypes: ['string', 'number', 'date', 'boolean'], label: 'Not In' },
       empty: { key: 'empty', type: 'nil', dataTypes: ['string', 'number', 'date', 'boolean'], label: 'Empty' },
       n_empty: { key: 'n_empty', type: 'nil', dataTypes: ['string', 'number', 'date', 'boolean'], label: 'Not empty' },
   };
@@ -3351,6 +3352,14 @@
               };
               this.specificity = [getDateSpecificity(rawStart), getDateSpecificity(rawEnd)];
           }
+          else if (kql.startsWith('!(') && kql.endsWith(')')) {
+              this.operator = 'n_in';
+              this.text = kql.substring(2, kql.length - 1).trim();
+              this.value = this.text.split(',')
+                  .map(v => v.trim())
+                  .map(v => this._parse(v));
+              this.specificity = [getDateSpecificity(this.text)];
+          }
           else if (kql.startsWith('(') && kql.endsWith(')')) {
               this.operator = 'in';
               this.text = kql.substring(1, kql.length - 1).trim();
@@ -3397,7 +3406,7 @@
               this.value = null;
               this.text = '';
           }
-          else if (this.operator === 'in') {
+          else if (this.operator === 'in' || this.operator === 'n_in') {
               this.value = [];
               this.text = '';
           }
@@ -3415,7 +3424,7 @@
               this.value = null;
               this.text = '';
           }
-          else if (this.operator === 'in') {
+          else if (this.operator === 'in' || this.operator === 'n_in') {
               this.value = [];
               this.text = '';
           }
@@ -3482,14 +3491,14 @@
           if (this.operator === 'between') {
               return !this.value?.start && !this.value?.end;
           }
-          if (this.operator === 'in') {
+          if (this.operator === 'in' || this.operator === 'n_in') {
               return !this.value?.length;
           }
           return this.value === undefined || this.value === null || this.value === '';
       }
-      /** Returns true if the value array contains the given value. Only applies to 'in' operator. */
+      /** Returns true if the value array contains the given value. Only applies to 'in' and 'n_in' operators. */
       has(val) {
-          if (this.operator !== 'in' || !Array.isArray(this.value)) {
+          if ((this.operator !== 'in' && this.operator !== 'n_in') || !Array.isArray(this.value)) {
               return false;
           }
           // Bucket values from Solr arrive as strings ("true"/"false") but
@@ -3504,9 +3513,9 @@
           }
           return this.value.indexOf(val) >= 0;
       }
-      /** Adds or removes a value from the 'in' list and rebuilds text/kql. */
+      /** Adds or removes a value from the 'in' or 'n_in' list and rebuilds text/kql. */
       toggle(val) {
-          if (this.operator !== 'in') {
+          if (this.operator !== 'in' && this.operator !== 'n_in') {
               this.setOperator('in');
           }
           // Bucket values from Solr arrive as strings ("true"/"false") —
@@ -3545,8 +3554,8 @@
           if (this.operator === 'n_empty') {
               return true;
           }
-          // For 'in' operator, valid as long as there's at least one value (including null for empty buckets)
-          if (this.operator === 'in') {
+          // For 'in'/'n_in' operator, valid as long as there's at least one value (including null for empty buckets)
+          if (this.operator === 'in' || this.operator === 'n_in') {
               return Array.isArray(this.value) && this.value.length > 0;
           }
           if (this.type === 'date') {
@@ -3690,6 +3699,18 @@
                       data.value = termify(this.value, true);
                   }
                   break;
+              case 'n_in':
+                  if (Array.isArray(this.value) && this.value.length > 0) {
+                      data.operation = 'EXPRESSION';
+                      data.not = true;
+                      data.value = `(${this.value.map((v) => termify(v, true)).join(' OR ')})`;
+                  }
+                  else {
+                      data.operation = 'EXPRESSION';
+                      data.not = true;
+                      data.value = termify(this.value, true);
+                  }
+                  break;
               default:
                   data.operation = 'EXPRESSION';
                   data.value = termify(this.value, true);
@@ -3784,6 +3805,11 @@
                   params.operation = 'IN';
                   params.values = this.value ?? [];
                   break;
+              case 'n_in':
+                  params.operation = 'IN';
+                  params.not = true;
+                  params.values = this.value ?? [];
+                  break;
               default:
                   throw Error(`${this.operator} operator not supported by db params.`);
           }
@@ -3800,7 +3826,7 @@
           if (this.operator === 'between') {
               this.text = `${this._format(this.value?.start)} - ${this._format(this.value?.end)}`;
           }
-          else if (this.operator === 'in') {
+          else if (this.operator === 'in' || this.operator === 'n_in') {
               this.text = this.value.map((v) => this._format(v)).join(',');
           }
           else {
@@ -4014,6 +4040,9 @@
               case 'in':
                   this.kql = `(${this.value.map((v) => this._format(v)).join(',')})`;
                   break;
+              case 'n_in':
+                  this.kql = `!(${this.value.map((v) => this._format(v)).join(',')})`;
+                  break;
               default:
                   throw Error(`Unknown operator ${this.operator}`);
           }
@@ -4065,6 +4094,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 +4284,7 @@
           const request = {
               page: this._page - 1,
               size: this._pageSize,
-              sorts: [],
+              sorts: this._sorts,
               filterFields: [],
               queryFields: [],
               facetFields: []
@@ -4264,7 +4294,7 @@
                   continue;
               }
               const filterData = col.filter.toSolrData();
-              if (col.facetable && col.filter.operator === 'in') {
+              if (col.facetable && (col.filter.operator === 'in' || col.filter.operator === 'n_in')) {
                   filterData.tagged = true;
               }
               request.filterFields.push(filterData);
@@ -4294,7 +4324,7 @@
           const request = {
               page: this._page - 1,
               size: this._pageSize,
-              sorts: [],
+              sorts: this._sorts,
               filterFields: [],
               queryFields: [],
               facetFields: []
@@ -4416,7 +4446,7 @@
                   }
               }
               // Bucket sync: ensure selected values appear even with 0 results
-              if (col.filter && col.filter.operator === 'in' && Array.isArray(col.filter.value)) {
+              if (col.filter && (col.filter.operator === 'in' || col.filter.operator === 'n_in') && Array.isArray(col.filter.value)) {
                   for (const selectedVal of col.filter.value) {
                       if (!buckets.some(b => b.val === selectedVal)) {
                           buckets.push({
@@ -4593,6 +4623,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 +4887,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',
@@ -5018,7 +5120,7 @@
         />
       `;
           }
-          else if (column.filter.operator === 'in') {
+          else if (column.filter.operator === 'in' || column.filter.operator === 'n_in') {
               valueInput = b `
         <textarea
           class="filter-panel__textarea"
@@ -5273,10 +5375,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 +5791,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 +5801,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 +5812,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 +6323,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);