@kodaris/krubble-components 1.0.63 → 1.0.64

package/dist/krubble-components.umd.js

@@ -4619,6 +4619,7 @@
   class KRTableModel {
       constructor() {
           this.title = '';
+          this.description = '';
           this.actions = [];
           this.columns = [];
           this.displayedColumns = [];
@@ -4661,6 +4662,13 @@
           this._columnWidthsLocked = false;
           this._model = new KRTableModel();
           this.def = { columns: [] };
+          /**
+           * Table layout variant.
+           * - 'default': Full-page table that fills parent height with centered search.
+           * - 'card': Embedded table that sizes itself to content, left-aligns search, and
+           *   reserves space for pageSize rows to prevent layout shift.
+           */
+          this.variant = 'default';
           this._handleClickOutside = (e) => {
               const path = e.composedPath();
               if (this._columnPickerOpen) {
@@ -4719,6 +4727,9 @@
               if (this.def.title) {
                   this._model.title = this.def.title;
               }
+              if (this.def.description) {
+                  this._model.description = this.def.description;
+              }
               if (this.def.actions) {
                   this._model.actions = this.def.actions;
               }
@@ -4733,6 +4744,7 @@
               }
               if (typeof this.def.pageSize === 'number') {
                   this._model.pageSize = this.def.pageSize;
+                  this._pageSize = this.def.pageSize;
               }
               if (this.def.rowClickable) {
                   this._model.rowClickable = this.def.rowClickable;
@@ -4790,6 +4802,7 @@
           }
       }
       updated(changedProperties) {
+          this.classList.toggle('kr-table--card', this.variant === 'card');
           this._updateScrollFlags();
           this._syncSlottedContent();
       }
@@ -5087,6 +5100,9 @@
           // Skip if already locked (prevents shifts on pagination changes)
           if (this._searchPositionLocked)
               return;
+          // In card mode, search is left-aligned via CSS — no position locking needed
+          if (this.variant === 'card')
+              return;
           const search = this.shadowRoot?.querySelector('.search');
           const searchField = search?.querySelector('.search-field');
           if (!search || !searchField)
@@ -5559,12 +5575,25 @@
           <svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
         </span>
       </div>
+    `;
+      }
+      /** Renders the card title block (title + description) above the toolbar in card mode. */
+      _renderCardHeader() {
+          if (this.variant !== 'card')
+              return A;
+          if (!this._model.title && !this._model.description)
+              return A;
+          return b `
+      <div class="card-header">
+        ${this._model.title ? b `<h2 class="card-header__title">${this._model.title}</h2>` : A}
+        ${this._model.description ? b `<p class="card-header__description">${this._model.description}</p>` : A}
+      </div>
     `;
       }
       /**
        * Renders the header toolbar containing:
-       * - Title (left)
-       * - Search bar with view selector dropdown (center)
+       * - Title (left, default variant only)
+       * - Search bar with view selector dropdown (center, or left-aligned in card variant)
        * - Tools (right): page navigation, refresh button, column visibility picker, actions dropdown
        *
        * Hidden when there's no title, no actions, and data fits on one page.
@@ -5575,7 +5604,7 @@
           }
           return b `
       <div class="header">
-        <div class="title">${this._model.title ?? ''}</div>
+        ${this._model.title && this.variant !== 'card' ? b `<div class="title">${this._model.title}</div>` : A}
         ${this._model.dataSource?.mode === 'db' && !this._model.columns.some(col => col.searchable) ? b `<div class="search"></div>` : b `
           <div class="search">
             <!-- TODO: Saved views dropdown
@@ -5953,8 +5982,13 @@
       }
       /** Renders the scrollable data grid with column headers and rows. */
       _renderTable() {
+          const wrapperStyle = {};
+          if (this.variant === 'card') {
+              // Reserve space for header row + pageSize data rows to prevent layout shift
+              wrapperStyle['min-height'] = `${48 + (this._pageSize * 48)}px`;
+          }
           return b `
-      <div class="wrapper">
+      <div class="wrapper" style=${o$1(wrapperStyle)}>
         <div class="overlay-left"></div>
         <div class="overlay-right"></div>
         ${this._renderStatus()}
@@ -6022,6 +6056,7 @@
               return b `<slot></slot>`;
           }
           return b `
+      ${this._renderCardHeader()}
       ${this._renderHeader()}
       ${this._renderTable()}
       ${this._renderFilterPanel()}
@@ -6060,7 +6095,7 @@
     }
 
     .title {
-      font-size: 20px;
+      font-size: 18px;
       font-weight: 600;
       color: #000;
     }
@@ -6077,7 +6112,6 @@
     .content {
       height: 100%;
       overflow: auto;
-      padding-bottom: 24px;
     }
 
     /* -------------------------------------------------------------------------
@@ -6091,6 +6125,11 @@
       min-width: 0;
     }
 
+    /* In card mode, align search left instead of center */
+    :host(.kr-table--card) .search {
+      justify-content: flex-start;
+    }
+
     .search-field {
       width: 100%;
       max-width: 400px;
@@ -6885,6 +6924,48 @@
       padding: 16px;
     }
 
+    /* Card variant — self-contained card with border, auto height, left-aligned search */
+    :host(.kr-table--card) {
+      height: auto;
+      /* overflow: visible; */
+      overflow: hidden;
+      /* border: 1px solid #e5e7eb; */
+      /* border-radius: 8px; */
+      border: 1px solid #c6c6cd;
+      border-radius: 12px;
+      background: #fff;
+    }
+
+    .card-header {
+      padding: 24px 24px 16px;
+    }
+
+    .card-header__title {
+      font-size: 18px;
+      font-weight: 600;
+      color: #1f2937;
+      margin: 0;
+    }
+
+    .card-header__description {
+      font-size: 14px;
+      color: #1f2937;
+      margin: 12px 0 0;
+    }
+
+    :host(.kr-table--card) .header {
+      margin: 0 24px;
+    }
+
+    :host(.kr-table--card) .wrapper {
+      flex: none;
+      overflow: visible;
+    }
+
+    :host(.kr-table--card) .content {
+      height: auto;
+    }
+
   `];
   __decorate$b([
       r$1()
@@ -6934,6 +7015,9 @@
   __decorate$b([
       n$1({ type: Object })
   ], exports.KRTable.prototype, "def", void 0);
+  __decorate$b([
+      n$1({ type: String, reflect: true })
+  ], exports.KRTable.prototype, "variant", void 0);
   exports.KRTable = __decorate$b([
       t$1('kr-table')
   ], exports.KRTable);