universe-code 0.0.87 → 0.0.89

package/dist/uiux/index.js

@@ -1 +1,2 @@
-export { UniverseToaster, toaster } from "./toaster";
+export { UniverseToaster, toaster } from "./toaster";
+export { UniverseDataTable } from "./tables";

package/dist/uiux/tables/index.js

@@ -0,0 +1,359 @@
+// Inject plain CSS for UniverseDataTable
+const style = document.createElement("style");
+style.textContent = `
+/* Container & Table */
+.udt-container {
+  background-color: #fff;
+  border-radius: 0 0 0.75rem 0.75rem;
+  padding: 20px;
+  overflow-x: auto;
+  font-size: 14px;
+}
+
+.table-wrapper {
+  overflow-x: auto;
+}
+
+.udt-table {
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+}
+
+.udt-th {
+  text-align: center;
+  font-weight: 600;
+  padding: 0.5rem 0.75rem;
+  min-width: 136px;
+  border: var(--tableHeaderBorder, 1px solid #d1d5db);
+  background-color: var(--tableHeaderBg, #f3f4f6);
+  color: #000;
+}
+
+.udt-td {
+  text-align: center;
+  padding: 0.5rem 0.75rem;
+  border-right: 1px solid #d1d5db;
+}
+
+.udt-table tbody tr {
+  border-bottom: 1px solid #d1d5db;
+}
+
+/* Pagination */
+.udt-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 0.75rem;
+  font-size: 14px;
+  gap: 0.5rem;
+}
+
+.page-jump {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 10px;
+  color: #757272;
+}
+
+.jumpto {
+  width: 56.67px;
+  height: 2rem;
+  border: 1px solid #adadad;
+  border-radius: 0.3125rem;
+  background-color: #f1f1f1;
+  color: #6d6d6d;
+  text-align: center;
+}
+
+.jumpto:disabled {
+  cursor: not-allowed;
+}
+
+.go-btn {
+  height: 1.75rem;
+  padding: 0 0.75rem;
+  background: var(--goButtonBackground, linear-gradient(180deg,#2e4b5e 0%,#243a48 82%));
+  color: var(--goButtonColor, #fff);
+  font-weight: 600;
+  border-radius: var(--goButtonBorderRadius,0.125rem);
+  border: none;
+  cursor: pointer;
+}
+
+.go-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Entries text */
+.entries-text {
+  white-space: nowrap;
+  text-align: left;
+  color: #4b5563;
+  font-size: var(--entriesTextFontSize, 10px);
+}
+
+/* Pagination buttons */
+.pagination-buttons {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+}
+
+.pg-btn {
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.25rem;
+  border: var(--paginationButtonBorder, 1px solid #d1d5db);
+  background-color: var(--paginationButtonBackground, #fff);
+  color: var(--paginationButtonColor, #4b5563);
+  cursor: pointer;
+}
+
+.pg-btn:hover:not(:disabled) {
+  background-color: #f9fafb;
+}
+
+.pg-btn:disabled {
+  background-color: var(--paginationButtonDissableBg,#e5e7eb);
+  color: var(--paginationButtonDissableColor, #9ca3af);
+  cursor: not-allowed;
+}
+
+.pg-number.active {
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--paginationNumberBorderRadius, 0.25rem);
+  border: var(--paginationNumberBorder, 1px solid #d1d5db);
+  background: var(--paginationNumberBackground, linear-gradient(180deg,#2e4b5e 0%,#243a48 82%));
+  color: var(--paginationNumberColor, #fff);
+}
+
+.pagination-left{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  width:auto;
+}
+
+.mbl-jump-btn{
+  display:none;
+}
+
+/* Responsive for mobile pagination */
+@media (max-width: 768px) {
+  .page-jump {
+    width: auto;
+    justify-content: center;
+  }
+
+  .pagination-left{
+    width:100%;
+  }
+
+  .pagination-buttons {
+    width: 100%;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  .pg-btn {
+    flex: 1;
+    margin-bottom: 0.25rem;
+  }
+  
+  .mbl-jump-btn{
+    display:flex;
+  }
+  .desk-jump-btn{
+    display:none;
+  }
+}
+@media (max-width: 1024px) {
+  .udt-container{
+    padding: 10px;
+  }
+}
+`;
+document.head.appendChild(style);
+
+// UniverseDataTable Class
+class UniverseDataTable {
+    constructor({
+        container,
+        apiData = [],
+        columns = [],
+        pagination = {},
+        jumpToPage = "",
+        shouldEnableJumpToPage = false,
+        handleJumpToPage = () => { },
+        handleKeyPress = () => { },
+        handlePageChange = () => { },
+        shouldShowPagination = true,
+    }) {
+        if (!container) throw new Error("UniverseDataTable: container is required");
+
+        this.container = container;
+        this.apiData = apiData;
+        this.columns = columns;
+        this.pagination = pagination;
+
+        this.jumpToPage = jumpToPage;
+        this.shouldEnableJumpToPage = shouldEnableJumpToPage;
+        this.handleJumpToPage = handleJumpToPage;
+        this.handleKeyPress = handleKeyPress;
+        this.handlePageChange = handlePageChange;
+
+        this.shouldShowPagination = shouldShowPagination;
+
+        this.render();
+    }
+
+    th(label) {
+        return `<th class="udt-th">${label}</th>`;
+    }
+
+    renderRows() {
+        if (!this.apiData || this.apiData.length === 0) {
+            return `<tr>
+        <td colspan="${this.columns.length}" style="text-align:center; padding:1rem; color:#9ca3af;">
+          No data available
+        </td>
+      </tr>`;
+        }
+
+        return this.apiData
+            .map((s) => `<tr>
+        ${this.columns
+                    .map((col) => {
+                        const val = this.getNestedValue(s, col.key);
+                        let formatted = val;
+
+                        if (col.format && typeof col.format === "function") {
+                            if (col.format.length === 1) formatted = col.format(val);
+                            else if (col.format.length === 2) formatted = col.format(val, s);
+                        }
+
+                        if (formatted instanceof HTMLElement) formatted = formatted.outerHTML;
+
+                        const className = col.class || "";
+                        return `<td class="udt-td ${className}">${formatted || "-"}</td>`;
+                    })
+                    .join("")}
+      </tr>`).join("");
+    }
+
+    pageBtn(label, page, disabled) {
+        return `<button data-page="${page}" ${disabled ? "disabled" : ""} class="pg-btn">${label}</button>`;
+    }
+
+    render() {
+        if (!this.columns || this.columns.length === 0) {
+            this.container.innerHTML = "";
+            return;
+        }
+
+        const {
+            currentPage = 1,
+            totalPages = 1,
+            startEntry = 0,
+            endEntry = 0,
+            totalRecords = 0,
+        } = this.pagination;
+
+        const isFirstPage = currentPage === 1;
+        const isLastPage = currentPage === totalPages;
+        const hasMultiplePages = totalPages > 1;
+
+        const paginationHTML = this.shouldShowPagination
+            ? `<div class="udt-pagination">
+          <div class="pagination-left">
+          <div class="entries-text">
+          Showing ${startEntry} to ${endEntry} of ${totalRecords} entries
+          </div>
+          
+          <div class="page-jump mbl-jump-btn">
+          <span>Jump to page</span>
+          <input 
+          type="number"
+              value="${this.jumpToPage}"
+              min="1"
+              max="${totalPages}"
+              ${!this.shouldEnableJumpToPage ? "disabled" : ""}
+              class="jumpto"
+              />
+              <button ${!this.shouldEnableJumpToPage ? "disabled" : ""} class="go-btn">Go</button>
+              </div>
+          </div>
+              
+          <div class="pagination-buttons">
+            ${this.pageBtn("First", 1, isFirstPage || !hasMultiplePages)}
+            ${this.pageBtn("Previous", currentPage - 1, isFirstPage || !hasMultiplePages)}
+            <span class="pg-number active">${currentPage}</span>
+            ${this.pageBtn("Next", currentPage + 1, isLastPage || !hasMultiplePages)}
+            ${this.pageBtn("Last", totalPages, isLastPage || !hasMultiplePages)}
+          </div>
+          
+          <div class="page-jump desk-jump-btn">
+            <span>Jump to page</span>
+            <input 
+              type="number"
+              value="${this.jumpToPage}"
+              min="1"
+              max="${totalPages}"
+              ${!this.shouldEnableJumpToPage ? "disabled" : ""}
+              class="jumpto"
+            />
+            <button ${!this.shouldEnableJumpToPage ? "disabled" : ""} class="go-btn">Go</button>
+          </div>
+        </div>`
+            : "";
+
+        this.container.innerHTML = `<div class="udt-container">
+      <div>
+      <div class="table-wrapper">
+        <table class="udt-table">
+          <thead>
+            <tr>${this.columns.map((col) => this.th(col.label)).join("")}</tr>
+          </thead>
+          <tbody>
+            ${this.renderRows()}
+          </tbody>
+        </table>
+      </div>
+      ${paginationHTML}
+      </div>
+    </div>`;
+
+        if (this.shouldShowPagination) {
+            const jumpInputs = this.container.querySelectorAll("input.jumpto");
+            jumpInputs.forEach((input) =>
+                input.addEventListener("keypress", (e) => this.handleKeyPress(e))
+            );
+
+            const goButtons = this.container.querySelectorAll(".go-btn");
+            goButtons.forEach((btn) => {
+                if (!btn.disabled) btn.addEventListener("click", () => this.handleJumpToPage());
+            });
+
+            const pgButtons = this.container.querySelectorAll(".pg-btn");
+            pgButtons.forEach((btn) => {
+                const page = parseInt(btn.getAttribute("data-page"), 10) || 1;
+                btn.addEventListener("click", () => this.handlePageChange(page));
+            });
+        }
+    }
+
+    getNestedValue(obj, path) {
+        return path.split('.').reduce((acc, part) => {
+            if (acc && acc[part] !== undefined) return acc[part];
+            return undefined;
+        }, obj);
+    }
+}
+
+export { UniverseDataTable };

package/package.json

@@ -1,12 +1,25 @@
 {
   "name": "universe-code",
-  "version": "0.0.87",
+  "version": "0.0.89",
   "description": "Universal utility functions for all JS frameworks",
   "license": "ISC",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "angular": [
+        "dist/angular/index.d.ts"
+      ],
+      "uiux": [
+        "dist/uiux/index.d.ts"
+      ],
+      "core": [
+        "dist/core/index.d.ts"
+      ]
+    }
+  },
   "exports": {
     ".": {
       "import": "./dist/indexdb/index.js",
@@ -62,4 +75,4 @@
     "angular-indexdb",
     "react-indexdb"
   ]
-}
+}