@timlassiter11/yatl 1.2.2 → 1.2.4

package/dist/index.d.mts

@@ -72,7 +72,7 @@ type ColumnRole = 'display' | 'internal';
  * @param field - The field of the column.
  * @param row - The row data.
  */
-type CellPartsCallback<T> = (value: unknown, field: NestedKeyOf<T>, row: T) => string | string[];
+type CellPartsCallback<T> = (value: unknown, field: NestedKeyOf<T>, row: T) => string | string[] | undefined;
 /**
  * Callback for providing the full contents of a rendered cell.
  * @param value - The value of the cell.
@@ -234,7 +234,7 @@ type RowSelectionMethod = 'single' | 'multi';
  * @param row - The row data.
  * @returns the part string or list of part strings that should be added to this row.
  */
-type RowPartsCallback<T> = (row: T) => string | string[];
+type RowPartsCallback<T> = (row: T) => string | string[] | undefined;
 /**
  * Options used to configure what state information
  * should be saved and restored automatically.
@@ -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

@@ -72,7 +72,7 @@ type ColumnRole = 'display' | 'internal';
  * @param field - The field of the column.
  * @param row - The row data.
  */
-type CellPartsCallback<T> = (value: unknown, field: NestedKeyOf<T>, row: T) => string | string[];
+type CellPartsCallback<T> = (value: unknown, field: NestedKeyOf<T>, row: T) => string | string[] | undefined;
 /**
  * Callback for providing the full contents of a rendered cell.
  * @param value - The value of the cell.
@@ -234,7 +234,7 @@ type RowSelectionMethod = 'single' | 'multi';
  * @param row - The row data.
  * @returns the part string or list of part strings that should be added to this row.
  */
-type RowPartsCallback<T> = (row: T) => string | string[];
+type RowPartsCallback<T> = (row: T) => string | string[] | undefined;
 /**
  * Options used to configure what state information
  * should be saved and restored automatically.
@@ -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))
@@ -1668,7 +1671,8 @@ var table_styles_default = import_lit2.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;
     }
 
@@ -1684,7 +1688,7 @@ var table_styles_default = import_lit2.css`
     }
 
     .row:last-child {
-      border-bottom: none;
+      box-shadow: none;
     }
 
     .table:not(.resizing) .row {
@@ -1697,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);
     }
@@ -1730,7 +1742,7 @@ var table_styles_default = import_lit2.css`
   }
 
   @layer striped {
-    :host([striped]) .body .row:nth-child(even) {
+    :host([striped]) .row-even {
       background-color: var(--table-row-stripe-bg);
     }
   }
@@ -1968,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;
@@ -2132,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;
   }
@@ -2519,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.
@@ -2655,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);
     }
@@ -2663,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)}
       >
@@ -2709,7 +2748,12 @@ var YatlTable = class extends import_lit3.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 import_lit3.html`
       <div
@@ -2954,7 +2998,7 @@ __decorateClass([
   (0, import_decorators.property)({ type: Boolean, attribute: "enable-column-reorder" })
 ], YatlTable.prototype, "enableColumnReorder", 2);
 __decorateClass([
-  (0, import_decorators.property)({ type: Boolean })
+  (0, import_decorators.property)({ type: Boolean, attribute: "enable-row-number-column" })
 ], YatlTable.prototype, "enableRowNumberColumn", 2);
 __decorateClass([
   (0, import_decorators.property)({ type: Boolean, attribute: "enable-footer" })