tailwind-table-dom 3.11.2 → 3.12.1

package/bin/table/v3/commands/table/template/v12/Services/setupServices.js

@@ -0,0 +1,14 @@
+// /Services/setupServices.js
+
+// import { createServices } from "./createServices.js";
+import { createServices } from "./V1/createServices.js";
+
+export const setupServices = ({ config, dataStore }) => {
+    const { tableName } = config;
+
+    dataStore.setTableName(tableName);
+
+    return createServices({
+        tableName: dataStore.getTableName()
+    });
+};

package/bin/table/v3/commands/table/template/v12/TableFirstRow/V1/SearchFuncs/index.js

@@ -0,0 +1,45 @@
+const startFunc = ({
+    inContainerEl,
+    inUpdateFooter
+}) => {
+
+    const searchInput =
+        inContainerEl.querySelector(".tableSearchClass");
+
+    const rows =
+        inContainerEl.querySelectorAll("tbody tr");
+
+    // cache once
+    rows.forEach((row) => {
+
+        row.dataset.searchText =
+            row.innerText.toLowerCase();
+
+    });
+
+    searchInput.addEventListener("keyup", (event) => {
+
+        const searchValue =
+            event.target.value.toLowerCase();
+
+        rows.forEach((row) => {
+
+            const rowText =
+                row.dataset.searchText;
+
+            row.style.display =
+                rowText.includes(searchValue)
+                    ? ""
+                    : "none";
+
+        });
+
+        // inUpdateFooter({
+        //     inKSTableContainer: kSTableContainer
+        // });
+
+    });
+
+};
+
+export default startFunc;

package/bin/table/v3/commands/table/template/v12/TableFirstRow/V2/SearchFuncs/index.js

@@ -0,0 +1,85 @@
+const startFunc = ({
+    inContainerEl,
+    inUpdateFooter
+}) => {
+
+    const searchInput =
+        inContainerEl.querySelector(".tableSearchClass");
+
+    const rows =
+        inContainerEl.querySelectorAll("tbody tr");
+
+    // cache once
+    rows.forEach((row) => {
+
+        row.dataset.searchText =
+            row.innerText.toLowerCase();
+
+    });
+
+    let timeout;
+
+    searchInput.addEventListener("keyup", (event) => {
+
+        clearTimeout(timeout);
+
+        const searchValue =
+            event.target.value.toLowerCase();
+
+        // fast filtering
+        rows.forEach((row) => {
+
+            const matched =
+                row.dataset.searchText.includes(searchValue);
+
+            row.style.display =
+                matched
+                    ? ""
+                    : "none";
+
+        });
+
+        // delayed highlight
+        timeout = setTimeout(() => {
+
+            rows.forEach((row) => {
+
+                row.querySelectorAll("mark").forEach((mark) => {
+                    mark.replaceWith(mark.innerText);
+                });
+
+                if (
+                    row.style.display === "none"
+                    || !searchValue
+                ) {
+                    return;
+                };
+
+                row.querySelectorAll("td").forEach((cell) => {
+
+                    const escapedSearchValue =
+                        searchValue.replace(
+                            /[.*+?^${}()|[\]\\]/g,
+                            "\\$&"
+                        );
+
+                    const regex =
+                        new RegExp(`(${escapedSearchValue})`, "ig");
+
+                    cell.innerHTML =
+                        cell.textContent.replace(
+                            regex,
+                            `<mark>$1</mark>`
+                        );
+
+                });
+
+            });
+
+        }, 400);
+
+    });
+
+};
+
+export default startFunc;

package/bin/table/v3/commands/table/template/v12/TableFirstRow/V3/SearchFuncs/V1/index.js

@@ -0,0 +1,106 @@
+const startFunc = ({
+    inContainerEl,
+    inUpdateFooter
+}) => {
+
+    const searchInput =
+        inContainerEl.querySelector(".tableSearchClass");
+
+    const rows =
+        inContainerEl.querySelectorAll("tbody tr");
+
+    // cache row text once
+    rows.forEach((row) => {
+
+        row.dataset.searchText =
+            row.innerText.toLowerCase();
+
+    });
+
+    let timeout;
+
+    searchInput.addEventListener("keyup", (event) => {
+
+        clearTimeout(timeout);
+
+        const searchValue =
+            event.target.value.toLowerCase();
+
+        // fast filter
+        rows.forEach((row) => {
+
+            const matched =
+                row.dataset.searchText.includes(searchValue);
+
+            row.style.display =
+                matched
+                    ? ""
+                    : "none";
+
+        });
+
+        // delayed highlight
+        timeout = setTimeout(() => {
+
+            // clear old highlights
+            rows.forEach((row) => {
+
+                row.querySelectorAll("mark").forEach((mark) => {
+
+                    mark.replaceWith(mark.innerText);
+
+                });
+
+            });
+
+            if (!searchValue) {
+                return;
+            };
+
+            const escapedSearchValue =
+                searchValue.replace(
+                    /[.*+?^${}()|[\]\\]/g,
+                    "\\$&"
+                );
+
+            const regex =
+                new RegExp(
+                    `(${escapedSearchValue})`,
+                    "ig"
+                );
+
+            // highlight only visible rows
+            rows.forEach((row) => {
+
+                if (row.style.display === "none") {
+                    return;
+                };
+
+                row.querySelectorAll("td").forEach((cell) => {
+
+                    cell.innerHTML =
+                        cell.textContent.replace(
+                            regex,
+                            `<mark>$1</mark>`
+                        );
+
+                });
+
+            });
+
+            // // optional footer update
+            // if (inUpdateFooter) {
+
+            //     inUpdateFooter({
+            //         inContainerEl
+            //     });
+
+            // };
+
+        }, 400);
+
+    });
+
+};
+
+export default startFunc;

