tailwind-table-dom 1.1.6 → 1.2.8

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V3/lockTable.js

@@ -0,0 +1,17 @@
+const lockTable = ({ inContainerEl, inIsDisabled }) => {
+    const container = inContainerEl;
+
+    const table = container.querySelector("table");
+    if (!table) return;
+
+    const parent = table.closest(".tableParent");
+    if (!parent) return;
+
+    if (inIsDisabled) {
+        parent.setAttribute("inert", "");
+    } else {
+        parent.removeAttribute("inert");
+    }
+};
+
+export { lockTable };

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V3/start.js

@@ -0,0 +1,37 @@
+import { buildHeader } from "./BuildHeader/start.js";
+import { buildBody } from "./BuildBody/buildBody.js";
+import { buildFooter } from "./BuildFooter/start.js";
+
+import { hookAllListeners } from "./AddListeners/start.js";
+
+const buildTable = ({ inContainerEl, inDataStore, inDom, inServices, inOptions, inEndPoints }) => {
+    buildHeader({
+        inContainerEl,
+        inDataStore,
+        inDom
+    });
+
+    buildBody({
+        inContainerEl,
+        inDataStore,
+        inDom,
+        options: {
+            showActions: true,
+            onEdit: ({ item }) => console.log("edit", item),
+            onDelete: ({ index }) => console.log("delete", index)
+        }
+    });
+
+    buildFooter({
+        inContainerEl,
+        inDataStore,
+        inDom,
+        inServices,
+        inOptions,
+        inEndPoints
+    });
+
+    hookAllListeners({ inContainerEl, inDataStore, inDom });
+};
+
+export { buildTable };

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/AfterMutation/V1/index.js

@@ -0,0 +1,32 @@
+import { buildBody } from "../../../../../BuildBodyVersions/V4/start.js";
+
+const startFunc = async ({
+    inDataStore,
+    inServices,
+    inEndPoints,
+    inTableBody,
+    inVisibleColumnsConfig,
+    inShowSerial
+}) => {
+    try {
+        const dataFromFetch = await inServices.actions.getData({
+            inEndPoint: inEndPoints.read
+        });
+
+        inDataStore.setData(dataFromFetch);
+
+        const dataToShow = inDataStore.getData();
+
+        buildBody({
+            inDataToShow: dataToShow,
+            inTableBody,
+            inVisibleColumnsConfig,
+            inShowSerial
+        })
+    } catch (err) {
+        console.error(err);
+        return;
+    };
+};
+
+export default startFunc;

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/AfterMutation/V2/index.js

@@ -0,0 +1,32 @@
+import { buildBody } from "../../BuildBodyVersions/V4/start.js";
+
+const startFunc = async ({
+    inDataStore,
+    inServices,
+    inEndPoints,
+    inTableBody,
+    inVisibleColumnsConfig,
+    inShowSerial
+}) => {
+    try {
+        const dataFromFetch = await inServices.actions.getData({
+            inEndPoint: inEndPoints.read
+        });
+
+        inDataStore.setData(dataFromFetch);
+
+        const dataToShow = inDataStore.getData();
+
+        buildBody({
+            inDataToShow: dataToShow,
+            inTableBody,
+            inVisibleColumnsConfig,
+            inShowSerial
+        })
+    } catch (err) {
+        console.error(err);
+        return;
+    };
+};
+
+export default startFunc;

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/BuildBodyVersions/V1/buildBody.js

@@ -0,0 +1,16 @@
+import { buildRow } from "./buildRow.js";
+
+const buildBody = ({ inDataStore, inContainerEl, inDom, options }) => {
+    const tableBody = inDom.getTableBody(inContainerEl);
+    const data = inDataStore.getData();
+    const columns = inDataStore.getColumns();
+
+    tableBody.innerHTML = "";
+
+    data.forEach((item, index) => {
+        const row = buildRow({ item, index, columns, options });
+        tableBody.appendChild(row);
+    });
+};
+
+export { buildBody };

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/BuildBodyVersions/V1/buildRow.js

