@timlassiter11/yatl 1.2.3 → 1.2.5

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() {
@@ -973,7 +975,7 @@ var YatlTableController = class extends TypedEventTarget {
           if (isDisplayColumn(column) && typeof column.valueFormatter === "function") {
             value = column.valueFormatter(value, row);
           }
-          value = String(value).replace('"', '""');
+          value = String(value ?? "").replace('"', '""');
           list.push(`"${value}"`);
         }
       }
@@ -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))
@@ -1620,14 +1623,10 @@ var table_styles_default = css`
       position: relative;
       background-color: var(--table-row-bg);
       /** Use box-shadow to mimic borders. It works better when virtualized */
-      box-shadow: inset 0 -1px 0 0 var(--table-border-color);
+      box-shadow: inset 0 -1px 0 0 var(--table-row-border-color);
       transition: background-color 50ms;
     }
 
-    .row-number-cell {
-      box-shadow: inset 0 -1px 0 0 var(--table-border-color);
-    }
-
     .row.header-row {
       background-color: var(--table-header-bg);
       border-bottom: 1px solid var(--table-border-color);
@@ -1653,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);
     }
@@ -1924,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;
@@ -2088,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;
   }
@@ -2475,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.
@@ -2611,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);
     }
@@ -2619,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)}
       >