@timlassiter11/yatl 1.0.0 → 1.0.1

package/dist/index.mjs

@@ -106,6 +106,14 @@ var _YatlSearchEvent = class _YatlSearchEvent extends YatlEvent {
 };
 _YatlSearchEvent.EVENT_NAME = "yatl-search";
 var YatlSearchEvent = _YatlSearchEvent;
+var _YatlStateChangeEvent = class _YatlStateChangeEvent extends YatlEvent {
+  constructor(state2, triggers) {
+    super(_YatlStateChangeEvent.EVENT_NAME, { state: state2, triggers });
+    this.triggers = triggers;
+  }
+};
+_YatlStateChangeEvent.EVENT_NAME = "yatl-state-change";
+var YatlStateChangeEvent = _YatlStateChangeEvent;
 
 // src/utils.ts
 import { html } from "lit";
@@ -182,23 +190,6 @@ function highlightText(text, ranges) {
 function widthsToGridTemplates(widths, defaultWidth = "1fr") {
   return widths.map((width) => width ? `${width}px` : defaultWidth);
 }
-function didSortStateChange(newState, oldState) {
-  if (!oldState) {
-    return true;
-  }
-  const allKeys = /* @__PURE__ */ new Set([
-    ...oldState.map((s) => s.field),
-    ...newState.map((s) => s.field)
-  ]);
-  for (const key of allKeys) {
-    const oldSort = findColumn(key, oldState)?.sortState;
-    const newSort = findColumn(key, newState)?.sortState;
-    if (oldSort?.order !== newSort?.order || oldSort?.priority !== newSort?.priority) {
-      return true;
-    }
-  }
-  return false;
-}
 function isCompareable(value) {
   return typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value instanceof Date;
 }
@@ -524,10 +515,11 @@ var DEFAULT_STORAGE_OPTIONS = {
 var SAVE_TRIGGERS = /* @__PURE__ */ new Set([
   "searchQuery",
   "filters",
-  // Covers column order
   "columns",
-  // Covers sort, visibility, and width
-  "columnStates",
+  "columnSort",
+  "columnOrder",
+  "columnVisibility",
+  "columnWidths",
   "storageOptions"
 ]);
 var MATCH_WEIGHTS = {
@@ -544,6 +536,7 @@ var YatlTable = class extends LitElement {
     this._enableSearchScoring = false;
     this._columns = [];
     this._columnStates = [];
+    this._columnOrder = [];
     this._storageOptions = null;
     this._data = [];
     this._searchQuery = "";
@@ -586,12 +579,12 @@ var YatlTable = class extends LitElement {
         return;
       }
       const multiSort = event.shiftKey;
-      const state2 = findColumn(column.field, this._columnStates);
-      if (!state2?.sortState) {
+      const state2 = this.getColumnState(column.field);
+      if (!state2?.sort) {
         this.sort(column.field, "asc", !multiSort);
-      } else if (state2.sortState.order === "asc") {
+      } else if (state2.sort.order === "asc") {
         this.sort(column.field, "desc", !multiSort);
-      } else if (state2.sortState.order) {
+      } else if (state2.sort.order) {
         this.sort(column.field, null, !multiSort);
       }
     };
@@ -621,18 +614,16 @@ var YatlTable = class extends LitElement {
         const finalWidth = parseFloat(
           this.resizeState.currentWidths[this.resizeState.columnIndex]
         );
-        const columnStates = this.columnStates;
-        const state2 = findColumn(this.resizeState.columnField, columnStates);
+        const columnWidths = this.columnWidths;
+        const state2 = findColumn(this.resizeState.columnField, columnWidths);
         state2.width = finalWidth;
-        this.columnStates = columnStates;
+        this.columnWidths = columnWidths;
         this.dispatchEvent(new YatlColumnResizeEvent(state2.field, state2.width));
       }
       this.resizeState = null;
     };
     this.handleDragColumnStart = (event, field) => {
       const target = event.target;
-      console.log("Starting drag event");
-      console.log(target);
       if (target?.classList.contains("resizer")) {
         event.preventDefault();
         return;
@@ -667,24 +658,23 @@ var YatlTable = class extends LitElement {
       }
       event.preventDefault();
       event.stopPropagation();
-      const columns = [...this.columns];
-      const dragIndex = columns.findIndex((col) => col.field === this.dragColumn);
-      const dropIndex = columns.findIndex((col) => col.field === field);
+      const newColumnOrder = [...this.columnOrder];
+      const dragIndex = newColumnOrder.findIndex((col) => col === this.dragColumn);
+      const dropIndex = newColumnOrder.findIndex((col) => col === field);
       if (dragIndex > -1 && dropIndex > -1) {
-        const [draggedColumn] = columns.splice(dragIndex, 1);
+        const [draggedColumn] = newColumnOrder.splice(dragIndex, 1);
         const droppedColumn = findColumn(field, this.columns);
         if (!droppedColumn) return;
-        columns.splice(dropIndex, 0, draggedColumn);
-        const newColumnOrder = columns.map((col) => col.field);
+        newColumnOrder.splice(dropIndex, 0, draggedColumn);
         const reorderEvent = new YatlColumnReorderEvent(
-          draggedColumn.field,
+          draggedColumn,
           droppedColumn.field,
           newColumnOrder
         );
         if (!this.dispatchEvent(reorderEvent)) {
           return;
         }
-        this.setColumnOrder(newColumnOrder);
+        this.columnOrder = [...newColumnOrder];
       }
     };
     this.handleDragColumnEnd = () => {
@@ -726,26 +716,95 @@ var YatlTable = class extends LitElement {
     }
     const oldValue = this._columns;
     this._columns = columns;
-    this.createColumnStates();
     this.filterDirty = true;
     this.requestUpdate("columns", oldValue);
   }
-  get columnStates() {
-    return this._columnStates.map((state2) => ({
-      ...state2,
-      sortState: state2.sortState ? { ...state2.sortState } : void 0
+  get columnOrder() {
+    const finalOrder = /* @__PURE__ */ new Set();
+    for (const field of this._columnOrder) {
+      const col = findColumn(field, this.columns);
+      if (col) {
+        finalOrder.add(field);
+      }
+    }
+    for (const col of this.columns) {
+      if (!finalOrder.has(col.field)) {
+        finalOrder.add(col.field);
+      }
+    }
+    return [...finalOrder];
+  }
+  set columnOrder(columns) {
+    if (this._columnOrder === columns) {
+      return;
+    }
+    const oldValue = this._columnOrder;
+    this._columnOrder = [...columns];
+    this.requestUpdate("columnOrder", oldValue);
+  }
+  get columnVisibility() {
+    return this.columnOrder.map((field) => ({
+      field,
+      visible: this.getColumnState(field).visible
     }));
   }
-  set columnStates(states) {
-    if (this._columnStates === states) {
+  set columnVisibility(columns) {
+    const oldValue = this.columnVisibility;
+    let changed = false;
+    for (const column of columns) {
+      const state2 = this.getColumnState(column.field);
+      if (state2 && state2.visible !== column.visible) {
+        changed = true;
+        state2.visible = column.visible;
+      }
+    }
+    if (!changed) {
       return;
     }
-    const oldValue = this._columnStates;
-    this._columnStates = states;
-    if (didSortStateChange(this._columnStates, oldValue)) {
-      this.sortDirty = true;
+    this.requestUpdate("columnVisibility", oldValue);
+  }
+  get columnSort() {
+    return this.columnOrder.map((field) => ({
+      field,
+      sort: this.getColumnState(field).sort
+    }));
+  }
+  set columnSort(columns) {
+    const oldValue = this.columnSort;
+    let changed = false;
+    for (const column of columns) {
+      const state2 = this.getColumnState(column.field);
+      if (state2 && (state2.sort?.order !== column.sort?.order || state2.sort?.priority !== column.sort?.priority)) {
+        changed = true;
+        state2.sort = column.sort;
+      }
+    }
+    if (!changed) {
+      return;
     }
-    this.requestUpdate("columnStates", oldValue);
+    this.sortDirty = true;
+    this.requestUpdate("columnSort", oldValue);
+  }
+  get columnWidths() {
+    return this.columnOrder.map((field) => ({
+      field,
+      width: this.getColumnState(field).width
+    }));
+  }
+  set columnWidths(columns) {
+    const oldValue = this.columnWidths;
+    let changed = false;
+    for (const column of columns) {
+      const state2 = this.getColumnState(column.field);
+      if (state2 && state2.width !== column.width) {
+        changed = true;
+        state2.width = column.width;
+      }
+    }
+    if (!changed) {
+      return;
+    }
+    this.requestUpdate("columnWidths", oldValue);
   }
   get searchQuery() {
     return this._searchQuery;
@@ -837,18 +896,17 @@ var YatlTable = class extends LitElement {
    * Gets a copy of the current state of the table.
    */
   getState() {
-    const states = this.columnStates;
     return {
       searchQuery: this.searchQuery,
       filters: this.filters,
-      columnOrder: this.columns.map((column) => column.field),
+      columnOrder: this.columnOrder,
       columns: this.columns.map((column) => {
-        const columnState = findColumn(column.field, states);
+        const state2 = this.getColumnState(column.field);
         return {
           field: column.field,
-          visible: columnState?.visible ?? true,
-          sortState: columnState?.sortState,
-          width: columnState?.width
+          visible: state2.visible,
+          sort: state2.sort,
+          width: state2.width
         };
       })
     };
@@ -865,15 +923,12 @@ var YatlTable = class extends LitElement {
       this.filters = state2.filters;
     }
     if ("columnOrder" in state2 && state2.columnOrder !== void 0) {
-      this.setColumnOrder(state2.columnOrder);
+      this.columnOrder = state2.columnOrder;
     }
     if ("columns" in state2 && state2.columns !== void 0) {
       const newColumnStates = [];
       for (const newState of state2.columns) {
-        const currentState = findColumn(newState.field, this._columnStates) ?? {
-          field: newState.field,
-          visible: true
-        };
+        const currentState = this.getColumnState(newState.field);
         newColumnStates.push(currentState);
         if (!newState) {
           continue;
@@ -881,14 +936,15 @@ var YatlTable = class extends LitElement {
         if ("visible" in newState && newState.visible !== void 0) {
           currentState.visible = newState.visible;
         }
-        if ("sortState" in newState && newState.sortState !== void 0) {
-          currentState.sortState = newState.sortState;
+        if ("sort" in newState && newState.sort !== void 0) {
+          currentState.sort = newState.sort;
         }
         if ("width" in newState && newState.width !== void 0) {
           currentState.width = newState.width;
         }
       }
-      this.columnStates = newColumnStates;
+      this._columnStates = newColumnStates;
+      this.requestUpdate();
     }
   }
   /**
@@ -899,35 +955,35 @@ var YatlTable = class extends LitElement {
    * @param clear - Clear all other sorting
    */
   sort(field, order, clear = true) {
-    const columnStates = this.columnStates;
-    const state2 = findColumn(field, columnStates);
+    const sortStates = this.columnSort;
+    const state2 = findColumn(field, sortStates);
     if (!state2) {
       throw new Error(`Cannot get options for non-existent column "${field}"`);
     }
-    if (order === state2.sortState?.order) {
+    if (order === state2.sort?.order) {
       return;
     }
     if (!this.dispatchEvent(new YatlSortEvent(field, order))) {
       return;
     }
-    if (order && !state2.sortState) {
-      const priorities = columnStates.map((col) => col.sortState?.priority).filter((priority2) => priority2 !== void 0);
+    if (order && !state2.sort) {
+      const priorities = sortStates.map((col) => col.sort?.priority).filter((priority2) => priority2 !== void 0);
       const maxPriority = this.columns.length + 1;
       const priority = Math.min(maxPriority, ...priorities) - 1;
-      state2.sortState = { order, priority };
-    } else if (order && state2.sortState) {
-      state2.sortState.order = order;
+      state2.sort = { order, priority };
+    } else if (order && state2.sort) {
+      state2.sort.order = order;
     } else {
-      state2.sortState = null;
+      state2.sort = null;
     }
     if (clear) {
-      for (const state3 of columnStates) {
+      for (const state3 of sortStates) {
         if (state3.field !== field) {
-          state3.sortState = null;
+          state3.sort = null;
         }
       }
     }
-    this.columnStates = columnStates;
+    this.columnSort = sortStates;
   }
   /**
    * Sets the visibility of a specified column.
@@ -935,8 +991,8 @@ var YatlTable = class extends LitElement {
    * @param visible - `true` to show the column, `false` to hide it.
    */
   setColumnVisibility(field, visible) {
-    const columnStates = this.columnStates;
-    const state2 = findColumn(field, columnStates);
+    const visibilityStates = this.columnVisibility;
+    const state2 = findColumn(field, visibilityStates);
     if (!state2) {
       throw new Error(`Cannot get options for non-existent column "${field}"`);
     }
@@ -947,14 +1003,14 @@ var YatlTable = class extends LitElement {
       return;
     }
     state2.visible = visible;
-    this.columnStates = columnStates;
+    this.columnVisibility = visibilityStates;
   }
   /**
    * Toggles the visibility of hte specified column
    * @param field - The field name of the column to toggle.
    */
   toggleColumnVisibility(field) {
-    const state2 = findColumn(field, this._columnStates);
+    const state2 = this.getColumnState(field);
     this.setColumnVisibility(field, !state2);
   }
   /**
@@ -1059,27 +1115,6 @@ var YatlTable = class extends LitElement {
       this.tableElement.scrollTop = px;
     }
   }
-  /**
-   * Sets the display order of the columns in the table.
-   *
-   * @param fields - An array of field names representing the new order of columns. Columns not included in the array will be placed at the end.
-   * @throws {TypeError} If `fields` is not an array.
-   */
-  setColumnOrder(fields) {
-    const newColumns = [];
-    for (const field of fields) {
-      const col = findColumn(field, this.columns);
-      if (col) {
-        newColumns.push(col);
-      }
-    }
-    for (const col of this.columns) {
-      if (!findColumn(col.field, newColumns)) {
-        newColumns.push(col);
-      }
-    }
-    this.columns = [...newColumns];
-  }
   /**
    * Finds the first row
    * @param field
@@ -1147,8 +1182,8 @@ var YatlTable = class extends LitElement {
           part="header-sort-icon"
           class=${classMap({
       "sort-icon": true,
-      ascending: state2.sortState?.order === "asc",
-      descending: state2.sortState?.order === "desc"
+      ascending: state2.sort?.order === "asc",
+      descending: state2.sort?.order === "desc"
     })}
         ></div>` : nothing;
   }
@@ -1160,8 +1195,9 @@ var YatlTable = class extends LitElement {
           @mousedown=${(event) => this.handleResizeMouseDown(event, column.field)}
         ></div>` : nothing;
   }
-  renderHeaderCell(column) {
-    const state2 = findColumn(column.field, this._columnStates);
+  renderHeaderCell(field) {
+    const column = findColumn(field, this.columns);
+    const state2 = this.getColumnState(column.field);
     if (state2.visible == false) {
       return nothing;
     }
@@ -1196,7 +1232,7 @@ var YatlTable = class extends LitElement {
   renderHeader() {
     return html2`
       <div part="header" class="header row">
-        ${this.columns.map((column) => this.renderHeaderCell(column))}
+        ${this.columnOrder.map((field) => this.renderHeaderCell(field))}
       </div>
     `;
   }
@@ -1210,9 +1246,10 @@ var YatlTable = class extends LitElement {
     const indices = this.rowMetadata.get(row).highlightIndices;
     return this.enableSearchHighlight && indices ? highlightText(String(value), indices[column.field]) : value;
   }
-  renderCell(column, row) {
-    const state2 = findColumn(column.field, this._columnStates);
-    if (state2?.visible == false) {
+  renderCell(field, row) {
+    const column = findColumn(field, this.columns);
+    const state2 = this.getColumnState(column.field);
+    if (!state2.visible) {
       return nothing;
     }
     let value = getNestedValue(row, column.field);
@@ -1250,7 +1287,7 @@ var YatlTable = class extends LitElement {
         data-index=${metadata.index}
         data-filtered-index=${index}
       >
-        ${this.columns.map((column) => this.renderCell(column, row))}
+        ${this.columnOrder.map((field) => this.renderCell(field, row))}
       </div>
     `;
   }
@@ -1311,7 +1348,8 @@ var YatlTable = class extends LitElement {
     `;
   }
   render() {
-    const gridTemplate = widthsToGridTemplates(this.columnWidths).join(" ");
+    const gridWidths = this.getGridWidths();
+    const gridTemplate = widthsToGridTemplates(gridWidths).join(" ");
     return html2`
       <div
         part="table"
@@ -1326,12 +1364,30 @@ var YatlTable = class extends LitElement {
   // #region --- Lifecycle Methods ---
   updated(changedProperties) {
     super.updated(changedProperties);
-    if (!this.storageOptions?.key) return;
-    const shouldSave = Array.from(changedProperties.keys()).some(
-      (prop) => SAVE_TRIGGERS.has(prop)
+    super.updated(changedProperties);
+    const stateProps = [
+      "columnOrder",
+      "columnVisibility",
+      "columnSort",
+      "columnWidths",
+      "searchQuery",
+      "filters"
+    ];
+    const changedStateProp = stateProps.filter(
+      (prop) => changedProperties.has(prop)
     );
-    if (shouldSave) {
-      this.scheduleSave();
+    if (changedStateProp.length) {
+      this.dispatchEvent(
+        new YatlStateChangeEvent(this.getState(), changedStateProp)
+      );
+    }
+    if (this.storageOptions?.key) {
+      const shouldSave = Array.from(changedProperties.keys()).some(
+        (prop) => SAVE_TRIGGERS.has(prop)
+      );
+      if (shouldSave) {
+        this.scheduleSave();
+      }
     }
   }
   disconnectedCallback() {
@@ -1520,12 +1576,12 @@ var YatlTable = class extends LitElement {
   compareRows(a, b, field) {
     let aValue, bValue;
     const columnData = findColumn(field, this.columnData);
-    if (!columnData.state.sortState) {
+    if (!columnData.state.sort) {
       return 0;
     }
     const aMetadata = this.rowMetadata.get(a);
     const bMetadata = this.rowMetadata.get(b);
-    if (columnData.state.sortState?.order === "asc") {
+    if (columnData.state.sort?.order === "asc") {
       aValue = aMetadata.sortValues[columnData.field];
       bValue = bMetadata.sortValues[columnData.field];
     } else {
@@ -1549,9 +1605,7 @@ var YatlTable = class extends LitElement {
       this.filterRows();
       return;
     }
-    const sortedColumns = this.columnData.filter((col) => col.state.visible && col.state.sortState).sort(
-      (a, b) => b.state.sortState.priority - a.state.sortState.priority
-    );
+    const sortedColumns = this.columnData.filter((col) => col.state.visible && col.state.sort).sort((a, b) => b.state.sort.priority - a.state.sort.priority);
     this._filteredData = this._filteredData.toSorted((a, b) => {
       const aMetadata = this.rowMetadata.get(a);
       const bMetadata = this.rowMetadata.get(b);
@@ -1572,18 +1626,7 @@ var YatlTable = class extends LitElement {
     this.sortDirty = false;
   }
   // #endregion
-  // #region --- State Methods ---
-  createColumnStates() {
-    this.columnStates = this.columns.map((column) => {
-      const previousState = findColumn(column.field, this._columnStates);
-      return {
-        field: column.field,
-        visible: previousState?.visible ?? true,
-        sortState: previousState?.sortState,
-        width: previousState?.width
-      };
-    });
-  }
+  // #region --- Utilities ---
   createMetadata() {
     this.rowMetadata = /* @__PURE__ */ new WeakMap();
     let index = 0;
@@ -1636,20 +1679,19 @@ var YatlTable = class extends LitElement {
       this.queryTokens.push(...this.searchTokenizer(this.searchQuery));
     }
   }
-  // #endregion
-  // #region --- Utilities ---
   get columnData() {
     return this.columns.map((column) => ({
       field: column.field,
       options: column,
-      state: findColumn(column.field, this._columnStates) ?? {
-        field: column.field,
-        visible: true
-      }
+      state: this.getColumnState(column.field)
     }));
   }
-  get columnWidths() {
-    return this.columns.map((col) => findColumn(col.field, this._columnStates)).filter((state2) => state2 ? state2.visible : true).map((state2) => state2?.width ?? null);
+  /**
+   * 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);
   }
   scheduleSave() {
     window.clearTimeout(this.saveTimer);
@@ -1657,6 +1699,19 @@ var YatlTable = class extends LitElement {
       this.saveStateToStorage();
     }, STATE_SAVE_DEBOUNCE);
   }
+  getColumnState(field) {
+    let state2 = findColumn(field, this._columnStates);
+    if (!state2) {
+      state2 = {
+        field,
+        visible: true,
+        sort: null,
+        width: null
+      };
+      this._columnStates.push(state2);
+    }
+    return state2;
+  }
   // #endregion
   // #region --- Storage Methods  ---
   saveStateToStorage() {
@@ -1676,7 +1731,7 @@ var YatlTable = class extends LitElement {
         field: columnState.field
       };
       if (options.saveColumnSortOrders) {
-        savedColumnState.sortState = columnState.sortState;
+        savedColumnState.sort = columnState.sort;
       }
       if (options.saveColumnVisibility) {
         savedColumnState.visible = columnState.visible;
@@ -1721,7 +1776,7 @@ var YatlTable = class extends LitElement {
             columnStateToRestore.width = savedColumnState.width;
           }
           if (options.saveColumnSortOrders) {
-            columnStateToRestore.sortState = savedColumnState.sortState;
+            columnStateToRestore.sort = savedColumnState.sort;
           }
           tableStateToRestore.columns.push(columnStateToRestore);
         }
@@ -1740,14 +1795,14 @@ var YatlTable = class extends LitElement {
     if (!header) {
       return;
     }
-    const columnIndex = this.columns.findIndex((col) => col.field === field);
+    const columnIndex = this.columnOrder.findIndex((col) => col === field);
     if (columnIndex < 0) {
       return;
     }
     this.tableElement.querySelectorAll(".header .cell").forEach((element) => {
       const field2 = element.dataset.field;
       if (field2) {
-        const state2 = findColumn(field2, this._columnStates);
+        const state2 = this.getColumnState(field2);
         if (state2) {
           state2.width = element.getBoundingClientRect().width;
         }
@@ -1759,7 +1814,7 @@ var YatlTable = class extends LitElement {
       startWidth: header.getBoundingClientRect().width,
       columnIndex,
       columnField: field,
-      currentWidths: widthsToGridTemplates(this.columnWidths)
+      currentWidths: widthsToGridTemplates(this.getGridWidths())
     };
     this.tableElement.style.setProperty(
       "--grid-template",
@@ -1826,7 +1881,16 @@ __decorateClass([
 ], YatlTable.prototype, "columns", 1);
 __decorateClass([
   property({ attribute: false })
-], YatlTable.prototype, "columnStates", 1);
+], YatlTable.prototype, "columnOrder", 1);
+__decorateClass([
+  property({ attribute: false })
+], YatlTable.prototype, "columnVisibility", 1);
+__decorateClass([
+  property({ attribute: false })
+], YatlTable.prototype, "columnSort", 1);
+__decorateClass([
+  property({ attribute: false })
+], YatlTable.prototype, "columnWidths", 1);
 __decorateClass([
   property({ type: String, attribute: "search-query" })
 ], YatlTable.prototype, "searchQuery", 1);
@@ -1860,6 +1924,7 @@ export {
   YatlRowClickEvent,
   YatlSearchEvent,
   YatlSortEvent,
+  YatlStateChangeEvent,
   YatlTable,
   createRegexTokenizer,
   findColumn,