@@ -0,0 +1,49 @@
+import { createRow } from "./createRow.js";
+import { createIndexCell } from "./createIndexCell.js";
+import { createDataCell } from "./createDataCell.js";
+import { createOptionsCell } from "./createOptionsCell.js";
+
+const buildRow = ({ item, index, inVisibleColumns, options, searchValue }) => {
+    const tr = createRow({
+        inClassName: "border-t hover:bg-blue-100 odd:bg-gray-100",
+        inPk: item?.pk
+    });
+
+    appendSerialCell(tr, options?.showSerial, index);
+
+    appendDataCells({ tr, item, columns: inVisibleColumns, searchValue });
+    appendActionCell({ tr, item, index, options, searchValue });
+
+    return tr;
+};
+
+const appendSerialCell = (tr, showSerial, index) => {
+    if (showSerial) {
+        tr.appendChild(createIndexCell(index));
+    };
+};
+
+const appendDataCells = ({ tr, item, columns, searchValue }) => {
+    columns.forEach((key) => {
+        tr.appendChild(createDataCell({
+            value: item[key],
+            searchValue
+        }));
+    });
+};
+
+const appendActionCell = ({ tr, item, index, options, searchValue }) => {
+    // debugger;
+    if (options?.showActions) {
+        tr.appendChild(
+            createOptionsCell({
+                item,
+                index,
+                onEdit: options.onEdit,
+                onDelete: options.onDelete
+            })
+        );
+    };
+};
+
+export { buildRow };

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/BuildBodyVersions/V1/createDataCell.js

@@ -0,0 +1,18 @@
+import { highlight } from "./highlight.js";
+
+const createDataCell = ({ value, searchValue }) => {
+    const td = document.createElement("td");
+    // debugger;
+    td.className = "px-4 py-2 border";
+    // td.textContent = (value ?? "").toString();
+
+    if (searchValue === "") {
+        td.innerHTML = (value ?? "").toString();
+    } else {
+        td.innerHTML = highlight({ text: (value ?? "").toString(), searchValue });
+    };
+
+    return td;
+};
+
+export { createDataCell };

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/BuildBodyVersions/V1/createIndexCell.js

@@ -0,0 +1,8 @@
+const createIndexCell = (index) => {
+    const td = document.createElement("td");
+    td.className = "px-4 py-2 border text-right";
+    td.textContent = index + 1;
+    return td;
+};
+
+export { createIndexCell };

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/BuildBodyVersions/V1/createOptionsCell.js

@@ -0,0 +1,21 @@
+const createOptionsCell = ({ item, index, onEdit, onDelete }) => {
+    const td = document.createElement("td");
+    td.className = "px-4 py-2 border flex gap-2";
+
+    const editBtn = document.createElement("button");
+    editBtn.textContent = "Edit";
+    editBtn.className = "px-2 py-1 bg-yellow-400 text-white rounded";
+    editBtn.onclick = () => onEdit?.({ item, index });
+    // debugger;
+    const deleteBtn = document.createElement("button");
+    deleteBtn.textContent = "Delete";
+    deleteBtn.className = "px-2 py-1 bg-red-500 text-white rounded";
+    deleteBtn.onclick = () => onDelete?.({ item, index, presentPk: item.pk });
+
+    td.appendChild(editBtn);
+    td.appendChild(deleteBtn);
+
+    return td;
+};
+
+export { createOptionsCell };

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/BuildBodyVersions/V1/createRow.js

@@ -0,0 +1,9 @@
+const createRow = ({ inPk, inClassName }) => {
+    const tr = document.createElement("tr");
+    tr.className = inClassName;
+    tr.dataset.pk = inPk;
+
+    return tr;
+};
+
+export { createRow };

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/BuildBodyVersions/V1/highlight.js

@@ -0,0 +1,15 @@
+const highlight = ({ text = "", searchValue = "" }) => {
+    if (!searchValue) return text;
+
+    try {
+        const safeSearch = searchValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // escape regex
+        const regex = new RegExp(`(${safeSearch})`, "gi");
+        // return text.replace(regex, `<mark>$1</mark>`);
+        // return text.replace(regex, `<mark class="bg-yellow-300 px-1 rounded">$1</mark>`);
+        return text.replace(regex, `<mark class="bg-yellow-300">$1</mark>`);
+    } catch (e) {
+        return text; // fallback
+    }
+};
+
+export { highlight };

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/BuildBodyVersions/V1/pureBuildBody.js

