@timlassiter11/yatl 1.0.2 → 1.0.4

package/dist/index.js

@@ -39,7 +39,6 @@ __export(src_exports, {
   YatlStateChangeEvent: () => YatlStateChangeEvent,
   YatlTable: () => YatlTable,
   createRegexTokenizer: () => createRegexTokenizer,
-  findColumn: () => findColumn,
   whitespaceTokenizer: () => whitespaceTokenizer
 });
 module.exports = __toCommonJS(src_exports);
@@ -228,6 +227,9 @@ function widthsToGridTemplates(widths, defaultWidth = "1fr") {
 function isCompareable(value) {
   return typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value instanceof Date;
 }
+function isDisplayColumn(col) {
+  return col?.role !== "internal";
+}
 
 // src/yatl-table.ts
 var import_lit3 = require("lit");
@@ -343,7 +345,8 @@ var yatl_table_styles_default = import_lit2.css`
     border-bottom: none;
   }
 
-  .header .cell::after,
+  .header.reorderable .cell::after,
+  .header .cell.sortable::after,
   .row:not(.header)::after {
     content: '';
     position: absolute;
@@ -404,7 +407,8 @@ var yatl_table_styles_default = import_lit2.css`
   :host {
     display: block;
     height: 100%;
-    width: 100%;
+    width: fit-content;
+    overflow: auto;
   }
 
   .table {
@@ -499,7 +503,7 @@ var yatl_table_styles_default = import_lit2.css`
     flex-shrink: 0;
 
     position: sticky;
-    bottom: 0;
+    inset: 0;
     z-index: var(--header-z-index);
   }
 
@@ -570,12 +574,12 @@ var YatlTable = class extends import_lit3.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 = [];
     this._searchQuery = "";
-    this._searchIncludedFields = [];
     this._searchTokenizer = whitespaceTokenizer;
     this._filters = null;
     this._filteredData = [];
@@ -598,6 +602,8 @@ var YatlTable = class extends import_lit3.LitElement {
     this.resizeState = null;
     // Column drag & drop state
     this.dragColumn = null;
+    this.sortable = false;
+    this.resizable = false;
     this.enableVirtualScroll = false;
     this.enableSearchHighlight = true;
     this.enableColumnReorder = true;
@@ -609,12 +615,11 @@ var YatlTable = class extends import_lit3.LitElement {
     // #endregion
     // #region --- Event Handlers ---
     this.handleHeaderClicked = (event, column) => {
-      const target = event.target;
-      if (!column.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") {
@@ -641,11 +646,13 @@ var YatlTable = class extends import_lit3.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]
         );
@@ -655,7 +662,9 @@ var YatlTable = class extends import_lit3.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;
@@ -698,7 +707,7 @@ var YatlTable = class extends import_lit3.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(
@@ -752,17 +761,24 @@ var YatlTable = class extends import_lit3.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.columns);
+      const col = this.getDisplayColumn(field);
       if (col) {
         finalOrder.add(field);
       }
     }
-    for (const col of this.columns) {
+    for (const col of this.displayColumns) {
       if (!finalOrder.has(col.field)) {
         finalOrder.add(col.field);
       }
@@ -780,15 +796,15 @@ var YatlTable = class extends import_lit3.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;
       }
@@ -800,7 +816,7 @@ var YatlTable = class extends import_lit3.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
@@ -813,7 +829,7 @@ var YatlTable = class extends import_lit3.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;
@@ -828,15 +844,15 @@ var YatlTable = class extends import_lit3.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;
       }
@@ -859,18 +875,6 @@ var YatlTable = class extends import_lit3.LitElement {
     this.filterDirty = true;
     this.requestUpdate("searchQuery", oldValue);
   }
-  get searchIncludedFields() {
-    return this._searchIncludedFields;
-  }
-  set searchIncludedFields(fields) {
-    if (this._searchIncludedFields === fields) {
-      return;
-    }
-    const oldValue = this._searchIncludedFields;
-    this._searchIncludedFields = fields;
-    this.filterDirty = true;
-    this.requestUpdate("searchIncludedFields", oldValue);
-  }
   get searchTokenizer() {
     return this._searchTokenizer;
   }
@@ -932,6 +936,15 @@ var YatlTable = class extends import_lit3.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.
    */
@@ -941,7 +954,7 @@ var YatlTable = class extends import_lit3.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,
@@ -966,10 +979,8 @@ var YatlTable = class extends import_lit3.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;
         }
@@ -983,7 +994,6 @@ var YatlTable = class extends import_lit3.LitElement {
           currentState.width = newState.width;
         }
       }
-      this._columnStates = newColumnStates;
       this.requestUpdate();
     }
   }
@@ -1043,15 +1053,15 @@ var YatlTable = class extends import_lit3.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
@@ -1074,16 +1084,16 @@ var YatlTable = class extends import_lit3.LitElement {
    */
   export(filename, all = false) {
     const data = all ? this.data : this.filteredData;
-    const rows = [...data.values()];
-    const columnData = this.columnData;
-    const csvHeaders = columnData.filter((col) => all || 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}"`);
@@ -1218,7 +1228,7 @@ var YatlTable = class extends import_lit3.LitElement {
   // #endregion
   // #region --- Render Methods ---
   renderColumnSortIcon(column, state2) {
-    return column.sortable ? import_lit3.html`<div
+    return column.sortable ?? this.sortable ? import_lit3.html`<div
           part="header-sort-icon"
           class=${(0, import_class_map.classMap)({
       "sort-icon": true,
@@ -1228,7 +1238,7 @@ var YatlTable = class extends import_lit3.LitElement {
         ></div>` : import_lit3.nothing;
   }
   renderColumnResizer(column, _state) {
-    return column.resizable ? import_lit3.html`<div
+    return column.resizable ?? this.resizable ? import_lit3.html`<div
           part="header-resizer"
           class="resizer"
           @click=${(event) => event.stopPropagation()}
@@ -1236,9 +1246,12 @@ var YatlTable = class extends import_lit3.LitElement {
         ></div>` : import_lit3.nothing;
   }
   renderHeaderCell(field) {
-    const column = findColumn(field, this.columns);
-    const state2 = this.getColumnState(column.field);
-    if (state2.visible == false) {
+    const column = this.getDisplayColumn(field);
+    if (!column) {
+      return import_lit3.nothing;
+    }
+    const state2 = this.getOrCreateColumnState(field);
+    if (!state2.visible) {
       return import_lit3.nothing;
     }
     return import_lit3.html`
@@ -1246,7 +1259,7 @@ var YatlTable = class extends import_lit3.LitElement {
         part="cell header-cell"
         class=${(0, import_class_map.classMap)({
       cell: true,
-      sortable: column.sortable ?? false
+      sortable: column.sortable ?? this.sortable
     })}
         draggable=${(0, import_if_defined.ifDefined)(this.enableColumnReorder ? true : void 0)}
         data-field=${column.field}
@@ -1270,8 +1283,13 @@ var YatlTable = class extends import_lit3.LitElement {
     `;
   }
   renderHeader() {
+    const classes = {
+      "header": true,
+      "row": true,
+      "reorderable": this.enableColumnReorder
+    };
     return import_lit3.html`
-      <div part="header" class="header row">
+      <div part="header" class=${(0, import_class_map.classMap)(classes)}>
         ${this.columnOrder.map((field) => this.renderHeaderCell(field))}
       </div>
     `;
@@ -1287,11 +1305,14 @@ var YatlTable = class extends import_lit3.LitElement {
     return this.enableSearchHighlight && indices ? highlightText(String(value), indices[column.field]) : value;
   }
   renderCell(field, row) {
-    const column = findColumn(field, this.columns);
-    const state2 = this.getColumnState(column.field);
-    if (!state2.visible) {
+    const column = this.getDisplayColumn(field);
+    if (!column) {
       return import_lit3.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)) {
@@ -1565,8 +1586,8 @@ var YatlTable = class extends import_lit3.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;
         }
@@ -1575,8 +1596,8 @@ var YatlTable = class extends import_lit3.LitElement {
     return true;
   }
   filterRows() {
-    const searchableFields = [...this.columnData.values()].filter((col) => col.options.searchable).map((c) => c.field);
-    const fields = [...searchableFields, ...this.searchIncludedFields];
+    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;
@@ -1615,22 +1636,18 @@ var YatlTable = class extends import_lit3.LitElement {
   // #region --- Sort Methods ---
   compareRows(a, b, field) {
     let aValue, bValue;
-    const columnData = findColumn(field, this.columnData);
-    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;
@@ -1645,7 +1662,7 @@ var YatlTable = class extends import_lit3.LitElement {
       this.filterRows();
       return;
     }
-    const sortedColumns = this.columnData.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);
@@ -1655,8 +1672,8 @@ var YatlTable = class extends import_lit3.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;
         }
@@ -1680,8 +1697,8 @@ var YatlTable = class extends import_lit3.LitElement {
       this.rowMetadata.set(row, metadata);
       for (const column of this.columns) {
         const value = getNestedValue(row, column.field);
-        if (typeof column.sortValue === "function") {
-          metadata.sortValues[column.field] = column.sortValue(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)) {
@@ -1699,12 +1716,6 @@ var YatlTable = class extends import_lit3.LitElement {
           );
         }
       }
-      for (const field of this.searchIncludedFields) {
-        const value = getNestedValue(row, field);
-        if (typeof value === "string") {
-          metadata.searchValues[field] = value.toLocaleLowerCase();
-        }
-      }
     }
   }
   updateInternalQuery() {
@@ -1719,19 +1730,12 @@ var YatlTable = class extends import_lit3.LitElement {
       this.queryTokens.push(...this.searchTokenizer(this.searchQuery));
     }
   }
-  get columnData() {
-    return this.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);
@@ -1739,16 +1743,20 @@ var YatlTable = class extends import_lit3.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;
   }
@@ -1842,7 +1850,7 @@ var YatlTable = class extends import_lit3.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;
         }
@@ -1889,6 +1897,12 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators.state)()
 ], YatlTable.prototype, "_filteredData", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, attribute: "sortable" })
+], YatlTable.prototype, "sortable", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, attribute: "resizable" })
+], YatlTable.prototype, "resizable", 2);
 __decorateClass([
   (0, import_decorators.property)({ type: Boolean, attribute: "enable-virtual-scroll" })
 ], YatlTable.prototype, "enableVirtualScroll", 2);
@@ -1934,9 +1948,6 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators.property)({ type: String, attribute: "search-query" })
 ], YatlTable.prototype, "searchQuery", 1);
-__decorateClass([
-  (0, import_decorators.property)({ type: Array, attribute: "search-included-fields" })
-], YatlTable.prototype, "searchIncludedFields", 1);
 __decorateClass([
   (0, import_decorators.property)({ attribute: false })
 ], YatlTable.prototype, "searchTokenizer", 1);
@@ -1968,7 +1979,6 @@ YatlTable = __decorateClass([
   YatlStateChangeEvent,
   YatlTable,
   createRegexTokenizer,
-  findColumn,
   whitespaceTokenizer
 });
 //# sourceMappingURL=index.js.map