monobill-mintui 0.3.21 → 0.3.24

package/dist/index.js

@@ -1,5 +1,5 @@
-import { g as q } from "./caret-right-DsNN5Epe.js";
-class $ extends HTMLElement {
+import { g as $ } from "./caret-right-DsNN5Epe.js";
+class q extends HTMLElement {
   constructor() {
     super(), this._darkModeObserver = null;
   }
@@ -86,7 +86,7 @@ class $ extends HTMLElement {
     this.innerHTML = o.trim();
   }
 }
-customElements.get("mint-spinner") || customElements.define("mint-spinner", $);
+customElements.get("mint-spinner") || customElements.define("mint-spinner", q);
 class O extends HTMLElement {
   constructor() {
     super(), this._darkModeObserver = null;
@@ -139,7 +139,7 @@ class O extends HTMLElement {
       this.innerHTML = "", this.style.maskImage = "", this.style.webkitMaskImage = "", this.style.backgroundColor = "";
       return;
     }
-    const e = q(t);
+    const e = $(t);
     if (!e) {
       console.warn(`Icon "${t}" not found. Make sure you've imported the icon: import '@monobill-mintui/icon/icons/${t}'`), this.innerHTML = "", this.style.maskImage = "", this.style.webkitMaskImage = "", this.style.backgroundColor = "";
       return;
@@ -5030,7 +5030,7 @@ class nt extends HTMLElement {
           "border-b",
           "border-gray-200",
           "dark:border-gray-700"
-        ]), m && c.classList.add("cursor-pointer", "hover:bg-gray-100", "dark:hover:bg-gray-700", "transition-colors"), d === 0 && c.classList.add("pl-6"), d === o.length - 1 && c.classList.add("pr-6");
+        ]), m && c.classList.add("cursor-pointer", "bg-[#F7F7F7]", "dark:bg-gray-800", "hover:bg-gray-100", "dark:hover:bg-gray-700", "transition-colors"), d === 0 && c.classList.add("pl-6"), d === o.length - 1 && c.classList.add("pr-6");
       });
     }
     const a = t.querySelector("tbody");