@@ -0,0 +1,25 @@
+import { buildRow } from "./buildRow.js";
+
+const pureBuildBody = ({ inData, inVisibleColumns, inContainerEl, inDom, options, searchValue = "" }) => {
+    if (!inData || inData.length === 0) return showNoData({ inContainerEl, inDom });
+
+    buildRows({ inData, inVisibleColumns, inContainerEl, inDom, options, searchValue });
+};
+
+const showNoData = ({ inContainerEl, inDom }) => {
+    const tableBody = inDom.getTableBody(inContainerEl);
+    tableBody.innerHTML = `<tr><td colspan="100%" style="text-align:center;padding:20px;color:#888;font-style:italic;">No records found</td></tr>`;
+};
+
+const buildRows = ({ inData, inVisibleColumns, inContainerEl, inDom, options, searchValue }) => {
+    const tableBody = inDom.getTableBody(inContainerEl);
+    tableBody.innerHTML = "";
+
+    inData.forEach((item, index) => {
+        const row = buildRow({ item, index, inVisibleColumns, options, searchValue });
+
+        tableBody.appendChild(row);
+    });
+};
+
+export { pureBuildBody };

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/BuildBodyVersions/V1/start.js

@@ -0,0 +1,34 @@
+const buildBody = ({ inDataStore, inContainerEl, inDom }) => {
+    const containerEl = inContainerEl;
+
+    const dataToShow = inDataStore.getData();
+    const columns = inDataStore.getColumns();
+    const tableBody = inDom.getTableBody(containerEl);
+
+    tableBody.innerHTML = '';
+
+    dataToShow.forEach((item, i) => {
+        const tr = document.createElement('tr');
+        tr.className = 'border-t hover:bg-blue-100 odd:bg-gray-100';
+
+        const tdIndex = document.createElement('td');
+        tdIndex.className = 'px-4 py-2 border text-right';
+        tdIndex.textContent = i + 1;
+        tr.appendChild(tdIndex);
+
+        columns.forEach(k => {
+            const td = document.createElement('td');
+            td.className = 'px-4 py-2 border';
+
+            const value = (item[k] ?? '').toString();
+
+            td.textContent = value;
+
+            tr.appendChild(td);
+        });
+
+        tableBody.appendChild(tr);
+    });
+};
+
+export { buildBody };

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/BuildBodyVersions/V2/buildBody.js

@@ -0,0 +1,16 @@
+import { buildRow } from "./buildRow.js";
+
+const buildBody = ({ inDataStore, inContainerEl, inDom, options }) => {
+    const tableBody = inDom.getTableBody(inContainerEl);
+    const data = inDataStore.getData();
+    const columns = inDataStore.getColumns();
+
+    tableBody.innerHTML = "";
+
+    data.forEach((item, index) => {
+        const row = buildRow({ item, index, columns, options });
+        tableBody.appendChild(row);
+    });
+};
+
+export { buildBody };

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/BuildBodyVersions/V2/buildRow.js

@@ -0,0 +1,49 @@
+import { createRow } from "./createRow.js";
+import { createIndexCell } from "./createIndexCell.js";
+import { createDataCell } from "./createDataCell.js";
+import { createOptionsCell } from "./createOptionsCell.js";
+
+const buildRow = ({ item, index, inVisibleColumns, options, searchValue }) => {
+    const tr = createRow({
+        inClassName: "border-t hover:bg-blue-100 odd:bg-gray-100",
+        inPk: item?.pk
+    });
+
+    appendSerialCell(tr, options?.showSerial, index);
+
+    appendDataCells({ tr, item, columns: inVisibleColumns, searchValue });
+    appendActionCell({ tr, item, index, options, searchValue });
+
+    return tr;
+};
+
+const appendSerialCell = (tr, showSerial, index) => {
+    if (showSerial) {
+        tr.appendChild(createIndexCell(index));
+    };
+};
+
+const appendDataCells = ({ tr, item, columns, searchValue }) => {
+    columns.forEach((key) => {
+        tr.appendChild(createDataCell({
+            value: item[key],
+            searchValue
+        }));
+    });
+};
+
+const appendActionCell = ({ tr, item, index, options, searchValue }) => {
+    // debugger;
+    if (options?.showActions) {
+        tr.appendChild(
+            createOptionsCell({
+                item,
+                index,
+                onEdit: options.onEdit,
+                onDelete: options.onDelete
+            })
+        );
+    };
+};
+
+export { buildRow };

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/BuildBodyVersions/V2/createDataCell.js

