@timlassiter11/yatl 1.0.5 → 1.0.7

package/dist/index.mjs

@@ -149,9 +149,6 @@ function getNestedValue(obj, path) {
   }
   return current;
 }
-function findColumn(field, columns) {
-  return columns.find((c) => c.field === field);
-}
 function highlightText(text, ranges) {
   if (!text || !ranges || ranges.length === 0) {
     return text;
@@ -193,6 +190,9 @@ 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";
 }
@@ -623,10 +623,11 @@ var YatlTable = class extends LitElement {
           this.resizeState.currentWidths[this.resizeState.columnIndex]
         );
         const columnWidths = this.columnWidths;
-        const state2 = findColumn(this.resizeState.columnField, columnWidths);
-        state2.width = finalWidth;
-        this.columnWidths = columnWidths;
-        this.dispatchEvent(new YatlColumnResizeEvent(state2.field, state2.width));
+        columnWidths[this.resizeState.columnField] = finalWidth;
+        this.columnWidths = { ...columnWidths };
+        this.dispatchEvent(
+          new YatlColumnResizeEvent(this.resizeState.columnField, finalWidth)
+        );
       }
       setTimeout(() => {
         this.resizeState = null;
@@ -733,8 +734,12 @@ var YatlTable = class extends LitElement {
     }
     this.requestUpdate("columns", oldValue);
   }
+  /**
+   * Gets a list of columns with the display role
+   * **This will always be ordered by {@link YatlTable.columnOrder}**
+   */
   get displayColumns() {
-    return this._columns.filter(isDisplayColumn);
+    return this.columnOrder.map((field) => this._columnDefinitionMap.get(field)).filter(isDisplayColumn);
   }
   get columnOrder() {
     const finalOrder = /* @__PURE__ */ new Set();
@@ -744,8 +749,8 @@ var YatlTable = class extends LitElement {
         finalOrder.add(field);
       }
     }
-    for (const col of this.displayColumns) {
-      if (!finalOrder.has(col.field)) {
+    for (const col of this.columns) {
+      if (isDisplayColumn(col) && !finalOrder.has(col.field)) {
         finalOrder.add(col.field);
       }
     }
@@ -760,19 +765,21 @@ var YatlTable = class extends LitElement {
     this.requestUpdate("columnOrder", oldValue);
   }
   get columnVisibility() {
-    return this.columnOrder.map((field) => ({
-      field,
-      visible: this.getOrCreateColumnState(field).visible
-    }));
+    const data = {};
+    for (const field of this.columnOrder) {
+      data[field] = this.getOrCreateColumnState(field).visible;
+    }
+    return data;
   }
   set columnVisibility(columns) {
     const oldValue = this.columnVisibility;
     let changed = false;
-    for (const column of columns) {
-      const columnState = this.getOrCreateColumnState(column.field);
-      if (columnState.visible !== column.visible) {
+    const entries = Object.entries(columns);
+    for (const [field, visible] of entries) {
+      const columnState = this.getOrCreateColumnState(field);
+      if (columnState.visible !== visible) {
         changed = true;
-        columnState.visible = column.visible;
+        columnState.visible = visible;
       }
     }
     if (!changed) {
@@ -781,24 +788,22 @@ var YatlTable = class extends LitElement {
     this.requestUpdate("columnVisibility", oldValue);
   }
   get columnSort() {
-    return this.columnOrder.map((field) => {
+    const data = {};
+    for (const field of this.columnOrder) {
       const sortState = this.getOrCreateColumnState(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
-      };
-    });
+      data[field] = sortState ? { ...sortState } : null;
+    }
+    return data;
   }
   set columnSort(columns) {
     const oldValue = this.columnSort;
     let changed = false;
-    for (const column of columns) {
-      const columnState = this.getOrCreateColumnState(column.field);
-      if (columnState && (columnState.sort?.order !== column.sort?.order || columnState.sort?.priority !== column.sort?.priority)) {
+    const entries = Object.entries(columns);
+    for (const [field, state2] of entries) {
+      const columnState = this.getOrCreateColumnState(field);
+      if (columnState && (columnState.sort?.order !== state2?.order || columnState.sort?.priority !== state2?.priority)) {
         changed = true;
-        columnState.sort = column.sort;
+        columnState.sort = state2;
       }
     }
     if (!changed) {
@@ -808,19 +813,21 @@ var YatlTable = class extends LitElement {
     this.requestUpdate("columnSort", oldValue);
   }
   get columnWidths() {
-    return this.columnOrder.map((field) => ({
-      field,
-      width: this.getOrCreateColumnState(field).width
-    }));
+    const data = {};
+    for (const field of this.columnOrder) {
+      data[field] = this.getOrCreateColumnState(field).width;
+    }
+    return data;
   }
   set columnWidths(columns) {
     const oldValue = this.columnWidths;
     let changed = false;
-    for (const column of columns) {
-      const columnState = this.getOrCreateColumnState(column.field);
-      if (columnState.width !== column.width) {
+    const entries = Object.entries(columns);
+    for (const [field, width] of entries) {
+      const columnState = this.getOrCreateColumnState(field);
+      if (columnState.width !== width) {
         changed = true;
-        columnState.width = column.width;
+        columnState.width = width;
       }
     }
     if (!changed) {
@@ -972,34 +979,35 @@ var YatlTable = class extends LitElement {
    */
   sort(field, order, clear = true) {
     const sortStates = this.columnSort;
-    const state2 = findColumn(field, sortStates);
-    if (!state2) {
+    let state2 = sortStates[field];
+    if (state2 === void 0) {
       throw new Error(`Cannot get options for non-existent column "${field}"`);
     }
-    if (order === state2.sort?.order) {
+    if (order === state2?.order) {
       return;
     }
     if (!this.dispatchEvent(new YatlSortEvent(field, order))) {
       return;
     }
-    if (order && !state2.sort) {
-      const priorities = sortStates.map((col) => col.sort?.priority).filter((priority2) => priority2 !== void 0);
+    if (order && !state2) {
+      const priorities = [...this._columnStateMap.values()].map((state3) => state3.sort?.priority).filter((priority2) => priority2 !== void 0);
       const maxPriority = this.columns.length + 1;
       const priority = Math.min(maxPriority, ...priorities) - 1;
-      state2.sort = { order, priority };
-    } else if (order && state2.sort) {
-      state2.sort.order = order;
+      state2 = { order, priority };
+    } else if (order && state2) {
+      state2.order = order;
     } else {
-      state2.sort = null;
+      state2 = null;
     }
+    sortStates[field] = state2;
     if (clear) {
-      for (const state3 of sortStates) {
-        if (state3.field !== field) {
-          state3.sort = null;
+      for (const otherField of this.columnOrder) {
+        if (otherField !== field) {
+          sortStates[otherField] = null;
         }
       }
     }
-    this.columnSort = [...sortStates];
+    this.columnSort = { ...sortStates };
   }
   /**
    * Sets the visibility of a specified column.
@@ -1008,18 +1016,18 @@ var YatlTable = class extends LitElement {
    */
   setColumnVisibility(field, visible) {
     const visibilityStates = this.columnVisibility;
-    const state2 = findColumn(field, visibilityStates);
-    if (!state2) {
+    const currentVisibility = visibilityStates[field];
+    if (currentVisibility === void 0) {
       throw new Error(`Cannot get options for non-existent column "${field}"`);
     }
-    if (state2.visible === visible) {
+    if (currentVisibility === visible) {
       return;
     }
     if (!this.dispatchEvent(new YatlColumnToggleEvent(field, visible))) {
       return;
     }
-    state2.visible = visible;
-    this.columnVisibility = [...visibilityStates];
+    visibilityStates[field] = visible;
+    this.columnVisibility = { ...visibilityStates };
   }
   /**
    * Toggles the visibility of hte specified column
@@ -1051,7 +1059,9 @@ var YatlTable = class extends LitElement {
   export(filename, all = false) {
     const data = all ? this.data : this.filteredData;
     const columnData = this.displayColumns;
-    const csvHeaders = columnData.filter((column) => all || this.getOrCreateColumnState(column.field).visible).map((column) => `"${column.title}"`).join(",");
+    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 column of columnData) {
@@ -1250,9 +1260,9 @@ var YatlTable = class extends LitElement {
   }
   renderHeader() {
     const classes = {
-      "header": true,
-      "row": true,
-      "reorderable": this.enableColumnReorder
+      header: true,
+      row: true,
+      reorderable: this.enableColumnReorder
     };
     return html2`
       <div part="header" class=${classMap(classes)}>
@@ -1319,7 +1329,7 @@ var YatlTable = class extends LitElement {
     `;
   }
   renderBody() {
-    if (this.columnWidths.length === 0) {
+    if (!this.hasVisibleColumn()) {
       return html2`
         <div part="message" class="message">No visible columns.</div>
       `;
@@ -1383,7 +1393,8 @@ var YatlTable = class extends LitElement {
         class="table"
         style=${styleMap({ "--grid-template": gridTemplate })}
       >
-        ${this.renderHeader()} ${this.renderBody()} ${this.renderFooter()}
+        ${this.renderHeader()}
+        <slot> ${this.renderBody()} ${this.renderFooter()} </slot>
       </div>
     `;
   }
@@ -1696,6 +1707,9 @@ var YatlTable = class extends LitElement {
       this.queryTokens.push(...this.searchTokenizer(this.searchQuery));
     }
   }
+  hasVisibleColumn() {
+    return this.columnOrder.map((field) => this.getOrCreateColumnState(field)).filter((state2) => state2.visible).length > 0;
+  }
   /**
    * Gets the width of each column in the
    * order they will appear in the grid.
@@ -1944,6 +1958,8 @@ export {
   YatlStateChangeEvent,
   YatlTable,
   createRegexTokenizer,
+  isDisplayColumn,
+  isInternalColumn,
   whitespaceTokenizer
 };
 //# sourceMappingURL=index.mjs.map