@timlassiter11/yatl 1.2.2 → 1.2.4

package/dist/index.mjs

@@ -358,6 +358,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { repeat } from "lit/directives/repeat.js";
 import { styleMap } from "lit/directives/style-map.js";
 import "@lit-labs/virtualizer";
+import { virtualizerRef } from "@lit-labs/virtualizer/virtualize.js";
 
 // src/table-controller/utils.ts
 function getCompareableValue(value) {
@@ -531,6 +532,7 @@ var YatlTableController = class extends TypedEventTarget {
     for (const column of columns) {
       this._columnDefinitionMap.set(column.field, column);
     }
+    this.createMetadata();
     this.requestUpdate("columns");
   }
   get displayColumns() {
@@ -1552,10 +1554,7 @@ var table_styles_default = css`
     );
 
     --table-header-text: var(--yatl-table-header-text, var(--yatl-text-1));
-    --table-header-bg: var(
-      --yatl-table-header-bg,
-      color-mix(in srgb, var(--yatl-color-mix) 4%, var(--table-bg))
-    );
+    --table-header-bg: var(--yatl-table-header-bg, var(--yatl-surface-lowered));
     --table-header-hover-bg: var(
       --yatl-table-header-hover-bg,
       color-mix(in srgb, var(--yatl-color-mix) 4%, var(--table-header-bg))
@@ -1574,6 +1573,10 @@ var table_styles_default = css`
       --yatl-table-row-hover-bg,
       var(--table-header-bg)
     );
+    --table-row-border-color: var(
+      --yatl-table-row-border-color,
+      var(--yatl-border-color-subtle)
+    );
     --table-row-stripe-bg: var(
       --yatl-table-row-stripe-bg,
       color-mix(in srbg, var(--yatl-color-mix) 3%, var(--table-bg))
@@ -1619,7 +1622,8 @@ var table_styles_default = css`
     .row {
       position: relative;
       background-color: var(--table-row-bg);
-      border-bottom: 1px solid var(--table-border-color);
+      /** Use box-shadow to mimic borders. It works better when virtualized */
+      box-shadow: inset 0 -1px 0 0 var(--table-row-border-color);
       transition: background-color 50ms;
     }
 
@@ -1635,7 +1639,7 @@ var table_styles_default = css`
     }
 
     .row:last-child {
-      border-bottom: none;
+      box-shadow: none;
     }
 
     .table:not(.resizing) .row {
@@ -1648,10 +1652,18 @@ var table_styles_default = css`
       padding: var(--table-cell-padding);
     }
 
+    .cell.is-number {
+      justify-content: flex-end;
+    }
+
     .table.resizing * {
       cursor: col-resize !important;
     }
 
+    .header {
+      background-color: var(--table-bg);
+    }
+
     .header .cell {
       padding: var(--table-header-padding);
     }
@@ -1681,7 +1693,7 @@ var table_styles_default = css`
   }
 
   @layer striped {
-    :host([striped]) .body .row:nth-child(even) {
+    :host([striped]) .row-even {
       background-color: var(--table-row-stripe-bg);
     }
   }
@@ -1919,7 +1931,7 @@ var YatlTable = class extends LitElement {
     // #endregion
     // #region --- Properties ---
     this._controller = new YatlTableController(this);
-    this.striped = true;
+    this.striped = false;
     this.sortable = true;
     this.resizable = true;
     this.enableVirtualScroll = false;
@@ -2083,6 +2095,11 @@ var YatlTable = class extends LitElement {
       this.toggleRowSelection(row, selected);
     };
   }
+  get virtualizerRef() {
+    if (this.virtualizer) {
+      return this.virtualizer[virtualizerRef];
+    }
+  }
   get controller() {
     return this._controller;
   }
@@ -2470,6 +2487,23 @@ var YatlTable = class extends LitElement {
   updateRow(rowId, data) {
     return this.controller.updateRow(rowId, data);
   }
+  /**
+   * This will force the underlying virtual scroller
+   * to re-calculate row sizes and positions and re-render.
+   * This is specifically here to fix virtual scroll tables
+   * that are affected by scale animations.
+   * E.g. when put in a yatl-dialog.
+   */
+  reflowVirtualizer() {
+    const virtualizerRef2 = this.virtualizerRef;
+    if (virtualizerRef2) {
+      virtualizerRef2._itemsChanged = true;
+      virtualizerRef2._rangeChanged = true;
+      virtualizerRef2._measureChildren();
+      virtualizerRef2._itemsChanged = false;
+      virtualizerRef2._rangeChanged = false;
+    }
+  }
   /**
    * Updates the data of a row at a specific original index.
    * @param index - The original index of the row to update.
@@ -2606,6 +2640,11 @@ var YatlTable = class extends LitElement {
     if (Array.isArray(userParts)) {
       userParts = userParts.join(" ");
     }
+    const isNumber = typeof value === "bigint" || typeof value === "number";
+    const classes = {
+      cell: true,
+      "is-number": isNumber
+    };
     if (typeof column.valueFormatter === "function") {
       value = column.valueFormatter(value, row);
     }
@@ -2614,7 +2653,7 @@ var YatlTable = class extends LitElement {
         role="cell"
         part="cell body-cell cell-${column.field} ${userParts}"
         data-field=${column.field}
-        class="cell"
+        class=${classMap(classes)}
         title=${ifDefined(value ? String(value) : void 0)}
         @click=${(event) => this.handleCellClick(event, row, column.field)}
       >
@@ -2660,7 +2699,12 @@ var YatlTable = class extends LitElement {
     if (Array.isArray(userParts)) {
       userParts = userParts.join(" ");
     }
-    const classes = { row: true, selected };
+    const classes = {
+      row: true,
+      selected,
+      "row-even": renderIndex % 2 === 0,
+      "row-odd": renderIndex % 2 !== 0
+    };
     const rowIndex = renderIndex + 1;
     return html2`
       <div
@@ -2905,7 +2949,7 @@ __decorateClass([
   property({ type: Boolean, attribute: "enable-column-reorder" })
 ], YatlTable.prototype, "enableColumnReorder", 2);
 __decorateClass([
-  property({ type: Boolean })
+  property({ type: Boolean, attribute: "enable-row-number-column" })
 ], YatlTable.prototype, "enableRowNumberColumn", 2);
 __decorateClass([
   property({ type: Boolean, attribute: "enable-footer" })