@@ -0,0 +1,20 @@
+import { highlight } from "./highlight.js";
+
+const createDataCell = ({ value, searchValue }) => {
+    const td = document.createElement("td");
+    // debugger;
+    td.className = "px-4 py-2 border";
+    // td.textContent = (value ?? "").toString();
+
+    if (searchValue === "") {
+        // td.innerHTML = (value ?? "").toString();
+
+        td.innerHTML = "aaaaaaaaa";
+    } else {
+        td.innerHTML = highlight({ text: (value ?? "").toString(), searchValue });
+    };
+
+    return td;
+};
+
+export { createDataCell };

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/BuildBodyVersions/V2/createIndexCell.js

@@ -0,0 +1,8 @@
+const createIndexCell = (index) => {
+    const td = document.createElement("td");
+    td.className = "px-4 py-2 border text-right";
+    td.textContent = index + 1;
+    return td;
+};
+
+export { createIndexCell };

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/BuildBodyVersions/V2/createOptionsCell.js

@@ -0,0 +1,21 @@
+const createOptionsCell = ({ item, index, onEdit, onDelete }) => {
+    const td = document.createElement("td");
+    td.className = "px-4 py-2 border flex gap-2";
+
+    const editBtn = document.createElement("button");
+    editBtn.textContent = "Edit";
+    editBtn.className = "px-2 py-1 bg-yellow-400 text-white rounded";
+    editBtn.onclick = () => onEdit?.({ item, index });
+    // debugger;
+    const deleteBtn = document.createElement("button");
+    deleteBtn.textContent = "Delete";
+    deleteBtn.className = "px-2 py-1 bg-red-500 text-white rounded";
+    deleteBtn.onclick = () => onDelete?.({ item, index, presentPk: item.pk });
+
+    td.appendChild(editBtn);
+    td.appendChild(deleteBtn);
+
+    return td;
+};
+
+export { createOptionsCell };

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/BuildBodyVersions/V2/createRow.js

@@ -0,0 +1,9 @@
+const createRow = ({ inPk, inClassName }) => {
+    const tr = document.createElement("tr");
+    tr.className = inClassName;
+    tr.dataset.pk = inPk;
+
+    return tr;
+};
+
+export { createRow };

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/BuildBodyVersions/V2/highlight.js

@@ -0,0 +1,15 @@
+const highlight = ({ text = "", searchValue = "" }) => {
+    if (!searchValue) return text;
+
+    try {
+        const safeSearch = searchValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // escape regex
+        const regex = new RegExp(`(${safeSearch})`, "gi");
+        // return text.replace(regex, `<mark>$1</mark>`);
+        // return text.replace(regex, `<mark class="bg-yellow-300 px-1 rounded">$1</mark>`);
+        return text.replace(regex, `<mark class="bg-yellow-300">$1</mark>`);
+    } catch (e) {
+        return text; // fallback
+    }
+};
+
+export { highlight };

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/BuildBodyVersions/V2/pureBuildBody.js

@@ -0,0 +1,25 @@
+import { buildRow } from "./buildRow.js";
+
+const pureBuildBody = ({ inData, inVisibleColumns, inContainerEl, inDom, options, searchValue = "" }) => {
+    if (!inData || inData.length === 0) return showNoData({ inContainerEl, inDom });
+
+    buildRows({ inData, inVisibleColumns, inContainerEl, inDom, options, searchValue });
+};
+
+const showNoData = ({ inContainerEl, inDom }) => {
+    const tableBody = inDom.getTableBody(inContainerEl);
+    tableBody.innerHTML = `<tr><td colspan="100%" style="text-align:center;padding:20px;color:#888;font-style:italic;">No records found</td></tr>`;
+};
+
+const buildRows = ({ inData, inVisibleColumns, inContainerEl, inDom, options, searchValue }) => {
+    const tableBody = inDom.getTableBody(inContainerEl);
+    tableBody.innerHTML = "";
+
+    inData.forEach((item, index) => {
+        const row = buildRow({ item, index, inVisibleColumns, options, searchValue });
+
+        tableBody.appendChild(row);
+    });
+};
+
+export { pureBuildBody };

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/BuildBodyVersions/V2/start.js

