@timlassiter11/yatl 1.2.3 → 1.2.4

package/dist/index.d.mts

@@ -756,6 +756,7 @@ declare class YatlTable<T extends object = UnspecifiedRecord> extends LitElement
     static styles: lit.CSSResult[];
     private tableElement;
     private virtualizer?;
+    private get virtualizerRef();
     private resizeState;
     private dragColumn;
     private useYatlUi;
@@ -1044,6 +1045,14 @@ declare class YatlTable<T extends object = UnspecifiedRecord> extends LitElement
      */
     findRowIndex(field: NestedKeyOf<T>, value: unknown): number;
     updateRow(rowId: RowId, data: Partial<T>): void;
+    /**
+     * 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(): void;
     /**
      * Updates the data of a row at a specific original index.
      * @param index - The original index of the row to update.

package/dist/index.d.ts

@@ -756,6 +756,7 @@ declare class YatlTable<T extends object = UnspecifiedRecord> extends LitElement
     static styles: lit.CSSResult[];
     private tableElement;
     private virtualizer?;
+    private get virtualizerRef();
     private resizeState;
     private dragColumn;
     private useYatlUi;
@@ -1044,6 +1045,14 @@ declare class YatlTable<T extends object = UnspecifiedRecord> extends LitElement
      */
     findRowIndex(field: NestedKeyOf<T>, value: unknown): number;
     updateRow(rowId: RowId, data: Partial<T>): void;
+    /**
+     * 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(): void;
     /**
      * Updates the data of a row at a specific original index.
      * @param index - The original index of the row to update.

package/dist/index.js

@@ -407,6 +407,7 @@ var import_if_defined = require("lit/directives/if-defined.js");
 var import_repeat = require("lit/directives/repeat.js");
 var import_style_map = require("lit/directives/style-map.js");
 var import_virtualizer = require("@lit-labs/virtualizer");
+var import_virtualize = require("@lit-labs/virtualizer/virtualize.js");
 
 // src/table-controller/utils.ts
 function getCompareableValue(value) {
@@ -580,6 +581,7 @@ var YatlTableController = class extends TypedEventTarget {
     for (const column of columns) {
       this._columnDefinitionMap.set(column.field, column);
     }
+    this.createMetadata();
     this.requestUpdate("columns");
   }
   get displayColumns() {
@@ -1601,10 +1603,7 @@ var table_styles_default = import_lit2.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))
@@ -1623,6 +1622,10 @@ var table_styles_default = import_lit2.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))
@@ -1669,14 +1672,10 @@ var table_styles_default = import_lit2.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);
@@ -1702,10 +1701,18 @@ var table_styles_default = import_lit2.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);
     }
@@ -1973,7 +1980,7 @@ var YatlTable = class extends import_lit3.LitElement {
     // #endregion
     // #region --- Properties ---
     this._controller = new YatlTableController(this);
-    this.striped = true;
+    this.striped = false;
     this.sortable = true;
     this.resizable = true;
     this.enableVirtualScroll = false;
@@ -2137,6 +2144,11 @@ var YatlTable = class extends import_lit3.LitElement {
       this.toggleRowSelection(row, selected);
     };
   }
+  get virtualizerRef() {
+    if (this.virtualizer) {
+      return this.virtualizer[import_virtualize.virtualizerRef];
+    }
+  }
   get controller() {
     return this._controller;
   }
@@ -2524,6 +2536,23 @@ var YatlTable = class extends import_lit3.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.
@@ -2660,6 +2689,11 @@ var YatlTable = class extends import_lit3.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);
     }
@@ -2668,7 +2702,7 @@ var YatlTable = class extends import_lit3.LitElement {
         role="cell"
         part="cell body-cell cell-${column.field} ${userParts}"
         data-field=${column.field}
-        class="cell"
+        class=${(0, import_class_map.classMap)(classes)}
         title=${(0, import_if_defined.ifDefined)(value ? String(value) : void 0)}
         @click=${(event) => this.handleCellClick(event, row, column.field)}
       >