package/bin/table/v3/commands/table/template/v12/TableFirstRow/V3/SearchFuncs/V2/index.js

@@ -0,0 +1,109 @@
+const startFunc = ({
+    inContainerEl,
+    inUpdateFooter
+}) => {
+
+    const searchInput =
+        inContainerEl.querySelector(".tableSearchClass");
+
+    const rows =
+        inContainerEl.querySelectorAll("tbody tr");
+
+    // cache once
+    rows.forEach((row) => {
+
+        row.dataset.searchText =
+            row.innerText.toLowerCase();
+
+        row._cells =
+            row.querySelectorAll("td");
+
+    });
+
+    let timeout;
+
+    searchInput.addEventListener("keyup", (event) => {
+
+        clearTimeout(timeout);
+
+        const searchValue =
+            event.target.value.toLowerCase();
+
+        // fast filter
+        rows.forEach((row) => {
+
+            const matched =
+                row.dataset.searchText.includes(searchValue);
+
+            row.style.display =
+                matched
+                    ? ""
+                    : "none";
+
+        });
+
+        // delayed highlight
+        timeout = setTimeout(() => {
+
+            // clear old highlights
+            rows.forEach((row) => {
+
+                row.querySelectorAll("mark").forEach((mark) => {
+
+                    mark.replaceWith(mark.innerText);
+
+                });
+
+            });
+
+            if (!searchValue) {
+                return;
+            };
+
+            const escapedSearchValue =
+                searchValue.replace(
+                    /[.*+?^${}()|[\]\\]/g,
+                    "\\$&"
+                );
+
+            const regex =
+                new RegExp(
+                    `(${escapedSearchValue})`,
+                    "ig"
+                );
+
+            // highlight only visible rows
+            rows.forEach((row) => {
+
+                if (row.style.display === "none") {
+                    return;
+                };
+
+                row._cells.forEach((cell) => {
+
+                    cell.innerHTML =
+                        cell.textContent.replace(
+                            regex,
+                            `<mark>$1</mark>`
+                        );
+
+                });
+
+            });
+
+            // optional footer update
+            if (inUpdateFooter) {
+
+                inUpdateFooter({
+                    inContainerEl
+                });
+
+            };
+
+        }, 400);
+
+    });
+
+};
+
+export default startFunc;

package/bin/table/v3/commands/table/template/v12/TableFirstRow/V3/SearchFuncs/V3/index.js

@@ -0,0 +1,216 @@
+const cacheCell = (cell) => {
+
+    cell.dataset.originalHtml =
+        cell.innerHTML;
+
+};
+
+const cacheRow = (row) => {
+
+    row.dataset.searchText =
+        row.textContent.toLowerCase();
+
+    row._cells =
+        [...row.children];
+
+    row._cells.forEach(cacheCell);
+
+};
+
+const cacheRows = ({ rows }) => {
+
+    rows.forEach(cacheRow);
+
+};
+
+const filterRow = ({
+    row,
+    searchValue
+}) => {
+
+    const matched =
+        row.dataset.searchText.includes(searchValue);
+
+    row.style.display =
+        matched
+            ? ""
+            : "none";
+
+};
+
+const filterRows = ({
+    rows,
+    searchValue
+}) => {
+
+    rows.forEach((row) => {
+
+        filterRow({
+            row,
+            searchValue
+        });
+
+    });
+
+};
+
+const resetCellHighlight = (cell) => {
+
+    cell.innerHTML =
+        cell.dataset.originalHtml;
+
+};
+
+const clearHighlights = ({ rows }) => {
+
+    rows.forEach((row) => {
+
+        row._cells.forEach(resetCellHighlight);
+
+    });
+
+};
+
+const highlightCell = ({
+    cell,
+    regex
+}) => {
+
+    cell.innerHTML =
+        cell.innerHTML.replace(
+            regex,
+            `<mark>$1</mark>`
+        );
+
+};
+
+const highlightRow = ({
+    row,
+    regex
+}) => {
+
+    if (row.style.display === "none") {
+        return;
+    };
+
+    row._cells.forEach((cell) => {
+
+        highlightCell({
+            cell,
+            regex
+        });
+
+    });
+
+};
+
+const highlightRows = ({
+    rows,
+    regex
+}) => {
+
+    rows.forEach((row) => {
+
+        highlightRow({
+            row,
+            regex
+        });
+
+    });
+
+};
+
+const updateFooter = ({
+    inUpdateFooter,
+    inContainerEl
+}) => {
+
+    if (inUpdateFooter) {
+
+        inUpdateFooter({
+            inContainerEl
+        });
+
+    };
+
+};
+
+const getRegex = ({ searchValue }) => {
+
+    const escapedSearchValue =
+        searchValue.replace(
+            /[.*+?^${}()|[\]\\]/g,
+            "\\$&"
+        );
+
+    return new RegExp(
+        `(${escapedSearchValue})`,
+        "ig"
+    );
+
+};
+
+const startFunc = ({
+    inContainerEl,
+    inUpdateFooter
+}) => {
+
+    const searchInput =
+        inContainerEl.querySelector(".tableSearchClass");
+
+    const rows =
+        [...inContainerEl.querySelectorAll("tbody tr")];
+
+    cacheRows({ rows });
+
+    let timeout;
+
+    searchInput.addEventListener("keyup", (event) => {
+
+        clearTimeout(timeout);
+
+        const searchValue =
+            event.target.value.toLowerCase();
+
+        filterRows({
+            rows,
+            searchValue
+        });
+
+        timeout = setTimeout(() => {
+
+            clearHighlights({ rows });
+
+            if (!searchValue) {
+
+                updateFooter({
+                    inUpdateFooter,
+                    inContainerEl
+                });
+
+                return;
+
+            };
+
+            const regex =
+                getRegex({
+                    searchValue
+                });
+
+            highlightRows({
+                rows,
+                regex
+            });
+
+            updateFooter({
+                inUpdateFooter,
+                inContainerEl
+            });
+
+        }, 400);
+
+    });
+
+};
+
+export default startFunc;