@@ -0,0 +1,36 @@
+const buildBody = ({ inDataStore, inContainerEl, inDom, inShowSerial = false }) => {
+    const containerEl = inContainerEl;
+
+    const dataToShow = inDataStore.getData();
+    const columns = inDataStore.getColumns();
+    const tableBody = inDom.getTableBody(containerEl);
+
+    tableBody.innerHTML = '';
+
+    dataToShow.forEach((item, i) => {
+        const tr = document.createElement('tr');
+        tr.className = 'border-t hover:bg-blue-100 odd:bg-gray-100';
+
+        if (inShowSerial) {
+            const tdIndex = document.createElement('td');
+            tdIndex.className = 'px-4 py-2 border text-right';
+            tdIndex.textContent = i + 1;
+            tr.appendChild(tdIndex);
+        };
+
+        columns.forEach(k => {
+            const td = document.createElement('td');
+            td.className = 'px-4 py-2 border';
+
+            const value = (item[k] ?? '').toString();
+
+            td.textContent = value;
+
+            tr.appendChild(td);
+        });
+
+        tableBody.appendChild(tr);
+    });
+};
+
+export { buildBody };

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/BuildBodyVersions/V3/CreateDataCell/applyRightAlign.js

@@ -0,0 +1,15 @@
+const applyRightAlign = ({
+    td,
+    inCellConfig = {}
+}) => {
+
+    const rightAlign =
+        inCellConfig.rightAlign || false;
+
+    if (rightAlign) {
+        td.classList.add("text-right");
+    };
+
+};
+
+export default applyRightAlign;

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/BuildBodyVersions/V3/CreateDataCell/applyWidth.js

@@ -0,0 +1,12 @@
+const applyWidth = ({
+    td,
+    inWidth
+}) => {
+
+    if (inWidth) {
+        td.style.width = inWidth;
+    };
+
+};
+
+export default applyWidth;

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/BuildBodyVersions/V3/CreateDataCell/createTd.js

@@ -0,0 +1,11 @@
+const createTd = () => {
+
+    const td = document.createElement("td");
+
+    td.className = "px-4 py-2 border";
+
+    return td;
+
+};
+
+export default createTd;

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/BuildBodyVersions/V3/CreateDataCell/getDisplayValue.js

@@ -0,0 +1,23 @@
+const getDisplayValue = ({
+    value,
+    inCellConfig = {}
+}) => {
+
+    const showThousandsSeperator =
+        inCellConfig.showThousandsSeperator || false;
+
+    let displayValue =
+        (value ?? "").toString();
+
+    if (showThousandsSeperator) {
+        displayValue =
+            Number(value || 0)
+                .toLocaleString("en-IN");
+
+    };
+
+    return displayValue;
+
+};
+
+export default getDisplayValue;

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/BuildBodyVersions/V3/CreateDataCell/highlight.js

@@ -0,0 +1,15 @@
+const highlight = ({ text = "", searchValue = "" }) => {
+    if (!searchValue) return text;
+
+    try {
+        const safeSearch = searchValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // escape regex
+        const regex = new RegExp(`(${safeSearch})`, "gi");
+        // return text.replace(regex, `<mark>$1</mark>`);
+        // return text.replace(regex, `<mark class="bg-yellow-300 px-1 rounded">$1</mark>`);
+        return text.replace(regex, `<mark class="bg-yellow-300">$1</mark>`);
+    } catch (e) {
+        return text; // fallback
+    }
+};
+
+export { highlight };

package/bin/table/v2/commands/table/template/v7/BuildTableVersions/V4/BuildBodyVersions/V3/CreateDataCell/index.js

@@ -0,0 +1,43 @@
+import createTd from "./createTd.js";
+import applyWidth from "./applyWidth.js";
+import applyRightAlign from "./applyRightAlign.js";
+import getDisplayValue from "./getDisplayValue.js";
+import setCellContent from "./setCellContent.js";
+
+const createDataCell = ({
+    value,
+    searchValue,
+    inCellConfig = {}
+}) => {
+
+    const width =
+        inCellConfig.width;
+
+    const td = createTd();
+
+    applyWidth({
+        td,
+        inWidth: width
+    });
+
+    applyRightAlign({
+        td,
+        inCellConfig
+    });
+
+    const displayValue = getDisplayValue({
+        value,
+        inCellConfig
+    });
+
+    setCellContent({
+        td,
+        displayValue,
+        searchValue
+    });
+
+    return td;
+
+};
+
+export default createDataCell;