@timlassiter11/yatl 1.0.3 → 1.0.5

package/dist/index.mjs

@@ -193,11 +193,8 @@ function widthsToGridTemplates(widths, defaultWidth = "1fr") {
 function isCompareable(value) {
   return typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value instanceof Date;
 }
-function isInternalColumn(col) {
-  return col.role === "internal";
-}
 function isDisplayColumn(col) {
-  return col.role !== "internal";
+  return col?.role !== "internal";
 }
 
 // src/yatl-table.ts
@@ -314,7 +311,8 @@ var yatl_table_styles_default = css`
     border-bottom: none;
   }
 
-  .header .cell::after,
+  .header.reorderable .cell::after,
+  .header .cell.sortable::after,
   .row:not(.header)::after {
     content: '';
     position: absolute;
@@ -471,7 +469,7 @@ var yatl_table_styles_default = css`
     flex-shrink: 0;
 
     position: sticky;
-    bottom: 0;
+    inset: 0;
     z-index: var(--header-z-index);
   }
 
@@ -542,7 +540,8 @@ var YatlTable = class extends LitElement {
     this._enableSearchTokenization = false;
     this._enableSearchScoring = false;
     this._columns = [];
-    this._columnStates = [];
+    this._columnDefinitionMap = /* @__PURE__ */ new Map();
+    this._columnStateMap = /* @__PURE__ */ new Map();
     this._columnOrder = [];
     this._storageOptions = null;
     this._data = [];
@@ -582,13 +581,11 @@ var YatlTable = class extends LitElement {
     // #endregion
     // #region --- Event Handlers ---
     this.handleHeaderClicked = (event, column) => {
-      const target = event.target;
-      const currentTarget = event.currentTarget;
-      if (!currentTarget.classList.contains("sortable") || target.classList.contains("resizer")) {
+      if (this.resizeState) {
         return;
       }
       const multiSort = event.shiftKey;
-      const state2 = this.getColumnState(column.field);
+      const state2 = this.getOrCreateColumnState(column.field);
       if (!state2?.sort) {
         this.sort(column.field, "asc", !multiSort);
       } else if (state2.sort.order === "asc") {
@@ -615,11 +612,13 @@ var YatlTable = class extends LitElement {
         );
       });
     };
-    this.handleResizeMouseUp = (_event) => {
+    this.handleResizeMouseUp = (event) => {
       window.removeEventListener("mousemove", this.handleResizeMouseMove);
       window.removeEventListener("mouseup", this.handleResizeMouseUp);
       document.body.style.cursor = "";
       if (this.resizeState?.active) {
+        event.preventDefault();
+        event.stopPropagation();
         const finalWidth = parseFloat(
           this.resizeState.currentWidths[this.resizeState.columnIndex]
         );
@@ -629,7 +628,9 @@ var YatlTable = class extends LitElement {
         this.columnWidths = columnWidths;
         this.dispatchEvent(new YatlColumnResizeEvent(state2.field, state2.width));
       }
-      this.resizeState = null;
+      setTimeout(() => {
+        this.resizeState = null;
+      });
     };
     this.handleDragColumnStart = (event, field) => {
       const target = event.target;
@@ -672,7 +673,7 @@ var YatlTable = class extends LitElement {
       const dropIndex = newColumnOrder.findIndex((col) => col === field);
       if (dragIndex > -1 && dropIndex > -1) {
         const [draggedColumn] = newColumnOrder.splice(dragIndex, 1);
-        const droppedColumn = findColumn(field, this.columns);
+        const droppedColumn = this.getColumn(field);
         if (!droppedColumn) return;
         newColumnOrder.splice(dropIndex, 0, draggedColumn);
         const reorderEvent = new YatlColumnReorderEvent(
@@ -726,17 +727,24 @@ var YatlTable = class extends LitElement {
     const oldValue = this._columns;
     this._columns = columns;
     this.filterDirty = true;
+    this._columnDefinitionMap = /* @__PURE__ */ new Map();
+    for (const column of this.columns) {
+      this._columnDefinitionMap.set(column.field, column);
+    }
     this.requestUpdate("columns", oldValue);
   }
+  get displayColumns() {
+    return this._columns.filter(isDisplayColumn);
+  }
   get columnOrder() {
     const finalOrder = /* @__PURE__ */ new Set();
     for (const field of this._columnOrder) {
-      const col = findColumn(field, this.getColumns("display"));
+      const col = this.getDisplayColumn(field);
       if (col) {
         finalOrder.add(field);
       }
     }
-    for (const col of this.getColumns("display")) {
+    for (const col of this.displayColumns) {
       if (!finalOrder.has(col.field)) {
         finalOrder.add(col.field);
       }
@@ -754,15 +762,15 @@ var YatlTable = class extends LitElement {
   get columnVisibility() {
     return this.columnOrder.map((field) => ({
       field,
-      visible: this.getColumnState(field).visible
+      visible: this.getOrCreateColumnState(field).visible
     }));
   }
   set columnVisibility(columns) {
     const oldValue = this.columnVisibility;
     let changed = false;
     for (const column of columns) {
-      const columnState = this.getColumnState(column.field);
-      if (columnState && columnState.visible !== column.visible) {
+      const columnState = this.getOrCreateColumnState(column.field);
+      if (columnState.visible !== column.visible) {
         changed = true;
         columnState.visible = column.visible;
       }
@@ -774,7 +782,7 @@ var YatlTable = class extends LitElement {
   }
   get columnSort() {
     return this.columnOrder.map((field) => {
-      const sortState = this.getColumnState(field).sort;
+      const sortState = this.getOrCreateColumnState(field).sort;
       return {
         field,
         // We need to make a copy of sort state so
@@ -787,7 +795,7 @@ var YatlTable = class extends LitElement {
     const oldValue = this.columnSort;
     let changed = false;
     for (const column of columns) {
-      const columnState = this.getColumnState(column.field);
+      const columnState = this.getOrCreateColumnState(column.field);
       if (columnState && (columnState.sort?.order !== column.sort?.order || columnState.sort?.priority !== column.sort?.priority)) {
         changed = true;
         columnState.sort = column.sort;
@@ -802,15 +810,15 @@ var YatlTable = class extends LitElement {
   get columnWidths() {
     return this.columnOrder.map((field) => ({
       field,
-      width: this.getColumnState(field).width
+      width: this.getOrCreateColumnState(field).width
     }));
   }
   set columnWidths(columns) {
     const oldValue = this.columnWidths;
     let changed = false;
     for (const column of columns) {
-      const columnState = this.getColumnState(column.field);
-      if (columnState && columnState.width !== column.width) {
+      const columnState = this.getOrCreateColumnState(column.field);
+      if (columnState.width !== column.width) {
         changed = true;
         columnState.width = column.width;
       }
@@ -894,6 +902,15 @@ var YatlTable = class extends LitElement {
   }
   // #endregion
   // #region --- Public Methods ---
+  getColumn(field) {
+    return this._columnDefinitionMap.get(field);
+  }
+  getDisplayColumn(field) {
+    const column = this._columnDefinitionMap.get(field);
+    if (column && isDisplayColumn(column)) {
+      return column;
+    }
+  }
   /**
    * Gets a copy of the current state of the table.
    */
@@ -903,7 +920,7 @@ var YatlTable = class extends LitElement {
       filters: this.filters,
       columnOrder: this.columnOrder,
       columns: this.columns.map((column) => {
-        const state2 = this.getColumnState(column.field);
+        const state2 = this.getOrCreateColumnState(column.field);
         return {
           field: column.field,
           visible: state2.visible,
@@ -928,10 +945,8 @@ var YatlTable = class extends LitElement {
       this.columnOrder = state2.columnOrder;
     }
     if ("columns" in state2 && state2.columns !== void 0) {
-      const newColumnStates = [];
       for (const newState of state2.columns) {
-        const currentState = this.getColumnState(newState.field);
-        newColumnStates.push(currentState);
+        const currentState = this.getOrCreateColumnState(newState.field);
         if (!newState) {
           continue;
         }
@@ -945,7 +960,6 @@ var YatlTable = class extends LitElement {
           currentState.width = newState.width;
         }
       }
-      this._columnStates = newColumnStates;
       this.requestUpdate();
     }
   }
@@ -1005,15 +1019,15 @@ var YatlTable = class extends LitElement {
       return;
     }
     state2.visible = visible;
-    this.columnVisibility = visibilityStates;
+    this.columnVisibility = [...visibilityStates];
   }
   /**
    * Toggles the visibility of hte specified column
    * @param field - The field name of the column to toggle.
    */
   toggleColumnVisibility(field) {
-    const state2 = this.getColumnState(field);
-    this.setColumnVisibility(field, !state2);
+    const state2 = this.getOrCreateColumnState(field);
+    this.setColumnVisibility(field, !state2.visible);
   }
   /**
    * Shows the specified column
@@ -1036,18 +1050,16 @@ var YatlTable = class extends LitElement {
    */
   export(filename, all = false) {
     const data = all ? this.data : this.filteredData;
-    const rows = [...data.values()];
-    const columnData = this.getColumnData(this.getColumns("display"));
-    const csvHeaders = columnData.filter(
-      (col) => all || isDisplayColumn(col.options) && col.state?.visible
-    ).map((col) => `"${col.options.title}"`).join(",");
-    const csvRows = rows.map((row) => {
+    const columnData = this.displayColumns;
+    const csvHeaders = columnData.filter((column) => all || this.getOrCreateColumnState(column.field).visible).map((column) => `"${column.title}"`).join(",");
+    const csvRows = data.map((row) => {
       const list = [];
-      for (const col of columnData) {
-        let value = getNestedValue(row, col.field);
-        if (all || col.state.visible) {
-          if (typeof col.options.valueFormatter === "function") {
-            value = col.options.valueFormatter(value, row);
+      for (const column of columnData) {
+        const state2 = this.getOrCreateColumnState(column.field);
+        let value = getNestedValue(row, column.field);
+        if (all || state2.visible) {
+          if (typeof column.valueFormatter === "function") {
+            value = column.valueFormatter(value, row);
           }
           value = String(value).replace('"', '""');
           list.push(`"${value}"`);
@@ -1200,9 +1212,12 @@ var YatlTable = class extends LitElement {
         ></div>` : nothing;
   }
   renderHeaderCell(field) {
-    const column = findColumn(field, this.getColumns("display"));
-    const state2 = this.getColumnState(column.field);
-    if (state2.visible == false) {
+    const column = this.getDisplayColumn(field);
+    if (!column) {
+      return nothing;
+    }
+    const state2 = this.getOrCreateColumnState(field);
+    if (!state2.visible) {
       return nothing;
     }
     return html2`
@@ -1234,8 +1249,13 @@ var YatlTable = class extends LitElement {
     `;
   }
   renderHeader() {
+    const classes = {
+      "header": true,
+      "row": true,
+      "reorderable": this.enableColumnReorder
+    };
     return html2`
-      <div part="header" class="header row">
+      <div part="header" class=${classMap(classes)}>
         ${this.columnOrder.map((field) => this.renderHeaderCell(field))}
       </div>
     `;
@@ -1251,11 +1271,14 @@ var YatlTable = class extends LitElement {
     return this.enableSearchHighlight && indices ? highlightText(String(value), indices[column.field]) : value;
   }
   renderCell(field, row) {
-    const column = findColumn(field, this.getColumns("display"));
-    const state2 = this.getColumnState(column.field);
-    if (!state2.visible) {
+    const column = this.getDisplayColumn(field);
+    if (!column) {
       return nothing;
     }
+    const state2 = this.getOrCreateColumnState(field);
+    if (!state2.visible) {
+      return;
+    }
     let value = getNestedValue(row, column.field);
     let userParts = column.cellParts?.call(this, value, column.field, row);
     if (Array.isArray(userParts)) {
@@ -1529,8 +1552,8 @@ var YatlTable = class extends LitElement {
           return false;
         }
       } else {
-        const col = findColumn(field, this.columns);
-        const filterCallback = col ? col.filter : void 0;
+        const column = this.getColumn(field);
+        const filterCallback = column ? column.filter : void 0;
         if (!this.filterField(value, filter, filterCallback)) {
           return false;
         }
@@ -1539,8 +1562,8 @@ var YatlTable = class extends LitElement {
     return true;
   }
   filterRows() {
-    const columnData = this.getColumnData(this.columns);
-    const fields = columnData.filter((col) => col.options.searchable).map((c) => c.field);
+    const columnData = [...this.columns];
+    const fields = columnData.filter((column) => column.searchable).map((column) => column.field);
     this._filteredData = this.data.filter((row, index) => {
       const metadata = this.rowMetadata.get(row);
       metadata.searchScore = 0;
@@ -1579,25 +1602,18 @@ var YatlTable = class extends LitElement {
   // #region --- Sort Methods ---
   compareRows(a, b, field) {
     let aValue, bValue;
-    const columnData = findColumn(
-      field,
-      this.getColumnData(this.getColumns("display"))
-    );
-    if (!columnData.state.sort) {
+    const state2 = this.getOrCreateColumnState(field);
+    if (!state2.sort) {
       return 0;
     }
     const aMetadata = this.rowMetadata.get(a);
     const bMetadata = this.rowMetadata.get(b);
-    if (columnData.state.sort?.order === "asc") {
-      aValue = aMetadata.sortValues[columnData.field];
-      bValue = bMetadata.sortValues[columnData.field];
+    if (state2.sort?.order === "asc") {
+      aValue = aMetadata.sortValues[field];
+      bValue = bMetadata.sortValues[field];
     } else {
-      aValue = bMetadata.sortValues[columnData.field];
-      bValue = aMetadata.sortValues[columnData.field];
-    }
-    if (typeof columnData.options.sorter === "function") {
-      const ret = columnData.options.sorter(aValue, bValue);
-      if (ret !== 0) return ret;
+      aValue = bMetadata.sortValues[field];
+      bValue = aMetadata.sortValues[field];
     }
     const aIsNull = aValue == null;
     const bIsNull = bValue == null;
@@ -1612,7 +1628,7 @@ var YatlTable = class extends LitElement {
       this.filterRows();
       return;
     }
-    const sortedColumns = this.getColumnData(this.columns).filter((col) => col.state.visible && col.state.sort).sort((a, b) => b.state.sort.priority - a.state.sort.priority);
+    const sortedStates = [...this._columnStateMap.values()].filter((state2) => state2.visible && state2.sort).sort((a, b) => b.sort.priority - a.sort.priority);
     this._filteredData = this._filteredData.toSorted((a, b) => {
       const aMetadata = this.rowMetadata.get(a);
       const bMetadata = this.rowMetadata.get(b);
@@ -1622,8 +1638,8 @@ var YatlTable = class extends LitElement {
         if (aValue > bValue) return -1;
         if (aValue < bValue) return 1;
       }
-      for (const col of sortedColumns) {
-        const comp = this.compareRows(a, b, col.field);
+      for (const state2 of sortedStates) {
+        const comp = this.compareRows(a, b, state2.field);
         if (comp !== 0) {
           return comp;
         }
@@ -1647,16 +1663,14 @@ var YatlTable = class extends LitElement {
       this.rowMetadata.set(row, metadata);
       for (const column of this.columns) {
         const value = getNestedValue(row, column.field);
-        if (isDisplayColumn(column)) {
-          if (typeof column.sortValue === "function") {
-            metadata.sortValues[column.field] = column.sortValue(value);
-          } else if (typeof value === "string") {
-            metadata.sortValues[column.field] = value.toLocaleLowerCase();
-          } else if (isCompareable(value)) {
-            metadata.sortValues[column.field] = value;
-          } else {
-            metadata.sortValues[column.field] = String(value);
-          }
+        if (typeof column.sorter === "function") {
+          metadata.sortValues[column.field] = column.sorter(value);
+        } else if (typeof value === "string") {
+          metadata.sortValues[column.field] = value.toLocaleLowerCase();
+        } else if (isCompareable(value)) {
+          metadata.sortValues[column.field] = value;
+        } else {
+          metadata.sortValues[column.field] = String(value);
         }
         if (typeof value === "string") {
           metadata.searchValues[column.field] = value.toLocaleLowerCase();
@@ -1682,29 +1696,12 @@ var YatlTable = class extends LitElement {
       this.queryTokens.push(...this.searchTokenizer(this.searchQuery));
     }
   }
-  getColumns(kind = "all") {
-    switch (kind) {
-      case "display":
-        return this.columns.filter(isDisplayColumn);
-      case "internal":
-        return this.columns.filter(isInternalColumn);
-      case "all":
-        return this.columns;
-    }
-  }
-  getColumnData(columns) {
-    return columns.map((column) => ({
-      field: column.field,
-      options: column,
-      state: this.getColumnState(column.field)
-    }));
-  }
   /**
    * Gets the width of each column in the
    * order they will appear in the grid.
    */
   getGridWidths() {
-    return this.columnOrder.map((field) => this.getColumnState(field)).filter((state2) => state2.visible).map((state2) => state2.width);
+    return this.columnOrder.map((field) => this.getOrCreateColumnState(field)).filter((state2) => state2.visible).map((state2) => state2.width);
   }
   scheduleSave() {
     window.clearTimeout(this.saveTimer);
@@ -1712,16 +1709,20 @@ var YatlTable = class extends LitElement {
       this.saveStateToStorage();
     }, STATE_SAVE_DEBOUNCE);
   }
-  getColumnState(field) {
-    let state2 = findColumn(field, this._columnStates);
+  /**
+   * Gets the column state associated with the given field.
+   * If the state doesn't exist, a default state will be created.
+   */
+  getOrCreateColumnState(field) {
+    let state2 = this._columnStateMap.get(field);
     if (!state2) {
       state2 = {
         field,
         visible: true,
-        sort: null,
-        width: null
+        width: null,
+        sort: null
       };
-      this._columnStates.push(state2);
+      this._columnStateMap.set(field, state2);
     }
     return state2;
   }
@@ -1815,7 +1816,7 @@ var YatlTable = class extends LitElement {
     this.tableElement.querySelectorAll(".header .cell").forEach((element) => {
       const field2 = element.dataset.field;
       if (field2) {
-        const state2 = this.getColumnState(field2);
+        const state2 = this.getOrCreateColumnState(field2);
         if (state2) {
           state2.width = element.getBoundingClientRect().width;
         }
@@ -1943,7 +1944,6 @@ export {
   YatlStateChangeEvent,
   YatlTable,
   createRegexTokenizer,
-  findColumn,
   whitespaceTokenizer
 };
 //# sourceMappingURL=index.mjs.map