@timlassiter11/yatl 1.0.1 → 1.0.3

package/dist/index.js

@@ -228,6 +228,12 @@ 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";
+}
 
 // src/yatl-table.ts
 var import_lit3 = require("lit");
@@ -404,7 +410,8 @@ var yatl_table_styles_default = import_lit2.css`
   :host {
     display: block;
     height: 100%;
-    width: 100%;
+    width: fit-content;
+    overflow: auto;
   }
 
   .table {
@@ -575,7 +582,6 @@ var YatlTable = class extends import_lit3.LitElement {
     this._storageOptions = null;
     this._data = [];
     this._searchQuery = "";
-    this._searchIncludedFields = [];
     this._searchTokenizer = whitespaceTokenizer;
     this._filters = null;
     this._filteredData = [];
@@ -598,6 +604,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;
@@ -610,7 +618,8 @@ var YatlTable = class extends import_lit3.LitElement {
     // #region --- Event Handlers ---
     this.handleHeaderClicked = (event, column) => {
       const target = event.target;
-      if (!column.sortable || target.classList.contains("resizer")) {
+      const currentTarget = event.currentTarget;
+      if (!currentTarget.classList.contains("sortable") || target.classList.contains("resizer")) {
         return;
       }
       const multiSort = event.shiftKey;
@@ -757,12 +766,12 @@ var YatlTable = class extends import_lit3.LitElement {
   get columnOrder() {
     const finalOrder = /* @__PURE__ */ new Set();
     for (const field of this._columnOrder) {
-      const col = findColumn(field, this.columns);
+      const col = findColumn(field, this.getColumns("display"));
       if (col) {
         finalOrder.add(field);
       }
     }
-    for (const col of this.columns) {
+    for (const col of this.getColumns("display")) {
       if (!finalOrder.has(col.field)) {
         finalOrder.add(col.field);
       }
@@ -787,10 +796,10 @@ var YatlTable = class extends import_lit3.LitElement {
     const oldValue = this.columnVisibility;
     let changed = false;
     for (const column of columns) {
-      const state2 = this.getColumnState(column.field);
-      if (state2 && state2.visible !== column.visible) {
+      const columnState = this.getColumnState(column.field);
+      if (columnState && columnState.visible !== column.visible) {
         changed = true;
-        state2.visible = column.visible;
+        columnState.visible = column.visible;
       }
     }
     if (!changed) {
@@ -799,19 +808,24 @@ var YatlTable = class extends import_lit3.LitElement {
     this.requestUpdate("columnVisibility", oldValue);
   }
   get columnSort() {
-    return this.columnOrder.map((field) => ({
-      field,
-      sort: this.getColumnState(field).sort
-    }));
+    return this.columnOrder.map((field) => {
+      const sortState = this.getColumnState(field).sort;
+      return {
+        field,
+        // We need to make a copy of sort state so
+        // if the user changes it, it doesn't change our copy.
+        sort: sortState ? { ...sortState } : null
+      };
+    });
   }
   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)) {
+      const columnState = this.getColumnState(column.field);
+      if (columnState && (columnState.sort?.order !== column.sort?.order || columnState.sort?.priority !== column.sort?.priority)) {
         changed = true;
-        state2.sort = column.sort;
+        columnState.sort = column.sort;
       }
     }
     if (!changed) {
@@ -830,10 +844,10 @@ var YatlTable = class extends import_lit3.LitElement {
     const oldValue = this.columnWidths;
     let changed = false;
     for (const column of columns) {
-      const state2 = this.getColumnState(column.field);
-      if (state2 && state2.width !== column.width) {
+      const columnState = this.getColumnState(column.field);
+      if (columnState && columnState.width !== column.width) {
         changed = true;
-        state2.width = column.width;
+        columnState.width = column.width;
       }
     }
     if (!changed) {
@@ -854,18 +868,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;
   }
@@ -1018,7 +1020,7 @@ var YatlTable = class extends import_lit3.LitElement {
         }
       }
     }
-    this.columnSort = sortStates;
+    this.columnSort = [...sortStates];
   }
   /**
    * Sets the visibility of a specified column.
@@ -1070,8 +1072,10 @@ 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 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 list = [];
       for (const col of columnData) {
@@ -1213,7 +1217,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,
@@ -1223,7 +1227,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()}
@@ -1231,7 +1235,7 @@ var YatlTable = class extends import_lit3.LitElement {
         ></div>` : import_lit3.nothing;
   }
   renderHeaderCell(field) {
-    const column = findColumn(field, this.columns);
+    const column = findColumn(field, this.getColumns("display"));
     const state2 = this.getColumnState(column.field);
     if (state2.visible == false) {
       return import_lit3.nothing;
@@ -1241,7 +1245,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}
@@ -1282,7 +1286,7 @@ 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 column = findColumn(field, this.getColumns("display"));
     const state2 = this.getColumnState(column.field);
     if (!state2.visible) {
       return import_lit3.nothing;
@@ -1570,8 +1574,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.getColumnData(this.columns);
+    const fields = columnData.filter((col) => col.options.searchable).map((c) => c.field);
     this._filteredData = this.data.filter((row, index) => {
       const metadata = this.rowMetadata.get(row);
       metadata.searchScore = 0;
@@ -1610,7 +1614,10 @@ var YatlTable = class extends import_lit3.LitElement {
   // #region --- Sort Methods ---
   compareRows(a, b, field) {
     let aValue, bValue;
-    const columnData = findColumn(field, this.columnData);
+    const columnData = findColumn(
+      field,
+      this.getColumnData(this.getColumns("display"))
+    );
     if (!columnData.state.sort) {
       return 0;
     }
@@ -1640,7 +1647,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 sortedColumns = this.getColumnData(this.columns).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);
@@ -1675,14 +1682,16 @@ 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);
-        } 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 (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 value === "string") {
           metadata.searchValues[column.field] = value.toLocaleLowerCase();
@@ -1694,12 +1703,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() {
@@ -1714,8 +1717,18 @@ var YatlTable = class extends import_lit3.LitElement {
       this.queryTokens.push(...this.searchTokenizer(this.searchQuery));
     }
   }
-  get columnData() {
-    return this.columns.map((column) => ({
+  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)
@@ -1884,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);
@@ -1929,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);