@@ -5772,6 +5772,15 @@ class ht extends HTMLElement {
   attributeChangedCallback(t, e, i) {
     t === "configuration" && e !== i && (!this._configuration || typeof i == "string") && (this._parseConfiguration(), this.render());
   }
+  /**
+   * Public method to refresh the table data.
+   * For paginated tables: refreshes the current page.
+   * For loadMore tables: refreshes the entire table from the beginning.
+   * For provided data tables: re-renders the table.
+   */
+  refresh() {
+    this._configuration && (this._type === "ajax" ? this._configuration.loadMore ? (this._offset = 0, this._currentPage = 1, this._rowsToShow = this._perPage, this._rows = [], this._fetchData(void 0, !0, this._perPage, 0)) : this._fetchData(void 0, !0, this._perPage, this._offset) : this.render());
+  }
   _parseConfiguration() {
     const t = this.getAttribute("configuration");
     if (!t) {
@@ -5902,14 +5911,20 @@ class ht extends HTMLElement {
     return this._configuration.loadMore ? t.slice(0, this._rowsToShow) : t.filter((s) => !this._perPage || s.page === this._currentPage);
   }
   _toggleSort(t) {
+    var i;
     if (!this._configuration || !t.data || !t.sortable) return;
     const e = t.data;
-    this._sortTimeoutId !== null && (clearTimeout(this._sortTimeoutId), this._sortTimeoutId = null), this._sorting = !0, this._sortingColumn = t, this._updateSortIcons(), this._sortTimeoutId = window.setTimeout(() => {
-      var s;
-      if (this._sortTimeoutId = null, !this._configuration || !e || !t.sortable) return;
-      let i = this._configuration.sort || "asc";
-      ((s = this._configuration.sortBy) == null ? void 0 : s.toLowerCase()) === e.toLowerCase() && (i = i === "desc" ? "asc" : "desc"), this._configuration.sort = i, this._configuration.sortBy = e, this._updateSortIcons(), this._type === "ajax" ? (this._offset = 0, this._currentPage = 1, this._configuration.loadMore && (this._rowsToShow = this._perPage), this._fetching = !1, this._loading = !1, this._configuration.loadMore ? this._fetchData(void 0, !1, this._perPage, 0) : this._fetchData(void 0, !1, this._perPage, 0)) : (this._currentPage = 1, this._sorting = !1, this._sortingColumn = null, this._updateSortIcons(), this.render());
-    }, 300);
+    if (this._sortTimeoutId !== null && (clearTimeout(this._sortTimeoutId), this._sortTimeoutId = null), this._sorting = !0, this._sortingColumn = t, this._updateSortIcons(), this._type === "ajax")
+      this._sortTimeoutId = window.setTimeout(() => {
+        var n;
+        if (this._sortTimeoutId = null, !this._configuration || !e || !t.sortable) return;
+        let s = this._configuration.sort || "asc";
+        ((n = this._configuration.sortBy) == null ? void 0 : n.toLowerCase()) === e.toLowerCase() && (s = s === "desc" ? "asc" : "desc"), this._configuration.sort = s, this._configuration.sortBy = e, this._updateSortIcons(), this._offset = 0, this._currentPage = 1, this._configuration.loadMore && (this._rowsToShow = this._perPage), this._fetching = !1, this._loading = !1, this._configuration.loadMore ? this._fetchData(void 0, !1, this._perPage, 0) : this._fetchData(void 0, !1, this._perPage, 0);
+      }, 10);
+    else {
+      let s = this._configuration.sort || "asc";
+      ((i = this._configuration.sortBy) == null ? void 0 : i.toLowerCase()) === e.toLowerCase() && (s = s === "desc" ? "asc" : "desc"), this._configuration.sort = s, this._configuration.sortBy = e, this._currentPage = 1, this._sorting = !1, this._sortingColumn = null, this._updateSortIcons(), this.render();
+    }
   }
   _getSortClass(t) {
     var e, i, s, n, r;
@@ -6157,27 +6172,27 @@ class ht extends HTMLElement {
       s += "</div>";
     }
     if (this._type === "ajax" && (!this._loaded || this._fetching || this._loading) && !this._fetchError && !this._sorting) {
-      s += '<div class="space-y-0 flex gap-2 flex-col"><div class="h-9 bg-gray-200 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-700 animate-pulse"></div>';
-      for (let r = 0; r < 3; r++)
-        s += '<div class="h-9 bg-gray-200 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-700 animate-pulse"></div>';
-      if (s += "</div>", this._configuration.perPage && !this._configuration.loadMore) {
-        if (!this._loaded)
-          s += '<div class="flex justify-end ' + (this._inMintCard ? "p-3.5" : "mt-4") + '">', s += "<nav>", s += '<ul class="flex gap-1">', s += '<li><div class="h-8 w-8 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div></li>', s += '<li><div class="h-8 w-8 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div></li>', s += '<li><div class="h-8 w-8 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div></li>', s += '<li><div class="h-8 w-8 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div></li>', s += "</ul>", s += "</nav>", s += "</div>";
-        else if (i > 1 || this._lastPage > 0) {
-          const r = this._lastPage > 0 ? this._lastPage : i;
-          if (r > 1) {
-            s += '<div class="flex justify-end ' + (this._inMintCard ? "p-3.5" : "mt-4") + '">', s += "<nav>", s += '<ul class="flex gap-1">', s += `<li><mint-button variant="solid" size="sm" icon="caret-left" ${this._currentPage === 1 ? 'disabled="true"' : ""} data-action="page-prev"></mint-button></li>`;
-            for (let a = 1; a <= Math.min(2, r); a++) {
+      s += '<mint-table class="table-section' + (this._inMintCard ? " rounded-t-none" : "") + '">', s += `<table id="${this._tableId}">`, s += "<thead><tr>", this._configuration.columns.forEach((r, a) => {
+        r.hidden || (s += `<th width="${r.width || ""}" style="${this._getStyle(r)}" class="${this._getClasses(r)}" data-column-key="${a}">`, r.showLabel !== !1 && (s += '<div class="flex items-center">', s += `<div class="flex-1">${r.raw ? r.label : this._escapeHtml(r.label)}</div>`, r.sortable && (s += '<div class="ml-2 flex items-center">', s += '<mint-icon name="" class="w-4 h-4 text-gray-400"></mint-icon>', s += "</div>"), s += "</div>"), s += "</th>");
+      }), s += "</tr></thead>", s += "<tbody>";
+      for (let r = 0; r < this._perPage; r++)
+        s += "<tr>", this._configuration.columns.forEach((a) => {
+          a.hidden || (s += `<td style="${this._getStyle(a)}" class="${this._getClasses(a, !0)}">`, s += '<div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>', s += "</td>");
+        }), s += "</tr>";
+      if (s += "</tbody>", s += "</table>", s += "</mint-table>", this._configuration.perPage && !this._configuration.loadMore && (i > 1 || this._lastPage > 0)) {
+        const r = this._lastPage > 0 ? this._lastPage : i;
+        if (r > 1) {
+          s += '<div class="flex justify-end ' + (this._inMintCard ? "p-3.5" : "mt-4") + '">', s += "<nav>", s += '<ul class="flex gap-1">', s += `<li><mint-button variant="solid" size="sm" icon="caret-left" ${this._currentPage === 1 ? 'disabled="true"' : ""} data-action="page-prev"></mint-button></li>`;
+          for (let a = 1; a <= Math.min(2, r); a++) {
+            const o = this._currentPage === a ? ' disabled="true"' : "";
+            s += `<li><mint-button variant="solid" size="sm"${o} data-action="page" data-page="${a}">${a}</mint-button></li>`;
+          }
+          if (r > 2 && (s += '<li><span class="px-2">...</span></li>'), this._currentPage > 2 && this._currentPage < r - 1 && (s += `<li><mint-button variant="solid" size="sm" data-action="page" data-page="${this._currentPage - 1}">${this._currentPage - 1}</mint-button></li>`, s += `<li><mint-button variant="solid" size="sm" disabled="true" data-action="page" data-page="${this._currentPage}">${this._currentPage}</mint-button></li>`, s += `<li><mint-button variant="solid" size="sm" data-action="page" data-page="${this._currentPage + 1}">${this._currentPage + 1}</mint-button></li>`), r > 2)
+            for (let a = Math.max(r - 1, this._currentPage + 2); a <= r; a++) {
               const o = this._currentPage === a ? ' disabled="true"' : "";
               s += `<li><mint-button variant="solid" size="sm"${o} data-action="page" data-page="${a}">${a}</mint-button></li>`;
             }
-            if (r > 2 && (s += '<li><span class="px-2">...</span></li>'), this._currentPage > 2 && this._currentPage < r - 1 && (s += `<li><mint-button variant="solid" size="sm" data-action="page" data-page="${this._currentPage - 1}">${this._currentPage - 1}</mint-button></li>`, s += `<li><mint-button variant="solid" size="sm" disabled="true" data-action="page" data-page="${this._currentPage}">${this._currentPage}</mint-button></li>`, s += `<li><mint-button variant="solid" size="sm" data-action="page" data-page="${this._currentPage + 1}">${this._currentPage + 1}</mint-button></li>`), r > 2)
-              for (let a = Math.max(r - 1, this._currentPage + 2); a <= r; a++) {
-                const o = this._currentPage === a ? ' disabled="true"' : "";
-                s += `<li><mint-button variant="solid" size="sm"${o} data-action="page" data-page="${a}">${a}</mint-button></li>`;
-              }
-            s += `<li><mint-button variant="solid" size="sm" icon="caret-right" ${this._currentPage >= r ? 'disabled="true"' : ""} data-action="page-next"></mint-button></li>`, s += "</ul>", s += "</nav>", s += "</div>";
-          }
+          s += `<li><mint-button variant="solid" size="sm" icon="caret-right" ${this._currentPage >= r ? 'disabled="true"' : ""} data-action="page-next"></mint-button></li>`, s += "</ul>", s += "</nav>", s += "</div>";
         }
       }
     } else if (e.length > 0 || this._search.length > 0 || this._searching || this._fetchError) {
@@ -6387,7 +6402,7 @@ export {
   K as Popover,
   ht as ResourceTable,
   it as Select,
-  $ as Spinner,
+  q as Spinner,
   V as Stack,
   z as Switch,
   nt as Table,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monobill-mintui",
-  "version": "0.3.21",
+  "version": "0.3.24",
   "description": "A modern framework-agnostic UI kit built as Web Components. Requires Tailwind CSS.",
   "type": "module",
   "main": "./dist/index.cjs",