package/bin/table/v3/commands/table/template/v12/TableFirstRow/V3/SearchFuncs/V4/Cache/cacheCell.js

@@ -0,0 +1,10 @@
+// /TableSearch/Cache/cacheCell.js
+
+const cacheCell = (cell) => {
+
+    cell.dataset.originalHtml =
+        cell.innerHTML;
+
+};
+
+export default cacheCell;

package/bin/table/v3/commands/table/template/v12/TableFirstRow/V3/SearchFuncs/V4/Cache/cacheRow.js

@@ -0,0 +1,17 @@
+// /TableSearch/Cache/cacheRow.js
+
+import cacheCell from "./cacheCell.js";
+
+const cacheRow = (row) => {
+
+    row.dataset.searchText =
+        row.textContent.toLowerCase();
+
+    row._cells =
+        [...row.children];
+
+    row._cells.forEach(cacheCell);
+
+};
+
+export default cacheRow;

package/bin/table/v3/commands/table/template/v12/TableFirstRow/V3/SearchFuncs/V4/Cache/cacheRows.js

@@ -0,0 +1,11 @@
+// /TableSearch/Cache/cacheRows.js
+
+import cacheRow from "./cacheRow.js";
+
+const cacheRows = ({ rows }) => {
+
+    rows.forEach(cacheRow);
+
+};
+
+export default cacheRows;

package/bin/table/v3/commands/table/template/v12/TableFirstRow/V3/SearchFuncs/V4/Filter/filterRow.js

@@ -0,0 +1,18 @@
+// /TableSearch/Filter/filterRow.js
+
+const filterRow = ({
+    row,
+    searchValue
+}) => {
+
+    const matched =
+        row.dataset.searchText.includes(searchValue);
+
+    row.style.display =
+        matched
+            ? ""
+            : "none";
+
+};
+
+export default filterRow;

package/bin/table/v3/commands/table/template/v12/TableFirstRow/V3/SearchFuncs/V4/Filter/filterRows.js

@@ -0,0 +1,21 @@
+// /TableSearch/Filter/filterRows.js
+
+import filterRow from "./filterRow.js";
+
+const filterRows = ({
+    rows,
+    searchValue
+}) => {
+
+    rows.forEach((row) => {
+
+        filterRow({
+            row,
+            searchValue
+        });
+
+    });
+
+};
+
+export default filterRows;

package/bin/table/v3/commands/table/template/v12/TableFirstRow/V3/SearchFuncs/V4/Highlight/clearHighlights.js

@@ -0,0 +1,15 @@
+// /TableSearch/Highlight/clearHighlights.js
+
+import resetCellHighlight from "./resetCellHighlight.js";
+
+const clearHighlights = ({ rows }) => {
+
+    rows.forEach((row) => {
+
+        row._cells.forEach(resetCellHighlight);
+
+    });
+
+};
+
+export default clearHighlights;

package/bin/table/v3/commands/table/template/v12/TableFirstRow/V3/SearchFuncs/V4/Highlight/highlightCell.js

@@ -0,0 +1,16 @@
+// /TableSearch/Highlight/highlightCell.js
+
+const highlightCell = ({
+    cell,
+    regex
+}) => {
+
+    cell.innerHTML =
+        cell.dataset.originalHtml.replace(
+            regex,
+            `<mark>$1</mark>`
+        );
+
+};
+
+export default highlightCell;